DreamWeaver CS4教案.doc

第1章 网页设计学前基础1.1 网站和网页的基础知识一、网站类型展示型内容型电子商务型门户型二、网页的概念1网页的元素：基本元素：文本、图像和超链接其他元素：声音、Flash动画、视频、表格、层、CSS、导航栏、表单、行为、模板2网页的分类静态网页：指该网页文件里只有HTML标签，没有其他可执行的程序代码。页面一经制作完成，其内容就不会再变化，静态网页的扩展名一般为.htm。动态网页：指“具有交互性的页面”，即在网页源代码不变的情况下，网页的内容可根据访问者、访问时间或者访问目的的不同而显示不同的内容，如留言板和聊天室等。动态网页的扩展名一般为.asp、.jsp、.php、.aspx。3动态网页开发工具：ASP、PHP、JSP、ASP.net 1.2 网页的设计构思一、网页的布局通常采用Table+CSS或者DIV+CSS对网页进行布局二、网页的设计原则三、网页大体构思在制作网页之前，首先对网页大体上的设计有个系统的构思，主要包括网页的主题、网页的命名、网站标志、色彩搭配和字体等要素。1.3 DreamWeaver CS4的工作界面标题栏菜单栏文档编辑区文档工具栏、标准工具栏、状态栏插入面板属性面板面板组第2章 创建和管理站点一、创建本地站点：在本地进行编辑与测试1创建本地静态站点 为站点起一个名字； 选择【不想使用服务器技术】； 确定文件储存在计算机中的位置：即确定站点根文件夹的位置，站点根文件夹可以与站点名相同，也可以不同。 在【如何连接到远程服务器】中选择“无”。2创建本地动态站点 为站点起一个名字； 选择服务器技术中的一种； 确定文件储存在计算机中的位置：即确定站点根文件夹的位置，站点根文件夹可以与站点名相同，也可以不同。 选择“管理工具”|“Internet信息服务”，将“主目录”设置为站点的根文件夹二、HTML基础1Html标签：例: 进入大多数Html标签是成对出现的，但、只有开始符号。2Html文件：扩展名为.html的文件以标签开头，结尾，中间包含两部分：文件头：与之间的部分文件主体：与之间的部分三、设置页面属性第3章 规划网页布局3.1 可视化助理3.2 使用表格1表格的html代码：一个表格由开始，结束。表示表的一行，一个表有多少行，就有多少个。表示行内的一个单元格，某行有多少个单元格，该行内就有多少个可将表格第一行的td元素改为th。2可以利用表格来设计网页的版面。3注意：表格行单元格用户只能对单元格操作，包括：在单元格插入表格、表单、另一张网页。若在一个网页中加入时，该网页的扩展名必须为.asp。4文档工具栏的【可视化助理】按钮当选中表格时，会显示表格宽度和表格边框。5表格的应用 排序表格 导入表格式数据：文本文件-表格 利用表格制作长为400的水平线、垂直线水平线：制作1行1列的表格，设置表格的宽度为400，边框为0；单元格的高度为2，背景色为黑色。垂直线：制作1行1列的表格，设置表格的宽度为2，边框为0；单元格的高度为400，背景色为黑色。3.3 使用框架布局网页1框架集文件的作用：将浏览器分割成若干个小窗口，每个小窗口用于显示一个网页文件。2创建框架集和框架 执行“文件/新建”，创建框架网页。 设置框架和框架集的属性：每个框架对应着一个网页文件。 执行“文件/保存全部”，保存框架集文件以及各个框架对应的文件。3选择框架和框架集在【框架】面板中，单击某个框架的内部，就选中该框架。单击某个框架集的外边框，就选中该框架集。4注意事项 不管选择框架或框架集，【设计】视图总显示框架集文件。 将插入点放置在框架中，【设计】视图显示该框架对应的网页文件。第4章 插入文本和图像4.1 在网页中插入文本1基本标签：页面属性标签：段落标签：段内换行标签：水平线标签：图像：标题标签： 空格字符： 2插入动态日期var today=new Date();/若指定日期为星期天，则today.getDay返回0；/若指定月份为1月，则today.getMonth()返回0。document.write(日期：,today.getYear(),-, today.getMonth()+1,-,today.getDate(),);document.write(时间：,today.getHours(),:, today.getMinutes(),:,today.getSeconds(),);switch (today.getDay() case 0: weekday=星期日; break; case 1: weekday=星期一; break; case 2: weekday=星期二; break; case 3: weekday=星期三; break; case 4: weekday=星期四; break; case 5: weekday=星期五; break; case 6: weekday=星期六; break; document.write(weekday);3表示颜色有三种方式：英文单词、十六进制、RGB函数，例：Red，#FF0000，RGB(255,0,0)均表示红色。4.2 项目列表与编号列表若把每个段落作为一个列表项，则把改写成与即可。1项目列表：使用ul元素定义，例： 解放思想 实事求是 与时俱进2编号列表：使用ol元素定义，例： 解放思想 实事求是 与时俱进3创建多级列表 选取列表项目文字，生成第一级列表。 选取次级项目文字，单击【文本缩进】按钮，生成次级列表。4.3 在网页中插入图像1图像的格式 网页中图像的格式可以是：GIF、JPEG、BMP、PNG；一般采用GIF、JPEG。 GIF格式最多只能256色，图像文件短小，下载速度快； 同一图像的GIF格式最小，JPG次之，Bmp格式最大（可使用ACDSee转换）。2. 制作图文混排效果将图像的对齐方式设置为“左对齐”和“右对齐”，再设置图像的垂直边距与水平边距。3插入鼠标经过图像：当鼠标经过图像时，图像会发生相应的改变4. 插入图像占位符5. 插入导航条：由多个文本超链接或多个图像超链接组成制作由多个图像超链接组成的导航条，也可使用【导航条】命令。第6章 使用CSS样式美化61 CSS样式表概述一、CSS样式表的作用CSS真正实现了网页内容和格式定义的分离，通过修改CSS样式表文件就可以修改整个站点的风格。二、样式表（CSS）类型内部（嵌入式）样式表外部样式表1嵌入式样式表： 进入某个网页，打开“CSS样式”面板,在“新建CSS规则”对话框中，选择仅对该文档。 语法格式： CSS注释方式：/*/，不能用/ 每个样式表可包含3类选择器：标签、类名、ID名。选择器选择器定义格式应用选择器作用域标签（元素）元素样式表定义例：pcolor:red自动应用整个网页的所有同名元素类名.类名样式表定义例：.chencolor:red例：应用该类名的元素ID名#ID名样式表定义例：#chencolor:red例：应用该ID名的元素 在Dreamweaver CS4中，新建CSS规则，就是新建一个选择器。2外部样式表：特点：独立存在于.CSS文件中，让多个网页共享的样式表。创建.CSS文件：.打开“CSS样式”面板,在“新建CSS规则”对话框中，创建一个“选择器”，并选择“新建样式表文件”。.进入该样式表文件，在其中创建其它“选择器”，选择“仅对该文档”。把.CSS文件应用到网页中。进入某一个网页打开【CSS样式】面板，选择 “附加样式表”。三、具有复合内容的选择器1定义指定范围内的元素规则：在元素名称中间用空格隔开。 例如，定义单元格内的水平线为红色。2同时定义多个选择器：多个选择器可以共用一个样式表定义，例： td,.c01,#chenfont-size:12pt;font-family:宋体四、选择器定义方法1设置类型参数行高：可为网页设置行间距修饰：可去掉超链接的下划线2设置背景参数背景图像：可为网页设置背景图像附件：可使背景图像不随内容滚动重复：决定背景图像的重复显示方式 设置区块参数：设置文字段落的文字间距、对齐方式、首行缩进。 设置边框参数：可设置每条边的宽度、颜色及样式。 设置列表参数：可重新定义项目列表的符号、编号列表的编号。 设置扩展参数：可控制鼠标的形状、以及对文字或图片作特效处理。第5章 制作精美的网页一、插入导航条由多个文本超链接或多个图像超链接组成制作由多个图像超链接组成的导航条，也可使用【导航条】命令二、插入Flash动画1Flash文件格式fla格式：Flash源文件，可以在Flash中打开和编辑的文件。swf格式：fla文件发布后的格式，称为播放文件，可以由Flash播放器播放。exe格式：fla文件发布后的格式，可直接在Windows环境下运行。2插入Flash SWF文件插入SWF动画时，为了使动画大小与设置的尺寸严格匹配，可选择属性面板的“严格匹配”。3插入FlashPaper文档 FlashPaper 2的工作原理就是 用FlashPaper虚拟打印机将可打印文档（如word、excel）转换为SWF或PDF文档，并且转换后的文件具有很强的保密性，可以防止浏览者进行复制粘贴。 用户只需要将一个可打印文档直接拖放到FlashPaper应用程序窗口，就能够将它转换为FlashPaper文档（SWF和PDF格式），其中，FlashPaper SWF文档可插入到网页中。 FlashPaper文档(SWF和PDF格式)也可以作为一个单独的文件查看，使用Flash Player或某种浏览器可查看FlashPaper SWF文档，使用Adobe AcrobatReader可查看PDF文档。4插入Flv视频三、插入其他媒体文件四、插入音频音频格式常用：WAV、MIDI、MP3、WMA、RM1插入背景音乐：在与之间加入如下代码：2插入音频播放器五、插入视频视频的常用格式：avi，rm，mpeg，mov，wmf，asf，csfcsf格式的文件使用csf播放器，rm和rmvb格式的文件使用realplayer播放，其余格式的文件使用暴风影音。注意：在网页中播放音频视频，系统必须安装相应的播放软件。第7章 使用超链接和层71 超链接的基础知识1HTTP（超文本传输协议）：Internet上传送网页时使用http协议，它可以传送文本、声音、图像、动画等多种形式的信息。2URL（统一资源定位器）：Internet上每一个网页都有它自己的地址，称为URL。格式：协议：/主机域名：端口号/路径/网页文件名 协议：/服务器名：端口号/路径/网页文件名默认端口号：HTTP为80，FTP为21。例：/default.asphttp:/localhost/stdx/default.asp3绝对路径和相对路径绝对路径：由http开头的完全路径相对地址 根相对路径：以当前网页为基础，并以“/”开头。文档相对路径：以当前网页为基础。创建对其它站点网页文件的链接必须使用绝对地址，创建对站点内网页文件的链接一般使用相对路径。72 创建超链接1创建超链接 文件链接：（链接的载体可以是文本或图像） 文本或图像当超链接的目标文件为文本文件（txt）、图像文件（jpg，gif）和网页文件（asp，aspx，jsp，php，htm）以外的文件时，就成为文件下载。若小图像：当点击小图时，便可查看大图。 电子邮件链接： 文本或图像 空链接文本 命名锚记链接：当单击网页左面的一个超链接，就会自动跳转到网页右面的相关行中。步骤：（1）在网页右面的相关行内插入命名锚记：（执行“插入/命名锚记”）文本（2）在网页左面创建到各命名锚记的链接文本 脚本链接格式： 意义：在网页文件中创建脚本链接，可以调用本网页文件内的某个函数。2给超链接指定提示与目标文本3有关Javascript语句 产生输出对话框:window.alert(字符串); 打印：window.print(); 前进、后退：window.history.forward(); window.history.back(); 加入收藏：window.external.AddFavorite(,网易) 关闭窗口Window.close() 定义函数：function 函数名（形参表） 7.4 使用层一、认识层（AP DIV） 层可以包含文本、图像、插件，甚至其它的层。 层可以嵌套与重叠，通过【首选参数】才能实现层的嵌套。 Dreamweaver在默认的情况下是用标签创建层。二、层的属性设置1Z轴 主要设置层在层重叠中的顺序，Z轴越大，层的位置越靠上。 当Z轴取正值，则层置于页面内容之上；当Z轴取负值，则层置于页面内容之下。 层嵌套不受Z轴影响，即子层总位于父层之上。2可见性Default：在默认情况下，当前层会继承父级层的可见性。Inherit：表示当前层会继承父级层的的可见性。Visible：显示层及其中的内容，不管其父级层是否可见。Hidden：隐藏层及其中的内容，不管其父级层是否可见。三、层的操作1调整层的大小2层的对齐四、层与表格的相互转换1 对网页布局可采用的方法：表格、层和CSS。2在确保层没有重叠后，就可以在层和表格之间来回转换。 将层转换为表格时，要求相邻层的边框重叠或距离很小，转换后会额外生成空单元格。最精确：如果层之间有间距，则将间距转换为空单元格。最小：如果层之间有间距，则将间距合并到有效的单元格中。 将表格转换为层时，要求每个单元格必须有值或有背景颜色，转换后的层与单元格能严格对应。75 使用Spry布局网页1使用Spry菜单栏2使用Spry选项卡面板3使用Spry折叠面板执行【插入】|【Spry】|【Spry折叠式】4使用Spry可折叠面板执行【插入】|【Spry】|【Spry可折叠面板】第8章 在网页中添加行为81 行为的基础知识1行为：指一个事件所触发的动作。行为由事件和它关联的动作组成的。2为一个对象添加行为选择一个对象 选择一个动作 选择一个事件说明：同一个事件有多个动作时，将按【行为】面板出现的顺序执行这些动作。3什么叫动作？动作是一个预先编写好的javascript函数，这个函数能够完成特定的功能。82 常用的动作1预先载入图像：将图像文件预先下载到Temporary Internet Files目录下。2交换图像和恢复交换图像3显示-隐藏元素：网页元素主要指图像或层使用“显示-隐藏元素” 行为，实现预览缩略图的效果。4设置导航栏图像：将一个图像设置为导航栏图像5状态栏文本6调用Javascript：用于调用一个Javascript语句7转到URL：用于在当前窗口或指定的框架中，打开一个新的页面。8打开浏览器窗口：即在一个新窗口中打开页面window.open(网页文件名，窗口风格);、9播放声音10 弹出信息：即弹出一个对话框 window.alert(字符串);83 层、时间轴和行为的综合应用（在Dreamweaver8完成）1动画实现的原理将不同的画面或不同位置的同一个画面串连起来播放，就形成动画。2时间轴面板 时间轴只能移动层，换句话说，利用时间轴可将层从当前位置沿着轨迹移动到另一位置。 相关概念：动画条：帧、关键帧动画通道行为通道播放头 显示时间轴显示第1个时间轴：选择“窗口”“时间轴”。显示第其它时间轴：选择“修改”“时间轴”“添加时间轴”。或右击时间轴，从快捷菜单中选择“添加时间轴”3创建层动画用关键帧（拖动方式）创建层动画用录制路径创建层动画4制作滚动字幕时间轴只能移动层，换句话说，利用时间轴可将层从当前位置沿着轨迹移动到另一位置。起始帧与中间帧的距离越长，FPS越小，则动画向右运动的速度越慢。第9章 使用交互式表单一、表单的属性 Action: 当用户单击“提交”按钮时，将执行 Action指定的asp文件或E-mail。Method: 提交表单的方法，可以是get或post。Target：二、表单控件1文本框、密码框、文本区域2隐藏框文本框的disabled属性：表示禁止使用，其中的文本呈灰色。不能将文本提交给服务器。隐藏框：整个控件被隐藏，但可将文本提交给服务器。3普通、提交、重置按钮4单选按钮与单选按钮组通常成组出现，用户只能从中选择一个。多个单选按钮的name属性值相同，value属性值不同，若name属性值不同，则可实现多选。name属性代表数组名，各个单选按钮的下标按创建的顺序依次给出（第1个单选按钮的下标为0）。5复选框与复选框组 通常成组出现，用户可以从中选择一个或多个。 一般地，多个复选框的name属性值相同，value属性值不同。6图像域：用一张图像实现“提交按钮”的功能7下拉菜单框：用于显示多个项目，用户只能从中选择一个。每个项目包括：文本、Value值，但Value值是纯文本。8列表框：用于显示多个项目，用户可以从中选择一个或多个。9跳转菜单：访问者只要在下拉菜单或列表框中选择某一个选项，就可以打开该选项对应的URL。分类：下拉菜单框、列表框 每个项目包括：文本、Value值，但Value值是url。10文件域包含文件域的表单必须加入enctype=multipart/form-data，此时，若要将表单各控件的value值传递给服务器，提交方法必须是get。三、检查表单为表单中的文本域（包括单行、多行、密码框）设置有效性规则，确保向文本域输入正确的数据。四、ASP基础1ASP文件的组成Html标签Vbscript脚本：由与括住Javascript脚本：由与括住ASP脚本：由括住#include命令说明：如果一个文件含有ASP脚本、#include命令中的一个，则该文件的扩展名必须为.asp。2request对象格式：变量名=request.form(控件名称)功能：取得从客户端传递过来的各控件的value值。注意：控件不含普通按钮、重置按钮，若不存在指定的控件名称，则返回。3response对象响应客户机的请求，并将响应结果返回到客户端。等价于 第10章 模板和库一、 使用模板1创建模板：Dreamweaver会将模板文件（dwt）自动保存在站点根目录下的Templates文件夹中。2向模板插入可编辑区域。3创建基于模板的网页：网页中包含可编辑区域和锁定区域。4分离模板：将基于模板的网页从模板中分离出来，使之成为一个普通网页。5更新基于模板的网页：当模板被更新时，基于该模板的全部网页会随之更新。二、使用库项目1什么叫库项目？可以把网页中的任意元素（包括文本、图像、表格、表单、声音、动画）创建为库项目，一个库可包含多个库项目。2向库插入库项目3向网页插入库项目4更新基于库项目的网页：当库项目被更新时，基于该库项目的全部网页会随之更新。第11章 javascript基础一、Javascript概述 1Javascript是一种区分字母大小写的语言，且Javascript一般采用小写字母。2Javascript淡化变量的数据类型，变量声明不是必须的。3Java是sun公司的产品，但Javascript是Netscape公司的产品。Javascript的语法介于java与vbscript之间。4Javascript脚本在客户端执行。二、Javascrip语句 1定义变量: var 变量名=初始值;2输出语句:document.write(表达式, 表达式);3 if语句：if (表达式) 语句1 else 语句24 switch语句： switch(表达式) case 常量1：语句组1; break; case 常量2：语句组2; break; default: 语句组n+1; 5循环语句： for语句 while语句 与C语言同 do-while语句6定义函数：function 函数名（形参表） 7存放JavaScript语句的3个地方 直接放在与中。 放在函数中。 放在控件声明的某个事件名后面。如：当javascript语句为函数调用语句时，“javascript:”可以省略。三、javascript对象1javascript对象： frame document 表单 表单控件window location history 2. javascript对象的层次结构：最高一层是window，在客户端表示某一个对象原则应从window开始，但window可以省略。四、window对象 产生输入对话框:x=mpt(提示信息 ,默认值); 产生输出对话框:window.alert(字符串); 产生自定义对话框:window.open(网页文件名，窗口风格); 关闭对话框：window.close(); 打印：window.print(); setTimeout方法：格式：window.setTimeout(函数名(),延时时间);变量名= window. setTimeout(函数名(),延时时间);说明：变量名为一个计时器标识；延时时间：单位：毫秒例：在javascript脚步本中显示年月日、时分秒、星期几。 var today=new Date();/若指定日期为星期天，则today.getDay返回0；/若指定月份为1月，则today.getMonth()返回0。document.write(日期：,today.getYear(),-, today.getMonth()+1,-,today.getDate(),);document.write(时间：,today.getHours(),:, today.getMinutes(),:,today.getSeconds(),);switch (today.getDay() case 0: weekday=星期日; break; case 1: weekday=星期一; break; case 2: weekday=星期二; break; case 3: weekday=星期三; break; case 4: weekday=星期四; break; case 5: weekday=星期五; break; case 6: weekday=星期六; break; document.write(weekday); clearTimeout方法：格式：window.clearTimeout(计时器标识);五、window对象的子对象1. document对象的属性 bgColor fgColor title2location对象的方法window.location.replace(文件名)3history对象的方法window.history.back() window.history.forward() 六、类型转换函数String()：将其它类型转换为字符串。例String(123)=”123”Number()：将其它类型转换为数值。例Number(“123”)=123七、检查表单 为表单中的文本域（包括单行、多行、密码框）设置有效性规则，确保用户向文本域输入正确的数据。 将该动作和onsubmit事件附加到表单，当用户单击【提交】按钮时可以验证多个文本域。 若要检查其它控件是否被选择，则需要用户自行写代码。例：对应的验证代码可为：function check()if (document.form1.no.value=) alert(学号不能为空！); document.form1.no.focus(); return false; if (.value=) alert(姓名不能为空); .focus(); return false; if (document.form1.sex(0).checked=false & document.form1.sex(1).checked=false) alert(请选择性别！); document.form1.sex(0).focus(); return false; var re1=/0-9+$/;/正则表达式，0-9+匹配一个或多个数字字符。 if(!re1.test(document.form1.age.value)|document.form1.age.value=) alert(年龄必须为数字！); document.form1.age.value=; document.form1.age.focus(); return false; if (document.form1.dept.value=) alert(请选择学历！); document.form1.dept.focus(); return false; 八、正则表达式（1）正则表达式：由普通字符、特殊字符组成的一种字符模式，它由正斜杠括住。（2）正则表达式的特殊字符：特殊字符说 明示 例？表示0个或1个字符/ab?/ 表示a，ab*表示