Lesson 10

September 13 8.45 AM –

1. Put this code into your webpages (somewhere near the top of each page)

<div id="google_translate_element"></div><script> function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element');} </script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

When you click f12 you should get

Experiment with picking different languages for your site

2. Make a new page and call it menu or if you have a baking page and already have a menu page call it spry-menu

Spry menu is different than the one we made using Fireworks.

E. Change the dimension of menu items

You change the dimension of menu items by changing the width properties of the menu item’s li and ul tags.

1. ul.MenuBarHorizontal li rule.
2. Change the width property to a desired width (or change the property to auto to remove a fixed width, and add the property and value white-space: nowrap; to the rule). See the illustration below SELECT BOX IN THE CSS RULE AND CHANGE THE WIDTH BELOW THAT IMAGE SEE HOW TO CHANGE THE COLOUR AROUND THE BOX (CHOOSE BORDER)
3. Locate the ul.MenuBarHorizontal ul rule.
4. Change the width property to a desired width (or change the property to auto to remove a fixed width).
5. Delete the width: 8.2em; property and value.

If you want to do more with your drop downs and play around with the subfolders then Position submenus

The position of Spry Menu Bar submenus is controlled by the margin property on submenu ul tags.

1. Locate the ul.MenuBarVertical ul or ul.MenuBarHorizontal ul rule.
2. Change the margin: -5% 0 0 95%; default values to the desired values.

PUT DROPDOWN MENUS ON ALL YOUR PAGES

Here is an example of using dropdown spry menus http://neuage.us/travel/ http://neuage.us/travel/menubar-cities.html with lots of menus

3. Make a new page and call it tables

4. Go to insert > tables and add a table and put stuff in it. Change the border and backgrounds