Introduction to Dream Weaver

8/9/2019 Introduction to Dream Weaver

1/28

Introduction to

Dreamweaver


2/28

Contents

1. Files2. Getting started3. Tables4. Images5. Saving6. Previewing7. Fonts8. Style sheets9. Hyperlinks10. Frames11. Opening an existing file

2


3/28

Files and Folders

1. The first thing you need to do is create folders foryour website

2. Inside your ICT folder rightclick with your mouse andchose New >> Folder

3. Name your folder website

4. Inside your website folder make 3 new folders.Images,Information and Webpages.

5. Save any written information, images and thewebpages you are making in the appropriate folders.

3


4/28

Getting started

1. Open up Dreamweaver

2. From the Create New menu select HTML

3. Dreamweaver will open on a new blank page.

4. We will work in Design view but you can also workin Code view. Click on Code and see what happens.

4


5/28

Tables

You should use tables on every page in Dreamweaver.

This will allow you to put text and images next to eachother.

1. There are 2 ways of putting a table on the page. Thefirst is to use the Table icon on the tool bar.

2. The second is to use the Inset menu andchose table

3. The table option box will appear.

Fill in the number ofrows andcolumns you need

Leave the table width at 200pixels.

Fill in the Border Thickness. Ifyou do not want to see the tableon your webpage chose 0.

Press OK.

4. The table will appear in the corner of the page.

5


6/28

5. Use the black squares to stretch the table to the sizeyou need.

6. Highlight the cells in the top row and right click withyour mouse. Chose Table >> Merge Cells

7. Write your title in the space available

8. Other options on the table menu include Insert Row,Insert Column, Delete a Row.

Images

1. Save all your images in to your Website / Imagesfolder.

6


7/28

2. You must save your images as .JPG or .GIF. Otherfile formats cannot be viewed in Dreamweaver.

3. If your image is a .BMP, then copy and paste it in to

Paint and saves as .JPG

4. Click on the cell in your table that you would like toput your image in to.

5. There are 2 ways to insert an image. Use theImage icon on the tool bar OR

6. Go to Insert Menu >> Image and Browse for yourfile

7. Select your fileand press OK.

7


8/28

8. Adjust your column width by clicking and draggingthe columns

9. The Properties Box at the bottom of the pageallows you to change the size of the image.

10. Change the position of the image by clicking next toit, and choosing the horizontal and verticalpositioning in the Properties Box.

8


9/28

A Rollover Image is one which changes when you holdyour mouse over it.

11. Click on the cell in your table that you would like toput your Rollover Image in to.

12. There are 2 ways to insert a Rollover Image. Usethe Rollover Image icon on the toolbar OR

13. Go to Insert Menu >>Image Objects >>RolloverImage

14. Browse for your Original Image. Then Browsefor your Rollover Image. Once the two file pathsappear press OK.

9


10/28

Now is a good time to save and preview your work

Saving

1. Chose File >> Save All

10


11/28

2. Browse to your Website folder. Rename your file andsave.

Previewing

1. To Preview you website go to the

Preview icon >> Preview iniexplore

2. You can also press F12 on the keyboard

11


12/28

Fonts

1. Chose the desired font from the font list in theproperties box

2. If you would like to use a font that isnot displayed in the font list choseEdit font List

12


13/28

3. Select the font you require from the list. Click on

the two arrows icon to add it to the font list. Whenyour font appears in the left hand side of your listpress OK.

4. 4. You can now apply the new font as in step 2.

5.

Change the size of your font in the properties box.

Dont forget to chose points this way it will be a sizeyou recognise.

6. Change the colour of your font in the propertiesbox.

13


14/28

7. Change the position and weight of your font in theproperties box.

8. Change the horizontal and vertical alignmentof the text in the properties box.

Stylesheets

If you want to use consistent font styles throughout yourwebsite you need to make a style sheet.

1. Right Click on your websitechose CSS Styles >> New

2. Change the Selector Type to Tag

14


15/28

2. Change the Tag to H1.

This will set the Style for Heading 1

Press OK

3. Chose a sensible file name for your style sheet (e.g.

stylesheet1) and save it in your webpages folder.

4. Select theHeading 1 Stylesyou require

15


16/28

5. Use the blockmenu to changethe fontalignment

6. When you are happy with your heading 1 styleschose OK

7.

To create a Heading 2 style.Right click on your page chosecss styles >> manage styles

8. Select your style sheet and chose edit, then new

16


17/28

9. Select the tag you wish to edit (probably H2), andfollow steps 4, 5 and 6.

To apply your style.

9. Click on your text and select the style you requirefrom the format menu in the properties box.

10. You can apply your style sheet to all your pages.

On a new page. Right click and chose css styles >>manage styles

17


18/28

11. Chose attach >>browse

12. Browse for your style sheet

13. Press OKthen OKthen Done.

18


19/28

Hyperlinks

1. Making a link to an external webpage. Click on theimage or highlight the text you want to link from.Paste in the website URL to the Linkbox.Remember to include http://

2. If you are using Frames you may also wish to changethe target. This determines where your link willopen:

19


20/28

Blank: New PageParent: Main pageSelf: Current page

20


21/28

3. Making a link to a different page on your website.Click on the image or highlight the text you want tolink from. Right click with your mouse and chosemake link. Chose the page you want to link to and

press OK.

4. Dont forget to change your Target if you need to.

5. Making a link to a different section on the samepage. Click on the image or highlight the text youwant to link to. Click on the Anchor icon on thetoolbar. Name your Anchor press OK.

21


22/28

6. You will see a little anchor appear next to the image.

7. Now click on the image or highlight the text you wantto link from. Right click with your mouse and chose

make link. Nextto the file name type #LinkName.Change the relative to: box to document.

Frames

22


23/28

1. Make a new page call it menu. Fill in the menuoptions on the page. Save and close

2. Go to File New

3. Select framesets from the left hand menu and selectthe layout from the centre menu. Press Create

23


24/28


25/28

5. Go to Window and chose Frames. This selects allyour frames at once. You will see a small image ofyour frameset appear in the bottom right handcorner of the screen.

6. Go to File Save Frameset as. Type a sensible nameand click save. This will save all frames as 1 file.

25


26/28

7. Highlight your first menu item. Right click and chosemake link. Select the file you want your link toopen and click OK.

8. With the link still highlighted change the target toMainFrame. This will allow yourchosen page to open on the righthand side of the page.

26


27/28

9. Repeat this process for your other links. Rememberto change the target to MainFrame.

10. When you have created your links chosefile >> save all. If you are promptedsave your frames with the defaultnames.

11. Preview your website and test that the links work

Opening Existing Files

1. Browse to your folder and right click on your file.

Chose Edit with Dreamweaver MX 2004.

27


28/28

Documents

Introduction to Dream Weaver