Expression Web 4 Advanced Lab Exercises

Transcription

1 Expression Web 4 Advanced Lab Exercises An Advanced Expression Web 4 Tutorial Beaches Around the World By Aseem Badshah Edited by Dave Burkhart (Part 3: Beaches Around the World series)

2 Information in this document, including URL and other Internet website references, is subject to change without notice. Unless otherwise noted, the example companies, organizations, products, domain names, addresses, logos, people, places, and events depicted herein are fictitious, and no association with any real company, organization, product, domain name, address, logo, person, place, or event is intended or should be inferred. Complying with all applicable copyright laws is the responsibility of the user. Without limiting the rights under copyright, no part of this document may be reproduced, stored in or introduced into a retrieval system, or transmitted in any form or by any means (electronic, mechanical, photocopying, recording, or otherwise), or for any purpose, without the express written permission of Microsoft Corporation. The names of manufacturers, products, or URLs are provided for informational purposes only and Microsoft makes no representations and warranties, either expressed, implied, or statutory, regarding these manufacturers or the use of the products with any Microsoft technologies. The inclusion of a manufacturer or product does not imply endorsement of Microsoft of the manufacturer or product. Links are provided to third party sites. Such sites are not under the control of Microsoft and Microsoft is not responsible for the contents of any linked site or any link contained in a linked site, or any changes or updates to such sites. Microsoft is not responsible for webcasting or any other form of transmission received from any linked site. Microsoft is providing these links to you only as a convenience, and the inclusion of any link does not imply endorsement of Microsoft of the site or the products contained therein. Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual property rights covering subject matter in this document. Except as expressly provided in any written license agreement from Microsoft, the furnishing of this document does not give you any license to these patents, trademarks, copyrights, or other intellectual property. 8 Microsoft Corporation. All rights reserved. The names of actual companies and products mentioned herein may be the trademarks of their respective owners. Page 2 of 26

3 Setup You can find all of the assets to use for this demonstration in the Expression Web Tutorial (Advanced): Beaches Around the World.zip file. All assets are referenced in this demonstration relative to the location of the extracted Expression Web Tutorial (Advanced): Beaches Around the World folder. The screenshots in this tutorial show are using the Default Windows color scheme as it appears better when printed. To set your color scheme to your current Windows color scheme, click Application Options on the Tools menu. In the Application Options dialog box activate the Use your current Windows color scheme option. You will also need to download and install the Microsoft.NET Framework version 3.5 (which includes the Microsoft AJAX extensions) to complete parts of this lab exercise, available from the links below. The.NET Framework 3.5: Scenario The exercises in this tutorial will show you how to make your website look better and more interactive using Microsoft Expression Web. This is the third in the series of Beaches Around the World tutorials. By the end of these exercises, you will have modified the existing Beach Trip website with custom interactive buttons, interactive content areas, centered web pages, and backgrounds. This tutorial is included in Module 7 of the semester-long curriculum, Introduction to Web Design Using Microsoft Expression Studio. This tutorial can stand as in independent learning tool or as the third in the 3-tutorial series. Expression Design Tutorial: Creating Images with Expression Design (Beaches Around the World) and Expression Web Quick Start Tutorial: Beaches Around the World are the other two tutorials. Below is a sneak peek of the Beach Trip website that you will create in this tutorial. You can find the files for the completed site in the Expression Web Tutorial (Advanced): Beaches Around the World. Page 3 of 26

4 Page 4 of 26

5 The Microsoft Expression Web Workspace 1. Common Toolbar 2. Folder List 3. File Tabs 4. Toolbox 5. Style and Layer Task Panes 6. View Tabs 7. Tag and CSS Property Task Panes 8. Bread Crumb Trail Exercises EXERCISE 1 - Creating Customer Interactive Buttons EXERCISE 2 Using Behaviors to change Content EXERCISE 3 Centering the Webpage EXERCISE 4 Creating Borders and a Background Page 5 of 26

6 Exercise 1: Creating Custom Interactive Buttons Scenario: You are going to create custom interactive buttons by modifying behaviors to use unique graphics. Task 1: Open the existing beach trip website You will open the existing beach trip website and move some new image files into the resource folder. 1. In Windows Explorer, either locate your finished Beach Trip website from the earlier tutorial or locate the BeachTripStart folder in the Expression Web Tutorial (Advanced): Beaches Around the World folder that came with this tutorial. 2. If you are using your existing Beach Trip website then copy the Buttons folder and background.png from the Expression Web Tutorial (Advanced): Beaches Around the World folder into your website s Resources folder. If you are going to be using the premade BeachTripStart website that came with this tutorial, then you can skip this step. 3. In Windows Explorer, right-click on the index.html file within the website folder and select Edit with Microsoft Expression Web. Page 6 of 26

