Hong Kong Shue Yan University

Course Title : Web Page Development

Course Code : Comp204

Year of Study : 2

Number of Academic Credits : 3 credits

Number of QF Credits : 12 credits

Duration in Weeks : 15 weeks

Contact Hours Per Week : (Lecture): 1 hour (Workshop): 2 hours

Medium of Instruction : English, supplementary with Chinese

Pre-requisite(s) : Nil

Course Aims
This course aims to build students’ abilities to develop professional looking web sites on the World
Wide Web. Students would have developed confidence and practical skills in the usage of the
most popular web authoring software – Dreamweaver as well as other related software such as
Widget and Exchange. Student would review the basic structure of building up a web page –
HTML, compare and contrast the most prevalent web page browsers, evaluate and analyse the pros
and cons of some common web sites. Making use of the skills and techniques learnt in class,
students can generate an individual electronic portfolio web site.

Course Outcomes, Teaching Activities, Assessment and QF Credits

Course Intended Learning Outcomes (CILOs)

Upon completion of this course students should be able to:

CILO1 set up and maintain web sites using the most popular web authoring software;

CILO2 present information effectively using HTML, styles, tables, links, anchors and
multimedia;

CILO3 compare and contrast different web site layouts using division and template;

CILO4 apply different formatting tools such as cascading style sheets, layer, behaviors,
absolute positioning to web pages;

CILO5 publish and update well-developed web sites from local drive to remote site;
1
 Lectures & Workshops
Various concepts and methods of building up a web site are to be explained during
TLA1
lectures while workshops are used to demonstrate the related procedures. Hypothetical
examples are used for elaboration and illustrations of the relevant working processes.

Class Assignments
Class assignments are designed to enhance students’ learning and reinforce the skills
learnt in class. Sample screen outputs and working instructions are given in the class
assignments and students are required to finish them within time limits on their own.
TLA2
Students can refer to any resources (e.g. books & notes) to complete them. Detailed
marking schemes are used to mark the class assignments and discussion about how to
finish the assignment would be followed for sharing ideas, exchanging opinions and
searching for better working alternatives.

Individual Project
Students are required to build up an individual electronic portfolio web site to be
published in the University’s server. The content must include personal particular, self-
reflection, beliefs of being a learner and how class performances related to the beliefs.
Other content may include academic-related (e.g. educational background, public
TLA3
examination results, extra-curricular activities) and personal-related (traveling and
working experience, interests and hobbies, dream and expectation) information. Students
have to provide evidences for all the information provided. Students need to complete
part of the project each week as class activities so that in the last two weeks, they can
synthesis all the previous work as a finalized project.

Final Examination
TLA4 At the end of the course, a hand-on examination will be carried out to consolidate the
knowledge learnt in this course by creating and modifying a website according to the
instruction given.

Assessment Tasks (ATs) Group Individual

Class Assignments
To keep students’ continuous learning and assess their study
progress, three in-class assignments will be conducted at regular
AT1 interval. These assessments can assist lecturers to measure the 30%
learning progress of students and to determine whether students
are able to master major concepts and skills. The class
assignments require students to create and modify website within a
limited period of time. Students may refer to any learning material
 but they have to work out the website on their own.

The three class assignments are standalone websites with different

focuses. The first one aims to create a single web page using
simple HTML codes. Proper structure of a standard HTML
document must be followed. The second assignment requires the
students to work on a web site with 2 pages using Dreamweaver.
The focuses on this class assignment are tables, images, hyperlinks
and anchors. The last one is to lay out a web site using
Dreamweaver. The focuses on this class assignment are division,
behaviors and transition.

Class Participation
Students are expected to actively participate in discussion,
demonstration and class activities both during the class and online.
AT2 They are also needed to attend each lesson and complete weekly 10%
exercise in the computer laboratory. Mobile apps such as
Socrative and WhatsApp will be used to get instant responses from
students.

Individual Project
At the end of the course, every student needs to publish an
individual web site, which comprises most of the weekly activities
AT3 30%
and personal information to form an electronic portfolio using
skills and techniques discussed in the course. The size of the web
site is limited to at most 20MB.

Final Examination
The 2 hours final examination is to measure student’s
understanding of the knowledge covered in the entire
AT4 30%
course. Their abilities to create a professional-looking web site
according to the instructions given and the applications of skills
and techniques relevant to build up web pages will be assessed.

