Note: You can also edit menu items using the Properties inspector, as you’ll see in Step 8. ![]() As you can see, we’ve replaced Item 4 with Agents, and Item 3 with Talent, and we’ve selected the next item. To add your own text, simply click-and-drag to select the text within each navigation box and then type over it to replace it with the word or words you want to use. When a menu bar is inserted, Dreamweaver populates it with placeholder text: Item 1, Item 2, etc. ![]() Start by selecting the style named “ul.MenuBarHorizontal li” in the CSS panel, and then in the Properties pane below it, click to the right of the Float field and use the drop-down list to select Right instead of Left. To change alignment, we need to change the Float setting. By default, the horizontal menu aligns to the left of the page but you can easily align it to the right by changing the definition of the corresponding style. The format of a Spry menu is controlled by CSS thus, to alter the appearance, you need to edit the CSS definitions. Once the menu bar is inserted, you can customize it by changing the text, colors, fonts, and other options. Click on the corresponding button to make your selection and then click OK to insert a generic menu bar into the page. Or you can create a vertical menu bar with submenu options that open to the right of the main menu items. You can use the Spry Menu Bar dialog to create a menu that displays horizontally across your page with submenu options that drop down below the menu bar. Place your cursor where you want to create the menu in your webpage, and then click on the Spry Menu Bar icon (or go to Insert>Spry>Spry Menu Bar). To insert a Spry menu, first open the Spry Insert Bar at the top of the workspace by clicking on the Spry tab. (You’ll find tips for editing CSS layouts like this one in Layers, July/August 2007, p. If you choose one of the CSS Layouts, you can alter the layout to suit your design by editing the CSS definitions. ![]() In the New Document dialog, you can choose from a variety of file types, including ASP, PHP, and CFM however, if you’re creating a new page for a basic, static website, choose Blank Page, HTML, and a CSS Layout (or choose None to create a completely blank page). To create a new page, choose File>New and then select a file type. For more detailed instructions, read the online tutorial “Defining a Site in Dreamweaver” at STEP 3 Create New Page/Open Existing One If you’re creating a new site, choose Site>New Site, select the Advanced tab, and fill in the fields in the Local Info category. If you’ve already gone through the site setup process, you’re ready for the next step. You can add a Spry menu to a new or existing page, but like most of the features in Dreamweaver, things work better if you first define your website. For example, this site has a section called “Talent” as a main category, and then has subcategories for talent with different jumping skills. As a result, many Web designers divide a site into a few main categories and then further divide those into subcategories. ![]() As a general rule, it’s good practice to limit the number of links in a navigation bar to no more than six or seven. (You can also use these steps to create a vertical menu bar by selecting Vertical instead of Horizontal in Step 5.)Įven before you start creating a navigation menu like the one shown here, take some time to plan how best to organize the site’s links and structure. The following tutorial shows you how to create a horizontal drop-down menu bar for site navigation. There are so many Spry features, Adobe added a new Insert Bar to the top of the work area to provide easy access to all of the Spry options. One of the most dramatic enhancements to Adobe Dreamweaver CS3 is the Spry framework, a new set of tools that you can use to create drop-down menus, collapsible panels, and other advanced features.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |