Dreamweaver Projects 1-10 PDF

Preview

Summary

CHEMSITRYa...

Description

DREAMWEAVER PROJECT 1: Design a Web Page for All Resolutions Using Tables Objectives Practiced Create a web page

Change cell fill colors

Create a table

Apply HTML formatting

Work with dynamic and fixed widths in a table

Paste text

The webmaster for your school has heard that your class has become proficient in Adobe Dreamweaver, and asked you to create a new home page for the school website. She would like you to create the page so it will work on all screen resolutions using filler text that she will replace later. 1. Start Dreamweaver, and then create a new HTML document. 2. Save your Dreamweaver document as index.html. 3. Insert a table with 3 columns and 3 rows, a border thickness of 0, and then accept the default settings. 4. Set the width of the first column to 125, the second column to 100%, and the third column to 30. (Note: Setting the middle column width to 100%

Hint

allows the table to adjust automatically to fill the

To select a column, position the mouse pointer above the column until it changes to a downwardpointing black arrow, and then click the mouse.

width of the browser window.) 5. Copy five paragraphs of filler text from the Lorem Ipsum website (http://lipsum.com), and then paste them into the center cell. 6. Copy five words of filler text from the Lorem Ipsum website, and then paste them in the middle cell of the first row. Format the words in the Property inspector with the HTML format Heading 1. 7. Select the first and third rows, and then change the cell fill color to #990000. 8. Select the first and third cells of the second row, and then change the cell fill color to #666666. 9. Save your page, and then preview it in a browser. 10. Resize the browser window to verify that the page adjusts accordingly.

Hint

There are over 40 different screen resolutions; 1024 3 768 is the most popular resolution.

11. Close your browser, close your Dreamweaver document, and then exit Dreamweaver.

1

DREAMWEAVER PROJECT 2: Design a Web Page Using a Spry Widget Objectives Practiced Create a web page Work with a spry widget Enter text

The webmaster on your campus has heard that your class has been working with the spry widgets. She would like you to create a web page using either the Spry Tabbed Panels or Spry Accordion widget to list the athletic schedules for the sports available on campus.

1. Start Dreamweaver, and then create a new HTML document. 2. Save your Dreamweaver document as schedules.html. 3. Enter an appropriate title for your web page. 4. Insert the spry widget of your choice. 5. Enter the information for a variety of sports and their schedules for your school. 6. Design the page using colors to complement your school website. 7. Save your page, and then preview it in a web browser. 8. Close your browser, close your Dreamweaver document, and then exit Dreamweaver.

Critical Thinking There are more spry widgets available at the Adobe Exchange, www.adobe.com/cfusion/ exchange/.

2

DREAMWEAVER PROJECT 3: Design a Web Page with Div Tags Objectives Practiced Insert AP div tags Edit div tag properties

Demonstrate your Dreamweaver skills using div tags and editing their properties. You will create a web page with the following layout: Your Name Class Schedule Class Name Class Name Class Name Class Name Class Name School Name

School Logo

1. Start Dreamweaver, and then create a new HTML document. 2. Save your Dreamweaver document as lastname_classschedule.html. 3. Enter an appropriate title for your web page. 4. Place an AP div tag at the center of the page, and then type Your First and Last Name Class Schedule.

3

DREAMWEAVER PROJECT 3: Design a Web Page with Div Tags 5. In the CSS Styles panel, edit the AP div tag as shown in the figure below: • Type category: •

Font-family: Georgia, “Times New Roman”, Times, serif

•

Font-size: xx-large

•

Color: #00F

• Background category: •

Background-color: #CCC

Background color found under this category

6. Resize the div tag as needed. 7. Place an AP div tag for the classes you are taking, and then type each class name inside the div tag.

4

DREAMWEAVER PROJECT 3: Design a Web Page with Div Tags 8. In the CSS Styles panel, edit the AP div tag as follows: • Type category: •

Font-family: Georgia, “Times New Roman”, Times, serif

•

Font-size: medium

• Block category: •

Text-indent: 5 pixels

• Border category: •

Style: solid, Width: medium, Color: #00F

9. Resize the div tag as needed. 10. Place an AP div tag at the bottom-left of the page, and then type the name of your school inside the div tag. 11. Resize the div tag as needed. 12. Download a copy of your school’s logo from its website, and then save it to the same location as your Dreamweaver document in a new folder named assets. 13. Place an AP div tag at the bottom-right of the page, and then insert your school logo inside the div tag. 14. Resize the div tag as needed. 15. Save your page, and then preview it in a web browser. 16. Close your browser, close your Dreamweaver document, and then exit Dreamweaver.

5

DREAMWEAVER PROJECT 4: Design a Web Page Using Table Layouts Objectives Practiced Insert tables

Merge cells

Insert images into a table

Change cell shading

Enter text into a table

Align text in a cell

Demonstrate your Dreamweaver skills by designing a web page using a table to display a 7-day weather forecast.

Sunday

Monday

Name of City—7-Day Forecast Tuesday Wednesday Thursday

Symbol

Symbol

Symbol

Symbol

Symbol

High temp

High temp

High temp

High temp

High temp

High temp

High temp

Low temp

Low temp

Low temp

Low temp

Low temp

Low temp

Low temp

Friday Symbol

Saturday Symbol

1. Start Dreamweaver, and then create a new HTML document. 2. Define a site for your project. (Note: Create a root folder named weather_forecast for your site and a folder where you can organize your images.) 3. Save your Dreamweaver document as weather.html. 4. Enter an appropriate title for your web page. 5. Create a table with five rows and seven columns, a table width of 100%, and a border of 0, as shown in the figure below.

Table settings

6

DREAMWEAVER PROJECT 4: Design a Web Page Using Table Layouts 6. Merge the cells in the first row, and then type Name of City—7-Day Forecast. 7. In the second row, enter the names of the day of the week. 8. Research a weather forecast on the Internet using a weather site such as The Weather Channel (www.weather.com) for a city of your choice. 9. Enter the high and low temperatures forecasted for the city in the appropriate cells of your table. (Note: Insert a degree symbol using the Text Insert panel.) 10. Using the Internet, download weather symbols to include in your table for your forecast. Be sure to save the symbols to the folder you created for your images inside your weather_forecast folder, and then insert the symbols in the appropriate cells. (Note: Always check the copyright information on any media you download from the Internet.) 11. Align the text in all of the cells with a horizontal center. 12. Using the HTML Properties panel, bold the contents of the first two rows of the table. 13. Change the cell shading for the low temperatures to a pale blue color, such as #66FFFF. 14. Change the cell shading for the high temperatures to a pale orange color, such as #FFCC66. 15. Save your page, and then preview it in a web browser. 16. Close your browser, close your Dreamweaver document, and then exit Dreamweaver.

Critical Thinking Use CSS styles to format the text in the other cells.

7

DREAMWEAVER PROJECT 5: Create a Web Page Using an Image Map Objectives Practiced Work with an image map Draw hotspots Create external links

Your history teacher has asked you to create a web page that will display the regions of your state with external links on the various regions (hotspots) that will link to websites for additional information. You will need to locate a map on the Internet that displays the various regions of your state. Remember to cite the source of your image.

1. Start Dreamweaver. 2. Define a site for your project. (Note: Create a root folder for your site named your state, and a folder where you can organize your images.) 3. Create a new HTML document, and then save it as lastname_state.html. 4. Enter an appropriate title for your web page. 5. Type an appropriate heading for your page, such as “The Regions of Virginia.” 6. Insert the map that displays the various regions of your state. 7. Click the image in the document window, select the Polygon Hotspot tool in the Property inspector, and then draw hotspots over the various regions of your state. 8. Add an appropriate alt tag for each hotspot, and then add links to an external website for further information about each region. Type external link here

Polygon Hotspot tool

Alt tag for image

8

DREAMWEAVER PROJECT 5: Create a Web Page Using an Image Map 9. Save your page, and then preview it in a web browser. (Note: Verify that all links work

Hint

Type the full URL for an external link.

properly.) 10. Close your browser, close your Dreamweaver document, and then exit Dreamweaver.

Critical Thinking Research websites about the various regions of your state to create external links.

9

DREAMWEAVER PROJECT 6: Design a Website Comp Objectives Practiced Create a web page

Insert div tags

Insert image placeholders

Set page properties

Your webmastering teacher has asked you to design a website comp for a business whose website could use a redesign. Locate a website that in your opinion needs to be redesigned; be sure to clear your selection with your instructor before moving forward. Use image placeholders and div tags with placeholder text to assist you in designing a web page using good design principles.

1. Start Dreamweaver, and then create a new HTML document. 2. Save your Dreamweaver document as comp.html. 3. Enter an appropriate title for your web page. 4. Insert image placeholders, as shown in the figure below. (Note: Enter a title in the Name box that represents the image, such as “Banner.”)

Placeholder

Placeholder name

10

DREAMWEAVER PROJECT 6: Design a Website Comp 5. Enter AP div tags with text placeholders to create a layout for your page.

Hint

Add color to your image placeholders to enhance the design.

6. Use the Page Properties dialog box to set the default font, text color, and background color for your page. 7. Save your page, and then preview it in a web browser. 8. Close your browser, close your Dreamweaver document, and then exit Dreamweaver.

Critical Thinking Research web design principles to identify what makes a good website.

11

DREAMWEAVER PROJECT 7: Design a Website for a Restaurant Objectives Practiced Create a web page

Attach an external stylesheet

Paste text

Create a CSS rule

Insert images

Apply CSS rules

Work with AP div tags

Use a spry widget

Create an external stylesheet

Your web design company has been asked to design a website for an upscale steak house named Angus Prime Steak House. They are proud of the fact they use only grass-fed Angus cattle, free-range chicken, and the freshest organic ingredients available from local farmers. They would like you to design a web page highlighting this information in a creative and professional manner using a div tag layout instead of tables. They would like you to create the following pages: index.html (home page), menu.html, location.html, and about_us.html. Your pages must include these elements: •

Title

•

Contrasting text and background colors

•

Brief page description

•

alt text for all images

•

Angus_Logo.png (data file)

1. Start Dreamweaver. 2. Define a site for your project. (Note: Create a root folder for your site and a folder where you can organize your images.) 3. In the Files panel, create four new files for the pages of your website named index.html, menu.html, location.html, and aboutus.html. 4. Include the following on each page: • Use AP div tags to organize your layout and place the elements of your page. • Use the Spry menu bar widget to make navigation possible between the pages in your site. • Unique page titles • Page-specific content

12

DREAMWEAVER PROJECT 7: Design a Website for a Restaurant • A copyright statement • Attribution citations for your sources of the content and images 5. Create an external stylesheet that includes the following: • Define Page Properties for the default font, font size, text color, background color, and hyperlink colors. • Define font styles for at least two different levels of text. • A CSS rule for the navigation bar 6. Add the following to the Home page: • Keywords and description head tags • Webmaster contact information, including a link to an e-mail address 7. Add the following to the Menu page: • Headings: Appetizers, Entrees, Soups and Salads, Desserts, Sides (Note: The information for this page is available in the Restaurant Menu.txt file.) • Subheadings under Entrees: Steak Cuts, Chef’s Selections, and Chicken 8. Add the following to the Location page: • Address: 1550 Main St, Dallas, TX 75201 • A map you’ve downloaded from the Internet (Note: Always check the copyright information on any media you download from the Internet.) 9. Add the following to the About Us page: • Research the benefits of grass-fed beef and free-range chicken, and include that information on this page. 10. Save your site, and then preview it in a web browser. (Note: Verify that all links work properly.) 11. Close your browser, close your Dreamweaver docu-

Hint

Explore restaurant websites for ideas.

ment, and then exit Dreamweaver.

13

DREAMWEAVER PROJECT 8: Design a Fan Website Objectives Practiced Create a site

Create a navigation bar

Create a folder

Insert a table

Create web pages

Create an external stylesheet

Enter a page title

Attach an external stylesheet

Enter head tags

Create a CSS rule

Enter alt text on images

Apply CSS rules

Insert images Demonstrate your Dreamweaver skills by designing a fan website for a celebrity, a band, a sports team, a book, a television show, or a movie. The website should include at least four pages, including a bio and a photo gallery. The pages should be consistent in their design and layout.

1. Start Dreamweaver. 2. Create a site for your project. (Note: Create a root folder for your site and a folder where you can organize your images.) 3. In the Files panel, create four new files for the pages of your website named index.html, bio.html,

Hint

File names should not have spaces.

photogallery.html, and one you make up, named yourchoice.html. 4. Add the following to the Home page: • Include at least two images on this page; add appropriate alt text to each image. • Enter text to introduce the topic of your website. • Create an external stylesheet with a minimum of 10 styles, including: •

Define Page Properties for the default font, font size, text color, background color, and hyperlink colors.

•

Hint

When creating your first CSS Rule, choose to define a New Style Sheet, which you will then attach to the other pages as you work.

Define font styles for at least two different

levels of text. • Enter keywords and description head tags. • Webmaster contact information, including a link to an e-mail address

14

DREAMWEAVER PROJECT 8: Design a Fan Website 5. Add the following to the Bio page: • Include at least two images on this page; add appropriate alt text to each image. • Attach the external stylesheet, and use the font styles you have created. 6. Add the following to the Photo Gallery page: • Create a table with 3 columns and 8 rows to organize your images. (Note: Use the row below the images to enter a description of the image.) • Include at least 12 images on this page; add appropriate alt text to each image. • Attach the external stylesheet, and use the font styles you have created. • Add an additional style to the external stylesheet to apply to the image descriptions. 7. Add the following to the Your Choice page • Include at least two images on this page; add appropriate alt text to each image. • Three external hyperlinks • Attach the external stylesheet, and use the font styles you have created. 8. Add the following common elements to all pages: • A text navigation bar to navigate between the pages in your site • A unique page title for each page • The pages should be complete with content about each topic • A copyright statement on each page • Attribution citations for your sources of the content and images 9. Save your site, and then preview it in a web browser. (Note: Verify that all links work properly.) 10. Close your browser, close your Dreamweaver document, and then exit Dreamweaver.

Critical Thinking Visit fan web pages to get ideas for your website.

15

DREAMWEAVER PROJECT 9: Design an About Me Website Objectives Practiced Create a site

Create a navigation bar

Create a folder

Insert a table

Create web pages

Create an external stylesheet

Enter a page title

Attach an external stylesheet

Enter head tags

Create a CSS rule

Enter alt text on images

Apply CSS rules

Insert images

Demonstrate your Dreamweaver skills by designing an About Me website. The website should include at least four pages, and be about you or things you are interested in. The pages should be consistent in their design and layout.

1. Start Dreamweaver. 2. Define a site for your project. (Note: Create a root folder for your site and a folder where you can organize your images.) 3. In the Files panel, create four new files for the pages of your website. Name the home page index.html, and then give the other pages appropriate names. 4. Include the following on each page: • A text navigation bar to navigate between the pages in your site • Unique page titles for each page • Each page should include content, including images with alt text, and at least one table • Copyright statement on each page • Attribution citations for your sources of the content and images

16

DREAMWEAVER PROJECT 9: Design an About Me Website • Create one external stylesheet to attach to each page. Include the following in the external stylesheet: •

Define Page Properties for the default font, font size, text color, background color, and hyperlink colors.

•

Define font styles for at least two different levels of tex...