第2章总体规划-2框架.ppt

《第2章总体规划-2框架.ppt》由会员分享，可在线阅读，更多相关《第2章总体规划-2框架.ppt（43页珍藏版）》请在三一文库上搜索。

1、4.1 框架的基本操作点 4.1.1创建框架集 4.1.2选中框架 4.1.3设置框架属性 4.1.4设置框架集属性 4.2 超级链接的基本操作 4.2.1 超级链接基本类型 4.2.2 超级链接标记,4. 2. 3 创建超级链接 4. 2. 4 设置链接管理特性 4.3 CSS样式的基本操作 4. 3. 1 创建CSS样式 4. 3. 2 设置CSS样式参数 4. 3. 3 创建导航条 4. 3. 4 创建跳转菜单 附选择器类型设置,目 录,4.1框架的基本操作 绪,认识框架网页 严格地说“框架”是指控制框架网页结构的整体，框架中每一个区域称为一个框架窗口。 框架网页是种特殊的HTML网页，

2、它可将浏览器窗口分成不同的区域，称为框架区。每个区都可以显示不同的网页。 在框架网页中，用来分隔网页的窗格称为框架。每个框架包括框架高度、框架宽度、滚动条和框架边框，此外还可指定框架的内边距（框架与网页正文之间的距离）。,框架网页的特点 1.只要单击某一个框架区域内的超链接，其指向的网页就会在另一个框架区域中显示，而不必将整个浏览器窗口中的内容更换一遍。 2.固定网页中的某些内容。 3.并不是所有的浏览器都能显示框架网页，这也是框架网页的一个局限。 框架网页的结构 根据框架分布的不同和各框架作用的不同，框架网页分为多类型。常用的框架结构有：左侧框架、右侧框架、顶部框架、底部框架、上方和下方框架

3、以及各种嵌套框架结构。,绪,创建框架网页的四种方法 1. “修改”菜单“框架集”选择所需框架类型。 2.布局面板 “框架”按钮选择所需框架类型。 3.“标准”工具栏“新建”按钮(或“文件”菜单 “新建”) “新建文档”对话框上，选定所需类型，单击确定。 4. “插入”菜单 “HTML” “框架”命令，从弹出的子菜单中选择选需项。,4.1.1 创建框架集,框架和框架集都是独立的HTML文档，要改变必须先选中。 选择整个框架 1）按住Alt键，鼠标整个边框变为垂直或水平 单击。 2）鼠标第一次分割框架的边框变为垂直或水平单击。 3）在框架面板中，单击“框架” 或“框架集” 选择子框架 1）按住Al

4、t键，鼠标单击欲选择的子框架。(被选中的子框架周围被虚线包围，状态栏上加黑显示标记符frame) 2）同样也可以通过“框架”面板选择子框架。,4.1.2 选中框架,框架属性面板,4.1.3 设置框架属性,框架属性的设置：,“原文件”框 框架对应的原文件路径、名称。 “边界宽度”和“边界高度 ” 设置框架内容与边界的距离。 “边框”框 设置当前框架的边框显示与否。 “边框颜色” 设置当前框架所有边框颜色。 “滚动”框 设置当前框架中滚动条的显示方式。 “不能调整大小”复选 禁止改变框架尺寸。,框架集属性面板,4.1.3 设置框架集属性,框架集属性的设置：,“边框”框 设置框架集中所有边框显示与否

5、。 “边框颜色” 设置当前框架集所有边框颜色。 “边框宽度”框 设置框架集边框的宽度数值。 “行”或“列”框 设置框架集的宽度分3个选项： 1.像素：固定框架大小 2.相对：框架集中框架之间的大小比例。 3.百分比：框架与框架集大小的百分比,附： 课堂小实例,本实例主要运用框架集、框架制作一个主页。实例中用到：框架的插入、编辑、保存等知识。,4.2 超级链接的基本操作 绪,超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图

6、片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。 因链接是把源端点与目标端点之间链接起来，为此将端点形象地称为锚，源端点称为源锚，目标端点称为目标锚。,合理使用超级链接： 合理安排超链接在网页的制作中是非常重要的。采用什么结构的链接会直接影响到网页的布局。建议 ： 避免孤立文件的存在 。 在网页中避免使用过多的超链接 。 网页中的超链接不要超过4层。 页面较长时可以使用书签。 设置主页或上一层的链接。,4.2 超级链接的基本操作 绪,超级链接的类型：,1)外部链接：本站点内不同页面之间相互联系的超链接。又 称锚点链接，用它跳转到本站点指定文档位

