Manual ver 1.

Juying Secondary School

Dreamweaver Manual ver. 1.5

By Mr. Surya

Dreamweaver Manual ver. 1.5

Contents
1. 2. 3. 4. 5. 6. 7. 8. 9.

Page

Setting up a website 3 Manage Sites 3 Creating a New Document .. 4 First Page of Website .. 4 Tables 4 Changing the Title of your Webpage 4 How to Leave a Space in Dreamweaver 5 How to create Line Spacing between paragraphs . 5 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

Dreamweaver Manual ver. 1.5

By Mr. Surya

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

Dreamweaver Manual ver. 1.5 1. Setting up a website a) Create a root folder o Root Folder name should be one word preferably, with no spacing 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 Dreamweaver o Site -> New Site c) Give your website a name, preferably one word (same as your root folder) d) Choose No, I do not want to use a server technology e) Select Edit local copies on my machine and Browse to the root folder where you want to store all your webpages f) How do you connect to remote server? Choose None 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).

By Mr. Surya Sample Root Folder

Same as Root Folder Site name Root Folder

*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 Dreamweaver to your root folder. 2. Manage Sites This is only necessary if you are switching between different websites in the same computer. a) Select the website you want to use and click Done

Dreamweaver Manual ver. 1.5 3. Creating a New Document a) Select File -> New b) Category: Basic Page, Basic Page: HTML c) Click Create!

By Mr. Surya

4. First Page of Website a) 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 to resize the table yourself. b) When you set Border thickness to 0, the border will disappear. c) Also remember to set the Cell padding and Cell spacing to 0.

No Border

d) The table on the left is useful when you want to put a table inside another table, Eg. Inside the Footer.

No Border

6. Changing the Title of your Webpage

Every Page must have a different Title!!!

Dreamweaver Manual ver. 1.5 7. How to Leave a Space in Dreamweaver?

By Mr. Surya

a) Press Ctrl + Shift + Space bar to leave a space. Repeat the process to leave more space.

8. How to create Line Spacing between paragraphs?

Single Line Spacing Press Enter

Move to Next Line Press Shift + Enter

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

Click inside Column In Property Inspector

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

Click inside Column In Property Inspector

Dreamweaver Manual ver. 1.5 11. Inserting Images a)

By Mr. Surya

The first method is to click on the Image option in the Insert Bar The second method is to click and drag the image from the images folder in the Files Panel

b)

12. Converting Images to other Formats a) Insert picture in MS Powerpoint b) Save as type : JPEG File Interchange Format (*.jpg) *IMPORTANT: Pictures in Bitmap (*.bmp) format cannot be directly imported into Dreamweaver. They need to be converted to JPEG or other formats first. 13. Creating Hyperlinks a) Email Hyperlink b) Flash Hyperlink

b) Text and Image Hyperlinks (With the text or image highlighted, select/type where it needs to be linked to.)

about.html

Dreamweaver Manual ver. 1.5 14. Changing the Page Properties

By Mr. Surya

a) 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 are not important in this course.

15. Insert Date and Time a) 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: <script type=text/javascript>document.write(Date());</script>

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

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

Dreamweaver Manual ver. 1.5 16. Create Template a) Start by creating a table with 4 Rows and 1 Column in the index page. b) Create a standard template for the website: Row 1: Header (Navigation Bar) - Fixed Row 2: Banner - Fixed Row 3: Body - Changing Row 4: Footer - Fixed Date/Time Email Link Header (Navigation Bar) Banner Body Footer

By Mr. Surya

c) Duplicate this file as many times as required to create a template site. 17. Create Popup Message a) Click outside the table b) Select Tag Inspector Panel c) Choose Popup Message from the Behaviors tab d) Type in the message and choose onLoad.

Dreamweaver Manual ver. 1.5 18. Open Browser Window a) Click on an image b) Select Tag Inspector Panel c) Choose Open Browser Window. Either Type in the URL(Address) of the website (eg. http://www.hotmail.com) OR Browse to File
pic1_sml.jpg

By Mr. Surya

d) Check Location toolbar box e) Type a suitable name in Window name (no capital, no space and no special characters!) f) Press OK

g) Finally, in the Property Inspector, type # in the Link and change Alt text.

19. Make an Image Map Part 1 a) b) c) d) e) Go to MS PowerPoint Insert ALL the pictures and group them together Save the image as imagemap Save as type : JPEG File Interchange Format (*.jpg) Select Current Slide Only

Part 2 f) g) h) i) To get rid of the white space, open the image using Paint.NET Using the rectangle selection tool, select the section to crop From the Image menu, select Crop to Selection Save the file

Dreamweaver Manual ver. 1.5 20. Insert Hotspots a) 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.

By Mr. Surya

21. Insert Marquee a) Click on the cell in the table where the marquee is to be added. b) Go to code tab c) Type in the codes for marquee

d) After the word marquee, press spacebar to choose the direction.

e) After selecting direction, you can select scrollamount to set the speed. A higher value will make the scroll speed faster.

10

Dreamweaver Manual ver. 1.5 22. Create a Form a) Create a form

By Mr. Surya

b) Create a table inside the 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 clear the fields. If nothing happens, redo the above process and try again.

11

Dreamweaver Manual ver. 1.5 23. Insert Video a) Create from Movie Maker b) OR Download from hand phone and convert to suitable format c) OR Download from digital cameras d) Click on the Plugin button to insert the movie file into Dreamweaver

By Mr. Surya

24. Insert Music

To insert music files

25. Rollover Images

On Mouse Over

12

Dreamweaver Manual ver. 1.5 26. Navigation Bar

By Mr. Surya

Insert Flash Buttons or other links in the row of your choice (preferably the header) to link to all Level 1 and Level 2 pages. Home Link 2 Link 3 Link 4 Navigation Bar 27. Thumbnail Gallery Part 1

a) Create a set of pic1_sml, pic2_sml, and pic1_big, pic2_big, in the images folder b) Create a table to place the images. pic1_sml pic4_sml pic7_sml Part 2 pic2_sml pic5_sml pic8_sml pic3_sml pic6_sml pic9_sml

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

# Link
in the pic3_sml

to get the

hand.

pic3_big

13

Dreamweaver Manual ver. 1.5

By Mr. Surya

28.

Web Publishing Checklist Create a site (Site > New Site) Create page First page called Home with file saved as index Page Properties: Background Image Page Properties: Background Colour

Create a table, 4 Rows 1 Column with No Borders (Border:0, Cell Pad:0, Cell Spa: 0)

- Header (Navigation Bar) - Banner - Body - Footer - Insert date-time script - Email Link Duplicated pages from index page Change the title of every page Merge cells as necessary, Enter text Insert images Create links (hyperlinks) to another page from the index page Create a form with working Submit and Reset buttons Popup Message Open Browser Window (in gallery) 1 more Open Browser Window (in another page eg. Contact Us) Marquee - Moving Text (Horizontal) Marquee - Moving Text (Vertical) Rollover images Create Image Map Insert Hot Spots Create Video Insert Video Gallery (Thumbnails) Flash Button (Navigation Bar) 1 more Flash Button (in another page eg. Contact Us) Clear instructions to users on what to do on certain pages Create Site Map using CMap Tools Generate Site Map from Dreamweaver Documentation

14