Sams Teach Yourself Microsoft Expression Web 3 in 24 Hours- P17 pdf

ptg 462 BONUS HOUR 25: Beyond the Basics, Part 2: Building a Site with ASP.NET 3. If you look through the code of the Contact.aspx page, you notice that there is nowhere to input the email address the email should be sent to. This informa- tion is stored in the Web.config file. Open the Web.config file and find the EmailTo attribute on line 11. Change the value to your email address. You can also change the default subject line if you want. 4. Save both pages. Summary As websites become more advanced and you start looking for added functionality, ASP.NET gives you options that are far outside of the scope of straight HTML. With this server-side script language, you can make highly advanced dynamic websites with increased interactivity and features that are sure to impress any client. ASP.NET is Microsoft’s server-side scripting language, and as such it is an integral part of Expression Web 3. But because it is a server-side script language, it requires a whole new set of skills that reach far beyond the scope of this book. For this reason, you were introduced to the Portfolio Starter Kit, an ASP.NET-based website designed by Microsoft to give new designers a first look at ASP.NET, and you used it to learn the basics of how these sites work. An ASP.NET site is different from everything you have encountered so far in this book because unlike the regular HTML and PHP pages and even those generated from a Dynamic Web Template, the individual pages of an ASP.NET site exist only when a visitor opens them. In other words, rather than stored on the server as individual fully programmed pages, the contents of an ASP.NET site are stored in web forms (files with the suffix .aspx) and external data sources such as XML files. When the visitor opens one of these forms, the browser and the server work together to put the contents of the form into the layout of the master page, and look through the form to see whether other content should be sourced from external data sources. It all sounds complicated, but when you work with larger websites with hundreds or even thousands of pages, this type of structure combined with a database to hold all the external content is far more feasible than making each page individually. In this hour, you learned the basics of how an ASP.NET site works and what makes it different from other static sites. You learned how to edit the master page to change the content regions that can be defined for the individual pages. And even though it is based on ASP.NET, the layout of the master page is still nothing but HTML and CSS. ▲ From the Library of Lee Bogdanoff ptg Workshop 463 You also learned how to change the contents of individual web forms and how they interact with the master page to create a complete page. In addition, you took a closer look at how external data files are used as sources to generate content for mul- tiple pages, and you saw how easy it is to change these external data sources for immediate and sitewide results. Finally, you learned how to customize the project to work as a basis for your own web portfolio or another project. Now you have the basic skill set to customize the Portfolio Starter Kit site and make it your own. Even if you don’t want to use it as a basis for your own or a client website, the project is an excellent tool to learn more about how ASP.NET works and how you can employ it to create richer and more interactive web experiences for the visitors. The Expression website has other Starter Kits that introduces you to elements such as login control, calendar controls, and style sheet switches. These Starter Kits are not cov- ered in this book but are based on the same principles as the Portfolio Starter Kit, and you can apply the same techniques learned in this hour to personalize them as well. Q&A Q. The Portfolio Starter Kit doesn’t work! I can open it in Expression Web 3, but when I try to preview it, all I get is a weird error message. What is going on? A. Unlike a website built using static HTML pages, a dynamic website like the Portfolio Starter Kit has a specific folder and file structure that must be main- tained for everything to work properly. If you receive an error message when previewing the page in your browser, it is most likely because you didn’t set the correct folder as the site folder when you first created the site. As previously stated, the site link must be to the Portfolio Starter Kit folder and not the Expression Portfolio Starter Kit folder or the site will not work properly. Workshop The Workshop has quiz questions and exercises to help you put to use what you have just learned. If you get stuck, the answers to the quiz questions are in the next sec- tion. But try to answer the questions first. Otherwise you’ll be cheating yourself. Quiz 1. What is the primary difference between a static HTML-based site and a dynamic ASP.NET-based site? From the Library of Lee Bogdanoff ptg 464 BONUS HOUR 25: Beyond the Basics, Part 2: Building a Site with ASP.NET Answers 1. As the name suggests, the static HTML site consists of a series of pages that are static, meaning they can be changed only by editing the content manually on the server. The dynamic ASP.NET site, on the other hand, consists of a series of pages that are populated by the server when they are opened. They get their content from different sources and are updated by changing the sources rather than the pages themselves. This way you can make sweeping changes to many pages by altering their data sources. Dynamic pages can also gather content from sources outside of the current website. Exercise In this hour, you learned to insert a new title, description, and keywords in the Default.aspx page. Open the three other .aspx pages, insert the necessary content regions, and give each of them an individual title, description, and appropriate key- words. Keep in mind that the Details.aspx page displays the full information from the portfolio.xml data source, so the description and keywords need to be generic enough to describe all the different projects. Edit the portfolio.xml file to create new portfolio items. To do so, you also need to add new image files to the Images folder. The easiest way to do this is to open existing image files in your favorite image editor, replace the contents of these files with new content, and save them with new and descriptive names just as was done with the images for the MyKipple project. From the Library of Lee Bogdanoff ptg Introduction 465 APPENDIX A Building Layers-Based Menus Introduction In Hour 18, “Building a Functional Menu,” you learned how to build a CSS-based menu. This is the preferred approach for building menus because it is flexible and allows for easy styling and dynamic content building. Nevertheless there is another method to build menus—and in particular drop-down menus—that is often used that involves buttons and layers. Throughout the book you learned about buttons, behaviors, and layers. In this appendix, you use that knowledge to create an advanced and functional drop-down menu for easy navigation. The Layers-Based Menu Using layers and child layers is a quick-and-dirty way to create drop-down menus that has been around for some time. This technique allows for great flexibility when it comes to the look and feel of the menu, but the code portion can be messy. Even so, many designers still use the layers-based menu, and you can create it in Expression Web 3 without writing or looking at a single line of code. Creating the Main Menu A drop-down menu consists of two groups of elements: the main menu that is always visible and the child menus triggered by the main menu. The main menu buttons can work as buttons or just as triggers for the child menus. In this lesson, you use Expression Web 3’s interactive buttons to create the Layers menu. 1. Create a new Hypertext Markup Language (HTML) page and call it layers-Menu.html. Open the page in Design view. 2. Open the Layers panel and click the Draw Layer button. Draw a layer the width of the page and about one paragraph in height in Design view. After creating the layer, double-click it in the Layers panel and change the layer ID to mainMenu (see Figure A.1). From the Library of Lee Bogdanoff ptg 466 APPENDIX A: Building Layers-Based Menus FIGURE A.1 Naming the lay- ers as you cre- ate them is a good habit that prevents confu- sion when your layouts become more compli- cated. FIGURE A.2 The mainMenu layer now con- tains five but- tons. 3. Click the layer to place the cursor inside it and select Insert, Interactive Button on the menu bar to create a new interactive button. 4. In the Interactive Button dialog, scroll down and select one of the Linked Row buttons. Set the Text option to Home and click OK to insert the button. 5. You now have two choices of how to create more buttons: Either repeat steps 3 and 4 or copy the current button, paste a new one next to it, and double-click the new button to open the Interactive Button dialog and give the button a new name. Either way you choose, create four new buttons and call them News, Gallery, Archive, and Contact (see Figure A.2). Create a Submenu Now that you have designed the main menu, it is time to add the submenus to the page. Each submenu should reside in its own layer, and the layers should be children of the mainMenu layer. This is because when a layer is a child of a different layer, the parent layer defines its position. In practical terms, this means that if the parent layer moves, the child layers move with it. From the Library of Lee Bogdanoff ptg The Layers-Based Menu 467 FIGURE A.3 The – (minus sign) in front of the mainMenu layer and the slight indentation of the new layer indicate that the new layer is a child of the main- Menu layer. 1. To create a child layer, use the Draw Layer button to draw a new layer any- where on the page. (You will position it later.) After drawing the layer, click and drag the new layer instance on top of the mainMenu layer instance in the Layers panel so that the mouse pointer changes to include a superimposed box and a + sign. When you let go, the new layer appears slightly indented under the mainMenu layer in the list. The indentation indicates the new layer is a child of the mainMenu layer (see Figure A.3). 2. Change the layer ID of the new layer to newsSub. 3. Place the cursor inside the new layer and select Insert, Interactive Button from the menu bar to create a new interactive button. 4. Choose the Simple Block button and set the button text to New News. Under the Font tab, set the Horizontal Alignment to Left. As you can see from the pre- view, you have to insert a space before the words to separate them from the box graphic. To do so, simply place your cursor at the beginning of the text and press the spacebar once. Click OK to insert the button into the new layer. 5. Press Enter to go to the next line, copy and paste the first button into the sec- ond line, and give it the name Old News. Repeat the process and make two more buttons called Good News and Bad News. 6. Resize the layer by clicking it and dragging the handles so that the layer bor- ders fit the content (see Figure A.4). 7. Finally, reposition the layer directly under the News button on the main menu where you want it to appear when the visitor triggers it (see Figure A.5). To reposition the layer, hover your mouse over the Tag Selector until the four- direction arrow shows and then drag and drop the layer to the location of your choice. From the Library of Lee Bogdanoff ptg 468 APPENDIX A: Building Layers-Based Menus ▼ FIGURE A.5 Because the pop- up layer is likely to overlap parts of the mainMenu layer, it is a good idea to wait until you finish the layer before mov- ing it to its final position. FIGURE A.4 After creating all the buttons, you can resize the layer using the handles. When you save the page, you get a long list of embedded image files that you must save. Click the Change Folder button in the Save Embedded Files dialog and create a new folder called layerMenuButtons for all the button images. After saving the page, preview it in your browser. As you can see, the main menu buttons and the submenu buttons are working properly, but the submenu is visible all the time. To create the drop-down effect, you need to apply a series of behaviors to the different elements. Try It Yourself Use Behaviors to Make the Drop-Down Menu Drop Down The whole idea of a drop-down menu is that the submenus are not visible until you trigger them. In Hour 17, “Frames and Layers,” you learned how you could use the Visibility property to hide and show layers in the browser. Now you are going to use this technique to trigger the new submenu. 1. The newsSub layer should not be visible unless the user triggers it. Use the eye column in the Layers panel, or right-click the newsSub layer and select Set Visi- bility: Hidden from the pop-up menu (see Figure A.6). From the Library of Lee Bogdanoff ptg The Layers-Based Menu 469 FIGURE A.6 You can set the visibility of a layer by using the eye icon in the leftmost column in the Layers panel or by right- clicking it and setting it from the pop-up menu. The newsSub layer should become visible when the visitor hovers over the News button on the mainMenu layer. 2. Click the News button in the mainMenu layer and apply a Change Property behavior from the Behaviors panel. 3. In the Change Property dialog, check Select Element and set the element type to Div and the element ID to newsSub. Click the Visibility button and set the visibility to Visible. For this behavior, do not check the Restore on Mouseout Event box (see Figure A.7). If you do, the submenu becomes invisible when you move your mouse away from the News button and into the menu. Click OK to apply the behavior. 4. In the Behaviors panel, change the event of the Change Property behavior to onmouseover by clicking it and selecting onmouseover from the drop-down menu. Now the newsSub menu appears whenever the visitor hovers over the News button. But if you test the page in your browser, you see that after submenu triggers, it doesn’t disappear again. 5. Select the newsSub layer either by clicking it in Design view or selecting it from the Layers panel, and go to the Behaviors panel. Apply a Change Property behavior to the newsSub layer. From the Library of Lee Bogdanoff ptg 470 APPENDIX A: Building Layers-Based Menus FIGURE A.7 Use the Change Property behavior in the News but- ton to trigger the drop-down menu. 6. In the Change Property panel, leave Current Element checked and set the Visi- bility to Hidden. Again, do not check the Restore on Mouseout Event box. Click OK to apply the behavior. 7. In the Behaviors panel, change the event of the Change Property behavior to onmouseout. This tells the browser that the menu should be invisible when the mouse is no longer hovering over it. Save and test the page in your browser, and you see that the drop-down menu now stays put when you hover over the first button but disappears again if you move further down. To fix this, you need to tell the browser that as long as the mouse is in the newsSub layer it should remain visible. 8. With the newsSub layer still selected, add a new Change Property behavior and set the Visibility property for the layer to Visible. Click OK to apply the new behavior and change the event to onmouseover (see Figure A.8). Now the drop-down menu works almost the way it should, with one exception: If the visitor moves the mouse to one of the other main menu buttons instead of somewhere else on the page, the submenu stays visible. 9. To hide the submenu when the visitor moves from the News button to one of the other buttons on the main menu, click the mainMenu layer in the Layers panel layer and apply a Change Property behavior to it. Check Select Element and set the element type to Div and the element ID to newsSub. Click the Visi- bility button and set the visibility to Hidden. Click OK twice to apply the behavior to the layer and change the event to onmouseout. From the Library of Lee Bogdanoff ptg The Layers-Based Menu 471 FIGURE A.8 The newsSub layer needs two Change Property behaviors to work properly: one for when the mouse hovers over it and one for when the mouse moves away from it. Note that I have placed the Behaviors panel in the top-right panel area so that I can have both Behaviors and Layers open at the same time. Now, finally, the drop-down menu for the News button works properly. Adding and Managing Several Drop-Down Menus As you saw in the prior section, to get the drop-down menu to work properly, you need to apply multiple different behaviors to different elements within the page. Unfortunately, there is no quick way to automate this process: You need to apply the same set of behaviors to every new submenu. 1. To create a new submenu for the Gallery button, click to select the newsSub layer in the Layers panel and press Ctrl+C to copy it and Ctrl+V to paste it. The new layer should appear with the name newsSub0 in the Layers panel and on top of the original newsSub layer in Design view. 2. Double-click the layer in the Layers panel to rename it. Give it the name gallery-Sub (see Figure A.9). 3. Grab the new gallery-Sub layer in Design view and move it so that it is directly under the Gallery button on the main menu. Toggle the layer visibility to visi- ble by clicking the eye icon in the Layers panel. 4. Double-click the first button and give it the name My Kipple. Rename the two other buttons to Other Kipple and Found Kipple (see Figure A.10). ▲ From the Library of Lee Bogdanoff [...]... 31 2 -32 4, 469-471 30 3 lists, 45, 2 13 dynamic web tem- main menus, 31 5 -31 9 plates, 32 8 -33 4 menus, 30 6 -30 8, 464 email forms, 38 9-400 drop-down, 469-471 images, 32 3 -32 4 31 0 web pages, 41-47 with frames, 285286 PHP 38 8 -39 0 See , also web pages From the Library of Lee Bogdanoff 485 websites, 28, 38 -42 formatting, 284-287 PHP adding, 39 7 -39 9 , windows, 72-74 inline Snapshot, 405 form#form1 tag, 451 creating,... (Dynamic Web hyperlinks, 35 TextArea Box Properties, 35 4 Templates), 32 6 -32 8, images, 94 34 4, 448-450 layers, 298 -30 0 files, 438 layouts, 289-290 formatting, 32 8 -33 4 regions, 34 3 navigating, 33 4 -34 4 styles, 233 div tags, creating, 169-170, 191-1 93 documents CSS See CSS text editing, 58-62 importing, 57-58 web pages See web pages DOM Tree View, 414-415 dynamic web pages, 38 4 -38 5 See also PHP Dynamic Web. .. Properties, 136 - 137 cells creating, 166-167 CSS (Cascading Style Sheets), 166-170 managing, 175-176 pseudoclasses, formatting, 45 aligning, 132 176-178 lists, using images as, deleting, 133 slider, 254 merging, 132 - 133 tags, applying, 188-1 93 2 13- 215 tags, 56 buttons, 30 , 241 -244 , 256-257 resizing, 140 cleaning up code, 58-62 splitting, 132 - 133 CMSs (Content centering in Code View, 112 frames, 288 creating,... forms, 36 3 layers, 30 0 -30 2 Code view, 36 1 -36 2 navigating, 291-292 contact, 32 splitting, 291 creating, 34 6 -34 8 G web pages, creating customizing, 35 6 email galleries images, creating, with, 285-286 37 4 -37 6 Frames Page button, 290 Silverlight, 32 -33 creating, 35 1 -35 4 framesets, 287-288 General tab, 88 formatting, 38 9-400 framework layouts, GIF (Graphics Interchange creating forms, 38 9-400 filtering, 400... Snippets button, menus, 32 2 -32 6 login, 437 List Members button, 1 13 lists, 45 bullets, using images as, 2 13- 215 Code view, 120-1 23 copying, 31 4 Edit Browser List, 48 adding, 236 - 238 bars, 8-9 collapsing, 8 M drop-down Mac (Safari), 46 adding, 468 main menus, 31 formatting, 31 2 -32 4 creating, 464-471 formatting, 31 5 -31 9 MainContent ContentPlaceHolders, 1 13 saving, 452, 460 Matching Tag button, 209 hotspots,... hovering over, 70 menus, formatting, 31 4 Language), 38 compatibility, 56 root-relative, 71 Home links, creating, 70 editing, 11, 51-57 syntax, 71 home pages See also web forms, 34 8 -35 5 testing, 69 optimizing, 438 -441 troubleshooting, 34 -35 tables, 126 viewing, 28 pages creating, 51 editing, 51-57 text editing, 58-62 importing, 57-58 Horizontal Margin setting, 91 horizontal menus, formatting, 31 1 -31 3 Horizontal... external Flash content, 37 2 FTP hyperlinks formatting, 72-74 external style sheets, creating, 1 93- 199 filtering email, 400 Find Matching Tag button, 1 13 Firefox, 46, 404 See also browsers fixed positions, 231 File Transfer Protocol over Secure Sockets Layer (FTPS/SSL), 431 - 433 files Flash, 32 -33 , 36 4 -36 6, 37 1 customizing, 37 0 -37 1 publishing, 36 7 -36 9 adding, 67 Adobe Photoshop, importing, 215-218 code, 11... formatting, 32 3 -32 4 modifying, 87-92, 98-105 Preload Images, 262, 279 30 0 -30 2 inline links See internal links inline styles, 150-151, 187-188 Input (Button) function, 34 9 refreshing, 99 Insert button, 261 resizing, 101 Insert Comment button, stacking, 212 styles, creating, 188190 swap-images, creating, 260-262 thumbnails, 94 See also thumbnails Import dialog box, 67 Import Site Wizard, 24, 40 importing... internal links, 66 See also layers, 30 -31 , 30 3 -30 4 frames; layers Keep Aspect Ratio option, 91 frameworks, 2 23- 226 existing web pages, keyboard shortcuts, testing web pages, 48 keywords dynamic web templates, 34 1 formatting, 454-455 232 - 234 new, 234 - 238 pages, 30 planning, 222-2 23 positioning, 229- 232 Table Layout Tool, 139 -141 left panels, navigating, 12-14 From the Library of Lee Bogdanoff 489 lightning... 400 formatting, 461-462 HTML, 34 8 -35 5 modifying, 35 6 properties, 36 0 results, 35 5 -35 6 forums, dynamic web templates, 32 9 frames, 30 -31 , 281, 30 3 -30 4 aligning, 288 behaviors, configuring text, 295-296 editing, 287-291 2 23- 226 existing web pages, 232 - 234 new, 234 - 238 Frequently Asked Questions See FAQs FrontPage Server Format), 82 Go to URL behavior, 272 graphics, 79-82 See also images Graphics Interchange . as, 2 13- 215 tags, 56 buttons, 30 , 241 -244 , 256-257 in Code View, 112 creating, 468 CSS, 248 -256 definition of, 244 editing, 247 -248 Flash, 36 6 formatting, 244 -248 hovering, 249 main menus, 2 saving,. 2 saving, 247 -248 buying domain names, 428 C Call Script behavior, 265 Cascading Style Sheets. See CSS Cell Properties, 136 - 137 cells aligning, 132 deleting, 133 merging, 132 - 133 resizing, 140 splitting,. 36 8 functionality layers, 297 -30 3 PHP, 39 7 -39 9 header images, 236 - 238 images, 79-82, 84-87 menus, 236 - 238 padding, 214 Index From the Library of Lee Bogdanoff ptg rows, 132 ScreenTips, 69 Silverlight, 37 3 Address