CS170 – Computer Applications for Business

Assignment 4

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:

● Download or view the following pdf file: Spain4Final.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 web pages 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. You will be using the files you created on the last assignment and building upon your

work. You will need to CREATE a css file, create a NEW html page and modify your existing three HTML files. Make a copy of your existing files and rename them

Spain4Main.html, Spain4Catalonia.html and Spain4CanaryIslands.html. You will do the following:

a. Create a css file named Spain.css. You will be defining the background color,

top navigation and box classes in this file.

i. Define the body so each page has a background color (a light, readable color)

ii. Define the box class so that the background color is lighter than the border color. ?You must choose a new color scheme, making sure to make the text legible.

iii. Define the top navigation class so that the active link is a different color

than the rest. You must choose a new color scheme, making sure to make the text legible. ?The links should NOT highlight when moused over.

iv. Link this style sheet in the tags of each page.

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

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

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

iii. Catalonia, Canary Islands, and Andalusia should appear on the right side of

the navigation bar. ?Andalusia should take the user to the Andalusia page (see part e)

iv. Mousing over other links should not highlight them.

c. On the main Spain page (Spain4Main.html):

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

ii. Add a comment with the following statement within the 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 B.

iv. Update the page, checking Spain4Final.pdf for changes on alignment and text.

d. On Spain4Catalonia.html and Spain4CanaryIslands.html

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

ii. Update the header formatting.

iii. Using the box class definition, format the rules paragraph

e. Create a new html file named Spain4Andalusia.html. ?Find appropriate text to add to this page, per the sample file Spain4Final.pdf.

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

ii. Link image of a tourist attraction in Andalusia

iii. Add a paragraph providing information about the attraction pictured in the image you found. ?Using the box class definition, format the paragraph

iv. Add a table listing six fast facts about Andalusia: the first three should be population, area, and location (in that order).

v. Add a link to an additional source of information

vi. Add the source(s) 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

● Spain4Final.pdf

● Recitation information