PartI：网页制作基础.ppt

1、Part I 网页制作基础,网站与网页概述、HTML概述、DW简介 文本标记、CSS样式 插入图像、DW站点设置 超链接及其应用 表格的制作与使用 多媒体标记 网页头部设计 表单制作 框架与层,在线测试,实验一：列表嵌套、使用CSS样式格式化文本、滚动文本、建立DW站点、插入图像、图像的滤镜效果、锚点链接、热点链接 实验二：表格与多媒体标记 实验三：交换图像、菜单制作、页面框架、表单制作 实验报告一：多媒体网页制作,理论：18 上机：6,第一讲：网站、网页、浏览器概述,网站、网页、浏览器概述 Web站点 主页 超文本 HTML语言 DHTML XHTML HTML文档的一般结构 标记与标记 网

2、页设计软件Dreamweaver简介 在DW中建立站点 单元练习,网站与网页概述,Internet上的Web站点一般由多个页面组成，可以通过超链接在页面间切换。所有的页面均放在作为服务器的计算机上，服务器向位于客户端发出请求的计算机提供页面请求提供服务。 每个HTML文档对应一个Web页面，页面是浏览器窗口中看到的内容。浏览器是安装在客户端的程序，它解释HTML文档中的代码即可呈现页面。 超文本：是指可以加入图片、声音、动画、影视等内容，可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。,Return,HTML文档的一般结构,说明： HTML是超文本标识语言的英文缩写（Hyper Te

3、xt Markup Language） 一个HTML文档可以只含有定义对象的若干HTML标记和定义样式的HTML标记，即可以没有成对标记，没有成对标记，没有成对标记； 若要定义页面的标题（位于浏览器窗口上），则必须有成对标记，进而必须有成对标记和成对标记。,由成对标记和定义。 网页头部用于标记文档的一些特殊信息，它不会显示在页面上； 页面标题是头部的内容之一，由成对标记和定义； 应用于页面中对象的样式也通常在页面头部，由成对标记和定义； 单标记也通常包含在页面头部，它可以指定搜索引擎作为索引的关键词、被链接页面进入或离开时的效果等。,Web页的头部,Web页的主体,Return,是用户在浏览时

4、实际看到的文档正文信息。在主体内部，可以存在文字、超链接、标题、图形、图像、地图、表格以及用户实际看到的任何东西； 页面的主体由成对标记和定义，即它们作为显示信息起始的位置和结束位置； 定义页面中的对象都是由相关标记完成的，即HTML文档的主体主要由定义对象的HTML标记组成。,Return,静态网页与动态网页,ASP网页中包含有不能被IE解释的代码，需要在服务器端执行后再将代码传送到客户端，再由IE解释执行。 HTML网页的源代码是直接下载至客户端，而ASP网页的脚本代码不是直接下载到客户端，因而ASP网页具有保密的特点。,HTML基本元素,1标记符 HTML用于描述功能的符号称为标记，如h

5、tml，body，table等； 标记在使用时必须用一对尖括号起来。有些标记是成对出现，有些则为单标记； 对于成对标记，无斜杠的标记表示该标记的作用开始，有斜杠的标记表示该标记的作用结束； HTML标记使用时不区分大小写； 所有HTML文档都必须用特定的HTML标记起头。,设置搜索引擎搜索的关键词： meta name=“keywords” content=“关键词1,关键词2,关键词n,标记：指定搜索引擎作为索引的关键词等量,设置网页到期时间： 时间格式：例如：Mon,12 May 2050 00:20:00 GMT,定时跳转到指定的页面（跳转至页面，即实现页面刷新；单位为秒）： ,告诉搜索

6、引擎本页面的制作者 ,Font表示字体，Base表示基本之意，称为基准文字标记，也是单独标记，位于文档头部，用于设定页面中文本的字体、大小和颜色，格式使用如下： 其中，Face为字体属性、Size为大小属性、Color为颜色属性。 注意：在网页设计软件Dreamweaver（见1.3节）编辑时，文本的字体、大小和颜色等效果只有在浏览网页时才会显现出来，这不同于其他所见即所得的HTML标记（如等）。,标记：设定页面文字的字体、大小和颜色,Return,一个标记，为了明确它的功能，往往用一些属性参数来描述，对这些属性参数的规定就是语法。 标记参数的具体值都要加西文引号。 例如，要使段落内容居中，正

7、确的写法为： 段落内容居中示例 单标记单标记能完整地表达意思，这类标记的语法是： 最常用的单标签是，它表示换行。 双标记双标记由“始标记”和“尾标记”两部分构成，必须成对使用，其中始标记告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标记告诉Web浏览器在这里结束该功能。始标记前加一个斜杠（/）即成为尾标记。这类标记的语法是： 内容,语法,其中，“内容”部分就是要被这对标记施加作用的部分。 例如想突出对某段文字的显示，就将此段文字放在一 标记中。 第一： 标记属性许多单标记和双标记的始标记内可以包含一些属性，其语法是： ,网站与Web服务器 Web服务器与FTP服务器的区别 网页文件通常

