《网页设计与制作》课件.ppt

《《网页设计与制作》课件.ppt》由会员分享，可在线阅读，更多相关《《网页设计与制作》课件.ppt（246页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、7/11/20222第第1 1章章 网页制作基础网页制作基础 7/11/20223 URLvInternetInternet上所有的资源都有一个唯一的上所有的资源都有一个唯一的URLURL地址，一般将地址，一般将URLURL地址称为网址。地址称为网址。URL的完整格式如下：的完整格式如下：协议:/主机名（或IP地址）：端口号/路径名/文件名7/11/20224【例】几个例】几个URLURL的例子的例子. . （1 1）http:/http:/，用，用httphttp协议和缺省端口号（协议和缺省端口号（8080）访问微软公司）访问微软公司服务器服务器。这里没有指定路。这里没有指定路径和文件名，所

2、以访问的结果是把一个缺省径和文件名，所以访问的结果是把一个缺省主页送给浏览器。主页送给浏览器。 （2 2）ftp:/ （3 3）http:/gnacademy.org: 8001/uu-http:/gnacademy.org: 8001/uu-gna/index.htmlgna/index.html，从运行在端口号，从运行在端口号80018001的的gnacademy.orggnacademy.org服务器上访问服务器上访问index.htmlindex.html主页。主页。 （4)http:/www.w3.org/Addressing/URL/5-4)http:/www.w3.org/Add

3、ressing/URL/5-BNF.html#httpaddressBNF.html#httpaddress，访问，访问www.w3.org www.w3.org 服务器服务器上上Addressing/URLAddressing/URL目录下的目录下的5-BNF.html 5-BNF.html 网页文件网页文件中锚点标识为中锚点标识为httpaddresshttpaddress的地方。的地方。7/11/20226浏览器浏览器v概述v分类 Internet ExplorerNetscape NavigatorMosaic等专业浏览器以及一些以上述浏览器等专业浏览器以及一些以上述浏览器为内核的专用

4、浏览器。为内核的专用浏览器。 其中使用最广泛的是其中使用最广泛的是Microsoft出品的出品的Internet Explorer 6.0（简称（简称IE6）。）。7/11/20227IE6的界面标题栏工具栏菜单栏地址栏状态栏浏览窗口7/11/20228“停止”按钮前进和后退刷新页面改变文字大小选择编码全屏幕显示查看源文件 7/11/20229 用菜单栏上的用菜单栏上的“文件文件”“新建新建”“窗口窗口”，会，会打开一个新的浏览器窗口。打开一个新的浏览器窗口。 一般情况下，打一般情况下，打开四、五个窗口可以开四、五个窗口可以充分利用系统资源，充分利用系统资源，而且通过调整窗口的而且通过调整窗口

5、的大小和位置还可以同大小和位置还可以同时浏览。时浏览。 7/11/202210 浏览器在打开浏览器在打开时自动调入的网页时自动调入的网页称为称为“主页主页”，主，主页可以通过页可以通过“工工具具”“Internet选选项项”打开打开Internet选项对话框，在选项对话框，在“常规常规”选项卡的选项卡的“主页主页”栏设置栏设置. 7/11/202211 使用菜单使用菜单“收收藏藏”“添加到收添加到收藏夹藏夹”打开添加到打开添加到收藏夹对话框。收藏夹对话框。 7/11/202212 使用菜单使用菜单“收藏收藏”“整理收藏夹整理收藏夹”打开收打开收藏夹整理对话框，进行收藏夹中网页的移动、藏夹整理对

6、话框，进行收藏夹中网页的移动、删除、改名及创建新文件夹等操作。删除、改名及创建新文件夹等操作。7/11/202213 在网络速度较慢时，在网络速度较慢时，不观看网页中的图片和不观看网页中的图片和其它多媒体内容可以得其它多媒体内容可以得到更快的下载速度。通到更快的下载速度。通过过“工具工具”“Internet选项选项”打开打开Internet选项选项对话框，在对话框，在“高级高级”选选项卡中可以对浏览器的项卡中可以对浏览器的工作方式进行设置工作方式进行设置 7/11/202214 通过工具通过工具Internet选项，打开选项，打开Internet选项对话框，在选项对话框，在“内内容容”选项卡的

