Formatting the Home Page
As far as Dreamweaver's Files panel and site manager are concerned, you're already finished with the site. In reality, you still have a lot of work to do, but Dreamweaver is now tracking each of the files that you'll use for the remainder of the project. As a result, you can add hyperlinks using Dreamweaver tools such as Point to File, and be certain that no links are broken.In this task, you'll assemble the home page, which links to each of the site's three main components.
| 1. | Open 212, the file you just saved. |
At this point, 212 has only a page title and the placeholder text, "Body text goes here."
| 2. | In the Files panel, double-click the Text Source folder icon, and open index.txt. |
A plain text document opens in Dreamweaver.[View full size image]

| 3. | Click anywhere in the text, and choose Edit > Select All and then Edit > Copy. Close the text file and return to 212. Drag to select "Body text goes here" in the design half of split view, and choose Edit > Paste Special.... Choose Text with structure and click OK. |
The text is pasted into the document. Dreamweaver creates <p> tag paragraphs for each of the paragraphs in the original text. If Dreamweaver does not create paragraphs, click at the end of each line in the Design pane and press Enter/Return. Some of the paragraphs should actually be headings, but this is a start.[View full size image]

| 4. | In the design half of split view, click once inside each of the following paragraphs and use the Format drop-down of the Property inspector to set each of the following to Heading 2. |
AdminReadingsAssignmentsQuizYou've replaced the <p> tag wrapping each of these paragraphs with an <h2> tag.[View full size image]
Each of these headings appears gray, because the <h2> tag has been redefined using CSS to be gray. Later, you'll see that all the hyperlinks are red; again, this setting was achieved using CSS.| 5. | Still in design view, select the word "Admin" in the body section beneath the Admin heading, and link it to dante_admi227 in the Property inspector. |
To link Admin, you can use the Point to File tool in the Property inspector, you can browse to the file by clicking the folder next to the Link field in the Property inspector, or you can type the name manually.[View full size image]

| 6. | Repeat Step 5 to link the words "interactive tour" (in the Assignments section) to dante_ma229, and the words "take the Dante quiz" (in the Quiz section) to dante_quiz_logi227. |
The home page now works as a navigation interface.You still need to put some finishing touches on the page.[View full size image]

| 7. | Select the three books listed in the Readings section, and use the Property inspector to apply an unordered list. |
Use unordered lists for lists that do not imply any sort of sequence.Each item in the list is wrapped inside an <li> (list item) tag, while all the items as a group are wrapped inside a <ul> (unordered list) tag.[View full size image]

| 8. | Use the Property inspector to apply italics to each of the three book titles listed below. |
Inferno Inferno 2: Commentary Dante: The Divine Comedy Use the <em> (emphasis) tag to add italics.[View full size image]
At this point, you're only missing the button in the line that begins "To complete the assignment," in the Assignments section.| 9. | Place the insertion point at the end of the line that begins "To complete the assignment," and press Enter/Return. |
This creates an empty paragraph just above the Quiz heading.
The image appears in the document, but it is not yet linked to Macromedia's site, where users can download the Flash Player.[View full size image]
| 12. | With the image selected, enter the following URL in the Link field of the Property inspector.
|
Because this link points outside of the Dante site, you'll need to use an absolute URL. As discussed in Lesson 6, Developing Site Content , absolute URLs need to be complete, starting with http:// and containing the full path to the desired page or other resource.[View full size image]

| 13. | Save and close 212. |
You're finished preparing the site. In subsequent lessons, you'll add several interesting pieces of functionality using Flash and ColdFusion.As you develop sites in Dreamweaver, you'll repeat the tasks from this lesson many times, until doing so becomes nearly automatic. The key is to use reusable page elements, in particular Dreamweaver templates and CSS styles. With the templates and CSS styles in place, it's easy to mock up the basics of even large sites very quickly.
