网页设计与制作
第1章网站开发基础
1.2网站开发流程
1.网站总体策划：（1）目标用户定位和网站的主题定位（2）网站整体风格创意设计（3）网页的色彩搭配（4）网站的层次结构和链式结构（5）版面布局设计
2.设计和制作素材：搜集的素材一般包括跟主题有关的文字图片资料；一些优秀的页面风格；开放的源代码。设计和制作的素材包括网站的Logo、Banner、背景图片、列表图表、横幅广告等。
3.建立站点：安装和配置IIS；在Dreamweaver中创建站点。
4.制作网页：创建CSS样式；制作网站首页；制作网站的其他页面；制作超链接
5.测试和发布网站：发布网站前必须要测试网站，测试网页内容、链接的正确性和在不同浏览器中的兼容性等。发布网站先申请站点域名和租用服务器空间，然后通过FTP工具把网站上传到服务器上。
1.4 HTML的概念：HTML是一种用来制作超文本文档的简单标记性语言。
1.4.3HTML标签
标签表示：<标签名称 属性>
1.<标签>元素</标签>,标签的作用范围:<标签>→<标签>.例：<h2>demo<h2>,即将demo这段文本以2号标题来显示，这对标签之外的文本不受这组标签影响。
2.<标签 属性名=”属性值”>元素</标签>
一个标签可以包含多个属性属性之间无先后次序，用空格分开。
例：<body background=”back_ground.gif” text=”red”>hello</body>,其中background属性用来表示HTML文档的背景图片，tect属性用来表示文本的颜色。
3.<标签>
空标签：标签单独出现，只有开始标签而没有结束标签。
(1)<html>和</html>在最外层，表示这对标签里的代码是HTML语言。
(2)<head>和</head>标签里是网页中的头部信息，如网页总标题，网页关键字等。无头部信息可不要这对标签
(3)<title>和</title>.在<head>和</head>这对双标签的中间还包含着<title>和</title>这对标签，网页标题的内容，标题出现在IE浏览器窗口。
考点：
1.<p>和</p>.文本段落的标签。
2.<br>:换行符。<br>标签是空标签(它没有结束标签，因此这是错误的:<br></br>)。
快捷键：F12预览网页； Shift+Enter分段(行间距小)；
前景色、背景色的调整：前景色是alt+del 背景色是ctrl+del 前后交换是X
1.4.4HTML文档的基本结构p18-p19
<html>
<head>
<title>一个简单的网页</title>（头部信息）
</head>
</body>（网页内容：文本、链接、图像、动画等）
<h1>欢迎光临</h1>
<br>
<front size=”5” face=”华文行楷” color=”red”>
这是我的第一个主页，欢迎大家的访问！ </front>
</body>
</html>
Ps:去掉第6、7、8、10行是HTML的基本结构。
第2章 DreamweaverCS5基础
2.1.2 Dreamweaver软件界面P23图2-3
2.1.4视图模式种类及其适应情况
1）代码视图(写代码，主要用于这个，利用Dreamweaver工具编辑网页代码)，
2）拆分视图(编写代码边看视图，直观地编辑网页中的元素，又可以观察到相关的代码）
3）设计视图 (可视化设计，以所见所得的方式编辑网页)
第3章制作网页内容
1.创建超链接的方法：给文字创建超链接；给图片创建超链接；添加email链接，mailto:(冒号后不能空格)电子邮件地址；添加空连接。
2.创建超链接的路径：
1)绝对路径:是被链接文档的完整URL,包括所使用的传输协议（网页通常是：http://）。在创建外部链接时必须使用绝对路径。
2）文档相对路径：就是以以前文档所在位置为起点到被连接文档经由的路径。主要用于创建内部链接。如：images/google.gif
3）站点根目录相对路径：是指所有路径都开始于当前站点的根目录。站点根目录相对路径以一个正斜杠开始，该正斜杠表示站点根文件夹，如/images/google.gif.移动含有根目录相对连接的文档时，不需要更改链接。
4.DW新建CSS规则选择器的类型及其特点。
1类 ：定义的时候前面必须加点（.）,格式是.xxx，可以在一个页面中调用多次；
2.ID（用于任何HTML元素）名称以“#”开头，一般中只用在网页中的一个元素上
3．标签（重新定义HTML元素）可以实现用CSS重新定义HTML标签外观的功能。
4.复合内容（基于选择的内容）：a:link 超链接的正常状态，无任何动作
a:visited 访问过的超链接状态
a：hover 鼠标指针指向超链接的状态
a：active 选中超链接状态
第4章CSS样式表
CSS样式表：内部用于当前网页内部；外部连接到多个网页上
1. 创建内部CSS样式表：
（1）用DW打开网页文档4.3.1.html
（2）单击“样式表”面板中的“新建CSS规则”按钮，弹出“新建CSS规则”对话框
（3）在“选择器类型”下拉列表中选择“类（可用于任何HTML元素）”在“选择器名称”文本框里输入要定义的CSS样式的名称.ziti，在“规则定义”下拉列表中选择“仅限该文档”
（4）单击“确定”按钮，在“.ziti的CSS规则定义”对话框中，设置完成后，单击“确定”按钮，此时，可以在“CSS样式”面板里 看到增加了一个.ziti的CSS样式
或 (1)执行“窗口“l"CSS样式”命令.打开“CSS样式”面板。
(2)在“CSS样式”面板中单击“新建CSS样式”按钮。
在“CSS样式，面板的底部的按钮功能如下。
.“附加样式表”按钮:在HTML文档中链接一个外部的CSS文件。二
.“新建CSS样式，按钮:编辑新的CSS样式文件。
.“编辑样式表’按钮:编辑原有的CSS规则。
.“删除CSS样式”按钮:删除选中的CSS规则。
(3)弹出“新建Css规则”对话框。
(4〕在对话框中如果设置“选择器类型’为“标签“，则在“选择器名称”下拉列表中选择一个HTML标签，也可以直接插入这个标签。
在“新建CSS规则’对话框中可以进行如下设置。
.选择器名称:用来设里新建的样式表的名称。
.选择器类型:用来定义样式类型，并将其运用到特定的部分。如果选择“类”选项，要在“选择器名称”文本框中翰人自定义样式的名称，其名称可以是字母和数字的组合，如果没有输入符号“.”Dweaver会自动输入;如果选择“标签”选项，需要在“选择器名称”下拉列表中选择一个HTML标签，也可以直接摘人这个标签;如果选择“复合认”选项，需要在“选择器名称.下拉列表中选择一个选择器的类型.上海网站建设也可以直接输入一个选择器类型。
.规则定义:用来设置新建的CSS语句的位置。CSS样式按照使用方法可以分为内部样式和外部样式。如果想把CSS语句新建在网页内部.可以选择“仅限该文档”选项.
(5)如果选择“复合内容”，则在对话框中的“选择器类型”下拉列表中选择“复合内容”选项.在“选择器名称’下拉列表中选择一个选择器的类型.也可以直接输人一个选择器类型。
(6)在此选择“选择器类型’下拉列表中的“类”选项.然后在“选择器名称’文本框中输入body。由于创建的是css样式内部样式表，所以在“规则定义”中选择“仅限该文档”。
(7）单击“确定”按钮.弹出“body的css规则定义”对话框.在对话框中将“Font-family"，设置为宋体，“font-size"设置为12像素，"Line-height"设置为200%， "Color"设置为#000000。
(8)单击“确定”按钮.在"Css样式"面板中可以看到上海网站建设新建的样式表和属性。
2. 外部样式表
（1） 在开始页的“新建”列表中选择CSS选项新建一个外部CSS文件，将其保存为mycss.css
（2） 单击“样式表”面板中的“新建CSS规则”按钮，弹出“新建CSS规则”对话框
在“选择器类型”下拉列表中选择“类（可用于任何HTML元素）”在“选择器名称”文本框里输入要定义的CSS样式的名称.text，在“规则定义”下拉列表中选择“仅限该文档”
（3） 单击“确定”按钮，在“.text的CSS规则定义”对话框中，设置完成后，单击“确定”按钮，此时，可以在“CSS样式”面板里 看到增加了一个.text的CSS样式
（4） 将上面创建的外部CSS样式表文件，连接到某个网页上，在DW中打开网页文件4.3.1.html
（5） 在“CSS样式表”面板中单击“附加样式表”弹出的“连接外部样式”对话框中的“添加选项区域中”选中“链接”按钮，然后单击浏览按钮，选择创建的外部链式表文件mycss.css
（6） 单击“确定”按钮，返回“链接外部链式表”对话框
（7） 单击“确定”按钮，外部链式表文件mycss.css就会自动连接到网页中
内部样式表与外部样式表的区别
首先它们都是CSS，美化修饰网页的，其中：内部样式表是写在HTML的<head></head>里面的，内部样式表只对当前所在的网页有效；如果很多网页需要用到同样的样式(Styles)，用外部样式表，将样式(Styles)写在一个以.css为后缀的CSS文件里，然后在每个需要用到这些样式的网页里引用这个CSS文件即可，较方便。使用外部样式表，相对于内部样式的，有以下优点： 1、样式代码可以复用。一个外部CSS文件，可以被很多网页共用。 2、便于修改。如果要修改样式，只需要修改CSS文件，而不需要修改每个网页。 3、提高网页显示的速度。如果样式写在网页里，会降低网页显示的速度，如果网页引用一个CSS文件，这个CSS文件多半已经在缓存区(其它网页早已经引用过它)，网页显示的速度就比较快。
第5章网页布局
1.利用表格进行网页布局p104-105
<table width=”500” height=”200” border=”2” cellpadding=”1” cellspacing=”1” bordercolor=”#000FF” bgcolor=”#999999”>
<tr>
<td bgcolor=”#999999”>设置单元格背景</td>
<td>灰色背景</td>
<td>黄色背景</td>
</tr>
<tr>
<td> </td>
<td align=”center”>居中对齐</td>
<td align=”left”>左对齐 </td>
</tr>
</table>
2.
<body>
<table width=”760” boder=”0” cellspacing=”0” ceiipadding=”0”>
<tr>
<td>. </td>
<td> </td>
<td>rowspan=”2”> </td>
</tr>
<tr>
<td>rowspan=”2”> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
5.2.4用表格布局网页图5-17p105
5.3框架
框架集定义了解P110
框架集<frameset></frameset>
框架集<frame/>
框架可以进行拆分和删除
框架集建立后是否可以添加移动删除？
5.4.2 DIV+ CSS布局原理、特征p123
利用DIV+ CSS布局网页是一种盒子模式的开发技术，通过由CSS定义的大小不易的盒子和盒子嵌套来编排网页。因为用这种方式编排的网页代码简洁、更新方便，能兼容更多的浏览器。
DIV+ CSS布局原理及特点：使用div划分网页逻辑区域;使用css控制每个div的外观位置以实现网页布局特点。特点：本身没有样式；是块元素；通常充当容器；要区分各个div，因此常要使用id属性
p123 用法(2个)
第8章ps
调整图像色彩
使用“色相/饱和度”、 “替换颜色”、“匹配颜色”、“变化”调整
调整图像色调p222
（1） 色阶：调整图像色调的明暗度
（2） 曲线：调整图像色调的明暗度比色阶更为准确、灵活
（3） 色彩平衡：能够调整图像暗调区域，高光区域和中间色调区域的色彩成分，并混合各种色彩以达到色彩平衡
剪切蒙版的类型和特征
（1） 剪贴蒙版实际上是两个或多个有特殊关系的图层关系的总称，必须有上下了两个图层，利用下方图层中图像的形状对上层图像进行剪切，最终以下方图层中的图像的形状规定上方图层中图像的范围，从而得到丰富的效果。
（2） 图层蒙版是为图层添加的遮罩，起到隐藏或显示图像的作用，只能用介于黑白两个色间的256级灰度色绘图。用黑色绘图可以隐藏图像，白色绘图可以显示图像，灰度色绘图能够使本层图像呈现若隐若现的朦胧效果
（3） 矢量蒙版可以控制或隐藏图层区域，能创建具有锐利边缘的蒙版，是由铅笔或形状工具使用路径方式创建的，而路径可以使用多种工具进行编辑，所以矢量蒙版常常用来布局对象
抠图：
规则的：矩形选框，椭圆选框，单行选框，单列选框；
不规则的:套索，多边形套索，磁性套索，快速选择，魔棒工具
Flash
快捷键：
保存Ctrl+S 测试影片Ctrl+Enter 修改“｜”组合” Ctrl+G
修改“｜”分离文本Ctrl+B 复制Ctrl+C 粘贴Ctrl+V 插入普通帧F5
插入关键帧F6 插入空白帧F7 修改｜转换为元件F8 打开颜色面板Shift+F9
是对象按原来的长度比以中心点为基准缩小和放大Alt+Shift 文件保存 Ctrl+s
Shift开始帧+选取连续帧的最后一帧 Ctrl可以选取多个不连续的帧
Ctrl同时选中要导入的多个图像文件 Shift同时选择两个文件之间的所有连续图像文件
选取连续多个帧：先点击起点帧，按住Shift键后再单击需要选取的连续帧的最后一帧
3. 补间动画类型，区别p315
（1） 形状补间动画
通过形状补间可以创建类似于形变的动画效果，是一个形状逐渐变成另一个形状
（2） 传统补间动画
在某一个时间点（也就是另一个关键帧）可以设置实例，组或文本等对象的位置，尺寸和旋转等属性，在另一个时间点（也就是另一个关键帧）可以改变对象的这下属性。在这两个关键帧间定义了传统补间，Flash就会自动补上中间的动画过程。
（3） 沿路径运动的补间动画
利用传统补间动画制作的位置移动动画是沿着直线进行的，可是在生活中，有很多运动路径是弧线或不规则的，在Flash中利用“沿路径的传统补间”就可以制作出这样的效果。讲一个或多个图层链接到一个引导图层，是一个或多个对象沿同一条路径运动的动画形式被称为“路径动画”。这种动画视图可以使一个或多个对象完成曲线或不规则运动
元件
元件是指可以重复来利用的图形，动画片段或按钮，保存在“库”面板中。在制作动画的过程中，将需要的元件从“库”面板中拖拽到场景上，场景中的对象成为该元件的一个实例。如果库中的元件发生改变（如对元件重新编辑），则元件的实例也会随之变化。同时，实例可以具备自己的个性，它的更改不会影响库中的元件本身。
元件优点：可以重复利用；便于大量制作；有助于减少影片文件的大小
元件的类型：影片剪辑元件；按钮元件；图形元件
