网页设计与制作（HTML5+CSS3+JavaScript） 下载 pdf 百度网盘 epub 免费 2025 电子书 mobi 在线

本课程提供慕课教程（https://mooc1-1.chaoxing.com/course/200123083.html制作中） 课程将从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.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布局技术重构作业网站首页

参考文献

梁莉菁，萍乡学院信息与计算机工程学院，副教授，1969.5。

1987.8从事教学工作至今，一直从事一线教学工作，研究方向：网络多媒体教育技术应用；

暂无出版社相关信息，正在全力查找中！

暂无相关书籍摘录，正在全力查找中！

在线阅读地址：网页设计与制作（HTML5+CSS3+JavaScript）在线阅读

在线听书地址：网页设计与制作（HTML5+CSS3+JavaScript）在线收听

在线购买地址：网页设计与制作（HTML5+CSS3+JavaScript）在线购买

暂无原文赏析，正在全力查找中！

前言

本书是江西省省级精品在线开放课程“网页设计”的配套教材，适合零基础并对网页设计与制作技术感兴趣的读者学习使用，适合作为网页设计制作类或Web前端设计开发类课程的入门教材，可供高等院校相关专业及职业技术培训机构选用。

随着互联网技术的飞速发展以及移动互联时代的强势到来，“互联网 ”已经深入到了各行各业的各个领域。网页作为信息的重要载体，其设计与制作技术在这个时代显得愈加重要。网页设计与制作类课程是工学学科计算机类多个专业的专业核心课程，也是各高校非计算机类专业学生喜爱的公共选修课程之一，但是网页设计与制作类课程涉及的技术繁杂, 技术更新快，综合性也很强，是当今社会职场热门并且人才需求量极大的一门实践性很强的课程,因此教学工作必须与时俱进，难度大也富有挑战性。

针对高校网页类教材及课程教学中出现的一些问题，在教材建设及课程建设方面我们做了一些积极的尝试与改革，并付诸实践取得了较好的成绩。本书正是在作者和课程团队成员们的共同努力下，博采众家之长，为努力使高校课堂教学紧跟市场企业需求方向而打造的。本书特色主要有以下三方面: 

(1) 本书配套的教学资源丰富齐全，拥有完整的省级精品在线开放课程配套资源。重点案例均有视频教程讲解，教学大纲、PPT课件、教案、题库与考试等教学资源齐备。 

(2) 全书采用任务驱动方式，将重要知识点及基本技能要求嵌入到各个案例任务中，并且教学案例大多从淘宝、、腾讯、新浪等大型成熟网站中精心挑选出经典应用案例来诠释各知识点与技能。本书不仅介绍了传统的网页开发工具Dreamweaver的基本用法，而且采用了当下流行的主流开发工具之一HBuilder 作为网页开发工具，力求教学内容贴近职场需求，力求充分调动学生的学习主动性。

(3) 全书知识体系结构完整，脉络清晰，涵盖了网页设计与制作技术的入门基础知识与技能。重点阐述HTML元素、CSS样式、网页布局技术、导航与超链接、表格与表单等基础知识与技能，包括Html5的语义化标签结构和CSS3常用样式设置，以及JavaScript基础应用和响应式网页布局技术相关媒体查询、Bootstrap框架应用等实用技术的介绍。

本书分10个章节。第1章 网页设计基础知识，从Web发展史讲起，对网页基本术语意义、网站开发基本流程、浏览器及浏览器开发者工具作了相关介绍; 第2章 HTML网页结构基础篇，重点介绍HTML文档基本结构及HTML元素基本语法，包括HTML5语义化标签结构基础; 第3章 CSS网页设计基础篇和第4章 CSS网页设计进阶篇，重点介绍CSS样式盒子模型、选择器、背景边框样式包括CSS3中的常用样式设置方法，火力全开用网页常见的模块布局讲解盒模型，用淘宝首页局部排版讲解精灵图技术，用腾讯IMQQ网页视差特效讲解背景定位样式; 第5章 网页布局基础，用新浪微博发言版块案例继续攻克布局定位样式的设置原理及应用; 第6章 导航与超链接，依次介绍纵向、横向、带下拉菜单的导航栏和应用滑动门技术导航栏的制作; 第7章 表格及样式设置，介绍网页中常见的细线表格及隔行变色、鼠标悬停等效果表格的制作; 第8章 表单及样式设置，掌握表单及控件的用法及样式设置，包括HTML5中新增的表单控件和属性用法，挑战账户登录表单效果的制作; 第9章 JavaScript基础，用淘宝焦点轮播图、图片跑马灯效果案例来组织JavaScript基础知识; 第10章 响应式网页布局基础，简单介绍了弹性布局、视口与媒体查询，以及Bootstrap框架的基础知识，慕课视频教程中还增加HTML5 Canvas动画和CSS3动画的知识，为有兴趣、有能力的同学们指明了下一步努力的方向。 

本书由萍乡学院梁莉菁副教授和衡水学院刘巧丽副教授共同撰写完成，本书配套的慕课资源建设由萍乡学院梁莉菁副教授主持，协同其精品课程教学团队成员廖德伟、邱望等老师一起完成制作，该课程已被认定为江西省省级精品在线开放课程，是江西省所有高校的公共选修学分课程。对于选用了本书作为教材的高校教师及其他读者，可以在清华大学出版社官方网站获取全书配套的案例源代码、教学大纲、进度计划、教案及PPT课件等教学资源，也可以使用江西高校课程资源共享平台网络教学平台中的“网页设计”慕课课程进行网络教学与学习。

本书在编撰过程和课程建设过程中得到了萍乡学院和衡水学院的各级领导和同事们的大力支持与帮助，在此表示诚挚的感谢，尤其感谢萍乡学院信息与计算机工程学院的同事们，他们对本书的编排与撰写提出了许多宝贵的意见与建议，同时也感谢至亲的家人们为我们忙碌于繁杂的工作提供了无私的帮助和轻松的环境。

由于编者水平有限，书中难免有疏漏之处，敬请各位专家和读者批评指正，不胜感激。感谢您使用本书，顺祝学习愉快。

梁莉菁

2020年10月于北京