Web Publishing by Surya V

Manual ver 1.4

Juying Secondary School

Dreamweaver Manual ver. 1.4

By Mr. Surya

Dreamweaver Manual ver. 1.4 Contents

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 a Collage ……………………………………………………….………………………. 9 20. Image Map (Hotspot) ………………………………………………………………………. 10 21. Insert Marquee ………………………………………………………………………………. 10 22. Create a Form ………………………………………………………………………………….. 11

Dreamweaver Manual ver. 1.4

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.4 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.4

By Mr. Surya

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

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.4

By Mr. Surya

7. How to Leave a Space in Dreamweaver? 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.4

By Mr. Surya

11. Inserting Images a)

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

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

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.4

By Mr. Surya

14. Changing the Page Properties 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=â&#x20AC;?text/javascriptâ&#x20AC;?>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.4

By Mr. Surya

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

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.4 18. Open Browser Window

By Mr. Surya pic1_sml.jpg

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

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 a Collage Part 1 a) b) c) d) e)

Go to MS PowerPoint Insert ALL the pictures and group them together Save the image as “collage” 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.4

By Mr. Surya

20. Image Map (Hotspot) a) Insert the collage image into a webpage document. b) With the image selected, choose Hotspot tools (Rectangle, Oval or Polygon) to create hotspot links on the image. c) This is called an image map. d) This map is suitable for linking to Level 3 pages on your sitemap.

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.

Dreamweaver Manual ver. 1.4

By Mr. Surya

22. Create a Form a) Create a form

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.

Dreamweaver Manual ver. 1.4

By Mr. Surya

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

24. Insert Music

To insert music files

25. Rollover Images

On Mouse Over

Dreamweaver Manual ver. 1.4

By Mr. Surya

26. Navigation Bar 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

pic2_sml

pic3_sml

pic4_sml

pic5_sml

pic6_sml

pic7_sml

pic8_sml

pic9_sml

Part 2

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

pic3_sml pic3_big

Dreamweaver Manual ver. 1.4

28.                                 

By Mr. Surya

Web Publishing Checklist Create a site (Site > New Site) Create page First page called Home saved as index Page Properties: Background Image Page Properties: Background Colour Create a template, 4 Rows 1 Column with No Borders - Header (Navigation Bar) - Banner - Body - Footer - Insert date-time script - Email Link Duplicated pages > from the template Change the title of every page Merge cells as necessary, Enter text Insert images Create hyperlinks/hotspots (when using image map) Create a form Popup Message Open Browser Window Marquee - Moving Text (Horizontal) Marquee - Moving Text (Vertical) Rollover images (need to have 2 pictures – on/off) Collage Image Map Create Video using Windows Movie Maker Insert Video Gallery (Thumbnails) Flash File (Optional) Flash Button Insert Music Generate Site Map Documentation