Web 前端技术基础

本课程是面向零基础学习者的 网页结构与视觉设计核心入门课程,聚焦 “用 HTML 搭建网页骨架、用 CSS 美化视觉呈现” 的核心能力,系统讲解 HTML 语义化标签、CSS 样式规则与布局技巧,帮助学习者理解 “静态网页从结构定义到视觉落地” 的完整流程,掌握独立开发企业官网首页、个人作品集、产品展示页等静态网页的技能,为后续学习 JavaScript 交互、响应式设计及前端框架(如 Vue、React)奠定坚实基础。课程以 “实战驱动” 为核心教学理念,每个技术知识点均配套 “案例演示 + 即时实操”,通过 “从模仿到创新” 的递进式训练,让学习者在实践中理解技术原理,最终能将 UI 设计稿转化为可在浏览器运行的静态网页,适合希望从事 Web 前端开发、UI/UX 设计、网页制作相关岗位的学习者,或对 “网页可视化实现” 感兴趣的技术爱好者。
课程属性:公共基础课
所属专业:软件技术
院系:信息工程学院
学时安排:64
开课时间:2025-08-26 00:00:00-2025-09-26 23:59:59

1开课期数

0知识点

0技能点

27教学资源

46选课人数

开始学习 收藏课程
  • HTML与CSS 概述(4)

    HTML基本结构和语法

    实训1:人物介绍

  • HTML常用标签(10)

    HTML基本结构元素

    HTML元素类型 三种元素的区别

    常用块级元素

    常用行内(内联元素)

    实训2:心灵小屋美文

  • CSS基础及 简单应用(6)

    CSS三种基本选择器

    CSS字体、文本与颜色设置

    实训3:CSS文本综合设置

  • CSS盒模型(12)

    宽度和高度属性

    边距和填充

    元素的多层嵌套和排列

    边框和背景

    伪元素:仿新浪LI列表

    实训4:新浪新闻评论

  • 页面布局基础(12)

    定位布局:爱奇艺视频展示

    实训5:爱奇艺主页视频展示

    通栏布局和分栏布局

    布局案例:新浪导航菜单

    布局案例:南京大学主页结构

    实训6:湖北大学网站布局案例

  • CSS综合应用 (16)

    案例:图片新闻的设置

    实训7:图片新闻的设置

    案例:清华大学官网新闻区

    实训8:清华大学官网新闻区

    案例:Banner效果图的设计

    实训9:Banner效果图的设计

    案例:网易主页侧栏效果设计

    实训10:网易主页侧栏效果设计

  • 期末考查(Banner效果图的设计)

    Banner效果图的设计

课程简介
教学团队
唐静
教师|暂无
暂无简介
查看更多
张俊朋
教师|信息工程学院
暂无简介
查看更多
储宇
教师|信息工程学院
暂无简介
查看更多
袁俊
教师|暂无
暂无简介
查看更多
黄峻峰
教师|暂无
暂无简介
查看更多
知识图谱
能力图谱
HI!AI助手已上线,陪你解锁知识,有需要随时喊我~
AI助教
依托课程资料智能问答,快速匹配知识点并解答
资源推荐
关联学习情况,智能推送课程资源与拓展补充内容






    京公安网备11010502050899号 Copyright © 2022-2025 . All rights reserved. 京ICP备17074418号-6 信息系统安全等级保护备案证明