网页与网站设计(公选)

1、网页与网站设计网页与网站设计网页与网站设计网页与网站设计网页与网站设计网页与网站设计课程在人才培养上的地位课程在人才培养上的地位主要教学内容主要教学内容教学用书教学用书Dreamweaver MX 2004Fireworks MX 2004Flash MX 2004网页设计三合一（MX 中文版）王诚君 安学民清华大学出版社主页公共服务视频课件dreamweaver mx 2004网页与网站设计网页与网站设计平时作业放在服务器上3次作业 1次综合练习参考书参考书Dreamweaver MX 2004 标准教程海洋出版社“十五”国家计算机技能型紧缺人才培训教材 Flash MX 2004 标准教程

2、 张续皇 王凯海洋出版社“十五”国家计算机技能型紧缺人才培训教材Fireworks MX 2004 标准教程詹巍海洋出版社“十五”国家计算机技能型紧缺人才培训教材新概念 中文Flash MX 教程成昊北京科海电子出版社超梦幻劲爆网页 Dreamweaver MX 2004 Flash MX 2004 Fireworks MX 2004 完美组合胡崧中国青年出版社平时占20%，作业30%，综合练习50%11次课7次上课4次上机5、9、4、5周上机教学进度教学进度作业及习题要求作业及习题要求考核及成绩考核及成绩目标目标主要教学参考书主要教学参考书课程在人才培养上的地位课程在人才培养上的地位 644

3、34922网页与网站设计网页与网站设计第第1章章 初识初识Dreamweaver MX当今网页设计领域内的主流软件：Macromedia DreamweaverMicrosoft FrontPage Adobe GoLiveHomesiteHotDog网页与网站设计网页与网站设计Dreamweaver的功能和特点：的功能和特点：是是macromedia公司设计的功能十分强大的公司设计的功能十分强大的网页制作工具，是一款专业的网页制作工具，是一款专业的HTML编辑器。用于对编辑器。用于对Web站点、站点、Web网页网页和和Web应用程序进行设计、编码和开发。提供了直观的可视编辑，也提供应用程序进

4、行设计、编码和开发。提供了直观的可视编辑，也提供了供网络高手编写了供网络高手编写HTML代码，另外还提供非常强大的参考资料；可以代码，另外还提供非常强大的参考资料；可以使用服务器技术生成动态数据库支持的使用服务器技术生成动态数据库支持的Web应用程序。支持更强大的应用程序。支持更强大的CSS；跨浏览器检查；内建的图形编辑引擎；网站的管理；增强了跨浏览器检查；内建的图形编辑引擎；网站的管理；增强了FTP的安全性；的安全性；无缝整合外部文件和代码；与无缝整合外部文件和代码；与Macromedia的其他产品结合更加紧密；增的其他产品结合更加紧密；增强的代码编写工具，改进的用户界面等等。强的代码编写工

5、具，改进的用户界面等等。第第1章章 初识初识Dreamweaver MX网页与网站设计网页与网站设计1.1 网页制作基础网页制作基础认识万维网WWW（World Wide Web)：服务器与客户端机制常用术语常用术语网页与网站设计网页与网站设计 超文本标记语言HTML(Hypertext Markup Language):语言的特点：与应用程序无关 可以应用在各种操作系统上 是一种标记语言HTML语言结构 味道好极了！文件的结构：由两部分组成1.1 网页制作基础网页制作基础网页与网站设计网页与网站设计 网站、网页与主页常用术语常用术语 页面编辑器: 所见即所得：直观，容易使用，但难以精确定位，

6、原始代码难以控制。 非所见即所得：需手工编写HTML代码，工作效率低。 网页浏览器： Internet Explorer、Netscape Navigator、Spry Mosaic、Firefox、GreenBrowser网站：网站是将许多相关的页面按照一定的方式组织起来的网页集合。把网站存放在与internet相连的服务器上就可以让别人访问的站点，它一般具有域名。 ; ; 网页： 能在浏览器中浏览的一个具有HTML语言结构的文件。主页：也称首页，是进入网站的第一个界面。 URL(Uniform Resource Locator)：统一资源定位符，网络的地址。 格式：协议:/IP地址或域名/

7、路径/文件名 http:/ ftp:/ telnet:/ 超级链接：是连接其它站点、WEB页或文件的一种标识。分为：链接的载体（文字、图片、按钮、动画等）或链接的目标（网页、其他类型文件、URL）网页与网站设计网页与网站设计软件的安装与卸载软件的安装与卸载安装环境要求安装环境要求：Pentium以上的处理器 windows98以上的操作系统 128以上的内存 800600 以上分辨率 256色或更高的显示模式 CD-ROM安装软件：安装软件： 将dreamweaver光盘插入光驱 按照提示，接受软件协议，指定安装路径，最后安装成功 安装卸载：安装卸载： 开始控制面板 添加/删除程序 选择dre

8、amweaver 程序选择添加/删除按钮点击“是”按钮 网页与网站设计网页与网站设计1.2 Dreamweaver MX的工作界面的工作界面工作区界面的组成 标题栏菜单栏插入栏文档工具栏标准工具栏文档窗口属性面板 状态栏选择工作区布局：启动dreamweaver：开始程序macromedia macromedia dreamweaver MX2004当第一次启动dreamweaver时，会出现工作区选择界面，选择后，即进入工作界面网页与网站设计网页与网站设计辅助设计工具显示或隐藏标尺 查看标尺显示显示或隐藏网格 查看网格显示网格 设置网格的大小 查看网格网格设置管理面板与面板组显示或隐藏面板：

