ITSE 1401 Web Design Tools Lab Project 4 (Expression Web 4 - Units M, N, O, P) Last revised: 1/9/14

Size: px

Start display at page:

Download "ITSE 1401 Web Design Tools Lab Project 4 (Expression Web 4 - Units M, N, O, P) Last revised: 1/9/14"

Gerald Stanley
5 years ago
Views:

1 (Expression Web 4 - Units M, N, O, P) Last revised: 1/9/14 Directions: Perform the tasks below on your personal computer or a lab computer. Professor Smith shows the score points for each activity in parentheses. This is an open-book Lab Project. You may only use your textbook and notes. You may NOT receive help from another person. You may NOT work collaboratively with another person. If Professor Smith determines that you received assistance from another person or gave assistance to another student, then he will assign a grade of zero to you for this project. General Lab Project Requirements [11 pts.] 1. (11) Correctly submit Lab Project Web site. (3) A. Correct project folder name: LastNameFirstInitial - (3) B. Correct web site file contents, including web site root folders. (2) C. Project folder as zipped file. (3) D. Submitted to: tms-acc@outlook.com Unit M (Advanced Typography Using CSS) [43 pts.] 2. (2) A. Launch Expression Web. B. Open the connectup_m-n Web site. (Found in data-wd_lab-4\websites path) C. Open the faq.html Web page. D. Create a new style in the existing style sheet (custyles.css). E. Use the p element as the selector. (2) F. Set the text line height to 170%. 3. (4) A. Use the CSS Properties panel to set two properties for the h2 heading: (2) B. Set the text transform property to the uppercase value. (2) C. Set the letter spacing property to the -2 pixels value. Note: This is a negative value. D. Save the changes to all open pages, preview the faq.html page in a browser, close the browser, and then return to Expression Web. 4. (10) A. Open the home page (default.html). (2) B. Create a class-based style rule in the existing style sheet (custyles.css). (2) C. Name the style rule:.dropcap Set the following properties for the.dropcap style rule: (1) D. Set the font family to the Trebuchet MS, Arial, Helvetica, sans-serif fonts. (1) E. Set the font size to 36 pixels. (1) F. Set the text color to the #99DA1A color value. (1) G. Set the line height to 15 pixels. (1) H. Set the top padding to 3 pixels. (1) I. Set the text to float to the left. 5. (5) On the home page, apply the.dropcap style to the letter Y in You don t separate. 6. (7) A. On the home page, click before the text, Strengthening your connections... (2) B. Type the text: You won t regret joining up with ConnectUp! (5) C. Press Enter, and then apply the blockquote tag to the text you just typed. Page 1 of 6 wd_ew4_lab-4.docx, 01/09/14

7. (15) (2) A. Create a new style in the existing style sheet (custyles.css): (2) B. Use blockquote as the selector. Set the following properties for the blockquote selector: (1) C.

2 7. (15) (2) A. Create a new style in the existing style sheet (custyles.css): (2) B. Use blockquote as the selector. Set the following properties for the blockquote selector: (1) C. Set the font size to 24 pixels. (1) D. Set the font style to the italic value. (1) E. Set the text color to the #03C4EC color value. (1) F. Set the borders on all four sides. (1) G. Set the border style to the solid value. (1) H. Set the border width to 2 pixels. (1) I. Set the border color to the #6FD917 color value. (1) J. Set the padding on all sides. (1) K. Set the padding size to 5 pixels. (1) L. Set the blockquote s width to 150 pixels. (1) M. Set the blockquote to float to the right. ITSE 1401 Web Design Tools Your home page should look like the one in Figure 1 below. Figure 1. Unit N (Creating a Layout with CSS) [34 pts.] 8. (6) You should still have the connectup_m-n Web site open in Expression Web. (2) A. Create a new folder in the connectup root folder. Name the new folder: challenge (2) B. In the challenge folder, create a new blank HTML page from the General category. Name the HTML page: default.html (2) C. In the default.html page, set the page title to: Take the ConnectUp Challenge! Page 2 of 6

