Changing the Color of Links
The Page Properties HTML dialog box provides three options for link colors: Link (the link has not been clicked), Active Link (the link changes color when the user clicks it), and Visited Link (the link has been visited). The default color for a link is blue and a visited link is purple. You easily can make changes to these default settings and select colors that complement the background and other colors you are using on your Web pages. This is accomplished through the Page Properties dialog box. You display the Page Properties dialog box by clicking Modify on the Application bar or by clicking the Page Properties button in the Property inspector and then selecting the Appearance (HTML) option. You then can click the box that corresponds to one of the three types of links (Links, Visited links, and Active links) and select a color to match your color scheme.
Editing and Deleting Links
Web development is a never-ending process. At some point, it will be necessary to edit or delete a link. For instance, an e-mail address may change, a URL to an external link may change, or an existing link may contain an error.
Dreamweaver makes it easy to edit or delete a link. First, select the link or click the link you want to change. The linked document name is displayed in the Link box in the Property inspector. To delete the link without deleting the text on the Web page, delete the text from the Link box in the Property inspector. To edit the link, make the change in the Link box.
A second method to edit or delete a link is to use the context menu. Right-click the link you want to change, and then click Remove Link on the context menu to eliminate the link or click Change Link on the context menu to edit the link. Clicking the URLs icon in the Assets panel displays a list of all absolute and e-mail links within the Web site.
Dreamweaver Views
Dreamweaver provides several ways to look at a document: Design view, Code view, Split view, and Live view. Thus far, you have been working in Design view. As you create and work with documents, Dreamweaver automatically generates the underlying source code. Recall that the source code defines the structure and layout of a Web document by using a variety of tags and attributes. Even though Dreamweaver generates the code, occasions occur that necessitate the tweaking or modifying of code.
Dreamweaver provides several options for viewing and working with source code. You can use Split view to split the Document window so that it displays both Code view and Design view. You can display only Code view in the Document window, or you can open the Code inspector.
Using Code View and Design View
In Split view, you work in a split-screen environment. You can see the design and the code at the same time. When you make a change in Design view, the HTML code also is changed but is not visible in the Document window. You can set word wrapping, display line numbers for the code, highlight invalid HTML code, set syntax coloring for code elements, and set indenting through the View menu’s Code View Options submenu. Viewing the code at this early stage may not seem important, but the more code you learn, the more productive you will become.
Within the HTML source code, tags can be entered in uppercase, lowercase, or a combination of upper- and lowercase. The case of the tags has no effect on how the browser displays the output.
If the code is XHTML compliant, however, all tags are lowercase.XHTML was discussed in the Introduction topic. Therefore, when describing source code tags, this topic uses lowercase letters for tags and attributes to make it easier to differentiate them from the other text and to coordinate with the XHTML standard.
To Use Design View and Code View Simultaneously
The following steps show how to use the Split button to display Code view and Design view at the same time.
Figure 2-72
1
• Click the preserves .htm tab to display that page in the Document window.
• Collapse the panel groups to provide room for Split view.
• Position the insertion point to the left of the heading, Montana National Parks and Preserves.
• Click the Split button on the Document toolbar to display Code view in the left pane and Design view in the right pane (Figure 2-72).
Q&A
What should I do if line numbers do not appear in the Code view pane? o3
Click the Line Numbers button on the vertical Coding toolbar to display the line numbers.
What is the advantage of working in Split view?
Splitting the Document window to view the code makes it easier to view the visual design while you make changes in the source code.
2
• Click the Design button on the Document toolbar to return to Design view.
Modifying Source Code
One of the more common problems within Dreamweaver and the source code relates to line breaks and paragraphs. Occasionally, you inadvertently press the ENTER key or insert a line break and need to remove the tag. Or, you may copy and paste or open a text file that contains unneeded paragraphs or line breaks.
Pressing the BACKSPACE key or DELETE key may return you to the previous line, but does not always delete the line break or paragraph tag within the source code. The deletion of these tags is determined by the position of the insertion point when you press the BACKSPACE or DELETE keys. If the insertion point is still inside the source code, pressing the BACKSPACE key will not delete these tags and your page will not be displayed correctly. When this occurs, the best solution is to delete the tag through Code view.
Live View
Generally, to view a Web page in a browser such as Internet Explorer or Firefox requires that you leave Dreamweaver and open the browser in another window. If the Web designer wants to view the source code, an additional window also needs to be opened. Dreamweaver’s Live view feature, however, allows you to preview how the page will look in a browser without leaving Dreamweaver. If you want to view and modify code, you can do so through a split screen; and the changes to the code are reflected instantly in the rendered display.
To Use Live View
In the following steps, you switch to Live view.
1
• Click the Live View button on the Document toolbar to view the page as it would appear in the browser and to verify that the line spacing is correct and that the document is properly formatted (Figure 2-73).
Figure 2-73
2
• Click the Live View button to return to Design view and make any necessary corrections. If necessary, click the Save button.
Quitting Dreamweaver
After you add pages to your Web site, including images and links, and then view your pages in a browser.
To Close the Web Site and Quit Dreamweaver
The following steps show how to close the Web site, quit Dreamweaver, and return control to Windows.
Click the Close button on the right corner of the Dreamweaver title bar to close the Dreamweaver window, the Document window, and the Montana Parks Web site.
Click the Yes button if a prompt is displayed indicating that you need to save changes.
Summary
You began the topic by copying data files to the local site. You added two new pages, one for Lewis and Clark National Historical Trail and one for Montana National Parks and Preserves.Next, you added images to the index page. Following that, you added a background image and page images to the two new pages. Then, you added relative links to all three pages. You added an e-mail link to the index page and absolute links to the Montana National Parks and Preserves and Lewis and Clark National Historical Trail pages. Finally, you learned how to view source code. The items listed below include all the new Dreamweaver skills you have learned in this topic.
1. Create the Montana National Parks and Preserves Web Page (DW 109)
2. Create the Lewis and Clark National Historical Trail Web Page (DW 112)
3. Set Invisible Element Preferences and Turn on Visual Aids (DW 119)
4. Open a Web Page from a Local Web Site (DW 123)
5. Insert an Image into the Index Page (DW 124)
6. Align an Image (DW 128)
7. Adjust the Image Size and the Horizontal Space (DW 130)
8. To Insert the Second Image (DW 131)
10. Crop and Modify the Brightness/Contrast of an Image (DW 142)
11. Add Text for Relative Links (DW 147)
12. Create a Relative Link Using Point to File (DW 148)
13. Create a Relative Link Using the Context Menu (DW 150)
14. Create a Relative Link to the Home Page (DW 153)
15. Create Absolute Links (DW 155)
16. Add an E-Mail Link (DW 156)
17. Use Design View and Code View Simultaneously (DW 160)
18. Use Live View (DW 161)
Learn It Online
Test your knowledge of topic content and key terms.
Instructions: To complete the Learn It Online exercises, start your browser, click the Address bar, and then enter the Web address scsite.com/dwCS5/leam. When the Dreamweaver CS5 Learn It Online page is displayed, click the link for the exercise you want to complete and then read the instructions.
Reinforcement TF, MC, and SA
A series of true/false, multiple choice, and short answer questions that test your knowledge of the topic content.
Flash Cards
An interactive learning environment where you identify topic key terms associated with displayed definitions.
Practice Test
A series of multiple choice questions that test your knowledge of topic content and key terms.
Who Wants to Be a Computer Genius?
An interactive game that challenges your knowledge of topic content in the style of a television quiz show.
Wheel of Terms
An interactive game that challenges your knowledge of topic key terms in the style of the television show Wheel of Fortune.
Crossword Puzzle Challenge
A crossword puzzle that challenges your knowledge of key terms presented in the topic.
Adding, Aligning, and Resizing an Image on a Web Page
Instructions: In this activity, you modify a Web page by adding, aligning, and resizing an image (Figure 2-74).See the inside back cover of this topic for instructions on downloading the Data Files for Students, or contact your instructor for information about accessing the required files.
Figure 2-74
Perform the following tasks:
1. Use Windows Computer or Windows Explorer to copy the school_house.jpg image from the Chapter02\apply data files folder into the images folder for your Apply Exercises local Web site. (For example, the images folder might be stored on H:\edwardsd\apply\images.)
2. Start Dreamweaver, and then open the Apply Exercises site.
3. Open the apply.htm file.
4. Insert a new blank line after the “Chamberlain Academy” heading by clicking at the end of the heading and then pressing the enter key.
5. Display the Assets panel, and then click the Refresh Site List button at the bottom of the panel, if necessary, to display the images. Select the school_house.jpg image, and then drag it to the insertion point on the new blank line.
6. Type the following text in the Image Tag Accessibility Attributes text box: school. Click the OK button.
7. If necessary, select the image. Double-click the W text box and type 2 5 0. Double-click the H text box, type 2 0 0, and then press the enter key.
8. Use the Align button to align the image to the middle of the line.
9. Use the Format menu to center all of the text on the page.
10. Save your document and then view it in your browser. Submit it in the format specified by your instructor.
