In Lesson 1, you worked with the site at the macro levelthe site's purpose, structure, and hierarchy; its overall look and feel; and its inherent ease of production. In this lesson, you will switch to the page level, marking up a page and making use of different elements, including hyperlinks, style sheets, images, and templates.
You will also look at the structure of the site's learning interaction, Circlefinder, in which users get to send sinners to circles of Hell, based on Dante's description of it. You will set up a couple pages of that and explore some already provided, but partially built, pages, which will be your fate to complete in Lesson 3.
What You Will Learn
In this lesson, you will:
Mock up a page from a script using HTML and CSS styles
Insert and align an image
Add absolute and relative hyperlinks using three different methods
Title and save the new page
Make preparations for the Circlefinder learning interaction
This lesson takes approximately 2 hours to complete.
Creating a Page Using the Template and a Script
You now have a template, and you are ready to start building pages. In this lesson, you will build the welcome page. Starting from the template you created in the previous lesson, you will insert and format both text and graphics.
Using any word processor, open the welcome_text.txt file, found in the Text Files folder in the Lesson02/Start folder, as well as in the root folder of the Dante site.
This is a plain text file, with no formatting, such as bold, italics, or special font colors, applied. When you copy and paste into Dreamweaver, all word-processor formatting is lost anyway. The screenshot shows the text as it appears in WordPad, the minimalist word processor that ships with Windows.
Select all of the text, and choose Edit > Copy.
This copies the text to the clipboard, which makes it available to paste into Dreamweaver.
Open template.html in Dreamweaver, and click in the blank line below the page title.
You'll paste the text below the page title.
Choose Edit > Paste.
The text appears in Dreamweaver. It is unformatted, but it is all there. If you click inside each line and look in the tag selector, you will see that each paragraph has been separated with a <br> tag. Each of those paragraphs needs to be within a set of <p> tags, though. You can't attach CSS styles to a <br> tag.
Click to place the cursor at the end of each line. Press the Delete key to remove the line break (<br> tag) and then press Return or Enter to create a new paragraph.
This process replaces each <br> tag with a pair of <p></p> tags. By doing so, you both add some space in between each paragraph and make it possible to mark up each paragraph with its own CSS style. In fact, each successive <p> tag automatically receives the bodytext style attribute.