7、选项卡的“个人个人信息信息”部分单击部分单击“自自动完成动完成”按钮打开自按钮打开自动完成设置对话框动完成设置对话框 。7/11/202215搜索引擎的使用1、使用浏览器的“搜索”按钮2、使用专门的搜索引擎 http:/ (Google) http:/ (摆渡) http:/ (雅虎) http:/ (搜狐) 7/11/202216认识网站v1.门户网站v2.个人网站v3.专业网站v4.职能网站7/11/2022171.门户网站 这类网站是一种综合性网站，涉及领域非常广泛，包含文学、音乐、影视、体育、新闻和娱乐等方方面面的内容，具有论坛、搜索和短信等功能。现在国内较著名的门户网站有搜狐（）、网

8、易（）等。7/11/2022182.个人网站v个人网站具有较强个性化，是以个人名义开发创建的网站，其内容、样式、风格等都是非常有个性的。7/11/2022193.专业网站v这类网站具有很强的专业性，通常只涉及某一个领域，内容专业。如榕树下网站（）即是一个专业文学网站。7/11/2022204.职能网站v职能网站具有专门的功能，如政府职能网站等。目前逐渐兴起的电子商务网站也属于这类网站，较有名的电子商务网站有阿里巴巴（）、卓越网（）和当当网上书店（）等。7/11/202221认识网页Flash动画导航栏GIF动画文字表单图片超级链接7/11/202222v网页中的元素网页中的元素1.文字文字2.

9、图像图像3.表单表单4.Flash动画动画5. 表格表格6. 超级链接超级链接7. 视频、音频视频、音频8. POP窗口窗口9. 标题栏和状态栏文字标题栏和状态栏文字7/11/2022237/11/202224 下面就是网页结构的总体框架： 7/11/202225（1）版本信息）版本信息 版本信息位于版本信息位于HTML网页文件的第一行网页文件的第一行 （2）HTML文件标记文件标记 大部分网页文件都是以大部分网页文件都是以标记开始的，在文件标记开始的，在文件的结尾处又以的结尾处又以结束结束 （3）头部信息）头部信息 HEAD标记之间是标记之间是HTML文档的头部，用来标明当前文档文档的头部，

10、用来标明当前文档的有关信息的有关信息 在在HEAD标记之间，使用频率最高的标记就是标记之间，使用频率最高的标记就是TITLE，它用于定义显示在浏览器标题栏的文档标题。，它用于定义显示在浏览器标题栏的文档标题。7/11/202226【例】给网页设置【例】给网页设置 “励志学社励志学社”的文档标的文档标题，可在头部输入以下代码：题，可在头部输入以下代码：励志学社励志学社7/11/202227（4）主体标记）主体标记 网页的主体是网页的主体是“”标记标记对作用的范围对作用的范围 标记用于定义标记用于定义HTML文档主体的开始，文档主体的开始，它能够设置网页的背景图像、背景颜色、链接颜色它能够设置网页

11、的背景图像、背景颜色、链接颜色和网页边距等属性，其基本用法如下所示：和网页边距等属性，其基本用法如下所示： Bgcolor为背景颜色。关于颜色的值后面会详为背景颜色。关于颜色的值后面会详细介绍。细介绍。Text为不包含超级链接的文字颜色。为不包含超级链接的文字颜色。Link为超级链接文字的颜色。为超级链接文字的颜色。Alink为正被点击的超级链接文字的颜色。为正被点击的超级链接文字的颜色。7/11/202228Leftmargin、Topmargin用于设置网页的左用于设置网页的左边距和上边框，它们是以像素为单位边距和上边框，它们是以像素为单位 【例【例1】将网页的上边距和左边距分别设置为】将

12、网页的上边距和左边距分别设置为40和和30个像素的宽度，使用黑色文本、白色背景，个像素的宽度，使用黑色文本、白色背景，未访问的链接源采用蓝色，已访问的链接源标记未访问的链接源采用蓝色，已访问的链接源标记为暗红色。为暗红色。Vlink为已经点击过的超级链接文字的颜色。为已经点击过的超级链接文字的颜色。Background设置，如果设置了背景图片，设置，如果设置了背景图片，图片会覆盖已经设置的颜色。图片会覆盖已经设置的颜色。 7/11/202229XML（eXtensible Markup Language）被称作是下一代的网页标）被称作是下一代的网页标记语言，也是采用各种标记来形成网记语言，也是

13、采用各种标记来形成网页的源代码。页的源代码。 XML中包括可扩展格式语言中包括可扩展格式语言XSL(Extensible Style Language) 和和可扩展链接语言可扩展链接语言XLL(Extensible Linking Language)。7/11/202230静态网页指基本上全部使用静态网页指基本上全部使用HTML语言制作的网页，页面的语言制作的网页，页面的内容是固定不变的。内容是固定不变的。动态网页（动态网页（DynamicHTML，DHTML）利用）利用JavaScript，CSS (层叠样式表层叠样式表) 及其它类似的语言如及其它类似的语言如VBScript等与等与HTML

