Mastering Dreamweaver CS5 Made Easy Training Tutorial

Plan the site's overall design, layout, and content before building pages to create a unified, easy-to-navigate website where pages link together, with Dreamweaver's site management tools guiding you.

Create a root folder as the local copy of your site, publish by uploading its contents, and define the site in Dreamweaver to use site management tools.

Define a new website by opening the site setup, naming the site, selecting the root folder, and saving; if a cache prompt appears for an existing site, click okay.

Create a new web page in Dreamweaver by selecting new from the file menu and choosing a blank html page; name the page and press enter.

Save web pages often with the save as dialog, selecting the root folder, naming the page as index for the main page, choosing all documents, and closing Dreamweaver when finished.

Open saved Dreamweaver pages using open recent, the open dialog, or the files panel; locate and open the page with a click.

Preview web pages in multiple browsers within Dreamweaver before publishing to test layout, links, and responsiveness using the globe icon to select your default or other browsers.

Preview your pages in multiple browsers using Dreamweaver CS5, adding Mozilla Firefox as a secondary browser to compare rendering with Internet Explorer and ensure consistent appearance across devices.

Type text in Dreamweaver by clicking into the page and editing with backspace or delete, noting that tab may not work; use heading levels for proportional sizing.

Explore how to create and format headings in Dreamweaver CS5, using the properties inspector to apply heading levels from 1 to 6 and preview in live view.

Change text color in Dreamweaver CS5 using the page properties dialog, eyedropper, color swatches, or system color picker, including Windows OS and Mac OS greyscale options.

Select a background color using the page properties dialog and color palette to enhance readability. Choose a color that complements the page content and provides good text contrast.

Center your heading by using the format dropdown and properties inspector to set heading 1 and color, then view in a browser to see left, center, or right alignment.

Create and format paragraphs in Dreamweaver CS5 by pasting text, inserting paragraph and line breaks, and removing unwanted leading spaces to keep text aligned.

Dreamweaver requires fonts in groups of three to maximize rendering across devices; if a font isn’t installed, the page falls back to the next option, ending with a sans serif.

Discover ways to use custom fonts in Dreamweaver cs5: add fonts to the font list or create image text with Photoshop, noting fonts display only if the viewer has them.

Apply bold and italics to text in Dreamweaver CS5 using the bold and italic icons in the properties inspector, then preview with Live View.

Learn to convert text into unordered bullet lists and ordered lists in Dreamweaver by placing the cursor and using the list icons in the properties inspector.

Learn to access and insert special characters into web page text in Dreamweaver CS5, including placing a trademark symbol from the insert menu and editing its properties.

Learn to create block quotes in Dreamweaver CS5 by indenting a paragraph with the block quote icon in the properties inspector. Then remove it using the remove blockquote option.

Learn how to use images effectively in a web page to enhance impact, plan banners and buttons, ensure correct file types and sizes, and size images for a bandwidth-friendly site.

Explain gif and jpeg image types for web pages; gif uses compression for 256 colors in non-photo graphics, while jpeg supports millions of colors with adjustable quality; avoid tiff.

Explore commonly used web images for Dreamweaver CS5, including web banners, background images, button images, and rollover images, plus thumbnail galleries and best practices for preserving originals.

Insert images using the Dreamweaver CS5 insert panel and properties inspector, place a photo on a blank page, and configure an image tag with accessibility-friendly alt text.

Learn to use the Dreamweaver CS5 properties inspector to view an image’s file size, dimensions, and formatting—border, alignment, and surrounding whitespace—while editing a page.

Learn to add a border and surrounding space to an image in Dreamweaver CS5 by entering pixel values in the properties inspector, including vertical and horizontal spacing.

Insert a background image via page properties, select the file, and choose no repeat to center it; otherwise apply repeat options for seamless tiles.

Resize images in Dreamweaver CS5 using the properties inspector or drag handles with proportional resizing and a reset option; note you should resize in Photoshop for best quality.