8、以html、asp、aspx等作为扩展名 网页是指所看到的页面效果。浏览网页的过程实质上是浏览器程序解释从服务器端下载得到的HTML代码的过程。 验证：将网页另存到本地硬盘上，然后用IE打开该网页文件，也是浏览。,网站、网页与浏览器,通常我们看到的网页，通常以.htm作为后缀的文件，俗称HTML文件。其它类型的网页，如以 .asp，.php，.jsp为后缀名。 网站是指存放在网络服务器上的完整信息的集合体，它包含许多网页，这些页以超链接方式连接在一起，形成一个整体，描述一组完整的信息。 网站主要由主机、域名、网页等组成。建设网站，就是在自己的计算机上安装Web服务器，设计制作自己的网页并且发布

9、出去。,DHTML技术,DHTML是Dynamic HTML的缩写，它以HTML为基础，运用DOM将页面元素对象化，利用CSSL控制这些对象的CSS属性以达到网页的动态视觉效果。具有特点如下： 以开发具有动态和交互性效果的网页为目的； 以HTML为基础； 以文档对象模型为核心； 以脚本为灵魂； 以CSS技术为重要手段。,Return,关于SGML、XML和XHTML,Return,XML 是标准通用标记语言（Standard Generic Markup Language，SGML）的一个子集，着重描述的是 Web 页面的内容。 HTML 着重描述 Web 页面的显示格式，XML 既不是 HT

10、ML 的升级技术，也不是 HTML 的替代技术，它们有各自的应用领域。 XHTML 可以认为是 XML 版本的 HTML。以下是XHTML 相对 HTML 的几大区别： XHTML 要求正确嵌套； XHTML 所有元素必须关闭； XHTML 区分大小写； XHTML 属性值要用双引号； XHTML 用 id 属性代替 name 属性。,Return,XHTML 所有元素必须关闭； XHTML 区分大小写； XHTML 属性值要用双引号； XHTML 用 id 属性代替 name 属性。,Dreamweaver站点管理,新建站点：主要是设定站点名称和指定网站所在的文件夹位置，方便网页文件的编辑（

11、作为文件打开或存储的默认路径）和网站的上传等工作。 ASP网页必须在站点中调试、浏览，不同于HTML网页。因为ASP网页文件中可能包含有IE浏览器不能直接解释的某些代码。,简单的站点设置,简单的站点设置,只需在“高级“选项中设置站点名称和站点文件夹路径,Return,Return,单元练习,1.在HTML中，对于成对标记，无斜杠的标记表示该标记的作用开始，有斜杠的标记表示该标记的作用_。 2. 在HTML中，标记的属性值可以加一对双引号，也可以加一对单引号，还可以不加。 3. 在DW中输入HTML标记时，必须先将活动光标置于设计窗口。 4. 在网页文档的不同部分，其注释方法是相同的。 5如果某

12、个HTML标记使用多个属性，则各个属性名值对之间至少应有一个空格。,超文本与一般的文本相比，有何特点？ Web服务器是如何工作的？ 网页与网站有何区别？ 网页制作三剑客指的是什么？ 浏览器的主要功能是什么？ Word文档与网页的区别是什么？试列举组成网页的基本元素 如查看与网页对应的HTML文档？ 能上网的计算机与Web服务器的差别是什么？,第2讲 文本与图像标记、CSS样式及其应用,文本标记与相关操作 列表 滚动文本 CSS样式的使用： CSS样式不仅可以控制页面元素的外观，还可以实现页面布局。 CSS滤镜 纯CSS制作的菜单 单元练习,指定文本的字体、颜色和大小,文字 Face属性设定字体

13、； Color既可用代表颜色的英语单词，也可以用色彩代码； Size的单位是字号，取值1-7,Return,段落标记与换行标记,在DW代码窗口中编辑时，按下Enter键，浏览器上并不会形成段落。 在DW设计窗口中编辑时，按下Enter键，则会产生一个新的段落，即在代码窗口中会出现标记。 段落格式采用单个标记而没有结束标记，因为一个的开始就意味着上一个的结束。 有一个属性align，它用来指明字符显示时的对齐方式，一般值有center，left和right 3种。 产生换行 用法比较: 标记中使用的属性会作用于整个段落；隐含产生一个空行。,Return,背景色：bgcolor 前景色：text

14、background:背景图像 链接颜色：link、vlink、alink 页边距: leftmargin等,页面属性的设置对应于主体标记的属性,Return,和标记,Size属性：文字大小； Color属性：文字颜色。,Return,文本,标记加粗文本，成对标记,特殊文本,现象：在DW代码窗口中编辑文本时，直接按空格键输入多个半角的空格字符，在DW设计窗口中并不能全部显示；在设计窗口也不能输入连接输入半角的空格（最多只能输入一个）。 要全部显示输入的空格，可在代码窗口中连接输入（DW有联机支持功能）。 注意: 在代码窗口或设计窗口中输入全角的空格符，则会完全显示。,Return,平方符与立方

15、符的输入：,上标与下标标记：X X,列表类型分为有序、无序两种。有序列表也称编号列表，需要使用成对的标记和若干标记；无序也称项目列表，需要使用成对的和若干标记。 项目编号的一个重要属性type表示项目前的符号 编号列表中的重要属性：start 在DW中将光标置于设计窗口选择“文本”工具栏选择“列表”工具逐行输入文本。此种方式较方便； 如果输入文本后再选列表工具，则需要改写自动建立的代码 代替 的效果是每个项目之间多一个空行例,列表标记,Return,滚动文本,说明：第二部分的学习，将会定义该对象的如下两个事件： OnMouseOver OnMouseOut 实现对滚动效果的控制（滚动与停止）。

