Wednesday, 7 November 2012

Design for web // Session 2 // Creating a website


New HTML document

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
- Delete this line and bring the rest up.

<html xmlns="">
- Change this to <html>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- Key words when using within a search engine - key search words
- Delete this

What it should look like:

Line 1 - everything will be in HTML language. Telling the browser what language to speak in. open    HTML

line 2 - Open head - what arent visible in design of website. make website function in a particular way. declare different languages - CSS

Line 3 - title - open and close - title of page.

Line 4 - close head

Line 5 - blank

Line 6 - open body - what is visible in design of the site

Line 7 - close body

Line 8 - /html - ended. the html language has finished. Close HTML

URL - A folder for a wesbite - the website URL goes to this folder. Everything for the website needs to be in this folder for everything to be displayed and work on the website.
Can show error messages because of this.

Root Folder
ALWAYS USE USER WORK TO CREATE THE ROOT FOLDER, dreamweaver wont work otherwise.
- name folder with max of 8 characters - reffering to name of website
- sub folder within this main folder - called images - contains all media matter for website

Connect root folder to dreamweaver

Site > New site

Dialogue box will come up

Fill in site name - name of root folder
locate the root folder

When linked right, it will display in the right hand column and show both root folder and sub folder.

Saving the website
file > save as
It will automatically go to root folder as it is linked to it.
Save within the root folder, not images folder.
Save as 'index.html'. This has to be called this name, so when URL is entered this page will show first, without this no website will show up when URL is searched.

Preview Website

You will see that the title of the website is show in the tab and on the top of the safari page.

Change title to my name, Save the page and go back onto preview

Shows the new title on the webpage.

Adding to the body
Add information into dreamweaver between <body> </body>
Save the file and preview

Shows the text in the main website area.

By using a CSS style sheet you only have to type out all the information that would used on each page once and then you would link this file to the website and all the pages. 

File > New
Blank Page > CSS > Create

Line 2 is a note, this can be written as a note within the code so you know what each section of coding is for. This will not show on the website.

To start formatting text, you would open the coding with body {
- Once this is inputted it will come up with every action that could be used within the coding
- type in the first letter etc and find the coding action to use.

From selecting the specific coding you end the coding by using a semi-colon

To close the body information use a close bracket. 

Linking the CSS stylesheet to the index document use the small 8 figure shape at the bottom of the CSS styles pallete.

The the file to using this dialogue box

It will appear in the index.html file like this above.

Which changes in the browser to this.

We can then add more specifics to the CSS style sheets to change the text on the website. 

This again will appear in the website content area.

From the session today we have created a HTML and CSS document which creates the website.

CSS file

HTML file


No comments:

Post a Comment