网页设计与制作_第1页
网页设计与制作_第2页
网页设计与制作_第3页
网页设计与制作_第4页
网页设计与制作_第5页
已阅读5页，还剩10页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

框架是什么，框架就好比我们的骨骼，支撑着整个网页，如果一个网页没了框架，那么就感觉像一盘散沙，因此为了更好的实现网页的效果，我们就要学会给网页制作一个框架，为了更好的理解什么是框架。我们画一张示意图来进行讨论。WIftSSHKSMindex-htmABBihtmWIftSSHKSMindex-htmABBihtm真别基本剪动巻页税鶴页M-tecss徉式表fli架集炎面設计Css>亜西很计页面设讨£有抽助功能的；□DDDBDDDD上方固足上肖固定•下方固宦上苏真别基本剪动巻页税鶴页M-tecss徉式表fli架集炎面設计Css>亜西很计页面设讨£有抽助功能的；□DDDBDDDD上方固足上肖固定•下方固宦上苏因定，右惻嵌尊上方固足，左側骰#下方因定下才S）定，右惻嵌牽下方固足，左側嵌暮右协固定右凶因定，上才战罢右删固定，下方嵌奁垂总拆分左制因定□□□左惻因定，上亦嵌套左删固走，下方險春小固定的左啊需槃岳直折分的酱■WKtiSMKSM这是一个左右型的框架，由三个网页文件组成的。首先外部的框架是一个文件，图中我们用index.htm命名。框架中左边命名为A，指向的是一个网页A.htm。右边命名为B，指向的是一个网页B.htm。下面我们就来从头开始制作一个框架。1、点“文件”菜单〉新建，弹出“新建文档”对话框如下图：新薙文档或在插入栏〉布局〉选"框架：左框架"如下图:DreamweaverMX2004生成一个空白的框架页面，如下图:2、选择「窗口」菜单〉“框架”，弹出“框架”面板如下图。从框架面板可知，系统对左右框架生成命名。左框架名为：leftFrame，右框架名为：mainFrame，当然您可以通过框架属性面板对框架重新命名，了解这一点非常重要。创建超级链接时，要依据它正确控制指向的页面。

3、保存框架。选择“文件”菜单点击“保存全部”。系统弹出对话框。这时，保存的是个框架结构文件。我们按照惯例都命名为index.htm。保存的时候如果虚线框笼罩的是周围一圈就是保存框架结构。（下图）虚线笼罩在右边就是保存框架中右边网页。（如下图）

虚线笼罩在左边就是保存框架中左边的网页：（如下图）三个页面保存完毕。

4、下面我们要实现按左边的超级链接，对应的页面出现在右边。在左边的页面中做上超级链接。指向一个已经存在的页面。注意做好链接以后，要在目标栏中设置为mainFrame。（如下图）6、 设置完毕，保存全部，按F12预览网页。链接指向的页面出现在右边框架中。7、 重复以上步骤，把左框架所有的链接做完，一个简单的网站导航结构创建完成。更多Dreamweaver教程请继续访问建站学的Dreamweaver教程专区。实验七框架结构实验目的】：通过本实验，使学生熟悉创建、编辑框架网页和利用框架来布局页面的基本方法实验要求】：掌握应用框架设计网页布局的方法；掌握创建、编辑框架网页及设置框架属性的方法；掌握链接框架网页的方法。

基本操作】创建框架结构：在插入面板中找到布局选项，在其中选择下图所示的图标，并选择相应的框架结构选择框架1)首先从“窗口”菜单中打开“框架”面板2)然后在“框架”面板中选择某一个框架，如下图所示

添加网页内容选择某一框架后，点击“属性”－“源文件”以设定框架的网页实验内容】：I创建一个左侧框架页，并在相应的框架中添加FrameA和FrameB两个网页，构成如下图所示的网页要求：设定LeftFrame的宽为400像素设定两个框架均出现滚动条II创建一个如下图所示的三栏框架页，并在相应的框架中添加FrameA、FrameB和

FrameC三个网页，构成如下图所示的网页。1）三栏分别命名为LeftFrameMidFrame、RightFrame2）三栏的宽度为200像素、300像素、504像素操作步骤：1） 创建一个左侧框架网页，选定整个框架之后（选定整个框架参见P110），点击切换到拆分视图，将Frameset标记符中的Cols属性修改为：200，300，*（请注意切换到英文状态下输入）〈framesetrows二"*"cols二"200,300,*">2） 分别在“框架”面板中选择相应的框架，插入相应的网页III框架网页中的超级链接要求：1）创建左侧框架网页