9、F4；单击“窗口”的面板名展开或折叠面板组：移动面板组查看面板组的选项菜单 面板的组合 Dreamweaver MX的工作界面的工作界面网页与网站设计网页与网站设计确定站点的主题，办出自己的特色 主题要小而精、题材最好是自己擅长或者喜爱的内容、题材不要太高选择网站名称 正气、易记、特色网站的CI（Corporate Identity)形象 标志、色彩、字体、宣传标语 1.3 规划站点与网页规划站点与网页站点的栏目与版块：动手之前要确定栏目与版块、目录结构和链接结构、整体风格的设计。（注意：有价值的内容放到栏目上、方便浏览者）站点的结构：目录结构和链接结构。目录结构：不要将所有的文件放置在一个目

10、录中，按栏目内容建立子目录，每个主目录中应该建立独立的images目录。（注意：层次不要太多、不要使用中文名称、名称不要太长、意义明确）链接结构：网站页面之间相互链接的拓扑结构，它实际上在建立在目录结构基础上，可以跨目录，链接是两个固定点之间的连线。链接结构是网页制作中非常重要的，它直接影响到版面的布局。准备网页与网站设计网页与网站设计站点的结构：目录结构和链接结构网页与网站设计网页与网站设计规划站点与网页规划站点与网页网页的布局和编排网页的布局和编排：就是指以最适合的浏览的方式将logo、栏目（导航）、图片、文字等放置在网页的不同位置。还要考虑导航是否每页都需要，是否使用框架，是否需要加入返

11、回首页的链接，布局确定之后，还要考虑链接的效果和形式。形式与内容的统一，了解站点是否兼容于常用的浏览器。网站的整体风格：网站的整体风格：网站的整体风格及其创意是网页制作者最希望掌握的，也是最难以学习的。首页设计：首页设计：首页是网站的焦点，一般首页设计和制作站整个制作的40%，首页是全站内容的目录和索引，首页包括：首页的功能模块、版面和技术上的细节。常用功能模块：网站名称（logo）、宣传条（banner)、主菜单（menu）、新闻（news）、搜索（search）、友情链接（links）、计数器（count）、版权（copyright）。制作网页与网站设计网页与网站设计网站开发流程网站开发流

12、程确定网站主题和内容，创建站点基本结构准备各种制作网页所需的素材确定页面布局，动手制作网站中各个页面实现各网页的交互和控制，使网页有机地链接起来测试、发布和维护网站网页与网站设计网页与网站设计 创建本地站点的操作步骤1.4 创建本地站点创建本地站点站点管理站点新键站点注意：网页文件和文件夹命名 *.htm或*.html 无空格 无特殊符号（只可以有_ 英文 数字） 区分大小写 首页文件名默认为index.htm或index.html建立新的网页建立新的文件夹更名、删除、修改等站点的管理网页与网站设计网页与网站设计作业：1. 网站的目录是指什么？ 2. 网站的链接结构是指什么？ 3. 动手建立网

13、站之前，要考虑哪三个方面？ 4. Dreamwerver MX的用途是什么？ 5. Dreamwerver MX工作界面由几部分组成 6. 通常主页的文件名为什么？ 7. 规划一个个人网站，提交个人站点设计构思，收集相关信息。 8. 上网观看一些著名的网站，体会他们的风格、徽标、结构、及链接的结构上机 1. 启动dreamweaver，并熟悉软件的操作界面。 2. 设计并规划一个个人网站，请写出网站的结构、内容，在上机时进行实施。本章小结及作业本章小结及作业介绍了与网络信息浏览有关的一些基本概念和相关术语，dreamwerver的功能和特点，工作界面的操作以及创建站点的操作过程。作业及上机：网

14、页与网站设计网页与网站设计第第2章章 制作简单的网页制作简单的网页创建网页文件创建空白网页：文件新建基本页HTML基于示例文件创建网页：文件 新建 页面设计（或有辅助功能）网页之间切换：单击文档工具栏上的文档标签网页的保存和关闭 文件 保存 文件 另存为 文件 关闭网页的打开 文件打开 在文件面板窗口中双击要打开的文件网页与网站设计网页与网站设计制作简单的网页制作简单的网页输入文本：将光标放置到插入点，输入文字（段落-enter，换行-shift+enter）插入特殊字符：插入HTML 特殊字符选择特殊字符日期：插入常用日期标签设置文本的格式：利用属性面板 格式 字体 样式 大小 颜色 对齐方

15、式 文本缩进 列表 修改列表属性插入水平线：插入HTML 水平线标志使用图像：P43 图像文件的格式：gif、jpeg、bmp、tiff、tga、ras、eps、pcx、png、wmf。但在网页上使用最多的只有格式是gif和jpeg格式，这两种图像具有高压缩率，文件通常很小。它们已经成为HTML规范中要求的标准图像文件格式。Gif(graphics interchange format)格式特点：无损压缩、可以设置透明背景、支持动态效果、256色的限制，它比较适宜色彩没有细微差别的简单图像。Jpeg（joint photographic experts group)格式特点：有损压缩，会减少像

