Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Digital Audio, Video > Adobe Flash

Authoring Flash MX Web Pages

  • Print
  • + Share This
This lesson teaches web-building at the page level, marking up a page and making use of different elements, including hyperlinks, style sheets, images, and templates.
This chapter is from the book

In Lesson 1, you worked with the site at the macro level—the 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.

Figure 1Start with a script written in a word processor, add a cascading style sheet and a template, and presto! An attractive page made quickly.


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

APPROXIMATE TIME

This lesson takes approximately 2 hours to complete.

LESSON FILES

Starting Files

Lesson02/Start/circlefinder.html
Lesson02/Start/images/slow_march.jpg
Lesson02/Start/images/button_continue
Lesson02/Start/images/circle_number_1.gif
Lesson02/Start/images/sunset_200.jpg
Lesson02/Start/index.html
Lesson02/Start/quiz.html
Lesson02/Start/start.html
Lesson02/Start/template.html
Lesson02/Start/Text Files/welcome_text.txt
Lesson02/Start/Text Files/virtuous_text.txt
Lesson02/Start/Text Files/circle1_text.txt

Completed Files

Lesson02/Complete/welcome.html
Lesson02/Complete/virtuous.html
Lesson02/Complete/circle1.html

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.

  1. 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.

    Figure 2


  2. Select all of the text, and choose Edit > Copy.

    This copies the text to the clipboard, which makes it available to paste into Dreamweaver.

  3. Open template.html in Dreamweaver, and click in the blank line below the page title.

    You'll paste the text below the page title.

  4. 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.

    Figure 3


  5. 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.

    Figure 4


  • + Share This
  • 🔖 Save To Your Account