Dream Weaver Manual Ver1_5

8/2/2019 Dream Weaver Manual Ver1_5

1/15

Manual ver 1.5

Juying Secondary School


2/15

Dreamweaver Manual ver. 1.5 By Mr. Surya

1

Dreamweaver Manual ver. 1.5

Contents Page

1. Setting up a website 3

2. Manage Sites 3

3. Creating a New Document .. 4

4. First Page of Website .. 4

5. Tables 4

6. Changing the Title of your Webpage 4

7. How to Leave a Space in Dreamweaver 5

8. How to create Line Spacing between paragraphs . 5

9. How to Align to the Top of the Column . 5

10. How to Align to the Center of the Column .. 5

11. Inserting Images . 6

12. Converting Images to other Formats .. 6

13. Creating Hyperlinks .. 6

14. Changing the Page Properties 7

15. Insert Date and Time .. 7

16. Create Template . 8

17. Create Popup Message .. 8

18. Open Browser Window 9

19. Make an Imagemap... 9

20. Insert Hotspots..... 10

21. Insert Marquee . 10

22. Create a Form .. 11


3/15


2

23. Insert Video 12

24. Insert Music 12

25. Rollover Images .. 12

26. Navigation Bar . 13

27. Thumbnail Gallery . 13

28. Web Publishing Checklist . 14


4/15


3

1. Setting up a websitea) Create a root folder

o Root Folder name should be one word preferably, with nospacing and no special characters. (eg.soccer, mickey_mouse,

anime, basketball, flower_shop)

o In the root folder, create 3 folders images music videos

b) Open Dreamweavero Site -> New Site

c) Give your website a name, preferablyone word (same as your root folder)

d) Choose No, I do not want to use aserver technology

e) Select Edit local copies on my machineand Browse to the root folder where you want to

store all your webpages

f) How do you connect to remote server? ChooseNone

g) Press Done!h) You will see the green coloured folder structure as

shown in the Files Panel on the right. Else, you need

to repeat the process from b) to h).

*IMPORTANT: If you are moving from one computer to another computer, you need to repeat the

process from b) to h) above to re-connect the Dreamweaverto your root folder.

2. Manage SitesThis is only necessary if you are switching betweendifferent websites in the same computer.

a) Select the website you want to use and click Done

Sample Root Folder

Same as Root Folder

Site name

Root Folder


5/15


4

3. Creating a New Documenta) Select File -> Newb) Category: Basic Page, Basic Page: HTMLc) Click Create!

4. First Page of Websitea) The first page of your website is

known as the homepage.

b) The file is commonly saved as index

5. Tables

a) This table is useful when you want toresize the table yourself.

b) When you set Border thickness to 0,the border will disappear.

c) Also remember to set theCell padding and Cell spacing to 0.

d) The table on the left is useful when youwant to put a table inside another table,

Eg. Inside the Footer.

6. Changing the Title of your Webpage

No Border

Every Page must have a

differentTitle!!!

No Border


6/15


5

7. How to Leave a Space in Dreamweaver?a) Press Ctrl + Shift + Spacebar to leave a space. Repeat the process to leave more space.

8. How to create Line Spacing between paragraphs?

9. How to Align to the Top of the Column?

10.How to Align to the Center of the Column?

In Property InspectorClick inside Column

In Property InspectorClick inside Column

Single Line Spacing

Press Enter

Move to Next Line

Press Shift + Enter


7/15


6

11.Inserting Imagesa) The first method is to

click on the Image

option in the Insert Bar

b) The second method isto click and drag the

image from the images

folder in the Files Panel

12.Converting Images to other Formatsa) Insert picture in MS Powerpointb) Save as type : JPEG File Interchange

Format (*.jpg)

*IMPORTANT: Pictures in Bitmap (*.bmp) format cannot be directlyimported into Dreamweaver.

They need to be converted to JPEG or other formats first.

13.Creating Hyperlinksa) EmailHyperlink b) Flash Hyperlink

b) Text and ImageHyperlinks (With the text or imagehighlighted, select/type where it needs to be linked to.)

about.html


