Designing Your Web Pages in Dreamweaver

How to Link Your Web Pages

To move something around, click on the outside of it until a blue box appears. You can then move it where you want.

To insert a picture, banner or piece of text into your website, you need to make a box for it to go into.

Go to ‘Insert’ and choose ‘Layout Object’ then ‘AP Div’.

Dreamweaver will make a blue box in the top left hand corner of the web page.

You can then move it into place

To insert a Fireworks document or image, first insert an AP Div box for the image to go inside.

To insert a picture, drag it in from the right hand side menu. Scale or re-size the image by clicking inside it (not the AP Div box)

To insert text, first insert an AP Div box for the text to go inside. Then click inside the box and start typing.

To edit text, highlight all the text inside the AP Div box.

To edit text, once your text is highlighted, click on the CSS button on the bottom left hand corner of the screen.

You can change the size, font, and position of your text from the Properties menu at the bottom of the page

*You will not be able to link any of your pages unless you have made all your web pages and saved them in your ‘Website’ folder.

1. In your Dreamweaver page, click on one of the buttons in the nav bar.

2. In the ‘Properties’ menu, the ‘Hyperlink’ options will then appear. Using one of the ‘Hotspot’ tools, draw a box over the top of one of your buttons.

3. If this message appears, you need to write the name of the button in the ‘Alt’ box at the bottom of the page.

4. In the ‘Properties’ menu at the bottom of the page, click on the folder icon and in the drop down menu next to ‘Look in’, browse for your web page in your ‘My Documents’ work area.

If you know the exact name that you saved the web page as, you can type that into the ‘Link’ and add .html on the end e.g. recipes.html or contactus.html (remember not to use any spaces or capital letters). The name of the web page should then appear in the ‘Link’ box at the bottom of the page.

Preview in your browser to test it out!

It’s really important that you look in the ‘My Documents’ (with a capital, big M) as Dreamweaver will default to a temporary ‘my documents’ (small m) area. Click on the page you want.