Introduction to Dreamweaver CS3

Transcription

1 TUTORIAL 2 Introduction to Dreamweaver CS3 In Tutorial 2 you will create a sample site while you practice the following skills with Adobe Dreamweaver CS3: Creating pages based on a built-in CSS page layout Formatting text and color using styles Inserting images Configuring a list Creating hyperlinks Configuring a table The site is for a small vacation cabin rental company called MooseWood Cabins and has three pages as indicated in the site map shown in Figure T2.1. The pages are as follows: index.html (Figure T2.2), cabins.html (Figure T2.3), and reservations.html (Figure T2.4). Figure T2.1 MooseWood Cabins site map T-27

2 T-28 Tutorial 2 Introduction to Dreamweaver CS3 Figure T2.2 MooseWood Cabins index.html Figure T2.3 MooseWood Cabins cabins.html

3 T2.1 Creating a New Dreamweaver Site T-29 Figure T2.4 MooseWood Cabins reservations.html T2.1 Creating a New Dreamweaver Site Tutorial 1 introduced you to creating a new Dreamweaver site. Launch Dreamweaver and define a new site named MooseWood that is located in a folder named moosewood. (Hint: Use the menu bar and select Site Manage Sites.) This should be a review. Creating a Page Now that your MooseWood site is defined, you are ready to create Web pages. In this tutorial you will use a new feature in Dreamweaver to create Web pages based on a built-in CSS page layout. Use the menu bar and select File New to open the New Document dialog box, as shown in Figure T2.5. Select Blank Page HTML 2 column fixed, left sidebar, header and footer. The Doc Type should be set to XHTML 1.0 Transitional. Verify that the Layout CSS option indicates Create New File. This will create an external style sheet that contains the style rules for the page layout. Click the Create button. The Save Style Sheet File As dialog box displays, as shown in Figure T2.6. Verify that the file is being saved in the moosewood folder and name the file moosewood.css. Click Save. A Web page document with a file named untitled-1 displays in the Document window. The document shown in Figure T2.7 contains sample content and uses the CSS page layout you selected in the New Document dialog box. As you create your MooseWood Cabins home page during this tutorial, you ll use this document as a shell replacing the content, adding images, modifying background colors, and configuring text alignment and size. Save the file in your moosewood folder with the name of index.html. (Hint: Use the menu bar, File Save As.)

4 T-30 Tutorial 2 Introduction to Dreamweaver CS3 Figure T2.5 The New Document dialog box Figure T2.6 Save the external style sheet as moosewood.css

