      
What were making
In this tutorial, we will be creating a web page that can be used for a gallery, an easy way of showing your portfolio of works or photography, etc. The page will be coded in XHTML 1.0 Strict and CSS3 valid, our CSS won't even have any warnings on them apart from one. So the first thing we need to do is set up a base structure for the XHTML. Below is the code for this. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> As you can see, our DOCTYPE tells the browser that we are using XHTML 1.0 strict. What's the difference between HTML and XHTML? XHTML coding is a lot more clearer then HTML, since it all needs to be lowercase, it's horrible seeing uppercase tags such as these <META HTTP-EQUIV... nasty eh? Our CSS will be styling divs, our main base structure will all be used with id in mind, because we are only using them once. So what do these divs do for us? Container This will contain everything in one, a simple way of keeping everything in order. heading This will be our heading. For this tutorial, we'll just do a simple text heading which will come later. main The main area of our content, just will keep our content areas in order. left The left area of our content, we can add large previews of the images here. right The right area of our content, where we will add the thumbnails of our images. clear This gets rid of any outstanding floating divs, it's crucial for floating divs to have this. copyright Our copyright message. Starting the Stylesheet So it's time to start our stylesheet, call it style.css since it's what we have in our XHTML document. And we first start off by setting everything to having no margins or paddings. *{Then we move onto the next crucial styling, the body. Choose a background, text colour, family, size, etc. body{The heading Time to add a heading into this, so enter in some text in the HTML. <div id="heading">iGallery</div> If you now view it, yea, it doesn't look very bright does it? But now comes the CSS for this area. We first want to add the CSS for the container. We want this to be in the center of the page, so we can use the margin for that. #container{When we're styling something that uses the ID for it's identifier, we use # infront of the name. If we're using a class for it's identifier, we using a period ( . ) - classes are for when we're using more of the same thing, but since we're only using container, header, left, right, clear and copyright once. We use id. Ok so we're getting a bit more on our css, to style the heading text. #heading{We make the text-size larger, and make it bold. Simple. Now it looks more like a heading. The left side Now we're going to concentrate on the left side of this layout. But before we can, we need to set out our main div. Then carry on with the CSS of the left side. #main{And since we're using this for a large preview, let's just add a dummy image and text for now. <div id="left"> The image tag, part of the difference between HTML and XHTML. XHTML requires you to include the alt attribute, and also the trailing slash ( / ) at the end. But wait a minute, we're using line breaks? Oh no the won't do at all, we'll sort this one out later. Now if you view what we have so far, you'll notice that our image and dummy text has gone over the background of the container. This is where the clear div comes in, which you'll very soon find out (Except for IE 7) That's the Right Side Time for the right side of our main area. Here we will be showing all the thumbnails for the images, exciting huh? #right{Yea another very simple one. And just some dummy images for the thumbnails. <div id="right"> My thumbnails are 150x50. But doesn't mean you have to keep to the same size, because our space, it's more sensible to have something like 70x70. Check the page in a browser again. Now before we finish this section, let's get the container background fixed so it covers everything. We use the clear div to do this. #clear{Ok, it's great, it's working in IE and Firefox. I don't have any other browsers so I'm not too sure on the others like Opera. The copyright Ok we got one more section left for the basic structure, copyright. This is simple. Enter in your copyright text. <div id="copyright">This design is created by David Ambler for the XHTML and CSS Gallery layout.</div> and the css. #copyright{Very simple. Now we want to start adding more details. So turn to the next page and we'll continue. The details So first off, we'll do something about this description text for the images. It looks so bad. Take off the line breaks, <br /><br /> and we'll now add some divs. <img src="double.jpg" alt="Double Vision" width="340"/> That's what's now in my right div. As you can see we've added two new div tags. One for title, one for description. Now we need to make a style for these. #title{Much better? I think so. Now let's make these thumbnails more exciting. We'll add a larger border to the thumbnails, we can use this by adding a border in CSS to all img tags in the div ID of right. #right img{So what this means is: In the div ID of right, where there are img tags, add a 2px border. In the div ID of right, where there are img tags that the mouse hovers over, have this 2px border. That's pretty much finished. But how are we going to show the images? Well it's your lucky day, I'm going to show you even more now, javascript to swap the images round. The javascript Before we can even swap the large preview round, we need to set an id onto this image. <img id="largeimg" src="double.jpg" alt="Double Vision" /> Now we want to add an url to one of the previews, just for an example you know. <a href="mystery.jpg" onclick="javascript:swapImage('mystery.jpg','Mystery','A photograph I took of some smoke. For fun.'); return false;"><img src="mysterythumb.jpg" alt="Mystery" /></a>We make the href, which we link to the actual image in case the user has their javascript turned off it will go to to that. Then we use onClick to activate our javascript, I've named the javascript swapImage since that what we're doing. In this we are changing three things, the image, the title, the description. in the brackets, you got three bits enclosed in single quotes. First one is the image url, then it's the title, then the description. Now we add our javascript to that page, but just like the CSS, we'll have the javascript on a seperate page. <script src="swapimage.js" type="text/javascript"></script> Add this below the line we add our CSS into the page. Now for teh javascript itself. function swapImage(image,title,description) {What we're doing. Line 1. We start our function, with the image, title and description. Line 2. Make a variable for the title we already have now. Line 3. Make a variable for the description we already have now. Line 4. We change swap the text of our title with what we have in the javascript. Line 5. (Read above but for description instead) Line 6. empty... Line 7. We change the image with id largeimg and the src to the image we put in. Line 8. We change the imge with id largeimg and the alt to the title we put in. Line 9. End function. It's really that simple. Now the next couple of pages will be the pages in full code, it's my own completed "iGallery" so the images won't be the same as in this one. You can see a live preview of this creation here! Index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Style.css *{swapImage.js function swapImage(image,title,description) { 
Dig this tutorial?
Thank the author by sending him a few P2L credits!
nitr0x
I am a web developer and a graphic designer experienced in HTML, XHTML, Javascript, PHP, MySQL and CSS. My graphic skills consist of using Cinema 4D, 3DS Max and Photoshop. 
|
