Macromedia Studio 8 [Electronic resources] : Training from the Source نسخه متنی

Building the Site Using a Template

Lesson 5,

Developing a Page Template , and populate the content by importing prewritten content from several text files. To save typing time, we've included the text for the three pages in the text_files subfolder within the jade_valley site. It's accessible from within Dreamweaver.

The remaining pages for the site have been created for you. You will bring them into your Web folder later in this task.

The New Document dialog provides a convenient way to create a new page based on a template from any of your sites.

Take a few moments to examine the new document that's now available in the Document window. Try clicking the navigation bar, the logo, the yellow anchor link icon, the text-based navigation aid, and the footer. You'll notice that you can't select or modify them; these elements are in the template's locked region and can't be altered on any page. The only sections you can modify are the areas of the template you designated as editable regions: the two content columns on the page. Later in this lesson you'll learn how to change page elements that are in the locked regions.

[View full size image]

Note

Dreamweaver displays the template file in a box with a yellow border. A light-blue box with a blue label at the top-left corner surrounds the editable regions. You can customize these colors by choosing Edit > Preferences > Highlighting.

Even though the title of the page doesn't appear anywhere in the document area, it's important. It gives the page an identity, and appears in the browser title bar, search engine listings, and on pages you print.

About.txt is a plain text file, without formatting applied, such as bold, italics, or special font colors. When you copy and paste the file into Dreamweaver, all the word processor formatting is lost anyway. The figure shows the text as it appears in Notepad, the minimalist word processor that ships with Windows.

[View full size image]

In this step, you're copying all the text to the Clipboard, making it available to paste into Dreamweaver.

You're about to replace all the placeholder text with the text on the Clipboard.

The text appears in Dreamweaver. If you click inside each line and look in the Tag selector, you will see that each paragraph has been marked with the <p> tag.

[View full size image]

Selecting Heading 1 from the Property inspector replaces the default <p> tag with an <h1> tag, which you can see if you look in the code. Changing the markup to <h1> makes the heading more prominent. Because the <h1> tag has been redefined in the cascading style sheet (CSS), it becomes large and red.

[View full size image]

Note

By default, Dreamweaver may try to append l rather than . The navigation bar you created in Fireworks used , rather than l, so make sure you stick with .

The new about page now appears in the Files panel.

You now have three new pages for the Jade Valley Web site. The site actually has seven pages, including the home page. In the next step, you'll copy the other three premade pages from the Start folder to your folder.

Tip

In addition to using the New Document dialog to create a new document based on a template, you can also use the Assets panel. In the Assets panel (Window > Assets), click the Templates icon on the left to view the list of templates in your site. Right-click (Windows) or Control-click (Macintosh) the template you want to use as the source for the new document, and from the context menu, choose New from Template.

You now have all six pages needed for the Jade Valley Web site. Click the Refresh button in the Site folder if necessary to see the files.

These three predeveloped pages contain all the necessary images and content for a particular section of the Web site. Take a few minutes to explore these new additions and learn more about the site you're developing.

[View full size image]

When you work on a CSS file using the CSS Styles panel, Dreamweaver opens it in the background, providing you direct access to its code. You didn't work on its code directly; you modified it through Dreamweaver's interface.