Dreamweaver Projects

This work is licensed under a Creative Commons License.

Dreamweaver Projects

Index Dreamweaver Tutorials
Suggested Reading: Adobe Dreamweaver CS4 HOW-TOs 100 Essential Techniques

Linear Gradient Project
Template Project

Getting Started:

Intro to Mac

keyboard and right click

password and user name

shut down

file structure

Dock

Force Quit

Text Edit shortcut

DW to Dock

Fireworks to Dock

File

Edit Browser

Convert

Edit

Preferences

General: XHTML Transitional 1.0

New Document: .htm file extension

Preview in Browser: Choose a browser

Window

Tool Bar

Properties Panel

Insert -> Common

Files.

Screen/Design

Files

Pick a theme, and download several images

Download a couple of pages text

One of the first pages you create will be your index page (Home.) This will be your "canvas." Play with this page and try out the new tools that you learn. When you finish each of the below projects go back to your Home page and play with the color scheme, add a layout table, link to each page that you create, and so on. You want to avoid doing too much page formatting on the Project pages since you will be applying a template to them latter on. If you are asked to format the text or links, then you will want to go back latter and clean-up the pages before you apply your template...you will be taught how to do this and you will find this to be a valuable tool latter on.

Project I

Obj: Define site, create a simple page with images and page formatting, and apply some of the Commands. If applies, then Display your FW and PS files/buttons.

Define a site using proper naming convention. Call this one My_Site

Create 2 folders from within DW named 'Images' and 'Notes'

Create a page named 'index.htm'

Create a new page and name it My_DW.htm

Create a titles using H1, H2, H3, H4

Create 2 external links that open in a new tab

Import and center an image

Create an ordered list of your favorite bands (5)

Create a Title for your page (HTML and page)

Play with the Page Properties and format your text, and play with the link properties: Set font to Arial, underline on rollover links

Apply Source Formatting Why?

Apply Clean Up XHTML

Save the page.

Preview the page in your browser.

Project II

Obj: Formatting Images. Start downloading the two pages below so that you will have some text and images to work with...if we all start at once we will create a network bottle-neck. None of the images have been optimized. If applies, then Display your FW and PS files/buttons instead of downloading the images...still use text.

Text Page
Image Page

Create a new page

Create a Page Title

Save the page as My_Images.htm

Go to the Page Properties and set the font style and size...use a Sans Serif font. This is one of the few pages that you will set the Font Properties...you will find out why latter.

Copy and paste all of the text from the Text Page.

Insert at least five images from the Image Page

Give all of the images an Alt tag.

Use the different alignments (right, left, center, etc.) You do not have to use all of them...you want your page to be pleasing.

Give each image a border to provide insulation from the text.

Link one of the images to an external site. The link must include: http://www....

Resize the large image at the bottom so that proportionality is maintained.

Apply Clean Up XHTML.

Apply Source Formatting Note: If your text does not align the way you think it should then try Apply Source Formatting. This is especially true if your text runs over the image.

Save the page

Preview the page in your browser.

Project III

Obj: Using tables, manipulating tables, and using tables for layouts. If applies, then Display your FW and PS files/buttons.

For this project you will create a page...My_Table.htm and apply a layout table to your home page.

Create a new page

Create a Page Title

Save the page as My_Table.htm

Go to the Page Properties and set the font style and size...use a Sans Serif font. This is one of the few pages that you will set the Font Properties...you will find out why latter.

Create a table that looks like this table. Make sure to align the table, apply alt tags to all images, format the cells properly, etc. Notice that the top row cosist of merged cells.

Once you have created the table above then copy and past the table at the bottom of your page. With this second table set the Borders to 0, Cell Padding to 0, and Cell Spacing to 0.

Time to create a Layout Table. Go to you homepage and create a table. This table should have 2 or 3 columns, and 2 or 3 rows, align the table to Center. Start merging the cells and fomatting them to create the look that you want.

Apply Clean Up XHTML.

Apply Source Formatting Note: If your text does not align the way you think it should then try Apply Source Formatting. This is especially true if your text runs over the image.

Save the page

Preview the page in your browser.

Project IV

Obj: Linking to other pages, and outside sources. Creating page anchors.

