Continuing on from last week...
Test the design every time you make a change to test it works!
*
How to remove the 5px border from around the container
- Delete float left and position relative from the container css code
- Position: Absolute;
- Top: 0px; (giving it x and y co-ordinates)
- Left: 0px;
*
Central alignment
- margin left is half of the size we are working with
- always stays center even if you re-size the browser
*
Converting index page in to a template (DWT File)
- Insert -> template objects -> editable regions
- never use capital letters or spaces when naming things
- Code will look like this:
- File -> Save as template -> name it template -> Save -> Update links -> Yes
- Now you get a second sub folder
- Go to root folder and delete initial index page as otherwise changes won't be shown
- File -> New -> Page from template -> File -> Save as -> Index.html (or cmd+n then cmd+s)
*
Rollover Images
- Open photoshop -> New document (set up for screen, 72pi, RGB colour, transparent background for lower file size) Height 50px Width 100px
- Two layers, one with a change to the type
- File -> Save for web -> PNG 24 (lowest file size when working with transparency) -> Save
(Save files as .JPG when the background isn't transparent)
- Buttons inside the navigation bar
- Insert -> Image objects -> Rollover image
- Type in image name and find original and rollover image
- Format text so that there is a space between each button and the /div is not until the end of the buttons
- File -> Save all -> (Update template for all)
*
CSS Box model for padding
- Overall width for right hand column 462px - padding 10px all around so = 462-20=442px image
- Add padding in css:
-Because the padding is 20px, I have taken this off the original width and height
- You can see the text on the right doesn't have padding, but the text on the left does, and so fits better
- Save an image off the web, make sure it is saved as the lowest file size on photoshop - in this case a low quality jpg (as there is no transparent background)
- Insert image on to index page
- Now there is something in each column the background colour can be taken off
*For next weeks session bring your own images and content you want going on your website*