8/15


7

14.Changing the Page Propertiesa) Under the property Inspector,

select Page Properties

b) Under Appearance,You can change the

Background color &

Background image to

your taste.

c) The other sections arenot important in this

course.

15.Insert Date and Timea) Click inside the column you want to insert the date-time in.b) Select the Split Option from the Document Toolbar.c) Inside the Code Window, Type the following code:

document.write(Date());

d) To change the colour of the date-time, select the text in the Code Window as shown.

e) Go to Property Inspector and changethe font, size and colour as desired.


9/15


8

16.Create Templatea) Start by creating a table with 4

Rows and 1 Column in the index

page.

b) Create a standard template for thewebsite:

Row 1: Header (Navigation Bar) - Fixed Row 2: Banner - Fixed Row 3: Body - Changing Row 4: Footer - Fixed

Date/Time Email Link

c) Duplicate this file as many times as required to create a template site.

17.Create Popup Messagea) Click outside the tableb) Select Tag Inspector Panelc) Choose Popup Message from the Behaviors tabd) Type in the message and choose onLoad.

Header (Navigation Bar)

Banner

Body

Footer


10/15


9

18.Open Browser Windowa) Click on an imageb) Select Tag Inspector

Panel

c) Choose Open Browser Window. Either Type in the URL(Address) of the

website (eg.http://www.hotmail.com)

ORBrowse to Filed) Check Location toolbar boxe) Type a suitable name in

Window name (no capital,

no space and no special

characters!)

f) Press OKg) Finally, in the Property Inspector, type # in the Link and change Alt text.

19.Make an Image MapPart 1

a) Go to MS PowerPointb) Insert ALL the pictures and group them togetherc) Save the image as imagemapd) Save as type : JPEG File Interchange Format (*.jpg)e) Select Current Slide OnlyPart 2

f) To get rid of the white space, open the image using Paint.NETg) Using the rectangle selection tool, select the section to croph) From the Image menu, select Crop to Selectioni) Save the file

pic1_sml.jpg
http://www.hotmail.com/http://www.hotmail.com/http://www.hotmail.com/http://www.hotmail.com/


11/15


10

20.Insert Hotspotsa) Insert the imagemap picture into a webpage document.b) With the picture selected, choose

Hotspot tools (Rectangle, Oval or

Polygon) to create hotspot links on

the picture.c) This method is suitable for linking to

Level 3 pages on your sitemap.

21.Insert Marqueea) Click on the cell in the table where the marquee is to be added.b) Go to code tabc) Type in the codes for marquee

d) After the word marquee, pressspacebar to choose the direction.

e) After selecting direction, you canselect scrollamount to set the

speed. A higher value will make

the scroll speed faster.


12/15


11

22.Create a Forma) Create a form

b) Create a tableinsidethe form

c) Choose the form tabs

d) Insert text field,checkboxes or radio

buttons. Include submit and reset buttons as well.

e) Type into the text fields and ensure they are working by clicking on the Reset button to clearthe fields. Ifnothing happens, redo the above process and try again.


13/15


12

23.Insert Videoa) Create from Movie Makerb) OR Download from hand phone and convert to suitable

format

c) OR Download from digital camerasd) Click on the Plugin button to insert the movie file into

Dreamweaver

24.Insert Music

25.Rollover Images

To insert music files

On

Mouse Over


14/15


13

26.Navigation BarInsert Flash Buttons or other links in the row of your choice (preferably the header) to link to all

Level 1 and Level 2 pages.

27.Thumbnail Gallery Part 1

a) Create a set ofpic1_sml, pic2_sml, and pic1_big, pic2_big, in the images folderb) Create a table to place the images.

pic1_sml pic2_sml pic3_sml



Part 2a) Use the Open Browser Window Method in Point 18 to link to pic1_big, pic2_big etc. You need

to put a# in the Linkto get the hand.

Home Link 2 Link 3 Link 4

Navigation Bar

pic3_sml

pic3_big


15/15

Dream Weaver Manual Ver1_5

Documents

Transcript of Dream Weaver Manual Ver1_5