网页设计与制作教程思维导图模板_ProcessOn思维导图、流程图

第一章网页制作的基础知识

1.1 认识网页和网站

1.1.1 网页、网站

1.网页：单页文档，其网址类似于“网站”。

2.网站：由多个网页组成的群集，这些网页在单个域中相互链接。

1.1.2 静态网页和动态网页

1.静态网页：静态页面是一种网页，其内容在服务器上预先生成，并在用户请求时以完全相同的形式发送到用户的浏览器。

2.动态网页：对所有动态生成与动态更新的网页的统称。

1.2 网页的基本构成元素

1.文本：具有体积小、网络传输速度快等特点，可使用户更方便地浏览和下载文本信息，是网页最主要的基本元素，也是网页中最主要的信息载体。

2.文本和动画：图片比文本更加生动和直观，可以传递一些文本不能表达的信息，具有强烈的视觉冲击力。（图片格式主要包括：GIF、JPEG和PNG等）

3.超链接：从一个网页指向另一个目的端的链接，指定从一个位置跳转到另一个位置，可以是文本链接、图像链接和锚链接等。

4.音频和视频：音频文件可使网页效果多样化，网页中常用的音频格式有mid和mp3；网页中的视频文件一般为flv格式。

1.5交互表单：网页中的表单通常用来接收用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端。

1.6其他常见元素：包括悬停按钮、 JavaScript与ActiveX等各种特效。

1.3 页面布局结构

1.网页页面布局：“国”字型、“厂”字型、海报型和flash型等

2.网页色彩搭配

（1）网页安全色：红色、绿色和蓝色

（2）网页中色彩的表达：十六进制

（3）常见的色彩搭配：相近色配色和近似色配色

1.4 Web前端技术简介

1.4.1 初识Web前端：Web前端即指平常上网浏览的网页，如上网浏览新闻。

1.4.2 Web前端开发的三大核心技术

1.HTML：制作网页的标准语言。“超文本”就是指页面内可以包含图片、超链接、音乐、程序等非文字元素。

2.CSS语言：一种用来表现HTML或XML等文件样式的计算机语言。

3.JavaScript语言：一种属于网络的脚本语言，已经被广泛地用于Web应用开发常用来为网页添加各式各样的动态功能。

1.4.3 Web前端开发工具

1.浏览器

（1）IE浏览器

（2）Chrome浏览器

（3）Firefox浏览器

（4）Safari浏览器

（5）Opera 浏览器

2.网页编辑器

（1）Adobe Dreamweaver

（2）Sublime Text

（3）NotePad++

（4）EditPlus

（5）HBuilder

3.切图工具：常用的切图软件有Photoshop和Fireworks两种。

1.5 HTML语法基础

1.5.1 HTML概述

1.语言：超文本标记语言。

2.超文本：可以加入图片、声音、动画、影视等内容的文本

3.标记：用“<”和“>”括起来。

1.5.2 HTML基本结构

1.HTML文档标签<html>...</html>

2.HTML文档头标签<head...</head>

3.文档编码

4.HTML文档主体标签<body>...</body>

1.6 创建HTML文件

1.7 网页头部标签

1.7.1 <title>标签

1.7.2 <meta>标签

1.7.2.1 keywords：用来告诉搜索引擎网页使用的关键字。

1.7.2.2 description：用来告诉搜索引擎网站主要的内容。

1.7.3 <link>标签

1.7.4 <script>标签

1.8 HTML5文档注释和特殊符号

1.8.1 注释：以“”结束

1.8.2 特殊符号

第二章网页制作的排版方法

2.1 文字与段落排版

2.1.1 段落标签

2.1.2 标题标签

2.1.3 换行标签

2.1.4 水平线标签

2.1.5 预格式化标签

2.1.6 缩排标签

2.2 超链接

2.1.1 超链接简介

1. 超链接的定义：指从一个网页指向一个目标的连接关系。

2. 超链接的分类：超链接目标文件的不同，分为：页面超链接、锚点超链接和电子邮件超链接等；链接单击对象的不同，分为文字超链接、图像超链接和图像映射等。

3. 路径

（1）绝对路径：主页上的文件或目录在硬盘上真正的路径(URL和物理路径)。

（2）根目录相对路径：指从站点根文件夹到被链接文档经过的路径。

