Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download BMIS235 CREATING WEB PAGES NAME: ______
Document related concepts
Transcript
BMIS235 Professor Chen Web Design Assignment NAME: ____________ Due Date: __________ Styling Paragraphs, Headings, Lists, and Images for Snow Fever Ski and Board School Instructions for Homework HTML#4: html04 (ski04.html) (Extend YK: pp. 179-181) Do NOT work on the hw until you complete the exercise and readings of the text book and powerpoint file. Read the instructions listed in Extend Your Knowledge (Extend YK): Styling Paragraphs, Headings, Lists, and Images for Snow Fever Ski on p.179-181 1. Create a new folders of html04 under public_html directory. Next, create 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 1. 2. Download four data files, ski04.html, legal.pdf, ski.jpg, and skistyles04.css (the new styles sheet) from Bb (available under Assignments Web Assignments and Resources) and save them in the right folder on your PC or H: drive as shown in Figure 1. 3. Open the ski04.html by right clicking the file then select “Open with” finally choose Notepad++ or simply select “Edit with Notepad++”. A partial template of ski04.html is shown in Figure 2. 4. Modify the following files: a) modify ski04.html with instructions listed on pages 180-181 (steps 1&2 and with minor changes). For example, add/modify two tags of <link … > and <img …> and add class=”clearfloat” to <h3> tag (see steps 2 and 11). When done save/upload both ski04.html and legal.pdf in the same folder (html_public/html04/hw/). b) modify the new styles sheet file, skistyles04.css (Fig. 3 - partial codes only) with the instruction listed on page 180-181 (step 3 to step 19). When you are done upload skistyles04.css in the right folder (html_public/html04/hw/css/). Note that this is the major task for the hw. c) save/upload the image file of ski.jpg in the right folder (html_public/html04/hw/images/). 5. When done, test ski04.html by entering your URL (http://barney.gonzaga.edu/~your_userID/html04/hw/ski04.html) on the Web Browser. You also can check the result of your program on the following URL http://barney.gonzaga.edu/~chenta/html04/hw/ski04.html 6. A sample Web Page (ski04.html) is shown in Figure 4 (also on p.179 – Figures 4-45 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 (ski04.html) to the Blackboard (not via email). See detailed instruction on the document of “Instruction_Web_Assignments_Bb” available on the Bb. Please note that you should click “Write Submission” to enable the text editor box. Enter the following information in the “2. Assignment Submission” window: Make the URL linkable Dr. Chen, Here is my HTML#4 (ski04.html) assignment. http://barney.gonzaga.edu/~your_userID/html04/hw/ski04.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(hw); Page-1 Figure 1. The following is the Web Design Directory Structure for html04 Assignment HTML#4; Page-2 Figure 2. Data file (template - partial) of ski04.html <!DOCTYPE html> <!-- This website template was created by: Student's First Name Student's Last Name File name: ski04.html --> <html> <head> <meta charset="utf-8"> <title>Snow Fever</title> <link rel="stylesheet" href=" " > </head> <body> <div id="outer-wrapper"> <header id="top"> <a href="http://www.breckenridge.com"><img src=" " alt="happy skiers" height="228" width="341" class="rightmargin"></a> <h1>Snow Fever Ski and Board School</h1> <h2>Let it snow, let it snow, let it snow</h2> </header> <nav> <ul> <li><a href="events.html">Events</a> | </li> <li><a href="lessons.html">Lessons</a> | </li> <li><a href="snowreports.html">Snow Reports</a> | </li> <li><a href="employment.html">Employment</a> </li> </ul> </nav> <div id="content"> <h3>Children's Lessons</h3> <p>Children's full day lessons meet from 10am through 3:30pm and include lift access, rentals (ski or snowboard) and lunch… </p> … <h3>Registration</h3> <p>Call or email our Ski School Manager: Kent Hoiberg<br> … </p> Phone: <a href="tel:+18005554754">1-800-555-4SKI</a><br> E-mail: <a href="mailto:[email protected]">Write to Kent</a> </div> <!--end content--> <footer> <p>Our Sponsor: <a href="http://www.snow.com">snow.com</a></p> <p> <a href="#content">Lessons</a> … </p> </footer> </div> <!--end outerwrapper--> <hr> <!-- the following is required for all assignments; more works need to be done --> <i> This document was last updated on: <script type="text/javascript"> document.write(document.lastModified); </script> by Jason Chen(replaced by Your Name) </i></font> </body> </html> This is required for all HTML HWs HTML#4; Page-3 Figure 3. skistyles04.css (partial code only) /* See more instructions listed on page 180-181 (step 3 to step 19) */ body { color: #FFFFFF; background-color: #C9E4FF; font-family: Calibri, sans-serif; } Figure 4. A sample Web Page (ski04.html) – also in Figure 4-45 on page 179 Required for all HTML HWs HTML#4; Page-4
