Adobe Dreamweaver CC Tutorial

Transcription

1 Adobe Dreamweaver CC Tutorial The design of the Web site index.html Click main.html header Boys toys Girls toys Media Contact us content Links sidebar1 footer content1.html content2.html content3.html content4.html content5.html 1

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 2

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

4 5. View Split Code-Design Design view Code view 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. 4

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. 12. Select the Positioning tab. In the field Position, select Absolute. Click OK. 5

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

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 7

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? 8

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

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, after the # symbol, 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: 10

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 Insert a rollover image (using image/fig03.jpg and image/fig04.jpg ) in column 1 of the row Input some descriptions about the products in the column 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 File Save. 11

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

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