Web Page Basics XHTML & CSS 1. Planning Decide on topic or research the topic given to you. Decide on your colour scheme. Use

1

Web Page BasicsXHTML & CSS

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.

Collect your images – take them yourself or acquire them from the internet. All images should be optimised for the web in Photoshop.

http://www.colorschemedesigner/

3

PlanningWhere 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)

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.

5

Dreamweaver1. 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).

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.

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

8

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

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.

10

Linked CSS Once the .css file is linked, the code in your index.html file

will change to highlight the link.

11

Add Code to HTML File Add code to your index.html file

Add div’s as per class instruction.

Example:

Add <div id=“wrapper”> after the <body> tag and add a closing div </div> before </body> tag. This div will wrap around your webpage.

12

Opening section of index.html

(for demonstration purposes)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Business Name</title>

<link href="mystyles.css" rel="stylesheet" type="text/css" />

</head>

13

Middle section of index.html

<body>

<div id=“wrapper"> 

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.

</div> 

14

Last section of index.html

</body></html>

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;

}

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)

17

Edit Rule (Dialogue Box)

18

Edit RuleThe 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.

Padding and margins are added alsoin this category. However if you addeither, this will affect the overall widthThe width must then be adjusted.

19

Edit RuleType 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.

20

Edit RuleBackground 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.