HTML and CSS Reference
In-Depth Information
Exploring Web Site Structures
You meet with Gerry to discuss his plans for the CAMshots Web site. Gerry has already
created a prototype for the Web site containing three pages written in HTML5: One page
is the site's home page and contains general information about CAMshots; the second
page contains tips about digital photography; and the third page contains a partial
glossary of photographic terms. The pages are not complete, nor are they linked to one
another. You'll begin your work for Gerry by viewing these fi les in your text editor and
browser.
To view Gerry's Web pages:
◗
1.
Start your text editor, and then open the
hometxt.htm
,
tipstxt.htm
, and
glosstxt.htm
files, located in the tutorial.02\tutorial folder included with your
Data Files.
◗
2.
Within each file, go to the comment section at the top of the file and add
your
name
and
the date
in the space provided.
◗
3.
Save the files as
home.htm
,
tips.htm
, and
glossary.htm
, respectively, in the
tutorial.02\tutorial folder.
◗
4.
Take some time to review the HTML code within each document so that you
understand the structure and content of the files.
◗
5.
Start your Web browser and open the
home.htm
,
tips.htm
, and
glossary.htm
files. Figure 2-1 shows the current layout and appearance of Gerry's three
Web pages.
Figure 2-1
Versions of HTML
home.htm
the CAMshots home
page
tips.htm
the CAMshots tips of the
week
glossary.htm
partial glossary of
photography terms
Gerry wants to create links among the three pages so that users can easily navigate
from one page to another. Before you write code for the links, it's worthwhile to use a
technique known as storyboarding to map out exactly how you want the pages to relate
to each other. A storyboard is a diagram of a Web site's structure, showing all the pages
in the site and indicating how they are linked together. Because Web sites use a variety
of structures, it's important to storyboard your Web site before you start creating your