14、进行有机的结进行有机的结合来使静态的合来使静态的HTML网页变成动态。网页变成动态。 7/11/202231专业的网站都是建立在使用数据库的专业的网站都是建立在使用数据库的基础上的，要将这些数据库变成可以通过基础上的，要将这些数据库变成可以通过浏览器显示和操作的浏览器显示和操作的Web页面，就需要编页面，就需要编写服务器端的程序。用户向服务器传送提写服务器端的程序。用户向服务器传送提交的表单（个人信息、选择结果等）需要交的表单（个人信息、选择结果等）需要在服务器端进行记录、筛选等处理。大量在服务器端进行记录、筛选等处理。大量的数据库查询、修改处理也需要服务器端的数据库查询、修改处理也需要服务器

15、端程序的支持。程序的支持。目前常用的服务器端编程技术主要有目前常用的服务器端编程技术主要有CGI、ASP、PHP、JSP等，不同的技术等，不同的技术需要不同的系统环境支持。需要不同的系统环境支持。7/11/202232 1、确定网页的内容、确定网页的内容 2、设计网页的组织结构、设计网页的组织结构 3、资料的收集与整理、资料的收集与整理 4、选择网页的设计方法、选择网页的设计方法常用的网页制作工具有常用的网页制作工具有Frontpage、Dreamweaver等。服务器端的等。服务器端的ASP程序可以使用程序可以使用Visual Interdev、UltraDEV等编辑。等编辑。 7/11/2

16、02233开始网页制作v构建页面框架v创建导航条v填充内容v创建返回主页连接7/11/202234网页制作的原则v站点要有创意v整体规划v动画不能过多v导航要明朗v制作通用网页v主题鲜明v优化图象v定时更新7/11/202235 1、网页的标题要简洁，明确。、网页的标题要简洁，明确。 2、在文本中要使用水平线，以分割不同部分。、在文本中要使用水平线，以分割不同部分。 3、对重点段落要强调显示。、对重点段落要强调显示。 4、网页中插入的图片要尽量的小。、网页中插入的图片要尽量的小。 5、图形要附加文字说明，以便关闭图像时查看。、图形要附加文字说明，以便关闭图像时查看。 6、网页中引用的资料及商标

17、（或图标），不能、网页中引用的资料及商标（或图标），不能侵犯版权。侵犯版权。7/11/202236Macromedia Studio MX2004是目前应用最是目前应用最广泛的网页制作工具组件，使用方便、功能齐全，广泛的网页制作工具组件，使用方便、功能齐全，Dreamweaver、Flash、Fireworks被称作被称作“网页网页三剑客三剑客”。在在Dreamweaver 里用丰富的层叠样式表制作耐看，里用丰富的层叠样式表制作耐看，专业的网站。专业的网站。 Macromedia Flash 工具可较快的制作工具可较快的制作 SWF 文件。文件。 Fireworks通过自动变形，用动的效果，图

18、片编通过自动变形，用动的效果，图片编辑工具和拖拽工具能传送较精彩的辑工具和拖拽工具能传送较精彩的 Fireworks 图片。图片。 7/11/202237第2章 Dreamweaver MX 2004本章要点初识Dreamweaver MX 2004创建站点Dreamweaver MX 2004基本操作启动与退出Dreamweaver MX 2004安装好Dreamweaver MX 2004后就可以使用它进行网页制作了。接下来就讲解怎样启动与退出Dreamweaver MX 2004。 启动Dreamweaver MX 2004启动Dreamweaver MX 2004可选择“开始/所有程序

19、/Macromedia/Macromedia Dreamweaver MX 2004”命令。也可双击Dreamweaver MX 2004的桌面快捷方式。启动Dreamweaver MX 启动Dreamweaver MX 2004首次启动Dreamweaver MX 2004时，将弹出“工作区设置”对话框。在该对话框中可选择工作区布局，对于初学者来说，基本上不会涉及代码编写，可选择 单选按钮。启动Dreamweaver MX 2004以上是首次启动Dreamweaver MX 2004所需进行的操作，以后启动会直接进入工作 界面。退出Dreamweaver MX 2004 在结束网页编辑后若需