2）在左侧框架中设定三个超级链接，并链接对应的网页文件。网页将在MainFrame显示。默认显示“2004年经典对白”3）左侧框架背景为灰色4）框架集需要显示边框，宽度为3象素IV利用已有网页制作框架网页11斟I紳州出押L胖口出艸轴112）在左侧框架中设定三个超级链接，并链接对应的网页文件。网页将在MainFrame显示。默认显示“2004年经典对白”3）左侧框架背景为灰色4）框架集需要显示边框，宽度为3象素IV利用已有网页制作框架网页11斟I紳州出押L胖口出艸轴11」川出申1出脚川叩川川|f|111IWIL山川畀出評|川川11川UUII坤删111曲4聊电娜鬭卿幅品制心.Tn右边网页客户服务中心论坛日志管理初始信息设達论坛版面添加|管理

论坛权限管理

合并论坛数据

更新论坛数据联盟论坛添加丨管理

发布论坛公甘|管理

论坛门派管理隐私保护版权所有。Copyright2003吉林伍陆桀捌股份有限公司要求：按照样张所示，利用index文件夹中提供的四个网页，组成如图所示的框架网页参考习题】1、创建一个顶部框架，TopFrame中显示新浪的首页，MainFrame显示163的首页。两个框架需要显示滚动条，显示框架边框。效果如下图注册通行证登录名［密码［I免费邮箱创登录|忘记密码免费邮箱VIF邮箱企业邮箱茴设为首页创cj常我新浪冽9jn&.成都曹阵雨首页丨新闻财经I娱乐丨宽频I玄性丨房产I旅游丨游戏I军事I论坛丨企业丨短信爱问丨体育科技I音乐ITV|育儿丨家居|法治丨星座|上海丨圈子丨城市丨卷韬”邮箱丨博客手机I乐库丨理财I饮骨丨汽车I名品丨教育I广东I高尔夫丨苗页丨鏗信天气丨播客丨数码I读书丨家电I健鹿|F1|商城|UC|搜索|iGame|分类丨聊天公园环抱丽郡东萌褐石封顶了! 万科複楼刊万起售半山别墅犬耳中华御杲■盛世国宅独栋总部集群 万城华府典藏公开望京公寓的新交通银行iA般专栏I注册通行证I邮箱用户名密码|网易通行证 登录免费邮VIF邮箱188财富邮一卡通：充值中心網易NETEASE 新闻I体育IWBAI娱乐|明星|财经|科技|汽车|手机|女人丨旅游|游戏|探索|閤片|www-1C3-comJ 3G邮箱军事|奥运|英超丨电影丨商业丨证券|基金|车型|数码丨时尚丨情爱|招聘|拍卖|杂志|www-1C3-com±lIA±l2、利用素材中的163、sinal的图片制作如下的框架网页。登录網易NetEasewww・4冷3登录網易NetEasewww・4冷3・com翳丸新嗣■ctfm^cnBai靳百度新闻丽页memimp3图上空间I更多》》把百度设肯首页百度搜索框架本身就是一个网页文件，而所谓的导航（目录）和正文也都是另外独立的网页文件——也就是说，一个框架一般至少需要3个网页文件组成。你用什么软件编写的？注意退出时的保存提示。比如一个简单的目录框架网页名为INDEX.HTM，—般都包含left.ht（左边导航目录）和MAIL.HTM （右边主体内容）部分INDEX.HTM网页关键代码应为<framesetcols="150,*"><framename="contents"target="main"src="left.htm"><framename="main"src="main.htm"><noframes><body>框架是网页中经常使用的页面设计方式，框架的作用就是把网页在—个浏览器窗口下分割成几个不同的区域，实现在—个浏览器窗口中显示多个HTML页面。使用框架可以非常方便的完成导航工作，让网站的结构更加清晰，而且各个框架之间决不存在干扰问题。利用框架最大的特点就是使网站的风格—致。通常把—个网站中页面相同的部分单独制作成—个页面，作为框架结构的—个子框架的内容给整个网站公用。—个框架结构有两部分网页文件构成：

