Today we are making a start on creating the website we drew up in last weeks session. To do this we will be working with Adobe Dreamweaver. To start with we set up a new HTML document
HTML is generally just for text and simple images, For more complex imagery
different coding is needed.
This is the code for the initial blank site. We deleted '1' and everything but '<html' on the number 2
Terms
</head> - anything with a '/' in front of the word means you finish talking about this here.
Head is how the website functions- nothing from this is visible. Anything in this section can be searched for on google.
meta tag - key searchable words via search engine.
This is the simplest website you could have. We have deleted the unnecessary HTML lines.
Anything that you want to be visible on the site needs to be between <body> and </body>
Keep all files in the same folder when designing a site.
Include Images folder within the Main ROOT folder.
Any videos/audio/images need to go in this folder.
Next we clicked site, then new site
After we renamed the site we saved it in the user work file.
Every website in the world has there homepage saved as index.html as it is global and everyone round the world can understand this coding.
We were able to change the website title using the title box on the right. If we were to create this in WORD or TEXT EDIT we would just insert the title between <title> - </title>
If you type any text into the design screen it will be included in the code.
Times New Roman will be used as this is the default text.
CSS - Cascading Style Sheets
File > New > Blank Page > CSS > Create
This line of code is for notes, anything between the /* /* will be seen in the CSS code.
body { - Everything you type after the ' { ' will be related to the body.
Select correct drop down, in this case we chose the font family
We decided on Arial
; Semi Colon means end code.
Linking the Pages together.
To link the HTML page with the CSS we need to click on the little chain button on the index page,
then attach the CSS file using the above menu.
By pressing 'F' we can change the font size.
We can change the colour by typing color: > then choosing our desired colour.
Creating The Container
div = Divide-ant - rectangles, squares....
div id - div identifier
We copied
<div id="container">
</div>
into the HTML code in the body section
We keyed in the correct size values.
By adding a # in front of the container it will identify it in HTML
Creating the Navigation Bar
# = Identifier
In CSS code we created the navigation bar
Then in index we added the navigation bar.
Using the tab button we can shift text over to help keep it organised
Make sure you always close the div box
</div>
and remember - ;
Positioning
To position it we followed the above code. We managed to get rid of the white bar at the top
We then aligned all the columns correctly.
This is how the site looks.
No comments:
Post a Comment