HOW TO SET UP A BASIC WEBSITE IN MACROMEDIA DREAMWEAVER 8

STEP 1

step_1

 

STEP 2: Click the folder button to browse to your folder Website on the I-Drive.

step_2


STEP 3: Do the same for your images folder. Then hit OK.

step_3

 

STEP 4: This is your new site. The file structure was set up for your Independent Study in Session B.

step_4

 

STEP 5: If you expand both folders you'll see the image files you've been saving there.

step_5

 

STEP 6: Now you'll make your first web page.

step_6

 

STEP 7: Choose a basic html page and click create.

step_7

 

STEP 8: Save the new page immediately (this helps Dreamweaver understand your links).

step_8

 

STEP 9: Save it in your Website folder as index.html (every web site should have an index.html)

step_9

 

STEP 10: You can now see index.html in your Website directory. Insert an image on your index page.

step_10

 

STEP 11: Dreamweaver will know to look in your default images folder first if you set that correctly in Step 3. Click OK.

step_11

 

STEP 12: You will be asked for an alternative text which will show when you mouse over the image in a browser or if the image link is broken.

step_12

 

STEP 13: Place your cursor off the image itself so that the page itself is selected. Then select Page properties from the menu window at the bottom.

step_13

 

STEP 14: Select an appropriate background colour and click Apply then OK.

step_14

 

STEP 15: Create 2 more web pages following steps 6-14 above. Save them as yourlastname_one.html and yourlastname_two.html

step_14

 

STEP 16: Click on the index image and selct the rectangular hotspot tool (at the bottom left) from the picture properties menu.

step_16

 

STEP 17: Click and drag the mouse to draw a hotspot around an appropriate part of your image. The click and drag the target icon to the page you want to link your hotspot to. The red text in this example was placed on the image in PhotoShop.

step_17

 

STEP 18: Try a circular hotspot for your second link. Select the arrow at the bottom left if you want to shift or resize the image after you've created it.

step_18

 

STEP 19: As an example: this link will go from the most different of Hamish's 81 models to the page showing a fully textured version of it.

step_19

 

STEP 20: This link will go to the development images page when I create it later.

step_20

 

STEP 21: Make sure you save all your pages (they will show an asterisk * next to the file name if they haven't been saved recently) and then hit F12 to view your site in a browser.

step_21


Done.

For now.