- 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 Circle 1 File
In this task, you will create the circle.html file. You have been over every part of its creation in this chapter. To make a game of this, I provide only the most general directions. If you forget how to do something, look at the directions from earlier sections of this lesson. Good luck!
Set up the page by entering Circle 1: Limbo in place of the placeholder title and copy and paste in the text from circle1_text.txt (found in the Text Files folder), applying the heading2 style to "Minos Says..." and the bodytext style to the rest.
When you are finished, your page should look just like the one in the screenshot. In most cases, importing and formatting the main text first makes everything else a bit easier.
Insert the image named circle_number_1.gif beside the title, and set its alignment to Absolute Middle.
This provides some needed decoration to the page title. All nine of the circles have an image like this to help users identify which level they are on.
Insert the image named sunset_200.jpg, so that its top is the same height as "Minos Says" and it is flush-right against the right margin.
Make sure you put the image in the right place! Consult the screenshot to be sure.
Select the word "Aristotle" in the last paragraph, and click the Bold icon in the Property inspector.
Bolding Aristotle makes it easier for those using this interaction to find out if they put the sinners in their proper places.
Add a new line of text at the bottom that reads Dante Unit Home | Circlefinder Start. Make the first half link to index.html and the second half to start.html. Use the Property inspector to center this line.
The | character is above the \ (backslash) key on most keyboards. Because this is a dead-end page, it is nice to give users a choice about where to go to next.
Add another line beneath, also centered, that says Photograph © PhotoDisc.
To make the copyright symbol, choose Insert > Special Characters > Copyright.
This line is especially important, because if I hadn't put it there, I could be sued. Your final version of this file should look like the one in the figure.
Title the page Circlefinder: Limbo and save it as circle1.html.
Whew! Marking up pages is a lot of work, even when you operate efficiently with cascading style sheets and templates.