网页设计与开发

课程简介

• 课程简介 W3C编辑器
• 创新创业 网页设计与开发：教学日志
• 相关比赛
• 课程体系
• 小练习--说出你最喜欢的网站
• 小练习--编写自己的wiki词条

• 网页设计与开发：2020工作手册
• 网页布局实例：山东党建网
• 网页布局实训：火星人
• 网页布局实训：百度新闻
• 网页布局实训：小米商城

任务一 我的第一个网页

子任务01 演示分析商城网站

• 网页是什么
• 网页工作原理
• 网页设计标准
• HTML,CSS和JavaScript
• 项目简介-商苑商城
• 实训1-1 构思我的网站

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

• 我的第一个网页、
• 网页的保存
• HTML文档结构
• 常用标签
• 常用属性
• “码云”的使用(选学）、微云的使用
• 确定主题色（在线取色器：http://www.jiniannet.com/Page/allcolor）

案例：商苑电商：第一个网页、商院官网：第一个网页

子任务03 web服务器搭建与应用（选学）

• 阿里云介绍
• Apache 服务器简介
• 阿里云：搭建Apache 网页服务器
• 商苑电商：在云端看到我的网页

拓展：

• 阿里云：申请云主机
• 阿里云——镜像管理
• 阿里云：建立安全组
• 使用FileZilla上传网页
• Apache 服务器的安装
• 修改apache服务器主目录

任务二 样式表

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

• 网页颜色设计(选学）
• 什么是样式表
• 实训：商苑电商：我的首页
• CSS的选择符、CSS常用属性
• 实训：商苑电商：构思分页面

子任务02 样式表的扩展与美化

• CSS的选择符（二）
• CSS常用属性（二）
• 实训：商苑电商：选择符和样式
• “码云”的使用（二）（选学）

任务三 盒子模型

子任务01：什么是盒子

• 行内元素和块级元素、所谓的“盒子模型”
• 盒子模型的实现、商苑电商：盒子模型的实现
• 项目实训3

子任务02：盒子的构建

• 盒子的嵌套布局、商院官网：盒子的嵌套布局
• 盒子的嵌套布局（二）、商院官网：盒子的布局
• 盒子嵌套布局的其他方法、网页案例：QQ音乐
• 码云‘的使用（三）--合并分支

• 项目实训4

子任务03：盒子的美化

• 盒子的基本属性、盒子的基本属性 练习
• 边距的合并
• 商院官网：盒子的美化、盒子的box-sizing属性
• 盒子的"炫酷"属性、盒子的背景设置、项目实训3-2
• 项目实训5、项目实训6

• 拓展：搭建可持续网站

任务三 插入图像与盒子嵌套

子任务01：插入文本

• HTML文本字符与注释标记
• 文本相关标记
• CSS常用属性（二）

子任务02：插入图像

• 插入图像
• 图像样式
• 图文混排、网页布局案例：虾米音乐
• 项目实训7、项目实训7_商苑电商

子任务03：盒子布局总结

• 盒子的水平居中、
• 盒子布局的使用技巧
• 盒子的高度塌陷、商院电商：首页的布局

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

任务四 导航菜单特效实现

子任务01：链接与导航

• 超链接标记及属性
• 超链接的伪类
• 基于图片的链接、网页布局案例：M1905

子任务02：按钮式导航

• 导航条的制作 网页布局案例：腾讯体育
• 项目实训9_我的项目、按钮式导航：练习

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

• 理解盒子定位的概念、网页布局案例：美食天下

• 网页的float布局
• 掌握盒子的显示方式与可见性概念
• 综合应用伪类实现弹出式菜单效果
• 项目实训7 链接与导航

• 项目实训9

子任务05：阶段性复习

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

任务五 列表和表格

子任务01 列表的使用

• 列表的类型和样式
• 列表的实际应用、商院官网：列表的应用
• 列表的实际应用（二)、商院官网：盒子的布局
• 项目综合实训（二）

• 项目实训12、项目实训8 列表的使用

子任务02 表格的使用

• 表格的使用(订单列表 ？）
• 表格的实际应用、商院官网：表格的使用
• 项目实训13、项目实训9 表格的使用
• 项目综合实训（三）

子任务03 案例学习

• 项目综合实训（四）

任务六 表单的制作

子任务01 基本表单的制作

• 表单的基本标记、商院官网：盒子的布局（二）
• 表单的高级标记、商院官网：导航栏

子任务02 表单的布局

• 表单的布局、商院官网：表单的布局
• Html5新增类型、项目实训：表单的使用
• 项目实训15
• 项目综合实训（四）
• 项目实训17

任务七 框架的制作

子任务01

• 框架的制作、网页布局实例：网易云音乐、网页布局实例：半亩花田、网页布局实例：山东党建网
• 盒子的布局
• 项目实训18

子任务02

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

任务八 移动开发框架

子任务0：自适应网页

• 自适应网页之一
• 自适应网页之二、自适应网页案例：WordPress博客]]
• 自动处理溢出、网页布局案例：WordPress博客
• Html5 语义元素、Html5 语义元素案例：WordPress博客
• CSS3 弹性盒子、弹性盒子布局案例：WordPress博客、项目实训：移动开发框架
• Html5 音频
• Html5 视频
• Html5 地理位置

Canvas画布和SVG图像

参考文档:[1] https://www.runoob.com/html/html5-canvas.html

[2] https://www.runoob.com/html/html5-svg.html

地理定位

参考文档:[1]https://www.runoob.com/html/html5-geolocation.html

Web存储

https://www.w3school.com.cn/html5/index.asp

增强型表单

拖放

Web Workers

子任务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/

总任务 网站的测试运行

• 基础知识复习
• 专题复习
• 商院官网：网页设计与开发
• 商苑电商：网页设计与开发
• 网站清单、网站清单2019
• 整周实训

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

返回 首页

入门

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