框架（Frame）:框架是浏览器窗□中的一个区域，它可以显示与浏览器窗□的其余部分中所显示内容无关的网页文件。框架集（Frameset）:框架集也是一个网页文件，它将一个窗□通过行和列的方式分割成多个框架，框架的多少根据具体有多少网页来决定，每个框架中要显示的就是不同的网页文件。一、创建框架在创建框架集或使用框架前，通过选择“查看/可视化助理/框架边框”命令，使框架边框在文档窗□的设计视图中可见。1、使用预制框架集（1）、新建一个HTML文件，在快捷工具栏选择“布局”，单击“框架”按钮，在弹出的下拉菜单中选择“顶部和嵌套的左侧框架”。标淮扩展布局B06.html布局▼标淮扩展布局B06.html布局▼ID左侧框架□］右侧框架□顶部框架□底部框架!LI下方和嵌套的左侧框架□下方和嵌套的右侧框架［口左侧和嵌嘗的下方框架□右侧和嵌套的下方框架口上方和下方框架［H左侧和嵌套的顶部框架Eli右侧和嵌喬的上方惟架顶部和戦套的左側框架DI顶部和戦套的左側框架DI上方和嵌套的右攒框架（2）、使用鼠标直接从框架的左侧边缘河上边缘向中间拖动，直至合适的位置这样顶部和嵌套的左侧框架就完成了。2、鼠标拖动创建框架（1）、新建普通网页，命名后将其打开。（2）、把鼠标放到框架边框上，出现双箭头光标时拖拽框架边框，可以垂直或水平分割网页。二、、保存框架每一个框架都有一个框架名称，可以用默认的框架名称，也可以在属性面板修改名称，我们采用系统默认的框架名称topFrame（上方）、leftFrame（左侧）、mainFrame（右侧）。选择菜单栏〉文件〉保存全部，将框架集保存为index.html,上方框架保存为O7.html,左侧框架保存为08.html,右侧框架保存为O9.html。这个步骤虽然简单，但是很关键，只有将总框架集和各个框架保存在本地站点根目录下，才能保证浏览页面时显示正常。三、 编辑框架式网页虽然框架式网页把屏幕分割成几个窗口，每个框架（窗口）中放置一个普通的网页，但是编辑框架式网页时，要把整个编辑窗口当作一个网页来编辑，插入的网页元素位于哪个框架，就保存在哪个框架的网页中。框架的大小可以随意修改。1、 改变框架大小用鼠标拖拽框架边框可随意改变框架大小。2、 删除框架用鼠标把框架边框拖拽到父框架的边框上，可删除框架。3、 设置框架属性设置框架属性时，必须先选中框架。选择框架方法如下：选择菜单栏＞窗口＞框架，打开框架面板，单击某个框架，即可选中该框架。在编辑窗□某个框架内按住Alt键并单击鼠标，即可选择该框架。当一个框架被选择时，它的边框带有点线轮廓2.设置框架属性选中框架，在属性面板上可以设置框架属性：框架名称、源文件、空白边距、滚动条、重置大小和边框属性等。需要注意的是：1、框架是不可以合并的。2、在创建链接时要用到框架名称，所以我们要很清楚的知道每个框架对应的框架名。四、在框架中使用超级链接在框架式网页中制作超级链接时，一定要设置链接的目标属性，为链接的目标文档指定显示窗□。链接目标较远（其他网站）时，一般放在新窗□，在导航条上创建链接时，一般将目标文档放在另一个框架中显示（当页面较小时）或全屏幕显示（当页面较大时）。“目标”下拉菜单中的选项：_blank放在新窗□中。_parent放到父框架集或包含该链接的框架窗□中。_self放在相同窗□中（默认窗□无须指定）。_top放到整个浏览器窗□并删除所有框架。在我们保存有框架名为mainFrame、leftFrame、topFrame的框架后，在目标下拉菜单中，还会出现mainFrame、leftFrame、topFrame选项：mainFrame放到名为mainFrame的框架中。leftFrame放到名为leftFrame的框架中。topFrame放到名为topFrame的框架中。我做了一个HTML文件，是Frame结构的，左边是超链接，但是链接的是一个“网页文件”，我想点击该链接后，“网页文件”打开的“网页”出现在右边，该怎么写？注意：超链接的是一个“网页文件”，并非“超链接地址”。（可以用Javascript能不能详细一点啊？我的左边页面写的是：<ahref="e:\Web\1.html"target="right">aaaaa</a><ahref="e:\Web\2.html">bbbbbb</a>如果用JS怎么写？麻烦看清楚啊！我的a链接的不是一个超链接，实际上是一个文件，怎么还回答超链接，超链接的target你们不用说我都会。真是无语了！垂直分栏<html><framesetcols="25%,50%,25%"><framesrc="frame_a.htm"><framesrc="frame_b.htm"><framesrc="frame_c.htm"></frameset></html>水平分栏<html><framesetrows="25%,50%,25%"><framesrc="frame_a.htm"><framesrc="frame_b.htm"><framesrc="frame_c.htm"></frameset></html>如何使用〈noframes>标签：<html>〈framesetcols="25%,50%,25%">〈framesrc="frame_a.htm">〈framesrc="frame_b.htm">〈framesrc="frame_c.htm">〈noframes>〈body>Yourbrowserdoesnothandleframes!〈/body>〈/noframes>〈/frameset>〈/html>frame标签〈frame〉标签定义了每个

人人文库> 全部分类> 行业资料 > 各类标准

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论