At this point you have at least 4 pages. We will now start linking to the pages and creating anchors for our pages.

Open you My_Images page. Create at least 4 anchors within the page. The links to anchors should be below your title and format them like this: Anchor1 | Anchor2 | Anchor3 | Anchor4

On the same page create some links that go to the top of the page. Place a # in the Link dropdown box, and _top for the Target.

Go to your home page and create links that link to all of your pages.

On your home page create two links to external sites and have them open in a new tab.

Create two email links on your homepage...maybe work email, and personal email.

Apply Clean Up XHTML.

Apply Source Formatting Note: If your text does not align the way you think it should then try Apply Source Formatting. This is especially true if your text runs over the image.

Save the page.

Preview the page in your browser and make sure all of your links work.

Project V

Obj: Using AP Divs

This is a very powerful, yet simple DW layout tool.

Create a new page called My_Div.htm

Go to the Layout section of the Insert bar

Select Draw AP Div

Draw a few of these on your page, insert different images into them, and some text with different fonts.

Move the Divs to different parts of the page to get the look you want

Link to this page from your home page

Apply Clean Up XHTML.

Apply Source Formatting Note: If your text does not align the way you think it should then try Apply Source Formatting. This is especially true if your text runs over the image.

Save the page.

Preview the page in your browser and make sure all of your links work.

Project VI

Obj: Create a page with linear gradient and url icon. Fine tune Page Properties skills.

For this project you will be using both Fireworks and the Page Properties of Dreamweaver.

Open Fireworks and Create a Linear Gradient Background

The above link will show you how to import the gradient into your Web page.

Create a new page called Gradient.htm

Import the gradient via the page properties and have it repeat only on the x-axis.

Create a layout table, and center it. Set all of the borders, cell padding, etc. to 0.

You may want to change the BG color of each cell so that you have a color scheme of sorts.

Link to this page from your home page

Apply Clean Up XHTML.

Apply Source Formatting Note: If your text does not align the way you think it should then try Apply Source Formatting. This is especially true if your text runs over the image.

Save the page.

Preview the page in your browser.

You may want to apply this technique to your home page for practice. Open the gradient you created above, give it a different name, change the colors, save it, and apply it in DW.

Project VII

Obj: Create an Image Map, and Optimize Images for the Web.

Open My_Table.htm and Optimize all of the images for the Web. Right click and select Optimize. Play with different settings and try to see at what settings you see a profound change in the image quality.

Create a new page called Image_Map.

Import an image of your choice and create 4 links on it using the Image Map property.

Two of the links must link to external sites, and 2 to pages within your site.

Link to this page from your home page

Apply Source Formatting Note: If your text does not align the way you think it should then try Apply Source Formatting. This is especially true if your text runs over the image.

Apply Clean Up XHTML

Save the page

Preview the page in your browser and make sure all of your links work.

Import a large image to your page and create an Image Map.

Create at least 4 links: 2 external

Project VIII

Obj: Introduce the different page styles available in DW. Review Define Site.

Define a new site. Call it HTML_Site.

Create an images folder within the site.

Create a several new documents using a Blank Page, HTML. Play with the different pages to determine what their differences are.

Define a second site and call it CSS_Site

Create an images folder within the site.

Create a new page by going to Page from Sample. Explore the different types of pages available, but create a page from the Theme section.

Notice that Dreamweaver creates some additional folders. Open one of these folders and open one of the pages. When you upload your site, you must include these dependent folders.

Project IX

Obj: Using Framesets and linking to external sites.

Go to the Files and open the site: My_Site.

Create a new page by going to Page from Sample. Go to the Frameset folder and select Fixed Left.

Format the borders of the Frameset to you liking.

In the left column create a heading called Favorite Sites <H2>

List 5 of your favorite external sites and link to them. Don't forget the http://www....

Set the target to each of these links to MainFrame

Apply Clean Up XHTML.

Apply Source Formatting Note: If your text does not align the way you think it should then try Apply Source Formatting. This is especially true if your text runs over the image.

Save the page.

Preview the page in your browser and make sure all of your links work.

Link to this page from your Home page.

Project X

Obj: Templates.

Project XI

Obj: Importing pages, Word Docs, and stripping pages.

Home

Top