Organizing Content by Using Dreamweaver CS5 Domain 5.

Organizing Content by Using Dreamweaver CS5

Domain 5

Set & Modify Document Properties

• The Page Properties dialog box allows you to set document properties, which globally affect the active document

• You can modify both HTML and CSS properties in the Page Properties dialog box

• CSS is the preferred method for formatting your web page


• The Page Properties dialog box provides options to specify layout and formatting properties

• The Appearance category is the only category available for either CSS or HTML

• The Appearance category allows you to set the default font family, font size and font color


• CSS rules can also be defined for Links (CSS) and Headings (CSS) categories

• These CSS rules are embedded in the head section of the page


• The Title/Encoding and Tracing Image categories set page properties using HTML

• To override any of the default settings, you can create additional CSS rules for div tags

Organize Web Page Layout

• div tag: <div>– an HTML tag used as the foundation of a CSS page

layout to organize content on a web page by defining areas or sections

– More flexible to work with than tables because you can place them anywhere on a page


• Static positioning: – the default setting – positions elements according to the standard flow

of the page

• Fixed positioning:– Positioning relative to the browser window

Organize Web Page Layout• Absolute positioning:– Used when items are positioned using the x and y

coordinates– Removed from the standard flow of the page– The document and other elements on the page

behave as if the absolutely positioned element does not exist

• Relative positioning:– Positioned by specifying distance from other

elements on the page


• Dreamweaver provides the following options when choosing to work with div tags:– In Code view, insert div tags manually into the

HTML code– In Design view, point to Layout Objects on the

Insert Menu, then click the Div Tag command– Use with a Dreamweaver template


• When you insert a div tag using the Insert menu or panel, the Insert Div Tag dialog box opens

• The Insert Div Tag dialog box provides the following options:– Insert– Class– ID– New CSS Rule


• The Insert option allows you to place the div tag at the insertion point OR relative to an existing tag– To the right is a pop-up menu which allows you to

specify the HTML tag


• You use the Class and ID options to insert an existing rule to the div

• The Class option displays the class style currently applied to the tag, as well as a list of styles available if you have attached a style sheet


• The ID option lets you change the name used to identify the div tag– If a style sheet is attached, a list of IDs will appear


• The New CSS Rule option opens the New CSS Rule dialog box

• A div tag is displayed in Design view with a dashed border as a visual aid

• When a div tag is selected, you can view and edit the rules for the tag in the CSS Styles panel


• To insert an absolutely positioned div tag, click Layout Objects on the Insert menu and click AP Div

• AP div tag – HTML tag used to position objects– does not adjust on the page according to the size

of the browser window, – its location is relative to the upper-left corner of

the page


• AP div tags do not always behave as intended and could overlap

• You can modify AP div tags attributes in the CSS Styles Panel


• You can add attributes to div tags to adjust width, height, padding or margins

• The width and height provide the dimensions of the div tag

• The margin sets an area around the div tag outside the border that is completely transparent

• Padding sets an area around the content inside the border of the div tag and is the same color as the div tag


• Both the margin and padding can be the same or have different measurements on each side of the div tag: top, right, bottom and left

• In addition, you can add attributes to a div tag to override any default settings that have been set in the Page Properties dialog box such as: font, font style or font color


• You can set div tags to overlap one another using the z-index property

• The z-index property indicates the stacking order of an element– The higher number moves the element to the top

of the stacking order

• You can set the z-index property on the Positioning category in the CSS Rule definition dialog box

Modify Text & Text Properties

• Browsers can only display fonts installed on the computer where the web site is viewed

• Therefore, it is important to choose a font family when selecting font for your website

• A font family provides a list of alternative fonts; if the first font is not available, it will try the next font in the list


• When you enter text into a Dreamweaver document, by default, the font is set to default font

• The default font is chosen by the browser settings of the visitor to the website

• You can change the default font in the Property Inspector by clicking the CSS button

• Dreamweaver provides several built-in font families by default


• When working with text, you can change the formatting on either the HTML or CSS property inspectors– The CSS property inspector is the preferred

method with current web standards


• The HTML Property Inspector allows you to format your text :– Use the Format pop-up menu, where you can

apply the paragraph or heading tags– You can apply bold and italics font styles– You can format text as an ordered or unordered

list– You can apply a Blockquote to indent text


• The CSS Property inspector provides additional options not available on the HTML Property inspector– Font family, size and color– Align left, center right and justify

• When you apply one of these formatting options, the New CSS Rule dialog box opens, prompting you to define a CSS Rule for these changes

Modify Image and Image Properties

• Dreamweaver offers option to edit and modify images without having to open an external application such as Fireworks or Photoshop

• You can apply common adjustments to an image using tools in the Property inspector

• These actions permanently alter the image unless you undo the action before you perform another action


• The Crop button:– uses a resizable rectangular area to remove the

horizontal or vertical space around an image– Used to emphasize a particular area of an image

or to remove an unwanted area that is along an edge


• The Brightness and Contrast button– Modifies the contrast or brightness of pixels in an

image, affecting the highlights, shadows and midtones

– Typically used to correct an image that is too light or too dark


• The Sharpen button:– Adjusts the focus of an image by increasing the

contrast of the edges found in the photo– Used to bring out details in an image


• The Resample button:– Becomes available when the crop,

brightness/contrast, or sharpen actions are applied to an image

– Adds or subtracts pixels to match the appearance of the original image as closely as possible

