网页设计与制作.docx

网页设计与制作第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.元素,标签的作用范围:.例：demo,即将demo这段文本以2号标题来显示，这对标签之外的文本不受这组标签影响。2.元素一个标签可以包含多个属性属性之间无先后次序，用空格分开。例：hello,其中background属性用来表示HTML文档的背景图片，tect属性用来表示文本的颜色。3.空标签：标签单独出现，只有开始标签而没有结束标签。(1)和在最外层，表示这对标签里的代码是HTML语言。(2)和标签里是网页中的头部信息，如网页总标题，网页关键字等。无头部信息可不要这对标签(3)和.在和这对双标签的中间还包含着和这对标签，网页标题的内容，标题出现在IE浏览器窗口。考点：1.和.文本段落的标签。2.:换行符。标签是空标签(它没有结束标签，因此这是错误的:)。快捷键：F12预览网页； Shift+Enter分段(行间距小)；前景色、背景色的调整：前景色是alt+del 背景色是ctrl+del 前后交换是X1.4.4HTML文档的基本结构p18-p19一个简单的网页（头部信息）（网页内容：文本、链接、图像、动画等）欢迎光临这是我的第一个主页，欢迎大家的访问！ Ps:去掉第6、7、8、10行是HTML的基本结构。第2章 DreamweaverCS5基础2.1.2 Dreamweaver软件界面P23图2-32.1.4视图模式种类及其适应情况1）代码视图(写代码，主要用于这个，利用Dreamweaver工具编辑网页代码)，2）拆分视图(编写代码边看视图，直观地编辑网页中的元素，又可以观察到相关的代码）3）设计视图 (可视化设计，以所见所得的方式编辑网页)第3章制作网页内容1.创建超链接的方法：给文字创建超链接；给图片创建超链接；添加email链接，mailto:(冒号后不能空格)电子邮件地址；添加空连接。2.创建超链接的路径：1)绝对路径:是被链接文档的完整URL,包括所使用的传输协议（网页通常是：http:/）。在创建外部链接时必须使用绝对路径。2）文档相对路径：就是以以前文档所在位置为起点到被连接文档经由的路径。主要用于创建内部链接。如：images/google.gif3）站点根目录相对路径：是指所有路径都开始于当前站点的根目录。站点根目录相对路径以一个正斜杠开始，该正斜杠表示站点根文件夹，如/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)执行“窗口“lCSS样式”命令.打开“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的里面的，内部样式表只对当前所在的网页有效；如果很多网页需要用到同样的样式(Styles)，用外部样式表，将样式(Styles)写在一个以.css为后缀的CSS文件里，然后在每个需要用到这些样式的网页里引用这个CSS文件即可，较方便。使用外部样式表，相对于内部样式的，有以下优点： 1、样式代码可以复用。一个外部CSS文件，可以被很多网页共用。 2、便于修改。如果要修改样式，只需要修改CSS文件，而不需要修改每个网页。 3、提高网页显示的速度。如果样式写在网页里，会降低网页显示的速度，如果网页引用一个CSS文件，这个CSS文件多半已经在缓存区(其它网页早已经引用过它)，网页显示的速度就比较快。第5章网页布局1.利用表格进行网页布局p104-105 设置单元格背景 灰色背景 黄色背景   居中对齐 左对齐 2.   rowspan=”2” rowspan=”2”   5.2.4用表格布局网页图5-17p1055.3框架框架集定义了解P110框架集框架集框架可以进行拆分和删除框架集建立后是否可以添加移动删除？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+sShift开始帧+选取连续帧的最后一帧 Ctrl可以选取多个不连续的帧Ctrl同时选中要导入的多个图像文件 Shift同时选择两个文件之间的所有连续图像文件选取连续多个帧：先点击起点帧，按住Shift键后再单击需要选取的连续帧的最后一帧3. 补间动画类型，区别p315（1） 形状补间动画 通过形状补间可以创建类似于形变的动画效果，是一个形状逐渐变成另一个形状（2） 传统补间动画在某一个时间点（也就是另一个关键帧）可以设置实例，组或文本等对象的位置，尺寸和旋转等属性，在另一个时间点（也就是另一个关键帧）可以改变对象的这下属性。在这两个关键帧间定义了传统补间，Flash就会自动补上中间的动画过程。（3） 沿路径运动的补间动画利用传统补间动画制作的位置移动动画是沿着直线进行的，可是在生活中，有很多运动路径是弧线或不规则的，在Flash中利用“沿路径的传统补间”就可以制作出这样的效果。讲一个或多个