3 9. (12) (1) A. In the default.html page within the challenge folder, insert a div element into the page. (2) B. In this div element, type, banner, and then type banner in the id text box on the Tag Properties panel. (1) C. Insert a second div element into the page below the banner div element. (2) D. In the second div element, type, content, and type content in the id text box on the Tag Properties panel. (1) E. Insert a third div element into the page below the second div element. (2) F. In the third div element, type, footer, and type, footer in the id text box on the Tag Properties panel. (3) G. In the Code view pane, (1) a. Click before the code <div id= banner >, and type: <div> (1) b. Click before the code, </body>, and then type: </div> Note: This creates a div element that surrounds the other three div elements you created above. (1) c. In this outer div element, type, container in the id text box on the Tag Properties panel. H. Save the Web page. Your code should look like the code below in Figure 2. Figure (16) Create four new styles in a new style sheet in the challenge folder. (2) A. Save the style sheet as, challenge_style.css First new style: (1) B. Use #banner for the selector of the first new style. (3) C. Style properties: (1) a. Set the banner s background color to the #99FF66 color value. (1) b. Set the banner float value to the left value. (1) c. Set the banner s width value to 300 pixels. Second new style: (1) D. Use #content for the selector of the second new style. (3) E. Style properties: (1) a. Set the content s background color to the #66FFFF color value. (1) b. Set the content s float value to the right value. (1) c. Set the content s width value to 500 pixels. Third new style: (1) F. Use #footer for the selector of the third new style. (2) G. Style properties: (1) a. Set the footer s background color to the #FFFF99 color value. (1) b. Set the footer s float value to clear the float on both sides. Fourth new style: (1) H. Use #container for the selector of the fourth new style. (2) I. Style properties: (1) a. Set the container s margin value to the auto value. (1) b. Set the container s width value to 800 pixels. J. Save changes to all pages and then preview the challenge home page in a browser. Page 3 of 6

4 Your page should look like the one below in Figure 3. Figure 3. Close the connectup_m-n Web site. Unit O (Designing Like a Pro) [48 pts.] 11. (9) Open the connectup_o-p Web site. (Found in data-wd_lab-4\websites path) (7) A. Import the following files to the challenge folder: (Found in data-wd_lab-4\data_files path) challenge_style.css cuc_badge.jpg cuc_banner_bg.gif cuc_container_bg.gif cuc_default.html (2) B. Rename the cuc_default.html file to: default.html 12. (4) In the challenge_style.css style sheet, modify the following style: #container style (2) A. Set the background image with the cuc_container_bg.gif file. (2) B. Set the background repeat s value of the image to the vertical (Y-axis) direction. 13. (5) In the default.html page, click anywhere in the text, TAKE THE CHALLENGE AND, select the <div> tag on the quick tag selector, then assign the div an id of sidebar. 14. (11) In the challenge_style.css style sheet, create a new style using the #sidebar selector. (3) A. Create style in challenge_style.css style sheet. (2) B. Set the style s name to the #sidebar value. (1) C. Set the background color to the #A2E2F3 value. (1) D. Set the padding on all sides to 5 pixels. (1) E. Set the width to 150 pixels. (1) F. Set the height to 200 pixels. (1) G. Set the sidebar content so it floats to the right. (1) H. Set the overflow of the sidebar content to automatic. 15. (7) In the banner div of the default.html page, (3) A. Insert the image, cuc_badge.jpg, in the top left corner of the page. (Found in data-wd_lab-4\data_files path). (2) B. Set the alternate text to: Take the Challenge! (2) C. Save image in challenge folder. 16. (7) In the challenge_style.css style sheet, create a new style using the.challengebadge selector. (3) A. Create the style in the challenge_style.css style sheet. (2) B. Set the style name to:.challengebadge (1) C. Set the position to a fixed position. (1) D. Set the top to 30 pixels. Page 4 of 6

17. (5) (5) A. In the default.html page, assign the badge image to the style class of challengebadge. B. Save the changes to all pages, preview the page in the browser.

5 17. (5) (5) A. In the default.html page, assign the badge image to the style class of challengebadge. B. Save the changes to all pages, preview the page in the browser. Your page should look like the one in Figure 4. Figure 4. Unit P (Working with Dynamic Web Templates) [28 pts.] 18. (3) (3) A. Save the home page, default.html, as a Dynamic Web Template in the challenge folder with the file name: challenge_main.dwt B. Close the default.html page. 19. (2) (2) A. In the Dynamic Web Template, delete the content that is specific to the challenge home page, starting with Take the ConnectUp Challenge and ending with Better get moving. B. Save the change to this page. 20. (5) A. In the Dynamic Web Template, switch to the code view, click after the code, Benefit</p>, click Format on the menu bar, point to Dynamic Web Template, and then click Manage Editable Regions. (5) B. Add an editable region named: main_content C. Close the Editable Regions dialog box, switch to Design view. D. Save the changes to the challenge_main.dwt file. Page 5 of 6

6 21. (13) (5) A. Create a new page based on the dynamic web template. (2) B. Save the new page in the challenge folder with the file name: join.html (1) C. Enter the page title: How to Join the ConnectUp Challenge (5) D. Replace the placeholder text in the (main_content) editable region with the following text: Join the ConnectUp Challenge! Details coming soon. E. Save the join.html page. 22. (5) (5) A. In the challenge_main.dwt file, make the text, How to Join in the navigation area a hyperlink to the join.html page within the challenge folder. B. Save the changes to the template file, updating attached pages when prompted. C. Save the changes to the join page, and then preview this page in a browser. Your page should look like the one in Figure 5. Figure 5. The End Page 6 of 6

Layout with Layers and CSS

Layout with Layers and CSS Today we're going to make a Web site layout. Preparatory Step 1. Inside your folder create a new folder and name it layout. 2. Inside the layout folder create a new folder and