1

Dividing the Page with the <div> TagThe <div> tag is used to establish separate divisions or areas of your page. It is one of the most powerful elements in xhtml, as it is essential for positioning the design of your page using CSS.

The id AttributeThe id attribute can be used with any tag element, but to identify and define an area of your page, the <div> tag can be used.

Facts about id’s:The value for the id attribute must be used only once on your page. It is a unique identifier. Keep in mind that the id value is case-sensitive. "Top" is different from "TOP" and also different from "top" – it is easiest to use all lower case letters.Do not use spaces or any special characters as the id value. You may use letters, digits (1 thru 9), dashes (-), and underscores (_) but you must start the id value with a letter.

. The true visual power of the <div> tag will not be known until CSS is implemented.Do not be frustrated if you do not fully understand every bit of the code; just think of this as an example you can refer to again in the future.

The Div Tag for Page Divisions

2

• Use of classes. Classes are an identifier that keeps a specific set of rules inside of it. Specific classes you can identify a section of a page by function instead of by type.

3

Create a CSS layout – Using CSS IDsFor beaver Cheese site

• Ctrl + N, save as index2.html• Insert div tag, Insert: at insertion point, ID: wrapper• CSS styles, new rule – ID (one discreet section of a website with specific qualities).

Name it wrapper, this document only• Box: 1005W x 800H, float left• Replace dummy text with: banner sitNav leftNav MainContent rightNav Footer

• Select banner, Insert div, wrap around selection, ID: banner, new CSS rule,

• Box 1005W x 200H, float leftSelect SitNav, Insert div, wrap around selection, ID: banner, new CSS rule,

• Box 1005W x 35H, float left• Select leftNav, Insert div,

wrap around selection, ID: banner, new CSS rule,• Box 178W x 800 – 200- 24- 35H, float left

Select mainContent, Insert div, wrap around selection, ID: banner, new CSS rule,

• Box 1005-178-178 x 800 – 200- 24- 35H, float leftSelect rightNav, Insert div, wrap around selection, ID: banner, new CSS rule,

• Box 178W x 800 – 200- 24- 35H, float left• Select footer Insert div,, • Box 800W x 40H, float left

4

* Universal tag – talks to all other tags. + to add a new CSS rule.

Go to box: 0 padding, 0 marginPencil – allows you to editRemember – 0 is not the same as blank.Insert the Banner, Backgrounds of siteNav (menubar with repeat), leftNav

