Graphics Programs Reference
In-Depth Information
Add and format
text links and page
content for a Web
site to promote
and market a
small skateboard
company.
Case Problem 1
There are no Data Files needed for this Case Problem.
Moebius Skateboards The Moebius Skateboards team is competing at a local event this
weekend, so Corey wants a basic site ready before the competition. You'll create a sim-
ple text navigation system and add content to the home page of the Moebius Skateboards
site. You will also create and apply styles to the new content, and then export the styles
to an external style sheet for the site. Because you have not yet created the structural ele-
ments that will provide a cleaner page background for the site, the home page content is
not readable. To make the site content legible in time for the coming event, you'll modify
the text formatting, temporarily making the text larger and black. Because you are using
CSS styles, this is simple to do.
1. Open the Moebius Skateboard site you created in Tutorial 2, Case 1, and then open
the index.html page in the Design view.
2. In the All pane of the CSS Styles panel, select all of the existing styles, and then
move the CSS rules to a new external style sheet.
3. Save the new external style sheet as moebius.css in a new folder named stylesheets
that you create in the local root directory of your Moebius Skateboards site. The
styles move from the home page to the new style sheet. Save the home page and the
style sheet.
4. At the top of the home page, type the following navigation text using two nonbreak-
ing spaces before and after each slash: about / boards / team / events / contact .
Press the Enter key to move the insertion point down two lines.
5. Select the navigation text, and then in the CSS Styles panel, click the New CSS Rule
button.
6. In the New CSS Rule dialog box, create a new rule using ID as the selector type,
#nav as the selector name, and moebius.css style sheet as the rule defi nition
location.
7. In the CSS Rule defi nition for #nav in moebius.css dialog box, in the Type category,
change the font size to 16 px. In the Background category, change the background
color to #999. In the Box category, change the fl oat to right. In the Border category,
change the top style to double, change the top width to thin, change the top color
to #66ff33, and then check the three Same for all check boxes, if necessary. If neces-
sary, apply the #nav style to the navigation text.
8. In the home page, if no space appears between the border of the box that surrounds
the text and the beginning of the fi rst word or between the end of the last word and
the border, add a nonbreaking space.
9. Create the following links from the navigation text to the pages that you will create:
about - about.html , boards - boards.html , team - team.html , events - events.html ,
contact - contact.html .
10. Press the Right arrow key until the <p#nav> tag no longer appears in the status bar
(indicating that the insertion point is past the tag in the code), and then press the
Enter key twice to move the insertion point down four lines.
11. Type the following text exactly as shown (including the intentional spelling error),
pressing the Enter key after each line:
Moebius Skateboards
skateboarding is not a style, it is a lifestyle.
Check Out Team Moebius
Members of Team Moebius will be at the Mansfi eld Public Skatepark exhibition
event Wed. Nov. 12th at 5pm. Come join us for a good show and some suprises. . .
Check the spelling of and proofread the text you just typed.
Search WWH ::




Custom Search