7 Task 2: Change the source image for the interactive buttons You will change the source image files for the existing interactive buttons on the page. 1. Click on the Pink Sands Beach button in layer 3 to highlight the button. Page 7 of 26

8 2. In the Tag Properties task pane, click on the file name next to the src attribute. This should highlight the text in the field and make a button appear. 3. Click on the button that appears to the right of the highlighted filename. 4. In the Select File dialog box, open the Buttons folder that is in the Resources folder. 5. With the Select File dialog box still open, select pink_up.jpg and click Open. 6. Repeat steps 1 to 5 for the remaining words in the menu: Phi Phi Island, Anguilla, and Whitehaven Beach. Use the phi_up.jpg, anguilla_up.jpg, and white_up.jpg files accordingly. 7. On the File menu, click Save. Page 8 of 26

9 8. Press F12 on your keyboard to preview the page in your browser. If a security warning appears at the top of the browser window, click on the warning and allow the blocked content. Notice that new images appear where the old interactive buttons were. Page 9 of 26

10 Task 3: Change the images for the interactive button behaviors You will change the images that appear after different interactive button behaviors. 1. On the Panels menu, ensure Behaviors is checked. 2. Click on the Pink Sands Beach button in layer 3 to highlight the button. 3. Open the Behaviors task pane in the lower right corner of the workspace. 4. In the Behaviors task pane, double-click the onmousedown event. Page 10 of 26

11 5. In the Swap Images dialog box, click Browse. 6. In the Browse dialog box, select pink_down from the Buttons folder and click OK. 7. In the Swap Images dialog box, click OK. Now the pink_down.jpg image will appear when the Pink Sands Beach button is being clicked. 8. In the Behaviors task pane, double-click the onmouseout event. 9. In the Swap Images dialog box, click Browse. 10. In the Browse dialog box, select pink_up from the Buttons folder and click OK. 11. In the Swap Images dialog box, click OK. Now the original pink_up.jpg image will appear when a user moves their cursor off of the Pink Sands Beach button. 12. In the Behaviors task pane, double-click the onmouseover event. 13. In the Swap Images dialog box, click Browse. 14. In the Browse dialog box, select pink_over from the Buttons folder and click OK. 15. In the Swap Images dialog box, click OK. Now the pink_over.jpg image will appear when a user moves their cursor over the Pink Sands Beach button. 16. In the Behaviors task pane, double-click the onmouseup event. 17. In the Swap Images dialog box, click Browse. 18. In the Browse dialog box, select pink_up from the Buttons folder and click OK. 19. In the Swap Images dialog box, click OK. Now the original pink_up.jpg image will appear after a user clicks on the Pink Sands Beach button. Page 11 of 26

12 20. Repeat steps 4 to 19 for the remaining words in the menu: Phi Phi Island, Anguilla, and Whitehaven Beach. Use the _up.jpg, _down.jpg, and _over.jpg files accordingly. 21. On the File menu, click Save. 22. Press F12 on your keyboard to preview the page in your browser. If a security warning appears at the top of the browser window, click on the warning and allow the blocked content. Now all of the buttons should work with their new mouse-over and clicked images. Page 12 of 26

13 Exercise 2: Using Behaviors to Change Content Scenario: You will remove the existing navigation links and setup behaviors so the content in a layer will change when a button is clicked. Task 1: Remove the existing button hyperlinks You will remove the existing hyperlinks on the navigation buttons because we want the content of a layer to change when a button is clicked instead of sending the user to a new page. 1. Open the index.html page of the Beach Trip website using the tabs at the top of the work area or from the Folder List. 2. Right-click the Pink Sands Beach button and click Hyperlink Properties. 3. In the Edit Hyperlink dialog box, click Remove Link. Now the button will do nothing when a user clicks it. Page 13 of 26

14 4. Repeat steps 1 to 3 for the remaining words in the menu: Phi Phi Island, Anguilla, and Whitehaven Beach. 5. On the File menu, click Save. 6. Press F12 on your keyboard to preview the page in your browser. If a security warning appears at the top of the browser window, click on the warning and allow the blocked content. When you click on a button, nothing should happen. Task 2: Create behaviors to change the layer content You create behaviors that will change the content of layer 4 when one of the navigation buttons is clicked. 1. Open the pink_sands.html page of the Beach Trip website using the tabs at the top of the work area or from the Folder List. 2. Click on layer 3 to highlight the layer. 3. Click Split on the view tabs at the bottom left side of the workspace. This will show the code view on the top of the workspace and the design view on the bottom. You should see some highlighted text in the code view since the layer is highlighted. Page 14 of 26

