- we will be working with HTML, CSS and Javascript
- create new HTML document
- Dreamweaver is a WYSIWYG programme, e.g design view
- even a website that is a blank page has ten lines of code
- Line 1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" not needed
- Line 4: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> not needed
- this is the most basic website you could have
- Line 1: says that from this point onwards we will be speaking in HTML language (open)
- Line 8: means that we have finished speaking in HTML (close)
- Line 2 and 4: <head> </head> things that aren't visible on the design but make it function in a certain way
- Line 3: will not be seen as it is in the head tag but gives the page a title
- Line 6 and 7: <body> </body> where the design coding will go
- every single website is a folder on another computer, typing in the web address gives you access to this folder
- for a website to work everything needs to be contained within one folder
- you need to create a route folder (practiceweb) and a sub folder (images)
- name the folder in lower case
- need to tell Dreamwevaer where this folder is: site > new site > (name site) > (locate route folder)
- if this is done correctly the images folder will now display in the 'files' panel
- now save: file > save as.
- you would think to call it 'home' but not because it is an english word and the internet is international. Every single website in the world has to have the same file name that is 'index.html'
- once saved it will also show up in the 'files' tab
- to preview on the internet click on the globe icon and select a browser
- you must save and preview in browser every time you make a change, then if something goes wrong you can easily identify it
- give your site a title and add something to the body tab
- HTML is quite limited so we will start working in CSS
- from the homepage (index.html) we will have three other pages
- never copy and paste html, another reason to work in CSS
- we will work with a cascading style sheet, which means we only have to type it out once and it can be linked to all the pages
- file > new > blank page > CSS
- default code two lines
- Line 1: what type of keyboard
- Line 2: note to creator, not part of code
- to choose your font family go through as shown below then add a semi colon to end the action
- add a curly bracket to complete
- save as 'stylesheet.css'
- to link your stylesheet to the index page click on the link icon on the 'index' tab than select your stylesheet
- it will then add this to your HTML and the changes will appear on your webpage
- to specify the font colour and size click enter after the semi colon, type 'font' and specify the size. Then semi colon again and type 'colour' and pick your colour
Re-create our layout using CSS
- create a DIV (division), #container, have to use a # because it doesn't correlate with anything in HTML
- add dimensions for width and height and code for background colour
- go onto 'index'. Remove type from body tag and add DIV id, then close the DIV
- create navigation bar
- to center navigation
- to add columns
- to position columns and navigation
- to position page
Final Outcome
No comments:
Post a Comment