CONTENTS

Dreamweaver Basics

Templates

Editable Regions

Assets Panel

Library Items

CSS Style Sheets

Introduction

Using Dreamweaver, you can easily add a variety of content to web pages. Add assets and design elements, such as text, images, colors, movies, sound, and other forms of media. Using the Asset panel allows you to easily organize the assets in a site; you can then drag most assets directly from the Assets panel into a Dreamweaver document.

Opening the program

Click the START
button>>PROGRAMS>>MACROMEDIA>>DREAMWEAVER

Defining sites

A Dreamweaver site is a way to organize all of the documents associated with a website. You can think of it as a project. You need to set up a site for each website you develop. Organizing your files in a site enables you to use Dreamweaver with FTP to upload your site to the web server, automatically track and maintain your links, manage files, and share files. You cannot take full advantage of Dreamweaver features unless you define a site

Select Site > New Site.

The Site Definition dialog box appears. Answer the questions, and click Next to advance through the setup process.

Formatting text

Highlight the text then apply the formatting options you want from the properties panel at the bottom of the screen. (If you can’t see it click WINDOWS>>PROPERTIES) This includes bullets and numbered list. Typing notes: When you press enter in Dreamweaver you automatically get double line spacing so if you want single line spacing you press the shift + enter keys together)

Inserting Images

Click the curser where you want the image to go then INSERT>>IMAGE and browse to the image and double click on it. (IF it is outside the folder which you defined as your site folder then Dreamweaver will help you copy it to your site folder)
Inserting tables
Click the curser where you want the table to go then INSERT>>TABLE and tell it how many rows and columns you want and how big in pixels or as a percentage of the browser window you want your table to be.

Hyperlinks

Hyperlinks are to text or images that you can click on and go to another web page. Highlight the text or the image you want to be the a hyperlink,- then in the properties panel at the bottom of the screen click the Folder icon at the end of the link box and browse to the web page you want to be a hyper link to and double click on it (If it is a page with in your site) or if it is to another web site then in the link box type the whole absolute adderss eg http;//www.asite.com.au

Page Properties

You can set background colour, background image, default text colour, hyperlink colour and Page Title (the page title does not appear on the actual page it only appears on the "title bar" of the browser window)

Do this through MODIFY>>PAGE PROPERTIES

Previewing your webpage

To preview your WebPages in a browser window press the F12 key

Templates

Why and What are templates?

An HTML template is really a reusable file that separates form from content. It incorporates non-editable elements common to a whole website, as well as editable regions for content that changes.

Most pages within a website for a travel agency, for example, would look similar and function in basically the same way. The page layout for a Cairns holiday package page would be very similar to the one for Great Britain. Both would display the same logo, navigation and search facility.
One page, however, would describe sunny beaches and display a photo of a tropical fish, while the other would describe Trafalgar Square and show Buckingham Palace.

A template designed for this site would include common elements that would be non-editable: in this case the logo, navigation and search facility. It would also include editable regions containing placeholders for content specific to each page: the main text, the photograph and the heading.


Why should I use templates?

Using web templates is all about consistency, efficiency and economy.
As web pages based on a template will inherit the template's properties, you can have confidence that common page elements will display exactly as intended on all pages throughout a site. Inconsistencies in layout, graphics, text and links, in the non-editable elements, can be eliminated. The result is a more professional-looking site where the user will experience the same look and feel no matter where they are. This is especially important when you are dealing with a large, or potentially large, website.

Development time can be cut dramatically when page creation is simply a matter of inserting content into a pre-constructed file. This can be particularly useful when there is an urgent deadline.
Using templates not only saves time at the development stage, but also has the potential to reduce work in the quality assurance or testing phase. As each page is essentially a copy of an original it is only necessary to test the editable content of each page.

Cross-platform and browser issues can be resolved in the initial stages of development. As long as the template is bug-free you can relax knowing that any pages based on it will probably also be bug free.

Some maintenance procedures can be simplified by the use of templates. If, for example, your client wants the company logo updated, it is only necessary to make the change once: in the template. The logo will then change throughout the entire site. This is far easier and cheaper than altering every page.

Defining Template Regions in Dreamweaver

A template determins the basic structure for a document and contains elements such as text, images, page layout, styles, and editable regions.

Dreamweaver automatically locks most regions of a document when you save the document as a template. As a template author you define which regions of a template-based document will be editable by inserting editable regions or editable parameters in the template. As you create the template, you can make changes to both editable and locked regions. In a document based on the template, however, a template user can make changes only in the editable regions; the locked regions can’t be modified.