16、素数据，造成图像有失真，但视觉很难觉察；支持真彩色，可以保持原图像的真实颜色。支持32位颜色的图像。网页与网站设计网页与网站设计插入图像操作步骤：将光标放置到插入点，单击“插入”图像 选择图像确认编辑图像：位置、大小、修改修改原图：选择修改图形编辑器步骤：编辑使用外部编辑器编辑选择文件类型点击“+” 选择编辑器程序设为主要确定移动位置：使用鼠标进行拖动调整大小：使用属性面板或使用控制点进行调整改变图像对齐方式：图像属性面板：制作简单的网页制作简单的网页实例：插入图像，设置其属性网页与网站设计网页与网站设计设置页面属性：修改页面属性制作简单的网页制作简单的网页使用浏览器浏览网页：文件在浏览器预览

17、 或直接按F12网页与网站设计网页与网站设计重要介绍了在网页中如何编辑文本、图形以及图文混排，设置网页的属性等。本章小结本章小结作业：1. 网络上图像主要有几种，它们的特点是什么？ 2. 给选择的文本设置的字体为“ 华文彩云, 华文仿宋, 华文楷体”，它的含义是什么？ 3. 如何设置页面的属性。 4. 在dreamweaver中，预览创建的网页使用的快捷键是什么？ 5. 页面属性中可以设置什么？如果要设置页面背景色或背景图像应如何操作，改变各种链接颜色应如何设置？上机：制作一个简单网页，网页的主题为“我心中的家”。要求具有文字、图片，图文进行混排；要求页面整齐、清新、美丽（文字自己组织）。网页

18、与网站设计网页与网站设计第第3章章 超级链接的使用超级链接的使用(p51) 超级链接是WWW的魅力所在。为了把Internet上众多分散的网站和网页联系起来，构成一个有机的整体，就要在网页上加入链接。通过点击网页上的链接，我们才能在信息海洋中尽情遨游。 超级链接的组成：链接载体和链接目标 链接载体：文本、图像、热点链接目标有下面几类：内部链接：在同一网站文档之间的链接外部链接：不同网站文档之间的链接锚点链接：同一网页或不同网页的指定位置的链接邮件链接：mailto:邮件地址 其它链接：空链接、下载链接、脚本链接 邮件链接：在链接框中输入：mailto:邮件地址 外部链接 在链接文本框中直接输入

19、URL实例：网页与网站设计网页与网站设计第第3章章 超级链接的使用超级链接的使用(p51)内部链接实例： 相对路径(文件、文件夹/文件、./文件夹/文件等) 和绝对路径（以“/”开始，它是以站点为基准）等概念。站点IMAGESCAMPUSABUOTARTINDEX.HTMLIFE.HTMIMAGESINDEX.HTMNOTICE.HTMDATAINDEX.HTMNEWS.HTM网页与网站设计网页与网站设计第第3章章 超级链接的使用超级链接的使用(续续)锚点的链接 当一个网页的标题或文字较多时，可以在网页内建立多个标记点，将超链接指定到这些标记点上，能够使浏览者快速找到要阅读的内容的位置。我们将

20、这些标记点称为锚点（Anchor）。制作要点：首先做锚记（命名），再做链接（指向锚记，使用“#锚记名”）。实例：做锚记 插入命名锚记 锚点超链接：选择对象，在链接框中输入“#锚记名“图像、热点的链接： 可以将图像或图像的热点作为链接源，根据情况做内部、外部、锚点和mail链接。实例： 创建像册：要安装Fireworks MX和放置在某个文件夹中的图片。 实例：命令创建网站像册空链接：#下载链接：指向.exe、.mp3、.zip文件脚本链接：例如javascript:alert(你好！欢迎你) 网页与网站设计网页与网站设计主要介绍了在网页中超级链接的意义、作用，超级链接的组成部分以及使用方法。本

21、章小结本章小结作业 1. 超级链接由几部分组成，超级链接有几种类型。 2. 制作一个友情链接网页，网页要求五到十个站点的名称，且均要求有相应的链接。 3. 制作一个像册（给出图片素材） 4. 制作一个图片(chinamap.gif）的热点链接（辽宁、陕西）。 5. 给一个文件做锚点链接（目录及返回）。网页与网站设计网页与网站设计第第4章章 巧用表格组织网页巧用表格组织网页表格在网页中的作用：表格在网页中的作用：排列数据和电子表格；辅助页面进行图文混排，实现复排列数据和电子表格；辅助页面进行图文混排，实现复杂的版面布局。杂的版面布局。创建表格：创建表格：插入插入表格（表格（Ctrl+Alt+t)

22、（或利用插入工具栏常用标签中的表格按钮）（或利用插入工具栏常用标签中的表格按钮）对表格进行编辑的步骤：对表格进行编辑的步骤： 选定表格或单元格选定表格或单元格 进行相应的操作进行相应的操作选择：选择：整个表格、一行、一列、单元格、多个连续单元格、不连续单元格整个表格、一行、一列、单元格、多个连续单元格、不连续单元格改变表格的结构：改变表格的结构：删除或插入新行、列、调整表格或单元格大小、拆分单元格删除或插入新行、列、调整表格或单元格大小、拆分单元格或合并单元格等。或合并单元格等。向表格中添加内容：向表格中添加内容：选择单元格，添加文字或图像选择单元格，添加文字或图像修改表格的属性：修改表格的属

23、性：利用表格属性面板利用表格属性面板设置单元格的属性：设置单元格的属性：利用单元格属性面板利用单元格属性面板创建嵌套表格：创建嵌套表格：在表格中插入另一个表格。在表格中插入另一个表格。网页与网站设计网页与网站设计第第4章章 巧用表格组织网页（续）巧用表格组织网页（续）设计页面布局：设计页面布局：布局是指页面中的对象在浏览器中展示的位置。为了设计出布局是指页面中的对象在浏览器中展示的位置。为了设计出比较复杂的页面布局，比较复杂的页面布局，dreamwerver为我们提供了几种布局视图：为我们提供了几种布局视图：标准、布局和扩展。标准、布局和扩展。标准视图：标准视图：普通的编辑状态。普通的编辑状态