Learn to crop images in Dreamweaver with the crop tool, adjust width and height using borders and the properties inspector, heed the warning, and save cropped images as new files.

Master wrapping text around an image in Dreamweaver CS5 by inserting an image and using align text options to position it left or right, noting device and browser influences.

Dreamweaver mainly converts visually designed pages into HTML, so use outside imaging programs like Photoshop to crop, resize, and save images and prepare site assets ahead of time.

launch photoshop from dreamweaver to open and edit an image, explore the photoshop workspace and detach the image window, and learn essential operations like cropping, copying, and saving.

Learn to crop an image in Adobe Photoshop, using the rectangular marquee tool and copy-paste workflow to create a new document while preserving the original image.

Learn how to save a cropped image created by copying a selection in Photoshop and insert it into Dreamweaver, using save as, flattening layers, and jpeg or gif options.

Resize an image in Photoshop by copying the image, pasting into a new document, using image size to set width to 500 while preserving proportions, and saving for web insertion.

Learn to use custom fonts in Photoshop, adjust font size and color, and export to Dreamweaver to display your chosen fonts on web pages across devices.

Insert hyperlinks in Dreamweaver CS5 by selecting text or images, using hyperlink dialog to link to internal pages or external sites, and set target to open in a new window.

Turn an image into a hyperlink to act as a home button; highlight it, click the folder icon beside the link field, and Dreamweaver inserts the path and file name.

Create image maps in Dreamweaver CS5 by defining three hotspots: square, circle, and polygon, add alt text, link to destination pages, and preview the interactive image in a browser.

Learn to insert named anchor points and create anchor hyperlinks to navigate long pages from the top index to sections and back, using the insert panel and anchor dialog.

Learn to insert an email link into a web page so visitors can contact you by email. Use the envelope icon in the insert panel to create the link.

Learn to customize hyperlink appearance in Dreamweaver CS5 by using the properties inspector to change link colors for normal, visited, and rollover states, and remove underlines.

Master frames in Dreamweaver CS5 by creating a frameset, saving each frame as its own page, and saving the frameset as a single HTML page.

Learn to add content to frames by opening a file in a selected frame, then enable auto scrollbars and insert text inside the frame.

Name each frame in Dreamweaver CS5 by using the frames panel and properties inspector, then save changes with enter to enable linking between frames.

Delete a frame from a web page in Dreamweaver CS5 by selecting the frame in the frames panel and dragging its border to remove it, then choose no to save.

Link text or images to a frame on your page, selecting the target frame in the frames panel. Preview in live view and use a blank target for external sites.

Identify when to use tables for grid-like information, despite CSS layouts becoming easier to maintain, and learn the basics of creating and using tables in web pages.

Learn to insert a table into a web page in Dreamweaver CS5 by creating a page, configuring a table with three columns, four rows, 600 pixel width, and top header.

Master Dreamweaver CS5 by inserting and editing table content on a page, building a 3-column, 4-row table at 600px width with 5px borders, and formatting bold header and cell content.

Learn to edit rows and columns in Dreamweaver CS5, adding a fourth column, deleting columns and rows, and adjusting column widths using the properties inspector for a 600-pixel table.

Master Dreamweaver CS5 by learning to adjust table borders and header backgrounds, apply hex colors via properties inspector and eyedropper, and change borders from 5 to 10 or zero.

Learn to adjust table cell spacing and padding in Dreamweaver CS5, applying 5 pixels of space between cells and 5 pixels of padding inside every cell via the properties inspector.

Learn to merge and split table cells in Dreamweaver CS5 using the properties inspector and merge or split icons to create larger or two-column cells.

Learn how cascading style sheets in Dreamweaver control content appearance with tag, class, id, and compound selectors to create site-wide designs that appear as intended on large and small screens.

Edit CSSA styles in Dreamweaver using the CSSA button in the properties inspector to change font family and color, selecting Arial and green.

