Style Guide Content Tips HTML Guide Style Samples DW as a Tool Convert a Page
Dreamweaver as a Tool
| Dreamweaver Setup |
Creating a New Page
Three starter page files are available in the basepages folder at the root of the site.
These files are read-only. Open one to view it, then save it to the new location in the site.
The file is fully editable but care must be taken to only edit the link and include paths, and the main content and sidebar. If page layout code is accidentally deleted, it can be replaced to repair the page. (The protected content for menus and footers will not be affected if page code is deleted.)
Templates are not being used due to inconsistent support of cascading style sheets and irregular code updates when a template is changed.
The Properties Panel
In order to provide a consistent look across the Edina Schools website and maximize the benefits of CSS, most html elements have styles defined for them in the attached style sheets (see Style Samples). Multiple options have been provided for some elements to allow for some flexibility of style.
The Properties Panel provides an easy way to access these styles and to assign some additional formatting to page content.
Dreamweaver has many tools and features, but most should be avoided. DW does not write clean code and does not clean up code when you make changes. Follow the recommendations on this page for clean, content focused pages.
DO NOT override the defined styles for Font, Size, Color, Page Properties or List Items.
Target should only be used for external links (use _blank).
The bottom of the Properties panel can be hidden to enlarge the page work space.
Adding Page Elements
The page should already have at least one paragraph element to get the content started.
Elements can be added and modified in a variety of ways using menus, toolbars and property icons.
To add an element above another element, click at the beginning of the element's content and press Enter.
To add an element below another element, click at the end of the element's content and press Enter.
Deleting Page Elements
Highlighting content and deleting it will often leave an empty tag behind in the code.
To cleanly and completely remove a page element, select it in the tag selector bar, then press the Delete key.
Indenting
Indenting a paragraph will make it a blockquote. Blockquotes should only be used to display a lenthly quotation.
Indenting a list item will create a new list within the previous list item. The new list will be of the same type (ul or ol) as the original list.
Styling an Element
To make sure the style you are applying is applied to the correct element, select the tag of the element you want to style in the tag selector, then select the style from the list.
The tag selector will show what styles have been applied to each tag.
The tag selector is a useful tool for troubleshooting style problems.
The B (bold) and I (italic) icons will enter the correct <strong> and <em> tags in the code.
For cite: Text > Style > Citation (this is also available in a right click menu)
For code: Text > Style > Code (this is also available in a right click menu)
For abbreviations: Insert > HTML > Text Objects > Abbreviation
For acronyms: Insert > HTML > Text Objects > Acronym
sub and sup need to be manually entered in the code
Adding Titles to Links
If a link is created by inserting a link or using the link icon on the toolbar, a Title field will be available in the dialog box.
If a title needs to be added after the link is created,
- Click in the link, then open the Tag inspector (Window - Tag Inspector, or F9). Click on the + in front of CSS/Accessibility. Enter the title next to the title attribute.
- Or, highlight the link, go to Code view, add
title="enter title here"to the<a>tag
Special Characters
Special characters like &, <, > and " should be marked up using the correct named entity or Unicode equivalent like &, <, > and ".
Dreamweaver CS3 does a fairly good job of entering this code correctly. If special characters do not display as intended on your page, check the code to make sure the correct symbol is being used. Reference for Character entities
Tables
A default table will have no table headers. Several header location options are available when the table is inserted. If the table already exists, th tags can be manually entered in the code.
Dreamweaver Setup
Site Definition
If the uploading computer is on the school network, use Passive FTP.
If the uploading computer is not on the school network, do not use Passive FTP.
For other site definition information, contact the district webmaster.
Uploading Pages
When the upload dialog box asks about including dependent files, click No. Manually upload the files that the page needs, otherwise, all layout image files and other related files will be reloaded.
Be careful using Put. If the local and remote sites are not at the same level of the site, files will not upload to the correct locations. Remember that Put will upload everything in the selected folder, including old or working files. Drag and drop the files for precise uploading.
Browser Compatibility
Use the Browser Compatibility Check tab in the Results panel to test web pages.
- In the Settings, select these browsers: Firefox 1.5, Internet Explorer 6.0,
Internet Explorer for Macintosh 5.2, Netscape 8.0, Opera 8.0 and Safari 2.0
XHTML Validation
Use the Validation tab in the Results panel to test web pages.
- In the Settings, select XHTML 1.0 Strict. Leave all other options unchecked.
- All of our style sheets validate to the CSS standard. Please ignore the Dreamweaver errors for the external style sheets. Also ignore the Z-Index error. We must use this code so the main menu bar stays on top of the other content.
- Most of our code validates to the WC3 XHTML standard. Javascript, tables and lists cause the test to fail, but the pages display properly in most browsers.