商院官网：网页设计与开发

登录/注册页面

• 表单的基本标记
• 表单的布局

成果：项目的登录/注册页面

第一个网页

网页结构

• 我的第一个网页、商院官网：第一个网页

css样式

• 网页颜色设计(选学）
• 什么是样式表、CSS的选择符
• 商院官网：CSS样式

内容页的制作

网页的基本布局

• 所谓的“盒子模型”、盒子的基本属性
• 行内元素和块级元素、盒子模型的实现

网页的详细布局

• 盒子的嵌套布局
• 盒子嵌套布局的其他方法

添加文字和图片

• CSS的选择符（二）、CSS常用属性（二）
• 插入图像、图像样式、图文混排

成果：商院官网：详情页的设计开发

主页面

布局、插入（文字和）图片、导航、列表、盒子样式微调、表单

盒子的布局及微调

• 盒子的box-sizing属性、盒子的背景设置
• 盒子的"炫酷"属性、图像样式
• 盒子的嵌套布局（二）、盒子的布局应用举例

成果：商院官网：首页的布局、商院官网：盒子的美化

列表的使用

• 列表的类型和样式、列表的实际应用

成果：商院官网：列表的应用

导航的制作

• 超链接标记及属性、超链接的伪类
• 基于图片的链接
• 导航条的制作

成果：商院官网：导航栏

弹出式菜单

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

管理后台

表格的制作

• 表格的使用
• 表格的实际应用

成果：商院官网：表格的使用

表单的制作

• 表单的基本标记（已学）
• 表单的布局（已学）
• 表单的高级标记、
• Html5新增类型、

成果：商院官网：表单的布局

框架的使用

• 框架的制作
• 框架的实际应用

成果：商院官网：框架的使用

H5和移动开发

自适应网页

• 自适应网页之一
• 网页布局案例：WordPress博客、自适应网页案例：WordPress博客]]
• 自动处理溢出

成果：商院官网：响应式布局

Html5 开发

• Html5 语义元素、Html5 语义元素案例：WordPress博客
• CSS3 弹性盒子、弹性盒子布局案例：WordPress博客
• Html5 音频
• Html5 视频
• Html5新增类型
• Html5 地理位置