APPLIED COMPUTER SCIENCE

ACS- 1809 - 051

Web Design and Development Winter 2019

Assignment 3

Due Date: April 1st, 2020

The assignment carries a total of 100 marks. Please complete the assignment on or before the due date and time noted above. You are to submit your assignment in PDF format and for those assignments that have HTML, CSS and any supporting files; they are to be put into a Zip file.

The name of your file should be named - - – Assignment , e.g. John Doe – 12345 – Assignment 3. Same for both the PDF and Zip file. Note that No assignment will be accepted after the due date and the date/time stamp on the email will be used to determine if the assignment was on time or late.

Email your assignment/report in PDF format to [email protected] by 11:59pm Apr 1 st, 2020. The subject line of your email must be like this: <your student #>< course # with section #>Assignment 3.

1. In your second assignment you build a web site about yourself. Now in this assignment our goal is, using your second assignment as the base, to add the page layout (container) elements to put the home page you created in your last assignment into sections and decorate these sections into different styles. Also you need to apply some box-related properties to each section (division).

A. Divide your starting page (index.html) into at least 4 areas – header, footer, and one
area for your main content as well as another area within the main content area as
indicated in B), which you can use whatever page layout element that is deemed
appropriate.
B. You can put the title, as well as other contents that fit, into the header. In footer you
can put your contact information, and/or other information that fits this area (like
copyright information, etc.). If you did not create such content in your previous

assignment then create them for this assignment. For the rest of the page content you
can place into the main area. Also you need to create one more division within the main
content area (again using whatever page layout element that’s deemed appropriate).
C. For each of these 4 areas, set up different styles. The different styles should include at
least font size, font family, and background color. You may include font color as well.
You should control these styles in the external style sheet created in last assignment.
You should also use the box-related properties to style these areas, to help to improve
the readability of your page. You should use at least those methods adopted in the
mcf.html example regarding give better readability. You should also create a visible
border for at least the extra division created inside the main content area.
D. Preview your site in a web browser and make sure it looks as you designed it.

2. Create another page to set up an ordered list to show all the topics of this course (up to the chapter of using forms), which can be the same as the chapters listed in the course website. Then within each listed item use an unordered list to briefly describe at least 3 concepts, key points of knowledge and etc., that you think the most important in that topic.
3. In the third page you will need to create a table exactly like the one below

The table must use 90% of the width of the web browse window and stay in the middle
horizontally. Vertically it must use up the entire height of the browse window. The color
background must be reasonably close enough to the one used above. The background
pattern file can be downloaded from course website. Don’t forget the proper alignment of
the data either.

4. Your home page/index page should be able to link to the second and the third page, and vice versa.

5. Preview your page in a browser and make sure it looks exactly as your design.

6. Pack every file you use to construct your home page into a zip file and email your assignment in before 11:59pm Apr 1 st, 2020. The subject line of your email must be like this: <your student #>< course # with section #>Assignment 3.