There are four types of template regions: editable regions, repeating regions, optional regions, and editable tag attributes.

You can create a template through the New Document dialog box (File >New) provides several options for creating new templates, and creating template-based pages.
Dreamweaver saves templates with the file extension .dwt. Templates are saved in a special Templates folder in the local root folder of the site. If the Templates folder does not already exist in the site, Dreamweaver automatically creates it when you save a new template.

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.

Editable regions


An Editable Region is an unlocked region in a template-based document; a section a template user can edit. A template author can define any area of a template as editable. For a template to be effective, it should contain at least one editable region; otherwise, pages based on the template can’t be edited. For information about inserting an editable region


Inserting an editable region

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.


To define an editable template region:

1. In the Document window, do one of the following to select the region:
o Select the text or content that you want to set as an editable region.
o Place the insertion point where you want to insert an editable region.
2. Do one of the following to insert an editable region:
o Choose Insert > Template Objects > New Editable Region.
o Right-click (Windows) or Control-click (Macintosh) the selected text or object, and choose New Editable Region from the context menu.
o In the Insert bar, select Templates, then click the Editable Region button.
The Editable Region dialog box appears.

3. 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: Do not use special characters in the Name field.
4. Click OK.

Assets

The Assets panel helps you manage and organize your site’s assets more easily than you can in the Site panel. Assets are categorized and display in a list.

To view assets in a particular category, click the appropriate icon. Dreamweaver displays the following categories of assets:

• Images are image files in GIF, JPEG, or PNG formats. For information about images, see Inserting Images.
• Colors are the colors that are used in documents and style sheets in your site, including text colors, background colors, and link colors.
• URLs are the external links in your current site documents. This category includes the following types of links: FTP, gopher, HTTP, HTTPS, JavaScript, e-mail (mailto), and local file (file://).
• Flash movies are files in any version of Macromedia Flash format. The Assets panel displays only SWF files (compressed Flash files), but not FLA (Flash source) files.
• Shockwave movies are files in any version of Macromedia Shockwave format.
• Movies are files in QuickTime or MPEG format.
• Scripts are JavaScript or VBScript files. Note that scripts in HTML files (rather than in independent JavaScript or VBScript files) do not appear in the Assets panel. For information on working with JavaScript in Macromedia Dreamweaver, see Using the JavaScript debugger.
•
• Templates provide an easy way to reuse the same page layout on multiple pages and to modify the layout on all pages attached to a template when a template is modified. See About Dreamweaver templates.
•
• Library items are elements that you use in multiple pages; when you modify a library item, all pages that contain that item are updated. See Working with Library items.

Note: Only files that fit into these categories show in the Assets panel. There are other types of files that are sometimes called assets, but they aren’t shown in the panel.


Viewing assets in the Assets panel

The Assets panel provides two ways to view assets: the Site list, which shows all of the assets in your site, and the Favorites list, which shows only the assets you’ve explicitly chosen.

Library Items


Creating a library item

You can create a library item from any element in the body section of a document, including text, tables, forms, Java applets, plug-ins, ActiveX elements, navigation bars, and images.

For linked items such as images, the library stores only a reference to the item. The original file must remain at the specified location for the library item to work correctly. It can still be useful to store an image in a library item, though; for example, you could store a complete img tag in a library item, which would allow you to easily change the image’s alt text, or even its src attribute, throughout the site. (Don’t use this technique to change an image’s width and height attributes, though, unless you also use an image editor to change the actual size of the image.)

To create a library item:

1. Select a portion of a document to save as a library item.
2. Do one of the following:
o Choose Window > Library and drag the selection into the Library category of the Assets panel.
o Click the New Library Item button at the bottom of the Assets panel (in the Library category).
o Choose Modify > Library > Add Object to Library.
3. Enter a name for the new library item.
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.

CSS style sheets


A style is a group of formatting attributes that control the appearance of a range of text in a single document. A CSS (Cascading Style Sheets) style can be used to control many documents at once and includes all of the styles for a document. The advantage of using a CSS style sheet over an HTML style is that in addition to being linked to multiple documents, when a CSS style is updated or changed, the formatting of all the documents that use that style sheet are automatically updated as well.
For example, imagine managing a very large Web site like Yahoo or Macromedia.com. You can make font and formatting changes to the entire site or many pages quickly and accurately by using CSS styles. Also, CSS styles let you control many properties that cannot be controlled using HTML alone. For example, you can assign custom list bullets and specify different font sizes and units (pixels, points and so on). By using CSS styles and setting font sizes in pixels, you can ensure a more consistent treatment of your page layout and appearance with multiple browsers.

CSS styles have been around for sometime, but many Web site designers and creators have been reluctant to use them because of inconsistent browser support. However, if your audience includes viewers who are using browsers that support CSS styles (4.0 and later), you should avail yourself of the power and control they offer.

CSS styles are identified by name or by HTML tag, allowing you to change an attribute of a style and instantly see the change reflected in all the text to which that style applies. CSS styles in HTML documents can control most of the traditional text formatting attributes such as font, size, and alignment. CSS styles can also specify unique HTML attributes such as positioning, special effects, and mouse rollovers.

CSS style sheets reside in the head area of a document. CSS styles can define the formatting attributes for HTML tags, ranges of text identified by a class attribute, or text that meets criteria conforming to the Cascading Style Sheets (CSS) specification. Dreamweaver recognizes styles defined in existing documents as long as they conform to CSS style guidelines.

CSS style sheets work in 4.0 and later browsers. Internet Explorer 3.0 recognizes some CSS style sheets, but most earlier browsers ignore them.

Three types of CSS style sheets are available in Dreamweaver:

Custom CSS 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 CSS custom styles to any range or block of text. If the CSS 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="myStyle" or ul class="myStyle"). If the CSS style is applied to a range of text, span tags containing the class attribute are inserted around the selected text. See Applying a custom (class) CSS style.

