21世纪高等学校计算机教育实用规划教材网页设计与制作(HTML5+CSS3+JavaScript)

目录 第1章网页设计基础知识 【目标任务】 【知识技能】 1．1Web发展史 1．2网页基本概念 1．2．1互联网 1．2．2TCP/IP协议 1．2．3万维网 1．2．4超文本传输协议 1．2．5文件传输协议 1．2．6统一资源定位符 1．2．7IP地址 1．2．8域名地址 1．2．9域名系统 1．2．10超文本和超链接 1．2．11网页和网站 1．2．12静态网页与动态网页 1．2．13超文本标记语言 1．2．14层叠样式表 1．2．15JavaScript 1．2．16Web标准 1．3网站开发基本流程 1．4网页设计与制作的主流开发工具与浏览器 【项目实战】 项目11使用记事本等网页制作工具创建*简HTML结构网页 项目12在Dreamweaver中创建站点 【实训作业】 实训任务11创建站点目录结构及**个HTML网页 实训任务12下载安装多种浏览器和主流开发工具 第2章HTML网页结构基础 【目标任务】 【知识技能】 2．1HTML文档基本格式 2．1．1文档类型声明 ﹤ !doctype html ﹥ 2．1．2HTML页面结构 2．1．3文档标签 ﹤ html ﹥ … ﹤ /html ﹥ 2．1．4文档头标签 ﹤ head ﹥ … ﹤ /head ﹥ 2．1．5文件主体标签 ﹤ body ﹥ … ﹤ /body ﹥ 2．1．6文档标题标签 ﹤ title ﹥ … ﹤ /title ﹥ 2．1．7引用外部文件标签 ﹤ link/ ﹥ 2．1．8内嵌样式标签 ﹤ style ﹥ … ﹤ /style ﹥ 2．1．9页面元信息标签 ﹤ meta ﹥ 2．1．10页面注释标签 2．1．11标签的属性 2．2HTML文本控制标签及属性 2．2．1标题标签及其属性 2．2．2段落标签及其属性 2．2．3换行标签 2．2．4特殊字符 2．2．5预格式文本 2．2．6水平线标签及其属性 2．2．7文本格式化标签 2．2．8 ﹤ span ﹥ 标签 2．3图像标签及属性 2．3．1 ﹤ img ﹥ 标签基本语法 2．3．2 ﹤ img ﹥ 标签其他属性 2．4超链接标签及属性 2．5列表标签及属性 2．5．1有序列表 2．5．2无序列表 2．5．3定义列表 2．6HTML5新增的语义化结构标签 2．6．1 ﹤ header ﹥ … ﹤ /header ﹥ 标签 2．6．2 ﹤ nav ﹥ … ﹤ /nav ﹥ 标签 2．6．3 ﹤ section ﹥ … ﹤ /section ﹥ 标签 2．6．4 ﹤ article ﹥ … ﹤ /article ﹥ 标签 2．6．5 ﹤ aside ﹥ … ﹤ /aside ﹥ 标签 2．6．6 ﹤ footer ﹥ … ﹤ /footer ﹥ 标签 2．6．7﹤ figure ﹥ … ﹤ /figure ﹥ 标签与 ﹤ figcaption ﹥ … ﹤ /figcaption ﹥ 标签 【项目实战】 项目 21制作“网页设计与制作”课程作业网站 【实训作业】 实训任务21制作“第2章 HTML网页结构基础”案例作业网站 第3章CSS网页样式基础 【目标任务】 【知识技能】 3．1什么是CSS样式 3．2Dreamweaver CC中创建样式表并设置CSS样式的方法 3．2．1认识【CSS样式】面板 3．2．2创建并编辑CCS样式的过程 3．3引入CSS样式表的方法 3．3．1外部样式表 3．3．2内部样式表 3．3．3行内样式 3．3．4CSS样式表的混合使用 3．4CSS样式的语法规则 3．5CSS样式基础选择器 3．5．1标签选择器 3．5．2类选择器 3．5．3ID选择器 3．5．4通配符选择器 3．6常用CSS文本样式 3．6．1fontstyle（字体风格） 3．6．2fontvariant（变体） 3．6．3fontweight（字体粗细） 3．6．4fontsize（字号大小） 3．6．5lineheight（行高） 3．6．6fontfamily（字体） 3．6．7font（综合设置字体样式） 3．6．8color（文本颜色） 3．6．9textdecoration（文本装饰） 3．6．10textalign（水平对齐方式） 3．6．11textindent（首行缩进） 3．7CSS控制列表样式 3．8CSS复合选择器 3．8．1群组选择器 3．8．2标签指定选择器 3．8．3后代选择器 3．8．4子选择器 3．9CSS的继承性 3．10 CSS的优先级 3．10．1外部样式表、内部样式表和行内样式的优先级 3．10．2基础选择器的优先级 3．10．3复合选择器的优先级 3．11CSS的层叠性 3．11．1样式不冲突的层叠 3．11．2样式冲突且存在优先级差别的层叠 3．11．3样式冲突且选择器优先级相同的层叠 3．11．4样式冲突且同一标签运用不同类型选择器的层叠 【项目实战】 项目31百度搜索结果网页局部样式设置 项目32端午节习俗新闻页面 【实训作业】 实训任务31Web前端试学班广告页局部样式设置 实训任务32“商品推荐”页局部样式设置 第4章CSS网页样式进阶 【目标任务】 【知识技能】 4．1认识盒子模型 4．2盒子模型相关属性 4．2．1宽高属性 4．2．2边框属性 4．2．3内边距属性 4．2．4外边距属性 4．2．5背景属性 4．3元素类型 4．3．1块级元素 4．3．2行内元素 4．3．3行内块元素 4．4元素类型的转换 4．5元素所占空间的计算 4．5．1元素未设置width 和height属性 4．5．2元素设置width 和height属性 4．5．3CSS3新增的 boxsizing 属性 4．6CSS3选择器与常用的样式属性 4．6．1CSS3简介 4．6．2CSS3兄弟选择器 4．6．3CSS3属性选择器 4．6．4CSS3伪类选择器 4．6．5CSS3圆角边框属性和阴影属性 4．6．6CSS3中的颜色设置 4．6．7CSS3中的过渡效果 【项目实战】 项目41利用盒子模型原理制作“专题学习”模块效果 项目42精灵图技术的运用 项目43仿腾讯IMQQ网页视差背景效果 【实训作业】 实训任务41使用精灵图技术制作淘宝首页局部效果 实训任务42商品展示页局部效果的实现 第5章网页布局基础 【目标任务】 【知识技能】 5．1DIV+CSS布局的思路 5．2文档流 5．3Float浮动 5．3．1浮动的基本语法 5．3．2浮动的基本原理 5．3．3清除浮动clear属性 5．3．4子元素浮动，父元素空间不足的情况 5．3．5浮动子元素对未设置高度的父元素的影响及解决办法 5．4overflow属性 5．5定位属性 5．5．1定位属性 5．5．2静态定位 5．5．3相对定位 5．5．4绝对定位 5．5．5固定定位 5．5．6zindex层叠等级属性 【项目实战】 项目51“国”字型布局网页效果制作 项目52商品广告版块效果制作 【实训作业】 实训任务51新浪微博发言版块制作 实训任务52制作第5章案例作业网站 第6章导航与超链接 【目标任务】 【知识技能】 6．1超链接的类型 6．2超链接的基本语法 6．2．1href属性 6．2．2target属性 6．2．3title属性 6．3电子邮件超链接 6．4文件下载超链接 6．5锚点链接 6．6图像热区超链接 6．7超链接样式的设置 6．8超链接伪类控制超链接 6．9列表技术制作导航 6．9．1纵向一级导航 6．9．2横向一级导航 6．9．3纵向二级导航 6．9．4横向二级导航 【项目实战】 项目61滑动门技术制作一级导航 项目62锚点链接制作类似选项卡侧边栏导航效果 【实训作业】 实训任务61微软商城网站页脚效果制作 实训任务62二级下拉导航菜单的制作 第7章表格及样式设置 【目标任务】 【知识技能】 7．1创建表格 7．2表格的基本语法 7．2．1表格的基本结构 7．2．2HTML表格的表头标签 7．2．3表格相关的HTML标签 7．2．4表格标签的属性 7．2．5合并单元格 7．3表格的样式设置 7．3．1表格的边框折叠样式 7．3．2表格的边框样式 7．3．3表格的背景 7．3．4表格内容的对齐 7．4常见表格的制作 7．4．1常规细线表格的制作 7．4．2隔行变色表格的制作 7．4．3nthchild()实现隔行变色 7．4．4仅横线或仅竖线表格 7．4．5鼠标悬停表格效果 【项目实战】 项目71制作中学期末考试成绩表 【实训作业】 实训任务71模拟制作GitHub表格样式效果 实训任务72模拟制作百度万年日历鼠标悬停效果 第8章表单及样式设置 【目标任务】 【知识技能】 8．1创建表单 8．1．1插入表单菜单命令及表单工具组 8．1．2Dreamweaver CC创建表单的方法 8．2表单的基本语法 8．2．1表单标签 8．2．2表单元素 8．3 ﹤ input ﹥ 标签 8．3．1 ﹤ input ﹥ 标签的type类型 8．3．2HTML5 新增的type类型 8．4表单CSS样式的设置 8．4．1表单布局样式 8．4．2表单控件样式 【项目实战】 项目81京东商城的登录表单效果制作 【实训作业】 实训任务81模拟制作网易邮箱登录界面 实训任务82制作客户留言表单 第9章JavaScript基础 【目标任务】 【知识技能】 9．1JavaScript概述 9．1．1JavaScript在网页中的作用 9．1．2在网页中应用JavaScript 9．2JavaScript的语法基础 9．2．1JavaScript的代码格式 9．2．2JavaScript输出 9．2．3JavaScript的数据类型 9．2．4JavaScript运算符 9．2．5条件语句 9．2．6循环语句 9．3JavaScript对象 9．3．1JavaScript 对象 9．3．2BOM浏览器对象模型 9．3．3DOM文档对象模型 9．4JavaScript 函数 9．4．1JavaScript 函数 9．4．2函数的调用 9．4．3JavaScript 事件 【项目实战】 项目91仿淘宝首页焦点轮播图效果制作 项目92图片循环滚动仿跑马灯效果制作 【实训作业】 实训任务91仿焦点新闻效果制作纵向图片新闻循环滚动 实训任务92制作本章案例作业网站 第10章响应式网页布局基础 【目标任务】 【知识技能】 10．1响应式Web设计概述 10．2固定布局 10．3百分比布局 10．4相对字体大小 10．5弹性布局 10．6响应式图片 10．7弹性盒子 10．7．1设置父元素的display属性值为flex 10．7．2justifycontent属性 10．7．3alignitems属性 10．7．4flexdirection属性 10．7．5flexwrap属性 10．7．6flex属性 10．7．7order属性 10．7．8flexflow属性 10．8视口与媒体查询 10．8．1视口 10．8．2媒体查询 10．9Bootstrap响应式网页设计 10．9．1Bootstrap获取与安装 10．9．2Bootstrap栅格系统 10．9．3Bootstrap组件 10．9．4JavaScript插件 【项目实战】 项目101利用百分比与固定布局相结合实现通栏布局 项目102利用媒体查询制作《福尔摩斯历险记》响应式网页 项目103Bootstrap网页布局案例“Flash云课堂”网站首页 【实训作业】 实训任务101制作“Web前端学习网”响应式网页框架 实训任务102利用Bootstrap布局技术重构作业网站首页 参考文献