15 4. From the code view, copy the text that is already highlighted except for the top and bottom line. You will need to highlight the specific text again so the top and bottom lines are not included. Use the following screenshot as a guide. 5. Open the index.html page of the Beach Trip website using the tabs at the top of the work area or from the Folder List. 6. On the Panels menu, ensure Behaviors is checked. 7. Click on the Pink Sands Beach button to highlight it. 8. In the Behaviors task pane, click Insert, point to Set Text, and click Set Text of Layer. Page 15 of 26

16 9. In the Set Text of Layer dialog box, change the Layer field to div layer 4 using the dropdown menu. 10. In the Set Text of Layer dialog box, paste the text from the pink_sands.html code into the New HTML field and click OK. 11. Repeat steps 1 to 10 for the remaining words in the menu: Phi Phi Island, Anguilla, and Whitehaven Beach. Make sure to copy the appropriate HTML from the phi_phi.html, anguilla.html, and whitehaven.html files. Note: You may also want to create an About My Trip button to add to the navigation that will restore the original content in layer 4 when clicked. You can use the about_up.jpg, about_over.jpg, and about_down.jpg files for this button. 12. On the File menu, click Save. Page 16 of 26

17 13. Press F12 on your keyboard to preview the page in your browser. If a security warning appears at the top of the browser window, click on the warning and allow the blocked content. When you click on a button, the content in layer 4 should change to the appropriate text. Note: Now that all of your content is on the homepage you can delete the interior html pages and the dynamic web template from the website folder. You can also delete all of the button images that were created for the old interactive buttons. Page 17 of 26

18 Exercise 3: Centering the Webpage Scenario: You will add an additional layer so the webpage is centered in a user s browser. 1. Open the index.html page of the Beach Trip website using the tabs at the top of the work area or from the Folder List. 2. In the Toolbox, double click Layer or use the Layer tab and the Draw Layer tool. 3. On the Panels menu, ensure Layers is checked. 4. Click the new layer (layer 5) on the Layers task pane to highlight it. Page 18 of 26

19 5. With the layer highlighted, click the Tag Properties tab and type container in the id field. 6. With the layer still highlighted, click the CSS Properties tab and specify the values in the following table. This will make the layer centered on the page. Property margin-left margin-right position width Value auto Auto relative 800px Page 19 of 26

20 7. On the Layers task pane, drag the other layers onto the container layer to nest the layers as shown in the screenshot below. 8. On the File menu, click Save. 9. Press F12 on your keyboard to preview the page in your browser. The webpage should be centered in the browser. Page 20 of 26

21 Exercise 4: Creating Borders and a Background Scenario: You will create borders around the container layer and will add a background to make your page more aesthetically pleasing. Task 1: Create a border around a layer You will create a border to go around the right, left, and bottom sides of the container layer. 1. Open the index.html page of the Beach Trip website using the tabs at the top of the work area or from the Folder List. 2. Click container on the Layers task pane to highlight the layer. 3. With the layer highlighted, click the CSS Properties tab and specify the values in the following table. This will make layer taller and add will add the individual borders. Property border-bottom-color border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width height Value #8C8C8C solid 2px #8C8C8C solid 2px #8C8C8C solid 2px 750px Page 21 of 26

22 4. On the File menu, click Save. 5. Press F12 on your keyboard to preview the page in your browser. The content area should have a grey border on the left, right, and bottom sides. Page 22 of 26

23 Task 2: Create a background You will create a background for the webpage by repeating a gradient image across the x-axis of the screen. 1. Open the index.html page of the Beach Trip website using the tabs at the top of the work area or from the Folder List. 2. Right-click anywhere on the page and click Page Properties. 3. In the Page Properties dialog box, open the Formatting tab, check the box next to Background Picture, and click Browse. Page 23 of 26

24 4. In the Select Background Picture dialog box, open background.png from the Resources folder. 5. In the Page Properties dialog box, click OK. 6. Click anywhere in the workspace outside of the container layer. The bread crumb trail should only say <body>. 7. Click the CSS Properties tab and specify the values in the following table. Property background-position background-repeat Value top repeat-x Page 24 of 26

25 8. On the File menu, click Save. 9. Press F12 on your keyboard to preview the page in your browser. There should be a yellow gradient background at the top of the page that fades to white. This background will expand to fit any browser size. Page 25 of 26

26 Congratulations! You ve just completed the My Beach Trip Web site using Expression Web. You learned to use many tools and Web technologies that will be useful as you design more Web pages. The complete series of three tutorials are included in the semester-long curriculum, Introduction to Web Design Using Microsoft Expression Studio (modules 4, 5, & 7). Experiment with Expression Web and explore the Help Menu to learn about more exciting Web design features and technologies. There are also many learning resources online at Page 26 of 26