20、退出Dreamweaver MX 2004，操作很简单，直接单击操作窗口右上角的 按钮或选择“文件/退出”命令即可。Dreamweaver MX 2004的工作界面启动Dreamweaver MX 2004后即可进入其工作界面。 Dreamweaver MX2004的工作窗口的工作窗口标题栏菜单栏编辑区文档栏属性面板面板组Dreamweaver MX 2004的工作界面菜单栏起始页工具栏文档编辑窗口属性面板面板组创建站点 规划站点创建站点打开站点 编辑站点 规 划 站 点进行网页制作之前需创建站点，利用站点的管理功能可对站点中的文件进行管理或测试。创建站点前首先应规划站点，再通过Dreamwe

21、aver MX 2004的站点管理功能创建站点的框架，包括主页、分支页面和相应的文件夹等。规 划 站 点站点的概念规划站点结构创建导航草图应用举例规划“诚与”广告公司站点站点的概念多个网页文档通过各种链接关联起来就构成了站点，站点可以小到一个网页，也可以大到整个网站。Dreamweaver MX 2004提供了3类站点：本地站点、远程站点和测试站点。用户可通过本地站点和远程站点在本地磁盘和Web服务器之间传输文件，测试站点可用于对动态站点的测试。本地站点远程站点测试站点规划站点结构设计站点的必要前提是规划站点结构。规划站点结构是指利用不同的文件夹将不同的网页内容分门别类地保存，合理地组织站点结

22、构，可提高工作效率，加快对站点的设计。在制作站点时通常先在本地磁盘上创建一个文件夹，将所有在制作过程中创建和编辑的网页内容都保存在该文件夹中。在发布站点时，直接将这些文件夹上传到Web服务器上即可。如果站点内容较多或站点较大，则还需建立子文件夹以存放不同类型的网页内容。规划站点结构在站点规划过程中，需使用合理的文件名称、文件夹名称，好的名称容易理解、记忆，能够表达出网页的内容。通常在命名时，可以采用与其内容相同的英文或拼音进行命名，应避免使用长文件名和中文，如电影文件夹可以命名为movie或dianying。制作网页所需的图片或动画等文件的存放位置也是规划站点结构时应考虑的。如果是大型站点，可

23、分别创建相应的文件夹在各个类别的文件夹下，如在站点根目录下创建一个名称为picture的文件夹用以存放主页中用到的图片和动画。如果站点内容较少，可以只在站点的根目录下创建一个文件夹。创建导航草图做好了站点的规划后，就可根据规划制作出一个导航草图便于理清思路，制作时可直接在纸上粗略绘出导航草图。创建导航草图 新歌推荐 女歌手 男歌手 主题曲 “影视倾城”网站首页 乐坛动态 唱片封面 乐评 原声碟 电影音乐 音乐故事 歌星档案 星闻追踪 新碟快报 海外 中国 应用举例规划“诚与”广告公司站点将为一个名为“诚与”的广告公司网站进行站点结构的规划。规划诚与广告公司站点结构图 公 司 介 绍 业 务 范

24、 围 合 作 伙 伴 户 外 广 告 诚 与 广 告 公 司 网 站 首 页 企 业 文 化 联 系 我 们 首 页 【实例【实例1】创建一个站点】创建一个站点使用菜单使用菜单“站点站点”“”“管理管理站点站点”打开站点管理对话打开站点管理对话框，进行操作框，进行操作创建站点创建站点打开站点和编辑站点信息打开站点打开站点编辑站点编辑站点使用使用“高级高级”方式定义站点方式定义站点 在在“定义站点定义站点”向导进向导进行的任意一个步骤，选择对行的任意一个步骤，选择对话框上部的话框上部的“高级高级”标签，标签，可打开高级站点定义对话框。可打开高级站点定义对话框。 Dreamweaver MX200

25、4的基本操作的基本操作实例二、制作一个简单的网页实例二、制作一个简单的网页设置工作界面设置工作界面v关闭面板关闭面板v标尺和网格标尺和网格v辅助显示辅助显示v首选参数的设置首选参数的设置对象的大小和颜色对象的大小和颜色1.1.修改文字大小修改文字大小 在属性面板上的大小中选择文字的大小，文字大小可设置绝对尺寸、相对尺寸、长度、百分比 2.2.修改文字颜色修改文字颜色 在默认的情况下，文本在浏览器窗口内显示为黑色。在属性面板的文本颜色按钮 上单击可打开调色板，选择要设置的颜色。 设置图像大小的多种操作方式设置图像大小的多种操作方式1.1.拖动改变大小拖动改变大小拖动图像下边、右边、右下角的三个控

