Activity 23

First if you would like to Copy the Project 2 folder from the Workshop folder to your own named folder and then you will have to define your Project 2 site in Dreamweaver first, look back at Activity 20 if you are unsure how to do this.

For the first Activity in this section we will put some text and format it in the index page of the Project 2 website.

• Open the Word document Introducing the Blackmore Vale in the Project 2 Resources folder in the Workshop folder go to Edit > Select All then Edit > Copy or Right click Copy.
• Select Dreamweaver from the task bar and make sure the Index page is open.
• Highlight Main Content Here, Right click your mouse and Select Paste from the menu. Your text will be pasted into Dreamweaver.

The Paragraphs and the fonts etc have all been transferred into Dreamweaver but you have to format the headings.

• Click anywhere in "Introducing the Blackmore Vale" go to the Format box in the Properties Inspector and choose Heading 1. The heading will be formatted which includes a line under it which was specified in the CSS sheet.
• Do the same for the other headings "About the Vale", "Famous People" and "Agriculture" but give them a Heading 2

Now we will add some text to the Right Content box

• Follow the instructions above but using the Towns and Villages Word document in the Project 2 Resources folder in the Workshop folder.
• Give a Heading 2 to "Towns & Villages in the Vale"
• Save and Preview your page in IE

We will not do anything else in this column for now but you will be able to format the Towns and Villages into lists in Activity 28 and add external links in Activity 31

Activity 24

If you click on the cross + on the images folder in the file panel you will find there are a number of images in this folder. I would like you to put stur.jpg and vale_view.jpg in your index page. These images have been prepared in Photoshop, copied into the images folder and optimised for the web. (Imaging for the web is a course on its own!)

• Click on vale_view.jpg in the file list to highlight it.
• Hold your mouse button down and drag to the very start of the first paragraph.
• Release your mouse
• The Image Tag Accessibility Attributes dialogue box should open.

• Enter View of the Blackmore Vale from Shaftesbury into the Alternative text box.
• Click OK
• Your image will be in your page and if you click on it you will see its attributes in the Property Inspector. You can always alter or add to the alt tag here.

OK it doesn't look very good does it but we will cure that!

• Make sure the image is selected by clicking on it you will know it is selected as the image Properties Inspector will show.
• Go to the Common menu and Click the Insert Div tag button
• The Insert Div Tag dialogue box will open
• Make sure Wrap around selection is selected in the Insert box
• Select imgleft in the Class box
• Click OK
• Your image should have a thin border round it and the text should wrap to it.

• Save and Preview your page in IE

Try adding another picture into this page, this time stur.jpg.

• Drag the file as before to the front of the paragraph beginning "Land use in the Blackmore Vale..." under the Agriculture heading.
• Add "Sturminster Newton town centre" in the Alternative text box.
• Insert a div tag as before but this time Select imgright from the Class box.
• Save and Preview your page in IE

NOTE: You can also add images using the Common menu you will need to Click where you want the image to appear, Click the Image button on the Common menu and browse for the file. I find the method above a lot quicker.

Activity 25

In this activity we will make a Terms of Use page for our Project 2 site. We will need to crate a new page from a preformatted template.

• Open the template folder and then Open the template.htm page in your Project 2 website
• Before you edit this page we will Save As to the page you want, so you don't alter your template page.
• Go to File > Save As Browse for the pages folder and type terms in the Save As dialogue box.
• Click Save a Warning box will ask you if you want to Update the links Click Yes - Important!
• In the Title box at the Document toolbar at the top of the Document window type in Terms of Use before the dash. You want the title to be Terms of Use - The Blackmore Vale - Dorset
• Open the Word document Terms of Use in the Project 2 Resources folder in the Workshop folder go to Edit > Select All then Edit > Copy or Right click Copy.
• Select Dreamweaver from the task bar and highlight the Content here in the Terms of use page Right Click and Select Paste from the menu. Your text will be pasted into Dreamweaver.
• Format the headings with Heading 1 and 2 (See Activity 23 if you are not sure how to do this)

NOTE: You can add a Top of the page Link using a Library item this is covered in Activity 30

We will be creating a link for this page in the Project 2 website in Activity 26 - Adding and Altering a Library item

Activity 26

The footer of the pages in the Project 2 website are empty except for the name footer. We are now going to add footer text from the Dreamweaver Library and then alter it.

• Open all your html pages in the Dreamweaver document Window (contact, population, terms, template and index htm)
• On any one of your pages delete the word footer at the bottom of the page
• Click on the Assets panel and make sure the Library button is selected. If you are not sure how to do this look at Using Library items in Dreamweaver on the Top Tips page.
• Select the footer library item and drag it with your mouse to the footer area on the page.
• Do this on the rest of your pages and File > Save All

NOTE: Don't worry about the background colour it won't show on your website!

We are now going to make changes to your Library file. There are a couple of ways you can open it.

1. Double click on the footer in the Library list in the Assets panel
2. Click on the footer Library item in any page and click the open button in the Properties Inspector

• We want a link to the Terms of Use page and an email link. Use Point to file to link to the terms.htm (You will probably have to look at Activity 29 for this)
• Then add an email link. Click behind 2006 in the footer library page and type Email:
• Click on the envelope button in the Common Insert menu and type in the email address in both the Text box and E-Mail box and Click OK

NOTE: You don't have to have the email link in the text box it could be something else like Webmaster! `

You have now finished updating your Library page go File > Save or [Ctrl + S] when the Update Library items dialogue appears Click Update. It will then show you a Update pages dialogue box which will show you a log of the pages that have been updated and any that haven't.

Make sure its finished going through the files and then Click Close . Your footer should have been updated in all your pages. Save them and have a look!

Activity 27

• Open the Word document Contact Us in the Project 2 Resources folder in the Workshop folder go to Edit > Select All then Edit > Copy or Right click Copy.
• Select Dreamweaver from the task bar and make sure the contact.htm page is open.
• Highlight Content Here, Right click your mouse and Select Paste from the menu. Your text will be pasted into Dreamweaver.

You will be adding some styles to format this page.

• Format the heading to heading 1 (See Activity 23 if you are not sure how to do this)
• Attach a style to the titles Address, Telephone, Fax and email by highlighting each word and choosing lgetext in the Style menu in the Properties Inspector
• Format the style of the address, telephone and FAX number and email address by highlighting each one at time and selecting indent from the style menu.