Dazzle the Web with Dynamic Dreamweaver, Part II

Dazzle the Web with Dynamic Dreamweaver, Part II In the second Dreamweaver workshop we will learn the following skills: 1. Adding hyperlinks to our home page 2. Adding images to our home page 3. Creating tables 4. Creating a FAQs page 5. Creating a site map for our website 6. Adding a jump menu Adding a Navigation Bar to our Home Page In this workshop we will create simple, text-based hyperlinks because learning how to design graphic hyperlinks in a program such as Fireworks or Imageready requires more time than we have available for these workshops. First, we will type the text for our link bar, and then we will create the links as follows: 1. Click to the left of the heading on the home page (Make your Web dreams.). Press the Enter key to make a new paragraph, and then press the up arrow key. We will type the text for our navigation bar on this line. 2. Type the vertical bar key and press the space bar. (To type a vertical bar, hold down the Shift key and type the key between the Backspace key and above the Enter key). 3. Type Home Page. Type a vertical bar and press the space bar. 4. Type the other links that will appear on the home page. You do not have to copy mine. After typing each link press the space bar and type a vertical bar. Use any font you wish, but it should the same or compatible with the font you use for the page s text. 32

5. After typing your navigation bar, center it, using the Center button on the Property Inspector. 6. Change the color of the links if you wish, but use a color that is easy to read when displayed on the Web. Figure 29 shows the completed navigation bar. Once again, use the links you want to appear on your website. Do not use blue or red because by default unvisited hyperlinks display in blue, and visited hyperlinks in red. Figure 29: Navigation Bar for Home Page Creating Blank Pages for Website Before we can make the hyperlinks for our navigation bar we have to create the additional web pages for our site. First, we will create blank web pages and copy the navigation bar we created for the home page to each page. To create the new web pages: 1. Select File > New to display the New Document dialog box, as shown in Figure 30. Under Category, select Basic Page, if it is not already selected. Under Basic Page, select HTML, if it is not pre-selected. 33

Figure 30: New Document Dialog Box 2. Click the Create button to display a new blank web page in the Document window. Figure 31 shows the new blank web page. Figure 31: New Blank Web Page Displayed in Document Window 34

3. To save the new web page, select File > Save to display the Save As dialog box. Make certain that you save the new page in the folder you save your home page in. Replace the text in the file name box with the file name of your new page (Ex: plansite). To give your new web page a title, click Modify > Page Properties on the menu and type the page title in the Title box. If you want to change the background color of the web page, do it now. Figure 32 shows the Save As dialog box. Figure 32: Save As Dialog Box 4. Follow steps 1-3 to create the other new web pages for your website. The file names for the pages I created are: plansite.htm, createsite.htm, dwpart2.htm, dwpart2.htm, dwfaqs.htm, and sitemap.htm. (Note: You do not have to type the file extension,.htm; when you save a file Dreamweaver appends it). 35

5. The file names of all the pages in your web site now appear in the Site Panel. If the site Pane does not display, click Window > Site Panel to activate it. See Figure 33 below. Figure 33: Web Pages Displayed in Site Panel Adding Hyperlinks to the Navigation Bar Open the home page if you have closed it. To add the hyperlinks to the navigation bar: 1. Select the text Home Page. 36

2. Click the Browse for File icon which is to the right of the Link box in the Property Inspector. The Select File dialog box appears. Figure 34: Select File Dialog Box 3. In the Select File dialog box click the name of the file (web page) you want to make the link to and click OK. 4. The text-based hyperlink link you just made is now blue and underlined. Deselect it. 37

5. Follow steps 1-3 to make hyperlinks to the other pages of your website. Select only the text of the hyperlink, not the vertical bar! Figure 35 shows the completed navigation bar. Figure 35: Completed Navigation Bar 6. Now we will copy our navigation bar to the other pages of our website. Select the navigation bar, right-click and click Copy on the submenu. Open another web page, right-click and choose Paste to past the navigation bar into that page. Open the other web pages of the site and paste the bar at the top of them also. Save each page after pasting the navigation bar into it. Creating Banners for the Other Web Pages Type a descriptive banner in a font and heading size of your choice for each page of your website. Making a Link to a Named Anchor, or a Different Location on a Web Page Many web pages have a link that visitors can click on to navigate to another location on the same web page. An example is a link at the bottom of a page that, when clicked, moves the cursor to the top of the page. This is referred to as linking to a named anchor. To make a page that moves the cursor from the bottom to the top of our home page complete these steps: 1. Press Ctrl + End to move to the bottom of the home page. 2. Type Top of Page and center this phrase. 3. Place the cursor to the left of the M in the heading that begins Make... 4. Click the Common tab on the Insert bar. Click the Named Anchor button on the Common tab. 38

