WEB SESSION 3 - 21/11/12

[.DWT]      [.CSS]
|
|
|
[index.html]
|
|
[.html]   [.html]   [.html]   [.html]


Template and CSS apply to all pages, through the index page. 



Make sure website folder has all files within it and in Dreamweaver open up the website as site, Site>manage sites> Browse root folder and click save. The files should now appear in the Local Files window on the right.


NEVER click on the html files and open individually from Finder. Open pages from within Dw local files.


Text goes to edges of column. Need a box model.



If you want a gap between your borders, you need a margin. Padding pads the content. Margin pads the border, if you need. The width and height you specify in CSS is for the CONTENT of your box. So if you add 10px padding, you will have to make the width of the content smaller otherwise your content container will expand and mess up the whole jigsaw of the website layout.





You can see here the 10px extra padding to the column has pushed the third column out, you'll have to minus 20px off the column width to account for the 10px padding on each of the four sides.


20px off height and width. How does it look now?


Looking  good.


Do the same padding and height and width for column 2, the text column...


Works now.


ALWAYS GET THE LAYOUT PERFECT, INCLUDING PADDING, MARGINS ETC. SIMILAR TO GUTTERS FOR PRINT LAYOUT. ONLY THEN CREATE IMAGES, SO YOU DON'T DO IT ALL AGAIN.

As you can see below, the image prepared before changing column widths is now 341px wide, instead of 321px wide. So it's now too big for the left column.

This needs to be 'shopped to 321px wide and refreshed.




Images:
Static image
Image gallery
slideshow


The best slideshows tend to be the free ones.


Now works, simple fix. It's now 321 px



You need to be able to use java from other sources, it's not expected to be able to code java just yet. Web designers share a lot, not precious about their work and set up a lot of tutorials and code-sharing.



LIGHTBOX. Lokesh Dhakar

Lightbox is a very popular image gallery. You can have images and image sets.








CSS folder, JS java script folder comes wen you download it. Along with the images.





We copied over the images, CSS and Javascript. You can even edit the individual features of the slideshow such as the next, previous buttons.



You need a thumbnail of your image, and a full view of your image. Two versions are needed for this type of slideshow. Open up your image in PS


Make sure your thumbains take into account column width and padding. The third column in this case is 320px wide with 10px padding on each side. 





Save a thumbnail and full expanded version.



All you need for lightbox to work is the javascript, CSS and the images, all of which we've put into our root folder now.


You need jQuery framework to make the slideshow work in your website.



Any functionality goes in the <head> tab. This isn't body stuff, but functionality you don't see. 


To make it work on EVERY page, we'll put this in our template.





Paste the 3rd CSS lines afterwards too


Now SAVE the Template and update the files.






Now we need to put this activate code into the index.html right column. You can do this easily by clicking on the right column in design and then going into source code view and it automatically takes you where you need to go.



This code basically says when this thumbnail is clicked, bring up THIS image.

So here I changed my expanded image to the Dan Henderson one.





Works! Jackpot.


You can change the caption too.





Make sure the thumbnail image is closed out by the </a> and not after it.


Added the padding to the third column and it works



Changed the colours really easily through the style sheet




Very easy way to do it is to simply neaten the code up a little and change the file names to the right name so it knows what to look for. Change the caption too and a


Very important to add a slideshow name after red=lightbox[name of slideshow] this is to group fighters together into a slideshow

Works! It knows there's 5 images in the slide show and the captions work too.



To move the navigation to the bottom is very easy, the pixel dimensions still all fit just like a jigsaw, just need to re order. Go back into the TEMPLATE as we want this to apply to all pages and simply move the navigation <div> underneath the columns and it reorders it so the columns are now on top of the navigation.






Working With VIDEO

Recommended to use Vimeo instead of Youtube. Especially for a design website. Fancybox is very similar to lightbox but it also supports video.






For sound: Use Soundcloud and customise the embed codes.






0 comments:

Post a Comment