26、制点可快速改变图像大小。 2.2.使用属性面板使用属性面板在属性面板的宽、高栏输入宽、高的像素值，可改变图像大小。 3.3.使用右键菜单使用右键菜单 在图像上面单击右键，在弹出菜单中选择“改变大小”可重设图像大小。 6.6.使用面板组的属性面板使用面板组的属性面板使用菜单“窗口”“属性”或单击“标签检查器”面板组打开属性面板，在编辑窗口中选中要设置大小的图片，再单击“常规”前面的加号，列出图片的各种属性，在width和height中设置图片大小的值 。4.4.使用系统菜单使用系统菜单使用菜单“修改”“图像”虽然不能修改图像的大小，但可以改变图像的其他属性。 5.5.使用代码编辑器使用代码编辑器

27、将显示模式设为代码模式或拆分模式，可直接编辑图片文件的HTML代码中的width和height属性的值，改变图像大小 。 设置图像大小的多种操作方式设置图像大小的多种操作方式7/11/202266第3章 插入网页基本元素 本章要点v插入文字v插入图像v插入表格v插入媒体元素v插入表单7/11/202267插入文字v在Dreamweaver中为网页插入文本有两种方法：v直接输入文本v从其他文档中复制文本7/11/202268插入特殊符号v将插入工具切换到“文本”工具组；v使用菜单“插入”“HTML” “特殊字符”。7/11/202269插入特殊符号v插入换行符 使用Shift+Enter组合键

28、7/11/202270插入特殊符号v插入空格 ctrlshift空格 插入特殊符号，不换行空格v插入转义符7/11/202271设置文字属性v进行设置时使用组合键Ctrl+F3或菜单“窗口”“属性”打开属性面板。 设置字体大小 设置字体颜色 设置字体列表 【字体】【编辑字体列表】 单击 在可用字体中选则，单击按钮7/11/202272使用样式设置文字格式v【样式】选择 重命名、再进行修改。把文字变为标题 在属性面板的格式中选择设置文本对齐 在属性面板中设置列表 在属性面板中进行设置7/11/202273 应用举例设置网页文本格式v下面为“如果”网页中的文本进行格式设置，要求文本标题样式与正文不

29、同，正文中某些文字需突出，以达到美化网页文本的目的。7/11/202274网页效果图 7/11/202275插入滚动字幕1.1.插入滚动字幕插入滚动字幕（1）单击编辑窗口上方的“拆分”按钮，将视图切换为拆分模式。 （2）在下方的设计窗口中单击要插入滚动字幕的位置，此时注意查看代码窗口中光标的位置。（3）将插入工具栏设置为“常规”，单击标签选择器按钮，打开标签选择器对话框。 （4）在标签选择器对话框左边窗口逐级选择“HTML标签” “页元素”“浏览器特定”，然后在右边窗口中单击“marquee”，再单击下面的“插入”按钮，marquee标签被插入到代码中，按“关闭”按钮关闭对话框。 （5）在代码

30、中出现，在中间的两个尖括号“”之间输入要滚动的文字，如“欢迎访问励志学社的主页！” 。7/11/202276设置滚动字幕的属性设置滚动字幕的属性 direction为滚动的目标方向，可选right、left、up、down。scrollamount 和scrolldelay为滚动数量和延迟，可设置滚动速度和间隔时间。loop设置循环次数，小于1为连续循环。Bgcolor设置滚动区域的背景颜色。width 和height设置滚动区域的大小，沿垂直方向（up或down）滚动时，必须设置一定的高度值，否则看不到滚动的文字。7/11/202277 设置文本超级链接1.1.使用属性面板使用属性面板 设置

31、超级链接设置超级链接2.2.使用工具按钮使用工具按钮（1）插入超级链接 单击工具栏上的超级链接按钮 （2）插入邮件链接 链接目标是电子邮件地址时，单击工具栏上的电子邮件链接按钮 7/11/202278设置文本超级链接3、设置下载文件的超级链接4、创建外部链接 Http:/5、链接文字颜色的设置 通过页面属性来设置的。7/11/202279使用锚记 v设置锚记 v使用锚记 7/11/202280 插入水平线 水平线可用于页面上内容的分隔。 将工具按钮切换到“HTML”，单击水平线按钮 单击该水平线，可在属性面板中设置水平线的属性，如宽度、高度、对齐方式等。 水平线的颜色可以使用属性面板中的“快速