16、,对象,网站首页常用的表现效果。 在DW中只能写代码，没有相应的工具。 滚动的对象可以为文字，也可以为一组图片（电影胶片效果）。 主要属性: Direction,Return,在HTML文档中应用CSS样式,内联样式：样式通含于定义对象的标记内。 内部样式：样式在本页面头部的标记内。 外部样式：样式存放在一个名为.css的文件中。 定位与显示属性：网页元素在页面中的位置与显示。,CSS是1996年底产生的新技术，是Cascading Style Sheet的缩写，译名为层叠样式表。CSS是一组样式。CSS不属于HTML，把它应用到不同的HTML标记即可扩展HTML的功能。如调整字间距、行间距、

17、取消超链接的下划线效果、多种链接效果等，是原来的HTML标记无法实现的效果。 由于样式的引入，HTML新增了和两个标记，对几乎每一个元素都新增了3个属性：style、class和id. 使用CSS技术除了可以在单独网页中应用一致的格式外，对于大网站的格式设置和维护更具有重要意义。将CSS样式定义到样式表文件中，然后在多个网页中同时应用该样式表中的样式，就能确保多个网页具有一致的格式，并且能够随时更新（只需更新样式表文件），从而大大降低网站的开发和维护工作量。,通过style属性直接套进定义对象的HTML标记中去。 例： 文字 在DW中虽然有联机支持功能选择样式属性（值），但没有通过样式面板那样

18、直观（即有中文解释）； 本用法几乎可以应用于任何HTML标记； 样式由若干对样式属性名和样式属性值组成，名值对之一间以分号分隔； 内联样式因为与需要展示的内容融合在一起，因此会使网页维护工作非常麻烦，实际中较少用。,内联样式,内部样式,在HTML文档头部，通过标记定义样式； 内部样式的含义是指样式定义位于本文档的头部； 通用样式通过class属性应用HTML元素； 在DW中，分别借助于样式面板和属性面板定义和使用样式。, 内部样式示例 .bt font-family: 黑体; font-size: 24px; text-align: center; color: #0000CC; .zw fo

19、nt-family: 仿宋_GB2312; font-size: 16px; body font-size: 12px; /* 主体部分默认字体是9px*/ 我的祖国 ,实验一,Return,Selector定义样式作用的对象，可分为如下三类： 通用类：样式名由用户定义，可应用所有标记（由用户指定应用的对象），定义时在类名有一个句点，通过class属性引用； HTML标记类：重新定义特定HTML标记的外观，如body、li、td 等（否则使用默认值），是自动应用； 虚类（或伪类）：定义链接样式，又分为四种（a:link、a:visited、a:hover和a:active），是自动应用。,内部

20、样式的定义,Selectorproperty1:value1;property2:value2;,property为CSS样式属性名，value为CSS样式属性值； 一对花括号内包含若干对“CSS属性名:值”、且属性值一般加上双引号； 每对属性名:值可单独占一行，并可加上注释。 注释方法： /*注释内容（可以多行）*/ 说明：CSS样式的注释不同于body部分对HTML标记的注释！,几点说明,外部样式,保存在一个扩展名为.css的文件中，在HTML文档的头部里通过LINK标记链接后，即可在主体部分的HTML标记里使用该样式文件里定义的样式。 在本文档链接外部样式文件后，借助于DW的样式面板可以

21、看到该文件里的样式。 独立的CSS样式文件中不能包括标记。 CSS样式文件可以借助于DW软件建立，其方法是使用“文件”菜单。,Return,CSS样式与DW样式面板,编辑一个HTML文档时，样式面板才可用（字体不变灰）； 如果CSS样式面板没有展开，可按快捷键Shift+F11，或者使用DW的“窗口”菜单，选择“CSS样式； 折叠CSS样式面板，也是按Shift+F11。或者将鼠标移至上方的CSS文字处，此时会出现带下划线的超链接，单击即可折叠。两次单击，又会展开。,第一项，定义可被任何标记引用的样式； 第二顶，定义特定标记的外观样式，如body、td等； 第三项，定义虚类选择器的样式。如超链

22、接的样式设定。,注意：第一项定义的样式通常使用Class属性应用，第二、三定义的 样式是自动应用。,样式文件和内联样式的使用,一、层叠样式表文件 建立方法：将CSS样式存放在一个.CSS文件中。 应用样式文件的最大好处是可以在每个HTML文件中引用这个CSS文件(从而引用其中定义的样式)，以保证整个站点的HTML文件在风格上保持一致，避免重复的CSS属性设置，而且容易修改,在Dreamweaver中，选择“窗口”“CSS样式”，即可定义样式并保存到一个.CSS的文件中。,二、样式文件的使用 分两步： 1.链接。 在标记里使用标记 其中rel=”stylesheet”表示引用文件和当前页面的关系