5. Type the name of the anchor, top, in the Named Anchor text box. A small anchor symbol displays to the left of the M in the word Make in the heading. Figure 36: Named Anchor Text Box 6. Select the phrase Top of Page at the bottom of the web page. Click the Browse for File icon and type #top in the dialog box. Figure 37: Linking to a Named Anchor 39

Linking to another Web Site (External Hyperlink) Let us make a link the ACC home page. Add the text, ACC Home to the navigation bar at the top of the web page. To make a link to ACC s home page: 1. Select the text ACC Home. 2. Type the entire URL of ACC s home page (http://www.austincc.edu) in the Link box of the Property Inspector. This would be a good time to open the home page in the browser and test all the links we have made so far. If you wish, add the ACC home page link to the other web pages you have created. Figure 38: Linking to the ACC Home Page Making an Email Link Another type of link is an email link that opens the user s default email program when clicked. To make an email link: 1. Position the cursor near the bottom of the page and type Email me at: your email address. (Ex: Email me at: jclark@austincc.edu). 2. Select your email address. 3. Type mailto:, followed by your email address in the Link box of the Property Inspector. Again, do not leave any spaces after mailto: and your email address. Refer to Figure 39 below. (Note: When you test this link on a computer at ACC it will probably try to open Microsoft Outlook or Outlook Express, which may not be installed on that computer, so the link may not work). 40

Figure 39: Making an Email Link 41

Adding an Image to Our Home Page In this section of the workshop we are going to insert an image in our home page. I am going to use an image I created in Photoshop that represents my conception of a Native American dreamcatcher, but use any image you like. The three common image formats for Web pages are GIF, JPG (aka JPEG), and PNG. GIF graphics can only display 256 colors, but they have the advantage of being a lossless format; when a GIF is compressed it does not lose any of its resolution. Also, they can be animated. JPG images can display millions of colors and are usually used for photos displayed on the Web. JPG is a lossy format; when they are compressed they lose some of their resolution. The PNG (portable network graphics) format has all the advantages of the other two formats, but older web browsers do not support it. Web graphics created in Macromedia Fireworks are automatically saved as PNG images. Follow these directions to insert a graphic on your home page: 1. If you have not already done so, create a folder named Images inside the site folder and place the images you are going to insert in your web pages inside it. 2. Place the insertion point at the location where you wish to insert the image and select Insert on the menu. The Select Image Source dialog box displays. A preview of the image is displayed in the dialog box. 42

Figure 40: Insert Image Dialog Box 3. Select the filename of the image you want to insert and click OK. 4. To resize the image click anywhere on it to display the sizing handles. Drag the lower-right sizing handle distorting it. to resize the image without 5. To align the image, click it once, and then click the Align Left, Center, or Align Right button. 43

6. You may wish to add a text message that will display when the user moves the mouse over the image. To do that, click inside the Alt box in the Property Inspector and type your message. Open the home page in the browser and view it. Does your alt text appear when you move the mouse over the image? Figure 41: Adding Alternative Text 7. Dreamweaver offers several options for setting the way an image aligns with the page s text. If you would like to align the image so that its top is in line with the first line of text on the page, select it and choose Left on the Align menu in the Property Inspector, as shown in Figure 42. Figure 42: Aligning the Picture with the Page s Text 44

8. Figure 43 shows the dreamcatcher image displayed on the home page in the browser window. Figure 43: Home Page Displayed in Browser 45

Creating Tables for Your Web Pages Introduction to Tables in Dreamweaver Tables are used to organize and control the way content is presented on a web page. They are still often used to lay out web pages, even though cascading style sheets is the technology endorsed by the World Wide Web Consortium (the body that sets standards for the Web). You can either specify the width of a table in pixels or as a percentage of the area inside the browser window. If you want the width of a table to remain fixed regardless of the size of the browser window, specify its width in pixels (example: 800). If you want to allow the width of a table to vary with the size of the browser window, specify its width as a percentage (example: 95%). A few terms associated with tables: Borders The lines around the boundaries of a table and its cells, the areas in which a table s data is stored. Cell padding The number of pixels of blank space between the content in a cell and its boundary. Cell spacing The number of pixels between cells. You do not have to display the table s border or specify cell padding or cell spacing. In this part of the workshop we will recreate the home page using a table to organize the content. Then, we will copy and paste the text from the old home page into the new one. Study Figure 44. It shows the way we will layout our new home page. We will insert a table with six rows. We will divide the third row into two columns and place the image in the left one. The right column will contain the text of the web page. 46

Figure 44: Home Page Table Layout Create a New Home Page and Insert Table To create a new home page and insert a table: 1. Create a new web page (File > New > Basic Page > HTML). Use Modify > Page Properties to change the background to match the background on the original home page. 2. Click the Tables tab on the Insert menu. 47

3. Click the Insert Table button. The Insert Table dialog box displays. 4. Enter the settings shown in Figure 45. Figure 45: Insert Table Dialog Box 5. To center the table on the page, select it and then set Align to Center in the Property Inspector. 6. We will split row 3 into two columns and insert the graphic in the left column. Click anywhere inside row 3 to display a submenu. In the submenu choose Table > Split Cell. 7. When the Split Cell dialog box displays, click the Columns option and specify 2 in the Number of Columns box. Copying and Pasting the Content into the Table Leave the new web page open. If you had closed the original home page, open it. 1. Select the navigation bar at the top of the home page and copy it to the clipboard. Switch to the new page and paste the navigation bar into the top row of the table. (Note: You may have to adjust the width of the table to make the navigation bar fit on one line). 2. Hold down Alt + Tab and switch back to the home page. Copy the banner heading and the anchor symbol to the clipboard. Switch back to the new page and paste them into the second row in the table. Center the heading. 3. We have to insert the graphic in the left cell of the third row. Copy and paste will not work. Choose Insert > Image on the menu, open the 48

folder that holds the image and insert it. Select Align > Top in the Property Inspector to make the picture align with the text you are going to paste into the right cell on this row. 4. Switch back to the original home page. Select and copy the text that begins with Make. and ends with the numbered list. Copy this text into the right column of row 3. (Note: I retyped the list as plain text to improve the appearance of the page). 5. To complete the new home page copy and paste the email link into row 4, the footer (Last Updated ) into row 5, and the Top of Page link into row 6. 6. Open the web page in the browser and test all the links. Return to Dreamweaver. 7. You may wish to display the web page without the table border. To turn off the border click anywhere inside the table. On the menu choose Modify > Table to display the table s Property Inspector. Replace the border setting, 1, with 0. View the page in the browser. 8. When you verify that all the links on the page work and you are pleased with its appearance, save the page as index.htm to replace the original index page. Use Modify > Page Properties to give the page a title you like. 9. Figure 48 shows the new home page displayed in the browser. The table border has been turned off. 49

Figure 46: Completed Home Page Displayed in Browser 50

Creating a FAQs Page Many websites have a Frequently Asked Questions (FAQs) page. We are going to import into our website a Word document that contains links to about twenty websites that answer hundreds of questions people have asked about Dreamweaver. We are then going to paste several sections of the original FAQs page into this page and replace the original FAQs page with this page. 1. Open the web page we created earlier and named dwfaqs.htm. 2. Open Microsoft Word. Open the document named dreamweaverfaqs.doc. Save this document (in a folder other than the one you are saving your web pages in) as a web file named dreamweaverfaqs.htm. 3. On the menu at the top of the screen select File > Import > Word HTML to import the Word document we saved as a web page into our website. Figure 49: Importing Word HTML 51

4. Open the folder you saved dreamweaverfaqs.htm in and click Open. Figure 50: Select File to Import into Dreamweaver 52

5. The next dialog box will ask you if you want to clean up Word HTML. Always select this option. The next message box that will display shows a list of all the unnecessary Word formatting Dreamweaver removed from your document. Figure 51: Cleaning Up Word HTML 6. You have imported the file dreamweaverfaqs.htm into your website, but it will not display in the Site Panel until you save it. 7. We are going to paste some of the information on the dwfaqs.htm web page we have already created into the new page, and then we are going to save the FAQs page we just imported into our website as dwfaqs.htm to replace this file. Delete the heading Dreamweaver FAQs from the document you just imported into the website. Copy and paste the navigation bar and the heading from dwfaqs.htm into dreamweaverfaqs.htm. 8. Using Modify > Page Properties make the page background of the new FAQs page match that of the old one. The hexadecimal code you should use is #CCCCCC. 9. Place the cursor at the end of the last line of text on the new FAQs page and press Enter to leave a blank line. 53

10. Open the home page and copy and paste these items from it to the new FAQs page: The email link The footer (Last updated..) The Top of Page link 11. Save the new FAQs page as dwfaqs.htm, saving over the original dwfaqs.htm file. Open the page in the browser and test a few of the links. Figure 52 shows the top part of the new FAQs page. Figure 52: New Dreamweaver FAQS Page 54

Creating a Site Map for our Website We need to make a distinction between the two types of site maps created by website designers. One type of site map is generated automatically by Dreamweaver (and other programs) when a website is created. It shows the navigation structure of the website. To view the site map that Dreamweaver generated when we built our website, click View on the Site Panel, and then click Site Map. To return to the previous view of the website, click View, and then click Site Files. Figure 53: Viewing the Dreamweaver Site Map The other type of site map is the site map that is often displayed on a website. It helps visitors understand how the content on the site is organized and access various sections of the site. A site map is useful for visitors who are using textonly browsers to surf the Web. They can open all the pages on a site from the site map. This is the type of site map we are going to add to our website. To view the site map on the ACC website, open this link on the Web: http://www.austincc.edu. Click the Text Only Site link at the top of the page. The heading of the page that opens reads Text Only / Site Map. It lists all the major pages on the college s website. Under each page the pages that link to that page and other sites on the Web are listed. On our site map we will list each page on the site and the pages linked to each page. 55

Figure 54: Site Map on ACC Website Open the file sitemap.htm and complete these steps: 1. Place the cursor after the heading Site Map and press Enter. Left-align the next line of text. 2. Open the home page (index.htm). On the first line type Home Page. Press Enter and type the list show in step 3. 3. Under Home Page list these page titles: Planning Website Creating Website Dreamweaver Part II Dreamweaver FAQs Site Map ACC Home Email me at: jclark@austincc.edu. After typing each entry press Shift + Enter to begin a new line without making a blank line. 56

4. Highlight each page title and use the Property Inspector to create the link to each page. (Refer to page 37 of these instructions if you have any questions). Figure 55 shows what our site map looks like at this point. Figure 55: Site Map for Tech Trends Website 5. Leave a blank line under ACC Home and type Planning Your Website. Use the Property Inspector to make a link to this page. 6. Press Enter to make a blank line and type Creating Your Website. Make a link to this page. 7. Leave another blank line and type DW Part II. Make a link to this page. 8. Make a blank line and type DW FAQS. Make a link to that page. 9. Make another blank line and type Site Map. For the sake on consistency you can make a link to this page, but it isn t necessary to link a page to itself. 10. We will use a different procedure to create a link to the ACC home page. Press Enter after you make the link to the Site Map page, but don t type anything. Click Insert on the menu bar. Select Hyperlink and open the Insert Hyperlink dialog box. In the Text box type ACC Home Page. Type http://www.austincc.edu in the Link box. This step is illustrated in Figure 56. 57

Figure 56: Making a Link to the ACC Home Page 11. Save the Site Map page. Open it in the browser and test all the links on it. The completed Site Map page is shown in Figure 57. Figure 57: Completed Site Map Page 58

Adding a Jump Menu to Your Web Page A jump menu contains a group of text hyperlinks that can be used to navigate a website. The user clicks an arrow and selects an item from a list that he or she wishes to navigate to. We will place the jump menu on the Dreamweaver, Part II page. To create the jump menu: 1. Open the page titled Dreamweaver, Part II (dwpartii.htm). Press Enter to leave a blank line after the banner heading. 2. Type Topics Covered in Part II and press Enter. 3. Display the Forms tab on the Insert menu. 4. Click the Jump Menu button to display the Jump Menu dialog box. 5. In the Text field type Adding a Navigation Bar. Click in the When Selected, Go to URL field, click the Browse button, and select addnavbar.htm. Click OK. Check the Insert Go Button After Menu box. 59

Click the plus sign to add the next menu item. 6. In the text box type Adding an Image. Click the Browse button and select the file addimage.htm. Click OK. Click the plus symbol to add the third item. 7. In the text box type Creating Tables. Click the Browse button and select createtables.htm. Click OK. Click the plus sign to add another item. 8. In the text box type Creating a FAQs Page. Click the Browse button and select the file createfaqspage.htm. Click OK. Click the plus symbol. 9. In the text box type Creating a Site Map. Click the Browse button and select the file createsitemap.htm. Click OK. Click the plus sign. 10. In the text box type Adding a Jump Menu. Click the Browse button and select the file addjumpmenu.htm. The menu is finished, so click the OK button to close the dialog box. Figure 59 shows the way the Insert Jump Menu dialog box looks at this point. Figure 60 shows the jump menu you just inserted. Figure 59: Insert Jump Menu Dialog Box 60

Figure 60: Jump menu 11. Save the web page. Open it in the browser and test the jump menu. Congratulations!! You have completed the Weave the Web of Your Dreams with Dreamweaver MX workshops. If you have any questions or comments, call Jimmy D. Clark at 223-4745, or email me at jclark@austincc.edu. If you are at the Northridge campus, please stop by office in Room 1226. My office is inside the Media Center in Building 1000. I work Monday-Friday from 7:00 am until 4:00 pm. 61