Explore how to generate web pages, create interactive forms, work with images, and implement behaviors using Adobe Dreamweaver CS5, with CSS integration to make your site come alive.

Learn to organize Dreamweaver projects by asking five simple questions—who is the audience, what are the goals, when is the deadline, and where will it be displayed—to build effective sites.

Map out your Dreamweaver project with a simple mind map, using a center concept and color cues to move from general ideas to specific site details.

Gather and sketch site concepts using a four-by-three layout and pixel-accurate images, plan a workflow, and organize a Dreamweaver site folder to ensure faster, better web pages.

Begin with a practical, hands-on intro to Dreamweaver, creating a web page and exploring basic properties. Learn to visualize the viewer area with tracing images.

Navigate the Dreamweaver interface across Mac and Windows, open a new HTML document in classic mode, and switch between design and code views to emphasize user experience.

Create a structured Dreamweaver site by organizing folders, naming your project, and setting a local site folder. Manage multiple sites in Dreamweaver and prepare for server and version control options.

Build a Dreamweaver site with folders for documents, images, originals, and pages, then create new pages or blank HTML files and switch between code and design view.

Learn to set page properties in Dreamweaver using cssa or markup, adjust fonts, colors, margins, and backgrounds, and use tracing images for a precise 955 by 600 layout.

Learn to preview web pages in Dreamweaver by using the browser lab to test across Safari, Firefox, Opera, and Internet Explorer, ensuring consistent appearance on Mac and Windows.

Save your Dreamweaver web pages early with a clear name, following safe naming conventions using letters, numbers, and underscores or dashes, and name the file index.html.

Discover how to use the Dreamweaver help system and reference manuals to resolve HTML tag questions and apply image accessibility attributes, including alt text and long descriptions.

Explore text in dreamweaver with selection techniques, learn how to insert and massage text, and build confidence by understanding the left-brain logic behind the technology.

Set up a Dreamweaver test site, organize the local folder, and distinguish static text from dynamic text as you work through a basic text example on web pages.

Move text into a Dreamweaver page by dragging or copying and pasting with paste special. Choose text with structure or raw text, and run spell check to improve accuracy.

Learn to import text into Dreamweaver using Paste Special, choosing between text only and text with structure or formatting from both text documents and Microsoft Word documents.

Master text selection in Dreamweaver using mouse and keyboard shortcuts, including double and triple clicks, arrow keys, and control, shift, home, end, and page up/down.

Explore how character and paragraph styles convey vocal nuance in text, including headings, italics, and preformatted text, to clearly deliver the message.

Learn to format text in Adobe Dreamweaver by applying paragraph and character styles, using heading tags, alignment, indentation, and CSS classes to control color while supporting accessibility.

Learn to create and format ordered, unordered, and definition lists in Dreamweaver, adjust list properties, indentation, and bullets, and convert text into clean, accessible web content.

Master find and replace in Dreamweaver, using find selection, find next, and replace across documents or the full local site, plus save queries and adjust match options.

Explore how to use and import images into Dreamweaver, edit in programs like Photoshop, and create links and rollovers to tell visual stories with a thousand words.

Explore how images convey messages in Dreamweaver, choose visuals relevant to your message, and understand formats like jpeg, gif, png-24 and role of pixels per inch at 72 ppi.

Create a new Dreamweaver site called happy zoo, pointing to the work folder, then configure a server (FTP, SFTP, or WebDAV) with a root directory for file transfer.

Create and save an index page in dreamweaver, insert images with alt text, center headings, and format text for the happy zoo project.

Optimize images in Dreamweaver to speed page loads, adjusting JPEG quality (around 40–60%), remove unused colors with a color lookup table, crop, and consider progressive options.

Learn to optimize images in Dreamweaver by editing with external editors like Photoshop, using healing and clone tools, and managing editors in preferences.

Create a rollover image in Dreamweaver using an original and a rollover image, test it in live view, and see how JavaScript generates the code for rollover buttons.

Explore how to use the properties panel to view and edit image attributes, adjust width, spacing, and alignment, crop and sharpen, and replace images by dragging the target button.

Open PSD images directly in Dreamweaver without Photoshop by using the image preview, clipboard paste, resizing to a target width, exporting as JPEG, and adding alt text.

Explore how dynamic web pages come alive through interactivity by creating and following links, including buttons, pages, sites, and email addresses.

Create your first link in Dreamweaver by turning an image into a site root relative link to the rollover page, understand relative versus absolute links, set the target, and test.

Learn to create an image map in Dreamweaver by building bear and lion pages, drawing polygon hotspots, and linking each hotspot to its corresponding page with alt text.

Create an email link in Adobe Dreamweaver by turning text or a graphic into a mailto: link, adding subject and body parameters, and previewing in Safari.

Learn to create a hyperlink to another website using the properties panel, entering http:// and a site url, then test and save to boost search engine optimization.

Learn to create named anchors and internal links within a single web document in Dreamweaver, using case-sensitive names to jump between history and modern era.

