1 NOTE: For this tutorial you will need Internet Explorer 8 1. Click Site, then New Site, go to the Templates tab. Fig. 1.0 2. Choose Organization 5 Fig.1.2
2 3. Double click default.html at the bottom of the screen to get a quick preview of the site. Fig. 1.3
3 Adding Subcategories to Your Menu 1. Double click master.dwt (the option at the very bottom on the left panel). NOTE: Any changes you make to the master.dwt file will apply to all your other pages in your website. Fig.1.4 2. Click Code at the bottom to go to code view. Fig.1.5
4 3. In the master.dwt tab, locate the line starting with the following code: <div id="navigation">. Fig.1.6 4. Highlight everything starting with <div id="navigation"> all the way to </div> (as shown in the snapshots below). Fig.1.7 5. Right click and Delete the highlighted portion mentioned above. NOTE: Once deleted, make a space where the code was deleted by pressing the Enter button. Fig.1.8 6. Go to the website http://expressionweb.us/lear
5 n.html 7. Click html.txt on the main page. Fig.1.9
6 8. Click on Page on the upper right hand corner in Internet Explorer, then click on View Source at the very bottom of the menu. Note: If view source does not appear, Click on actual page and retry step again. If Page is not present on web browse then it is the figure below. Fig.2.0
7 9. Highlight the html code on the screen that appears; right click and copy the html code. Fig.2.1 10 Go back to Expression Web 4 and paste the copied code into the space where the old code was deleted. Fig.2.1 11 In the master.dwt tab, click Save. Click Yes and then click Close when message appears asking to update all other files. 12 Go to the default.html tab
8 and click Save Converting vertical dropdown menu to horizontal drop down menu 1. Go to File, New, and click Page. On the General tab double click CSS. Fig.2.2 2. Refer back to http://expressionweb.us/le arn.html. Click on menu css.txt link. Fig.2.3 3. Highlight and copy the whole code. 4. Go back to Expression Web 4.
9 5. Paste the copied code into the blank space on the page in Expression Web 4. Fig.2.4 6. Save the page as Menu in the Styles folder. Fig.2.5
10 7. Click on the Master.dtw tab. On the bottom left of the codes click Design. Fig.2.6 8. Now that you have your CSS Style Sheet, double click the Styles folder on the left panel in Expression Web 4. Fig.2.7
11 9. The Menu.css should be under the Styles folder; DRAG the Menu.css file right onto the master.dwt page. You should now see a horizontal arrangement of the menu on the webpage. Fig.2.8 Fig. 2.9 Result after dragging Menu.css (fig. 3.0) Fig.3.0 10. Save your progress. 11. When prompted to update master.dwf, click Yes.
12 12. Right click on the default.html tab and click Save. 13. Hit F12 on your keyboard to view your website and test your drop down menu. In the Internet Explorer preview you should now see a drop down menu.
13 Renaming and linking headings in the drop down menu, and adding/removing additional list items 1. Go back to Expression Web 4. 2. Click on the Master.dwt tab and then click the Split tab at the bottom.
14 Renaming the Headings 1. Highlight the categories you want to change on the dynamic page. Rename the category. This also highlights the code portion on the top of the screen. Update all websites. **The following portion is optional but it does help clean up the look of your drop down menu.
15 2. Click on the menu.css tab and look for dropdownmenu. 3. Adjust width and padding depending on your new renamed categories as needed and save.
16 4. Click on master.dwt tab and look for default.hmtl. Click on code on the bottom left of the default.html. Then Highlight it in code view; it will highlight it in Design view. Linking Dropdown Menu Options 1. Right click on the box in Design view and click on Hyperlink to change the hyperlink. *A hyperlink, for those that do not know, is a reference to a document that a reader can directly follow by clicking on it. 2. Select the hyperlink that you want to use to replace the previous hyperlink.
17 3. Click OK and save your progress on all the tabs. 4. Test your links by pushing F12 to view your website.