Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download HTML_exercise4 - Gonzaga University Student Web Server
Document related concepts
Transcript
BMIS235
Professor Chen
Web Design Assignment
NAME: ____________
Due Date: __________
Applying CSS Styles to Webpages for Forward Fitness Club [exercise]
Instructions for exercise HTML#4: html04 (fitness04.html) (exercise: pp. 140-174)
*Do NOT work on the assignment until you complete readings of the text book and powerpoint file.
Read the instructions listed in the HTML text listed on pp.140-174 along with this handout.
Use the work done from html03 (fitness03.html etc.) as the framework to further revise them as stated in (4).
1. Create a new folder of html04 under public_html directory. Next, create additional two folders under html04:
exercise and hw. Finally, create images and css folders under exercise and hw respectively.
a) exercise folder and the associated images and css folders will be used for text book exercise (e.g.,
fitness04.html and others)
b) hw folder and the associated images and css folders will be used for your homework assignment (e.g.,
ski04.html and others)
Therefore, the Web Design Directory Structure for html04 shall be: public_html/html04/exercise (for
fitness04.html) and public_html/html04/hw (for ski04.html) plus images and css folders under each one.
Your Web Page directory structure should be organized as in Figure 2.
2. Download the following (7) data files that were created in html03 (exercise): fitness03.html, about.html,
contact.html, four image files and a new styles sheet, styles.css (the major task for this assignment) from Bb
(available under Assignments Web Assignments and Resources) to your PC or H: drive.
3. Rename fitness03.html to fitness04.html.
4. Modify three *.html files and the styles.css file as follows (and read the text book, pp.140-174):
a) modify three *.html files as shown in Figure 3-a, 3-b, 3-c respectively.
Hints: i) change from fitness03.html to fitness04.html such as file name and those appear in the <nav> tag
ii) add <link rel="stylesheet" href="css/styles.css”> as the css file will manage many features (e.g., visual
effects) on three *.html files
iii) modify <img …> tag
b) Complete the new styles.css as shown in Figure 3-d (partial codes only) and illustrated on pp.153-174 (Hint:
Enter from Line 1 through Line 67 as shown on pp. 159-169) When you done do the followings:
c) upload *.html files and save them to the right folder (i.e., html/public/html04/exercise/
d) upload styles.css and save it in the right folder (html_public/html04/exercise/css/)
e) upload the four image files and save them to the right folder (html_public/html04/exercise/images/)
5. When done, test fitness04.html by entering your URL
(http://barney.gonzaga.edu/~your_userID/html04/exercise/fitness04.html) on the Web Browser. You also
can check the result of your program on the following URL
http://barney.gonzaga.edu/~chenta/html04/exercise/fitness04.html
6. Three sample Web Pages (fitness04.html) are summarized in Figure 1 (also on p.14, Figure 4-1 of the text)
7. It is required to “Validate” and “View” your HTML and CSS codes and debug/correct the code before you
submit the assignment (see HTML pp.67-69, HTML 173 for validating CSS files (note: the URL for validating
CSS is http://jigsaw.w3.org/css-validator/)
8. What/How you should turn in: Fail to provide me with ALL information, you will lose major points:
Notifying your instructor by uploading HTML#4 message (fitness04.html) to the Blackboard. Please note that
you should click “Write Submission” to enable the text editor box. Enter the following information in the “2.
Assignment Submission” window:
Dr. Chen,
Here is my HTML#4 (fitness04.html) assignment.
Make the URL linkable
http://barney.gonzaga.edu/~your_userID/html04/exercise/fitness04.html
<Your Full Name> bmis235-02 (or bmis235-03 or bmis235-05)
so that I can record/grade your homework directly on the Bb.
HTML#4 (exercise); Page-1
Figure 1. Three Major Web Pages for html04 ‘exercise’ (add a styles.css file)
Figure 2. The following is the Web Design Directory Structure for html04 Assignment
HTML#4 (exercise); Page-2
Figure 3-a. A Partial Revised Version of fitness04.html from fitness03.html (for exercise)
<!DOCTYPE html>
<!-- This website template was created by: Student's First Name Student's Last Name
File name: fitness04.html-->
<html lang="en">
<head>
<link rel="stylesheet" href="css/styles.css">
..
</head>
<body>
<div id="container">
<!-- Use the header area for the website name or logo -->
<header>
<a href="fitness04.html"><img src="images/ffc_logo.png" alt="Forward Fitness Club logo" height="275"
width="845"></a>
</header>
<!-- Use the nav area to add hyperlinks to other pages within the website -->
<nav>
<a href="fitness04.html">Home</a>
…
</nav>
…
</div>
…
</body>
</html>
Figure 3-b. A Partial Revised version of about.html (for exercise)
<!DOCTYPE html>
<!-- This website template was created by: Student's First Name Student's Last Name
about.html -->
<html lang="en">
<head>
<link rel="stylesheet" href="css/styles.css">
…
</head>
<body>
<div id="container">
<!-- Use the header area for the website name or logo -->
<header>
<a href="fitness04.html"><img src="images/ffc_logo.png" alt="Forward Fitness Club logo" height="275"
width="845"></a>
</header>
<!-- Use the nav area to add hyperlinks to other pages within the website -->
<nav>
<a href="fitness04.html">Home</a>
…
</nav>
…
</div>
</body>
</html>
HTML#4 (exercise); Page-3
Figure 3-c. A Partial Revised version of contact.html (for exercise)
<!DOCTYPE html>
<!-- This website template was created by: Student's First Name Student's Last Name contact.html -->
<html lang="en">
<head>
<link rel="stylesheet" href="css/styles.css">
…
</head>
<body>
<div id="container">
<!-- Use the header area for the website name or logo -->
<header>
<a href="fitness04.html"><img src="images/ffc_logo.png" alt="Forward Fitness Club logo" height="275"
width="845"></a>
</header>
<!-- Use the nav area to add hyperlinks to other pages within the website -->
<nav>
<a href="fitness04.html">Home</a>
…
</nav>
…
</div>
…
</body>
</html>
Figure 3-d. A Partial Revised version of styles.css (for exercise)
/* Read thoroughly for styles.css from pp. 153-172
(Hint: Enter from Line 1 through Line 67 as shown on pp. 159-169)
This is a major task to learn this assignment. Be patient and careful */
body {
background-color: ; /* Pale Canary color [close to Yellow] */
}
…
…
dd {
padding-bottom: 20px;
}
HTML#4 (exercise); Page-4