32、标签编辑器”设置。值得注意的是水平线的颜色只能在预览时看出来。 7/11/202281插入图像v图像的格式 用于网页的图像通常只有GIF、JPE和PNG 3种格式。v图像的获取方法v图像文件的保存 7/11/202282插入图像v插入图像的步骤如下 ：（1）把工具栏切换到“常用”状态，然后单击“图像：图象”按钮（2）选择要插入的图像文件，在文件列表中单击一个图象文件时，图象预览区会显示这个图象的缩略图。（3）单击确定按钮，如果图像文件在站点文件夹中，就会直接插入到网页中，同时在编辑窗口显示出图像。 7/11/202283设置图像的基本属性v改变图像大小v图文混排v垂直边距和水平边距v图像替代v

33、图像边框7/11/202284图片超级链接和图像地图1.1.图片超级链接图片超级链接2.2.图像地图图像地图 如果想在一个图像的不同位置上点击，就跳转到相应的目标网页，就需要使用图象地图。 （1）设置矩形热区（2）设置圆形热区（3）设置多边形热区7/11/202285图像占位符和轮换图像1. 1. 图象占位符图象占位符2.2.插入鼠标经过图像插入鼠标经过图像 单击工具栏上的图像按钮旁边的小三角形，在下拉式菜单中选择图像占位符按钮 单击工具栏上的图像按钮旁边的小三角形，在下拉式菜单中选择鼠标经过图像按钮 7/11/202286设置网页图片属性最终效果图7/11/202287插入表格 v添加表格

34、v编辑表格 v格式化表格 v导入表格数据 7/11/202288表格的知识 表格由数个行与列组成的，行、列交叉组成表格的单元格，可以在表格的单元格内插入各种信息，包括文本、数字、链接，甚至是图像。7/11/202289添加表格v新建表格新建表格v修改表格属性修改表格属性 v设置单元格属性设置单元格属性 7/11/2022901.1.新建表格新建表格（1）将插入工具栏切换到“常用”模式，单击表格按钮 （2）在表格对话框中设置表格的样式。 （3）单击“确定”按钮就可以把表格插到网页中。（4）在表格的各个单元格中分别输入内容。7/11/2022912.2.修改表格属性修改表格属性v高 v背景颜色 v

35、边框颜色 v背景图像 v对齐设置7/11/2022923.3.设置单元格属性设置单元格属性v文字（属性面板的上半部分）文字（属性面板的上半部分）v水平水平 v宽、高宽、高 v垂直垂直 v标题标题 v背景和背景颜色背景和背景颜色 v边框边框 7/11/202293 应用举例在网页中插入表格并添加网页元素v下面为“繁花似锦”网页进行表格的添加和网页元素的添加。7/11/202294最终效果图7/11/202295编辑表格1.1.合并单元格合并单元格拖动选中要合并的单元格，单击属性面板上的合并单元格按钮 2.2.拆分单元格拆分单元格在要拆分的单元格中单击，在单击属性面板上的拆分单元格按钮 3.3.插

36、入或删除行、列插入或删除行、列使用菜单“插入”“表格”菜单中的插入行或列，删除行或列进行相应的操作。7/11/202296编辑表格v实例1、绘制课本51页的表格。7/11/202297插入图像预览效果图7/11/202298格式化表格在要格式化的表格中单击，再使用菜单“命令”“格式化表格”打开格式化表格对话框。 7/11/202299导入表格数据1. 1. 导出导出ExcelExcel数据为文本文件数据为文本文件在Excel中使用菜单“文件”“另存为”打开另存为对话框，在“文件类型”中选择“文本文件（制表符分割）（*.txt）”，保存文件为biaoge.txt。2.2.导入位网页表格导入位网页

37、表格将“插入”工具栏切换为“布局”模式，在右边单击表格数据按钮 选择数据文件为Excel导出的文本文件biaoge.txt，定界符选“Tab”。表格宽度设置单元格的宽度，选择“匹配内容”。也可以制定宽度。7/11/2022100插入媒体元素 v动态元素是一种重要的网页元素。这里我们将学习在网页中插入动态元素，如Flash影片、Flash按钮、Flash文本等，此外还将学习其他一些动态元素的插入方法。7/11/2022101插入媒体元素 v媒体文件的类型 v插入Flash v制作播放电影、背景声音的页面 7/11/2022102媒体文件的类型1.RealVideo1.RealVideo的的.rm

38、.rm、.rmvb.rmvb视频影像格式和视频影像格式和.ra.ra的音频格式的音频格式2.Microsoft Media technology2.Microsoft Media technology的的.asf.asf格式格式3. QuickTim3. QuickTim的的.mov.mov格式格式4.Flash4.Flash的的.swf.swf格式格式5.Metastream 5.Metastream 的的.mts.mts格式格式6.Authorware6.Authorware的的.aam.aam多媒体教学课件格式多媒体教学课件格式7/11/2022103插入Flash1.1.插入插入Fla