23、，即引用文件修饰当前页面文件 2.引用。在标记里相关标记(如、等)中通过Class属性引用某个样式名： 正文,2.在标记、等标记里临时定义和使用。例如： 演示样式的使用 演示样式的使用,样式的其它使用方式,1.在头部里通过定义.样式，然后在主体内引用。 样式是带号.的自定义名称来开头，然后再把标准的属性及属性值写在大括号中,CSS定位属性和显示属性,Position属性：取值static（默认值）、relative或absolute,Static：按HTML格式规则定位； Relative：相对于页面上前一个元素的尾端； Absolute：位于框架或浏览器窗口的左上角绝对位置。,Top和Lef

24、t属性：定义元素的开始位置，既包括与左上角之间的距离（绝对定位），也包括相对前一个元素尾端的距离（相对定位）。,Width和Height属性：定义元素所占空间的大小。,Z-index属性：用来控制元素的堆叠，值较高的元素将覆盖值较低的元素。,Return,Text-Decoration属性：修饰文本，其值有如下5种：,UnderLine：下划线； OverLine：上划线； Line-Through：删除线； Blink：闪烁； None：无修饰。,Float属性：设置一个元素的文本环绕方式，其值有如下3种：,Left：元素浮动到左边，则右边可以有文字环绕； Right：类似地，元素左边可以有

25、文字环绕； None：默认值，表示两边都不可以有文字环绕。,Return,Visibility属性：元素是否可见，其值有如下3种：,Visible：可见； Hidden：隐藏； Inherit：继承，为默认值。 注意：隐藏元素时，仍然为元素保留原有的显示空间。,Display属性：确定一个元素是否绘制在页面上，当取值为none时，不但元素看不见，而且元素将退出当前的页面布局层，不占用任何空间。,注意：静态设置这两个属性并没有什么实际意义，但在脚本中（见第二部分）动态更改这两个属性时，却可以获得很多实用的效果。,显示属性：visibility和display,两个重要CSS滤镜的使用,CSS滤镜

26、是CSS样式的扩展，它能将特定效果应用于文本容器、图片或其他对象。 CSS滤镜通常作用于HTML控件元素：img,input,marquee,span,table,td,textarea, div等。 使用filter属性定义滤镜效果，格式如下： filter:滤镜名称(参数1:值1,参数2:值2,),在DW中的样式定义中定义滤镜,说明：以前编辑样式时主要在“分类”的第一项，现在是第后一项。,滤镜作为样式的一部分,对空间文字应用Shadow滤镜,参数color表示阴影的颜色，可使用代表颜色的英文单词，如red、blue、green等。 参数direction表示阴影的方向，取值0360。,fi

27、lter:shadow(color=?,direction=?),Shadow滤镜和Alpha滤镜效果,Shadow滤镜的两个参数：Color和 Direction Alpha滤镜的两个参数：Opacity和Style,参数Opacity表示不透明度，取值范围为0100。 Opacity=0，则表示完全透明，此时完全看不清图像，而只能看到背景； Opacity=100，则表示完全不透明，此时只能看到原图像，而看不见背景； Opacity取其它值，则部分能看清图像，即是图像与背景的迭加效果。 参数Style表示透明区域的形状特征，取值0、1、2、3，分别代表均匀渐变、线性渐变、放射渐变和矩形渐变

28、。,对图像使用Alpha滤镜,filter:alpha(opacity=?,style=?),Return,引言：导航条一般位于页面顶部或左部，方便易用的导航是网站成功的关键。前面介绍过菜单的制作，其方法是使用DW的行为面板。,Return,CSS 应用2*导航条（水平菜单、弹出式菜单）,使用纯CSS制作的导航条，具有风格一致的鼠标悬停效果，能使访问者对网站有合理的控制感。 CSS的应用是非常多的,是网页制作的主流。,水平菜单,设计要点：设置超链接的（外观）样式，包括鼠标经过时的状态。,弹出式菜单,样式使用总结,后两种用法中含有多种样式的定义，按名引用；而第一种用法没有样式名。 内联样式的定义

29、在文档头部的标记里；而外部包含在.css文件中，没有任何标记。 所有样式都由“名:值”对组成，并位于一对花括号内。,Return,2. 文字加粗，可使用成对标记_。 A. B. C. D. ,3. 水平居中对应的属性值为_ 。 A. middle B. left C. center D. right,4. 中能自动作用于表格内文本的是_。 A. body B. div C. td D. img E. a,5. 标记只能用于标记内。,1. 应用页面的内部样式（即样式在标记里已经定义），应使用_属性。,单元练习,6. 下列标记中，不是成对标记的是_ A. B. C. D. E. ,1. 标记用于加

30、粗文本。,Return,3. 标记不可以使用style属性实现内联样式。 X,4. 下列标记中，能通过class属性引用CSS点样式的是_ A. B. C. D. E. ,2. 利用DW属性面板修饰文字的颜色时会自动生成一个样式。,第3讲 插入图像、DW站点设置,1. 插入图像 鼠标经过图像 2. 样式的其它用法 4. 文件引用与统一资源定位器URL 5. 单元练习,图像是最早引进Web页的多媒体对象，有了图像，Web可以图文并茂地向用户提供信息。,图像标记,src：规定插入的图像的URL地址，也就是含路径的图像文件名，一般为jpg格式的文件，也可以是gif动画。 title：设定mouse指