Create and apply class styles in Dreamweaver CS5 to quickly format headings and captions by defining a new class, adjusting font and color, and applying it via the properties inspector.

Apply class styles to headings and images in Dreamweaver cs5, using the special heading style and the float left class to achieve left alignment and an 8-pixel right margin.

Learn to edit CSS styles and apply changes across a web page in Dreamweaver, using the color picker to update the special heading class and automatically apply it everywhere.

Learn to customize html tags in Dreamweaver cs5 by applying a css rule to headings, changing h2 tag’s font family and color, and ensuring fallback formatting for non supporting browsers.

Modify fonts in Dreamweaver using the CSSA mode, select text, choose a font collection, and name a new style, then apply it to other elements via the CSS styles panel.

Attach an external style sheet to multiple web pages to easily maintain the appearance across the site, and create and save a blank style sheet in the site folder.

Attach an external style sheet to web pages to achieve a uniform appearance, and you can attach multiple style sheets to a single page to reuse style rules.

Edit an external stylesheet to change styles across all pages by modifying a CSS rule in Dreamweaver, selecting a color in the color picker, saving, and applying updates site-wide.

Compare absolute and relative positioning for web pages, learn when a static element applies, and understand how browser differences can affect layout and element overlap.

Learn to create and manage AP divs, or layers, that are absolutely positioned on a page, stack or nest them, edit content in the properties inspector, and insert images.

Nest an AP div within another AP div in Dreamweaver CS5, creating a child AP div and managing active elements with the Properties inspector and the AP Elements panel.

Design a web page using predefined cssa layouts in Dreamweaver; create a new document, pick a blank html layout, and apply a one-column centered liquid header and footer.

Use the cssa styles panel to edit css layouts, changing the footer background color via the cssa rule dialog, then use the tag selector to identify h1 style rules.

Insert an image into a CSSA layout header in Dreamweaver CS5 by selecting the header, using the image source dialog, and adding alt text in the accessibility attributes and properties inspector.

Learn to add an image to a CSSA layout in Dreamweaver by opening the layout, using the insert panel image icon, selecting the image source, and adding an alt description.

Explore Spry widgets and events and actions that trigger changes, such as on click and on rollover, using a dropdown menu, collapsible panels, tabbed panels, and radio buttons in Dreamweaver.

Create a dropdown menu in Dreamweaver CS5 by inserting a Spry menu bar from the insert panel, choosing horizontal or vertical orientation, then customize and save.

Learn to edit a Dreamweaver CS5 dropdown menu by inserting items, naming tabs and submenus, adding links, adjusting fonts via the CSSA panel, and saving the spry assets folder.

Create and customize tabbed panels in Dreamweaver CS5 with the Spry insert panel, adding and reordering tabs that hold video, forms, or links.

Add content to tabbed panels on a web page by selecting the panel in the properties inspector and inserting text, images, or multimedia for each tab.

Edit tabbed panels in Dreamweaver CS5 by inserting a panel, adjusting font size and colors via the CSSA styles panel, and applying hover state backgrounds in live view.

Master the open browser window behavior in Dreamweaver by configuring an image as the launch element to open a new, sized browser window, with url options, events, and preview.

Learn to add forms to a web page in Dreamweaver CS5, handling hosting rules and form scripts, then define a form container and choose post or get.

Add text fields to forms within a form container to collect visitor information. Set label placement, multi-line options, and character limits via the input tag accessibility attributes dialog.

Learn how to insert and customize checkboxes in Dreamweaver CS5 forms, including labeling, accessibility attributes, styling options, and when to use checkboxes versus radio buttons.

Insert and configure radio buttons in a Dreamweaver CS5 form to allow only one selection, using the insert panel, form container, ID and label fields, and live view verification.

Insert a dropdown list into a form, fill in the id and label for the list, add items like books and pencils using list values, and verify in live view.

Learn to add a submit and a reset button to a form, place them in a form container, set accessibility attributes, and ensure a form tag is added for submission.