Hello, dear friend, you can consult us at any time if you have any questions, add WeChat: daixieit

CS170 – Computer Applications for Business

Assignment 4: Fall 2022

To earn credit for this assignment:

1.   Your zip file must be submitted to Canvas on time.

2.   All work submitted should be your own work and not downloaded from the Internet or written by someone else (in whole or part).

Overview: This assignment is designed to introduce you to creating a multi-page website using HTML5. You will focus on the following concepts:

   Apply styles using CSS code.

   Apply classes to create a menu

   Using the Box model of CSS

You will upload your completed assignment via CANVAS Assignment Tool.  You should read the entire assignment before beginning to do your work.

General Directions and Focus of your Webpage:

1.    Download or view the following pdf file: NetherlandsAssignment4Final.pdf. This is the       intended result of the webpages you are to create.  You will refer to this pdf file to see the required formatting. Your resulting webpages should display the information in the same   format as the pdf file. Note that each page of the pdf will be a separate web page.

2.   To help you get started: Download three HTML files Netherlands4_Main.html,                   Netherlands4_p2.html, Netherlands4_p3.html and three image files                                     netherlandsDemographics.png, nethlandsFlag.png and netherlandsHistory.jpg . You will

CREATE a css file and modify the three HTML files. Some of the required information is in this html file, but no html tags are included. You will do the following:

a.    Place the images in a subfolder (relative to your html files) named images.

b.   Create a css file named netherlands.css.  You will be defining the top navigation and box classes in this file.

i.    Define the box class so that the background color is lighter than the border    color.  You may choose the colors, however, be sure to make the text legible.

ii.   Define the top navigation class so that the active link is a different color than the rest.  You may choose the colors, however, be sure to make the text legible.        The links should NOT highlight when moused over.

iii.   Link this style sheet in the <head> tags of each page.

c.    The header on each page should function as follows:

i.     Home should take the user to the main page.

ii.    Data and Links should take the user to the Data Page

iii.   Famous Artists should appear on the right side of the navigation bar and take the user to the Artists page.

iv.   For each page, the current page link should be highlighted (see sample).

v.    Mousing over other links should not highlight them.

d.   On the main Netherlands page (netherlands4_main.html):

i.     Add a comment with your name and section number within the <head> tags.

ii.    Add a comment with the following statement within the <head> tags: “On my honor, I have neither received nor given any unauthorized assistance on this                assignment.”

iii.   Using the top navigation class defined in the style sheet, create a horizontal navigation bar per part C.

iv.   Using the box class definition, format the text for the geographical data.

e.    On Netherlands4_p2.html

i.     Using the top navigation class defined in the style sheet, create a horizontal navigation bar per part C.

ii.    Add facts to each item

iii.   Add an artist image

iv.   Add the sources you reference below the horizontal rule at the bottom.

f.    On Netherlands4_p3.html

i.     Using the top navigation class defined in the style sheet, create a horizontal navigation bar per part C.

ii.    Find a relevant musician, add an image and 5 bullet points of info, plus an additional bullet point linking to an external page.

iii.   Find a relevant actor, add an image and 5 bullet points of info, plus an additional bullet point linking to an external page.

iv.   Add the sources you reference below the horizontal rule at the bottom.

Once you are done:

    Test to make sure the pages look like the sample and that the links work.

    Then, create a .zip file adding in all the files .

    Read the creating_zip_file.pdf guide if you are unfamiliar with creating zip files.

    Upload the .zip file to Canvas.

References:

   Chapter 4 of the Fluency textbook

   Learning Objectives listed in Week_04_Resources

   NetherlandsAssignment4Final .pdf

   Recitation information