中职一年级网页设计与制作第二章_活动3_补充和完善网站_第一课时.pptxVIP

第一课时活动三 补充和完善网站 创建网页的框架,设置框架属性 制作导航网页和初始网页 设置栏目与网页的超链接 1创建网页的框架,设置框架属性 框架网页？ 框架网页是一种特殊的网页，它把网页分为几个框架，每个框架显示不同的网页，各框架中的网页通过超链接建立联系。利用框架网页，可以使网页布局更合理、条理更清断，从而帮助浏览者了解网站的结构，避免在浏览时送失方向。但如果在同一个窗ロ中使用过多的框架，会使浏览者眼花缭乱、无所适从。框架网页一般用来呈现书目、栏目、标题等。目录结构的框架网页实际上由多个网页组成，每个框架中放置的都是一个相对独立的网页。 一张图告诉你，什么是框架网页 如图：是一个左右型的框架，由三个网页文件组成的。首先外部的框架是一个文件，图中我们用index.htm命名。框架中左边命名为A，指向的是一个网页A.htm。右边命名为B，指向的是一个网页B.htm。 步骤（以DREAMWEAVER为例）1、点“文件”菜单新建，弹出“新建文档”对话框如下图：或在插入栏布局选＂框架：左框架＂如下图： 此时,Dreamweaver MX 2004生成一个空白的框架页面，如下图： 2、选择「窗口」菜单＞“框架”，弹出“框架”面板如下图。从框架面板可知，系统对左右框架生成命名。左框架名为：leftFrame，右框架名为：mainFrame，当然您可以通过框架属性面板对框架重新命名，了解这一点非常重要。创建超级链接时，要依据它正确控制指向的页面。 3、保存框架。选择“文件”菜单点击“保存全部”。系统弹出对话框。这时，保存的是一个框架结构文件。我们按照惯例都命名为index.htm。　　保存的时候如果虚线框笼罩的是周围一圈就是保存框架结构。（如右图） 注意：虚线笼罩在右边就是保存框架中右边网页。（如右图） 注意：虚线笼罩在左边就是保存框架中左边的网页：（如右图）这样三个页面就保存了 总结：（1）、框架是网页中经常使用的页面设计方式，框架的作用就是把网页在一个浏览器窗口下分割成几个不同的区域，实现在一个浏览器窗口中显示多个HTML页面。使用框架可以非常方便的完成导航工作，让网站的结构更加清晰，而且各个框架之间决不存在干扰问题。利用框架最大的特点就是使网站的风格一致。通常把一个网站中页面相同的部分单独制作成一个页面，作为框架结构的一个子框架的内容给整个网站公用。 （2）、一个框架结构有两部分网页文件构成：框架（Frame）：框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分中所显示内容无关的网页文件。框架集（Frameset）：框架集也是一个网页文件，它将一个窗口通过行和列的方式分割成多个框架，框架的多少根据具体有多少网页来决定，每个框架中要显示的就是不同的网页文件。 2制作导航网页和初始网页 想实现网页的导航栏菜单，可以通过它，设置文字+链接实现；懂代码的，还可以通过它添加源码，满足强大的个性化设置…用好它，你的表单就是一个微网页！ 小组交流，实践探索，动手试试吧!! 3设置栏目与网页的超链接 网页超链接1、下面我们要实现按左边的超级链接，对应的页面出现在右边。在左边的页面中做上超级链接。指向一个已经存在的页面。注意做好链接以后，要在目标栏中设置为mainFrame。(如下图） 2、设置完毕，保存全部，按F12预览网页。链接指向的页面出现在右边框架中。　3、重复以上步骤，把左框架所有的链接做完，一个简单的网站导航结构创建完成。 小小实践1、创建一个左侧框架页，并在相应的框架中添加FrameA和FrameB两个网页，构成如下图所示的网页 要求：1） 设定LeftFrame的宽为400像素2） 设定两个框架均出现滚动条 2、创建一个如下图所示的三栏框架页，并在相应的框架中添加FrameA、FrameB和FrameC三个网页，构成如下图所示的网页。 1）三栏分别命名为LeftFrame、MidFrame、RightFrame2）三栏的宽度为 200像素、300像素、504像素 　3、创建一个顶部框架，TopFrame中显示新浪的首页，MainFrame显示163的首页。两个框架需要显示滚动条，显示框架边框。效果如下图