TOTAL 100%
 Alignment of Course Intended Learning Outcomes, Teaching and Learning Activities and
Assessment Tasks

Course Intended Learning Teaching and Learning Assessment Tasks

Outcomes Activities

CILO 1 1, 2, 3, 4 1, 2, 3, 4

CILO 2 1, 2, 3, 4 1, 3, 4

CILO 3 1, 3 2, 3

CILO 4 1, 2, 3, 4 1, 3, 4

CILO 5 1 2, 3

Distribution of Notional Learning Hours / QF Credits

Activity Notional Learning Hours (NLHs)
(a) Contact Hours
Lecture 13

Workshop 26

Consultation 1

Total: 40

(b) Self-Study Hours

Reading 20

Revision for Class Assignments 15

Preparation for Project 21

After Class Exercises 12

Preparation for Final Examination 12

Total: 80

TOTAL NLHs:
120
(a)+(b)

QF Credits: 12
(TOTAL NLHs/10)
Course Outline
Week 1: Planning a Web Site

Reading: Maivald Chapter 4

Week 2: HTML (Hyper Text Markup Language)

Project Part 1: Personal Profile

Reading: Maivald Chapter 2

Week 3: Building Up a Web

Project Part 2: Strengths and Weaknesses

Class Activity: Class Assignment One

Reading: Maivald Chapters 1 & 5

Week 4: Table and Images

Project Part 3: Learning Beliefs and Class Performance

Reading: Maivald Chapters 7 & 8

Week 5: Hyperlinks and Anchors

Project Part 4: Future

Reading: Maivald Chapter 9

Week 6: Division and Multimedia

Project Part 5: Personal Information

Reading: Maivald Chapter 9

Week 7: Publishing Web

Project Part 6: Academic Information

Class Activity: Class Assignment Two

Reading: Maivald Chapter 11

Week 8: Reading Week

Week 9: Re-structure Web Site

Project Part 7: Web Site Layout

Reading: Maivald Chapter 5

Week 10: Behaviors and Transition

Project Part 8: Self Evaluation

Reading: Maivald Chapter 10

Week 11: Cascading Style Sheets (CSS)

Class Activity: Class Assignment Three

Reading: Maivald Chapters 3 & 12

Week 12: Building Forms

Reading: Maivald Chapter 1

Week 13: Using Bootstrap Components

Reading: Maivald Chapter 10

Week 14: Layout, Template and Library

Reading: Maivald Chapters 6 & 9

Week 15: Reading Week (for completion of project)

Academic Honesty

You are expected to do your own work. Dishonesty in fulfilling any assignment undermines the
learning process and the integrity of your college degree. Engaging in dishonest or unethical
behavior is forbidden and will result in disciplinary action, specifically a failing grade on the
assignment with no opportunity for resubmission. A second infraction will result in an F for the
course and a report to University officials. Examples of prohibited behavior include, but not limited
to:

 Cheating – an act of deception by which a student misleadingly demonstrates that s/he has
mastered information on an academic exercise. Examples include, but not limited to:
• Copying or allowing another to copy a test, quiz, paper, or project;
• Submitting a paper or major portions of a paper that has been previously submitted for
another class without permission of the current instructor;
• Turning in written assignments that are not your own work (including homework);
 Plagiarism – the act of representing the work of another as one’s own without giving credit:
• Failing to give credit for ideas and material taken from others;
• Representing another’s artistic or scholarly work as one’s own;
 Fabrication – the intentional use of invented information or the falsification of research or
other findings with the intent to deceive.

To comply with the University’s policy, any written work has to be submitted to VeriGuide.
References

Principal Reading
Jim Maivald (2020). Adobe Dreamweaver Classroom in a Book (2020 release) 1st Edition.
Adobe Press
Wong, C.K. (2020 Sept). Comp204 Web Page Development Notes.

Supplementary Reading
Erika Kendra (2019). Adobe Dreamweaver2020: The Professional Portfolio Inc. Against The
Clock
Erika Kendra (2019). Web Design Portfolio 2020: Adobe Dreamweaver & Photoshop Inc. Against
The Clock

Assessment Criteria

Grading Criteria of Assessment Task 1: Class Assignments

Grade Assessment Criteria

Excellent Excellent command of skills and techniques of using HTML/Dreamweaver to

A, A- construct web pages according to the given instructions and sample output screens.