7、置。,3)E-mail链接：启用电子邮件程序，书写、发送到指定地址。,2)内部链接：把网页与 Internet 中的目标相联系的链接。用 它可以跳转到本站点以外的其它文档或文件， 图形、电影等。,4)虚拟链接及脚本链接：附加行为至对象或JavaScript代码 的链接。,5)按照使用对象不同，链接又可以分为：文本超链接、图像 超链接、多媒体文件链接、空链接等,4.2.1 超级链接类型,锚标记 ：利用文本创建的超级链接为超文本，通过锚标记 可以实现超文本链接。,4.2.2 超级链接标记,的标记属性： Href 属性：定义一个指向目标锚点的URL，其值就目 标锚的URL路径和文件名。 Name 属

8、性：为链接命名（字符串）。 Type 属性：指定目标锚的类型，一般可省略。 Title 属性：设置路径标题。 Target 属性：设置新文档在哪个窗口或框架集中打开。 注意：锚记的名称应注意区分大小写。,4.2.2 超级链接标记,4.2.2 超级链接标记,在Target 属性设置新文档打开的位置：,1） blank：在新窗口打开。 2） parent：在父窗口打开（使用框架时） 3） seft：在本窗口打开。 4） top：在上级窗口打开（使用多极框架时）,创建本地超级链接的四种方法：,1)使用属性面板中“链接”文本框,3)使用站点地图查看、创建、修改及删除链接。,2)“修改”菜单“创建超级链

9、接”命令。,4)使用右键，在快捷菜单中创建超级链接。,4.2.3 创建超级链接,4.2.3 创建超级链接,打开“超级链接”对话框： “插入”菜单 “超级链接”命令“超级链接”对话框。,4.2.3 创建超级链接,设置超级链接各选项： 1) “文本” 框：输入文档中作为超链接时显示的文本。 2) “链接”框：输入要链接的文件名称。 3)“目标”框：指定链接的页面在窗口中显示的位置。 4) “标题”框：输入超级链接的标题。 5) “访问键”框：输入键盘的等价键（一字母 ）以便在 浏览器中选择该链接。 6) “Tab键索引”框：输入键顺序的编号。,4.2.4 设置链接管理特性,打开“首选参数”对话框

10、“编辑”菜单 “首选参数”命令“分类”选项区“分类”选项 “移动文件时更新链接”下拉按钮。 设置链接管理属性： 1)“总是”选项：是针对当本地站点中对文档重命名或移 动文档时，总是自动更新文档中链接。 2)“从不”选项：当本地站点中对文档重命名或移动 文档时，不更新文档中链接。 3)“提示”选项：询问是否更新文档中链接。,附： 课堂小实例,本实例主要运用CSS选择器设置链接的方式，通过此例学会如何在同一网面中设置不同的链接。,4.3 CSS样式的基本操作 绪,CSS（Cascading Style Sheet ，简称CSS ，层叠样式表） 为了统一万维网上各网站和网页中的样式，方便各种浏览器解

11、释样式，万维网标准委员会(World Wide Web consortium）制定了层叠样式表。它是一种制作网页的新技术，是一种格式化网页的标准方式。 CSS不是一种程序设计语言，而只是一种用于网页排版的标识性语言，是对现有HTML语言功能的补充和扩展。通过对HTML选择器进行设定，精确地控制网页中字体样式、背景、边框及网页的段落和版面等，使网页能够完全按照设计者的要求来显示。,4.3 CSS样式的基本操作 绪,CSS不仅可以把CSS样式表写入HTML 源代码中，还可以 将CSS样式表保存为一个外部文件，在其它文件中引用。 W3C公布的三种样式表： 外部样式表：以CSS为扩展名的文件（又称为“

12、超文本样式表”文件）其中，不仅可包含各种标准的HTML样式的设置，而且可包含自定义的类选择器（Class selector）样式和ID选择器（ID selector）样式。它的作用范围可以是多经网页，或整个网站，甚至不同的网站。 嵌入式样式表：包含在网页内部的样式设置，它的作用范围仅限于该网页。,4.3 CSS样式的基本操作 绪,内联式样式表：仅应用于某一部分网页元素的样式，其作用范围仅限于应用它的网页元素。在HTML文档中，内联式样式表的格式化信息直接插入所应用网页元素的HTML标签中，作为其HTML标签的属性参数。 严格地说，内联样式表称不上表，仅仅是一条HTML标记。三种样式表中，内联的

13、层次最高，外部的层次最低。在同 一(部分)网页元素上，同时应用二种或三种样式，且样式之间(部分)有冲突时，高层次的样式覆盖低层次的样式。如在一段文本上，同时应用了内联、外部样式，其中，字体分别设置为楷体、宋体，最终这段文字将显示为楷体。,样式表是DHTML（动态网页）的一部分，建立样式表的真正意义在于把对象真正引入到HTML中，这样就可以使用脚本程序（JavaScript、VBScript）调用和改变对象属性，使其中的对象产生动态的效果。 CSS样式表一般可以实现下列功能： 更加灵活地控制网页中文字的字体、颜色、大小、间距、 风格及位置。 灵活地设置一个文本块的行高、缩进，并可以为其加入 三维

14、效果的边框。 可以方便地为网页中任何元素设置不同的背景颜色和背 景图片。,4.3 CSS样式的基本操作 绪,可以精确地控制网页中各元素的位置。 可以为网页中的元素设置各种滤镜，从而产生诸如阴影、 辉光、模糊和透明等只有在一些图像处理软件中才能实 现的效果。 与佳酿语言相结合，可以使网页中的元素产生各种动态 效果。 由于是直接的HTML格式代码，网页打开速度非常快。,4.3 CSS样式的基本操作 绪,打开“新建CSS样式”对话框 单击“文本”菜单“新建”命令 “新建CSS样式”对话框。,在“名称”框输入样式名称（名称前必须加“.”） 据情况设置各选项后，“确定”完成CSS样式的创建。,4.3.1

15、 创建CSS样式,“选择器类型”中三种选项功能： 1)“类（可以应用于任何标签）： 自定义一个样式，可以作为文本class属性应用于页面中。 2)“标签（重新定义特定标签的外观）”： 重新定义HTML样式和标签的格式。 3)“高级（ID、上下文选择器等）”： 定义特定标签组合或含有指定ID属性的所有标签的格式。 注：以上三种选项的设置祥见后附内容： “定义在” 选项： 选择新建外部样式表或内部样式表。,4.3.1 创建CSS样式,设置CSS样式参数操作： 1. “编辑”菜单“首选参数”命令“首选参数”对话框； 2.在“分类”列表中选“站点”选项设置相应参数： 在当创建“CSS样式时”中的使用速

