网页设计与制作:HTML5+CSS3+JavaScript

内容简介

本课程提供慕课教程 课程将从Web发展史讲起，对Html标签、CSS样式设置作了详细讲解，并涉及了简单的Javascript脚本应用以及Html5+CSS3能的介绍，由易到难、由简到繁，循序地介绍网页前端设计与制作的基础知识与基本技能。

目录

目录第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．15Javascript1．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仿腾讯IM网页视差背景效果【实训作业】实训任务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在网页中应用Javascript9．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属值为flex10．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．4Javascriptr/>【项目实战】项目101利用百分比与固定布局相结合实现通栏布局项目102利用媒作《福尔摩斯历险记》响应式网页项目103Bootstrap网页布局案例“Flash云课堂”网站首页【实训作业】实训任务101制作“Web前端学响应式网页框架实训任务102利用Bootstrap布局技术重构作业网站首页参考文献