Sams Teach Yourself Microsoft Expression Web 3 in 24 Hours- P12 ppsx

ptg 312 HOUR 18: Building a Functional Menu FIGURE 18.4 To make the items of an unordered list appear next to one another, simply set the li style to display:inline. padding-bottom to 5px. At the same time, set the font-size to 0.8em, text- transform to uppercase, color to #666666, and text-decoration to none. Click Apply to see the changes take effect. 7. Finally to make the menu items react when the visitor hovers her mouse over them, create a new style with the selector #horizontalMenuBox ul li a:hover and set color to #333333 and background-color to #C4C2AB. Click OK to apply the new style, save, and test the page in your browser. As you can see in Figure 18.5, the items in the horizontal menu reacts in much the same way as the vertical one with one major difference; the entire hover area is a link. This is because you used the padding in step 6 to expand the link area to cover an area larger than the text itself. You can use the same technique to make the entire area of the vertical menu into a link. Pure CSS Drop-Down Menus: A Clean Alternative Now that you’ve created a vertical and a horizontal menu, it is time to merge the two into a more advanced drop-down menu in which the main menu is horizontal and the submenus are vertical. As you have learned, if you want your page to be as accessible as possible and standards-compliant and cross-browser compatible, base From the Library of Lee Bogdanoff ptg Pure CSS Drop-Down Menus: A Clean Alternative 313 FIGURE 18.5 With some basic styling, the unordered list is turned into a functional hori- zontal menu. all your menus on ordered or unordered lists. That way, the menu is still meaningful if the visitor is on an old computer or uses a text-only or text-to-speech browser. The ideal solution for making drop-down menus should be to create an unordered list with sublists styled using CSS. And in an ideal world, this wouldn’t be that much of a problem. Unfortunately the idiosyncratic nature of the most prolific browsers (espe- cially Internet Explorer 6) has made it all but impossible to make a CSS drop-down menu without using some form of custom coding for these browsers or adding JavaScript or behaviors to make everything work properly. As new versions of the many different browsers emerge, these problems with incon- sistencies become less and less prevalent. Sometime in the foreseeable future, they will likely disappear completely or at least diminish to the point where they are no longer a concern. In the meantime, designers have to live with one of two options: create pure CSS drop-down menus that might have problems in older browsers, or make menus that have JavaScript built in to fix the browser problems. Here we focus on merging the preceding two menus to create a drop-down menu using only CSS and no special browser-specific code. As a result, it might not work properly in Internet Explorer 6. Step 1: Make a Menu List 1. In the menus.html page, insert a new div underneath the code for the horizon- tal menu and give it the ID #dropDownMenu. Inside the new div create another From the Library of Lee Bogdanoff ptg 314 HOUR 18: Building a Functional Menu FIGURE 18.6 You can dupli- cate the basic unordered lists by copying and pasting them within Code view. copy of the unordered list menu from above by copying and pasting every- thing within the <ul> tags (see Figure 18.6) 2. Create sublists for three of the new menu items. In Split view, select the Menu Item Two list item. In Code view, place the cursor right before the closing </li> tag, and press Enter to create a new line. Type <ul> to create a new unordered list (IntelliSense closes the tag for you), press Enter again to create a new line, and create a sublist item by typing <li>. Create three sublist items named Sub List Item One and so on (see Figure 18.7). 3. Now that you have a sublist, go back to Design view make all of the new items into links that point back to the current page. 4. Repeat steps 2 and 3 for two of the other main menu items (see Figure 18.8). Step 2: Styling the Main Menu Now you have a working set of hyperlinks, but it looks nothing like a menu. The next step is to turn the menu into a horizontal one like you did in the menu previ- ously in this chapter. From the Library of Lee Bogdanoff ptg Pure CSS Drop-Down Menus: A Clean Alternative 315 FIGURE 18.7 To create a list within a list, you need to edit the code in Code view. Although doing so is not necessary, split- ting up the tags and spacing them as shown in this screen- shot helps with readability. FIGURE 18.8 The lists within lists appear as subsets of their parent list items. 1. Create a new style with the ID #dropDownMenu. Set font-family to Arial, Helvetica, sans-serif; background-color to #EBEADF; border to solid, 1px, #C4C2AB; and margin-top to 10px to create some space. From the Library of Lee Bogdanoff ptg 316 HOUR 18: Building a Functional Menu FIGURE 18.9 Even with the li style to display:inline the list still stacks vertically. 2. Create a new style with the selector #dropDownMenu ul and set padding and margin to 0px for all sides. Note that in Design view all the list items line up to the left side of the box regardless of what level they are at. 3. Create a new style with the selector #dropDownMenu ul li and set display to inline under the Layout category. In the preceding menu, this was enough to align the menu items left to right rather than top to bottom, but if you click Apply you see that the list items still stack vertically. This is because the sublists are too wide to fit on one line and are considered one item (see Figure 18.9). 4. To get the new menu to stack properly, you need to do two things: Define a specific width for each list item and make them float to the left. Still in the #dropDownMenu ul li style, set width under Position to 150px. You can set it wider if you want, but any narrower and the text in the submenu items won’t fit. Then go to the Layout category and set float to left. Click Apply again, and you see that now the main menu items line up from left to right, and the submenu items appear as vertical lists under their respective parent item (see Figure 18.10). 5. Because we are operating with two layers of list items, the basic font styling should be done in the li style: Still in the #dropDownMenu ul li style, set the font-size to 0.8em and text-transform to uppercase. To give the buttons From the Library of Lee Bogdanoff ptg Pure CSS Drop-Down Menus: A Clean Alternative 317 FIGURE 18.10 With the width and float attrib- utes set, the list starts to look like a drop-down menu. some breathing space, set height under Position to 25px. Click OK to apply the changes. 6. Next you need to style the links like you did earlier. Create a new style with the selector #dropDownMenu ul li a. Under Font set color to #666666 and set text-decoration to none. Go to Background and set background-color to #EBEADF manually, or you can use the Eyedropper tool and pick the back- ground color from one of the other menus. Click Apply and you see that the links now have the right font and background color but that the background is visible only directly behind the links, as shown in Figure 18.11. 7. For the menu to look and function properly, the link area needs to extend beyond the text to cover the allotted area in the boxes the li style has created. In the earlier horizontal menu, you used the padding attribute to do this, but this time you use the line-height and display attributes: Still in the #dropDownMenu ul li a style, go to Block and set the line-height attribute to 25px to match the height you set in the #dropDownMenu ul li style earlier. Next go to Layout and set display to block. Finally set padding-left to 8px to create some space between the left edge and the text. Click OK and the back- grounds now fill out the correct areas, as shown in Figure 18.12. 8. Now that the buttons extend to fill the required area, create a new pseudoclass with the selector #dropDownMenu ul li a:hover and set color to #333333 and background-color to #C4C2AB. Click OK, save the page, and test it in your browser. From the Library of Lee Bogdanoff ptg 318 HOUR 18: Building a Functional Menu FIGURE 18.11 Unless other- wise defined, the background color only appears directly behind the link text. FIGURE 18.12 With the line- height and dis- play properties set properly, the link back- grounds extend to “fill out” the menu boxes. Previously in the book, you learned that the block attribute caused the element to which it was applied to appear on its own line and fill out that line. The same thing happens when the attribute is applied to the style in step 7, but because the list item style (li) has already been set to inline with a fixed width, the block is con- strained by the li box and fills out only the area within it. Did you Know? From the Library of Lee Bogdanoff ptg Pure CSS Drop-Down Menus: A Clean Alternative 319 FIGURE 18.13 Although the menus line up correctly, all the submenus are visible all the time. Step 3: Making the Drop-Down Menus Drop Down As you can see in Figure 18.13, the main menu and submenus line up correctly, but the submenus are all visible all the time. But the whole point of drop-down menus is that they drop down only when the visitor hovers over them. To achieve this you are going to use the :hover pseudoclass with the visibility attribute to hide the sub- menus. 1. First hide the submenus so that they are invisible unless the user triggers them. To do so, create a new style with the selector #dropDownMenu ul li ul. This style affects only the unordered lists contained within a list item, aka the sub- menus. Under the Layout category, set the visibility to hidden. Click OK to apply the modified style. Now the submenus are no longer visible in Design view. 2. Create a new style with the selector #dropDownMenu ul li:hover ul. This style is a pseudoclass that triggers when the visitor hovers over a main menu list item and affects any unordered list contained within that list item. Under the Layout category, set visibility to visible. Click OK to apply the new style. Save and preview the page in your browser; you see that the drop-down menus now work the way they should (see Figure 18.14). Furthermore the menu is 100% CSS- based, which means it works without any code additives such as JavaScript. But, most important, it is fully legible if the visitor uses a text-only or text-to-speech browser. From the Library of Lee Bogdanoff ptg 320 HOUR 18: Building a Functional Menu FIGURE 18.14 The pure CSS drop-down menu now works prop- erly in all mod- ern browsers. FIGURE 18.15 With styles turned off, the CSS-based menus revert back to standard unordered lists for easy reading. As you can see in Figure 18.15, with styles turned off in Firefox, the CSS-based menus revert to their original form, which is standard unordered lists with sublists. Not only is the menu easier to read, but also the layout and ordering is intuitive to the visitor even without styles. From the Library of Lee Bogdanoff ptg Pure CSS Drop-Down Menus: A Clean Alternative 321 Watch Out! Not All Browsers Like the Pure CSS Drop-Down Menu As previously mentioned, the pure CSS drop-down menu is not a perfect solution because not all browsers support it. For unknown reasons, Internet Explorer 6 does not support pseudoclasses attached to items other than simple anchors ( a style). Because you used the li:hover style to create the drop-down effect, it will not work properly in Internet Explorer 6. To solve this problem, you have to either employ a custom JavaScript that simulates the li:hover pseudoclass for IE6 or create a separate menu that replaces the pure CSS drop-down menu for IE6 users. One clever workaround is to place the pure CSS drop-down menu in one layer and a custom IE6 menu in another, and then use the Check Browser behavior to choose what layer to show in the page based on what browser the visitor uses. The Internet Explorer 6 compatibility issue is a diminishing one because more and more users are upgrading to newer versions of the browser (Internet Explorer 7 has been out for some time and Internet Explorer 8 was rolled out in the spring of 2009), and most, if not all, other browsers support the li:hover property. With that said, you always have to consider the lowest common denominator and whether you should “dumb down” your sites to accommodate it. Styling the Submenus to Make Them Stand Out Right now there is no visual difference between the main menu items and the sub- menus. But depending on the design of the site, it can sometimes be a good idea to give the visitor visual clues that separate different types of content from each other. A simple way of doing this is to give the submenu items a different set of styles than the main menu items. 1. Create a new style with the selector #dropDownMenu ul li ul li a. This style affects only the links inside list items that are housed inside another list item. Under Font set color to #FFFFFF and under Background set background-color to #3399FF. This gives the submenus a blue background color. Click OK to apply the new style. 2. Because of the cascade, unless you specify something different, the hover state of the submenus is styled by the #dropDownMenu ul li a:hover pseudoclass. To change the hover state, you need to create a new pseudoclass with the selec- tor name #dropDownMenu ul li ul li a:hover. Set the color to #FFFFFF and set the background-color to #0065CA. Click OK, save and test the page in your browser. With the new styles applied, the submenu now has a distinct look that is different from the main menu (see Figure 18.16). From the Library of Lee Bogdanoff [...]... can tell Expression Web 3 what content should go in what region In this example, the tag contains only one block of content, and Expression Web 3 is guess- ing that it should go in the heading region To change this, select the list item by clicking it and clicking the Modify button From the Library of Lee Bogdanoff Understanding Dynamic Web Templates 33 9 FIGURE 19.11 When the regions in the current... available in the attached style sheet and new styles From the Library of Lee Bogdanoff 33 6 HOUR 19: Dynamic Web Templates 5 When you finish inserting content in the page, press Ctrl+S to save the file In the Save As dialog, go to the Pages folder and give the new page the name about.html By previewing the new page in your browser, you see that although all you did was ▲ insert the heading and main content,... open in Split view, delete all the text content in the #mainContent div (see Figure 19.1) You can do this by highlighting the text and deleting it in Design view, or by highlighting all the content FIGURE 19.1 After deleting the content within the #content div, you should still see the #centeredBG, #header, #menu, #content, and #footer divs in Design view between the beginning and end ... existing page In Hour 9, “Getting Boxed In, Part 1: Using Tables for Tabular Content,” you created a page called myCameras.html that contained a table listing all my cameras Now you want this page to match the rest of the pages in the MyKipple site 1 Open the myCameras.html file in Design view From the menu bar, select Format, Dynamic Web Template, Attach Dynamic Web Template In the Attach Dynamic Web. .. Expression Web 3 automatically applies the h2 style If you press Enter to create a new line, a warning pops up to tell you that you can’t make the change because a DWT is locking the code 4 Place your cursor in the content region, and write a short bio about yourself or insert some other content of your choice Because this region is not contained within a tag, it is not constrained in the same way the heading... should (see Figure 19. 13) Now if you make any changes to the DWT, the myCameras.html page changes automatically, too From the Library of Lee Bogdanoff 34 0 HOUR 19: Dynamic Web Templates FIGURE 19. 13 With some tidying up, the myCameras.html page fits in nicely with the new design ▲ Editable Regions Outside the Body As mentioned in the beginning of this hour, Expression Web 3 inserts an editable region... file open in Split view, find the #mainMenu div housed inside the header In Code view create a new unordered list with three buttons named Home, Gallery, and Contact Make each of them a link pointing back to default.html 2 Create a new style in kippleStyles.css and give it the selector #mainMenu ul Set width to 100% so that the box spans the entire width of the header box 3 Create a new style in kippleStyles.css... one another FIGURE 19.9 5 When it finishes, another information dialog opens to tell you how many pages Expression Web 3 updated If you check the Log box, the dialog expands to provide a more detailed log of the update process including a list of what After updating the files connected to the DWT, Expression Web 3 opens an information dialog telling you how many files were updated and if any files... Figure 19 .3) This creates a new editable region called heading Click Close to apply the changes FIGURE 19 .3 The Editable Region dialog lets you add and remove editable regions 6 Place your cursor inside the paragraph on the next line, and click the tag in the Quick Tag Selector to select the entire line, including the tags From the From the Library of Lee Bogdanoff 33 2 HOUR 19: Dynamic Web Templates... situations this is not necessary, so click Yes 3 Because you did not create the myCameras.html page using the DWT, there are no editable regions defined within the page Instead of just erasing the content not already defined in the page, Expression Web 3 makes an educated guess as to where you want your content and lets you correct its choices When there are no matching editable regions or there is another . a:hover and set color to #33 333 3 and background-color to #C4C2AB. Click OK, save the page, and test it in your browser. From the Library of Lee Bogdanoff ptg 31 8 HOUR 18: Building a Functional Menu FIGURE. Alternative 31 9 FIGURE 18. 13 Although the menus line up correctly, all the submenus are visible all the time. Step 3: Making the Drop-Down Menus Drop Down As you can see in Figure 18. 13, the main menu. the beginning and end <div id=”mainContent”> tags and deleting it in Code view. Make sure you leave the #centeredBG, #wrapper, #header, #mainMenu, #content, and #footer divs intact. 3. Place