I became an ambassador for Coffee Cup Software before my page was even on the web. I help promote Coffee Cup Software and attempt to help people to make their web pages better. My page is still growing, and I am still learning myself....
This section of my website will be devoted to the creation of webpages (mostly mine!). I have found various sources in learning both CSS & HTML and will attempt to list them here.
My web page story...
My launch into learning HTML & CSS began with wanting to create a simple menu system for use with PDF files. I work for a service company, and our service manuals are in PDF format. At first I had thought of using a programming language to create my menu. Then I hit upon the idea of creating a local web page on my laptop. This allowed me to have a really cool screen, with access to all of my service manuals using links (I just linked to a local directory on the same computer).
After realizing how easy it was, I made the decision to learn more, and create my first web page. I knew that I would need an HTML editor, and I began to search. Dreamweaver looked ok, but it cost a fortune. While I could use any text editor to create HTML code, I wanted something that allowed testing, etc. - that is when I stumbled upon Coffee Cup Software.
I downloaded the free version of their HTML editor, and was hooked within a few days. I then ordered a complete package that included the editor and various utilities. My menu was created using straight HTML within a few weeks.
Creating my website...
In order to create my actual web page, I sought out various books on both HTML and CSS - here is my list of books.
Web Design Before & AfterCSS Web Site Design
CSS The Designers Edge
These books were all available at my local library. I also ordered "My Website is Better Than Yours" from the people at Coffee Cup Software. This was the book that introduced me to using style sheets.
Just a special note about style sheets: If you have not used them on your site, I would suggest you start. It took me a while to learn the concept, but it allowed me to make a very versatile site! I also found various sources for learning both CSS & HTML on the web. It is amazing how many people have ran into exactly what you are trying to accomplish.
Gallery Page Creation
<html>
<!-- Created with the CoffeeCup HTML Editor 2007 -->
<!-- http://www.coffeecup.com/ -->
<!-- Brewed on 6/25/2007 6:34:01 PM -->
<head>
<title>gallery with tables</title>
</head>
<body>
<!-- -->
<td width="20%" style="text-align: center"></td>
<td colspan="3" style="text-align: center">
<table width="60%" border="1" cellspacing="0" cellpadding="4">
<!-- -->
<tr>
<td style="text-align: center; vertical-align: top" width="33%"><a href="gallery1/dsc_LG_01.jpg"><img src="gallery/dsc_01.jpg" alt=" image 1" name="image" width="80" height="60" border="0" id="image" /></a><br />Canal Pic 1</td>
<td style="text-align: center; vertical-align: top" width="33%"><a href="gallery1/dsc_LG_02.jpg"><img src="gallery/dsc_02.jpg" alt=" image 2" name="image" width="80" height="60" border="0" id="image" /></a><br />Canal Pic 2</td>
<td style="text-align: center; vertical-align: top" width="33%"><a href="gallery1/dsc_LG_03.jpg"><img src="gallery/dsc_03.jpg" alt=" image 3" name="image" width="80" height="60" border="0" id="image" /></a><br />Canal Pic 3</td>
</tr>
<!-- -->
</body>
</html>
The first example was my first attempt at making a gallery page. The page used tables for positioning the images and other page graphics. This example page assumes that the user has a directory called GALLERY1 with both thumbnail images and full size pictures in it.
Original table based version...
As this section of the code is only one row, the code would be duplicated as many times as needed for the number of row/pictures that would be available on the page. You should be able to copy and paste this sample into your html editor and view it.
The LG in the picture file names denotes the full size images. I have left the borders turned on so you can see the tables used in the example.
The table in this document was styled with CSS, but the style was built into each line.
After duplicating this section of the code 6-7 times, it was very confusing to me. The page looked crowded and was difficult to manage. That is when I turned to CSS to see if I could come up with a better way. What follows is what I came up with...
<html>
<!-- Created with the CoffeeCup HTML Editor 2007 -->
<!-- http://www.coffeecup.com/ -->
<!-- Brewed on 6/25/2007 6:34:01 PM -->
<head>
<title>Styled Gallery</title>
<style type="text/css">
hr {
border: none;
border-top: 1px solid #ffffff;
height : 3px;
width : 100%;
}
#galleryone {
width: 500px;
border: none;
margin: 0 auto;
text-align: center;
background-color:#ffffff;
}
.smaller_image img {
margin: 5px 10px 5px 10px;
border: none;
padding: 3px
}
</style>
</head>
<body>
<div id="galleryone">
<a class="smaller_image" href="gallery1/dsc_LG_01.jpg"><img src="gallery1/dsc_01.jpg" alt=" image 1" name="image" width="100" height="75" id="image" /></a>
<a class="smaller_image" href="gallery1/dsc_LG_02.jpg"><img src="gallery1/dsc_02.jpg" alt=" image 2" name="image" width="100" height="75" id="image" /></a>
<a class="smaller_image" href="gallery1/dsc_LG_03.jpg"><img src="gallery1/dsc_03.jpg" alt=" image 3" name="image" width="100" height="75" id="image" /></a>
<a class="smaller_image" href="gallery1/dsc_LG_04.jpg"><img src="gallery1/dsc_04.jpg" alt=" image 4" name="image" width="100" height="75" id="image" /></a>
<hr></hr>
</body>
</html>
New CSS Based Version....
This is the new version of the gallery using CSS (Cascading Style Sheets). As in the other version, the picture sections would be duplicated as many times as needed for the particular gallery page. You should be able to copy and paste this into your html editor to see how it works.
Once again, this assumes that you have a directory called GALLERY1 containing picture files in both thumbnail & larger format. In this example, my thumbnails were 100 pixels wide by 75 pixels high (I wanted slightly larger thumbnails for better visual effect). The large pics (the ones that are loaded when selecting a thumbnail) are 640x480. This size, while not great for printing, is still perfect for displaying on a web page - it also keeps the file size small.
The CSS style sheet has been built into this document for ease of use, but could have just as easily been placed in a seperate file and called upon when the page was displayed.
On my actual gallery page, that is exactly what I have done. Also in my page, I am using a javascript application to avoid the picture being loaded onto a new page. The pictures are selected and appear in a lightbox on top of the page.
My current page shows 36 thumbnails on the page. I could have duplicated the picture section of the code more, but I liked the idea of limiting the size of the particular gallery. This allows me to simply duplicate the page, change the gallery directory within the page, and have a second gallery almost instantly. The second page would use the same file names, but pick from GALLERY2 for example. Take a look at my finished gallery page when you have the chance.
Gallery Update: The Gallery Selection Page
I also created a "gallery selection page" this page is quite self-descriptive. This allows the end user to select which particular gallery that they would like to see (in my case, I have two galleries at this time). The thumbnails on this page were made larger, once again just as a visual aid (I chose to make them 200x150). The larger pictures also separate the galleries from the menu page. This page was created in much the same way as my gallery pages.
