Web Publishing

Manual ver 1.4

Juying Secondary School

Dreamweaver Manual ver. 1.4 By Mr. Surya

1

Contents Page

Dreamweaver Manual ver. 1.4

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 a Collage ……………………………………………………….………………………. 9

20. Image Map (Hotspot) ………………………………………………………………………. 10

21. Insert Marquee ………………………………………………………………………………. 10

22. Create a Form ………………………………………………………………………………….. 11


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


3

1.

a) Create a root folder

Setting up a website

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

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

This is only necessary if you are switching between different websites in the same computer.

Manage Sites

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

Sample Root Folder

Same as Root Folder

Site name

Root Folder


4

3.

a) Select File -> New

Creating a New Document

b) Category: Basic Page, Basic Page: HTML c) Click Create!

4.

a) The first page of your website is

First Page of Website

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

d) The table on the left is useful when you want 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 different Title!!!

No Border


5

7.

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

How to Leave a Space in Dreamweaver?

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 Inspector Click inside Column

In Property Inspector Click inside Column

Single Line Spacing Press Enter

Move to Next Line Press Shift + Enter


6

11.

a) The first method is to click on the Image option in the Insert Bar

Inserting Images

b) The second method is to click and drag the image from the images folder in the Files Panel

12.

a) Insert picture in MS Powerpoint

Converting Images to other Formats

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.

a) Email Hyperlink b) Flash Hyperlink

Creating Hyperlinks

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

about.html


7

14.

a) Under the property Inspector,

Changing the Page Properties

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.

a) Click inside the column you want to insert the date-time in.

Insert Date and Time

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.


8

16.

a) Start by creating a table with 4

Create Template

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

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

17.

a) Click outside the table

Create Popup Message

b) Select Tag Inspector Panel

c) Choose Popup Message from the Behaviors tab

d) Type in the message and choose onLoad.

Header (Navigation Bar)

Banner

Body

Footer


9

18.

a) Click on an image

Open Browser Window

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

d) Check Location toolbar box

Browse to File

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

a) Go to MS PowerPoint

Part 1

b) Insert ALL the pictures and group them together c) Save the image as “collage” d) Save as type : JPEG File Interchange Format (*.jpg) e) Select Current Slide Only

f) To get rid of the white space, open the image using Paint.NET

Part 2

g) Using the rectangle selection tool, select the section to crop h) From the Image menu, select Crop to Selection i) Save the file

pic1_sml.jpg

http://www.hotmail.com/�


10

20.

a) Insert the collage image into a webpage document.

Image Map (Hotspot)

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.

a) Click on the cell in the table where the marquee is to be added.

Insert Marquee

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.


11

22.

a) Create a form

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

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.

buttons as well.


12

23.

a) Create from Movie Maker

Insert Video

b) ORformat

Download from hand phone and convert to suitable

c) OR Download from digital cameras d) 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


13

26.

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.

Navigation Bar

27.

•

Thumbnail Gallery

a) Create a set of pic1_sml, pic2_sml,… and pic1_big, pic2_big,… in the images folder

Part 1

b) Create a table to place the images.

pic1_sml pic2_sml pic3_sml



•

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

Part 2

Home Link 2 Link 3 Link 4

Navigation Bar

pic3_sml

pic3_big


14

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

Documents

Web Publishing