31、向图像时显示的文本,用于解释图片。 height和width：分别用于指定图像的高度和宽度，可以与图片原来的宽度和高度不同。 注意：作为背景的图片，其大小是不能改变的，因此会出现剪裁或平铺效果。,在DW的“常用”工具栏里，选择“图像”工具 插入图像的标记是，相关属性如下： Src：图像来源，必选属性 height=n width=n 高度与宽度属性 title=text 浏览网页鼠标置于图像上时出现的提示,当用户的鼠标放在图片上时，图片会自动更换，鼠标离开之后，图片又会恢复原来的样子。 使用DW常用工具栏上的图像工具里的“鼠标经过图像”工具，则会出现对话框，选择用于交换显示的两个图像文件。,交

32、换图像（鼠标经过图像）,说明：鼠标经过图像会增强交互效果。例如，将页面导航的每一功能做成两个图片，设置鼠标经过图像效果。,使用鼠标经过图像工具,在如下的对话框里，只需指定原始图像和鼠标经过图像,说明：制作鼠标经过图像后，会在头部增加一些脚本代码，其中含有如下两个事件： OnMouseOver OnMouseOut 浏览时会提示是否运行脚本代码。,链接到建筑(艺)09的实验一网页,Onload，onabort和onerror对应于设定的子程序，分别用在图像被载入、取消载入和载入出错的情况下各自对应的子程序。 dynsrc：指定要下载的影像片断的URL地址。 controls：设定影像播放的控制接

33、钮。 loop：指定影像片断的播放次数，当loop=1时，影像片断将循环播放直至页面更新。 start：设定何时开始播放影像片断，有3种选择，start=fileopen表示页面载入后即开始播放，默认的就是这种状态；start=mouseover表示当鼠标移到影像上即开始播放；start=fileopen,mouseover表示当有上面两种情况之一发生时就开始播放。,图像标记应用技巧 1) 给图片加边框 边框的颜色默认的是黑色，不美观，而标记也没有设置边框颜色的参数，我们可以通过设置class参数调用CSS达到改变边框颜色的目的。 2) 给图片加动态说明文字 若想制作当鼠标移到图片上出现一行简

34、短说明文字的效果，只需设定title属性值。,3) 图像与文字混排 图文混排主要是设置align参数。 （1）top，middle，center和bottom所产生的效果只是一行文字，在多行文本与图像对齐时要用left和right参数值。 （2）中的对齐参数align所产生的效果是指图片与周围文字的位置关系，而图片在页面中的位置对齐是在图片所在的页面元素中设置的。例如下面这段代码： 图文混排示例 其中，标记中的align=left表示图片的位置在窗口的左端；而中的align=top则表示图片旁边的文字与图片的顶端对齐。 （3）为了避免图片与旁边文字靠得太近不便阅读，可以通过设置hspace参数

35、来控制图片与文字间的距离，一般设置hspace=10（表示图片的左右有10个像素的空白）就能达到较好的效果。,使用绝对路径，如果把整个目录中的所有文件移植到服务器上时，则用户无法访问到使用的资源地址。所以我们最好写成相对路径，从而避免了重新修改文件资源路径的麻烦。 通常，正确的做法是：新建一个文档后，立即保存到站点根目录里（最迟要在引用站点里的素材文件前），再引用素材文件便是相对引用。,相对引用本地站点里的素材文件,网页可以使用本站点中的素材文件，其方式一般是相对引用。网页还可以使用网络中的素材（资源）。 URL（Universal Resource Locator）是表示Web上资源的一种方

36、法，通常可以理解为资源的地址。一个URL通常包括三个部分： (1) 协议代码，通常为http （2）文件在网络中的地址主机域名或IP地址 (3) 计算机里的文件地址（用盘符、文件夹表示）、文件名和扩展名。,Return,统一资源定位器URL,2. 外部样式在使用前应使用_标记连接到本文档。 A. B. C. D. class,3. 标记的必选属性是_ 。 A. width B. height C. src D. class,4. 在DW中建立本地站点是为了相对引用本地的资源文件。,1. 在、等标记里内联样式，应使用_属性。,5. 在标记的src属性里可以使用网络资源文件。,Return,单元练

37、习,6. 网页中引用的素材文件都必须复制到站点目录中。X,超链接是网页里最常用的元素，实现浏览转向功能，即从一个文档跳转到另一个文档。 超链接默认时显示有下划线且为蓝色。鼠标移动到到超链接上时会变为手形，同时在浏览器窗口的状态栏上显示出超链接的目标文件。,第4讲 超链接及其应用,文字链接与图像链接 网站链接、文件下载 锚点链接 使用标记定页面离开和进入时的切换效果 网站导航条设计(热点链接、弹出式菜单) 纯CSS制作的导航菜单 单元练习,href属性用于指定链接到的页面； 被链接的对象为文本时，称为文字链接； 也可以做图像链接，其格式如下： 默认情况下，浏览器会新一个窗口，用于显示网页的内容。

