Dreamweaver Essentials

Explore HTML fundamentals, including elements and attributes, and the boxes inside boxes concept, plus how Dreamweaver's reference panel aids building tables and page structures.

Dreamweaver essentials introduces CSSA, cascading style sheets, which sit on the page’s skeletal structure to control text formatting, styles or rules, and overall layout.

Navigate three key challenges in web design: browser translation of CSS and JavaScript, cross-platform differences between Mac and Windows, and monitor resolutions measured in pixels (e.g., 800x600, 1024x768).

Tackle the three main challenges in web design—browsers, operating systems, and monitor resolution—using current browser stats. Set a 990-pixel width within a 1024 by 768 display to avoid scrolling.

Dreamweaver provides a visual interface for creating web pages and auto-generates HTML, CSS, and JavaScript, letting you assemble assets from Photoshop, Illustrator, and Word into a well-designed page.

Navigate Dreamweaver’s welcome screen to open recent items or create new documents from blank pages or templates, and explore samples and the Dreamweaver exchange to jumpstart your web design.

Explore the Dreamweaver interface by using the insert bar, document toolbar, code split and design view, and manage panels via the window menu.

Customize the Dreamweaver interface by docking, tearing, or floating panels; use the top-right menu to close panel groups and the Window menu to reopen assets, CSSA styles, and files.

Explore Dreamweaver's history panel, an uber undo that tracks page actions and allows undoing or redoing with a slider. Save steps as a command and replay it from commands menu.

Explore the snippets panel to insert pre-created breadcrumbs into your layout, preview their look, and use angle brackets for the path with Kolin as the separator.

Explore the other panels in dreamweaver, focusing on assets, CSA styles, and files, while noting that database binding, server behaviors, and components handle dynamic sites beyond this course.

Discover how the tag selector in Dreamweaver shows the element breakdown in the status bar and lets you quickly select or delete elements like links, cells, rows, and tables.

Save your customized Dreamweaver workspace from the window menu’s workspace layout, name it, and switch between saved layouts for different projects or environments.

Explore viewing and editing code in Dreamweaver with split view and code view, and use the code inspector to highlight selections between code and design.

Understand the basic architecture of a web page by exploring the HTML, head, and body containers, including doctype, metadata, and the role of the title in head.

Define a site in Dreamweaver by specifying a local root folder, creating local and remote sites, and configuring basic settings to upload changes to a remote server.

Learn to define and manage multiple Dreamweaver sites, switch between them with the site menu and Files Panel, and use basic and advanced modes.

Master Dreamweaver's files panel to organize at the root level, create folders like images, downloads, articles, and extras, and update links as you move assets.

Create index files in Dreamweaver to define your site’s starting page, naming them index.html or index.htm. Browsers look for these files, and shorter paths keep navigation clean.

Dreamweaver makes uploading easy by connecting to a remote site and dragging files between local and remote panes, using the blue push or green pull button.

Open the assets panel in Dreamweaver from the window menu and manage all defined site assets with visual previews, file lists, and the images, colors, and media categories.

Create a local root folder for your web site and define it in Dreamweaver. If you have hosting, add the details and practice uploading a file to the remote site.

Manage Dreamweaver project files, rename the home page to index.html, and preview in Firefox; explore a div-based layout with a laugh along company page and free Go media resources.

Discover how to import text into Dreamweaver, use paste special for clean pastes, leverage find and replace across files, and optimize page titles for SEO.

Learn how to apply heading tags in Dreamweaver, designate h1 and h2 headings, and review their code view to improve SEO while formatting and styling headings.

Learn how to create unordered and ordered lists in Dreamweaver using the code view, manipulate list types with the type and start attributes, and build sublists.

Insert and render special characters in dreamweaver using the insert menu, selecting symbols like copyright, registered, and trademark, and review en and em dash types and their HTML codes.

Learn how to insert and customize horizontal rules in Dreamweaver, adjusting width, size, alignment, shading, and color, using the property inspector, reference panel, and code view.

Apply a basic Dreamweaver CSSA style by selecting text, choosing font, size, and color, and see Dreamweaver auto-create a class style (style 1) for reuse across the site.

Learn to create and apply a basic CSS style in Dreamweaver CS4 by selecting font, size, and color, then save as a class and apply it across text.

Explore two methods to apply class styles in Dreamweaver—via the selection and via applying to a paragraph. See how the head stores rules as an internal stylesheet with spans.

Learn to edit styles in Dreamweaver using the CSS Styles panel, switching between code view and design view, and adjust color, font, and size with instant page updates.

Discover the Dreamweaver cssa rule definition dialog box, explore type, background, block, and box categories, and fine-tune font, color, spacing, margins, and layout options with live previews.

Discover the three fundamental CSSA rule types in Dreamweaver: custom class rules, redefining HTML elements, and ID selector rules, with per-element applications, global defaults, and unique page identifiers.

Identify internal and external style sheets. See how internal styles reside in the head; external styles live in a separate CSS file that can drive multiple HTML documents.