Good Good command of skills and techniques of using HTML/Dreamweaver to

B+, B, B- construct web pages according to the given instructions and sample output screens.

Adequate Acceptable command of skills and techniques of using HTML/Dreamweaver to

C+, C, C- construct web pages according to the given instructions and sample output screens.

Marginal Marginal command of skills and techniques of using HTML/Dreamweaver to

D+, D construct web pages according to the given instructions and sample output screens.

Fail Poor command of skills and techniques of using HTML/Dreamweaver to construct

F web pages according to the given instructions and sample output screens.

Grading Criteria of Assessment Task 2: Class Participation

Grade Assessment Criteria

Excellent Strong evidence of familiarity with the functions of Dreamweaver.

A, A- Clear and reasoned statements on most critical points with important contribution to
the assigned questions or problems.
High participation and excellent presentation skills.

Good Good evidence of familiarity with the functions of Dreamweaver.

B+, B, B- Clear and reasoned statements on many critical points with good contribution to the
assigned questions or problems.
Active participation and excellent presentation skills.

Adequate Acceptable evidence of familiarity with the functions of Dreamweaver.

 C+, C, C- Fairly clear and reasoned statements on some critical points with fair contribution to
the assigned questions or problems.
Sufficient participation and fair presentation skills.

Marginal Some evidence of familiarity with the functions of Dreamweaver.

D+, D Somewhat clear and reasoned statements on a few critical points with little
contribution to the assigned questions or problems.
Less participation and unsatisfactory presentation skills.

Fail Poor evidence of familiarity with the functions of Dreamweaver.

F Unable to provide clear and reasoned statements on a few critical points with no
contribution to the assigned questions or problems.
Poor participation and presentation skills.

Grading Criteria of Assessment Task 3: Individual Project

Grade Assessment Criteria

Excellent Excellent command of all aspects of the functions of Dreamweaver by

A, A- appropriately using them in the project web site.
Excellent ability to apply the functions of Dreamweaver creatively to construct and
maintain the project web site.
Excellent presentation and organization of web page content in an easy to search
and navigate manner.

Good Good command of all aspects of the functions of Dreamweaver by appropriately

B+, B, B- using them in the project web site.
Good ability to apply the functions of Dreamweaver creatively to construct and
maintain the project web site.
Good presentation and organization of web page content in an easy to search and
navigate manner.

Adequate Acceptable command of all aspects of the functions of Dreamweaver by

C+, C, C- appropriately using them in the project web site.
Acceptable ability to apply the functions of Dreamweaver creatively to construct
and maintain the project web site.
Acceptable presentation and organization of web page content in an easy to search
and navigate manner.

Marginal Marginal command of most aspects of the functions of Dreamweaver by

D+, D appropriately using them in the project web site.
Weak ability to apply the functions of Dreamweaver creatively to construct and
maintain the project web site.
Unsatisfactory presentation and organization of web page content.

Fail Poor command of most aspects of the functions of Dreamweaver by appropriately

F using them in the project web site.
Poor ability to apply the functions of Dreamweaver to construct and maintain the
project web site.
Poor presentation and organization of web page content.
Grading Criteria of Assessment Task 4: Final Examination
Grade Assessment Criteria

Excellent Evidence of substantial understanding of the skills and techniques covered in the
A, A- entire course.
Superior capacity for analyzing the case situation and answering the questions
effectively.
Strong capability to integrate relevant procedures and apply them jointly to solve
complicated problems.

Good Good understanding of the skills and techniques covered in the course.
B+, B, B- Evidence of good capacity for analyzing the case situation and answering the
questions effectively.
Evidence of good capability to integrate relevant procedures and apply them jointly to
solve complicated problems.

Adequate Fair understanding of the skills and techniques covered in the entire course.
C+, C, C- Adequate capacity for analyzing the case situation and answer the questions
effectively.
Adequate capability to integrate relevant procedures and apply them jointly to solve
complicated problems.

Marginal Marginal understanding of the skills and techniques covered in the entire course.
D+, D Marginal capacity for analyzing the case situation and answering the questions
effectively.
Marginal capability to integrate relevant procedures and apply them jointly to solve
complicated problems.

Fail Poor understanding of the skills and techniques covered in the entire course.
E, F Unsatisfactory capacity for analyzing the case situation and answering the questions.
Poor capability to integrate relevant procedures and apply them jointly to solve
complicated problems.