Assignment 2: Build a website about a minority ethnic group of China
Assignment 2
This assignment should be done in a group of no more than five students. You are required to build a website about a minority ethnic group of China.
The suggested website hierarchy is shown below for your reference (If you’re a 5-member group, for example):
Figure 1 Website Hierarchy
Among them, C1 to C5 are personal webpages, which are developed by each member himself, and the above ones are public webpages co-developed by the whole group.
The minimum requirements of webpages are specified below.
❖ Overall style:
- All the webpages should have a same or similar layout using an invisible table, you can refer to
HTML and CSS Exercise.
- Navigation bar should display in the same position of EACH public webpage and use the same style.
- Navigation bar can work and link to all the public webpages (index.html, aboutMe.html, traits.html and customs.html).
- A logo(logo.png) given with the requirement, should display in the same position of EACH public webpage with a same size.
- The logo should be inserted as a background image.
❖ Homepage (index.html)
- Brief introduction of a Chinese minority ethnic group (50 - 100 words).
- At least one large picture which can represent the minority ethnic group that you selected.
- At least two items of ordered lists to show the names using Pinyin of famous men or women in this ethnic group
- At least one Hyper link, which is the deeds introduction of the famous men or women, inserted to their names.
❖ About Us (aboutUs.html)
- Something interesting about you and/or why you’d like to introduce this minority ethnic group (50 – 100 words).
- Personal details –your name, your student ID, a photo of yourself, UIC email, major, etc.
- Link to your favorite websites – (use of external link).
❖ Traits (traits.html)
-
List at least 3 ethnic traits (such as clothes, food, architecture, etc.) of the minority ethnic group.
-
Use a visible table to display the information about the ethnic traits.
-
Display in the top row(merged) the title “Traits of the Minority Ethnic Group”.
-
Display the name of each trait in Column One.
-
Display a photograph of each trait in Column Two.
-
Display the brief description of the trait in Column Three.
-
Ensure all images are the same size using external CSS.
❖ Customs (customs.html & C1.html – C5.html)
▪ customs.html o Brief introduction of C1 to C5 (no more than 50 words for each). o Use the names of customs as the subtitles, and insert exactly one picture and a brief description to each custom. The subtitles should be organized with the same tag. For example, you can use \
\
for all the five subtitles. o Use a same font-size but different font colors to decorate the names of customs. o Each custom picture should link to the corresponding webpage from C1.html to C5.html▪ C1.html – C5.html o Developed by each member himself, you should ensure that the topic you introduced is different from the others. o Don’t show the logo or navigation bar in the webpage. o Detailed description of the custom you selected (50 - 100 words). o Insert at least two pictures related to support your description. o Insert a light-color picture downloaded from the Internet, to your webpage as the background image. You should ensure that the background image is different from the other group members. And you should ensure that the background image won’t shade the text and the pictures(不会遮挡文字和图片). o Use at least one of the three properties of CSS, padding, border and margin, to control the page margins of your webpage. o Insert a border to the whole webpage using dashed-line style. o At least three items of unordered lists should be used to present the features of the custom. The lists should be organized under a same pair of
❖ CSS
▪ For public webpages (index.html, aboutUs.html, traits.html and customs.html), o ALL general styling should be defined in exactly one external style file ourStyle.css o You are NOT allowed to use inline or internal CSS code. ▪ For personal webpages (C1.html – C5.html), o For each member, you should use your own external style file named 1234567890.css to decorate your webpage. “1234567890” should be replaced by your own student ID. o You are NOT allowed to use inline or internal CSS code.
❖ File placement
All the webpage-related files you created (.html and .css files) or used (pictures) should be uploaded to stuweb of our school. For example, you are a 5-member group, and Student A is the group leader, and Student B, C, D and E are ordinary group members. You should upload your files as described in the following table.
❖ Group_xx.docx
Modify “Group_xx.docx” as required, then upload this file to iSpace by the leader ONLY. Note: All of the webpages-related files should be uploaded to stuweb. What needs to upload to iSpace is ONLY the file “Group_xx.docx”, and this file can be uploaded by the leader ONLY.
❖ Submission Notes
- All your webpages will be viewed in Google Chrome or Firefox browsers for grading. You must check your deliverables on Chrome and Firefox via the address link http://stuweb.uic.edu.hk/~1234567890/*.html (1234567890 and * should be replaced accordingly). If nothing can be shown via the link given, related item will be ZERO.
- To create the website, you may use a text editor (Notepad / Sublime-Text / Notepad++ / etc.). You are NOT allowed to copy a whole web site from any other source or use a webpage generator (we will check your source code to verify).
- File names should NOT contain spaces or Chinese characters.
- External CSS ONLY.
- Pay attention to the deadline for the assignment. Make sure you submit all files to correct places and before the deadline. Late submission without a documented legitimate reason means ZERO marks.
- All the files except “Group_xx.docx” must be written in English ONLY.
- If you have any questions, try to find the answer using a search engine (Google/Baidu/etc.) first.