Learn to create and apply class styles using the CSSA rules panel in Dreamweaver, including naming rules, choosing internal stylesheets, and applying a copyright notice style.

Remove the horizontal rule, add a one-pixel top border with a matching color to the copyright notice, then adjust its top padding in Dreamweaver's CSS panel and box model.

Explore the CSS box model by examining content, padding, border, margin, and background, and learn how widths are measured in CSS with practical examples.

Using the box model, this lesson shows how to create a reusable class sidebar in Dreamweaver, with width, padding, margin, border, background, and float right to wrap text.

Redefine existing html elements using css by selecting a tag and applying a rule that updates all headings. Control spacing with margin top and bottom, including negative values.

Speed up design by duplicating styles in the styles panel, renaming them, and editing properties like font size to create subheadings, with live browser preview.

Redefine the main body content by adjusting the paragraph elements and applying CSS styles in Dreamweaver, including font, size, line height, margins, and first-line indents.

Redefine ordered and bulleted lists with CSS using tag selectors, switch list types, customize bullets, and adjust spacing with margins for cleaner layouts.

Explore creating cssa rules in Dreamweaver CS4 with the new rule dialog box, choosing selectors (class, id, tag), and using compound selectors to target elements, saving to internal or external stylesheets.

Create a custom css class in Dreamweaver, apply it to an entire paragraph, and style it with Geneva 15px, light blue background, black bottom border, negative indents, and padding.

Learn two CSS typography techniques, including Achrafieh styling, to create a newspaper-style layout using class-based styles, Verdana 11px dates, a 45px main headline, and 13px opening paragraphs with justified text.

Explore advanced CSS typography in Dreamweaver by creating class-based rules, applying fonts like Georgia, precise sizes, colors, and spacing, and previewing results in the browser.

Move internal styles to an external stylesheet in Dreamweaver by selecting all rules, choosing move CSSA rules, and saving as styles.css; update the head link to styles.css.

Learn to disconnect and reconnect an external stylesheet in Dreamweaver using the styles panel, attach external stylesheet, browse and preview different stylesheets, save, and refresh to restore formatting.

Discover how to edit rules in an external stylesheet using the styles panel or code view, save the CSS file, and refresh to apply changes.

Edit external stylesheets without Dreamweaver by updating the CSSA file, then save and refresh the browser to see the change. Use text editors like textedit or notepad across platforms.

Learn to move styles between internal and external stylesheets in Dreamweaver, using dragging and copy-paste to organize and reuse rules like emphasis.

Speed up styling workflows by using keyboard shortcuts to save all open documents in Dreamweaver with an external stylesheet, then refresh the browser to see changes.

Explore external style sheets in dreamweaver cs4, focusing on using the css styles panel, split view, and code view to edit and manage an external stylesheet alongside html.

Master Dreamweaver table basics by inserting a 3x3 table, setting width to 100 percent, and adjusting borders. Learn merging cells, accessibility options, and viewing HTML code.

Insert content into Dreamweaver tables, including nested tables, and fix width or set column widths in percent or pixels. Use visual aids like the green lines to keep layout stable.

Learn to select table components in Dreamweaver with quick methods like click-and-drag for cells, control/command-click for a single cell, and tag selector options for rows, columns, and tables.

Master traditional table formatting in Dreamweaver by styling individual cells or the whole table. Adjust alignment, width, height, padding, cell spacing, borders, and header rows with colors or background images.

Learn how to use CSS in Dreamweaver to control table formatting, redefine table headers, and implement alternate row colors with odd/even classes for clean, conflict-free styling.

Understand raster and vector graphics for web design, including when to use JPEG or GIF, color, resolution, and transparency, to optimize graphics in Dreamweaver.

Insert and format images in Dreamweaver via insert image or the assets panel, then set the image source, alt text and title, spacing, and alignment.

Learn to control images across pages with a class-based css rule, applying floats, margins, and borders to an image controller for flexible layout.

Explore Dreamweaver essentials: use Dreamweaver's image editing commands to crop, adjust brightness and contrast, sharpen, and optimize images. Learn to balance quality and file size, compare formats, and note changes.

activate an external image editor from Dreamweaver, set Photoshop as the editor for JPEG and GIF, edit images, save, and have them automatically update in Dreamweaver.

Set a background image for the page, a div, or a CSS rule. Control tiling, no-repeat, and positioning, and switch internal styles to an external stylesheet for consistency.

Learn to insert and manage smart objects in Dreamweaver CS4 by linking Photoshop files, adjusting file formats, and syncing updates from the original asset.

Use images for typography in Dreamweaver by designing text in Photoshop, saving as gif for reliable loading, and inserting the graphic into your layout.

Demonstrates a workflow from Illustrator to Photoshop to Dreamweaver, copying Illustrator objects, pasting as pixels in Photoshop, and saving as JPEG to import into a Dreamweaver layout.

Explore alpha transparency in PNGs to create soft edges and feathered effects, and learn a Dreamweaver workflow to implement alpha PNGs across browsers, including a workaround for Internet Explorer.