24、。布局视图：布局视图：可以使用表格作为基础结构来设计页面，最大的好处是，可可以使用表格作为基础结构来设计页面，最大的好处是，可以在页面上方便地以在页面上方便地绘制绘制布局单元格，然后再将单元格移动到所需位布局单元格，然后再将单元格移动到所需位置，从而简化了使用表格进行页面布局的过程。（注意：在布局视置，从而简化了使用表格进行页面布局的过程。（注意：在布局视图中，不能再使用在图中，不能再使用在“标准标准”视图中的视图中的“插入表格插入表格”和和“绘制层绘制层”工具。）工具。）转换到布局视图：转换到布局视图：查看查看表格模式表格模式布局模式（单击插入工具栏中的布局按钮）布局模式（单击插入工具栏中的

25、布局按钮）网页与网站设计网页与网站设计第第4章章 巧用表格组织网页（续）巧用表格组织网页（续）布局表格和单元格：布局表格和单元格：布局单元格不能存在于布局表格之外，一般是利用布局表布局单元格不能存在于布局表格之外，一般是利用布局表格中的单元格创建页面布局，还经常使用多个布局表格创建更为高格中的单元格创建页面布局，还经常使用多个布局表格创建更为高级的布局。一个表格的行和列不会影响到另一个表格。级的布局。一个表格的行和列不会影响到另一个表格。绘制布局表格：绘制布局表格：绘制布局单元格：连续绘制单元格绘制布局单元格：连续绘制单元格 （ ctrl+鼠标拖动）鼠标拖动）绘制嵌套布局表格：布局表格按钮绘制

26、嵌套布局表格：布局表格按钮鼠标拖动绘制鼠标拖动绘制向布局单元格中添加内容：向布局单元格中添加内容：可以向布局单元格中添加文本、图像和其它多媒体对象。可以向布局单元格中添加文本、图像和其它多媒体对象。（注意：只能在布局单元格中添加内容）（注意：只能在布局单元格中添加内容）网页与网站设计网页与网站设计第第4章章 巧用表格组织网页（续）巧用表格组织网页（续）移动或调整布局单元格的大小：移动或调整布局单元格的大小：单击单元格边框或按住单击单元格边框或按住ctrl+单击单元格任意位置；将鼠标指针单击单元格任意位置；将鼠标指针指向某个句柄，然后拖动鼠标到所需大小。指向某个句柄，然后拖动鼠标到所需大小。调整

27、布局表格的大小：调整布局表格的大小：移动布局表格：移动布局表格：单击布局表格标签，拖动布局表格到目标位置单击布局表格标签，拖动布局表格到目标位置格式化布局单元格：格式化布局单元格：利用属性面板利用属性面板格式布局表格：格式布局表格：利用属性面板利用属性面板设置布局宽度：设置布局宽度：固定宽度和自动伸展。固定宽度和自动伸展。使用间隔图像：使用间隔图像：间隔图像是一种不会在浏览器中显示的透明间隔图像是一种不会在浏览器中显示的透明gif图像。图像。主要用于控制自动伸展表格中的间距。主要用于控制自动伸展表格中的间距。设置布局视图参数：设置布局视图参数：编辑编辑参数选择参数选择布局视图布局视图扩展视图：

28、扩展视图：主要是针对用户在选择较小的表格或单元格时的显示。主要是针对用户在选择较小的表格或单元格时的显示。它将视图放大，极大地方便了用户对表格的控制。它将视图放大，极大地方便了用户对表格的控制。网页与网站设计网页与网站设计使用表格排版原则使用表格排版原则1.1.整个页面尽量拆分成多个表格整个页面尽量拆分成多个表格2.2.单一表格的结构整齐单一表格的结构整齐3.3.表格嵌套层次尽量要少表格嵌套层次尽量要少利用表格制作网站首页示例：利用表格制作网站首页示例：第第4章章 巧用表格组织网页（续）巧用表格组织网页（续）网页与网站设计网页与网站设计主要介绍了在网页中表格的作用，利用表格做网页的布局，以主要

29、介绍了在网页中表格的作用，利用表格做网页的布局，以及标准视图、布局试图和扩展试图的使用。重点是利用表格组及标准视图、布局试图和扩展试图的使用。重点是利用表格组织网页的布局。织网页的布局。本章小结本章小结作业作业 ：首先分析英文首页的布局，然后首先分析英文首页的布局，然后 使用表格或布局表格技使用表格或布局表格技术，在机器上实现英文首页的排版及内容输入。（首页的布局如图术，在机器上实现英文首页的排版及内容输入。（首页的布局如图“英文首页英文首页.gif”，在该页面上所使用的图形在，在该页面上所使用的图形在“ONE/IMAGES”文件夹下）文件夹下）网页与网站设计网页与网站设计1.在IE浏览器的地

30、址栏中输入36或ftp:/，按回车2.在出现的登录对话框中输入用户名及密码，均为public。（注意：在此有软件与课件；在此窗口中只进行文件复制的操作，不要在此打开文件。）3.将ftp机器上的one文件夹复制到本机E盘上，然后关闭ftp窗口。4.点击开始程序macromediamacromedia dreamweaver MX 2004，启动dreamweaver。在该软件下练习操作界面的使用方法，属性面板的显示、隐藏、关闭、打开、扩展、折叠，面板组的显示、隐藏、关闭、打开，文档工具栏、标准工具栏、插入工具栏的显示、隐藏、关闭、打开以及使用方法。5.练习建立站点