（3）文档目录相对路径：它是相对于某个基准目录的路径，以当前文件所在的路径为起点，进行相对文件的查找。相对路径适合于创建网站内部链接。

2.2.2 超链接的应用

1. 锚点标签<a>···</a >

2. 指向其他页面的超链接

3. 指向书签的超链接

4. 指向下载文件的超链接

5. 指向电子邮件的超链接

2.3 图像

2.3.1 网页图像的格式及使用要点

1.常用的网页图像格式：GIF，JPEG，PNG

2.使用网页图像的要点

（1）高质量的图像因其图像体积过大，不太适合网络传输。

（2）网页中的动画并非越多越好，页面中应合理使用动画，太炫酷的动画会分散网站访客的注意力。

（3）如果在同一文件中多次使用相同的图像时，最好使用相对路径查找该图像。

2.3.2 图像标签

2.3.3 图像超链接

2.3.4 设置网页背景图像

2.3.5 图文混排：指设置图像与同一行中的文本、图像、插件或其他元素的对齐方式。

2.4 列表

2.4.1 无序列表

2.4.2 有序列表

2.4.3 定义列表

2.4.4 嵌套列表:把有序和无序放一起用。

第三章表格布局与表单交互

3.1 表格概述

3.1.1 表格的结构

3.1.2 表格的基本语法

3.2 表格属性的设置

3.2.1 表格边框属性

3.2.2 表格的宽度和高度属性

3.2.3 表格背景颜色与表格图像属性

3.2.4 表格边框样式属性

3.2.5 表格单元格间距、单元格边距属性

3.2.6 表格水平对齐属性

3.2.7 设置表格的（tr）标记行的属性

3.2.8 设置单元格的属性

3.2.9 表格单元格跨行、跨列属性

1. 单元格跨行

2. 单元格跨列

3.3 表格嵌套

3.4 表单

3.4.1 表单标记

3.4.2 定义域和域标题

3.4.3 表单信息输入

3.4.3.1 单行文本输入框

3.4.3.2 密码输入框

3.4.3.3 复选框

3.4.3.4 单选按钮

3.4.3.5 图像按钮

3.4.3.6 提交按钮

3.4.3.7 重置按钮

3.4.3.8 普通按钮

3.4.3.9 文件选择框

3.4.3.10 隐藏框

3.4.4 多行文本输入框

3.4.5 下拉列表框

第四章 CSS样式基础

4.1 CSS概述

4.1.1.CSS的基本概念:CSS全称为“Cascading Style Sheet”，中文解释为“层叠样式表”，它是以HTML为础，设置网页的外观显示样式，如字体、颜色、背景的控制及整体的布局等，还可以针对不同的浏览器设置不同的样式。

4.1.2传统HTML的缺点

1.维护困难

2.标记不足

3.网页过“胖”

4.定位困难

4.1.3.CSS的特点和优势

1.表现和内容分离

2.增强了网页的表现力

3.使整个网站显示风格趋于统一

4.1.4.CSS的编写规则

1.目录结构命名规则

2.样式文件的命名规则

3.选择器的命名规则

4.CSS代码注释

4.2 CSS语法基础

4.2.1.CSS基本语法

1. 基本语法

2. 语法说明

(1)选择器。选择器可以是HTML标记名称或者属性的值，也可以是自定义的标识符。

(2)属性/属性值对。“属性:属性值”必须一一对应，属性与属性值之间必须用“:" 连接，每个属性/属性值对之间用分号(；)隔开。

(3)属性。在CSS 中对属性命名与脚本语言中有一点不同，即属性名称的写法，在CSS中，凡是属性名为两个或两个以上的单词构成时，单词之间以连词符号(-)分隔。在脚本语言中，属性由两个以上单词构成，则从第二个单词开始向后，所有单词首字母必须大写。

(4)复合属性。在CSS中有些属性可以表示多个属性的值。如关于文字的设置，有font-family (字体)、font-size(字体大小)、font-style (字体风格)，这些可以用一个属性font来表示。

(5)多个属性值。在CSS中有些属性可以设置多个属性值，用逗号(，)分隔。

4.2.2.CSS选择器类型：CSS选择器主要有4种类型:标记选择器、class选择器、ID选择器及伪类选择器等。

4.2.3.CSS选择器声明

4.2.3.1.集体生明