38、通过添加target属性，可以指定网页显示的位置，如当前页内已经定义的框架（见页内框架部分）、当前窗口等。指定网页内容的显示位置，可使用DW的属性面板中的“目标”文本框。,对象,当href的属性值为一个网址时，则链接到该网站的首页； 注意：网址必须前缀 http:/ 当href的属性值不是一个网页文件，例如压缩文件等，则出现文件下载对话框。 如果href属性指定的文件格式是浏览器能够显示或播放的，那么单击超链接时将会直接显示的文件。例如，如将href属性值指定为某个jpg格式的图像文件，那么单击超链接时就可以直接在浏览器中显示该图像。 注意：目前，对于Word文档的超链接经常使用。在链接Wor

39、d文档时，则出现的下载对话框中有“打开”、“保存”两个命令按钮。,Return,链接到网站、文件下载,（1）设置锚点 首先把某段落的起始位置设置为链接位置，格式是： （2）链接到HTML文档的某个锚点处 文字,Return,锚点链接, 其中系统函数(或滤镜)revealTrans()中 duration表示持续的时间，以秒为单位； transition表示转换的效果类型，参数取值有24种，以代号0-23来表示，其中23为随机效果（即前23种效果的某一种）。,标记：设定页面离开和进入时的切换效果,Return,网站导航条设计：先做一个显示网站功能的导航条图像文件，然后利用DW属性面板中左角的热点

40、链接工具 带弹出式菜单的网站导航条：在热点链接的基础上，使用DW的行为面板，做弹出式菜单。,超链接的高级应用弹出式菜单,鼠标经过时出现菜单项，不同Word等软件的系统菜单（须单击才出现菜单项）。 使用DW的行为面板。 对不同的菜单项做链接。,说明： 前面介绍过热点链接的扩充。 也会涉及OnMouseOver和 OnMouseOut两个事件。,使用DW行为面板设计弹出式菜单,Return,在DW中编辑弹出式菜单,默认情况下，弹出式菜单的菜单项与该菜单没有对齐，此时双击“显示弹出式菜单”或右键“弹出式菜单”选择“编辑行为”，然后设置菜单项的位置或外观。,2. 超链接必须使用的属性是_ A. sty

41、le B. src C. target D. 都必须使用,3. 取消超链接默认的下划线，要定义其CSS属性text-decoration值为_ 。 A. line-through B. none C. overline D. underline,4. 文件下载是使用超链接标记实现的。,1. 利用标记设置锚点，必须使用_属性。,5. 可以对图像或其一部分区域做超链接。,单元练习,6. 超链接标记是成对标记 。,6. 标记的属性有_ A. content B. http-equiv C. name D. keyword E. Page-Enter,Return,表格既可用于显示数据，也可用于页面元

42、素的定位。,第5讲 表格制作,表格定义 表格的对齐 表格的背景 表格的尺寸 表格嵌套 练习题,说明：表格标题的位置默认为表格上方正中间。, 定义标题 定义表格 行定义标记，一行由若干单元格组成 定义单元格标记 单元格里的内容(文本或图像),表格定义的三个层次,一般情况下，表格的总长度和总宽度是根据各行和各列的总和自动调整的，如果要直接固定表格的大小，可以使用方式： width和height属性分别指定表格一个固定的宽度和长度，可以用像素来表示，也可以用百分比（与整个屏幕相比的大小比例）来表示。 例如， 是一个长为200像素，宽为100像素的表格。,Return,注意：如果在标记里指定了尺寸，但

43、单元格里插入图像的实际尺可能寸会大于它，在使用表格布局时应尽量避免这种情况。其方法是插入图像时使用width、height属性定义其大小。,表格尺寸（大小 ）设置,Return,对齐属性,表格中数据的排列方式有两种，分别是左右排列和上下排列。 水平对齐属性：align 可分为3种：居左（left）、居右（right）和居中（center）； 垂直对齐属性：valign 可分为上齐（top）、居中（middle）、下齐（bottom）和基线（baseline） 两种对齐方式当然可以应用于标记和标记。 Align也可应用于标记，表示整个表格在浏览器窗口的水平对齐方式，其默认为居左。 标记没有Val

44、ign属性，即表格没有垂直对齐属性。,注：成对标记和可以实现页面元素水平居中。,表格背景设置,表格背景设置可分为背景色和背景图片，它们分别对应于bgcolor和background属性。背景属性可应用于或或标记，即可以对整个表格或某行或某个单元格应用背景。 在DW中，选中整个表格，需要将鼠标慢慢移动到最上方且鼠标上出现一个表格样式时，在属性面板中的设置才是对整个表格的； 对表格中的多个单元格设置，需要先按Ctrl不放，再单击若干单元格。 应用背景图片时，如果表格尺寸与图片尺寸不吻合，则可能会出现平铺或剪裁效果。,Return,1. 单元格合并 先通过拖动操作选中要合并的若干个连续的单元格，然后

45、选择“修改表格合并单元格”。 注：快捷键是 Ctrl+Alt+M 2. 拆分单元格 先选中某个要拆分的单元格，然后选择“修改表格拆分单元格”,再根据提示做。 注：快捷键是 Ctrl+Alt+,表格修改,表格嵌套,说明：外表格只有一行一列,宽度和高度采用实际窗口宽度和高度的百分比形式, 定义内表格左右和垂直居中,能自动适应窗口的大小调整。,实验三,Return,在表格的某个单元格内再插入一个表格，就形成表格嵌套。例如： 在浏览器窗口正中央显示一幅图像，其代码如下：,2. 能使用垂直对齐属性的标记是_。 A. B. C. D. B和C,3. 水平居中对应的属性值为_ 。 A. middle B.

