1. Web Page Basics XHTML & CSS 1

2. Planning Decide on topic or research the topic given to you. Decide on your colour scheme. Use www.colorschemedesigner to help identify the correct colour hex codes to use. www.colorschemedesigner Collect your images – take them yourself or acquire them from the internet. All images should be optimised for the web in Photoshop. 2

3. Planning Where will I ‘manage’ or keep my web site folder? Decide where you will keep the website. Your website will always be located in one folder. This folder (and all your folders) should be named with a name that is all lowercase, no spaces and if you really want the appearance of a space use the underscore _. I suggest to create this folder in the Documents section for this demonstration. Click on Finder, Create, New Folder and and name the folder (for example – starter_web ) 3

4. Images Create a folder called images (all lowercase) inside your website folder. This is where you will place all of the images that you will use on your web pages. You can copy and paste them into this folder. 4

5. Dreamweaver 1. Open Dreamweaver 2. Click on Site, Manage Sites 3. Click New (for first time set up) 4. Add a site name (eg startersite) 5. Then navigate to the folder that you have set up for saving all your web pages and images (in the images folder). 5

6. Dreamweaver Click Choose Click Save Click Done Now you should see the folder in the files section on the bottom right hand side of your screen. If you do not see the Files section, click on Window and Files. 6

7. Creating your HTML & CSS File File, New, HTML File, Save As Type in the file name – always the first page will be saved as index.html Your home page must be saved as index.html Ensure that the file is saved in the folder you created and logged in your Site Management. File, New, CSS File, Save As Type in the file name I recommend using something like styles.css or mystyles.css 7

8. HTML File Click on the index.html file to make it the active document. 8

9. Linking to CSS file Click on the link button and choose or browse to your.css file which you created earlier. Click Choose, Click OK. If you can’t see this section (CSS STYLES), Click on Window, Css Styles. 9

10. Linked CSS Once the.css file is linked, the code in your index.html file will change to highlight the link. 10

11. Add Code to HTML File Add code to your index.html file Add div’s as per class instruction. Example: Add after the tag and add a closing div before tag. This div will wrap around your webpage. 11

12. Opening section of index.html (for demonstration purposes) Business Name 12

13. Middle section of index.html The Powerwashing Facililty We are a business operating in Counties Cavan and Monaghan offering the following services: Hedge cutting, Power washing for yards, footpaths and outhouses, Lawn Mowing service A friendly, flexible service is guaranteed. Prices are kept as low as we can afford and the customer's satisfaction with work carried out is of utmost importance to us. Work will be carried out at a time suitable for you the customer and our long term customers are able to avail of very competitive rates. 13

14. Last section of index.html 14

15. Corresponding.css file @charset "utf-8"; /* CSS Document */ body { color:#000; width:auto; height:auto; background-color:#093 } #wrapper{ background-color:#0F9; height: 598px; width: 1004px; margin-right: auto; margin-left: auto; line-height: 2em; color: #000; text-align: left; padding-right: 20px; padding-left: 20px; padding-top: 20px; padding-bottom: 20px; font-family: Verdana, Geneva, sans-serif; font-size: 14px; } 15

16. To Edit a Rule in.css file Ensure you are on your index.html file Click in an area of code that you would like to edit (change) Ensure the Current button is active in the CSS STYLES working panel Click on the Edit Rule icon (pencil) 16

17. Edit Rule (Dialogue Box) 17

18. Edit Rule The previous slide shows the Edit Rule Dialogue box for the div “wrapper”. We can now easily make changes to the css of this div. Notice that Box is the active category. This category allows us to change the width and height of our div and then when you click OK – the change will be applied and saved in your.css file. NOTE: Always check that you are changing the rule for the relevant section. 18 Padding and margins are added also in this category. However if you add either, this will affect the overall width The width must then be adjusted.

19. Edit Rule Type Category Click on another category – Type. Here you can choose your font-family, font-size, etc. No fonts were set here as we were happy to go with the default that was set in either the body tag or the wrapper div. 19

20. Edit Rule Background Category This category allows you to set a background colour. You can also add a background image here. These are the main categories that we will be working with. 20