31、（站点管理站点新建站点），站点的名称为myweb，本地根文件夹与E盘上的one文件夹对应。6.打开practice.doc，根据该文件中的要求完成上机操作。7.将上机完成的内容，根据上机练习中的要求复制到FTP服务器上。方法是在IE浏览器的地址栏中输入36或ftp:/，按回车，在出现的对话框窗口输入用户名和密码，用户名是学号，密码是学号后4位和中文姓名最后一个字的拼音。第一次上机方法及流程说明第一次上机方法及流程说明网页与网站设计网页与网站设计第五章第五章 框架的使用框架的使用 框架与框架网页：框架与框架网页：将浏览窗口划分为不同的区域，每个区域显示不同的网页内

32、容，这样的网页为框架网页，每个区域为一个框架。框架的网页观摩框架的网页观摩 frame/index.htm frame2/index.htm 框架网页的组成：框架网页的组成：框架文件(框架中的内容，实际是一个网页) 框架集文件(框架定义页面：包括框架的数目、框架的大小、位置和每个框架初始显示的内容文件名)创建框架、框架集和创建框架、框架集和框架的删除框架的删除： 插入预定义的框架集：插入工具栏的布局框架 或 插入HTML 框架 自定义框架： 鼠标拖动边框 Alt +鼠标拖拉：增加框架 （查看可视化助理框架边框）显示或隐藏“框架”面板 ：窗口框架（shift+f2）创建嵌套框架 ：某个框架内创建

33、框架网页与网站设计网页与网站设计保存框架和框架集文件保存框架和框架集文件 保存框架集文件 ：文件保存框架页保存框架文件：文件保存框架 选定框架或框架集 ：利用“框架”面板单击，显示为虚线 （在框架面板选择框架，再进行上面的操作，即可创建框架） 框架的删除：鼠标拖动框架到边上设置框架集与框架的属性设置框架集与框架的属性 设置框架集的属性 ：选择框架集设置框架的属性：选择框架在框架中插入内容在框架中插入内容 加载已经存在的网页(已有网页)直接插入文本和图像(新网页) 第五章第五章 框架的使用（续）框架的使用（续）网页与网站设计网页与网站设计框架网站实例框架网站实例处理不能显示框架的浏览器处理不能显

34、示框架的浏览器 对不支持框架的浏览器的一种补赏，主要是填写一些说明性的内容，提示浏览用户。修改框架集编辑无框架内容输入说明性的文本或图像输入完成之后修改框架集编辑无框架内容返回到普通视图下。为超级链接指定目标框架为超级链接指定目标框架利用“属性”面板中的“目标”中的选择：框架名、_blank、_self 、_top 、_parent等 第五章第五章 框架的使用（续）框架的使用（续）网页与网站设计网页与网站设计本章小结本章小结 主要介绍了框架的概念、框架的建立、编辑、修改、删除，框架的属性的设置，框架的文件的保存，框架结构的链接等。习题习题 ：1. 创建框架的方法有几种？2. 如何拆分框架，删除

35、框架。3. 如何改变框架的大小？4. 上机完成要设计的网页。第五章第五章 框架的使用（续）框架的使用（续）网页与网站设计网页与网站设计关于关于CSS(cascading style sheets)样式表：样式表：CSS层叠样式表的应用（层叠样式表的应用（P35）是一种设计网页样式的工具，是一系列格式的规则，它是一种设计网页样式的工具，是一系列格式的规则，它可以控制网页内容的外观。通过可以控制网页内容的外观。通过CSS样式，可以确保以更样式，可以确保以更加一致的方式在多个浏览器中处理页面布局和外观。加一致的方式在多个浏览器中处理页面布局和外观。CSS特点特点n控制页面中的每一个元素（精确定位）控

36、制页面中的每一个元素（精确定位）n对对HTML语言处理样式的最好补充语言处理样式的最好补充n把内容和格式处理相分离，实现格式的自动更新，减把内容和格式处理相分离，实现格式的自动更新，减少工作量少工作量网页与网站设计网页与网站设计1.1.直接在标签内定义直接在标签内定义CSSCSS实例实例特点特点: :使用简单、显示直观，但是无法发挥样式表的优势使用简单、显示直观，但是无法发挥样式表的优势 2.2.添加在添加在HTMLHTML的的里：里：style type=”text/css”!- - 3.3.链接样式表链接样式表 link rel=stylesheet href=“style.css” 特点

37、：最适合大型网站的特点：最适合大型网站的CSSCSS样式定义样式定义添加层叠样式表的方法添加层叠样式表的方法网页与网站设计网页与网站设计样式的类型样式的类型2.自定义样式自定义样式.self color:#66ff00 .bright font-weight:bolder;color: #00FF00 n特点：需要应用特点：需要应用1.HTML标签样式标签样式选择符选择符 属性：值属性：值h3font-family:ArialH3 选择符选择符Font-family：Arial 定义的样式定义的样式Font-family：属性：属性Arial：属性值：属性值n特点：无需应用特点：无需应用网页与

38、网站设计网页与网站设计n全局样式：全局样式：a:link color: red a:link color: red a:visited color: blue; font-size: 125% a:visited color: blue; font-size: 125% a:hover color: green; font-size: 85% a:hover color: green; font-size: 85% a:active color: bluea:active color: bluen特点：无需应用特点：无需应用n局部样式局部样式 :link color: red a.

