Adobe Dreamweaver 设计 制作 钱海军讲师
Adobe Dreamweaver 钱海军 讲师 设计 制作
建设框架网站 ·创建普通框架网页 ·创建嵌套框架结构页面 ·创建浮动框架页面 ZhuHai Radio And Television University
ZhuHai Radio And Television University 建设框架网站 • 创建普通框架网页 • 创建嵌套框架结构页面 • 创建浮动框架页面
一、框架的基本使用 框架是网页中最常用的页面设计方式之一。框架的英文是frame,是指网页在一个浏览器 窗口下分割成几个不同区域的形式。利用框架技术可实现在一个浏览器窗口中显示多个HTML 页面。通过构建这些文档之间的相互关系，可以实现文档导航、文档浏览以及文档操作。 1.关于框架 2.创建普通框架网页 ZhuHai Radio And Television University
ZhuHai Radio And Television University 一、框架的基本使用 框架是网页中最常用的页面设计方式之一。框架的英文是frame，是指网页在一个浏览器 窗口下分割成几个不同区域的形式。利用框架技术可实现在一个浏览器窗口中显示多个HTML 页面。通过构建这些文档之间的相互关系，可以实现文档导航、文档浏览以及文档操作。 1. 关于框架 2. 创建普通框架网页
1.1关于框架 框架的作用是将窗口划分为若干个区域，每个区域可以分别显示不同的网页。使用框架可 以方便地完成导航工作。在模板出现之前，框架技术被广泛应用于网页导航。利用框架最大的 特点就是使网站风格一致。通常把一个网站中页面相同的部分单独做成一个页面，作为框架结 构的一个子框架的内容给整个站点公用。 一个框架结构由两部分网页文件组成的。分别是： ●框架(Frame)：框架是浏览器窗口的一个区域，它可以显示与浏览器窗口的其余 部分中所显示内容无关的网页文件。 ●框架集(Frameset)：框架集也是一个网页文件，它将个窗口通过行和列的方 式分割成多个框架，框架的多少根据具体有多少网贡来决定，每个框架中要显示的就 是不同的网页文件。 ZhuHai Radio And Television University
ZhuHai Radio And Television University 1.1 关于框架 框架的作用是将窗口划分为若干个区域，每个区域可以分别显示不同的网页。使用框架可 以方便地完成导航工作。在模板出现之前，框架技术被广泛应用于网页导航。利用框架最大的 特点就是使网站风格一致。通常把一个网站中页面相同的部分单独做成一个页面，作为框架结 构的一个子框架的内容给整个站点公用。 一个框架结构由两部分网页文件组成的。分别是： ● 框架（Frame）：框架是浏览器窗口的一个区域，它可以显示与浏览器窗口的其余 部分中所显示内容无关的网页文件。 ●框架集（Frameset）：框架集也是一个网页文件，它将一个窗口通过行和列的方 式分割成多个框架，框架的多少根据具体有多少网页来决定，每个框架中要显示的就 是不同的网页文件
1.2创建普通框架网页 制作框架网站的前提是把所有的子框架页面制作好，本例提供两个子框架页面，分别是 top.htm和main.htm。这两个页面将整合成一个完整的框架页面。 1,在站点下新建网页文件，通过选择“查看→可视化助理一框架边框”，使框架边框在“文 档”窗口的“设计”视图中可见。 File Edit ViewInsert Modify Text Commands Site Window Help Zoom Out Ctrl+ ftsetection Fit Width Ctrl-Alt-Shift-0 Code Design Code and Design Switch Views Refresh Design View Head Content Ctrl+Shift+H rable Mode Visual Aids Hide All Ctrl+Shift+I CSS Layout Backgrounds Guides Frame Borders 0Q1009%1203X495￥1K/1sec ZhuHai Radio And Television University
ZhuHai Radio And Television University 1.2 创建普通框架网页 制作框架网站的前提是把所有的子框架页面制作好，本例提供两个子框架页面，分别是 top.htm和main.htm。这两个页面将整合成一个完整的框架页面。 1. 在站点下新建网页文件，通过选择“查看→可视化助理→框架边框”，使框架边框在“文 档”窗口的“设计”视图中可见
1.21 创建普通框架网页 2.通过“窗口”菜单打开“框架”面板。 3这里制作上下框架结构，使用鼠标直接从框架的顶部边缘向中问拖曳，直至合适的位置，这 样，上下框架结构就产生了。在“框架”面板里面也出现了框架的结构。 回codeSpt里Ds网Tre:Untted Docment■层此Q.C包a 原面原盛这臣恩三恩 (Contains no frames) Frames manFrame ZhuHai Radio And Television University
ZhuHai Radio And Television University 1.2 创建普通框架网页 2. 通过“窗口”菜单打开“框架”面板。 3.这里制作上下框架结构，使用鼠标直接从框架的顶部边缘向中间拖曳，直至合适的位置，这 样，上下框架结构就产生了。在“框架”面板里面也出现了框架的结构
1.2创建普通框架网页 4.单击“框架”面板中的顶部框架，在“属性”面板中“源文件”后单击“浏览文件”按钮。 5.在弹出的“选择HTML文件”对话框中选择上页面top.htm。 Frame name scfe://GI/webste/top.htm☐9 Borders Defaut✉ topFrame☐SCrOl No☑No resize 8 order cor☐ 6.单击“选HTML文件”对话框的“确定”按钮后，框架中会显示上侧的页面。 7.同理，单击“框架”面板中的下框架，在“属性”面板中“源文件”后单击“浏览文件”按 钮，在弹出的对话框中选择下页面main.htm。这时，框架的上下两侧就将已经制作好的页面加 载显示在框架网页中了。 8.单击“框架”面板中的总框架集，然后从菜单中选择“文件框架集另存为”，将总框架集 存储到本地站点目录下，这样才能够保证预览页面时正常显示。 ZhuHai Radio And Television University
ZhuHai Radio And Television University 1.2 创建普通框架网页 4. 单击“框架”面板中的顶部框架，在“属性”面板中“源文件”后单击“浏览文件”按钮。 5.在弹出的“选择HTML文件”对话框中选择上页面top.htm。 6. 单击“选择HTML文件”对话框的“确定”按钮后，框架中会显示上侧的页面。 7. 同理，单击“框架”面板中的下框架，在“属性”面板中“源文件”后单击“浏览文件”按 钮，在弹出的对话框中选择下页面main.htm。这时，框架的上下两侧就将已经制作好的页面加 载显示在框架网页中了。 8. 单击“框架”面板中的总框架集，然后从菜单中选择“文件→框架集另存为”，将总框架集 存储到本地站点目录下，这样才能够保证预览页面时正常显示
1.2创建普通框架网页 9.用鼠标单击框架的边线，选择“框架”面板中的总框架集，然后在”属性“面板中将”边框 “设为”否“，边框宽度设为0，选中”属性“面板中的上框架，设定高度，单位是像素。 10当希望浏览器缩小时顶部框架的宽度不变，在框架集的”属性“面板中对其进行设置。选中” 属性“面板中的下框架，将宽度设置为”相对“，这时当网页在浏览器中预览的时候，上边部 分就固定宽度了。 11.选择”框架“面板的上框架，在”属性‘面板中设置滚动为“否”，隐藏滚动条。为保证 在浏览器中查看框架时隐藏当前框架的边框，选中“属性”面板中的“不能调整大小”复选框， 将“边框”设定为“否”。 2.下框架的设定与上侧惟一的不同在于“滚动”，因为下面的页面内容可能会很长，选择 “自动”意味着只有在浏览器窗口中没有足够空间来显示当前框架的完整内容时，才显示滚动 爱 Frame name Src fle://GI/website/UntitiedFrame-6 Borders Default topFrame Scrol No☑No resize Borderor☐ Margin width Margin height ZhuHai Radio And Television University
ZhuHai Radio And Television University 1.2 创建普通框架网页 9. 用鼠标单击框架的边线，选择“框架”面板中的总框架集，然后在”属性“面板中将”边框 “设为”否“，边框宽度设为0,选中”属性“面板中的上框架，设定高度，单位是像素。 10.当希望浏览器缩小时顶部框架的宽度不变，在框架集的”属性“面板中对其进行设置。选中” 属性“面板中的下框架，将宽度设置为”相对“，这时当网页在浏览器中预览的时候，上边部 分就固定宽度了。 11. 选择”框架“面板的上框架，在”属性‘面板中设置滚动为“否”，隐藏滚动条。为保证 在浏览器中查看框架时隐藏当前框架的边框，选中“属性”面板中的“不能调整大小”复选框， 将“边框”设定为“否”。 12. 下框架的设定与上侧惟一的不同在于“滚动”，因为下面的页面内容可能会很长，选择 “自动”意味着只有在浏览器窗口中没有足够空间来显示当前框架的完整内容时，才显示滚动 条
二、建立嵌套框架结构 一个框架架文件可以包含多个嵌套的框架集。在Dreamweaver8中大多数预定义的框架集也是用嵌套。如果 在一组框架里，不同行或不同列中有不同数目的框架，则要求是用嵌套的框架集。 1.首先在站点下建立一个网页文件，然后再创建框架集或是用框架前，通过选择“查看→可视化助理一框架 边框”命令菜单，使框架边框在“文档”窗口的“设计”视图中可见。最后，通过“窗口”菜单打开“框架” 面板。 2.使用鼠标直接从框架的上侧边缘向中间拖曳直至合适的位置，制作上下框架结构网页。 3.在刚才创建好的上下结构的基础上，单击“框架”面板中下侧的框架，然后再使用鼠标从框架边框的左侧 向右拖 ZhuHai Radio And Television University
ZhuHai Radio And Television University 二、建立嵌套框架结构 一个框架架文件可以包含多个嵌套的框架集。在Dreamweaver8中大多数预定义的框架集也是用嵌套。如果 在一组框架里，不同行或不同列中有不同数目的框架，则要求是用嵌套的框架集。 1. 首先在站点下建立一个网页文件，然后再创建框架集或是用框架前，通过选择“查看→可视化助理→框架 边框”命令菜单，使框架边框在“文档”窗口的“设计”视图中可见。最后，通过“窗口”菜单打开“框架” 面板。 2. 使用鼠标直接从框架的上侧边缘向中间拖曳直至合适的位置，制作上下框架结构网页。 3. 在刚才创建好的上下结构的基础上，单击“框架”面板中下侧的框架，然后再使用鼠标从框架边框的左侧 向右拖曳，产生嵌套框架
二、建立嵌套框架结构 4.单击“框架”面板中的左下侧框架，在“属性”面板中“源文件”后单击“浏览文件“”按 钮，在弹出的对话框中选择左下页面的网页文件，单击”确定“按钮后，框架中会显示左侧的 页面。 5.同理，单击”框架“面板中的右下侧框架，在”属性“面板中源文件“后单击”浏览文件 “按钮，在弹出的对话框选择右下页面的网页文件，单击”确定“按钮后，框架中会显示右侧 的页面。 6.单击”框架“面板中的总框架集，然后从菜单中选择”文件→框架集另存为“，将总框架 集存储到本地站点目录下，这样才能够保证预览页面时显示正常。 10.鼠标单击框架的边线，选择”框架“面板中的总框架集，在”属性“面板中将”边框“设 为”否“，并设置边框宽度和上框架的高度。 11.点选”属性“面板中的下框架，将下边的高度设置为”相对“，下边部分的网页在浏览器 中预览的时候大小就可以固定了。 12同理，设置总框架集内部的其他框架属性，完成框架样式定义。 ZhuHai Radio And Television University
ZhuHai Radio And Television University 二、建立嵌套框架结构 4. 单击“框架”面板中的左下侧框架，在“属性”面板中“源文件”后单击“浏览文件“”按 钮，在弹出的对话框中选择左下页面的网页文件，单击”确定“按钮后，框架中会显示左侧的 页面。 5. 同理，单击”框架“面板中的右下侧框架，在”属性“面板中”源文件“后单击”浏览文件 “按钮，在弹出的对话框选择右下页面的网页文件，单击”确定“按钮后，框架中会显示右侧 的页面。 6. 单击”框架“面板中的总框架集，然后从菜单中选择”文件→框架集另存为“，将总框架 集存储到本地站点目录下，这样才能够保证预览页面时显示正常。 10. 鼠标单击框架的边线，选择”框架“面板中的总框架集，在”属性“面板中将”边框“设 为”否“，并设置边框宽度和上框架的高度。 11. 点选”属性“面板中的下框架，将下边的高度设置为”相对“，下边部分的网页在浏览器 中预览的时候大小就可以固定了。 12.同理，设置总框架集内部的其他框架属性，完成框架样式定义