Wednesday 7 November 2012

Design for web: Dreamweaver/ designing webpage

Edit code/ html language to this: Basic code for web layout
If there's is a / in front of a tag, it means a closed html.
Line 1. open
Line 8. closed

'untitled document' - title of the document

Open body and closed body, anything visible in between is going to be the content of the web (written  or imagery)

Once website is saved:
For a website to work you have to have a folder that contain everything in the website, if images and text is external to the folder, the website will not fully function. (root folder)

When designing websites in dreamweaver in college. MUST use user work.
Inside root must be a sub folder

To identify root

Call site name - the folder name (root) 
And choose highlight folder
If done correctly this should appear in local files:
When saving:
The name for the first page that has to be shown is index, not home, as home is an English word.

Save and preview every time you make a change, incase any thing goes wrong mid design.

No name for web page, need to make a custom title. <title>Lisa Burns</title>

Any thing that is visible in between the open and closed body text will appear on the web site once previewed and saved.

To create a 4 page website
   Index.html
html html html
Never copy and paste code, can corrupt code when working in html.
Instead work in css.
Link css to the html pages, no need to re-type codes then.

Do not use default templates.much better to start from scratch.
File, new, blank page, css, create.
2nd line to is a note to the creator.
4th line is body

Type initial F for example 

To end setting just add a semi colon at the end.
Open body {
Close body}
Save css file as 'style sheet'
Attach style sheet to link the two.
See a change in text from standard to arial.
Body edit, font size and colour




Div - division, when you create a layout for the web it is cut up into sections/divisions. 
# container/ wrapper
Save and change over to index.html


containing box, grey
change over to index.html



Positioning, absolute, 0px; to get rid of white border on container.


White space disappears

Edit positioning of columns




No comments:

Post a Comment