Web Design and Production Course Outline | Generated by AI

Home 2025.12

Question: Translate the following Chinese document into English and format it neatly in Markdown: Guangdong Higher Education Self-Examination Course Outline for “Web Design and Production (Practical) (Course Code: 13168)

Answer:

Guangdong Province Higher Education Self-Examination

Course: Web Design and Production (Practical)
Course Code: 13168

I. Assessment Objectives

This course aims to develop students’ practical skills in web design and production. Students will master foundational web design knowledge, become proficient in HTML and CSS syntax, and be able to comprehensively use HTML5 + CSS3 to plan and design web pages. Students will also gain proficiency in common web design software and basic browser settings and usage.

Specific assessment objectives:

  1. Master the settings and usage of common browsers (Chrome, Firefox, Edge, etc.).
  2. Master the settings and usage of common web editing software (Visual Studio Code, etc.).
  3. Proficiently master the basic structure and syntax rules of HTML5 and the usage of common HTML tags.
  4. Master CSS3 basic syntax and rules, element selector types, common CSS3 properties and their application scenarios, and various ways to link CSS. Be able to comprehensively apply CSS3 properties to define web styles.
  5. Comprehensively use HTML5 + CSS3 to develop and design web pages, laying a foundation for further professional studies and workplace applications.

《HTML5 + CSS3 Web Design Tutorial》
Edited by Zhang Xingyun, Peng Jinxiang, Xing Guobo
Tsinghua University Press, 2021 Edition
ISBN: 978-7-302-57284-8

III. Assessment Content

The assessment focuses on practicality and foundational knowledge, covering the core practical modules of the textbook. It is divided into 4 modules:

1. Browser and Editor Basic Operations

2. HTML5 Page Design

  1. HTML Basics
    File naming rules, basic structure (<html>, <head>, <body>, <title>), HTML5 new features (DOCTYPE, meta charset, semantic tags), writing specifications, indentation, comments.
  2. Basic HTML Elements
    meta, p, br, h1~h6, font, pre, hr, etc., and their attributes.
  3. Hyperlinks and Anchor Links
    Absolute/relative/root paths, href and target attributes, intra-page and inter-page anchor links.
  4. Images
    Inserting images (img), common formats (BMP, GIF, JPEG, PNG), attributes (src, width, height, alt, border, align), image maps (map, area).
  5. Tables
    Creating regular and irregular tables, attributes (width, height, border, colspan, rowspan), tags (table, tr, td, th, caption).
  6. Forms
    form tag and attributes (method, action, enctype), input types (text, password, radio, checkbox, submit, image, hidden, file), select, option, textarea, HTML5 new attributes (placeholder, required, autofocus, list/datalist), new input types (email, url, number, date, etc.).
  7. Video and Audio
    video and audio tags, supported formats, attributes (src, controls, autoplay, loop, height, etc.).
  8. HTML5 New Semantic Elements
    Structural elements (section, article, nav, aside, header, hgroup, footer, address, etc.).
  9. Other Common Elements
    Inline span, block div, differences between them, marquee for scrolling text.

3. CSS3 Basics and Usage

  1. CSS Fundamentals
    Relationship with HTML, features, and application scenarios.
  2. CSS Syntax
    Selectors (element, class, ID, descendant, child, adjacent sibling, general sibling), pseudo-classes (:link, :visited, :hover, :active), selector priority, three linking methods (external, internal, inline), naming conventions.
  3. Units in CSS
    Absolute/relative length units, percentage, color representations (keywords, hex, rgb/rgba).
  4. Common CSS Properties (Key Focus)
    • Text/Font: font-family, font-size, font-style, font-weight, font, color, text-decoration, text-align, text-indent, text-shadow, etc.
    • Box Model: width, height, padding, margin, float, display
    • Background: background-color, background-image, background-repeat, background-position, background-attachment
    • Border: border-style, border-width, border-color, border-radius
    • List: list-style-type, list-style-image, list-style-position

4. Comprehensive Web Development with HTML5 + CSS3

  1. Horizontal Navigation – Using ul/li with float, display: inline-block, etc.
  2. Vertical Navigation – Using margins, padding, borders, background.
  3. Page Layout Principles – Separation of structure (DIV) and presentation (CSS), header/main/footer structure.
  4. Common Layout Techniques – Fixed-width, fluid, centered adaptive, multi-column float layouts, use of position: relative/absolute, margin: auto.
  5. Comprehensive Website Development – Building full sites (personal blog, e-commerce homepage) using DIV+CSS, common sections: container, header, menu, main content, footer.

IV. Exam Structure (Total: 100 points)

  1. HTML5 Web Design Questions – 2 comprehensive tasks (30 points)
    Testing fonts, images, links, tables, forms, audio/video, cross-browser consistency.
  2. CSS3 Styling Questions – 2 comprehensive tasks (40 points)
    Testing selectors, units, colors, font/block/list/background/border/box properties, linking methods.
  3. HTML5 + CSS3 Comprehensive Question – 1 task (30 points)
    Full page layout using DIV+CSS, multiple sections, cross-browser consistency.

V. Exam Requirements

VI. Exam Environment Requirements

VII. Important Notes

VIII. Sample Question Types

1. HTML5 Web Design Question

Task: Create a page according to the provided screenshot.
Requirements:

2. CSS3 Page Design Question

Task: Build a course grade table with specific styling.
Requirements:

3. HTML5 + CSS3 Comprehensive Question

Task: Build a complete page with header, centered menu, left-right middle sections, and footer.
Key points: DIV+CSS layout, proper use of floats/positioning, borders, backgrounds, unordered lists for menu, consistent appearance across browsers.

Back

x-ai/grok-4.1-fast

Donate