CSS
JavaScript
New HTML document
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- Delete this line and bring the rest up.
<html xmlns="http://www.w3.org/1999/xhtml">
- 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.
CSS
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.
FORMATTING TEXT
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
Website
No comments:
Post a Comment