Unit10: CSS |
|
2009-10 |
|
Menu |
Notes for Assignment 11a Start with a simple web page with a few headings and text as illustrated before or available here. Save this - you'll need this 'clean' copy later. 1b Change the size, style and colour of the headings and paragraph using the Dreamweaver Properties panel - an example is available here. Save the amended web page with a different name. 1c Print the code - it may be easier to copy and paste it into Notepad to do this - for both pages to illustrate the 'unnecessary' code. 1d Now use the 'clean' web page and, using Code View in Dreamweaver, change the tags for the first heading to <h1> and </h1>. Do the same with <h2> <h3> and <h4> for the other heading sizes. the <p> tags can be left as they are where you want normal paragraph text to remain. 1e The next step is to make a CSS stylesheet. In DreamweaverMX you can use File|New|CSS stylesheet to get a partially completed sheet. You probably won't want the code provided so delete the tags and make your own. Here's an example of a simple stylesheet. Note the way the code is entered. The structure is important. For example: p {font-family: Arial; font-size: 12px; color: black;} Note the curly brackets, colons and semi-colons! If you miss one, or put it in the wrong place the browser will just ignore it and give you what it likes! There are lots of settings available which you can use later. For now, keep it simple! Save the stylesheet in the same folder as your 'clean' web page. Dreamweaver should add the .css suffix but if you've used Notepad ensure you add the .css suffix. 1f Now you need to put a line of code in the web page to which the stylesheet is to apply. This code will be similar to: <link rel="stylesheet" type="text/css" href="css-sample2.css" /> and goes just before the </head> tag in Code View. Save the web page with a new name. 1g As long as the tags you changed match the tags in the stylesheet and you have the structure correct, a preview of your web page should show the sections have changed. Print both the CSS stylesheet and the code for the web page. The 4 print-outs should demonstrate your ability to incorporate CSS in a web page. There are alternative methods as described on the Notes page which you can refer to in a brief summary of what you have achieved, together with the advantages of using CSS in this type of circumstance. More notes |
Page updated 22 September, 2009 Content and design © Andrew Hill |
|