1

Preparation for site

• Create a folder in MyDocuments: beavercheese. Create a subfolder, images

• www.cookiesetton.com• Classes, career, DW beginner• Download text in beaver cheese folder &

images in image folder. Make sure to unzip.

Web Site Design

Cookie Settonwww.cookiesetton.com

2

3

4

5

For this class, save on your flash drive or save under My Documents and make sure to email document to yourself before the class ends.

6

7

We will begin a simple web site• I have prepared the images that you will be using for this site.• Create a folder on your flash drive: Beaver Cheese. Inside the folder, create

a subfolder titled images.• Open the zip file and unzip the images.• Save the files in the folder you created and the images in the image folder.• Start a new document. File, new, blank page, HTML, create.• Save file as index.html• We are working in design mode. Change to Split, change to code.Create a table• Insert menu, table, Rows – 2 , Columns – 1, border 2, table width - 200, cell

padding & spacing, later. • Split the 1st row – click into the 1st cell & in the properties

panel, click split into 2 rows.• Split the last row into columns – click into cell & split into 3 columns.

8

Add a TitleYou can add the title in 4 different ways, but which ever you choose, remember to add it.

As you can see from the image below, over 46 million websites do not contain a title.

1. Enter it in the title box2. When the title tag is selected in page

properties 3. In the code.4. Modify Page Properties

Change the size of the table•Modify menu, table, select table•In the properties panel, select 1005 pixels, enter

•Enter 178 in the W box. – left. Repeat on the right side – 178 -Make the center W 664 -View the code

9

View page in Internet Explorer• Save your work• Click F12• You should be able to see the table.• Remove the border by changing border in the

property inspector to 0

Insert a graphic Banner• Click into the 1st cell, Insert, image• Navigate to the images folder, click the beaver

cheese banner. View the code.

10

Adding text

•Open index page text . Double click it from the files menu

•Select all the contents and copy

•Select the 3rd row, middle column & paste

•Preview on the Internet.

Formatting Text•Select all the text & change the font to Verdana.•Change the size to 14.

Insert the title name before the paragraph: Our Family font size 16, Bold, dark red, then press enter. If asked for CSS name – type .style 1 and save it as it to the entire site

11

Adding Styles to Text• Select text, “Behold the mysterious healing power of Beavercheese.” • Change the Format to heading 1. • Then click the page properties to change the color to dark red to match the title.

Change the default size to 24 and the font to Arial.• Use bullets to highlight certain text• Select from toothache to common cold. Add bullets. If the font style changed, select

again and change to style1.• Highlight the paragraph, BeaverCheese will cure….. And indent the text.• Highlight the bulleted section and indent it. • Preview in the browser.

12

Create site using CSSType :“Header Nav Left Main Right Footer “ Select all, insert div, “wrapper”, #header {float: left; height: 200px;width: 1005px;}#nav {float: left; height: 24px;width: 1005px; }#left {float: left; height: 300px; width: 178px;}#main {float: left; height: 300px; width: 649px;}#right {float: left; height: 300px; width: 178px;}