- Creating a Page Using the Template and a Script
- Formatting the Page with CSS
- Adding and Aligning an Image
- Adding Hyperlinks
- Naming and Saving the Page
- Introducing the Branching Circlefinder Interaction
- Exploring the Prepared Files
- Creating the Virtuous File
- Creating the Circle 1 File
- What You Have Learned
Creating the Virtuous File
In this task, you will create, using your handy template, the missing circle 1 and virtuous files. Again, the source text for these is found in the Text Files folder in the site.
Open virtuous_text.txt, located in the Text Files folder, in any word processor and copy all of the text.
Unless you can concentrate on 20 things at once, it is often more productive to write scripts in a word processor before designing the site. That way, when you design the site, you can focus on technology and visuals.
In Dreamweaver, open template.html, and choose File > Save As, and save the file as virtuous.html.
Always save under the new name before you start working, or you will almost certainly end up accidentally overwriting your template.
Type Circlefinder: Virtuous Pagan over the placeholder "Page Title" text.
Give a descriptive title to every page. It's convenient that when you type over the dummy text the style remains, a tribute to the efficiency of CSS.
Click in the space beneath the title, and choose Edit > Paste.
The text appears as you expected. Only the first line, "Minos Says...", retains the CSS formatting.
Click the "The soul has neither" paragraph, select its <p> tag in the tag selector, and choose bodytext from the CSS Styles panel.
This drill should be familiar by now, and when you are done, you are rewarded with nicely formatted body text.
Click the "Minos Says..." paragraph, select its <p> tag in the tag selector, and choose the heading2 style from the CSS Styles panel.
You are an expert at applying CSS styles now. From now on, rather than providing instructions that are this explicit, I will tell you to "apply the X style to paragraph Y," so remember the business about the tag selector!
With your cursor placed after the last bit of text, hit Return/Enter to create a new paragraph.
Unlike the incontinent and malicious pages that sit at the same level as this page, virtuous does not have any decisions: Virtuous pagans all go to Limbo, no further questions asked. Thus, rather than a true branching structure, this page simply connects to the circle 1 page.
Type Go to Limbo, applying, if necessary, the bodytext style to it, and link it to circle1.html.
Since circle1.html doesn't yet exist, there is no recourse but to type this filename directly into the Link field of the Property inspector.
With the cursor just after the "Go to Limbo" text (but still in the same line), insert the image button_continue from the images folder.
The graphic isn't necessary, since users can click on the text link, but the graphic is clearer about what the user should do.
With the image still selected, type circle1.html in the Link field of the Property inspector. Still in the Property inspector, enter 0 in the Border field.
You can add links to images just as easily as you can to text. Take advantage of this, as users love to click images.
Hyperlinked images appear by default with borders around them to indicate that they are clickable. The red arrow in this instance is self-explanatory, so the default border is redundant and ugly. Setting it to 0 hides the border.
Title the page Circlefinder: Virtuous Pagans, and when finished, save and close the file.
"Untitled Document" doesn't look good in search engines, so give all of your pages descriptive titles.