HTML tag styles redefine the formatting for a particular tag, such as h1. When you create or change a CSS style for the h1 tag, all text formatted with the h1 tag is immediately updated.
Note: Be careful when redefining tags in a linked CSS, as this can change the layout of many pages. For example, if you redefine the table tag to look a certain way, it will alter the layout of other pages using tables.
CSS selector styles redefine the formatting for a particular combination of tags (for example, td h2 applies whenever an h2 header appears inside a table cell) or for all tags that contain a specific id attribute (for example, #myStyle applies to all tags that contain the attribute-value pair ID="myStyle").

Manual HTML formatting overrides formatting applied with CSS (or HTML) styles. For CSS styles to control the formatting of a paragraph, you must remove all manual HTML formatting or HTML styles.
Although you can set an unlimited number of CSS style attributes defined by the CSS1 specification in Dreamweaver, not all of the attributes appear in the Document window. The attributes that do not appear are marked with an asterisk (*) in the Style Definition dialog box. Note also that some of the CSS style attributes that you can set with Dreamweaver appear differently in Microsoft Internet Explorer 4.0 and Netscape Navigator 4.0, and some are not currently supported by any browser.

Creating a new CSS style


Create a CSS style to automate the formatting of HTML tags or a range of text identified by a class attribute.

1. Place the insertion point in the document, then do one of the following to open the New CSS Style dialog box:
o In the CSS Styles panel (Window > CSS Styles), click the New CSS Style button (+) located in the lower right area of the panel.
o In the text Property inspector, click the Toggle CSS/HTML Mode button, if necessary, to switch to CSS Mode, then in the CSS Style pop-up menu, select New CSS Style.
o Choose Text > CSS Styles > New CSS Style.
The New CSS Style dialog box appears.

2. Define the type of CSS style you want to create:
o To create a custom style that can be applied as a class attribute to a range or block of text, select Make Custom Style (Class), then in the Name field, enter a name for the style.
Note: Custom style (class) names must begin with a period and can contain any combination of letters and numbers. For example, .myhead1. If you don’t enter a beginning period, Dreamweaver automatically enters it for you.
o To redefine the default formatting of a specific HTML tag, select Redefine HTML Tag, then in the Tag field, enter an HTML tag or choose one from the pop-up menu.
o To define the formatting for a particular combination of tags or for all tags that contain a specific Id attribute, select Use CSS Selector, then in the Selector field, enter one or more HTML tags or choose one from the pop-up menu. The selectors available from the pop-up menu are a:active, a:hover, a:link, and a:visited.

3. Select the location in which the style will be defined:
o To create an external style sheet, choose New Style Sheet File.
o To embed the style in the current document, choose This Document Only.

4. Click OK.
The Style Definition dialog box appears.

5. Choose the style options you want to set for the new CSS style.

6. When you are done setting style attributes, click OK.