46、left C. center D. right,4. 重新定义下列标签（标记）的外观，其中能自动作用于表格内文本的是_。 A. body B. div C. td D. img E. a,5. 标记只能用于标记内。,1. 插入表格背景图片，应使用_属性。,6. 表格可以嵌套使用。,Return,单元练习,7. 表格行和单元格都可以使用水平和垂直对齐属性。,8. 表格垂直对齐的属性名为_ 。,播放背景音乐 播放视频（Flash动画） 综合应用：网站首页头部设计 单元练习,第6讲 多媒体标记及其应用,没有相应的工具，只能写代码； 单标记； 页面加载时自动播放； 通过使用属性（值） loop=-1

47、实现反复播放； 特殊的网页元素（无形的对象）； 为了实现播放控制，可以使用id标识标识该对象，然后在脚本中设置该 对象的Volume（音量）属性，见第二部分内容的学习。,1. 播放背景音乐,Return,因为网速原因，播放文件的格式通常为AVI（因为它较小）、swf（Flash动画），一般不使用Mpeg文件（因为它较大）； 也能播放swf格式的影片。 注意：标记不能引用swf格式的文件；使用DW的菜单：“插入”“媒体”“Flash”，会生成过多的代码 默认会出现控制面板，控制它的开与关，还可以调节音量的大小。使用属性（值）hidden=true 可以隐藏控制面板； loop=true/fals

48、e：用于设定播放重复次数。loop=6重复6次，true表示无限次，false表示一次即停止； startime=“分:秒”：用于设定乐曲的开始播放时间，例如20s后播放写为startime=00:20； Width及 height属性：用于设定播放面板的大小。,2. 播放视频,Return,表格定位，Flash动画作为单元格的内容； 表格背景图片； 透明Flash动画背景，以实现动画与表格背景的合成效果。其方法如下： ,综合应用：网站主页头部设计,说明： 表格的背景图像是蓝色的，而Flash动画的背景是黑色的。 DW软件对wmode属性没有联机支持功能。 使用Fireworks软件，可以制作

49、透明格式的图片。,Return,透明Flash动画背景,2. 设置页面背景音乐，应使用_标记。 A. B. C. D. ,3. 建立文字的阴影效果，应使用的CSS滤镜是_ 。 A. Shadow B. Alpha C. RevealTrans D.都不是,4. CSS滤镜可分为静态滤镜和动态滤镜。,1. 插入Flash动画时，为了透明其背景，应设置wmode属性值为_。,5. 使用RevealTrans滤镜可以设定被链接页面进入或离开时的转换效果。,Return,单元练习,6.属性 是标记和都必须使用的。 。,表单定义及工作原理 输入型的表单控件 表单的特殊控件：按钮、分组控件 单元练习,表单

50、常用来制作录入界面，Web服务器提供了以表单方法接收来自客户端数据的对象（将在下篇服务器端脚本与动态网页开发中介绍）。,参见实验四,第7讲 表单制作及使用, . ,制作要点：在DW中，从“常用”工具栏切换至“表单”工具栏！,表单是用于实现网页浏览者与服务器之间信息交互的一种页面元素。在客户端填写表单的方式有输入文本、单击单选按钮与复选框以及从下拉列表中选择选项等。表单提交后，服务器端的表单处理程序就会对提交的数据进行相应的处理。,表单定义,标记是成对出现的，用于定义表单； 主要属性 Action ：用来定义表单提交后需要执行驻留在Web服务器端的程序，通常扩展名为ASP、JSP、PHP、Per

51、l等）。表单提交后一般会导致页面链接。 Method属性：说明客户端浏览器将表单信息提交至Web服务器所使用的方式，它有两种方式：get和post，其中get是默认方式。 为了在脚本中访问页面中的表单的输入型控件，一般在定义表单时应对表单命名。,表单工作原理,关键词：脚本、脚本引擎、客户端/服务器端、动态生成,1. 单行文本框 说明：宽度属性size是以字符为单位指定文本框的显示/输入宽度，而宽度属性width是以像素为单位。使用前者更方便。 2. 口令框 3. 多行文本框(文本域) 初始文本,在脚本中对表单中的文本框访问： 表单名.框名.value表单名.容器名.value,Return,输

52、入型的表单控件,4.单选框(多选一或单选按钮) 注意： 用于单选的一组标记的 name 属性值必须相同！ Checked属性是一个特别的属性，用于设置默认选择和判断哪一项被选择； Value属性用于指定提交至服务器的信息。,5.复选框(多选或勾选框) ,单选与多选,Return,6.下拉列表（DW里称菜单） 计算机及应用 计算机网络技术 计算机软件 ,下拉列表与列表框,说明： 在客户端脚本中获取使用该对象选择的结果，其方法是： 列表名.value或者测试列表项的Selected属性（参加第二部分）； 当下拉列表出现在表单里，则Value属性用于指定提交至服务器的信息，服务器脚本按名访问该对象（

