Dreamweaver Training

Introduction to Dreamweaver

We start by introducing you to Dreamweaver user interface, the various tools and panesl and how you can customize the interface to meet your specific needs. We then proceed to show you how you can define a local site within Dreamweaver and create a simple website. After completing this section, you should be able to:

• Open and use the Dreamweaver interface
• Customize the interface for your personal use
• Create a local site
• Create a simple HTML page, add the page title and save the file in the site folder
• Use a preview browser to view page results

How a Website Works

Web pages are deceptive when presented in a browser. What appears to be a single document can actually be a large collaboative effort that involves HTML, CSS, JavaScript, image and other kinds of files. These files all come together based upon the instructions in the HTML. Dreamweaver recognizes that even the simplest web page is actually a site full of files that need to be managed. Once you've completed this portion, you will:

• Know how to define, delete and edit a site definition in Dreamweaver
• Understand how Dreamweaver manages relationships between files
• Be able to use Dreamweaver to update links to files if you rename and move the site files
• Know how to create a sitemap of the files in your website

Creating Basic Pages - Text, Graphics & Links

Every web page from the most sophisticated to the simplest has certain common elements. We will take a peak under the hood at the code that Dreamweaver crafts when you create a new document. We'll discuss the importance of specifying the type of document you are creating, how to name the file and how the title affects the way that search engines and other tools index the content on a page. We will also experiment with including content on the page and get you up to speed on the most important types of content including including paragraphs, graphics and basic hyperlinks. Graphics enhance the aesthetics of the site, provide buttons and icons for usability and navigation, represent information in charts and graphs and generally illustrate concepts in a way text cannot. After completing this section, you should be able to:

• Create a new document, save it and title it
• Add paragraphs of text with line breaks to your web page
• Understand graphic types that are used on web pages
• Put a graphic on a web page
• Align text and graphics on the page
• Create links from images and text
• Add <meta> tags that will assist in the classification of your webpage

Hyperlink & Image Tools

In the previous exercise we introduced you to some basics, but Dreamweaver offers a multitude of ways to work with auxillary files such as image and hyperlinked files. Since linking and the relationships between files are largely what makes the web the web, Dreamweaver provides a rich tool set for creating inter-file relationships. After this exercise, you will be able to:

• Use the Dreamweaver pointer tool to create links between files
• Work with placeholder images
• Create email links
• Creating named anchors on a page
• Linking to a named anchor
• Linking to different file types

Using Cascading Style Sheets (CSS) to Format

Images can only go so far towards spiffying up the appearance of a website. Much of what makes a site attractive is attention to design aspects such as fonts, colors, spacing, sizes and layout. On the web, these aesthetics are not handled with HTML, but rather with a different language specifically suited for design and style called CSS. Because formatting can be a tremendous task, CSS is meant to be used to create stylesheets - or a conglomeration of design choices meant to be applied to one or more web pages. This allows a designer to create one stylesheet and use it on all of the pages of the website. After completing this section, you should be able to:

• Understand basic CSS syntax
• Understand the benefits and limitations of CSS
• Control the basic properties of a page using CSS
• Export styles into an external style sheet
• Create and attach style sheets to your web pages
• Using the CSS Styles Panel in Dreamweaver
• Create and apply class, tag and advanced style rules
• Create rollover effects with CSS

Typography

Two of the most important aspects of any web site are the content and how it is formatted. We explain the importance of different types of text content and how to add various formattings, such as headings, paragraphs, alignments and lists to emphasize important content and make the page more aesthetically pleasing. After completing this section, you should be able to:

• Specify appropriate content types for text
• Control document structure using headings and paragraphs
• Understand font sizing issues
• Alter spacting between text sections
• Select preferred fonts as well as fall back options
• Use and customize lists
• Create an image of text using Flash for certain formatting

Working with Tables

From almost the very beginning, HTML offered a mechanism for laying out rows and columns of data for display with tables. Shortly after their introduction, designers everywhere co-opted them and started using them for web page layout. To this day, tables are used on many pages as a way to structure the display of some or all of the content on the page. While we encourage use of CSS for page layout, understanding tables and their various components is important. After completing this section, you should be able to:

• Create a table and place content within its cells
• Use Dreamweaver and HTML to specifiy display properties of the table including borders and backgrounds
• Use CSS to modify the display properties of a table
• Align the table's content
• Sort the content of a table
• Create rounded corners for the table

Using Dreamweaver's Layout Tools

The creators of Dreamweaver recognize that web designers and developers have a cornucopia of different users - with different browsers and settings. Accordingly, Dreamweaver allows designers to choose several different ways to layout a page and includes tools for each technique. We cover both using CSS absolutely positioned divs as well as working with layout tables. After completing this section, you should be able to:

• Set a tracing image of your page design
• Use layers to design a page
• Use DIV tags and CSS to lay out a page
• Draw tables in layout view

Interactive Images

Designers have a variety of tools at their disposal for drawing a user's attention to something. One of the most common and reliable techniques for navigation and for linking is to employ images that somehow react when a user "rolls over" the image with their mouse. Rollover images are an easy way to spice up a site and make it more interactive. After completing this section, you should be able to:

• Create a simple rollover with 2 images
• Use a mouseover one image to change a different image
• Set up a navigation bar with different rollover states
• Make a Flash button

Publishing Your Website

Once you finish building your web site locally you need to test the web site to ensure it behaves the way you intended it. We will show you how to quickly test for for broken links, ensure all images shows up correctly and spell check every page. We will also show you how to upload your site and maintain it. After completing this section, you should be able to:

• Test your web pages for accessibility and broken links
• Define and connect to a remote server
• Upload your pages to a remote site
• Synchronize your sites to upload changed pages

Prerequisites:

• Basic PC and Windows skills: copying/pasting, right-clicking, finding files, switching between programs, exploring windows

keywords: Dreamweaver course san francisco bay area (Dreamweaver Intermediate) Dreamweaver training san francisco bay area (Dreamweaver Advanced)