《多媒体技术与网页设计第23章页面及框架课件.ppt》由会员分享，可在线阅读，更多相关《多媒体技术与网页设计第23章页面及框架课件.ppt（49页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、1 1第23章 页面及框架第23章 页面及框架23.1 静态和动态页面静态和动态页面 23.2 框架框架 2 2第23章 页面及框架 23.1 静态和动态页面静态和动态页面在网页设计中，HTML格式的网页通常被称为“静态网页”。静态网页没有后台数据库，不含程序，不可交互。ASP、PHP等格式的网页通常被称为“动态网页”。动态网页能与后台数据库交互，进行数据传递。3 3第23章 页面及框架在地址栏里有一些网址特别长，而且还带有“?”，这样的链接一般是动态链接，其所对应的页面就是动态页面。动态页面具有以下优点：(1)动态页面是以ASP、PHP、JSP、Perl或CGI等编程语言制作的。4 4第23
2、章 页面及框架(2)动态页面实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。(3)动态页面上的内容存在于数据库中，根据用户发出的不同请求，其会提供个性化的网页内容。(4)动态页面内容不是存在于页面上，而是在数据库中，从而可大大降低网站维护的工作量。5 5第23章 页面及框架6 6第23章 页面及框架(2)动态网页里往往包含“？”和很多参数，这对目前技术条件下的搜索引擎在判断和识别时造成了很大的困难。(3)动态链接存在一个信任问题，用户和搜索引擎都无法确定这个页面会一直存在。(4)搜索引擎对于静态链接更友好，因此，对动态网址进行URL重写优化使其静态化，是一
3、个非常重要的SEO(Search Engine Optimization，搜索引擎优化)技巧。7 7第23章 页面及框架动态页面与静态页面有以下区别：(1)程序是否在服务器端运行，这是判断网页是否属于动态网页的重要标志。(2)在服务器端运行的程序、网页、组件属于动态网页，它们会随不同客户、不同时间返回不同的网页，例如ASP、PHP、JSP、ASP、.NET、CGI等。(3)运行于客户端的程序、网页、插件、组件属于静态网页，例如HTML页、Flash、JavaScript、VBScript等都是永远不变的。8 8第23章 页面及框架(4)在网站设计中，纯粹HTML格式的网页通常被称为静态网页，早
4、期的网站一般都是由静态网页制作的。静态网页的网址形式通常以.htm、.html等为后后缀的。在HTML格式的网页上，也可以出现各种动态的效果，如.GIF格式的动画、Flash、滚动字幕等，这些“动态效果”只是视觉上的，与我们常说的动态网页是不同的概念。静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件等。9 9第23章 页面及框架10 10第23章 页面及框架Web应用通过动态页(Dynamic Pages)向浏览器提供输出。动态页面的产生基于客户端的请求，例如用户在网上查询股票价格和交易量时，就需要生成动态页以反映当时的交易情况。比起生成静态页，生成动态页时Web服务器要做更
5、多的工作。支持动态页面的主要技术有：11 11第23章 页面及框架(1)CGI(Common Gateway Interface)：它是Web服务器生成动态页面最初采用的方法。在CGI模型中，为每一个浏览器请求生成一个进程。这种方法易于实现也被多种Web服务器支持。但是，其性能很差，原因是每一个访问CGI程序的HTTP请求都要生成一个进程，这限制了服务器处理并发请求的能力；同时，CGI程序运行时不能与Web服务器交互，因为它是以一个独立的进程而运行的。12 12第23章 页面及框架13 13第23章 页面及框架(3)服务器插件技术：几种插件技术分别为几种不同的Web服务器所支持。它们与特定的W
6、eb服务器结合会有很好的性能，但是要依赖于特定Web服务器且不易编程使用。插件技术主要包括Netscape的NSAPI和Microsoft的ISAPI。(4)Servlet：Servlet是生成动态页面的Java解决方案。它具有如下特点：14 14第23章 页面及框架15 15第23章 页面及框架 基于Java语言：Servlet采用Java编写，它继承了Java语言的所有优点。通过垃圾内存清理机制而且不使用指针，使得Servlet避免了内存管理的大多数问题。(5)JSP(JavaServer Pages)：JSP是一种基于Java的脚本语言，其特征如下：内容表示和生成相分离：内容的产生由服务
7、器端的组件完成。JSP提取数据内容并将数据内容与HTML文档相结合。16 16第23章 页面及框架 更好的模型/视图/控制结构：在网络应用中，JSP比Servlet提供更好的M/V/C(模型/视图/控制)支持。Servlet负责控制逻辑和内容的动态生成。这种Controller和View的双重角色使得应用程序难于维护。17 17第23章 页面及框架18 18第23章 页面及框架 移植性好：采用Java作为脚本语言以及JavaBean的组件结构，以与HTML相类似的标准用于数据表示。JSP有良好的跨平台性和适应Web服务器的能力，同时它也拥有Java所具有的各种优点，如强类型系统、面向对象、安全
8、的内存管理机制等。19 19第23章 页面及框架23.2 框框 架架利用框架可以将浏览器窗口划分成若干个区域，每个区域是一个框架，在其中分别显示不同的网页，同时还需要一个文件记录框架的数量、布局、链接和属性等信息，这个文件就是框架集。框架集与框架之间的关系是包含与被包含的关系，如图23.1所示。2020第23章 页面及框架图23.1 含有框架的页面21 21第23章 页面及框架23.2.1 创建预定义框架集1.预定义框架集的类型创建预定义框架集是直接新建具有预定义框架集的文件或在一个普通网页文件中加载预定义框架集。Dreamweaver 8预定义框架集的种类较多，如图23.2所示为各种框架集的
9、样式，用户可以随意进行选择。2222第23章 页面及框架图23.2 Dreamweaver 8预定义框架集2323第23章 页面及框架2424第23章 页面及框架图23.3 选择框架集类型2525第23章 页面及框架(3)单击“创建”按钮，弹出“框架标签辅助功能属性”对话框，如图23.4所示，为每个框架进行命名。图23.4 “框架标签辅助功能属性”对话框2626第23章 页面及框架(4)单击“确定”按钮，关闭对话框完成框架集的创建，如图23.5所示。图23.5 创建的框架集2727第23章 页面及框架2828第23章 页面及框架图23.6 加载预定义框架集2929第23章 页面及框架23.2.
10、2 手动创建框架集手动创建框架集手动创建框架集的步骤为：选择“修改”“框架页”命令，在弹出的子菜单中有“拆分左框架”、“拆分右框架”、“拆分上框架”和“拆分下框架”4个命令，它们的作用分别如下：3030第23章 页面及框架31 31第23章 页面及框架图23.7 拆分框架后的结果3232第23章 页面及框架在已具有框架的页面中，除了可选择“修改”“框架页”命令中的子命令拆分框架外，还可按住Alt键将鼠标指针移至框架的边框，这时鼠标指针变为形状或形状，按住鼠标左键拖动边框到所需位置后释放鼠标，可以进行拆分，如图23.8所示。3333第23章 页面及框架图23.8 拖动鼠标分割框架3434第23章
11、 页面及框架23.2.3 选择框架选择框架(集集)1.在编辑窗口中选择按住Alt键，在所需的框架内单击鼠标左键即可选择该框架。若要选择框架集，只需单击该框架集的边框即可，这时选择的框架集包含的所有框架边框都呈虚线显示。3535第23章 页面及框架2.在“框架”面板中选择选择“窗口”“框架”命令，在浮动面板组中显示“框架”面板，如图23.9所示。在框架面板中显示了框架集的结构、每个框架的名称等信息。3636第23章 页面及框架图23.9 “框架”面板3737第23章 页面及框架若要在“框架”面板中选择框架，直接在面板中单击需要选择的框架即可，选中的框架以粗黑框显示，如图23.10所示。图23.1
12、0 在“框架”面板中选择框架 3838第23章 页面及框架若要在“框架”面板中选择框架集，则在面板中单击该框架集的边框即可，如图23.11所示。图23.11 在“框架”面板中选择框架集 3939第23章 页面及框架23.2.4 保存框架保存框架1.保存框架中的网页文件将光标移到需保存的框架中，选择“文件”“保存框架”命令，在弹出的对话框中指定保存路径和文件名后，单击“保存”按钮，其方法与保存普通网页文件相同。4040第23章 页面及框架2.保存框架集文件选择需保存的框架集，选择“文件”“保存框架”命令，在弹出的对话框中指定保存路径和文件名后，单击“保存”按钮即可。41 41第23章 页面及框架
13、3.保存框架集和所有框架中的文件选择“文件”“保存全部”命令即可保存框架集中的所有文件。如果框架集中有框架文件未保存，则会弹出“另存为”对话框，提示保存该文件。如果有多个文件都未保存，则会依次弹出多个“另存为”对话框。当所有文件都已保存后，将直接以原先保存的框架名保存文件。4242第23章 页面及框架23.2.5 删除框架删除框架要删除某个框架，用鼠标将要删除框架的边框拖至页面外即可。如果被删除的框架中的网页文件没有保存，将弹出如图23.12所示的对话框，询问是否保存该文件，单击“是”按钮对其进行保存，单击“否”按钮取消保存。4343第23章 页面及框架图23.12 选择是否保存框架4444第
14、23章 页面及框架23.2.6 设置框架设置框架(集集)属性属性1.设置框架的属性选择需要设置属性的框架，显示其“属性”面板，如图23.13所示。图23.13 框架的“属性”面板4545第23章 页面及框架该面板中各项参数的含义如下：(1)框架名称：为选择的框架命名。(2)源文件：显示框架源文件的URL地址，单击文本框后的按钮，可在弹出的对话框中重新指定框架源文件的地址。4646第23章 页面及框架(3)滚动：设置框架显示滚动条的方式，有“是”、“否”、“自动”和“默认”4个选项。选择“是”选项表示在任何情况下都显示滚动条；选择“否”选项表示在任何情况下都不显示滚动条；选择“自动”选项表示当框
15、架中的内容超出了框架大小时显示滚动条，否则不显示滚动条；选择“默认”选项表示采用浏览器的默认方式。4747第23章 页面及框架(4)不能调整大小：选中该复选框则不能在浏览器中通过拖动框架边框来改变框架大小。(5)边框：设置是否显示框架的边框。(6)边框颜色：设置框架边框的颜色。(7)边界宽度：输入当前框架中的内容距左右边框间的距离。(8)边界高度：输入当前框架中的内容距上下边框间的距离。4848第23章 页面及框架2.设置框架集的属性选择需要设置属性的框架集，显示其“属性”面板，如图23.14所示。图23.14 框架集的“属性”面板4949第23章 页面及框架该面板中各项参数的含义如下：(1)边框：设置是否显示边框。(2)边框颜色：用于设置边框颜色。(3)边框宽度：用于设置边框宽度。(4)列(或行)：用于设置列(或行)的宽度(或高度)。