网页设计与开发 精简版

任务一 我的第一个网页

子任务01 演示分析学校网站

• 网页是什么
• 网页工作原理
• HTML,CSS和JavaScript
• 实训1-1 构思我的网站

子任务03：制作我的第一个网页

• HTML文档结构
• 我的第一个网页

子任务04：给网页增添内容

• 常用标签
• 常用属性

• 项目实训

任务二 样式表与盒子

子任务01 使用样式表美化页面

• 什么是样式表、外部样式表 项目实训6
• CSS的选择符、项目实训2-1
• CSS常用属性
• 项目实训2
• CSS的选择符（二）
• CSS常用属性（二） 项目实训2-2

任务三 盒子模型

子任务01：使用盒子对网页进行划分

• 行内元素和块级元素、
• 所谓的“盒子模型”、盒子模型的实现
• 项目实训3
• 盒子的基本属性、项目实训3-2
• 项目实训4

子任务02：应用盒子实现网页布局

• 盒子的布局应用举例
• 盒子的嵌套布局
• 盒子的嵌套布局（二）
• 盒子的高度塌陷

• 拓展： 项目实训5
• 拓展：网站开发实例（一） 项目实训8 项目实训8_商苑电商

任务三 插入图像与文本

子任务01：插入文本

• HTML文本字符与注释标记
• 文本相关标记

子任务02：插入图像

• 插入图像
• 图像样式
• 图文混排
• 项目实训7、项目实训7_商苑电商

子任务03 列表的使用

• 列表的类型和样式
• 列表的实际应用
• 列表的实际应用（二)
• 项目综合实训（二）

• 项目实训12

任务四 导航菜单特效实现

子任务0：自适应网页

• 自适应网页之一
• 自动处理溢出

子任务01：链接与导航

• 超链接标记及属性
• 超链接的伪类
• 图像映射功能的实现

子任务02：按钮式导航

• 导航条的制作 项目实训9_我的项目

子任务03：弹出式菜单实现

• 理解盒子定位的概念
• 掌握盒子的显示方式与可见性概念
• 综合应用伪类实现弹出式菜单效果

子任务04：‘码云’的版本管理

• 项目实训9 项目实训10

子任务05：阶段性复习

• 基础综合项目（一）
• 项目实训11

任务五 表格和表单

子任务01 表格的使用

• 作业问题：导航条的制作
• 表格的使用
• 表格的实际应用
• 项目实训13
• 项目综合实训（三）

子任务02 表单的制作

• 表单的基本标记
• 表单的高级标记
• Html5新增类型

• 项目实训15
• 项目综合实训（四）
• 项目实训17

任务七 框架的制作

子任务01

• 框架的制作
• 罗汉塔
• 项目实训18

子任务02

• 框架的实际应用
• 图片、列表和导航
• 滚动字幕、背景音乐与多媒体
• 项目综合实训（五）

任务八 移动开发框架

子任务01 Bootstrap入门

• 自适应网页之二
• 安装bootstrap
• Bootstrap排版
• Bootstrap网格系统
• 项目实训19

子任务02 Bootstrap进阶

• Bootstrap3 列表
• Bootstrap4 超大屏幕、Bootstrap4 图片、Bootstrap4 列表
• Bootstrap 表单、Bootstrap4 按钮、Bootstrap4 导航
• Bootstrap4 表格、Bootstrap4 创建一个网页

子任务03 Bootstrap案例

https://v4.bootcss.com/docs/4.0/examples/

总任务 网站的测试运行

• 网站清单
• 整周实训
• 基础知识复习
• 专题复习

谷歌浏览器下载：https://www.google.com/chrome/

返回 首页

入门

• 请查阅用户指导以获取使用本wiki软件的信息！
• MediaWiki配置设置列表
• MediaWiki常见问题
• MediaWiki发布邮件列表
• 本地化MediaWiki到您的语言
• 了解如何在您的wiki上打击破坏