Image viewing on artist website/ How to make a template
2 posts Page 1 of 1
Image viewing on artist website/ How to make a template
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?
Re: Image viewing on artist website/ How to make a template
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
Page 1 of 1