Intermediate Dreamweaver


Published on

From a workshop series offered in Fall 2007.

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Intermediate Dreamweaver

  1. 1. Intermediate Macromedia Dreamweaver MX Sarah Bombich STaRS Student Training Arc: Library Technology Center Revised 11/24/10 1/6 Intermediate Macromedia Dreamweaver MX Goals  To practice using templates to create a consistent look and feel across a site while making site maintenance speedy  To practice using library items for rapid site updating  To understand the purpose of cascading style sheets and understand how to implement them in Dreamweaver Prerequisite and Helpful Knowledge  Familiarity with the World Wide Web (WWW) required  Understanding of how the WWW works, including familiarity with web servers, web browsers, and web standards, is strongly recommended  Understanding of how a web site is structured, both the underlying files and the user- experienced site structure, is strongly recommended  Working knowledge of HTML is strongly recommended Templates Templates allow you to create a consistent look and feel across a site. They are also very helpful when you want to easily update and manage a site. They can be used in conjunction with library items. You can create a template from an existing document or you can create a template from a new, blank document. Dreamweaver saves templates with the file extension .dwt. Templates are saved in a special Templates folder in the local root folder of the site. Note: Do not move your templates out of the Templates folder, or put any non-template files in the Templates folder. Also, do not move the Templates folder out of your local root folder. Doing so causes errors in paths in the templates. Creating Templates  Creating a template from scratch o With a blank or existing document open, choose File > Save as Template o If you haven't already, you may be prompted to set editable regions. o In the dialog box that appears, select a site and enter a name for the template in the Save As box. Click Save.  Editing an existing template o Choose Window > Site.
  2. 2. Intermediate Macromedia Dreamweaver MX Sarah Bombich STaRS Student Training Arc: Library Technology Center Revised 11/24/10 2/6 o Choose the template you would like to edit and edit the template in the Document window. o You may be prompted to update attached pages. If you do not update the attached pages and then re-upload the affected pages, your template change will not take place. Defining Editable Regions  Turning existing content into an editable region o Before you insert an editable region, you should save the document you are working in as a template. If you insert an editable region in a document rather than a template file, Dreamweaver warns you that the document will automatically be saved as a template. o Select the text or content that you want to set as an editable region o Insert an editable region:  Choose Insert > Template Objects > New Editable Region  Right-click (Windows) or Control-click (Macintosh) the selected text or object, and choose New Editable Region from the context menu o The Editable Region dialog box appears; in the Name text box, enter a unique name for the region (You cannot use the same name for more than one editable region in a particular template). Note: When you name a region, you can't use the following characters: single or double quotation marks (' "), angle brackets (<>), and ampersands (&). Note: The editable region is highlighted in the template. You can mark an entire table or an individual table cell as editable; however, you can't mark several cells at once. o The editable region is enclosed in a highlighted rectangular outline in the template, using the highlighting color that is set in preferences. o A tab at the upper-left corner of the region shows the name of the region. If you inserted an empty editable region in the document, the name of the region also appears inside the region.  Defining a new editable region in a template o In the template, place the insertion point where you want to insert an editable region. o Choose Insert > Template Objects > Editable Region. o In the Name: dialog box, enter a name for the region. The region name, surrounded by braces ({}), is inserted into the template as a highlighted placeholder. When you apply the template to a document, you can replace the place holder with text, images, or other content.  Unmarking a region (make it non-editable) o Choose Modify > Templates > Remove Template Markup
  3. 3. Intermediate Macromedia Dreamweaver MX Sarah Bombich STaRS Student Training Arc: Library Technology Center Revised 11/24/10 3/6 Creating pages based on templates  Creating a new document based on a template o Choose File > New o Click on the Templates tab o In the dialog box that appears, choose a template and then click Create  To apply a template to an existing Dreamweaver document: o Open the document o Choose Modify > Templates > Apply Template to Page o Choose a template from the list and click Select When you apply a template to an existing document, the content in the template is added to the document. Dreamweaver may prompt you to indicate the editable region in which you want existing text to appear.  Detaching a document from a template o Open the document you want to detach o Choose Modify > Templates > Detach From Template When you make a change to a template, Dreamweaver prompts you to update the pages that use the template. You can also use the update commands to manually update the current page or the entire site. Applying the update commands is the same as reapplying the template. Updating templates  Opening the template used to create the current document o Choose Modify > Templates > Open Attached Template  Updating the current document to the most current version of a template o Choose Modify > Templates > Update Current Page.  Updating the entire site or all documents that use a particular template: o Choose Modify > Templates > Update Pages. The Update Pages dialog box appears. o In the Look In pop-up menu, do one of the following: Choose Entire Site, and then select the site name. This updates all pages in the selected site to their corresponding templates. Choose Files That Use, and then select the template name. This updates all pages in the current site that use the selected template. o Make sure Templates is selected in the Update option. o Click Start
  4. 4. Intermediate Macromedia Dreamweaver MX Sarah Bombich STaRS Student Training Arc: Library Technology Center Revised 11/24/10 4/6 Library Items Library items are a way to store page elements such as images, text, and other objects that you want to reuse or update frequently throughout your web site. When you place a library item in a document, Dreamweaver inserts a copy of the HTML source code for that item into the document, and adds an HTML comment containing a reference to the original, external item. The reference to the external library item makes it possible to update the content on an entire site all at once by changing the library item and then using the update commands in the Modify > Library submenu. Dreamweaver stores library items in a Library folder within the local root folder for each site. Note: Library items are good for storing headers and footers because you can update once and propagate changes across your site.  Creating a Library Item Select a portion of a document to save as a library item. o Choose Modify > Library > Add Object to Library. o Enter a name for the new library item. o Each library item is saved as a separate file (with the file extension .lbi) in the Library folder of the site’s local root folder.  Inserting a library item in a document When you add a library item to a page, the actual content is inserted in the document along with a reference to the library item. o Place the insertion point in the Document window. o Choose Window > Library. o The Assets panel appears, showing the Library category. o Drag a library item from the Assets panel to the Document window, or select an item and click the Insert button. To insert the contents of a library item without including a reference to the item in the document, press Control (Windows) or Option (Macintosh) while dragging an item out of the Library category of the Assets panel. If you insert an item this way, you can edit the item in the document, but the document won’t update when you update pages that use that library item.  To edit a library item o Double-click the library item in Window > Library. Dreamweaver opens a new window for editing the library item. This window is much like a Document window, but its Design view has a gray background to indicate that you're editing a library item instead of a document. o In the dialog box that appears, choose whether to update the documents on the local site that use the edited library item:  Choose Update to update all documents in the local site with the edited library item.  Choose Don't Update to avoid changing any documents until you use Modify > Library > Update Current Page or Update Pages.
  5. 5. Intermediate Macromedia Dreamweaver MX Sarah Bombich STaRS Student Training Arc: Library Technology Center Revised 11/24/10 5/6 What are cascading style sheets? Style sheets describe how documents are presented on screens, in print, or perhaps how they are pronounced. W3C has actively promoted the use of style sheets on the Web since the Consortium was founded in 1994. The Style Activity has produced several W3C Recommendations (CSS1, CSS2, XPath, XSLT). CSS especially is widely implemented in browsers. [from] By attaching style sheets to structured documents on the Web (e.g. HTML), authors and readers can influence the presentation of documents without sacrificing device-independence or adding new HTML tags. Use embedded styles to format a single document, or use an external Style Sheet to control several documents at once. Similar to templates, deciding upon your styles up front will help to ensure that your pages have a similar look and feel. For documents to use an external Style Sheet, you must embed a link to the Style Sheet in the head of the document. The World Wide Web Consortium is responsible for the Cascading Style Sheets specification (CSS1), which defines style properties (for example, font, color, padding, margin, word spacing) that control the appearance of elements. Dreamweaver lets you set any CSS1 property. Bear in mind that not all styles are viewable by all browsers. For detailed information on Cascading Style Sheets, please refer to the World Wide Web Consortium Using Style Sheets Dreamweaver recognizes styles defined in existing documents as long as they conform to CSS guidelines. Style sheets work in 4.0 and later browsers, although support is not uniform. Two types of styles are commonly used in Dreamweaver: 1. HTML tag styles redefine the formatting for a particular tag, such as H1. When you create a style for the H1 tag, all the text with the H1 tag immediately changes. 2. Custom styles are similar to the styles you use in a word processor, except that there is no distinction between character and paragraph styles. You can apply custom styles to any range or block of text. If the style is applied to a block of text (such as an entire paragraph or unordered list), a CLASS attribute is added to the block's tag (for example, P CLASS="definition" or TABLE CLASS="indent"). If the style is applied to a range of text, SPAN tags containing the CLASS attribute are inserted around the selected text. You may manually want to use DIV tags instead of SPAN tags, because DIV tags preserve indents and spacing better, but you have to type them in manually. Text formatting that is manually applied to ranges of text can take precedence over styles. To make styles control the formatting for a paragraph, remove all other formatting settings. Although you can set all the style attributes defined by the CSS1 specification in Dreamweaver, not all attributes appear in the Document window. Creating Styles  Window > CSS Styles  Create an external style sheet by clicking on the icon
  6. 6. Intermediate Macromedia Dreamweaver MX Sarah Bombich STaRS Student Training Arc: Library Technology Center Revised 11/24/10 6/6  Add a style to the sheet by clicking on the icon  The three categories you will need to use most often: o Type - Used to specify the font, font color, font size, and font attributes o Background - Used to control for the background color or background image o Box - Used to control for table padding and margin setting Applying Custom Styles When you define an HTML tag or CSS Selector, these styles are automatically applied for you. When you create a custom class code, you need to apply that style to the object you want to possess that attribute.  Applying a style using a SPAN tag o Select the word or words o Choose Window > CSS Styles o Choose Apply Styles o Click on the custom style  Applying a style manually using a DIV tag o Select the block of text you wish to format in the preview window o Using the dual code/preview window, manually type in <DIV CLASS=”class name”> before the block of text highlighted in the code window. Type </DIV> after the block of highlighted text in the code window. o Click on the preview window to see your change applied  Applying a style using an HTML Tag o Select the tag o Choose Window > CSS Styles o Choose Apply Styles o Click on the custom style