4.2.3.2.全局声明

4.2.3.3派生选择器（上下文选择器）

4.3 CSS引入方式

4.3.1.内联样式表（行内样式表）

4.3.2.内部样式表

4.3.3.外部样式表

1.链接外部样式表

2.导入外部样式表

4.4 CSS的属性单位

4.4.1.长度、百分比单位

1.相对类型

2.绝对类型

4.4.2.色彩单位

1.用十六进制数方式表示色彩值

2.用色彩名称方式表示色彩值

3.使用RGB（x,y,z）函数表示

4.5.CSS继承与层叠：CSS规定如下优先级为:行内样式>id样式>class样式>标记样式。

4.6 元素类型

1.块级元素（display：block)

2.行级元素（display：inline）

3.列表项元素（display：list-item)

4.隐藏元素（display：none)

第五章 CSS盒模型

5.1盒模型的定义

5.2 CSS元素的高度和宽度

1.盒模型的宽度：左外边距(margin-left)+左边框(border-left)+左内边距(padding-left)+内容宽度(width)+右内边距(padding-right)+右边框(border-right)+ 右外边距(margin-right)。

2.盒模型的高度：上外边距(margin-top)+上边框(border-top)+上内边距(padding-top)+内容高度(height)+下内边距(padding-bottom)+下边框(border-bottom)+下外边距(margin-bottom)。

5.3 边距设置和边框设置

5.3.1 外边距设置

1.上外边距：margin-top:length I percent I auto

2.右外边距：margin-right:length I percent I auto

3.下外边距：margin-bottom:length I percent I auto

4.左外边距：margin-left:length I percent I auto

5.外边距：margin:lengthIpercent Iauto

5.3.2 外边距的合并

1.行级元素外边距合并：<span></span>

2.块级元素外边距合并：<div></div>

5.3.3 内边距设置

5.3.4 边框设置

1.上边框：border-top:border-style I border-width| border-color

2.右边框：border-right:border-style Iborder-widthI border-color

3.下边框：border-bottom:border-style I border-width I border-color

4.左边框：border-left:border-style | border-width I border-color

5.边框样式

6.边框宽度

7.边框颜色：颜色命名的值、十六进制参数或RGB值

5.3.5 新增边框属性

1.圆角边框：border-radius:设置边框四个角有弧度成为圆角，需要设置相关参数。

2.阴影边框：box-shadow:向四个边框添加一到多个阴影，需要设置相关参数。

3.图片绘制边框：border-image:设置所有边框用图片显示，需要嵌入相关图片，但是部分浏览器不支持
此属性。

5.4 CSS元素的定位

5.4.1 static 定位（静态定位）：是HTML元素的默认值。

5.4.2 relative定位（相对定位）：只改变自身的位置，在文档流原先的位置留出空白区域。定位的起始位置为此元素原先在文档流的位置。

5.4.3 absolute定位：脱离原来文档流的布局，浮在其他盒子上面，独立出来。

5.4.4 fixed定位：盒子的位置不随着滚动条的移动而改变位置相对于浏览器窗口是固定不变的。

5.5 CSS元素的浮动

1.盒子的浮动添加：float:left I right I none

2.盒子的浮动清除：clear:left | right | both I none

第六章元素应用CSS

6.1 使用CSS设置字体样式

6.1.1.字体类型：font-family:字体名称;

6.1.2.字体大小：font-size:绝对尺寸|相对尺寸;

6.1.3.字体粗细：font-weight : bold | number| normal | lighterl 100-900;

6.1.4.字体倾斜：font-style :normal | italic | oblique ;

6.2 使用CSS设置文本样式

6.2.1.文本水平对齐方式：text-align :left | right | center | justify;

6.2.2.行高：line-height:length | normal;

6.2.3.文本的修饰：text-decoration:underline | blink | overline | line-through | none ;

6.2.4.段落首行缩进：text-indent:length ;

6.2.5.首字下沉：.first-leter{...}

6.2.6.字符间距：letter-spacing:length | normal ;

6.2.7.文本的截断：text-overflow:cliplellipsis ;

6.2.8.文本的颜色：color：颜色值;

6.2.9.文本的背景颜色：background-color :color | transparent

6.3 使用CSS设置图像样式

6.3.1.设置图像边框：border="数值"；