5 T2.2 Using Images in Dreamweaver T-31 Figure T2.7 Sample content uses the CSS page layout you selected T2.2 Using Images in Dreamweaver Adding Images to a Site The images used in this tutorial can be found in the student files ( or Copy the files mwlogo.gif (Figure T2.8), home.gif (Figure T2.9), cabins.gif (Figure T2.10), reservations.gif (Figure T2.11), moosewood.jpg (Figure T2.12), mooselake.jpg (Figure T2.13), mooselakesmall.jpg (Figure T2.14), and exterior.jpg (Figure T2.15). Save the files in the moosewood folder. Figure T2.8 mwlogo.gif Figure T2.9 home.gif Figure T2.10 cabins.gif Figure T2.11 reservations.gif

6 T-32 Tutorial 2 Introduction to Dreamweaver CS3 Figure T2.12 moosewood.jpg Figure T2.13 mooselake.jpg Figure T2.14 mooselakesmall.jpg Figure T2.15 exterior.jpg Examine the Files panel for your MooseWood Cabins site. The display should look similar to the sample shown in Figure T2.16. It shows the index.html file and the images for your site. Figure T2.16 The Site panel lists the index.html file and the images Wouldn t a quick visual preview of the images be nice? The Files panel also contains an Assets panel. Display the Assets panel by clicking its tab. Is your Assets panel blank? Click the Images button, as shown in Figure T2.17. Your images should now appear in the Assets panel, as shown in Figure T2.18.

7 T2.2 Using Images in Dreamweaver T-33 Figure T2.17 Selecting to display images in the Assets panel Figure T2.18 The Assets panel Take a moment and click each image name to display its thumbnail image in the Assets panel. It s a good idea to organize your site by placing images and other media into individual folders. Create a new folder called media in your moosewood site. You can use the Files panel for this task. See the View Options icon shown in Figure T2.19. Click this to display a menu of options. Select File New Folder. An untitled folder is added to the site. Rename the folder media and drag each image file to it. When you are done, your local folder list will look similar to the example shown in Figure T2.20. Figure T2.19 Click the View Options icon to display a menu of options Figure T2.20 All the images are now in the media folder Now that you ve got all the images for the site, let s start creating the pages for the MooseWood Cabins site.

8 T-34 Tutorial 2 Introduction to Dreamweaver CS3 Working with Images and Dreamweaver Let s continue to work with Dreamweaver and build the home page for the MooseWood Cabins site. View the sample page shown in Figure T2.2 to see what you will be creating. It looks quite different than the current index.html (Figure T2.7). In previous steps, you created the MooseWood site and added images to it. Your index.html file may still be open in the Document window. If it is not, use the Files panel and double-click the index.html file to display it in the Document window. Configure the page title to be MooseWood Cabins. This should be a review from Tutorial 1. Next, you will add the logo to the page header area. There are a number of ways to insert an image in Dreamweaver. Whichever method you choose, Dreamweaver writes the XHTML for you. The easiest way is to drag the image directly from the Assets panel. Display the Assets panel (_ is the shortcut key) and drag the mwlogo.gif file from the Assets panel to your Document window. Drag the cursor directly in front of the Header text. A second method is to use the menu bar and select Insert Image (see Figure T2.21) to display the Select Image Source dialog box. See Figure T2.22. Then navigate to the media folder and select the mwlogo.gif file. Click OK. Figure T2.21 Using the menu bar to insert an image Figure T2.22 Navigate to your image and click OK

9 T2.2 Using Images in Dreamweaver T-35 A third method is to use the Insert bar (see Figure T1.9 in Tutorial 1) and select the Common category. No matter which method you choose to add the image, Dreamweaver will write the XHTML for you. Next, Dreamweaver will display the Image Tag Accessibility Attributes dialog box to prompt you for the text description of the image. See Figure T2.23. Figure T2.23 Provide accessibility by configuring a text description Notice the Alternate text drop-down box. This configures a text description that can be read by a screen reader, displayed before the image loads, or displayed if images are turned off in the browser. This is one of the accessibility features included in Dreamweaver CS3. Click in the Alternate text area and type MooseWood Cabins. Then click OK. The logo should now be placed on your Web page. Your home page should look similar to the sample shown in Figure T2.24. You ve probably noticed the unnecessary Header text. To remove this text use either the mouse or the arrow keys to highlight the text and press the d key. Save your page by selecting File Save. Figure T2.25 depicts the home page with logo and page title. Figure T2.24 The image has been added to the page

10 T-36 Tutorial 2 Introduction to Dreamweaver CS3 Figure T2.25 The index.html page with page title and logo image Once an image is on a page you can move it and resize it. You also can modify the image properties such as alignment and alternate text using the Property inspector. (Hint: Select Window Properties or press +# to display the Property inspector if it is not visible.) A sample Property inspector is shown in Figure T2.26. Figure T2.26 The Property inspector can configure an image Adding More Images to the Page Refer to the sample index.html page (Figure T2.2) and add the home.gif, cabins.gif, and reservations.gif to the page above the Sidebar 1 Content text. Press e after the reservations.gif. Be sure to configure each with appropriate alternate text. They will be used later as image links. Your page should now look similar to the sample shown in Figure T2.27. By now you should be comfortable with using Dreamweaver to add images to a Web page. The next sections discuss text and image links, configuring the built-in CSS page layout, more text formatting, copyright symbols, and links.

11 T2.3 Creating Hyperlinks with Dreamweaver T-37 Figure T2.27 The index.html page with additional images T2.3 Creating Hyperlinks with Dreamweaver Let s continue to work on the home page of the MooseWood Cabins site and create the hyperlinks for the navigation bar. You will configure the home.gif to link to index.html, the cabins.gif to link to cabins.html, and the reservations.gif to link to reservations.html. Click once on the home.gif to select it. If the Property inspector is not visible, display it by selecting Windows Properties or by pressing the +# keys. Configure the hyperlink to the index.html page. Using the Property inspector, type index.html in the Link text box to create the hyperlink. See Figure T2.28. (Note: If Dreamweaver adds a border to your image hyperlink, use the Property inspector and set the border to 0.) Figure T2.28 Using the Property inspector to configure a hyperlink Another way to configure a hyperlink is to use the menu bar. Click once on reservations.gif to select it. Using the menu bar, select Modify Make Link to display the Select File dialog box, as shown in Figure T2.29. Type reservations.html in the File name text box and click OK. Configure the cabins.gif hyperlink using your choice of these methods. Save your index.html page.

12 T-38 Tutorial 2 Introduction to Dreamweaver CS3 Figure T2.29 The Select File dialog box used to create a hyperlink Text hyperlinks are created similarly. You highlight the text to be the hyperlink and either modify the property inspector or select Modify Make Link from the menu bar. You will create text hyperlinks later in this tutorial as you add more content to the home page. T2.4 Configuring the Built-In CSS Page Layout In this section you will begin to configure the built-in CSS page layout you chose when you created the index.html page. Although you can edit the CSS directly in Code View, in this tutorial you will use the CSS panel. Look in the right-hand panel area for the CSS panel. If the CSS panel is not visible in your Dreamweaver workspace, use the menu bar to select Window CSS Styles to display the panel. Configure the Page Background Let s start by using the CSS panel to configure the background color for the page. As shown in Figure T2.30, verify the All button is selected and click on body to select styles applied to the body HTML element. Next, select the small pencil icon in the lower left-hand corner of the CSS panel to display the CSS Rule Definition dialog box displayed in Figure T2.31. Verify that the Background category is selected. Change the value of the Background color property from # to # Select OK.

13 T2.4 Configuring the Built-In CSS Page Layout T-39 Figure T2.30 The All button makes all styles available to you Figure T2.31 Using CSS to configure the Web page background color Configure the Page Areas The built-in CSS page layout is organized by divisions that each have been assigned to an id. See Figure T2.32 for a display of the finished page with the most important ids and their background colors labeled. You will use the CSS panel to configure these areas.

14 T-40 Tutorial 2 Introduction to Dreamweaver 8 Figure T2.32 CSS configures various areas on the page The Header Area Use the CSS panel to configure the background color for the header id. As shown in Figure T2.33, verify the All button is selected and click on the line that contains the header id (#header) to select styles applied to this area. Next, select the small pencil icon in the lower left-hand corner of the CSS panel to display the CSS Rule Definition dialog box. Verify that the Background category is selected. Change the value of the Background color property from #DDDDDD to #CDBC73. Select OK. Figure T2.33 Select the #header for configuration

15 T2.4 Configuring the Built-In CSS Page Layout T-41 The Container Area In a similar manner, use the CSS panel to configure the background color for the container id to be #F5F5DC. The Sidebar1 Area Use the CSS panel to configure both the background color and the font size for this area. Begin by selecting the Background category and set the background color to #F0E68C but click the Apply button instead of OK. Next, select the Type category and set the font size to small as shown in Figure T2.34. Select OK. Figure T2.34 The Type category configures the font properties The Footer Area Use the CSS panel to configure the background color, font size, and text alignment for the footer area. Begin by selecting the Background category and set the background color to #CDBC73. Select Apply. Next, select the Type category and configure the font size to be small. Select Apply. Finally, select the Block category and set the Text align to center as shown in Figure T2.35. Select OK. The maincontent Area Use the CSS panel to modify the padding at the top of this area. Begin by selecting the Box category and set the Top Padding to 10 pixels as shown in Figure T2.36. Select OK. Save your index.html file. See Figure T2.37 for a screen capture of the home page at this point. You probably have noticed that your page has begun to look more like the sample in Figure T2.2! In the next section you ll begin to really see the page take shape as you add content.

16 T-42 Tutorial 2 Introduction to Dreamweaver 8 Figure T2.35 The Block category configures spacing and alignment properties Figure T2.36 The Box category configures margins and padding

17 T2.5 Adding Content to the Home Page T-43 Figure T2.37 Your home page with the background color and text properties configured T2.5 Adding Content to the Home Page As indicated on the sample home page (Figure T2.2), you need to add an image of a wooded area and some text that describes the amenities of the cabins and surrounding vicinity. With index.html displayed in the Document window, highlight the Main Content text and replace it with: Romantic Country Retreat Highlight the paragraph that begins with Lorem ipsum and delete it. Type the following text, pressing e after each line: Private cabins with fireplaces Hiking, Biking, Fishing Type the following text, pressing the s+e keys after each line. This key combination causes Dreamweaver to code a line break tag. MooseWood Cabins 4000 County Rd 137 Type the following text and press the e key after each line. Moose Lake, MN Enjoy nature in style! Format the MooseWood Cabins text you just added to the page to display in bold font. Highlight the text to select it. Click the B button on the Property inspector as shown in Figure T2.38.

18 T-44 Tutorial 2 Introduction to Dreamweaver 8 Add the moosewood.jpg image to the page and place it to the left of the P in Private. (Hint: Drag the image from the Assets panel or use the Insert bar, Common tab, Image button.) See the sample shown in Figure T2.39. Figure T2.38 Use the Property inspector to configure bold font Figure T2.39 Adding the photo to index.html

19 T2.5 Adding Content to the Home Page T-45 If you re thinking this isn t exactly like the sample, you re correct. There is still more to do. Use the Property inspector to configure the image to be left-aligned. Modify the Align list box to display Left, as shown in Figure T2.40. If your Property inspector does not show the Align list box, click the white triangle at the lower-right corner to show more properties. If the image seems to crowd the text, use the Property inspector and change the H Space (horizontal spacing) to 10. Remember to configure alternate text. Figure T2.40 Setting the image alignment Next, delete the H2 level heading and the paragraph below. Save your index.html file. Test your page in a browser. Your page should look similar to the sample shown in Figure T2.41. Figure T2.41 The index.html page after the photo has been aligned with the text Configuring the Sidebar Highlight the Sidebar1 Content text and replace it with MooseWood Events. Delete the two paragraphs in the sidebar. Type the following text: Join our daily activities: Press the e key.

20 T-46 Tutorial 2 Introduction to Dreamweaver 8 Type the following text, pressing the e key after each line. Guided Nature Walks Birding Expeditions Kayak Tours Sunrise Fishing Trip Press the e key twice to add some empty space at the bottom of the sidebar area. If you compare your page to the sample shown in Figure T2.2, you ll notice that the phrases describing the activities should be in an unordered list. To create an unordered list, highlight the four lines of text describing the activities and select the Unordered List button on the Property inspector (see Figure T2.42). Figure T2.42 The Unordered List button Save the index.html file. Your page should look similar to Figure T2.43. Figure T2.43 The sidebar contains navigation links, a heading, and an unordered list Adding the Page Footer Now you are ready to create the text navigation bar for the home page (see Figure T2.2). Place the cursor on a new line under the content and type the following text:

21 T2.5 Adding Content to the Home Page T-47 Home Cabins Reservations Press the e key. Now configure a text navigation bar by creating hyperlinks. Highlight the Home text and use the Property inspector to create a hyperlink to the index.html page. Also configure a hyperlink from the Cabins text to the cabins.html page and from the Reservations text to the reservations.html page. The copyright, last date updated, and e- mail information should be added to the bottom (footer) of the page. Adding the Copyright Symbol Place your cursor on a blank line under the text navigation bar. Type Copyright. Use the menu bar to add the copyright symbol. Select Insert HTML Special Characters Copyright. See Figure T2.44. Figure T2.44 Finding the copyright symbol After inserting the copyright symbol, type the year and your name. Press s+e to move directly to the next line. Adding the Date Last Updated Type Last Updated: and configure Dreamweaver to generate the date automatically. Select the Common tab on the toolbar, and click the Date button, as shown in Figure T2.45. Figure T2.45 Using the Common tab on the Insert bar to add a date

22 T-48 Tutorial 2 Introduction to Dreamweaver 8 The Insert Date dialog box will display, as shown in Figure T2.46. (Note: You could also use the menu bar and select Insert Date to display the Insert Date dialog box.) Select the type of date format you prefer. Check the Update automatically on save box and Dreamweaver will modify this date each time you update the file. Click OK. Figure T2.46 The Insert Date dialog box Adding the Link Now create the line that will contain the link. Press s+e to move directly to the next line without leaving a blank line. Type Questions? . Using the insert bar, select the Common tab and click the Link button to display the Link dialog box (Figure T2.47). (Note: You could also use the menu bar and select Insert Link to display the Link dialog box.) Figure T2.47 The Link dialog box This dialog box allows you to configure both the text to display for the link and the actual address. Type webdevfoundations@hotmail.com or your own address in both the Text and text box values. Click OK. The bottom portion of your index.html should look similar to the sample shown in Figure T2.48. Figure T2.48 Sample page footer

23 T2.5 Adding Content to the Home Page T-49 Select File Save All to save both your index.html and moosewood.css files. The tutorial continues as you create the cabins.html and reservations.html pages. Adding Pages to the Dreamweaver Site There are a few methods that can be used to add a page to a Dreamweaver site. In the Files panel (* is the shortcut key), select File New File. In the Files panel, right-click the window, and select New File from the pop-up menu. In the menu bar select File New Basic Page OK. However, we are going to create new pages with many of the same characteristics as the home page (index.html). One way to be productive is to display the index.html file in the document window, select File Save As, and save the file with the name of one of the other pages. So let s save a copy of the index.html page with the file name of cabins.html. Display the index.html file in the Document window. Select File Save As, type cabins.html as the file name and click Save. See Figure T2.49. Figure T2.49 Using the Save As dialog box The Document window now displays the cabins.html page, as shown in Figure T2.50.

24 T-50 Tutorial 2 Introduction to Dreamweaver 8 Figure T2.50 cabins.html This is a great time to change the page title to a more descriptive phrase. Either modify the page title directly in the Document toolbar or use the menu bar and select Modify Page Properties. Change the title to MooseWood Cabins :: Country Cabin Rentals. Save the cabins.html file. View the Files panel (see Figure T2.51) and notice that there is a new entry for cabins.html. Figure T2.51 The new cabins.html file is listed in the Site panel T2.6 Adding Content to the Cabins Page View the sample Cabins page (Figure T2.3) to see what the page will look like. Notice that the page header, sidebar, and page footer portions are similar to the home page. You will be changing the content the middle portion of the page.

25 T2.6 Adding Content to the Cabins Page T-51 Replace the text Romantic Country Retreat with Cozy, Warm, and Inviting Delete the moosewood.jpg and the text from the middle part of the Web page, leaving just the page header, sidebar, and footer information. (Hint: To delete an image or text, select the item by highlighting it and then press.) Type the following text (press e where indicated): Our cabins are tucked away in the woods with a view that overlooks Moose Lake. (Press e) Each cabin has all the comforts of home: a great room with a fireplace and satellite TV, modern kitchen, three bedrooms, two baths, and a gas grill. (Press e) Save the cabins.html file. Your page should look similar to the one shown in Figure T2.52. Figure T2.52 Adding content to cabins.htm Next, add the mooselake.jpg image to the page. Drag the image to the page from the Assets panel and place it to the left of the O in Our cabins. Type Moose Lake for the text description in the Image Tag Accessibility dialog box. Use the Property inspector to configure the image to be right-aligned with H Space set to 10. Add an alternate text description for the image. Your page should look similar to the one shown in Figure T2.53.

26 T-52 Tutorial 2 Introduction to Dreamweaver 8 FAQ Figure T2.53 The mooselake.jpg is left-aligned with the first paragraph of text So far, you ve used the technique to save a Web page file with a new name to increase productivity. The tutorial continues as you create the Reservations page and gain experience using tables in Dreamweaver. What about Dreamweaver Templates? Another method used to create additional pages for your site is to save a copy of the index.html page as a template by selecting File Save As Template from the menu bar. To create new pages based on this template, you could use the menu bar and select File New, and then use the Templates tab on the New Document dialog box to choose the template. Using one or more templates can be a great productivity aid on a large site. Experiment with this feature if you are interested. T2.7 Using Tables in Dreamweaver Using a Table on the Reservations Page Use the Save As technique to create the foundation for the reservations.html page. Display the cabins.html file in the Document window and save it as reservations.html. The Document window now displays the reservations.html file. View the sample Reservations page shown in Figure T2.4. The header, side bar, and footer portions are similar to the other pages on the site. The middle portion the content is different. The content on the Reservations page contains a table. Let s get to work on the page.

27 T2.7 Using Tables in Dreamweaver T-53 Change the title of the page to MooseWood Cabins :: Reservations. Replace the text Cozy, Warm, and Inviting with Reservations & Rates Delete the image and text in the middle portion of the Web page, leaving just the header, sidebar, and footer information. You will use Dreamweaver to create a table on the page. Place your cursor on a blank line under Reservations & Rates. There are two ways to add a table to a Web page using Dreamweaver. The method shown in Figure T2.54 is to use the menu bar and select Insert Table. Another method shown in Figure T2.55 is to use the Insert bar. Select the Common category, and click the Table icon. Figure T2.54 Using the menu bar to insert a table Figure T2.55 Using the Insert bar to insert a table Whichever technique you use, the Table dialog box shown in Figure T2.56 will display. This dialog box configures table properties, including the number of rows and columns, border, and width. Set the properties so that the table has four rows, three columns, a width of 410 pixels, a 1 pixel border, cell padding set to 5, and a Top Header. Figure T2.56 The Insert Table dialog box

28 www T-54 Tutorial 2 Introduction to Dreamweaver 8 Configure the Summary as follows: The table lists cabins, weekly rental rates, and special features. Read across the rows for information on each cabin. The table width should be pixels. When you are ready, click OK. Your page should look similar to the one shown in Figure T2.57. Figure T2.57 The reservations.html page with a three-column table The heavy lines mean the table currently is selected. The light lines separate the columns. If you click in the table, you can add text or other content to your page. The thin green lines above the table with the notation of 410 indicate that the table width is taking up 410 pixels. Don t worry, none of the green lines will show when visitors use your page. Save the reservations.html file. Press ' to display the page in a browser to verify. Use Figure T2.58 as a guide and type text in the table. Your page should look similar to the one shown in Figure T2.58. You will notice that it still needs some work. Figure T2.58 The reservations.html page with text entered in the table

29 T2.7 Using Tables in Dreamweaver T-55 Now let s concentrate on formatting the table and table cells. Select the table by using one of the following methods: Place your cursor on the border of the table and click to place heavy lines around the table and select it. Place your cursor anywhere inside the table. Use the menu bar and select Modify Table Select Table. Place your cursor anywhere inside the table. Click the <table> tag in the Tag Selector (Figure T2.59) in the bottom of the Document window to select the table. Right-click the table to display a context-sensitive menu. Choose Table Select Table. Figure T2.59 Using the tag selector Whichever method you chose, the table should now be selected and the Property inspector should look similar to that shown in Figure T2.60. Notice that the Property inspector is dynamic it looks different for each object it is used with. In the display in Figure T2.60, the most common table tag attributes are ready to be configured. Verify that the width is set to 410 pixels, the border is set to 1, and the cell padding is set to 5. Figure T2.60 Using the Property inspector to configure a table Dreamweaver also allows you to configure each table cell separately. Many options, including alignment, row span and column span, width, and border can be configured. You will configure the weekly rental rates to be centered. Click in the table cell in the second row and second column. The Property inspector should look similar to that shown in Figure T2.61. Figure T2.61 Using the Property inspector to examine the properties of a table cell (<td>)

30 T-56 Tutorial 2 Introduction to Dreamweaver 8 Notice the properties specific to cells that are displayed in the lower half of the Property inspector. Modify this so that the horizontal alignment (Horz) is set to Center. Change the horizontal alignment of the remaining two cells in the second column in the same manner. Your page should look similar to the one shown in Figure T2.62. Figure T2.62 The reservations.html page with the table configured Next, you will add the contact information below the table. Position your cursor on the Web page on a line below the table. Type the following text: Reservations: Press the s+e key to move to the next line. Type followed by an link for rates@moosewoodcabins.com. (Hint: refer to Figure T2.47.) Highlight both lines of text and bold them by selecting the Bold button in the Property inspector. Save your reservations.html page. Congratulations, you ve created your first Dreamweaver site using text formatting, images, hyperlinks, a list, and a table! Preview your Web pages in a browser (' is the shortcut key) and test linking back and forth between them. If any of your links don t work or your images are broken, display the Web page in the Document window and verify that your file and image names are correct. Modify, save, and retest the pages if necessary. Exploring Tables in Dreamweaver Summary In this tutorial you learned how to use Dreamweaver to insert images and hyperlinks, lists, and tables. A quick guide to common Dreamweaver tasks is shown in Table T2.1. You should not expect to be a Dreamweaver guru after completing two tutorials. The best way to become comfortable with Dreamweaver (or any software application) is to practice and use it. Try offering your Web development services to friends, family members, and/or coworkers. You will benefit by having a real client to deal with. The other party will benefit from a new site. It s a win-win situation. You have completed Adobe Dreamweaver Tutorial 2!

31 Summary T-57 Table T2.1 Dreamweaver Quick Guide Task New Dreamweaver site Initial Steps Use Windows Explorer (or the operating system) to create a folder for the site. Using the menu bar, select Site Manage Sites New, etc. The following tasks should be done within a Dreamweaver site New page In the menu bar, select File New or in the Files panel, select File New File All tasks below should be done with a Web page displayed in the Document window Change page properties Format text Add a copyright symbol Add an image Add a hyperlink Create a list Create a table Select Modify Page Properties from the menu bar Highlight text and use the Property inspector Use the Insert Bar Text category and select the copyright symbol or use the menu bar and select Insert HTML Special Characters Copyright Copy the image file to your site (use Windows Explorer or FTP); then select Insert Image from the menu bar or open the Assets panel, select the Images button, Refresh button, and drag the image to your page or use the menu bar and select Insert Image Highlight the text or image to be the hyperlink; modify the Link text box in the Property inspector Type the text; press e after each line; highlight the text; click the Ordered List button or Unordered List button in the Property inspector Place the cursor on the Web page where the table should be located; use the menu bar and select Insert Table, then choose options and click OK