|
|
One of the most popular tourist companies, Vacations are Us, wants to expand their tourist business to capture a corner of the market that is becoming increasingly popular, haunted vacations and attractions. They have ask you to create a Web page separate from their home page with a button that links back to Vacations are Us, which is already in existence (http://www.vacationsareus.com). They want to name this branch of their business Haunted Hideaways and Happenings and have laid out the following specifications:
You will get a more in depth description of how this will look as you move through the activities in this lesson.
Introducing Frames/Chapter 5
Different from the simple web design used in Just Plain Stupid, this Web design will utilize frames. Frames are windows appearing within the browser's display area, each capable of displaying the contents of a different HTML file. The layout you will use appears on page 5.6 in your textbook. When planning your frames Web page, you will need to decide which frames will be static-always showing the same content and which frames will change in response to hyperlinks being clicked.
Frame layout is defined using the <FRAMESET> tag. The <FRAMESET> tag in this design replaces the <BODY> tag in a simple page design. The general syntax for this tag in you HTML file is:
<HTML>
<HEAD><TITLE>Page title</TITLE>
</HEAD>
<FRAMESET>
</FRAMESET>
</HTML>
Open your text editor and enter the above HTML code into your document, giving it the title of Haunted Hideaways and Happenings. Save your file as hauntedhideaways.html.
The <FRAMESET> tag has two properties: ROWS and COLS. You choose only one layout for a single <FRAMESET> tag, either rows or columns. You cannot use both properties at once. The syntax for specifying the row or column layout for the <FRAMESET> tag is:
<FRAMESET ROWS="row height, row height, row height,...">
or
<FRAMESET COLS="column width, column width, column width,...">
You can use all three ways of specifying row or column size in a single <FRAMESET> tag. The tag <FRAMESET COLS="160,25%,*"> creates the series of columns, the first column is 160 pixels wide, the second column is 25% of the display area, and the third column covers whatever space is left.
For practical purposes, at least one of the rows or columns of your <FRAMESET> tag should be specified with an asterisk to guarantee that the frames fill up the screen regardless of the user's monitor resolution. You can also include multiple asterisks to specify the display area. For example, the tag <FRAMESET ROWS="*,*,*"> creates three rows of frames with equal heights.
Return to your text editor and go to the <FRAMESET> tag line and edit it to read:
<FRAMESET ROWS="60,*">
Press the Enter key and enter the following code (indent the code three additional spaces):
<!---Company Logo--->
Now you must create a Web page that will display the company logo. First, create the text that will be displayed on this Web page in Flash or Fireworks and export it as a gif file. Create a new file in Notepad and insert this text at the top of your page, making sure to center it. Name your new file head.html. Next, you will create or find a background you will use for the background. Place this background in the body tag, save it, and view it in a browser to see how it looks. If you wish to find a background to use, like the one I used here, go to Yahoo.com and in the search box type the descriptive name "free backgrounds" or "free haunted backgrounds."
Now return to your frames Web page (hauntedhideaways.html) and under the comment line <!---Company Logo---> enter the following HTML code. This is letting the browser know that you want the head.html file to appear in the top frame of the Web page.
<FRAME SRC="head.html">
Save your file then view it in your browser. Remember, this entire page will not be seen, only the top part of the page.
Because a <FRAMESET> tag can include either a ROWS property or a COLS property, but not both, you have to nest <FRAMESET> tags if you want to create a grid of frames on your Web page. The second row of your current frame layout consists of two columns. The first column will display the sections of the United States (Northeast, Southeast, Midwest, West), and the second column will display the the section chosen from the first column with a list of states that contain information of Bed and Breakfast, as well as attractions in that area.
Go to the end of the <FRAME> tag that contains the logo you just inserted, and then press the enter key to create a blank line below it. Type the following code (indent the text three spaces to make the code easier to follow):
<!--- Nest frames --->
<FRAMESET COLS="200,*">
</FRAMESET>
Notice that you have entered another end frameset tag. This is because you must let the browser know that this is where the nested frames end.
Next you'll specify the sources for the two frames in this row. The left frame will contain the sections or regions of the United States, which we will name "sections," and the right frame will contain the home page, which we will name "home.html," which is the visible default page that will be seen when you open your frames Web page. Four other pages will be created that will represent each section. The left frame will be static (will not change) and the right frame will change according to the section you choose in the static frame. Return to your test editor that contains hauntedhideaways.html and enter the following code after the <FRAMESET COLS="200,*"> by pressing the enter key to insert a blank line. On the blank line, insert the following code, indented six spaces:
<!--- Sections of the United States --->
<FRAME SRC="sections.html">
<!--- Links to pages which contain information on Inns and Activities --->
<FRAME SRC="home.html">
You have created the layout of the two additional Web pages needed to complete the frames page, but you have not actually created these two pages. Create a new file in Notepad (be sure to enter the basic HTML codes), and enter the following sections into your document, making sure you enter page breaks where applicable. Choose a background that will enhance your page and be sure to name this file sections. Click here to see how my left frame turned out.
Haunted Bed and
Breakfast Inns:
Home
Northeast
Southeast
Midwest
West
Save your file then load it in your browser. Its beginning to look more like a Web page, however, notice that your logo frames needs to be fixed in order to display the text. At the present time, the text extends beyond the frame border. If all your text is display correctly, click here to see an example of this problem. Continue to follow the directions below even if you don't need to fix your heading.
Before we begin editing the frames properties, return to hauntedhideaways in Notepad and change the <FRAMESET ROWS> tag to reflect 120 pixels instead of 60. This still does not fix the scroll bar problem, so you will have to fix it by controlling the frame's appearance.
Controlling the Appearance of Frames
You can control three properties of a frame's appearance:
the frame's scroll bar
the size of the margin between the source document and the frame border
whether or not the user is allowed to change the frame's width or height
<FRAME SRC=document SCROLLING=value>
Value can be either Yes (to display scroll bars) or NO (to remove scroll bars). If you do not specify the SCROLLING property, no scroll bar will appear unless the content of the frame is not large enough to view the entire frame. This is what has happened in my example listed above.
<FRAME SRC=document MARGINWIDTH=value MARGINHEIGHT=value>
Where value is expressed in pixels. The margin width is the space to the left and right of the frame source. The margin height is the space above and below the frame source. If you do not specify a margin height or width, the browser will assign dimensions based on the content of the frame source.
<FRAME SRC=document NORESIZE>
To fix the problem with your logo, you'll work with the property for controlling scroll bars. Return to your hauntedhideaways text file. Within the <FRAME> tag for the logo frame, enter the property SCROLLING=NO as shown below:
<FRAME SRC="head.html" SCROLLING=NO>
Your next task is to solve the problem of the off-centered logo. To do so, you have to modify the internal margins of the frame.
The margin height for the logo frame is too large and has caused part of the logo's text to be pushed down beyond the frame's border. To fix this problem, you need to specify a smaller margin for the frame. This should cause the logo to move up in the frame and allow the entire text to be displayed. Here, we want to change the margin height (the amount of space in pixels that appears above and below the content of the page in the frame) to move the logo up where all the text will be seen.
Return to the hauntedhideaways.html file in your text editor. Within the <FRAME> tag for the logo frame (the head section), enter the property MARGINHEIGHT=0 after the SCROLLING=NO.
Now you will create your third Web page that will be displayed in the right column.
Create a new text file in Notepad to represent the Home page that will describe the Haunted Bed and Breakfast Inns and a pitch of why you would want to participate in this type of vacation as compared to other vacations. Name this file home.html. You will use your creativity in designing the page, and write a narrative description of why this vacation is a one in a lifetime adventure. Use visual graphics to catch the attention of those paranormal followers (haunted house, lightning, etc.). Remember, people that follow paranormal activities are not into the cult, but into ghost findings. When you are finished designing your page, view it in your browser. Remember, you want the page to fill the right side of your screen. When you get it the way you want it, save it then view it in you Frames Web page (hauntedhideaways.html). You should see it appear in the right frame, if not, make sure you put the home.html in your <FRAME SRC> tag as described in the nesting frames section.
Once you have completed this activity, reload hauntedhideaways.html in your browser to see what your page looks like. We are not finished yet. You will now set margin controls for this frame on your main page. Return to hauntedhideaways.html in Notepad and edit the <FRAME SRC="home.html"> tag to read:
<FRAME SRC="home.html" MARGINHEIGHT=0 MARGINWIDTH=10>
By default, users can resize frame borders in the browser. Many Web authors prefer to make their frames static in size. To do this for the Haunted Hideaways and Happenings page, you have to specify that the frame borders cannot be resized. The syntax for controlling frame resizing is:
<FRAME SRC=document NORESIZE>
Return to your text editor and the hauntedhideaways.html file. Add the property NORESIZE within each of the three <FRAME> tags in the file just before the closing bracket at the end of each line. Save your changes, and then reload the file in your Web browser. Verify that you cannot resize any of the frames.
Creating Your Four Additional Web Page
Next, you will need to assign your four additional Web pages with a name that will distinguish it from each other. The Northeast page will be called nelinks.html, Southeast you will name selinks.html, Midwest, mwlinks.html, and the West page will be assigned the name westlinks.html.
The first web site that will provide you with this information is provided below.
Haunted Bed and Breakfast Listings by Region
First you need to set up the page in which this information will be listed. Type in your basic HTML syntax for a basic Web page and insert a background that match what you already have created in your other two frames. Make sure to align text on the page and use heading size to control the size of your font. After entering this information, go to the web sites listed below to find all the information needed to complete this activity. The following information will be displayed on this page, where name of state is the name of the state in that area that has a Haunted Bed and Breakfast Inn listing. List at least three states and three cities in each region, along with the name of the Bed and Breakfast and any local attractions. Use the following page layout as your guide:
Haunted Inns - Northeast U. S.
Name of State (Name of state located in Northeast U. S.)
Name of city (City located in this region)
Name of Haunted Bed and Breakfast
Name of local attractions in that area, if any
Name of city (Another city located in this region)
Name of Haunted Bed and Breakfast
Name of local attractions in that area, if any
Name of city (Another city located in this region)
Name of Haunted Bed and Breakfast
Name of local attractions in that area, if any
Name of State (Name of state located in Northeast U. S.)
Name of city (City located in this region)
Name of Haunted Bed and Breakfast
Name of local attractions in that area, if any
Name of city (Another city located in this region)
Name of Haunted Bed and Breakfast
Name of local attractions in that area, if any
Name of city (Another city located in this region)
Name of Haunted Bed and Breakfast
Name of local attractions in that area, if any
Name of State (Name of state located in Northeast U. S.)
Name of city (City located in this region)
Name of Haunted Bed and Breakfast
Name of local attractions in that area, if any
Name of city (Another city located in this region)
Name of Haunted Bed and Breakfast
Name of local attractions in that area, if any
Name of city (Another city located in this region)
Name of Haunted Bed and Breakfast
Name of local attractions in that area, if any
Repeat the above page layout with the remaining regions, creating a separate page for each region. Remember to name it as specified above:
Haunted Inns - Southeast U. S.
Haunted Inns - Midwest U. S.
Haunted Inns - West U. S.
Additional Web sites with Haunted Bed and Breakfast Inns and Attractions:
If you need assistants on state belong in which region, click on the links below:
State Regions of the United States Working with Frames
and Hypertext Links Now that you've created the necessary frames and all the
pages associated with the Haunted Hideaways and Happenings Web page, you're
ready to work on the hypertext links on the page. The sections frame contains
five hperlinks: Home Page, Northeast, Southeast, Midwest, and West. When you want to control the behavior of hyperlinks in a
framed framed page, you have to do two things: give each frame on the page a
name and then point each hyperlink to one of those frames. First, decide the
names you will assign to each frame. The frame which contains the logo will
be assigned the name logo, the frame containing the sections will have the assigned
name links, and the frame containing the home page will be given the name documents.
To assign a name to the frame, you need to edit the <FRAME> tag as follows: <FRAME SRC="head.html" SCROLLING=NO MARGINHEIGHT=0
NORESIZE NAME=Logo> <FRAME SRC="sections.html" NORESIZE NAME=Links> <FRAME SRC="home.html" MARGINHEIGHT=0 MARGINWIDTH=10
NORESIZE NAME=Documents> Now that you've named the frames, your next task is to specify
the Documents frame as the target for the Home Page, Northeast, Southeast, Midwest,
and West pages, so that each of these will open in the home page frame. To display a page within a specific frame, you add the TARGET
property to the <A> tag of the hyperlink. The syntax for this property
is: <A HREF=document TARGET=frame_name> where name is the name you've assigned to a frame on your
page. In this case the target name for the frame you need to specify is "Documents."
To insert targets for the links, you have to add the <A> tags in the sections.html
file. Return to the sections.html file in your text editor. Insert
the line <BASE TARGET=Documents> directly above the </HEAD> tag. Next, you need to edit the name of your home and sections
text to include an <A> tag to let the browser know where to go when you
click on that name. You should still have the sections.html file open. Locate
the line that contains the Home listing. Edit it by inserting the <A>
tag as follows: Change: Home To: <A HREF="home.html">Home</A> Continue to add the <A> tag to the rest of the sections,
making sure you add the closing </A> tag at the end of each line. Save
your changes and view it in a browser. Check to make sure your links go to the
right pages. There might be a time you will use Magic Target Names, however,
you will not use it in this activity. To learn more about this feature, turn
to page 5.22 in your textbook. The magic target name is used when you want to
expand you table of contents (which is the sections of the U. S. in this activity). In most cases you do not need to include the <BODY>
tags for pages containing frames. However, if you want your page to be viewed
by browsers that do not support frames, as well as by those that do, you need
to use the <BODY> tags. The difference is that the <BODY> tags must
be placed within a pair of <NOFRAMES> tags. The <NOFRAMES> tag identifies
a section of you HTML file that contains code to be read by frame-blind browsers.
The general syntax for the <NOFRAMES> tag is: <HTML> <HEAD> <TITLE>Page Title</TITLE> </HEAD> <FRAMESET> </FRAMESET> <NOFRAMES> <BODY> </BODY> </NOFRAMES> </HTML> If a browser supports frames, it will ignore everything within
the <NOFRAMES> tags and concentrate solely on the code within the <FRAMESET>
tags. If a browser doesn't support frames receives this code, it doesn't recognize
the <FRAMESET> and <NOFRAMES> tags, so it just ignores them. However
it does know the <BODY> tags on the page and deals only with them. In
this way, both types of browsers are supported within a singe HTML file. In order to accomplish the <NOFRAMES> property, you
must create a non framed version of the same page and place it between the body
tags. For practical purposes, when creating frame Web pages you should create
both. For this particular exercise, you will not need to create a non framed
version. To learn more about tips for using frames, turn to page 5.30 in your
textbook. Netscape Navigator support extensions to the <FRAMES>
tag that allow you to change border size and appearance. To define color for
your frame borders, use the following tags: <FRAMESET BORDERCOLOR=color> or <FRAME BORDERCOLOR=color> where color is either the color name or color value. Enter the BORDERCOLOR property in the <FRAMESET> tag
to change all the frame border colors in a set of frames. Enter the property in the <FRAME> tag to change the
color of a single frame border. To change the width of your frame border , use the tag: <FRAMESET BORDER=value> where value is the width of the border in pixels. You cannot
change the width of individual frame borders. Netscape also supports the ability to change the color of
a frame's border. The BORDERCOLOR property can be applied either to an entire
set of frames (within the <FRAMESET> tag) or to individual frames (within
the <FRAME> tag). The syntax for this property is: <FRAMESET BORDERCOLOR=color> or <FRAME BORDERCOLOR=color> where color is either a color name or a color value. You will now change the color of the logo frame border to
blue. Return to the hautedhideaways.html file in your text editor. Within the
<FRAME> tag for the Logo frame, enter the property BORDERCOLOR=BLUE>.
Save your file and view it in a browser. If you are using Explorer, you will
not see any change. View your page in Netscape to see if your border color has
changed to blue. Netscape Navigator also supports the BORDER property, which
allows you to specify the width of the frame borders. Unlike the BORDERCOLOR
property, this property can be used only in the <FRAMESET> tag, and not
in individual <FRAME> tags. The syntax for the BORDER property is: <FRAMESET BORDER=value> where value is the width of the frame borders in pixels.
To see how this property affects the appearance of your page, and also how your
page would look without frames, you will remove the frame borders by setting
the width to 0 pixels. Return to the hauntedhideaways.html file in your text editor.
Locate the Logo <FRAME> tag and delete the BORDERCOLOR property that you
entered in the previous set of steps. Within the first <FRAMESET> tag,
enter the property BORDER=0. Locate the line that reads <FRAMESET ROWS="60,*">
and before the end bracket, enter the the border property of 0. Save your changes
and reload it in Netscape. Your page should now show no borders. Congratulations Web Master!!! You have just completed a Web
page with frames. 