– Reduces the image size and improves download performance


• The Edit Image Settings button:– Opens the Image Preview dialog box where you

can adjust image quality (Options tab) and file compression (File tab)

– The Options tab allows you to change the format and quality of the image

– The File tab allows you to resize the image– Changes made in this dialog box are permanent


• Dreamweaver has a round-trip editing feature that lets you edit an asset from a Dreamweaver document in an image-editing application such as Fireworks or a SWF file created in Flash

• To open an image in one of these applications, select the image or placeholder, then in the Property inspector, click the program’s Edit button


• You can add extensions and assign external editors to files in the File Types/Editors category of the Preferences dialog box

• You can also select a program by clicking Image on the Modify menu, clicking Edit With and then clicking a program

Create Web Page Templates

• Template: a master page used to create multiple pages from the same layout

• You can modify elements common to all pages in the template and the change occurs globally to ALL pages attached to that template

• A templates folder is created in the local root folder of the site and by default any template created is saved there


• You can create a template from a page you have already created by– clicking the Save as Template command on the

File menu– clicking the Templates: Make Template button on

the Common category of the Insert panel– select the Templates category of the Assets panel

and click the New Template button


• A template comprises objects known as regions

• Regions can be editable, repeating, optional and editable optional

• Added to a template by:– Clicking Template Objects on the Insert menu– Clicking the Templates button on the Insert panel


• Editable regions:– Areas of the page that can be modified

• Repeating region:– A section of the template that can be copied

multiple times in a template-based page, to provide consistency of sections that will be repeated

– A repeating table is also available– These regions can also be designated as editable


• Optional region:– Allows you to show or hide this region when

editing a page based on a template– Provides some flexibility when designing a page

from a template

• Editable Optional region:– Allows content in an optional region to be

modified and you can choose whether to include the region in the web page


• Once you create a template, you can use it to create another page

• In the New Document window, click the Page from Template category, then click the site that contains the template you want to use

• Click the template you want to use, then click the Create button

• The new page is automatically attached to the template


• To edit an existing template:– Click the Open command on the File menu– Click Template Files in the Open dialog box

• Additional template commands can be found on the Modify menu under Templates

• The Detach from Template command removes the template from the active page


• Dreamweaver has HTML templates available in the New Document window if you want your template to use CSS styles

• Select the CSS layout from the Layout column• The preformatted CSS layouts offer two types

of columns: fixed and liquid


• A fixed column layout’s width is based on pixels and does not resize based on the size of the browser or the visitor’s text settings

• A liquid column width is specified as a percentage of the site visitor’s browser width– The page adjusts based on the size of the browser

window, but does not change based on the visitor’s text settings

Use Basic HTML Tags to Set Up an HTML Document

• HTML stands for Hypertext Markup Language– Uses markup tags to create web pages– The web page is saved with the file extension .htm

or .html– This file extension is recognized by browsers to

open and show the content of the page

• Dreamweaver writes HTML for you as you create your web page


• You can create a web page using only HTML tags in a plain text editor such as Notepad


• Basic HTML elements:– <html>, </html>, – <head>, </head> – <body>, </body>– <h1>, <h2>, <h3>, <h4>, <h5>, <h6>– <p>, </p>– <em>, </em>– <strong>, </strong>


• More basic HTML elements:– <br>– <a href>, </a>– <table>, </table>– <tr>, </tr> rows– <td>, </td> columns/cells– <ol>, </ol>– <ul>, </ul>– <li>, </li> item in a list


• When writing HTML, it is important to understand the syntax that is required

• A simple syntax error can keep elements on your page from appearing correctly


• HTML Element Syntax:– An HTML element starts with an opening tag– An HTML element ends with a closing tag– Everything between the opening and closing tag is

referred to as the element content– Attributes can be applied to most HTML elements– Some HTML elements have empty content and are

closed with the opening tag– Many HTML elements are nested or contain other

HTML elements

Add Head Content

• The head element of a web page contains content that is sent to a browser but NOT displayed to the user within the page

• The only required head tag is the title tag• Other tags that may be added to the head

section of a web page include:– Base, link, meta, script and style

Add Head Content• Base:– A default address or a default target for all links on a

page is specified

• Link:– A relationship between a document and an external

resource is defined, such as a style sheet

• Meta:– Metadata for a document is specified here; metadata

can include keywords, author info, and a description of the web page

Add Head Content• Script:– A client-side script used in the HTML document is

defined, such as JavaScript

• Style:– Defines style information for an HTML document, such

as the body or paragraphs

• Title:– Defines a title in the browser, provides a title if the

user adds it as a favorite and displays the title for the page in search engine results

Add Head Content

• Tags can be difficult to work with• Sometimes it is easier to select them using the

tag selector– Located in Dreamweaver in the status bar at the

bottom of the Document window– Can be used to select, edit or remove tags

Add Head Content

• When you click in a document, the tags that apply to the insertion point location appear in the tag selector

• When you right-click the tag, a context menu appears that allows you to:– Remove the tag– Open the quick tag editor where you can edit the

selected tag

Add Head Content

• You can click the Head button on the Common category of the Insert panel to quickly work with the base, link and meta tags as well as add keywords and a description to the meta tag

Use CSS to Implement a Reusable Design

Organizing Content by Using Dreamweaver CS5 Domain 5.

Documents

Transcript of Organizing Content by Using Dreamweaver CS5 Domain 5.