(left_border, repeat and rightNav,Footer.When you are complete save it as the div_template.Add a background color, #EEE (light gray) to the main content. Notice how

the background of the overall page is not effected.

• Drop Down Menu – Dreamweaver

• Remove the navigation bar if you’ve typed it in.

• Spry navigation bar – spry menu bar – horizontal menu

• Places a basic 4 menus

• It creates 3 levels

• I need 6 button – click the + button

• http://www.youtube.com/watch?v=G8oZEzGNI20

5

Spry Menu Bar

A set of tools that you can use to create drop-down menus, collapsible panels, and other advanced features. We will tart with Spry Menu Bar.

• Place the insertion point in front of Our Family• Insert, Spry Menu BarOur categories will be:

RecipesCheese Balls Cheese Salad Cheese Spinach Bake Cheese Tart

Cheeses Red Windsor A cheddar cheese marbled with red wine.Stilton - 1, 2, 3 An English blue cheeseEmmental - 1, 2, 3 A yellow, medium-hard swiss cheese, with characteristic large holes.

Linkscheese.com - You can search the database of 654 cheeses by names, by country of origin, by kind of milk that is used to produce it, or by texture.ilovecheese.com - Dairy Management Inc. is the nonprofit domestic and international planning and management organization Cheese Counter - Featuring articles by regular guest Steve Jenkins, author, frequent magazine contributor, and cheese consultant. Fork And Bottle Resources - A large list of international cheese websites.wikipedia.org - The cheese portal at Wikipedia.

FAQS

6

Beaver Cheese FAQApr 28th, '06 Q.: Who is in charge here?A.: Jon Sullivan.

Q.: Who is reviewing the cheeses?A.: At this point just Jon. We hope to have more reviewers soon. Sometimes my wife will try the milder cheeses. And the cat is a big fan of blues and stinky cheeses.

Q.: Will you be reviewing Venezuelan Beaver Cheese?A.: If we can find some. The man obsticle will probably finding some beavers who will let us milk them. But since beavers are mammels and produce milk, it's certainly possible to make beaver cheese. However, since no species of beaver is native to South America said cheese would still not be "Venezuelan" beaver cheese. I think our only real hope would be finding a family down there who has lots of pet beavers.

Q.: Your reviews suck. Do you know that? Your knowledge of cheese seems to be limited to watching the "wagon Wheel" episode of Schoolhouse Rock. A.: Yes. We know. That's sort of the charm.

Q.: You said sage derby was was a semi-hard cheese, when it's classified by all cheese experts as a hard cheese. And the sage deby you tried looks to have food coloring in it, which means it's not even really sage derby. In fact if you want real sage derby you'll need to travel to Britain and talk to the Fowlers family of Earlswood (the family moved from Derbyshire to Warwickshire in 1918) who have been making traditional sage derby for over 100 years. Why don't you use real cheeses? The space alien looking sage derby you have there looks like it came from the local Quicky-Mart. Pfft.A.: You, sir, need help.

Q.: Will you be reviewing other cheeses besides the ones in the Monty Python skit?A.: Yes, but we need to get through those first. Yes, we'll be doing the Wallace & Gromit cheeses. As the hope is that the site will have a scope beyond just one joke, it's my hope this will turn into a large and comprehensive cheese review website.

Q.: You deleted my comment. Did I do something wrong?A.: Probably not. It's just that I like to keep the comments "clean". Which means that I need to trim out off-topic comments, penis references, boring personal stories about bunnies, etc. Especially in the main articles for each cheese. This isn't a free speech zone, so don't even bother appealing to that. I want the site to be useful, pleasant, and fun. And I'm the one who gets to decide what fits. If that upsets you, I'm not sure there's anything I can do to help.

Q.: You're sort of an asshole sometimes aren't you?A.: Yes. This is true. Its a character flaw of mine.

7

Customize the MenuBar Widget• Although the Property inspector enables you to make simple edits to

a Menu Bar widget, it does not support customized styling tasks. You can alter the CSS rules for the Menu Bar widget and create a menu bar that is styled to your liking.

• All CSS rules in the topics below refer to the default rules located in the SpryMenuBarHorizontal.css or SpryMenuBarVertical.css file (depending on your selection).

• Dreamweaver saves these CSS files in the SpryAssets folder of your site whenever you create a Spry Menu Bar widget. – These files also contain useful commented information about various

styles that apply to the widget. – Although you can easily edit rules for the Menu Bar widget directly in the

accompanying CSS file, you can also use the CSS Styles panel to edit the menu bar’s CSS.

– The CSS Styles panel is helpful for locating the CSS classes assigned to different parts of the widget, especially if you use the panel’s Current mode.

8

Change text styling of a menu item

The CSS attached to the <a> tag contains the information for text styling. There are also several relevant text styling class values attached to the <a> tag that pertain to different menu states.

 To change the text styling of a menu item, use the following table to locate the appropriate CSS rule, and then change the default value:

9

Change the background color of a menu itemThe CSS attached to the <a> tag contains the information for a menu item’s background color. There are also several relevant background color class values attached to the <a> tag that pertain to different menu states. To change the background color of a menu item, use the following table to locate the appropriate CSS rule, and then change the default value:

10

Change the dimension of menu items1. You change the dimension of menu items by changing the width properties

of the menu item’s li and ul tags.2. Locate the ul.MenuBarVertical li or ul.MenuBarHorizontal li rule.3. 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).

4. Locate the ul.MenuBarVertical ul or ul.MenuBarHorizontal ul rule.5. Change the width property to a desired width (or change the property

to auto to remove a fixed width).6. Locate the ul.MenuBarVertical ul li or ul.MenuBarHorizontal ul li rule:7. Add the following properties to the rule: float: none; and background-color:

transparent;.8. Delete the width: 8.2em; property and value.

Position submenusThe 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.