53、参见第三部分）； selected属性用于设定该项为默认选中或在客户端脚本中判断哪一项被选中； 在客户端脚本中通过列表名.optionsi.text可获得选中的文本； 对标记使用size属性（用于显示几行），则变成列表选择。,Return,从客户端上传文件至服务器，格式如下： 文件上传： 浏览时会出现文件选择对话框。,文件域,注意：文件域也只能出现在表单里；相应的表单处理程序见第三部分的学习。,提交按钮 文本型的提交按钮 图形化的提交按钮 ,2.重置按钮 ,表单的特殊控件：按钮、分组控件,注意：上面两个按钮只能出现在表单里。,4. 对容器控件（表单元素）分组 分组标题 组内容器控件定义 ,说明

54、与提示： DW的字段集工具； 整理HTML代码为缩进格式； 标记与表格的标记对照,Return,3. 命令按钮（自定义按钮） Value 指定出现在按钮上的文字（不同于其它的容器）； OnClick是单击事件，响应事件的处理代码通常在客户端脚本里。事件代码中通常包含有对页面中的其它对象的属性的访问。,1. 下列表单元素中，由表单输入型控件产生的是： A. 文本框 B. 复选框 C. 提交按钮 D. 下拉列表框 E.单选按钮,2. 下列具有Value属性的表单元素是： A. 文本域 B. 复选框 C. 提交按钮 D. 下拉列表框 E.单选按钮,5. 下列说法中，正确的是： A. 如果表单处理程序

55、为动态网页，则method必须取值为“post”； B. 单选按钮必须使用name属性且属性值相同； C. 表单的分组标题由标记定义； D. 文本框、单选按钮、复选框和多行文本都是由标记创建； E. 文本框、单选按钮、复选框和按钮都是由标记创建。,单元练习,3. 在客户端脚本中访问下拉列表，判断哪一项被选中要使用_属性。,4. 在客户端脚本中访问单选按钮或复选框，判断哪一项或哪些项被选中要使用_属性。,4. 设置单选按钮和复选框的默认值，应使用_属性。,Return,5. 下列可以不在表单内定义的元素是： A. 文本框 B. 复选框 C. 提交按钮 D. 下拉列表框 E.单选按钮,7. pos

56、t和get是表单的两种提交方法，其默认值是_。,8. 指定表单处理程序的属性是_。 A. method B. value C. action D. option,6. 下列只能出现在表单里的是： A. 文件域 B. 复选框 C. 提交按钮 D. 下拉列表 E.单选按钮,9. 设置下拉列表和单（复）选按钮的默认选择，应使用的属性分别是_。 A. selected和checked B. checked和selected C. selected和selected D. checked和checked,实验四,第8讲 框架与层,页内框架 框架结构 层及其应用 单元练习,默认情况下，页面链接时会新开一个

57、窗口以显示目标页面的内容； 页内框架是网页的一个已命名的区域，用来显示链接的页面内容； 框架结构将浏览器窗口划分为多个区域，每个区域装载不同的网页。,将表格的某个单元格定义为页内框架 src指定预载页面，name给页内框架命名。 应用 ,页内框架,注意：属性面板中不支持页内框架的应用，需手动应用。, 页内框架示例 李白 静思 怨情 ,Return,框架结构*,框架集是若干框架的集合。定义了框架结构后，浏览器显示的窗口就被分割为几个部分，每个部分都可以独立显示不同的网页。 框架集通过“文件新建框架集”的方法创建，代码位于之后的和标记里。 框架集里的每个定义一个框架。每个框架有一个必须指定的src

58、属性，用于定义该框架对应的网页文件。,注意：框架集文件不同于一般的HTML文件，它的主体部分是空的。,在同一个浏览器窗口中同时显示多个网页的交互式结构。 通过为超链接指定目标框架，可以为框架之间建立起内容的联系，从而实现页面导航的功能。,框架的作用,建立框架集文件,在DW中，选择“拆分”模式，通过“Shift+F2”激活位于屏右下方的框架面板。 当Mouse焦点位于某个框架上时，通过左下方的属性窗口可修改该框架对应的网页文件； 当Mouse焦点位于设计窗口的某个框架上时，代码窗口立即显示该框架对应的网页文件的HTML代码。 位于后的和的内容（和含于其内）用于不支持框架结构的浏览器。,框架集和框

59、架的保存,当Mouse焦点位于框架面板中某个框架上时，选择菜单“文件框架集另存为”可以保存框架集文件； 框架的保存是指框架对应的网页文件的保存。当Mouse焦点位于设计窗口里的某个框架上时，即可使用菜单“文件-保存”来保存该框架对应的HTML文档。 注意：文件菜单的菜单项目是动态出现的，随着Mouse所在的位置而改变。,框架结构标记,（1）用于定义分割窗口。其相关属性如下： cols即行，用于设定分割左右窗口宽度（用“,”分隔，可设百分比%；“*”表示剩余部份） rows即列，用于设定分割上下窗口高度（用“,”分隔，可设百分比%；“*”表示剩余部份）。 border边框 frameborder 显示边框,（2）标记：用于定义框架（不必有），其相关属性如下： src 用于设定文件或URL地址。 Scrolling=“No|Yes|Auto”， 用于