16、记： 设置在创建“CSS样式”时使用速记形式的格式样式 在当编辑“CSS样式时”中的使用速记： 确定在编辑“CSS样式”时是否使用速记形式。 1. 【如果原来使用速记】单选： 在编辑已经是速记形式的CSS代码时才使用速记形式。 2. 【依据以上设置】单选：对创建“当CSS样式时”选项 中的对象进行编辑时使用速记形式。,4.3.2 设置CSS样式参数,打开“插入导航条”对话框： “插入”面板 “常用”选项卡“图像”按钮“导航条”选项 “插入导航条”对话框。,4.3.3 创建导航条,“插入导航条”各选项功能： 1) 【】按钮：在“导航条元件”文本框中添加一个菜单。 【】按钮：删除“导航条元件”文本

17、框中所选的菜单。 2)“项目名称”框：用于输入导航条项目的名称。 3)“状态图像”框：用于选择最初显示的图像（必须项） 4)“鼠标经过图像”框：鼠标指针滑过状态图像时显示的图像。 5) “按下图像”框：设置单击状态图像时显示的图像。 6) “按下时鼠标经过图像”框：设置鼠标指针滑过按下图像 时显示的图像。,4.3.3 创建导航条,“插入导航条”各选项功能： 7) “替换文本”框:输入导航条项目的描述性名称 。 8)“按下时,前往的URL”框：导航条项目对应的URL地址。 9)“预先载人图像”复选：用于载入页面时下载图像。 10)“页面载入时就显示”复选：在显示页面时，以按下状 态显示初始图像。

18、 11) “插入”框：选择在文档中是垂直还是水平插入导航条。,4.3.3 创建导航条,跳转菜单概念： 跳转菜单是文档内的弹出菜单，并列出链接到的文档或文件的选项。利用跳转菜单可以创建与整个Web站点内的文档链接、与其它Web站点文档链接、与电子邮件的链接以及与图形的链接。 打开“插入跳转菜单”对话框： “插入”面板 “表单”选项卡 “跳转菜单”按钮“跳转菜单” 对话框（或用“插入”菜单）,4.3.4 创建跳转菜单,“插入跳转菜单”各选项功能： 1 )【】按钮：在“菜单项”文本框中添加一个菜单项。 【】按钮：删除“菜单项”文本框中所选的菜单项。 2)“文本”框：用于输入跳转菜单的名称。 3)“选

19、时，转到URL”框：用于输入跳转菜单对应的URL地址。 4)“打开URL于”框：选择文档打开的位置。 5)“菜单名称”框：用于输入菜单选项名称。 6) )“菜单之后插入前往按钮”复选：添加一个“前往”按钮，而 非菜单提示。 7) “更改URL后选择第一个项目”复选：使用菜单选择提示。,4.3.4 创建跳转菜单,“类（可以应用于任何标签）”项的设置： 1) 选中此项后，顶部列表的 “标题”变为“名称”，输入新建 样式名称； 2) 单击“确定”相应 “CSS样式定义”对 话框；,附“选择器类型”中三种选项的设置,3) 分别选择“分类”列表中各标签选项后设置有关参数定义样式。,“标签（重新定义特定标

