1

Adobe Dreamweaver CC Tutorial

The design of the Web site

content1.html content2.html content3.html content4.html content5.html

index.html

main.html

header

content Contact us

sidebar1

footer

Click

Links

Media

Girls’ toys

Boys’ toys

2

Setting up Your Website in Dreamweaver

1. Upzip MyWebSite.zip onto your Desktop. 2. Launch Dreamweaver. 3. Site New Site… 4. Name your website “MyWeb” (or another name you prefer) as shown below. 5. Locate your MyWebSite folder. 6. Click the Save button.

Step 4

Step 5

3

index.html

1. File New 2. Check to make sure that in the “New Document” window, “New Document” is selected, the

document type is “HTML” and the Doc Type field is “HTML5”. Input “Index” in the “Title” field. Click “Create”.

3. File Save As… 4. Name the file as “index.html” under your web folder.

4

5. View Split Code-Design

6. File Page Properties 7. In the “Page Properties” window, make sure that “Appearance (CSS)” is selected. Change the

“Background image” to “image/index_bg.jpg”. (You can browse for the file by clicking the Browse… button.) Select “repeat” in the “repeat” field. Click “OK”.

Design view

Code view

5

8. In the Code view (at the bottom half of the window), check your internal style sheet:

9. Insert HTML Div. The “Insert Div” window will appear. 10. Set the “ID” field to “myAPDiv”. Click “New CSS Rule” button. The “New CSS Rule” window

will appear.

11. The “New CSS Rule” window appears. Click the “OK” button. The “CSS Rule definition for

#myAPDiv” window will appear.

6

12. Select the “Positioning” tab. In the field “Position”, select “Absolute”. Click OK.

13. Check your internal style sheet again:

14. In the box of the “Div” you have just created, you should find the text “Content for id "myAPDiv"

Goes Here”. Replace this text by a rollover image by Insert HTML Rollover Image.

7

15. In the “Insert Rollover Image” dialog box, set the “Original image” to “image/index_gundam.jpg” and set the “Rollover image” to “image/index_click.jpg”. Set the “when clicked, Go to URL” field to “main.html”. Click “OK”.

16. File Save.

main.html

1. File Open 2. Select “mainTemplate.html” 3. File Save As… 4. Save the file as “main.html” 5. Close “mainTemplate.html”. We will be working only on “main.html” in the following steps. 6. File Page Properties…

8

7. Under the Title/Encoding category, specify “main” for the page title. Click OK.

8. In the “CSS Designer” panel, select “All”, delete the Selectors including a. ul.nav, b. nl.nav li, c. ul.nav a, ul.nav a.visited, d. ul.nav a.hover ul.nav a.active ul.nav a:focus.

How is the appearance of the webpage affected?

9

9. Delete all text in the “content” block. 10. Duplicate “Link four” in the Design view and change it to “Link five”:

11. In the Code view, change the “Link one” to “Boys’toys”, “Link two” to “Girls’toys”, “Link three”

to “Media”, “Link four” to “Contact us”, and “Link five” to “Links”

12. In the Code view, enter the web address for each link:

13. In the Design view, highlight the five links, then right click and select List None.

10

14. Delete all other text in the “sidebar1” block. 15. In the “content” block, add an IFrame by Insert HTML IFrame. 16. In the Code view, replace <iframe> by:

<iframe src="content1.html" name="rightFrame" width="750"

height="750" scrolling="auto" frameborder="0">

17. In the Code view, for each of the sidebar1 links, in the <a> tag, add target = "rightFrame".

18. Change the text in the footer to “Smart Toy Shop”. 19. In the “CSS Designer” panel, add the “background-image” property for the “header” block and set

it to url(image/header_bg.jpg).

20. In the Code view, check the section of code in the internal style sheet for the .header selector. It

should look like this:

11

21. Double click the “Insert_logo” picture on the top left corner of the page in the Design view. Choose “image/logo.jpg” as the source and set the “Link” to “index.html”.

22. Save the Web page file.

content1.html

1. Create a new empty HTML 5 page. Change the title to “Boys’ toys”. Save it as “content1.html” in your web folder.

2. Insert a two by two table by clicking Insert HTML Table 3. Insert a rollover image (using “image/fig01.jpg” and “image/fig02.jpg”) in column 1 of the row 1. 4. Insert a rollover image (using “image/fig03.jpg” and “image/fig04.jpg”) in column 1 of the row 2. 5. Input some descriptions about the products in the column 2. 6. File Save.

content2.html

1. Similarly, create a page called “content2.html” in your web folder. Insert a two by two table. Insert a rollover image (using “image/fig05.jpg” and “image/fig06.jpg”) in column 1 of the row 1. Insert a rollover image (using “image/fig07.jpg” and “image/fig08.jpg”) in column 1 of the row 2. Input some descriptions about the products in the column 2.

2. File Save.

12

content3.html

1. Create a new empty HTML 5 page. Change the title to “Media”. Save it as “content3.html” in your web folder.

2. In the Design view, insert “HTML5 Video” (Insert HTML HTML5 Video) 3. Double click the “HTML Video” object. In the “Properties” panel, change the “Source” to

“media/myvideo.mp4”, change the “Poster” to “media/myvideo.jpg”. 4. File Save.

content4.html

1. Create a new empty HTML 5 page. Change the title to “Contact us”. Save it as “content4.html” in

your web folder. 2. In the Design view, input the information of the company. 3. Input a Google map into the Web page.

a. Search for a location in Google Maps in your web browser. b. Click the SHARE button. Click the “Embed a map” button. Click the “COPY HTML” button.

13

4. In the Code view, insert the copied code just before the tag </body> 5. File Save.

content5.html

1. Create a new empty HTML 5 page. Change the title to “Links”. Save it as “content5.htmlyou’re

your web folder. 2. Enter a text label for your hyperlink, e.g., “Bandai”. 3. To create a hyperlink on this text, select the text. Then, click Insert HTML Hyperlink. 4. For the link field, enter the URL. Click OK.

5. File Save.