Web Design. Santa Barbara. Dreamweaver Spry Menu Modifications
|
|
- Gilbert Stevenson
- 6 years ago
- Views:
Transcription
1 Web Design Santa Barbara Dreamweaver Spry Menu Modifications Scott Nelson Web Design Santa Barbara Updated
2 Table of Contents Introduction... 3 Default Spry Menu... 3 Top-Level Menu Structural Modifications... 5 Activating the Spry Menu Bar Properties Panel... 5 Changing the Top-Level Menu Text... 5 Changing the Menu Order... 7 Linking the Menu Items... 8 Global Menu Properties... 9 Modifying the Menu Font... 9 Font Size... 9 Font Family Font Style, Weight, and Variant Menu Item Colors Menu Item Mouse-Overs Top-Level Menu Appearance Modifications General Outline of the Process Changing the Width of the Top-Level Links Equally-Spaced and Centered Menu Items Text-Width Menu Items Fixed-Width Menu Items Padding Around the Menu Text Second and Third-Level Submenu Items Submenu Widths and Text Justification Submenu Font Sizes Border Surrounding the Submenus Third-Level Menu Offset Summary of Menu Modifications Highlighting Links in Top-Level Spry Menus Creative Commons Page 2 of 44
3 Introduction Dreamweaver Spry Menus are a text-based menu system. They use a combination of JavaScript and Cascading Style Sheets (CSS). As they are structurally an unordered list and not images. They are highly accessible and are a good option for sites that want good search engine optimization (SEO). The Spry menus are extensible and will work well in dynamic scripted pages. They support up to three levels of menus: top-level, the secondlevel and a third-level. Spry menus come in horizontal and vertical flavors. Because they are created with CSS, they can be customized in an almost endless variety of ways. This site, Web Design SB, uses a highly customized Spry menu. We will explore some of the general customizations you can do with these menus to enhance the navigability of your site. Default Spry Menu In following the Interface Design Procedure, the Horizontal Spry Menu Bar inserts inside the Header division and directly after the banner image. The code below depicts, where the Spry Menu Bar is inserted. The Spry Menu Bar will be followed by a break tag <br class= clearfloat />. The break tag pushes the remainder of the page below the menu bar. Page 3 of 44
4 This is how the page renders in Microsoft Internet Explorer 9. To illustrate how the menu renders, I chose to work with the top-level menu item, Item 3 as it is the only menu item with complete submenus. The Item 3 menu has been activated and the second-level menu items, Item 3.1, Item 3.2 and Item 3.3 are visible. The submenu for Item 3.1 is activated exposing the third-level menu. I refer to the text that make-up each of the menu items as menu text or link text. Page 4 of 44
5 A Spry menu will almost never be used in this default mode. The purpose of this document is to assist you in understanding how to modify this menu, using the CSS, to fit it to your design. Top-Level Menu Structural Modifications Activating the Spry Menu Bar Properties Panel In Dreamweaver, when you mouse-over the Spry Menu Bar (or any Spry object), the object handle will appear as a blue-tab. Click on the Spry Menu Bar: Menu Bar 1 tab. Clicking on the tab will activate the Spry Menu Properties Panel. Changing the Top-Level Menu Text For the purposes of this procedure we will enter only the link Text field for the menu items. The Interface Design Procedure describes in depth how to enter the information for Link and Title fields. 1) Click on Item 1 in the first column of the Menu Bar Properties panel, and then click in the Text field to the right. 2) Enter the text for your first menu item into the Text field, and then press Enter. Page 5 of 44
6 3) Repeat this for the next three menu items. 4) If you have more than four top-level menu items, click on the plus-sign (+) at the top of the first column to add another top-level menu item to the bottom of the list. 5) Enter the text for this menu item in the Text field, and then press Enter. 6) The menu system should look something like this in Dreamweaver, and something like this in the web browser. Page 6 of 44
7 Changing the Menu Order If you wish to change the order in which the links are displayed, you may select the item and then move it up or down in the order. Though we are working only with the top-level menu items (the first column), this will work will each of the menu item columns in the Spry Menu Bar Properties Panel. 1) In the Spry Menu Bar Properties Panel, click on the item you want to move, and then either click on the up-triangle above the column to move the item up in the order (to the left in the Spry Horizontal menu), or click on the down-triangle above the column to move the item down in the order (to the right in the Spry Horizontal menu). Page 7 of 44
8 Linking the Menu Items When you create a new menu item, the Link field is populated with a pound sign (#). This is a placeholder link. It essentially creates a link that doesn t go anywhere. When creating new menu items, it is easiest to link the menu items to an existing page. 1) Create a new page from template and then save the new page. 2) Open your site template, and then activate the Spry Menu Properties panel as show in the previous sections of this procedure. 3) Create a new menu item. 4) Add the Text and Title, and then click on the Browse button. 5) Scroll down your site files to find the newly created page you want the menu item to link to. Click on the file to select it, and then click on the OK button. Page 8 of 44
9 6) You will see the file name and path in the Link field in the Spry Menu Bar Properties panel. Repeat this section for as many pages as you want to add. Global Menu Properties Modifying the Menu Font I have a strong recommendation that you do not change the font, font-style, or fontsize from one menu level to another. Therefore, we will modify the font from the toplevel of the menu down. The first rule in the SpryMenuBarHorizontal.css is the ul.menubarhorizontal. This rule can be used to determine the font family and font style for the entire menu system. To begin to modify the menu font, click on ul.menubarhorizontal rule, and then click on the Edit Rule button at the bottom of the CSS Styles panel. Font Size The font size is initial set to 100%. This means it is 100% of the size of the default font set for the page. Page 9 of 44
10 By setting the font in percentages or ems, the menu text will get larger and smaller depending on the text size set in the browser. This is good for Accessibility of the menu in that visitors that are site impaired will be able to make the font bigger in order to see it, but you lose a bit of control of the menu design. Specifically, increasing the size of the font may cause the menu item to move to two lines of text rather than the desired single line. From a design standpoint, it is highly desirable to use pixels as the measurement, as it is easier to control the menu height and keep your design consistent. This is an example of the menu at 10 pixels. This is the menu at 24 pixels. Page 10 of 44
11 Font Family There are many built-in Font Families to choose from in Dreamweaver. This example is "Palatino Linotype", "Book Antiqua", Palatino, serif. This example is "Comic Sans MS", cursive. Font Style, Weight, and Variant In general, I recommend that you only change the following parameters for the ul.menubarhorizontal rule. Page 11 of 44
12 1) Font-family 2) Font-size 3) Font-weight 4) Font-style 5) Font-variant For menu consistency, all of these parameters should be changed at this level, for the entire menu and should not change for mouse-over indicators. Font color and background colors are changed in a different rule. Menu Item Colors Menu item colors are controlled by the ul.menubarhorizontal a rule. These colors are consistent through all levels of the menu and submenus. Page 12 of 44
13 In this rule, the background-color property is the background color of the menu. In the Interface Design Procedure, we have a graphic element that renders behind the menu. In this case, the background-color is disabled. This causes the background of the Spry menu to become transparent so that the graphic background will show through. The color property is the font color. This will allow you to change the color of the text in your menu to match your site color scheme. In the following example I have set the background-color to black (#000) and the color to white (#FFF). Page 13 of 44
14 Menu Item Mouse-Overs When the mouse or pointer hovers over a top-level menu item, it is desirable to make the menu item change in font color and/or background color. There are two rules that make this happen; ul.menubarhorizontal a:hover, ul.menubarhorizontal a:focus and ul.menubarhorizontal a.menubaritemhover, ul.menubarhorizontal a.menubaritemsubmenuhover, ul.menubarhorizontal a.menubarsubmenuvisible. Both rules must be changed in order for the rules to function properly in all browsers. Do not use these rules to change font-family, font-face, font-size, font-weight or any other property that will have the effect of making the menu text larger or smaller. The background-color property controls the background color the menu item will change to when the mouse pointer hovers over the menu item. The color property is the color the text will change to when the mouse pointer hovers over the menu item. In this example, I will make the background a dark-blue (#039 or #003399) color and the text a yelloworange (#FC3 or #FFCC33) color. 1) To change the background color, in the CSS Styles panel, click on the ul.menubarhorizontal a:hover, ul.menubarhorizontal a:focus rule. a) To set the color, click on the swatch, as shown below, and select a color from the pop-up color palette. You may also move the color-picker over the Design View of your page, and choose a color from your banner image or other image in the page. Page 14 of 44
15 b) If you know your Web Color number, you may key it in directly. You must be sure that the number is preceded by a pound sign (#). 2) To select the color of the text during mouse-over, set the color property. Page 15 of 44
16 3) To complete the procedure we must also change the ul.menubarhorizontal a.menubaritemhover, ul.menubarhorizontal a.menubaritemsubmenuhover, ul.menubarhorizontal a.menubarsubmenuvisible rule. In the CSS Styles panel, click on the ul.menubarhorizontal a.menubaritemhover, ul.menubarhorizontal a.menubaritemsubmenuhover, ul.menubarhorizontal a.menubarsubmenuvisible rule. a) To set the color, click on the swatch, as shown below, and select a color from the pop-up color palette. You may also move the color-picker over the Design View of your page, and choose a color from your banner image or other image in the page. In this example, I have entered the color number directly. b) If you know your Web Color number, you may key it in directly. You must be sure that the number is preceded by a pound sign (#).This color should be the same color you entered into the ul.menubarhorizontal a:hover, ul.menubarhorizontal Page 16 of 44
17 a:focus rule. 4) To select the color of the text during mouse-over, set the color property. This color should be the same color you entered into the ul.menubarhorizontal a:hover, ul.menubarhorizontal a:focus rule. The result should look something like the following example; dark-blue background and yellow-orange text on the activated or menu items that are moused-over. Top-Level Menu Appearance Modifications It is important for proper function of the Spry Menu Bar that the text in all of the top-level menu items is kept to a single line. The menu bar may behave inconsistently if the text in the top-level menu items is allowed to wrap to two or more lines. In order to change the appearance of the menu, we need to modify the style sheet for the menu. In this section, we will look at the CSS Styles panel to see how changes are made. General Outline of the Process To access the style sheet, open the CSS Styles panel, locate the SpryMenuBarHorizontal.css (or the SpryMenuBarVertical.css), and then click on the plus-sign (+) to open the sheet and see the rules. Page 17 of 44
18 Clicking on a specific CSS rule will display the properties for that rule in the Properties pane of the CSS Style panel. Page 18 of 44
19 You can edit a style by clicking in the value cell of the property you wish to change, or by clicking on the Edit Rule button at the bottom of the of the CSS Styles panel. The Edit Rule button opens the CSS Rule Definition window for the rule. You can change any of the properties of the rule using this window, except for CSS3 rules. CSS3 rules are supported in Dreamweaver CS5 and CS5.5, but not using the CSS Rule Definition window. In order to see what a change will do to your design, without closing the window, make your setting changes and then click on the Apply button. Using the Apply button can greatly increase your designing efficiency. Page 19 of 44
20 When you get the design to the point you want, click on the OK button to accept your changes and close the CSS Rule Definition window. Changing the Width of the Top-Level Links The width of the top-level menu items is determined by the following rule: ul.menubarhorizontal li Equally-Spaced and Centered Menu Items Click on the ul.menubarhorizontal li rule to select it, and then set the following properties. 1) Text-align: center 2) Width: 20% Page 20 of 44
21 This will have the following effect on the menu. Centering and utilizing the entire width of the interface give the design a well-balanced look. I chose 20% because I have five buttons. Here is a quick conversion chart if you have a different number of buttons. Number of Buttons Width of Each Button 3 33% 4 25% 5 20% 6 17% Page 21 of 44
22 Number of Buttons Width of Each Button 7 14% 8 13% Text-Width Menu Items By disabling the width of the menu items (in the ul.menubarhorizontal li rule), it will allow each menu item to be sized to the amount of text it contains. This is the result. This left-justified menu style can be very effective in some interfaces. If the padding to the left and right of the text in increased the menu can breath a bit more. To add spacing between the menu text links, click on the ul.menubarhorizontal a rule, and then click on the Edit Rule button at the bottom of the CSS Styles panel. Page 22 of 44
23 Click on the Box Category, and then set the Right and Left Padding to a larger number, such as 2 ems. Click on the Apply button until you achieve the desired effect, and then click on the OK button. Page 23 of 44
24 At 2 ems of spacing, this is the result. Fixed-Width Menu Items You may also set each top-level menu item to as fixed width by setting the width to a specific number of pixels. Page 24 of 44
25 This is the resultant effect. Because of the different widths of the text in each item, the menu looks unaligned in this configuration. This approach works best if all of the menu items have similar length text. Padding Around the Menu Text As we have seen in the previous menu alteration, padding around the menu text is determined by the ul.menubarhorizontal a rule. In all of the following examples in this section, the width property of the ul.menubarhorizontal li rule has been disabled. Doing this allows the menu bar to expand to the left and right as necessary. In the example below, the shaded area surrounding the Bryce Renderings text is the result of the padding specified in the ul.menubarhorizontal a rule: 0.5 ems on the top and bottom and 0.75 ems to the left and right. Especially when modifying the top and bottom padding, I like to use pixels. Here are some examples of different padding settings. 1) Padding-top: 5px; 2) Padding-right: 20px; 3) Padding-bottom: 5px; 4) Padding-left: 20px; 1) Padding-top: 20px; 2) Padding-right: 20px; 3) Padding-bottom: 20px; 4) Padding-left: 20px; Page 25 of 44
26 Second and Third-Level Submenu Items Submenu Widths and Text Justification The width of the submenus are changed in the rules; ul.menubarhorizontal ul and ul.menubarhorizontal ul li. Both of these rules must be changed to the same value in order for the second and third-level menus to render properly. The width can be set relative to the font size, such as in ems, or in a fixed width as in pixels. I have found that using a percentage is difficult to control, so I do not recommend using percentage widths for submenus. The default width is 8.2 ems. I find that this is far too small a width for proper pull-down menus. In this case, we will make the menus 200 pixels wide. As a side note here, it is also possible to set the justification of the text in the menu item with the ul.menubarhorizontal ul and ul.menubarhorizontal ul li rules. 1) In the CSS Styles panel, click on the ul.menubarhorizontal ul rule, and then click on the width property. a) Change the width to 200, and then select px from the units pull-down menu. Page 26 of 44
27 b) To left-justify the text in the submenu items, click on the Add Property link at the bottom of the Properties pane of the CSS Styles panel. c) Scroll down the list of properties until you see text-align, and then click on it. d) Set the alignment to left using the pull-down property value menu. Page 27 of 44
28 2) We need to repeat this same setting in the ul.menubarhorizontal ul li in order for this setting to work. In the CSS Styles panel, click on the ul.menubarhorizontal ul li rule, and then click on the width property. a) Change the width to 200, and then select px from the units pull-down menu. b) To left-justify the text in the submenu items, click on the Add Property link at the bottom of the Properties pane of the CSS Styles panel. c) Scroll down the list of properties until you see text-align, and then click on it. Page 28 of 44
29 d) Set the alignment to left using the pull-down property value menu. In context, you can see that the submenus better fit the design that the 8.2 em submenus that are the default. A word of caution, with this type of menu system, you must be careful that the right-most menu does not fly too far out to the right of the interface. Page 29 of 44
30 Submenu Font Sizes If there are a lot of menu items in the submenus, it is often a god idea to minimize the font size in the submenus, and not in the top-level menu items. The ul.menubarhorizontal ul rule is a good place to change the font size. I caution you to not change the font-family or font-face using this rule. 1) In the CSS Styles panel, select the ul.menubarhorizontal ul rule, and then click on the Add Property link at the bottom of the Properties pane. a) Scroll-down the list of properties, and then select font-size. 2) Enter a number and then select a unit. I find that relative sizes, such as ems or percentages do not work as the third-level menu is even smaller than the second-level Page 30 of 44
31 menu. I strongly recommend using pixels. In this case, I have chosen 14 pixels. In context, the submenu text is smaller than the top-level menu text. Border Surrounding the Submenus Borders around the submenus are governed by the ul.menubarhorizontal ul rule. The default border is a light-gray border a single pixel in width. In this default setting, it is sometimes difficult to discern the outline. You can change the style, width and color. Each attribute can be changed per side. The border style is shared by the second and third-level menus. Also, the border can be removed altogether Page 31 of 44
32 1) To modify the submenu borders, select the ul.menubarhorizontal ul rule, and then click on the Edit Rule... button at the bottom of the CSS Styles panel. 2) To make a change to the border, click on the Border Category, and then make the following changes. In this example, we will give the menu borders a beveled look. Page 32 of 44
33 a) Change the Width to 3 pixels, leaving the Same for all checkbox checked. b) In the Color column, uncheck the Same for all checkbox, and then set the Right and Bottom colors to a dark-gray. c) Click on the OK button. The effect is something like a beveled border with the light source at the top-left of the menu. Notice that the styling of the second-level menu is carried to the third-level menu. Page 33 of 44
34 Third-Level Menu Offset The third-level menu is offset from the second-level menu. In the default mode, the thirdlevel menu is rendered slightly on top of the second-level menu and slightly higher than the menu item that triggered the menu. The menu offset is controlled by the ul.menubarhorizontal ul ul rule. 1) Click on the ul.menubarhorizontal ul ul rule, and then click on the Edit Rule button at the bottom of the CSS Styles panel. Page 34 of 44
35 2) Click on the Box Category. In the Margin column, there are four settings: Top: -5%, Right: 0, Bottom: 0, and Left: 95%. a) The Top Margin setting controls the vertical position of the third-level menu. The more negative the number is the higher the third-level menu appears relative to the second-level menu item that triggered it. On the other hand, if the percentage goes positive, the menu is moved down relative to the triggering second-level menu item. In this figure, the Top Margin property is set to -50%. Page 35 of 44
36 In this figure, the Top Margin property is set to 5%. This is a favorite setting of mine. I feel that the flow of the menu and submenu should be down and to the right. b) The Left Margin setting controls how much the third-level menu overlaps with the second-level menu. The lower the percentage, the more the overlap. The higher the number the less the overlap. A setting of 100% renders the left side of the thirdlevel menu flush with the right side of the second-level menu. Values over 100% leave a gap between the second-level and third-level menus. This is not desirable and I strongly discourage the use of settings over 100%. In this figure, the Left Margin property is set to 50%. There is a lot of menu overlap with settings in this range. Page 36 of 44
37 In this figure below, the Left Margin property is set to 110%. You can see the gap between the second-level and third-level menus. This can create a functional issue if a visitor cannot bridge the gap in the time allotted before the menu automatically closes. I recommend the default Left Margin property setting of 95%. Summary of Menu Modifications Following is a summary of some different ways you can modify or customize the Spry Menu bar and the corresponding CSS rule you will need to address in order to affect the modification. When two CSS rules are mentioned in the CSS Rule to Edit column, then both rules be edited with the same changes. There may be other places that modifications to the menu system can be made. If you are new to Spry Menus, I strongly urge you to only modify the menus as suggested in this document. Page 37 of 44
38 Desired Menu Design Element to Change CSS Rule to Edit CSS Styles Panel This rule effects the entire menu bar and all submenus: Font family Font size Font weight Font style Font variant Distance between menu and other elements, such as the banner image ul.menubarhorizontal Width of the top-level menu items Horizontal position (justification) of menu text in the menu item: left, centered, right ul.menubarhorizontal li Menu item colors, including the font color and background color Distance between menu text and the sides of the menu item is determined by the padding of this element Borders around the menu items ul.menubarhorizontal a Page 38 of 44
39 Desired Menu Design Element to Change CSS Rule to Edit CSS Styles Panel Menu bar item color when mouse pointer moves over it. This includes the color of the text and menu item background. ul.menubarhorizontal a:hover, ul.menubarhorizontal a:focus ul.menubarhorizontal a.menubaritemhover, ul.menubarhorizontal a.menubaritemsubmenu Hover, ul.menubarhorizontal a.menubarsubmenuvisibl e Width of the submenus Justification of the text within the menu item ul.menubarhorizontal ul ul.menubarhorizontal ul li Submenu borders Submenu font size ul.menubarhorizontal ul Page 39 of 44
40 Desired Menu Design Element to Change CSS Rule to Edit CSS Styles Panel Position of the thirdlevel menu in relation to the second-level menu ul.menubarhorizontal ul ul Highlighting Links in Top-Level Spry Menus It is nice to have some navigation indication that you are on a specific page on in a specific area of the web site. In the example below, when the site visitor is on the About Me page, the About Me navigation link turns black and the background turns orange. This indicates you are on the About Me page. Subsequently, as the site is navigated, the navigation link for the page you are on indicates the page you are on. This procedure will explain how you can modify the Dreamweaver Spry menu bar to create a page indicator in the navigation system ( Page 40 of 44
41 If you have designed your site using the Interface Design Procedure, then your home page (index.htm) will be detached from your template (meaning that changes to the site template will not affect the home page). This is fine, because you will only need indicators on your interior pages. No indicator is required on the home page. 1) Open your template (main.dwt) in Dreamweaver, switch to Code View, and locate the Spry Menu Bar. Page 41 of 44
42 2) Add an ID attribute to each of the anchor tags that make up the top-level links of the Spry Menu. This will not adversely affect the functioning of the spry menu. ID values must not have spaces and may not start with a number. 3) Save your changes to the template. When prompted, click on the Update button. Close the template. 4) Open each individual page in your site one at a time (you will not need to edit the home page or the accessibility page). Switch to Code View and then find the head editable region. Page 42 of 44
43 5) Select and copy the code snippet as shown below. You will replace the ID01 with the ID of the link of that page that you are on. The #ID01:hover: is for the mouse-over. <style type="text/css"> #ID01 { background-color: #ffc000; color: #000000; } #ID01:hover { color: #ffffff; } </style> 6) Paste the block into the head editable region as the last element in that region. Change the ID01 text to reflect the Spry Menu ID you set for this page. In the example below, I have set the ID to #linkaboutme to designate the About Me page. Page 43 of 44
44 7) I encourage you to customize the rules, modifying the colors and other style attributes to fit the style to your design. Test your new hover function by saving your work and confirming that you like the color combos. Once you have saved your work and are happy with the results, copy this new revised Code Snippet, and use it on your remaining pages. 8) Repeat steps 5 and 6 for all pages in the site (except the home page and the Accessibility page). Be sure to change the ID link to reflect the Spry Menu ID that you set for each individual page. Save all the pages and synchronize the site. Creative Commons This document was created by Scott Nelson for the purpose of assisting students of the Santa Barbara City College, Multimedia Arts and Technologies, MAT153, Introduction to Web Design course. This document is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. You are free to copy, distribute and transmit this work and to adapt this work. You must attribute the work to Scott Nelson, Scott@WebDesignSB.com (but not in any way that suggests that I endorse you or your use of the work). You may not use this work for commercial purposes. This license verbiage is attributable to Creative Commons ( Registered Trademarks found in this document and are the sole property of their respective legal owners. Page 44 of 44
Create a Web Page with Spry Navigation Bar. March 30, 2010
Create a Web Page with Spry Navigation Bar March 30, 2010 Open a new web page by selecting File on the Menu bar, and pick Open. Select HTML as the page type and none from the layout list. Finally, we press
More informationHow to lay out a web page with CSS
Activity 2.6 guide How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS4 to create a simple page layout. However, a more powerful technique is to use Cascading Style
More informationHands On: Dreamweaver CS3 NEW SPRY Widgets
What is a Spry Widget? Spry widgets provide access to dynamic and interactive elements you might like to have on your Web page. These Spry elements include: Menu Bars Tabbed Panels Accordion Effects Collapsible
More informationGetting Started with Eric Meyer's CSS Sculptor 1.0
Getting Started with Eric Meyer's CSS Sculptor 1.0 Eric Meyer s CSS Sculptor is a flexible, powerful tool for generating highly customized Web standards based CSS layouts. With CSS Sculptor, you can quickly
More informationGetting Started with CSS Sculptor 3
Getting Started with CSS Sculptor 3 With CSS Sculptor, you can quickly create a cross-browser compatible layout with custom widths, margins, padding, background images and more. Additionally, you can use
More informationDear Candidate, Thank you, Adobe Education
Dear Candidate, In preparation for the Web Communication certification exam, we ve put together a set of practice materials and example exam items for you to review. What you ll find in this packet are:
More informationTable Basics. The structure of an table
TABLE -FRAMESET Table Basics A table is a grid of rows and columns that intersect to form cells. Two different types of cells exist: Table cell that contains data, is created with the A cell that
More informationHow to set up a local root folder and site structure
Activity 2.1 guide How to set up a local root folder and site structure The first thing to do when creating a new website with Adobe Dreamweaver CS3 is to define a site and identify a root folder where
More informationLaGuardia Community College Thomson Ave, Long Island City, New York Created by ISMD s Dept. Training Team. Overview
Overview The Spry Menu Bar allows you to add very user-friendly dynamic menus that allow for great organization to your website navigation. It builds a hierarchy of links to the inner pages of your site.
More informationHow to lay out a web page with CSS
How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS3 to create a simple page layout. However, a more powerful technique is to use Cascading Style Sheets (CSS).
More informationHow to create and edit a CSS rule
Adobe Dreamweaver CS6 Project 3 guide How to create and edit a CSS rule You can create and edit a CSS rule in two locations: the Properties panel and the CSS Styles panel. When you apply CSS styles to
More informationTaking Fireworks Template and Applying it to Dreamweaver
Taking Fireworks Template and Applying it to Dreamweaver Part 1: Define a New Site in Dreamweaver The first step to creating a site in Dreamweaver CS4 is to Define a New Site. The object is to recreate
More informationMcMaster Brand Standard for Websites
McMaster University s policy calls for all university websites to follow its brand standard. McMaster websites share common elements, presentation and behavior and a consistent design, enabling visitors
More informationUsing Dreamweaver CS6
6 So far we have used CSS to arrange the elements on our web page. We have also used CSS for some limited formatting. In this section we will take full advantage of using CSS to format our web site. Just
More informationADOBE 9A Adobe Dreamweaver CS4 ACE.
ADOBE 9A0-090 Adobe Dreamweaver CS4 ACE http://killexams.com/exam-detail/9a0-090 ,D QUESTION: 74 You use an image throughout your Web site. You want to be able to add this image to various Web pages without
More informationCSS Selectors. element selectors. .class selectors. #id selectors
CSS Selectors Patterns used to select elements to style. CSS selectors refer either to a class, an id, an HTML element, or some combination thereof, followed by a list of styling declarations. Selectors
More informationBefore you begin, make sure you have the images for these exercises saved in the location where you intend to create the Nuklear Family Website.
9 Now it s time to challenge the serious web developers among you. In this section we will create a website that will bring together skills learned in all of the previous exercises. In many sections, rather
More informationFrontPage 2000 Tutorial -- Advanced
FrontPage 2000 Tutorial -- Advanced Shared Borders Shared Borders are parts of the web page that share content with the other pages in the web. They are located at the top, bottom, left side, or right
More informationIntroduction to Web Design CSS Reference
Inline Style Syntax: Introduction to Web Design CSS Reference Example: text Internal Style Sheet Syntax: selector {property: value; Example:
More informationWorking with Images and Multimedia
CHAPTER Working with Images and Multimedia You can make your web page more interesting by adding multimedia elements. You can download the files featured in this chapter from www.digitalfamily.com/tyv.
More informationIntroduction to Web Design CSS Reference
Inline Style Syntax: Introduction to Web Design CSS Reference Example: text Internal Style Sheet Syntax: selector {property: value; Example:
More informationOverview of the Adobe Dreamweaver CS5 workspace
Adobe Dreamweaver CS5 Activity 2.1 guide Overview of the Adobe Dreamweaver CS5 workspace You can access Adobe Dreamweaver CS5 tools, commands, and features by using menus or by selecting options from one
More informationDreamweaver Basics. Planning your website Organize site structure Plan site design & navigation Gather your assets
Dreamweaver Basics Planning your website Organize site structure Plan site design & navigation Gather your assets Creating your website Dreamweaver workspace Define a site Create a web page Linking Manually
More informationDreamweaver CS5 Lab 4: Sprys
Dreamweaver CS5 Lab 4: Sprys 1. Create a new html web page. a. Select file->new, and then Blank Page: HTML: 2 column liquid, left sidebar, header and footer b. DocType: XHTML 1.0 Strict c. Layout CSS:
More informationCOMSC-031 Web Site Development- Part 2
COMSC-031 Web Site Development- Part 2 Part-Time Instructor: Joenil Mistal December 5, 2013 Chapter 13 13 Designing a Web Site with CSS In addition to creating styles for text, you can use CSS to create
More informationIntroduction to using HTML to design webpages
Introduction to using HTML to design webpages #HTML is the script that web pages are written in. It describes the content and structure of a web page so that a browser is able to interpret and render the
More informationCS Multimedia and Communications. Lab 06: Webpage Tables and Image Links (Website Design part 3 of 3)
CS 1033 Multimedia and Communications Lab 06: Webpage Tables and Image Links (Website Design part 3 of 3) REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB! Table Properties Reference Guide The Property
More informationHow to lay out a web page with CSS
How to lay out a web page with CSS A CSS page layout uses the Cascading Style Sheets format, rather than traditional HTML tables or frames, to organize the content on a web page. The basic building block
More informationClient Interview. Interview Topics. Goals and Target Audience. Activity 3.1 Worksheet. Client Name:
Activity 3.1 Worksheet Client Interview Team Name: Date: Client Name: Interview Topics Goals and target audience Content Design requirements Delivery requirements Goals and Target Audience Identify three
More informationICT IGCSE Practical Revision Presentation Web Authoring
21.1 Web Development Layers 21.2 Create a Web Page Chapter 21: 21.3 Use Stylesheets 21.4 Test and Publish a Website Web Development Layers Presentation Layer Content layer: Behaviour layer Chapter 21:
More informationCreating Web Pages with SeaMonkey Composer
1 of 26 6/13/2011 11:26 PM Creating Web Pages with SeaMonkey Composer SeaMonkey Composer lets you create your own web pages and publish them on the web. You don't have to know HTML to use Composer; it
More informationUsing Dreamweaver. 6 Styles in Websites. 1. Linked or Imported Stylesheets. 2. Embedded Styles. 3. Inline Styles
Using Dreamweaver 6 So far these exercises have deliberately avoided using HTML s formatting options such as the FONT tag. This is because the basic formatting available in HTML has been made largely redundant
More information5. When the Plugin Installed Successfully message appears, click Activate Plugin. You re all set, so let s get started with your first recipe post.
ZipList Recipe Plugin: Getting Started It s easy to get started with the ZipList Recipe Plugin. Simply install the free WordPress plugin and then we ll walk through how to use this helpful tool below.
More informationProject 1: Creating a Web Site from Scratch. Skills and Tools: Use Expression Web tools to create a Web site
E00EW3.qxp 4/14/2007 3:17 PM Page 1 Workshops w Introduction The Workshop is all about being creative and thinking outside of the box. These workshops will help your right-brain soar, while making your
More informationORB Education Quality Teaching Resources
These basic resources aim to keep things simple and avoid HTML and CSS completely, whilst helping familiarise students with what can be a daunting interface. The final websites will not demonstrate best
More informationUsing Dreamweaver CC. 6 Styles in Websites. Exercise 1 Linked Styles vs Embedded Styles
Using Dreamweaver CC 6 So far we have used CSS to arrange the elements on our web page. We have also used CSS for some limited formatting. In this section we will take full advantage of using CSS to format
More informationIntroducing Cascading Style Sheets. Cascading Style Sheet Basics Creating Styles Using Styles Manipulating Styles Text Formatting with CSS
Introducing Cascading Style Sheets Cascading Style Sheet Basics Creating Styles Using Styles Manipulating Styles Text Formatting with CSS Cascading Style Sheet Basics CSS has many benefits: The pages look
More information5 Snowdonia. 94 Web Applications with C#.ASP
94 Web Applications with C#.ASP 5 Snowdonia In this and the following three chapters we will explore the use of particular programming techniques, before combining these methods to create two substantial
More informationDreamweaver Basics Outline
Dreamweaver Basics Outline The Interface Toolbar Status Bar Property Inspector Insert Toolbar Right Palette Modify Page Properties File Structure Define Site Building Our Webpage Working with Tables Working
More informationUsing Dreamweaver to Create Page Layouts
Using Dreamweaver to Create Page Layouts with Cascading Style Sheets (CSS) What are Cascading Style Sheets? Each cascading style sheet is a set of rules that provides consistent formatting or a single
More informationLayout with Layers and CSS
Layout with Layers and CSS Today we're going to make a Web site layout. Preparatory Step 1. Inside your folder create a new folder and name it layout. 2. Inside the layout folder create a new folder and
More informationEditing your SiteAssist Professional Template
Editing your SiteAssist Professional Template This Solution Recipe shows you how you can edit your SiteAssist Professional created templates to suit your needs. SiteAssist Professional creates your entire
More informationUsing Dreamweaver CC. Logo. 4 Creating a Template. Page Heading. Page content in this area. About Us Gallery Ordering Contact Us Links
Using Dreamweaver CC 4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan shown below.
More informationHTML and CSS a further introduction
HTML and CSS a further introduction By now you should be familiar with HTML and CSS and what they are, HTML dictates the structure of a page, CSS dictates how it looks. This tutorial will teach you a few
More informationHandout created by Cheryl Tice, Instructional Support for Technology, GST BOCES
Handout created by Cheryl Tice, Instructional Support for Technology, GST BOCES Intro to FrontPage OVERVIEW: This handout provides a general overview of Microsoft FrontPage. AUDIENCE: All Instructional
More informationDreamweaver: Web Forms
Dreamweaver: Web Forms Introduction Web forms allow your users to type information into form fields on a web page and send it to you. Dreamweaver makes it easy to create them. This workshop is a follow-up
More informationDreamweaver CS5 Lab 2
Dreamweaver CS5 Lab 2 Using an External Style Sheet in Dreamweaver Creating the site definition First, we'll set up the site and define it so that Dreamweaver understands the site structure for your project.
More informationMake a Website. A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1
Make a Website A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1 Overview Course outcome: You'll build four simple websites using web
More informationDreamweaver CS3 Lab 2
Dreamweaver CS3 Lab 2 Using an External Style Sheet in Dreamweaver Creating the site definition First, we'll set up the site and define it so that Dreamweaver understands the site structure for your project.
More informationLesson 5 Introduction to Cascading Style Sheets
Introduction to Cascading Style Sheets HTML and JavaScript BASICS, 4 th Edition 1 Objectives Create a Cascading Style Sheet. Control hyperlink behavior with CSS. Create style classes. Share style classes
More information3. Each of these mark examples contains an error. a. <input name= country value= Your country here. /> b. <checkbox name= color value= teal />
1. Decide whether each of these forms should be sent via the GET or POST method: A form for accessing your bank account online A form for sending t-shirt artwork to the printer A form for searching archived
More informationGuidelines for doing the short exercises
1 Short exercises for Murach s HTML5 and CSS Guidelines for doing the short exercises Do the exercise steps in sequence. That way, you will work from the most important tasks to the least important. Feel
More informationFRONTPAGE STEP BY STEP GUIDE
IGCSE ICT SECTION 15 WEB AUTHORING FRONTPAGE STEP BY STEP GUIDE Mark Nicholls ICT lounge P a g e 1 Contents Introduction to this unit.... Page 4 How to open FrontPage..... Page 4 The FrontPage Menu Bar...Page
More informationDreamweaver 8. Project 5. Templates and Style Sheets
Dreamweaver 8 Project 5 Templates and Style Sheets Starting Dreamweaver and Opening the Colorado Parks Web Site Click the Start button on the Windows taskbar Point to All Programs on the Start menu, point
More informationICT IGCSE Practical Revision Presentation Web Authoring
21.1 Web Development Layers 21.2 Create a Web Page Chapter 21: 21.3 Use Stylesheets 21.4 Test and Publish a Website Web Development Layers Presentation Layer Content layer: Behaviour layer Chapter 21:
More informationCreating Web Pages with a Template
Creating Web Pages with a Template Adobe Dreamweaver Creative Cloud 2017 University Information Technology Services Learning Technologies, Training & Audiovisual Outreach Copyright 2017 KSU Division of
More informationAGENDA :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES
CLASS :: 13 12.01 2014 AGENDA SIMPLE CSS MENU W/ HOVER EFFECTS :: The Nav Element :: Styling the Nav :: UL, LI, and Anchor Elements :: Styling the UL and LI Elements TEMPLATE CREATION :: Why Templates?
More informationCMPT 165: More CSS Basics
CMPT 165: More CSS Basics Tamara Smyth, tamaras@cs.sfu.ca School of Computing Science, Simon Fraser University October 14, 2011 1 The Favorites Icon The favorites icon (favicon) is the small icon you see
More informationProper_Name Final Exam December 21, 2005 CS-081/Vickery Page 1 of 4
Proper_Name Final Exam December 21, 2005 CS-081/Vickery Page 1 of 4 NOTE: It is my policy to give a failing grade in the course to any student who either gives or receives aid on any exam or quiz. INSTRUCTIONS:
More informationIntroduction to HTML & CSS. Instructor: Beck Johnson Week 5
Introduction to HTML & CSS Instructor: Beck Johnson Week 5 SESSION OVERVIEW Review float, flex, media queries CSS positioning Fun CSS tricks Introduction to JavaScript Evaluations REVIEW! CSS Floats The
More information< building websites with dreamweaver mx >
< building websites with dreamweaver mx > < plano isd instructional technology department > < copyright = 2002 > < building websites with dreamweaver mx > Dreamweaver MX is a powerful Web authoring tool.
More informationCSS: Layout Part 2. clear. CSS for layout and formatting: clear
CSS: Layout Part 2 Robert A. Fulkerson College of Information Science and Technology http://www.ist.unomaha.edu/ University of Nebraska at Omaha http://www.unomaha.edu/ CSS for layout and formatting: clear
More information<style type="text/css"> <!-- body {font-family: Verdana, Arial, sans-serif} ***set font family for entire Web page***
Chapter 7 Using Advanced Cascading Style Sheets HTML is limited in its ability to define the appearance, or style, across one or mare Web pages. We use Cascading style sheets to accomplish this. Remember
More informationUSER GUIDE MADCAP FLARE Tables
USER GUIDE MADCAP FLARE 2018 Tables Copyright 2018 MadCap Software. All rights reserved. Information in this document is subject to change without notice. The software described in this document is furnished
More informationCascading Style Sheet Quick Reference
Computer Technology 8/9 Cascading Style Sheet Quick Reference Properties Properties are listed in alphabetical order. Each property has examples of possible values. Properties are not listed if they are
More informationArchitectural Engineering Senior Thesis CPEP Webpage Guidelines and Instructions
Architectural Engineering Senior Thesis CPEP Webpage Guidelines and Instructions Your Thesis Drive (T:\) Each student is allocated space on the Thesis drive. Any files on this drive are accessible from
More informationUnveiling the Basics of CSS and how it relates to the DataFlex Web Framework
Unveiling the Basics of CSS and how it relates to the DataFlex Web Framework Presented by Roel Fermont 1 Today more than ever, Cascading Style Sheets (CSS) have a dominant place in online business. CSS
More informationFile: SiteExecutive 2013 Core Modules User Guide.docx Printed September 30, 2013
File: SiteExecutive 2013 Core Modules User Guide.docx Printed September 30, 2013 Page i Contact: Systems Alliance, Inc. Executive Plaza III 11350 McCormick Road, Suite 1203 Hunt Valley, Maryland 21031
More informationTitle and Modify Page Properties
Dreamweaver After cropping out all of the pieces from Photoshop we are ready to begin putting the pieces back together in Dreamweaver. If we were to layout all of the pieces on a table we would have graphics
More informationCSS: The Basics CISC 282 September 20, 2014
CSS: The Basics CISC 282 September 20, 2014 Style Sheets System for defining a document's style Used in many contexts Desktop publishing Markup languages Cascading Style Sheets (CSS) Style sheets for HTML
More informationReading 2.2 Cascading Style Sheets
Reading 2.2 Cascading Style Sheets By Multiple authors, see citation after each section What is Cascading Style Sheets (CSS)? Cascading Style Sheets (CSS) is a style sheet language used for describing
More informationWhen you complete this chapter, you will be able to:
Page Layouts CHAPTER 7 When you complete this chapter, you will be able to: Understand the normal fl ow of elements Use the division element to create content containers Create fl oating layouts Build
More informationGIMP WEB 2.0 MENUS. Web 2.0 Menus: Horizontal Navigation Bar with Dynamic Background Image
GIMP WEB 2.0 MENUS Web 2.0 Menus: Horizontal Navigation Bar with Dynamic Background Image WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR DYNAMIC BACKGROUND IMAGE Before you begin this tutorial, you will need
More informationAdvanced Dreamweaver CS6
Advanced Dreamweaver CS6 Overview This advanced Dreamweaver CS6 training class teaches you to become more efficient with Dreamweaver by taking advantage of Dreamweaver's more advanced features. After this
More informationExcel 2016 Basics for Mac
Excel 2016 Basics for Mac Excel 2016 Basics for Mac Training Objective To learn the tools and features to get started using Excel 2016 more efficiently and effectively. What you can expect to learn from
More informationThe figure below shows the Dreamweaver Interface.
Dreamweaver Interface Dreamweaver Interface In this section you will learn about the interface of Dreamweaver. You will also learn about the various panels and properties of Dreamweaver. The Macromedia
More informationCreating Buttons and Pop-up Menus
Using Fireworks CHAPTER 12 Creating Buttons and Pop-up Menus 12 In Macromedia Fireworks 8 you can create a variety of JavaScript buttons and CSS or JavaScript pop-up menus, even if you know nothing about
More informationMicrosoft Office Word 2016 for Mac
Microsoft Office Word 2016 for Mac Formatting Your Document University Information Technology Services Learning Technologies, Training & Audiovisual Outreach Copyright 2016 KSU Division of University Information
More informationGuide to Editing Map Legends
Guide to Editing Map Legends Map legends explain map symbols and are crucial to the communication of a map s message. Effective legends are created with careful consideration of labels and text, classes,
More informationOU EDUCATE TRAINING MANUAL
OU EDUCATE TRAINING MANUAL OmniUpdate Web Content Management System El Camino College Staff Development 310-660-3868 Course Topics: Section 1: OU Educate Overview and Login Section 2: The OmniUpdate Interface
More informationExcel 2016 Basics for Windows
Excel 2016 Basics for Windows Excel 2016 Basics for Windows Training Objective To learn the tools and features to get started using Excel 2016 more efficiently and effectively. What you can expect to learn
More informationAdobe Dreamweaver CS6 Digital Classroom
Adobe Dreamweaver CS6 Digital Classroom Osborn, J ISBN-13: 9781118124093 Table of Contents Starting Up About Dreamweaver Digital Classroom 1 Prerequisites 1 System requirements 1 Starting Adobe Dreamweaver
More informationExcel 2013 for Beginners
Excel 2013 for Beginners Class Objective: This class will familiarize you with the basics of using Microsoft Excel. Class Outline: Introduction to Microsoft Excel 2013... 1 Microsoft Excel...2-3 Getting
More informationAppendix D CSS Properties and Values
HTML Appendix D CSS Properties and Values This appendix provides a brief review of Cascading Style Sheets (CSS) concepts and terminology, and lists CSS level 1 and 2 properties and values supported by
More informationGIMP WEB 2.0 MENUS. Web 2.0 Menus: Horizontal Navigation Bar. Hover Effect:
GIMP WEB 2.0 MENUS Web 2.0 Menus: Horizontal Navigation Bar WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR Hover Effect: Images required: 58 x 1 px high background image (black gloss gradient) for the nav bar
More informationUsing Dreamweaver CS6
Using Dreamweaver CS6 4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan shown below.
More informationBIM222 Internet Programming
BIM222 Internet Programming Week 7 Cascading Style Sheets (CSS) Adding Style to your Pages Part II March 20, 2018 Review: What is CSS? CSS stands for Cascading Style Sheets CSS describes how HTML elements
More informationElectronic Portfolios in the Classroom
Electronic Portfolios in the Classroom What are portfolios? Electronic Portfolios are a creative means of organizing, summarizing, and sharing artifacts, information, and ideas about teaching and/or learning,
More informationDOING MORE WITH WORD: MICROSOFT OFFICE 2013
DOING MORE WITH WORD: MICROSOFT OFFICE 2013 GETTING STARTED PAGE 02 Prerequisites What You Will Learn USING MICROSOFT WORD PAGE 03 Viewing Toolbars Adding and Removing Buttons MORE TASKS IN MICROSOFT WORD
More information8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) Learning Objectives (2 of 2)
Web Development & Design Foundations with HTML5 Ninth Edition Chapter 3 Configuring Color and Text with CSS Slides in this presentation contain hyperlinks. JAWS users should be able to get a list of links
More informationClass 3 Page 1. Using DW tools to learn CSS. Intro to Web Design using Dreamweaver (VBUS 010) Instructor: Robert Lee
Class 3 Page 1 Using DW tools to learn CSS Dreaweaver provides a way for beginners to learn CSS. Here s how: After a page is set up, you might want to style the . Like setting up font-family, or
More informationFileNET Guide for AHC PageMasters
PageMasters have the permissions necessary to perform the following tasks with Site Tools: ACADEMIC HEALTH CENTER 2 Application Requirements...3 Access FileNET...3 Log in to FileNET...3 Navigate the Site...3
More informationIntroduction to CSS. Part 1: Simple Text Formatting. Source Files for this Exercise are available on the Course Website DW_CSS intro
Introduction to CSS Source Files for this Exercise are available on the Course Website DW_CSS intro Part 1: Simple Text Formatting 1. Launch Dreamweaver 2. Open File: aa_demo_chef_start.html Please work
More informationPVII Pop Menu Magic 3
The state of the art in Dreamweaver menu systems... Create gorgeous and responsive multi-level menus in Dreamweaver with just a few clicks! We hope you enjoy using this product as much as we did making
More informationLinks Menu (Blogroll) Contents: Links Widget
45 Links Menu (Blogroll) Contents: Links Widget As bloggers we link to our friends, interesting stories, and popular web sites. Links make the Internet what it is. Without them it would be very hard to
More informationDreamweaver MX Overview. Maintaining a Web Site
Dreamweaver MX Overview Maintaining a Web Site... 1 The Process... 1 Filenames... 1 Starting Dreamweaver... 2 Uploading and Downloading Files... 6 Check In and Check Out Files... 6 Editing Pages in Dreamweaver...
More informationUsing Dreamweaver CS6
Using Dreamweaver CS6 7 Dynamic HTML Dynamic HTML (DHTML) is a term that refers to website that use a combination of HTML, scripting such as JavaScript, CSS and the Document Object Model (DOM). HTML and
More informationUniversal CSS Navigation Menu: Advanced Styling Patrick Julicher Universal CSS Navigation Menu: Advanced Styling
Universal CSS Navigation Menu: Advanced Styling Page 1 of 15 Content 1. Introduction... 3 2. How to use... 3 2.1. Editing existing CSS Styles... 3 2.2. Creating new CSS Styles... 6 3. Explanation of styles...
More information- The CSS1 specification was developed in CSSs provide the means to control and change presentation of HTML documents
3.1 Introduction - The CSS1 specification was developed in 1996 - CSS2 was released in 1998 - CSS3 is on its way - CSSs provide the means to control and change presentation of HTML documents - CSS is not
More informationWelcome to The Nova Scotia Government. Website Template
Welcome to The Nova Scotia Government Website Template Why a new web template? The new Nova Scotia Government website template is designed to help you maintain or create your government web pages. If right
More information