Dream Weaver Manual Ver1_5
Transcript of Dream Weaver Manual Ver1_5
-
8/2/2019 Dream Weaver Manual Ver1_5
1/15
Manual ver 1.5
Juying Secondary School
-
8/2/2019 Dream Weaver Manual Ver1_5
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
-
8/2/2019 Dream Weaver Manual Ver1_5
3/15
Dreamweaver Manual ver. 1.5 By Mr. Surya
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
-
8/2/2019 Dream Weaver Manual Ver1_5
4/15
Dreamweaver Manual ver. 1.5 By Mr. Surya
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
-
8/2/2019 Dream Weaver Manual Ver1_5
5/15
Dreamweaver Manual ver. 1.5 By Mr. Surya
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
-
8/2/2019 Dream Weaver Manual Ver1_5
6/15
Dreamweaver Manual ver. 1.5 By Mr. Surya
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
-
8/2/2019 Dream Weaver Manual Ver1_5
7/15
Dreamweaver Manual ver. 1.5 By Mr. Surya
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/2/2019 Dream Weaver Manual Ver1_5
8/15
Dreamweaver Manual ver. 1.5 By Mr. Surya
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.
-
8/2/2019 Dream Weaver Manual Ver1_5
9/15
Dreamweaver Manual ver. 1.5 By Mr. Surya
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
-
8/2/2019 Dream Weaver Manual Ver1_5
10/15
Dreamweaver Manual ver. 1.5 By Mr. Surya
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/ -
8/2/2019 Dream Weaver Manual Ver1_5
11/15
Dreamweaver Manual ver. 1.5 By Mr. Surya
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.
-
8/2/2019 Dream Weaver Manual Ver1_5
12/15
Dreamweaver Manual ver. 1.5 By Mr. Surya
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.
-
8/2/2019 Dream Weaver Manual Ver1_5
13/15
Dreamweaver Manual ver. 1.5 By Mr. Surya
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
-
8/2/2019 Dream Weaver Manual Ver1_5
14/15
Dreamweaver Manual ver. 1.5 By Mr. Surya
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
pic4_sml pic5_sml pic6_sml
pic7_sml pic8_sml pic9_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
-
8/2/2019 Dream Weaver Manual Ver1_5
15/15