20、签的外观）”项的设置： 选中此项后顶部的列表“标题”变为“标签”，设置其选项： 1) body：代表网页的主体（页面中所有对象都处在其中） 2) p：代表一个段落。 3) tably：代表一个表格。 选中一个标签，为其设置样式后，页面中所有同类型的元素都自动套用该样式。 单击“确定”同前相应“CSS样式定义”对话框； 分别选择“分类”列表中各标签选项后设置有关参数定义样式。,附“选择器类型”中三种选项的设置,“高级（ID、上下文选择器等）”项的设置： 选中此项后顶部的列表“标题”变为“选择器”设置其选项： 1) a:link: 设置通常情况下链接文字的样式。 2) a:visited：设置单击

21、后链接文字的样式。 3) a:hover：设置鼠标指针移到链接文字时链接文字的样式。 4) a:active：设置鼠标指针移到链接文字并单击时链接文字 的样式。 单击“确定”同前相应“CSS样式定义”对话框； 分别选择“分类”列表中各标签选项后设置有关参数定义样式。,附“选择器类型”中三种选项的设置,课 后 习 题,一、 填空题 1. 创建嵌套框架的快捷键是_组合键。 2. 要创建无框架的页面，应执行_菜单中的命令。 3.应用框架的主要目的是 _，最常见的框架用途是_。 4.在Dreamweaver中可以用_，编辑CSS文件。 5.链接样式包括_。 6.在【属性】面板的【目标】框中的blank

22、表示：_。 7. Dreamweaver MX 2004 允许使用的三种文档路径类型分 别是： _、_和_。 8.表单的文本域包括_、 _、 _。,二、选择题 1.下列关于选择框架的说法中正确的是：_。 A在文档窗口的【设计】视图中，按住 Alt 键的同时单击 一个框架。 B在【框架】面板中单击框架 。 C在文档窗口的【设计】视图中，直接单击一个框架。 D通过移动方向键，可选择不同的框架。,二、选择题 2.要将一个框架拆分成几个更小的框架，关于可执行的操作说法中正确的是_。 A要拆分插入点所在的框架，从【修改】【框架集】 子菜单中选择拆分项 B要以垂直或水平方式拆分一个或一组框架，应将框架边

23、框从【设计】视图边缘拖入【设计】视图的中间。 C若不在【设计】视图边缘的框架边框拆分框架，应在按住 Ctrl 键的同时拖动框架边框 D要将一个框架拆分成4个框架，应将框架边框从【设计】视 图一角拖入框架的中间,二、选择题 3.下列关于框架的说法正确的一项是：_。 A在Dreamweaver MX 2004中，通过框架可以将一个浏览器窗口划分为多个区域。 B框架就是框架集，框架集也就是框架。 C保存框架是指系统一次就能将整个框架保存起来，而不是单个保存框架。 D框架实际上是一个文件，当前显示在框架中的文档是构成框架的一部分。,二、选择题 4.在一个网站中，通常的路径表示有几种？其方式是_。 A3

24、 绝对路径、根目录相对路径、文档目录相对路径 B2 绝对路径、根目录相对路径 C3 绝对路径、根目录绝对路径、文档目录相对路径 D2 绝对路径、根目录绝对路径 5.下列关于绝对路径的说法正确的一项是_。 A 绝对路径是被链接文档的完整URL,不包含传输协议 。 B使用绝对路径需要考虑源文件的位置。 C绝对路径中，如果目标文件被移动，则链接同样可用 D创建外部链接时，必须使用绝对路径。,二、选择题 6.不属于表单域中的3种类型表单域是_。 A文本字段 B文件域 C隐藏域 D图像域 7. 下列关于表单的说法不正确的一项是_。 A表单对象可以单独存在于网页表单之外 B表单中包含各种表单对象，如文本字段、列表框和按钮 C表单就是表单对象 D表单由两部分组成：一是描述表单的HTML源代码；二是用来处理用户在表单域中输入的信息的服务器端应用程序客户端脚本 8.要创建表单对象，可执行_菜单中的命令。 A【编辑】 B【查看】 C【插入】 D【修改】,三、简答题 （1）简述框架的作用。 （2）简述框架页的概念。 （3）简述锚记链接的定义和作用。 （4）在Dreamweaver MX中，主要包括哪几类表单对象？ 四、操作题 1. 参考书4.4.1编辑框架集网页及超级链接。 2.参考书4.4.2制作导航条。 3.参考书4.4.4创建和应用CSS样式。,本章学习结束,