39、shFlash动画动画将插入工具栏切换到“常用”模式，单击“媒体：Flash”按钮 2.2.插入插入FlashFlash按钮按钮将插入工具栏切换到“常用”模式，单击“媒体：Flash”按钮旁边的三角形，在菜单中选择“媒体：Flash按钮”按钮 3.3.插入插入FlashFlash文本文本将插入工具栏切换到“常用”模式，单击“媒体：Flash”按钮旁边的三角形，在菜单中选择“媒体：Flash文本”按钮 7/11/2022104制作播电影、声音的页面1.1.插入插件插入插件（1）将插入工具栏切换到“常用”模式，单击“媒体：Flash”按钮旁边的三角形，在菜单中选择“媒体：Flash文本”按钮 （2

40、）选择一个要插入网页的电影格式的文件 （3）在编辑窗口中看到插入了一个灰色矩形插件标志，调整其大小可调整网页中的播放窗口的大小。（4）单击属性面板上的“参数”按钮，可设置各种播放参数。7/11/20221052.2.插入背景声音插入背景声音（1）将插入工具栏设置为“常规”，单击标签选择器按钮 （2）在标签选择器对话框左边窗口逐级选择“HTML标签” “页元素”“浏览器特定”，然后在右边窗口中单击“bgsound”，再单击下面的“插入”按钮，打开“标签编辑器-bgsound”对话框。（3）在“源”中指定背景音乐文件，可以是.wav、.mid或.mp3格式的音频文件。 （4）在“循环”栏指定网页调

41、入时背景音乐的播放次数，选择“无限（-1）”循环播放。其他选项根据需要设置。（5）单击“确定”，背景音乐就插入到网页中。关闭标签选择器对话框。7/11/2022106插入表单v文本字段 v复选框 v单选按钮 v下拉式菜单 v隐藏区域 v按钮 7/11/2022107表 单 简 介v在网上浏览时常会遇到要求填写资料或提供在网上浏览时常会遇到要求填写资料或提供信息的页面，如申请信息的页面，如申请QQ号码时填写个人信息号码时填写个人信息的页面，网上购物时填写的购物单等，这些的页面，网上购物时填写的购物单等，这些页面即是表单页面。表单通常由多个表单对页面即是表单页面。表单通常由多个表单对象组成，如单选

42、按钮、复选框、文本字段以象组成，如单选按钮、复选框、文本字段以及按钮等，网站管理员可以通过表单从浏览及按钮等，网站管理员可以通过表单从浏览者处收集需要的信息，从而实现信息的传递。者处收集需要的信息，从而实现信息的传递。7/11/2022108表单的工作原理 表单支持客户端-服务器关系中的客户端。当访问者在Web浏览器中显示的表单中输入信息，然后单击提交按钮时，这些信息将被发送到服务器，服务器端脚本或应用程序在该处对这些信息进行处理。用于处理表单数据的常用服务器端技术包括Macromedia ColdFusion、Microsoft Active Server Pages（ASP）和PHP。 图

43、6-60 表单的组成对象 7/11/2022109 实例效果 7/11/2022110v创建表单将插入工具栏切换到“表单”模式，单击创建表单按钮 插入的表单区域用红色虚线表示，后面插入的所有表单元素都要插入到这个虚线中。7/11/2022111v 文本字段1.1.单行文本单行文本在表单中输入“用户名”，在单击工具栏上的文本字段按钮 2.2.密码密码密码输入区用于用户输入密码信息，用户在此区域输入的所有字符都显示为“*” 或黑点。3.3.多行文本多行文本在单击工具栏上的文本区域按钮 7/11/2022112v 复选框单击工具栏上的复选框按钮 单选按钮1.1.单选按钮单选按钮单击工具栏上的单选按钮

44、按钮 2.2.单选按钮组单选按钮组单击工具栏上的单选按钮组按钮 7/11/2022113v 下拉菜单1.1.列表列表/ /菜单菜单单击工具栏上的列表/菜单按钮 2.2.跳转菜单跳转菜单在工具栏上单击跳转菜单按钮 7/11/2022114v 隐藏区域在工具栏上单击隐藏域按钮 在网页中插入一个隐藏域标志 v按钮在工具栏上单击按钮按钮 7/11/2022115第4章：页面设计返回返回7/11/2022116 “搜狐”的主页的内容很丰富，色彩鲜艳并有许多大幅广告和浮动广告栏。返回返回7/11/2022117 微软中国的主页，内容比较专一，内容非常有条理，栏目突出，没有凌乱的感觉。 返回返回7/11/2

