CCT360编程语言讲解、HTML/CSS程序设计辅导、讲解HTML/CSS编程
- 首页 >> Python编程 CCT360
LEARNING FROM A
PROFESSIONAL WEBSITE TO
BUILD YOUR OWN SITE
Design objectives
This projects helps you build skills in organizing,
structuring, labeling, designing and coding web content
for a professional website. In the 1st phase of the project
you will choose a Wikipedia article as the base of your
content, and build a content strategy and Information
Architecture which will inform your interface and
interaction design of your website. In the 2nd phase of
this project you will choose an existing major website
from a Canadian public university or college to learn and
model from, and rebuild the HTML5/CSS3 front-end from
scratch with the Wikipedia article content.
Scope of work
You will select an open Wikipedia information page on
your topic of choice with sufficient volume and
complexity of at least 8 subsections of content. Images
and other media used must be either your own work or
open-licensed and even if you create your own, you
must provide references for all media. Your website
should be comprised of 3 pages:
- Landing homepage (modeled after homepage)
- Inner page (modeled after an inner page of the site)
- Process page (based on overall design of the site)
Your project should include the following preparation
steps, all of which must be reflected in the inner page:
1. IA: Map the Wikipedia content to the Information
Architecture and show it as a Node-Link Tree
diagram that represents the network of content as
provided: research the content and choose the topic
with purpose.
2. Navigation: Identify, clearly label and discuss all
types of navigations for your IA: Structural,
Associative, Utility – explain your design process
3. Major website: Take any Canadian public
university/college website that is suitable for your
content, and that you personally like, and rebuild the
HTML5/CSS3 front-end, on your own, from scratch,
with reference for your Wikipedia article content:
a. Select a website that appropriate for your
content and choose the site carefully
b. Ensure that the homepage and one inner
page is mocked up and your process page
follows a matching template.
c. DO NOT copy code, rather recreate the
design using your own understanding of
wireframes, information architecture, HTML
and CSS. (Copied and pasted code directly
from the model site will not be accepted)
4. Coding and programming: Use HTML/CSS to
develop a finalized standalone website which works
on a recent version of Firefox, Chrome and Safari on
a desktop computer. You are not required to make
the site mobile responsive.
5. Image assets: All image assets should be produced
from downloaded (with permission) assets,
referenced and licensed for use/reuse as discussed
and demonstrated in class, and included in the
packaged website (do not set absolute src attributes
to the image locations with “http://...”)
Submission requirements
1. Final website: A compressed zip file of your
HTML/CSS along with the digital media assets such
as images and documents included in such a way
that the uncompressed file is fully viewable in a local
browser on any computer other than your own
2. References: In-page/in-code/process-page citation
of model website, all photographs or media used
with permission
3. Note: The links to the home/inner pages should
work, however the links to other pages and/or
external pages do not have to work (you can link
them back to the homepage or an “under
construction” page
4. Accessibility and usability: Refer to guides and
lectures discussed in class.
5. Process page design and length: This is
determined by identification of genuine need for
quality design and discussions of details presenting
thinking, planning and execution of the project and
could range between 3-6 pages in length.
6. File formats: The compressed site file must be in
ZIP format and no larger than 25MB.
Learning outcomes
• Apply the foundational process for planning a
standalone professional website
• Demonstrate applied understanding of front-end web
development and design using HTML/CSS
Evaluation criteria includes:
• [20%] Quality of the process presentation and
discussion with rationale for choosing the model
website in relation to the open content, design
decisions, IA and interface design considerations
• [80%] Quality of the matched model website (design
and development); use of proper HTML/CSS
standards-based coding techniques based on
learnings in class; semantic markup and adherence
to best practices of development; organization and
structure of code and assets
Note: A+ is reserved for projects that exceed all criteria,
demonstrating significant effort in going above and
beyond default project requirements.
LEARNING FROM A
PROFESSIONAL WEBSITE TO
BUILD YOUR OWN SITE
Design objectives
This projects helps you build skills in organizing,
structuring, labeling, designing and coding web content
for a professional website. In the 1st phase of the project
you will choose a Wikipedia article as the base of your
content, and build a content strategy and Information
Architecture which will inform your interface and
interaction design of your website. In the 2nd phase of
this project you will choose an existing major website
from a Canadian public university or college to learn and
model from, and rebuild the HTML5/CSS3 front-end from
scratch with the Wikipedia article content.
Scope of work
You will select an open Wikipedia information page on
your topic of choice with sufficient volume and
complexity of at least 8 subsections of content. Images
and other media used must be either your own work or
open-licensed and even if you create your own, you
must provide references for all media. Your website
should be comprised of 3 pages:
- Landing homepage (modeled after homepage)
- Inner page (modeled after an inner page of the site)
- Process page (based on overall design of the site)
Your project should include the following preparation
steps, all of which must be reflected in the inner page:
1. IA: Map the Wikipedia content to the Information
Architecture and show it as a Node-Link Tree
diagram that represents the network of content as
provided: research the content and choose the topic
with purpose.
2. Navigation: Identify, clearly label and discuss all
types of navigations for your IA: Structural,
Associative, Utility – explain your design process
3. Major website: Take any Canadian public
university/college website that is suitable for your
content, and that you personally like, and rebuild the
HTML5/CSS3 front-end, on your own, from scratch,
with reference for your Wikipedia article content:
a. Select a website that appropriate for your
content and choose the site carefully
b. Ensure that the homepage and one inner
page is mocked up and your process page
follows a matching template.
c. DO NOT copy code, rather recreate the
design using your own understanding of
wireframes, information architecture, HTML
and CSS. (Copied and pasted code directly
from the model site will not be accepted)
4. Coding and programming: Use HTML/CSS to
develop a finalized standalone website which works
on a recent version of Firefox, Chrome and Safari on
a desktop computer. You are not required to make
the site mobile responsive.
5. Image assets: All image assets should be produced
from downloaded (with permission) assets,
referenced and licensed for use/reuse as discussed
and demonstrated in class, and included in the
packaged website (do not set absolute src attributes
to the image locations with “http://...”)
Submission requirements
1. Final website: A compressed zip file of your
HTML/CSS along with the digital media assets such
as images and documents included in such a way
that the uncompressed file is fully viewable in a local
browser on any computer other than your own
2. References: In-page/in-code/process-page citation
of model website, all photographs or media used
with permission
3. Note: The links to the home/inner pages should
work, however the links to other pages and/or
external pages do not have to work (you can link
them back to the homepage or an “under
construction” page
4. Accessibility and usability: Refer to guides and
lectures discussed in class.
5. Process page design and length: This is
determined by identification of genuine need for
quality design and discussions of details presenting
thinking, planning and execution of the project and
could range between 3-6 pages in length.
6. File formats: The compressed site file must be in
ZIP format and no larger than 25MB.
Learning outcomes
• Apply the foundational process for planning a
standalone professional website
• Demonstrate applied understanding of front-end web
development and design using HTML/CSS
Evaluation criteria includes:
• [20%] Quality of the process presentation and
discussion with rationale for choosing the model
website in relation to the open content, design
decisions, IA and interface design considerations
• [80%] Quality of the matched model website (design
and development); use of proper HTML/CSS
standards-based coding techniques based on
learnings in class; semantic markup and adherence
to best practices of development; organization and
structure of code and assets
Note: A+ is reserved for projects that exceed all criteria,
demonstrating significant effort in going above and
beyond default project requirements.