Explore cascading style sheets (css) to create a consistent, organized web design using paragraph and character styles, with broad browser support driving this chapter’s focus.

Explore cascading style sheets (CSS) and learn how CSS rules separate content from presentation, control tags, and use external style sheets in Dreamweaver for faster, scalable web design.

Set up your Dreamweaver site by creating a new site, naming it, selecting the local site folder from the work folder, and resetting the classic workspace.

Redefine html tags in Dreamweaver by creating CSS rules for h1 and h2, then adjust font, size, weight, color, and decorations, and save.

Explore css categories in dreamweaver, learning background, border, padding, margin, list, positioning, and overflow options, plus text, cursor, and rollover techniques to design styled web pages.

Create a custom css rule with a class selector (start with a period) to style code blocks, then apply font, size, and color to selected text in Dreamweaver.

Learn to modify css styles efficiently in Dreamweaver by updating a single selector to change colors across a large document, using the class and properties panel.

Explore compound selectors in css using nesting, parent-child relationships, and named containers to precisely style targeted paragraphs in Dreamweaver, demonstrating how to apply rules without affecting others.

Explore the css styles panel to edit internal css, adjust selectors and properties, and see how cascading and external style sheets shape layout and div statements to organize data.

Discover how external style sheets let you apply a single CSS file to every page, enabling global changes to background, fonts, and colors across your site.

Explains external style sheets and how to attach a CSS file to multiple HTML pages, compares internal and inline styles, and shows cascade precedence from inline to internal to external.

Set up a new site in Adobe Dreamweaver, name it external CSS, browse to the work folder, and save into the CSS folder to prepare your first external stylesheet.

Learn to create an external style sheet named main.css, define h1, h2, and p styles, and apply fonts, colors, margins, padding, and a boxed code class for clean, reusable styling.

Modify the external stylesheet to adjust paragraph text, body background color, and margins, and learn how external CSS boosts control and efficiency over internal styles.

Attach an external stylesheet to standardize sites, using link to keep it global. Define media types and apply heading styles, then remove the stylesheet from the styles panel if needed.

Demonstrate the power of external cascading style sheets to make global changes across five hundred seventy-five pages by editing the body background once and propagating the update.

Attach an external stylesheet to a new Dreamweaver page by linking main.css, then apply heading and paragraph styles that propagate to every page.

Learn how cascading style sheets control website styling across pages using external css, create a secondary sheet for targeted p tag rules, and apply it selectively.

Explore the transition from tables to divs for page layout using CSS. Learn why divs are easier to work with and more stable for web page design.

Master div statements for layout by comparing them to tables, leveraging the box model, and mastering five positioning types—static, relative, inherit, absolute, and fixed—to control placement and stacking.

Create a new site in Dreamweaver by selecting the folder inside the work folder named CSSA div, save the setup, then begin exploring divs in the next segment.

Explore divs and absolutely positioned divs in Dreamweaver, learning to lock elements to the screen, compare absolute positioning with fixed or relative techniques, and experiment with styling and nested divs.

Create a web page with nested divs in Dreamweaver by building a container, header, body, and footer, then style with CSS for layout, typography, padding, margins, colors, and borders.

Center a page in the browser by centering the main container with auto horizontal margins, adjusting box margins, and using float for a responsive Dreamweaver layout.

Learn to set a background image by creating a body style in Dreamweaver, selecting the image and tile options. Adjust margins for top alignment across browsers, then save and preview.

Use CSS in Dreamweaver to control navigation by styling links, removing underlines, setting colors, and adding hover and visited states, saving styles in an external stylesheet for reuse on pages.

Add text and a graphic in Dreamweaver by inserting a heading (h1), placing the image into the correct div, and refining styles—Verdana font, centered text, and color tweaks via css.

Examine frames in web design by loading multiple html documents in one browser window, including navigation, body, and footer frames, and assess their advantages and disadvantages.

Explore how frames define browser areas, using frameset and iframe to load content. Assess advantages like static navigation and per-frame scrolling, and drawbacks such as bookmarking and SEO challenges.

Set up a frame's site by locating the frame's folder, creating a new site named frame's site, and saving it, then build a frame set to organize pages and images.

Create a frameset from scratch in Dreamweaver, configuring a left navigation frame and a right content frame, naming frames, saving the frameset, and previewing the loaded pages.

Create JavaScript rollovers for site navigation in Dreamweaver using up and down images. Drag the navigation target into frame nav hvm in the frameset and save.

Learn how to link frames to navigation by setting each link's target to the content frame. Build a simple framed document that loads home, about, and contact pages.

Learn two ways to add scrolling in Dreamweaver: scroll within a frame by targeting content, or enable page scrolling using a div with height and CSS overflow.

Learn to use the no frames option in a frame set workflow in Dreamweaver, creating no-frames content and offering alternatives for users with browsers that do not support frames.

Master frameset control in Dreamweaver by using the frames panel to resize the navigation and content areas, adjust borders, and apply splits to add or reorganize frames.