6.3.2.图像缩放：使用CSS样式控制图像的大小，可以通过 width 和 height 两个属性来实现。

6.3.3.设置背景图像：background-image :url ( url ) | none ;

6.3.4设置背景重复：background-repeat:repeat | no-repeat | repeat-x | repeat-y;

6.3.5.背景图像定位

6.3.5.1.使用关键字进行背景定位：background-position: right center;

6.3.5.2.使用长度进行背景定位：background-position: 100px 50px;

6.3.5.3.使用百分比进行背景定位：background-position: 20% 50%;

6.4 使用CSS设置表单样式

6.4.1.使用CSS修饰常用的表单元素

6.4.1.1.修饰文本域

6.4.1.2.修饰按钮

6.4.1.3.制作登录表单

第七章利用CSS

7.1 CSS链接的美化

7.1.1.文字链接的美化

7.1.2.按钮链接的美化：为了让链接外观看起来像按钮特效，设计者会为链接加上不同的边框阴影和相同的背景颜色加以实现。

7.1.3背景链接的美化：除了文字链接和按钮链接，设计者还会为链接设置不同的背景颜色或背景图片，实现背景链接。

7.2 CSS列表的美化

7.2.1.列表项类型（list-style-type）：若 list-style-image 属性值为none 或指定url地址的图片不能被显示时，此属性将发生作用。

7.2.2.列表项图像（list-style-image）

7.2.3.列表项位置（list-style-position）

7.2.4.复合列表样式（list-style）：list-style: list-style-type | list-style-position | list-style-image

7.2.5.利用背景图像实现列表项标记：能够精确控制图像替换的项目符号距离文字的位置。

7.3 CSS表格的美化

7.3.1.border-collapse：border-collapse: separate | collapse | inherit

7.3.2. border-spacing：border-spacing: length

7.3.3.caption-side：caption-side: top | right | bottom | left

7.3.4.empty-cells：empty-cells: show | hide

7.4 多媒体的添加与美化

7.4.1.<embed>标签的使用：利用<embed>标签可以在网页中插人各种类型的多媒体文件，如WMV、MP3、AV、MP4、SWF、 MOV、RMVB等。但是在使用<embed>标签之前，需要安装相应的插件，否则多媒体文件不能正常播放。

7.4.2.<bgsound>标签的使用：<bgsound>是IE浏览器中设置网页背景音乐的元素，利用它可以将音乐文件嵌人到网页中又不占页面空间，可以播放的声音文件格式包括WAV、AU、MIDI、MP3等。

7.4.3.HTML5新增的多媒体标签

7.4.3.1.<audio>标签：<audio>标签定义声音，比如音乐或其他音频流，此标签默认是隐藏的。

7.4.3.2.<video>标签：<video>标签定义视频，例如电影片段或其他视频流。

第八章利用CSS制作导航菜单

8.1 水平顶部导航栏

8.1.1 简单水平导航栏的设计与实现

1. 导航栏的创建

2. 列表样式的设计

3. 超链接样式的设计

4. 鼠标事件

8.1.2 下拉子菜单导航栏的设计与实现

1. 导航栏的创建

2. 列表样式的设计

3. 二级菜单的隐藏和显示设计:display：none。

4. DIV样式的设计：对内容所处的div样式进行设置，包括宽度、高度、边框和对齐方式。

5. 超链接样式的设计

6. 鼠标事件

8.2 纵向侧边导航栏

8.2.1 简单纵向导航栏的设计与实现

1. 导航栏的创建

2. DIV样式的设计

3. 列表样式的设计

4. 超链接样式的设计

8.2.2 出式子菜单导航栏的设计与实现

1. 导航栏的创建

2. DIV样式的设计

3. 二级菜单的隐藏和显示设计

4. 列表样式的设计

5. 超链接样式的设计

8.3 底部固定导航栏

1. 导航栏的创建

2 列表样式的设计

3 菜单固定底部的设计

4 超链接样式的设计

5 鼠标事件

第九章 DIV+CSS布局

9.1 DIV+CSS概述

9.1.1 认识DIV:div标签在Web标准的网页中使用非常频繁，属于块状元素。div标签是双标签，即以<div></div>的形式存在，中间可以放置任何内容，包括其他的div标签。但是在没有CSS的影响下，每个div标签只占据一行，即一行只能容纳一个div标签。

