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

Set & Modify Document Properties 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

Set & Modify Document Properties 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

Set & Modify Document Properties 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: – 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

Organize Web Page Layout 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

Organize Web Page Layout 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

Organize Web Page Layout 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

Organize Web Page Layout 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

Organize Web Page Layout 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

Organize Web Page Layout 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

Organize Web Page Layout 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

Organize Web Page Layout 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

Organize Web Page Layout AP div tags do not always behave as intended and could overlap You can modify AP div tags attributes in the CSS Styles Panel

Organize Web Page Layout 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

Organize Web Page Layout 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

Organize Web Page Layout 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

Modify Text & Text Properties 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

Modify Text & Text Properties 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

Modify Text & Text Properties 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

Modify Text & Text Properties 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

Modify Image and Image Properties 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

Modify Image and Image Properties 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

Modify Image and Image Properties 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

Modify Image and Image Properties 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

Modify Image and Image Properties 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

Modify Image and Image Properties 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

Modify Image and Image Properties 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

Create Web Page Templates 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

Create Web Page Templates 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

Create Web Page Templates 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

Create Web Page Templates 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

Create Web Page Templates 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

Create Web Page Templates 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

Create Web Page Templates 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

Create Web Page Templates 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

Use Basic HTML Tags to Set Up an HTML Document You can create a web page using only HTML tags in a plain text editor such as Notepad

Use Basic HTML Tags to Set Up an HTML Document Basic HTML elements: –,, –, –,,,,, –,

Use Basic HTML Tags to Set Up an HTML Document More basic HTML elements: – –, –, rows –, columns/cells –, –, item in a list

Use Basic HTML Tags to Set Up an HTML Document 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

Use Basic HTML Tags to Set Up an HTML Document 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