Adobe Dreamweaver CC Tutorial

Size: px

Start display at page:

Download "Adobe Dreamweaver CC Tutorial"

Moris Harrell
6 years ago
Views:

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

$index.html 1. Prepare a folder to store the information of your Web site. Download and unzip MyWebSite.zip from Moodle. Store the folder as d:\mywebsite. 2. Start Dreamweaver CC. Select Site New Site.$

2 index.html 1. Prepare a folder to store the information of your Web site. Download and unzip MyWebSite.zip from Moodle. Store the folder as d:\mywebsite. 2. Start Dreamweaver CC. Select Site New Site. 3. In the Site Setup window, input the name of your Web site in the field Site Name:, change the local site folder to D:\MyWebSite. Click the save button. The Web site and the files can be examined in the Files panel. 4. Execute File New. In the New Document window, select New Document, HTML, and NONE. Select HTML5 in the DocType field. Input Index in the Title field. Click Create. 5. Execute File Save As to store the file as index.html in the folder D:\MyWebSite. 6. Switch to the Design view. Click Page Properties on the Properties panel. In the Page Properties window, select Appearance (CSS), change the Background image to image/index_bg.jpg. Select repeat in the repeat field. Click OK. 7. In the Insert panel, select HTML, click Div. The Insert Div window appears. Set the ID field to myapdiv. Click New CSS Rule button. The New CSS Rule window appears. Click the OK button. The CSS Rule definition for #myapdiv window appears. Select the Positioning tab. In the field Position, select Absolute. Close the CSS Rule definition for #myapdiv window. Click the OK button on the Insert Div window. The Div tag is created. The position and the size of the corresponding box can be changed. 8. In the box of the Div, insert a rollover image by clicking the Rollover Image button in the HTML group of the Insert panel. In the Insert Rollover Image window, 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. 9. Select the rollover image, its properties can be changed in the Properties panel. 10. Select the box of the Div, its properties can be changed in the Properties panel. 11. Execute File Save to store the Web page file. 2

$main.html 1. Execute File Open. In the Open window, select the file d:\mywebsite\maintemplate.html. Click Open. 2. Execute File Save As to store the file as main.html in the folder D:\MyWebSite. 3.$

3 main.html 1. Execute File Open. In the Open window, select the file d:\mywebsite\maintemplate.html. Click Open. 2. Execute File Save As to store the file as main.html in the folder D:\MyWebSite. 3. Switch to the Design view. In the Properties panel, change the Document Title to main. Execute File Save again. 4. 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. 5. Delete all text in the content block. 6. Change Link one to Boys toys. In the Properties panel, set the Link field to content1.html. Set the target field to _self. Unselect the Unordered list button. 7. Change Link two to Girls toys. In the Properties panel, set the Link field to content2.html. Set the target field to _self. Unselect the Unordered list button. 8. Change Link three to Media. In the Properties panel, set the Link field to content3.html. Set the target field to _self. Unselect the Unordered list button. 9. Change Link four to Contact us. In the Properties panel, set the Link field to content4.html. Set the target field to _self. Unselect the Unordered list button. 10. In the code window, copy and paste the code containing the hyperlink Contact us. In the Design window, change the last Contact us to Links. In the Properties panel, set the Link field to content5.html. Set the target field to _self. Unselect the Unordered list button. 11. Delete all other text in the sidebar1 block. 12. In the content block, add an IFrame by executing Insert HTML IFrame. 13. Select the added IFrame, press ctrl-t. In the quick tag editor, input <iframe src="content1.html" name="rightframe" width="750" height="750" scrolling="auto" frameborder="0"> 14. In the code window, change all _self to rightframe. 15. Change the text in the footer to Smart Toy Shop. 16. In the CSS Designer panel, choose different selectors and change the corresponding styles such as header to modify the formats of different components of the Web page. More styles can be added and applied to different components. 17. In the CSS Designer panel, change the background image of the header block to image/header_bg.jpg. 18. Insert the company logo image/logo.jpg at the upper left corner of the Web page. In the Properties panel, change the Link field to index.html. 19. Save the Web page file. 3

$content1.html 1. Create a new empty page in HTML 5. Change the title to Boys toys. Save it as content1.html in the folder D:\MyWebSite. 2.$

4 content1.html 1. Create a new empty page in HTML 5. Change the title to Boys toys. Save it as content1.html in the folder D:\MyWebSite. 2. Insert a two by two table by clicking the Table button in the HTML group of the Insert panel. 3. Insert a rollover image (using image/fig01.jpg and image/fig02.jpg ) in the column 1 of the row Insert a rollover image (using image/fig03.jpg and image/fig04.jpg ) in the column 1 of the row Input some descriptions about the products in the column Save the file. content2.html 1. Similarly, create a page called content2.html in the folder D:\MyWebSite. Insert a two by two table. Insert a rollover image (using image/fig05.jpg and image/fig06.jpg ) in the column 1 of the row 1. Insert a rollover image (using image/fig07.jpg and image/fig08.jpg ) in the column 1 of the row 2. Input some descriptions about the products in the column Save the Web page file. 4

$content3.html 1. Create a new empty page in HTML 5. Change the title to Media. Save it as content3.html in the folder D:\MyWebSite. 2. In the Design window, insert HTML5 Video. 3.$ $can be changed. 4. Save the Web page file. content4.html 1. Create a new empty page in HTML 5. Change the title to Contact us. Save it as content4.html in the folder D:\MyWebSite. 2.$

5 content3.html 1. Create a new empty page in HTML 5. Change the title to Media. Save it as content3.html in the folder D:\MyWebSite. 2. In the Design window, insert HTML5 Video. 3. Select the added HTML Video object. In the Properties panel, change the Source to media/myvideo.mp4, change the Poster to media/myvideo.jpg. The other properties including W, H, AutoPlay, etc. can be changed. 4. Save the Web page file. content4.html 1. Create a new empty page in HTML 5. Change the title to Contact us. Save it as content4.html in the folder D:\MyWebSite. 2. Input the information of the company in the Design window. 3. Input a Google map into the Web page. a. Search a Google map in your web browser. b. In the top left corner, click the main menu. c. Select Share or embed map. d. Go to Embed map e. Copy the code in the text field 5

$Save it as content5.html in the folder D:\MyWebSite. 2. Select the HTML group of the Insert panel.$

6 f. In the Code window of Dreamweaver CC, insert the copied code before the tag </body> 4. Save the Web page file. content5.html 1. Create a new empty page in HTML 5. Change the title to Links. Save it as content5.html in the folder D:\MyWebSite. 2. Select the HTML group of the Insert panel. Click the Hyperlink button. In the Hyperlink window, input the information of the Web site that you want to refer to. 3. Save the Web page file. 6

Adobe Dreamweaver CC Tutorial

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