Web Design and Production Course Outline | Generated by AI

Home 2025.11

This course is part of the National Higher Education Self-Study Examination (自学考试) in Guangdong Province, China. It is a professional foundation course for the Digital Media Art Design (Associate) major, emphasizing practical skills in HTML5 and CSS3 for web page creation and layout. The course is highly practical, focusing on building complete, aesthetically pleasing web pages.

Specified Textbook:
HTML 5 + CSS 3 Web Design Tutorial (HTML 5+CSS 3 网页设计教程), edited by Zhang Xingyun, Peng Jinxiu, and Xing Guobo, Tsinghua University Press, 2021 edition.

The exam outline is structured around the textbook and assesses knowledge through memorization, comprehension, and application levels. The exam scope covers all content in this outline.

I. Course Nature and Objectives

1. Course Nature and Characteristics

This is an interdisciplinary course integrating technology, humanities, and arts. It teaches standard web design knowledge and skills, including HTML5/CSS3 technologies, DIV+CSS layouts, and website building processes. Students learn to apply techniques for text, images, media, links, lists, tables, forms, and CSS styling to design, produce, and maintain web pages.

2. Course Objectives

Prerequisites: “Computer Application Basics” and “Digital Media Basics.”

4. Focus and Difficulties

Focus: Web production elements (text, images, media, links, lists, tables, forms).
Difficulties: CSS control and beautification (styles, layouts, positioning).

II. Assessment Objectives

The outline guides self-study, assistance, and exam design. Competency levels:

III. Course Content and Assessment Requirements

Chapter 1: Web Basics

Learning Objectives: Understand HTML concepts, file types, HTML5 overview, editors, elements, semantics, conventions.
Content:
1.1 Introduction to HTML
1.2 Basic Concepts
1.3 File Types
1.4 HTML5 Overview
1.5 Editors
1.6 Basic Elements
1.7 Semantic Elements
1.8 Conventions
1.9 Code Specs
Assessment: Memorize concepts/history; comprehend structures/attributes; apply basic page writing.
Focus: HTML-web relationship. Difficulty: Development tools/technologies.

Learning Objectives: Master paths, hyperlinks (basic/anchor), images/hotspots, audio/video insertion, common tags.
Content:
2.1 Hyperlinks
2.2 Anchors
2.3 Images
2.4 Video
2.5 Audio
2.6 Other Elements
2.7 Case Practice
Assessment: Memorize paths/tags; comprehend advantages; apply links/media insertion.
Focus: Hyperlinks, HTML5 media. Difficulty: Path types.

Chapter 3: Lists

Learning Objectives: Master unordered/ordered/definition/nested lists.
Content:
3.1 Unordered
3.2 Ordered
3.3 Definition
3.4 Nesting
3.5 Case Practice
Assessment: Memorize tags/attributes; comprehend types; apply list creation/nesting.
Focus: Unordered/ordered lists. Difficulty: Nesting.

Chapter 4: Tables and Frames

Learning Objectives: Master basic tables, attributes, spanning, frames.
Content:
4.1 Composition
4.2 Attributes
4.3 Row Attributes
4.4 Cell Settings
4.5 Frames
4.6 Case Practice
Assessment: Memorize tags/attributes; comprehend spanning; apply table creation/resume page.
Focus: Table creation/styling. Difficulty: Data layout with tables.

Chapter 5: HTML Forms

Learning Objectives: Master forms, controls (basic/new HTML5), attributes; design forms.
Content:
5.1 Form Tag
5.2-5.6 Basic Controls (text, radio, checkboxes, buttons, lists, etc.)
5.7-5.8 New HTML5 Controls
5.9 Case Practice
Assessment: Memorize tags/attributes/types; comprehend submission; apply form creation/survey.
Focus: Control attributes. Difficulty: Form design.

Chapter 6: Cascading Style Sheets

Learning Objectives: Understand CSS development/syntax/properties; master usage/selectors.
Content:
6.1 Introduction
6.2 Syntax
6.3 Units
6.4 Properties
6.5 Case Practice
Assessment: Memorize concepts/syntax/units; comprehend advantages/properties; apply style referencing/text-image pages.
Focus: Text styles. Difficulty: Background/foreground design.

Chapter 7: CSS Property Case Application - Navigation Creation

Learning Objectives: Master CSS+UL for horizontal/vertical/drop-down navigation.
Content:
7.1 Horizontal Navigation
7.2 Vertical
7.3 Drop-down Menus
7.4 Case Practice
Assessment: Apply navigation implementations (horizontal, vertical, menus).
Focus: Horizontal/vertical navigation. Difficulty: Drop-down menus.

Chapter 8: Web Layout Using CSS+DIV

Learning Objectives: Understand layouts/DIV; master techniques, positioning; create multi-column layouts.
Content:
8.1 Overview
8.2 DIV
8.3 Principles
8.4 Techniques
8.5 Positioning
8.6 Case Practice
Assessment: Memorize concepts/tags/principles; comprehend layouts; apply blog/right-float pages.
Focus: Layout concepts/DIV+CSS. Difficulty: Various page layouts.

Chapter 9: Web Layout Examples

Learning Objectives: Master blog homepage/right-float designs; complex layouts.
Content:
9.1 Blog Homepage
9.2 Right-Floating
9.3 Case Practice
Assessment: Apply blog/right-float implementations; carousel effects.
Focus: Blog design. Difficulty: Right-floating.

Chapter 10: Filters, Transformations, and Animations

Learning Objectives: Master CSS3 filters, 2D/3D transforms, animations.
Content:
10.1 Filters
10.2 2D Transforms
10.3 3D Transforms
10.4 Animations
10.5 Case Practice
Assessment: Memorize properties; apply transitions/transforms/animations (e.g., photo wall).
Focus: Filters/2D transforms. Difficulty: 3D transforms/animations.

Chapter 11: Practical Development - Electronic Product Shopping Website Homepage

Learning Objectives: Integrate HTML5/CSS3 for layout/homepage development.
Content:
11.1 Top Area
11.2 Navigation
11.3 Main Content
11.4 Footer
Assessment: Apply full homepage implementation.
Focus: Web layout. Difficulty: DIV+CSS realization.

IV. Notes on the Outline and Assessment

For the full official outline, refer to the Guangdong Self-Study Exam Management System.

References:
Guangdong Self-Exam “Web Design and Production” Course Exam Outline (13167)
Guangdong Self-Exam Textbook List

Back

x-ai/grok-4-fast

Donate