9.1.2 DIV的宽高设置

1. 宽高属性

2. div标签内直接设置宽高:<div style="border: #0099ff solid 2px;width: 100px;height: 40px;">

3. div使用选择器设置宽高

4. div高度的百分比设置问题

9.2 DIV+CSS的应用

9.2.1 DIV元素的布局技巧:由于用户的计算机显示屏分辨率不同，因此在布局页面时，要充分考虑页面内容的布局宽度情况并保证页面整体内容在页面居中。一旦内容宽度超过显示宽度，页面将出现水平滚动条。

9.2.2 DIV元素的宽度自适应:有时会用到浮动效果，实现DIV元素的宽度自适应。宽度自适是指两个并排的dvw，其中左边的div为固定宽度，右边div则根据浏览器的宽度自动调整，这种用法常用于文章列表和文章内容的页面布局。

9.2.3 DIV内容的居中:行高(line -height)属性来实现，当行高的值等于容器的高度值，内容便垂直居中。

9.2.4 DIV元素的嵌套

9.3 DIV+CSS的典型布局

9.3.1 左中右布局

9.3.2 上中下布局

9.3.3 混合布局

第十章 JavaScript的应用

10.1 JavaScript概述

10.1.1 JavaScript简介

1. 简单性

2. 动态性

3. 跨平台性

4. 安全性

5. 基于对象的语言

10.1.2 JavaScript入门案例

10.1.3 JavaScript放置的位置

1 head标记中的脚本

2 body标记中的脚本

3 外部js文件中的脚本：<script type="text/javascript" src="js/demo.js">

4 事件处理代码中的脚本

10.2 JavaScript语法

10.2.1 语法基础

1. 区分大小写

2. 变量不区分类型

3. 每行代码结尾可以省略分号

4. 注释与C、C++、Java等语言相同

10.2.2 标识符和常用变量

1. 标识符

(1)必须使用英文字母或者下划线开头。

(2)必须使用英文字母、数字、下划线组成，不能出现空格或制表符。

(3)不能使用JavaScript 关键字与 JavaScript 保留字。

(4)不能使用JavaScript语言内部的单词。

(5)大小写敏感。

2. 变量声明

3. 变量类型

(1)Number 数值型。JavaScript 支持整数和浮点数。

(2)Suing字符型。字符型数据又称为字符串型，由若干个字符组成，并且用单引号或双引号封装起来

(3)Boolean布尔型。Boolean 值有 true 和 false，这是两个特殊值，可以将他们转换为其他类型的数据。

(4)Undefined 数据类型。JavaScript 会对未赋值变量赋值为 undefined。

(5)Null 数据类型。这是一个对象，但是为空。因为是对象，所以typeofnull 返回“Object”，注意 null 是 Javascript 保留关键字。

(6)0bject类型。除了上面提到的各种常用类型外，对象类型也是JavaScript 中的重要组成部分。

10.2.3 运算符与表达式

1. 算术运算符和表达式

2. 关系运算符和表达式

3. 逻辑运算符和表达式

4. 赋值运算符和表达式

5. 条件运算符和表达式

10.2.4 程序设计

1. 条件分支语句

(1). if.…else语句

(2).switch 分支语句

2. 循环语句

(1). for语句

(2). for…in语句

(3). while 语句

10.2.5 函数

1. 定义函数

2. 函数返回值：需要返回某个值的函数必须使用return语句

10.3 JavaScript对象

10.3.1 对象基础

1. 概述

(1)本地对象。

(2)Browser对象。

2. 属性：属性是对象的特性值的表述。

3. 方法：属性是对象的特性值的表述。

10.3.2 常用对象

1. window对象

2.document对象

3. location对象

4. navigator对象

5. screen对象

10.4 JavaScript事件

10.4.1 事件及事件处理

(1)直接在 HTML标记中指定。这种方法用得最多。

(2)编写特定对象特定事件的 JavaScript。

(3)在JavaScript 中说明：<事件主角-对象>.<事件>=<事件处理程序>。

10.4.2 常用事件

事件的应用常见于下面几种场景:鼠标单击某一元素、页面或图像载入、鼠标悬浮于页面的某个热点之上、在表单中选取输入框、确认表单、键盘按键等。

10.4.3 事件应用举例

（1）页面事件。

（2）鼠标事件。

（3）键盘事件