By next tuesday, produce a working index page. Have your entire design produced and prepared.
If you finish the bare bones in the next two weeks, we can speak to the tutors to produce something more complicated.
To Open:
\
This preload allows images to instantly load:
How to enter a rollover image:
'A Href' - Links to whatever. You use a hastag to show as nothing.
Creating Pages :
You simply save the page as 'work.html', changing text to 'this is my work page'. Ensure this is saved into the root folder. After now having all the html files for each page, each page can easily be edited.
Creating a Grid System For The Layout:
We have a website which is 1028 x 768 or 1028 x 668 without the top bar.
We're going to produce a two column layout, using the CSS box model.
Content, banner, border and margin. We're gong to specify padding on the edges.
1024 divided by 2: 512px
We chose to use a 30 pixel padding on the edge. We also plan to use a 20 pixel in the gutter, as well as top and bottom.
Width : 1024 -60 = 964. Divide that by 2 for each section: 482.
Height : 668 - 40 = 628 px.
Left Column: #left{
width:482px;
height; 628 px
padding-right:10px;
Left Column: #right{
width:482px;
height; 628 px
padding-left:10px;
To work out content width, you have to minus the margin, border and padding.
Creating the left column in stylesheet CSS:
It's key to produce a scamp as well as a wireframe (in order to work things out planned)
Type this into the index page to apply CSS:
Welcome to my homepage.
</div>
<div id="right">
image goes here..
</div>
The Result:
Filling With Placeholder Text
<br> - break in text
In CSS:
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
color:#333;
}
h1 {
font-size:18px;
font-style:italic;
color:#333
}
On Source Code:
<h1> Welcome to my homepage. </h1>
You cannot use images from Google You have to use a stock library, which has a charge. For this brief, you can use Google Images.
Adding An Image To The Website:
Audio / Video takes up a large file for your website. You can upload video onto vimeo, and use soundcloud for audio.
If you want an image gallery, you can use 'lightbox' to produce a gallery, with changeable arrows.