39、name :link color: red :visited color: blue; font-size: 125% :visited color: blue; font-size: 125% :hover color: green; font-size:85% :hover color: green; font-size:85% :active color: :active color: bluen特点：必须应用特点：必须应用样式的类型样式的类型3.链接样式链接样式网页与网站设计网页与网站设计创建：创建：文

40、件文件新建新建CSS样式样式文本文本CSS样式样式新建新建利用利用CSS样式面板样式面板修改：修改：文本文本CSS样式样式管理样式管理样式 利用利用CSS样式属性面板样式属性面板删除：删除：CSS样式的创建样式的创建Dreamweave提供了对提供了对CSS样式完美支持。在样式完美支持。在dreamweave中不需要了解中不需要了解CSS复杂的语法。复杂的语法。网页与网站设计网页与网站设计n内部内部CSSn外部外部CSS （为文件，文件的扩展名：（为文件，文件的扩展名：CSS）CSS样式的创建样式的创建类（自定义的样式）操作步骤：类（自定义的样式）操作步骤： 1、设定样式；、设定样式；2、根据

41、情况应用、根据情况应用标签（标签（HTML标签）：只须设定样式无须应用标签）：只须设定样式无须应用高级（链接）：自定义和非自定义高级（链接）：自定义和非自定义网页与网站设计网页与网站设计文字设定文字设定n背景设定背景设定n文字块设定文字块设定n区块设定区块设定n边框设定边框设定nCSSCSS样式样式网页与网站设计网页与网站设计n文字设定文字设定n字体字体n字号字号n样式样式n行高行高n文字修饰文字修饰n文字粗细文字粗细n字号变化字号变化n大小写大小写n颜色颜色nCSS样式设定详解样式设定详解网页与网站设计网页与网站设计n背景设定背景设定n色彩色彩n图片图片n重复方式重复方式n固定背景固定背景(

42、应用应用)n水平方向位置水平方向位置n垂直方向位置垂直方向位置nCSS样式设定详解样式设定详解网页与网站设计网页与网站设计n文字块设定文字块设定n单词间距单词间距n字母间距字母间距n垂直对齐方式垂直对齐方式n文字对齐文字对齐n文字缩进文字缩进n空白区域控制空白区域控制nCSS样式设定详解样式设定详解网页与网站设计网页与网站设计n边框设定边框设定n宽度高度宽度高度n颜色颜色n风格风格nCSS样式设定详解样式设定详解网页与网站设计网页与网站设计n扩展设定扩展设定n光标类型光标类型n滤镜滤镜nCSS样式设定详解样式设定详解网页与网站设计网页与网站设计主要介绍了在网页中主要介绍了在网页中CSS样式的应

43、用，它可以有效地统一网站样式的应用，它可以有效地统一网站中的一个或多个网页的整体风格，从而提高网页制作效率。中的一个或多个网页的整体风格，从而提高网页制作效率。小结小结作业作业 ：设计不同的设计不同的CSS样式，应用到作好的英文网样式，应用到作好的英文网页的首页，体会页的首页，体会CSS样式的作用。样式的作用。网页与网站设计网页与网站设计提交提交 第第6章章 表单的使用表单的使用 (P103) 1. 表单概述表单概述 客户端填写表单客户端填写表单服务器端处理表单服务器端处理表单反馈反馈什么是表单？什么是表单？表单是文本和表单对象组成的集合。表单是文本和表单对象组成的集合。表单的作用：表单的作用

44、：站点管理者与访问者之间进行信息交流。为访问者提供一个统一的信站点管理者与访问者之间进行信息交流。为访问者提供一个统一的信息模式，以便管理者对信息的收集与整理。息模式，以便管理者对信息的收集与整理。如：调查、收集信息、反馈如：调查、收集信息、反馈表单的工作原理：表单的工作原理：表单应用的观摩：表单应用的观摩： 宣传部新闻评选宣传部新闻评选 网页与网站设计网页与网站设计2 . 创建表单创建表单目标：目标：显示返回数据的显示窗口。显示返回数据的显示窗口。要使用合法的名称，一般应该使用容易理解的名称，以便使用脚要使用合法的名称，一般应该使用

45、容易理解的名称，以便使用脚本语言对表单的控制。本语言对表单的控制。表单名称：表单名称：动作：动作：在服务器端对表单中的数据进行处理的程序名称或在服务器端对表单中的数据进行处理的程序名称或URLURL地址地址, , 也可以使用邮件形式提交表单。也可以使用邮件形式提交表单。方法：方法：一般使用一般使用POSTPOST方法，因为它相对更安全，在做搜索时，经常方法，因为它相对更安全，在做搜索时，经常 使用使用GETGET方法。方法。MIMEMIME类型：类型：指定进行处理数据的指定进行处理数据的MIMEMIME编码类型；当使用编码类型；当使用emailemail收集表单信息时，收集表单信息时，使用使用

46、text/plaintext/plain，对于一般应用使用，对于一般应用使用application /x-www-form-application /x-www-form-urlencoderurlencoder， 当对文件域进行操作时使用当对文件域进行操作时使用multipart/form-data.multipart/form-data.设定表单属性设定表单属性将光标定位将光标定位插入插入表单表单表单（或选择插入工具栏中的表单按钮）表单（或选择插入工具栏中的表单按钮）加入空白表单的操作步骤：加入空白表单的操作步骤：网页与网站设计网页与网站设计3. 添加表单对象添加表单对象 表单对象包含有：

