登录 | 注册 | FAQ
Anonymous

Image viewing on artist website/ How to make a template

+ 发表回复

2 篇帖子 分页: 1 / 1


Image viewing on artist website/ How to make a template

Maffia » 周五 11月 12, 2010 8:59 pm

Hello HTMLers,
I am concerned that I have chosen a time consuming/inefficient method for viewing enlarged versions of my images.
As I previously mentioned, I laid my images out in a grid on one page and then I hyperlinked each image to a separate page on which you can view each one individually in a larger size. That is making my site around 50pages or more. (Seems like too many pages since my text editor,Bluefish, doesnt seem to allow me to create templates and I don't know how to use SSIs to make global changes to my site.)

I downloaded Simpleviewer but I don't like its layout.

Is there a way to magnify my images right on the same page?
Or does anyone have any alternative ideas for viewing my artwork?

Here is the HTML that I used:
<body>
<div id="content">
<h1 id="navbar">
<a href="Jessica Maffia Homepage.htm"<span class="jessicamaffia"><span class="namespace">jessica maffia</span></span>
<a href="Jessica Maffia Drawings.htm">drawings</a>
<a href="Jessica Maffia Assemblages.htm">assemblages</a>
<a href="Jessica Maffia Photography.htm">photography</a>
<a href="Jessica Maffia Bio.htm">bio</a>
<a href="Jessica Maffia Website Contact.htm">contact</a>
</h1>

<hr id="underline">

<p id="drawings">drawings</p>

<div align="center">
<a href="Jessica Maffia Drawing1.htm"><img src="DRAWING1.jpg" id="drawingleg" width="144" height="96" alt="drawing: leg" style="padding: 25px;" border="0"/></a>
<a href="Jessica Maffia Drawing2.htm"><img src="DRAWING2.jpg" id="drawinghandonleg" width="144" height="96" alt="drawing: hand on leg" style="padding: 25px;" border="0" /></a>
<a href="Jessica Maffia Drawing3.htm"><img src="DRAWING3.jpg" id="drawinghandonarm" width="144" height="96" alt="drawing: hand on arm" style="padding: 25px;" border="0" /></a>
<a href="Jessica Maffia Drawing4.htm"><img src="DRAWING4.jpg" id="drawingprofile" width="144" height="96" alt="drawing:profile" style="padding: 25px;" border="0" /> </a>


<br />

<a href="Jessica Maffia Drawing5.htm"><img src="DRAWING5.jpg" id="drawinghandonknee" width="144" height="96" alt="drawing:hand on knee" style="padding: 25px;" border="0" /></a>
<a href="Jessica Maffia Drawing6.htm"><img src="DRAWING6.jpg" id="drawingprofile2" width="144" height="96" alt="drawing: profile2" style="padding: 25px;" border="0" /></a>
<a href="Jessica Maffia Drawing7.htm"><img src="DRAWING7.jpg" id="drawingfeet" width="144" height="96" alt="drawing:feet" style="padding: 25px;" border="0"/></a>
<a href="Jessica Maffia Drawing8.htm"><img src="DRAWING8.jpg" id="drawingback" width="144" height="96" alt="drawing: back" style="padding: 25px;" border="0"></a>

<br />

<a href="Jessica Maffia Drawing9.htm"><img src="DRAWING9.jpg" id="drawingwomanlaying" width="144" height="96" alt="drawing: woman laying" style="padding: 25px;" border="0" /></a>
<a href="Jessica Maffia Drawing10.htm"><img src="DRAWING10.jpg" id="drawinghandacrossbreasts" width="144" height="96" alt="drawing: hand across breasts" style="padding: 25px;" border="0" /></a>
<a href="Jessica Maffia Drawing11.htm"><img src="DRAWING11.jpg" id="drawingwomanchest" width="144" height="96" alt="drawing: woman chest" style="padding: 25px;" border="0" /></a>
<a href="Jessica Maffia Drawing12.htm"><img src="DRAWING12.jpg" id="drawingwomanface" width="144" height="96" alt="drawing: woman face" style="padding: 25px;" border="0" />
</div>
</div>
</body>

And the CSS:
#navbar {
display:block; margin-left:auto; margin-right:auto;
word-spacing: 15px;
}

span.namespace {word-spacing: -7px;}

#underline {
width: 800px;
color: black;
}


h1 {font-family: courier new; font-weight: lighter; font-size: 10pt; text-align: center;}

a{text-decoration: none;}

a:link {
color: black;
}

a:visited {
color: black;
border: none;
}

a:active {
color: red;
text-transform: uppercase;
border: none;
}

a:hover {
color: black;
font-weight: bold;
text-transform: uppercase;
border: 0;
}

span.jessicamaffia {font-size: 30pt; font-weight: lighter;}

#drawings {font-family: courier new; font-size: 16pt; text-align: center;}

.largeimage {display: block; margin-left: auto; margin-right: auto;}

Thank you for all of your help
-Jessica

PS Any ideas on how to create a Master page/template?
头像

Maffia

  • 帖子: 11
  • 注册: 周四 11月 04, 2010 11:01 pm

Re: Image viewing on artist website/ How to make a template

Maffia » 周六 11月 20, 2010 11:29 pm

Hello Cubesquare,
I have watched the first of Lisa's videos and appreciate the straightforward intro to CSS. Will watch the others little by little. I am intimidated by this SSI talk but will look into it as well. And I so appreciate your taking the time to respond so thoroughly and to validate my code. Will go back in and check it.

Thank you!
-jessica
头像

Maffia

  • 帖子: 11
  • 注册: 周四 11月 04, 2010 11:01 pm


+ 发表回复

分页: 1 / 1