45、022118 “黑白音乐” 是一个个人主页，它看起来更简单，色彩也不够丰富，但感觉非常清新。 返回返回7/11/2022119 设置网页属性 页面布局 使用框架布局 层的使用 使用CSS CSS属性 返回返回7/11/2022120网页标题 如果文档工具栏没有显示，使用菜单“查看”“工具”“文档”可打开其显示。返回返回7/11/2022121 1外观 2链接 3标题 4标题/编码 5跟踪图像返回返回7/11/20221221.METAMETA设置自定义的一组网页属性的描述。2.关键字关键字关键字设置网页网站的一组关键字，许多搜索引擎和网站关联性统计是通过关键字搜索网页的。3.描述描述设置对网页

46、的一些描述，一般是网页内容的概述，供其它开发者参考。返回返回7/11/20221234.刷新刷新刷新定义网也调入后延迟一段时间的动作 5.基础基础设置网页的基准地址 6.链接链接链接用于设置需要链接的CSS等外部文件的地址和类型。 返回返回7/11/2022124 返回返回7/11/2022125返回返回7/11/2022126 标题正文型结构的顶端是网站标识和标题，下面是网页正文。内容非常简单。 返回返回7/11/2022127返回返回7/11/2022128返回返回7/11/2022129返回返回7/11/2022130网页的版面布局1.确定显示分辨率确定显示分辨率2.版面布局的模式版面布

47、局的模式（1）T型结构布局 （2）口型布局 （3）三型布局 （4）对称对比布局 （5）POP布局 返回返回7/11/2022131标题图片栏链接文字区主要内容区网站版权信息区返回返回7/11/2022132 1个实例 使用表格对课本74页的网页进行布局。返回返回7/11/2022133 （1） 插入一个3行1列的表格a。a 760420 边框为0，填充、间距为0，对齐方式居中。 （2） 在表格a的第3行插入1条水平线，宽度为70。居中。文字 （3） 在表格a的第1行中插入1个2行1列的表格b。宽度100。其余0 （4） 在表格b的第1行插入一个1行2列的表格c。宽度100。返回返回7/11/2

48、022134 （5） 在表格b的第2行插入一个1行5列的表格d。宽度100。 （6） 在表格a的第2行插入一个1行2列的表格e。宽度100。 （7） 在表格e的第1列插入一个2行1列的表格f。宽度100。 （8） 在表格e的第2列插入一个2行1列的表格g。宽度100。 （9）在表格g的第2行插入一个1行3列的表格h。宽度100。 返回返回7/11/2022135 在工具栏上单击扩展表格模式按钮，既可切换到“扩展表格模式” 。 扩展模式下并不是所见即所得的效果，最好不要在单元格中添加内容，只进行页面设计操作。返回返回7/11/2022136用表格布局的页面，往往给人一种过于整齐的排列效果，而使用

49、“布局模式”，则可以是网页中的元素快速、灵活地定位。 在“插入”工具栏单击“布局”按钮，进入布局模式。 返回返回7/11/2022137 绘制布局表格 绘制布局单元格 返回返回7/11/2022138 一个实例：返回返回7/11/2022139 单个框架是指在网页上定义的一个区域，而框架集则记录了同一网页上多个框架的布局、链接和属性信息。 利用框架可以把浏览器窗口划分为多个区域，每个区域可以添加任意网页元素，也可分别显示不同的网页。 框架集与框架之间的关系是包含与被包含的关系，多个框架就组成了框架集，框架集包含了框架1、框架2和框架3共3个框架。返回返回7/11/2022140 用框架布局网页

50、时有如下的技巧和规则：创建好框架或框架集后可对其属性进行设置。每个框架就是不同的HTML网页，我们需要分别保存每个框架文件和框架集文件。确保文件中的每个链接都正确。返回返回7/11/2022141v框架集网页1.创建一个新的框架集网页创建一个新的框架集网页创建框架网页前先要让框架边框显示。在“文档”工具栏的最右边单击视图选项按钮 在弹出的菜单中选择“可视化助理”“框架边框”，使得框架边框被选中。 返回返回7/11/2022142 返回返回7/11/2022143 该图的框架就是先分成上下框架，再把下框架分成左右框架。一般把下框架称为左右框架的父框架，则左右框架是下框架的子框架。 右下框架占最大