47、表单对象包含有：本文域、隐藏域、文本区域、单选按钮、单选按本文域、隐藏域、文本区域、单选按钮、单选按钮组、复选框、列表钮组、复选框、列表/ /菜单、跳转菜单、图像域、文件域菜单、跳转菜单、图像域、文件域 、按钮、标、按钮、标签签(1) (1) 添加文本域对象添加文本域对象(2) (2) 添加单选按钮添加单选按钮 ( (单选按钮组）单选按钮组）(3) (3) 添加复选框添加复选框网页与网站设计网页与网站设计(4) (4) 添加列表（增加菜单）添加列表（增加菜单） (5) (5) 添加按钮对象添加按钮对象 (6) (6) 添加跳转对象添加跳转对象 列表与菜单的区别是列表可以选择多行显示，并且在选择

48、时可以选择列表与菜单的区别是列表可以选择多行显示，并且在选择时可以选择多行，而菜单没有此选项。多行，而菜单没有此选项。网页与网站设计网页与网站设计4.检查表单检查表单 浏览者在填写表单时，可能不清楚表单的填写规范而将某些表单浏览者在填写表单时，可能不清楚表单的填写规范而将某些表单的内容填错，这时将表单提交后，浏览器会将表单的内容提交给服务的内容填错，这时将表单提交后，浏览器会将表单的内容提交给服务器，服务器根据表单的内容进行处理，当发现有问题时，服务器会将器，服务器根据表单的内容进行处理，当发现有问题时，服务器会将错误信息返回到浏览器，这样造成时间和资源的浪费，因此在浏览者错误信息返回到浏览器

49、，这样造成时间和资源的浪费，因此在浏览者提交表单时在本机上检查表单的错误，就十分有必要。提交表单时在本机上检查表单的错误，就十分有必要。“检查表单检查表单”动作检查指定文本域的内容以确保用户输入了正确的数据类型。使用动作检查指定文本域的内容以确保用户输入了正确的数据类型。使用onBluronBlur事件将动作附加到单个的文本域，或使用事件将动作附加到单个的文本域，或使用onSubmitonSubmit事件将其附事件将其附加到表单。加到表单。为表单对象附加行为的操作步骤：为表单对象附加行为的操作步骤：1.1.窗口窗口行为（打开行为面板）行为（打开行为面板）2.2.选择选择“提交提交”按钮，单击行

50、为面板的按钮，单击行为面板的“+”+”按钮，选择按钮，选择“检查表检查表单单”，出现对话框。，出现对话框。3.3.在对话框中选择一个表单对象，进行设置。如果要对多个对象进在对话框中选择一个表单对象，进行设置。如果要对多个对象进行设置，可重复。然后单击行设置，可重复。然后单击“确定确定”。4.4.按按F12F12，在浏览器中预览，并进行检验。，在浏览器中预览，并进行检验。（如果希望将英文信息改成中文信息，可以修改源代码（如果希望将英文信息改成中文信息，可以修改源代码）网页与网站设计网页与网站设计本章小结本章小结 本章主要介绍了表单的概念，表单主要是站点管理者与浏览者进行信本章主要介绍了表单的概念

51、，表单主要是站点管理者与浏览者进行信息交换的重要手段，通过表单站点管理者可以根据情况收集各种各样的息交换的重要手段，通过表单站点管理者可以根据情况收集各种各样的信息，然后对收集的信息进行处理，从而实现网页的交互性，但表单提信息，然后对收集的信息进行处理，从而实现网页的交互性，但表单提交后必须与服务器端的程序或脚本进行联系才能真正实现交互性。在这交后必须与服务器端的程序或脚本进行联系才能真正实现交互性。在这里介绍了表单对象的创建、编辑等操作。里介绍了表单对象的创建、编辑等操作。习题习题1.1.如何创建表单？如何创建表单？2.2.表单对象都有哪些？表单对象都有哪些？3.3.制作一个表单，表单的结构

52、和布局在上机时给出。制作一个表单，表单的结构和布局在上机时给出。4.4.制作一个跳转菜单，菜单的内容在上机时给出。制作一个跳转菜单，菜单的内容在上机时给出。本章上机题本章上机题网页与网站设计网页与网站设计（注：创建的每个层具有默认属性，如：标签的样子、可见性、高（注：创建的每个层具有默认属性，如：标签的样子、可见性、高度、宽度等，要修改这个属性，可以使用编辑度、宽度等，要修改这个属性，可以使用编辑首选参数首选参数层，然层，然后修改层的相关初始属性）后修改层的相关初始属性）1. 层的概述层的概述层：是一种较新的网页制作技术，属于动态层：是一种较新的网页制作技术，属于动态HTMLHTML页面元素，

53、它为网页设页面元素，它为网页设计提供了多层化、立体化、动态化的强大的网页控制能力。计提供了多层化、立体化、动态化的强大的网页控制能力。层的特点：层的特点：(1) (1) 对网页对象的精确定位。对网页对象的精确定位。(2) (2) 网页中的不同对象可重叠网页中的不同对象可重叠显示。显示。(3) (3) 实现网页的动态及交互性。实现网页的动态及交互性。层页面的观摩层页面的观摩 层页面的观摩层页面的观摩 中国地质大学中国地质大学描绘层按钮第第7章章 层的使用层的使用(P114)2. 层的操作层的操作(1) (1) 在网页中插入层在网页中插入层确定插入点位置确定插入点位置插入插入布局对象布局对象层（使

54、用插入工具栏中的层按钮，层（使用插入工具栏中的层按钮，然后拖动鼠标）然后拖动鼠标）网页与网站设计网页与网站设计在层中创建层（嵌套层随父层一起移动，并且继承父层的可见性）在层中创建层（嵌套层随父层一起移动，并且继承父层的可见性）创建的方法与插入层一样，只需将插入点放置在要插入层的层中。创建的方法与插入层一样，只需将插入点放置在要插入层的层中。（注意层的默认属性设置的影响）（注意层的默认属性设置的影响）也可以单击也可以单击“描绘层描绘层”按钮，按住按钮，按住AltAlt键，在另一个层中拖动并绘制所需的键，在另一个层中拖动并绘制所需的层层打开与关闭层面板：窗口打开与关闭层面板：窗口层层通过层面板，可

55、以管理文档中的层，在层面板中能设置层的可见性、名通过层面板，可以管理文档中的层，在层面板中能设置层的可见性、名称和层的排列顺序（称和层的排列顺序（Z Z轴）轴）单击选择可见性单击选择层双击可改变层名称双击改变顺序3. 层的嵌套层的嵌套4. 层面板层面板网页与网站设计网页与网站设计6. 设定层的属性设定层的属性 要首先选择层，选择后的属性面板要首先选择层，选择后的属性面板5. 编辑层编辑层选定层：选定层：单击层的边缘单击层的边缘 单击层内部任意位置，再单击层句柄单击层内部任意位置，再单击层句柄 在层面在层面板中单击层名称（选择多个层，按住板中单击层名称（选择多个层，按住shiftshift键，单

56、击其他层）键，单击其他层）4.4.单击单击 符号符号移动层：移动层：选择层选择层拖动鼠标（或使用键盘的箭头键）拖动鼠标（或使用键盘的箭头键）改变层的大小：改变层的大小：使用鼠标拖动层周围的任意一个句柄。使用鼠标拖动层周围的任意一个句柄。（要改变多个层的大小，选择多个层，单击修改（要改变多个层的大小，选择多个层，单击修改对齐对齐设成高度相同，设成高度相同，则将所选择层的高度设置成最后被选择层的高度则将所选择层的高度设置成最后被选择层的高度）对齐层：对齐层：选择要对齐的多个层，单击修改选择要对齐的多个层，单击修改对齐对齐选择对齐方式（左对齐、选择对齐方式（左对齐、右对齐、对齐上缘、对齐下缘）右对齐

57、、对齐上缘、对齐下缘）删除层：删除层：选择层，按选择层，按deldel键键网页与网站设计网页与网站设计7. 在层中插入对象在层中插入对象层是一种容器，可以向层中插入任何对象层是一种容器，可以向层中插入任何对象选择层选择层插入文本或其他对象（与编辑网页一样）插入文本或其他对象（与编辑网页一样）8. 层与表格的转换层与表格的转换将表格转换为层：将表格转换为层：修改修改转换转换表格到层表格到层将层转换为表格：将层转换为表格：修改修改转换转换层到表格层到表格在转换时不允许层有嵌套，如果有嵌套，不能将层转换为表格在转换时不允许层有嵌套，如果有嵌套，不能将层转换为表格网页与网站设计网页与网站设计本章小结本

58、章小结 主要介绍了网页中层的概念，层可以放置在网页内任何位置，它是一个容主要介绍了网页中层的概念，层可以放置在网页内任何位置，它是一个容器，可以包含页面中的各种类型的内容，本节着重介绍了层的各种操作，器，可以包含页面中的各种类型的内容，本节着重介绍了层的各种操作，创建层，删除层，层位置、大小的调整，层的嵌套、层的可见性等。层结创建层，删除层，层位置、大小的调整，层的嵌套、层的可见性等。层结构网页与表格布局网页的转换。构网页与表格布局网页的转换。习题习题1.1.创建层有几种方式？创建层有几种方式？2.2.如何创建嵌套层？如何创建嵌套层？3.3.具有嵌套层结构的网页，能转换为表格布局的网页吗？具有

59、嵌套层结构的网页，能转换为表格布局的网页吗？4.4.利用层制作一个网页利用层制作一个网页本章上机题本章上机题网页与网站设计网页与网站设计 第第8章章 动态网页技术动态网页技术具有行为网页的观摩（显示或隐藏层、弹出消息框、打开窗口、设具有行为网页的观摩（显示或隐藏层、弹出消息框、打开窗口、设置状态栏信息、交换图像、播放音乐等）置状态栏信息、交换图像、播放音乐等） 动态网页技术观摩动态网页技术观摩行为概述行为概述行为行为是事件和由该事件触发的动作的组合。网页中的每个元素可以看做一个对象，在dreamweaver MX中可以给任何对象附加一个行为。从而实现网页与浏览者进行交互，增加动态效果，使网页具

60、有动感和活力。事件事件是浏览器产生的消息，它指示网页的浏览者执行了某种操作，根据这种操作，浏览器查看是否存在为该事件调用的javascript代码（执行的动作，是预先编写好的，它指定执行某种任务），如果存在，就执行该代码，从而体现为网页上的行为。网页与网站设计网页与网站设计事件事件应用对象应用对象简要说明简要说明onAbort图像、网页等终止浏览器加载图像、网页时产生onAfterUpdate图像、网页等对象更新之后onBeforeUpdate图像、网页等对象更新之前onFocus按钮、链接、文本框等当前对象得到输入焦点时onBlur按钮、链接、文本框等焦点从当前对象移开时onClick所有元