第6章 框架与表格布局页面_第1页
第6章 框架与表格布局页面_第2页
第6章 框架与表格布局页面_第3页
第6章 框架与表格布局页面_第4页
第6章 框架与表格布局页面_第5页
已阅读5页，还剩28页未读， 继续免费阅读

下载本文档

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

文档简介

网页设计与制作主讲：xxx第六章框架与表格布局页面1项目展示与项目目标

掌握在网页中创建框架的方法掌握为框架命名并导入框架源文件的方法掌握框架集文件的保存的方法掌握框架集合集属性与框架属性的设置方法掌握编辑框架的内容的方法框架布局页面2.项目资讯关键知识点一：创建预定义框架

新建一个空白文档，执行“查看”→“可视化助理”→“框架边框”命令，在文档窗口中显示边框，将光标移动到边框，其会变成双向箭头形状，如图9-2所示。用光标左键拖动文档窗口中的框架边框，将其拖动到所需的位置上，释放光标左键，即可创建框架集。

2.项目资讯关键知识点二：创建自定义框架

创建自定义框架的方法是：执行“文件”→“新建”命令，在弹出的“新建文档”对话框中选择“示例页”→“框架集”选项，在“示例页列表中”根据需要进行选择，单击“创建”按钮，即可创建框架集。关键知识点三：框架的多种选择方法

选择框架有以下两种方法。（1）执行“窗口”→“框架”命令，在打开的“框架”面板中单击需要选择的框架，则框架集的边界就会被虚线包围。（2）按住<Alt>键，再单击文档窗口中需要选择的框架，即可选中框架。2.项目资讯关键知识点四：框架集的多种选择方法

选择框架集有以下两种方法。（1）将光标移动到整个边框上，按住<Alt>键，当光标指针变为水平方向箭头或垂直方向双向箭头时，单击边框即可选中整个框架集。（2）单击“框架”面板中最外边的边框，当其显示为黑边时，即可选中框架集。关键知识点五：框架的多种选择方法

选择框架集有以下两种方法。（1）将光标移动到整个边框上，按住<Alt>键，当光标指针变为水平方向箭头或垂直方向双向箭头时，单击边框即可选中整个框架集。（2）单击“框架”面板中最外边的边框，当显示为黑边时，即可选中框架集。2.项目资讯关键知识点六：设置框架的属性

框架名称源文件边框边框颜色边框宽度边框高度2.项目资讯关键知识点七：设置框架集的属性

边框边框宽度边框颜色单位“行”和“列”3.项目计划与决策

通常功能型网站多采用框架结构，根据分析图形图像专题学习网站属于一个偏重软件功能的系统，网站设计采用框架结构，具体采用“上方固定、左侧嵌套”的框架布局结构。网页布局将上方框架存放网站的页眉，包括网站名称与网站地址，左侧部分包括“课堂学习”、“实验实训素材下载”、“学生答疑”、“学习交流”、“电子作业批改”、“作业上传”、“公告栏”和教师的工作模块，右侧主窗口包括“实用教程”、“课外提高”和“视频教程”等模块。上方框架图形图像专题学习网站页眉与网址左框架课堂学习素材下载学生答疑学习交流作业上传作业成绩主框架公告栏课外提高实用教程视频教程网站页脚与版权信息4.项目实施

1）根据草图，假设这个主页是上下结构，下方又分为左右结构，上方框架显示网站页眉信息，左方框架显示导航页面，右侧框架显示主内容。

提供的3个网页效果以及最终实现的效果如图所示。

顶部框架页面左侧框架页面主框架页面套用框架后的页面4.项目实施

2）首先，执行“文件”→“新建”命令，在弹出的“新建文档”对话框中选择“示例页”→“框架集”选项，在“示例页列表中”根据需要进行选择“上方固定、左侧嵌套”的示例框架结构，单击“创建”按钮，即可创建“上方固定，左侧嵌套”的框架集，如图所示。

4.项目实施

3）创建完成后，执行“文件”→“框架集另存为”命令，在弹出的“另存为”对话框中输入框架集的名称为“default.htm”，保存框架在所提供的素材文件夹中，命名为“index.htm”，标题为“图形图像处理专题学习网站”，执行“窗口”→“框架”命令，如图所示。4.项目实施

4）单击“框架”面板中的上侧框架（topframe），在属性中单击“浏览文件”按钮在弹出的“选择HTML文件”对话框中选择已经做好的网页“top.htm”。效果如图所示。

4.项目实施

5）点击框架面板的左侧框架(leftframe)，在属性面板中“源文件”后单击“浏览文件”按钮在弹出的“选择HTML文件”对话框中选择已经做好的网页“left.htm”,点击框架面板的右侧框架(mainframe)，在属性面板中“源文件”后点击“浏览文件”按钮在弹出的“选择HTML文件”对话框中选择已经做好的网页“right.htm”，如图所示。4.项目实施

<htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>图形图像处理专题学习网站</title></head><framesetrows="106,*"cols="*"frameborder="NO"border="0"framespacing="0"><framesrc="top.htm"name="topFrame"scrolling="NO"noresize><framesetrows="*"cols="220,*"framespacing="0"frameborder="NO"border="0"><framesrc="left.htm"name="leftFrame"scrolling="NO"noresize><framesrc="right.htm"name="mainFrame"></frameset></frameset><noframes><body></body></noframes></html>6）用鼠标调整框架集中间的边框使其显示效果和谐，然后再次保存此框架网页，此时选中框架集，点击“代码”视图，代码如下：

5.项目检查与评估

学习目标评价项目了解框架的概念，能够把握何时使用框架布局能掌握框架的使用场合掌握在网页中创建框架的方法能在网页中创建框架掌握框架集文件的保存方法能保存框架集文件掌握框架集合集属性与框架属性的设置方法能设置框架集属性与框架的属性掌握编辑框架的方法能编辑框架掌握框架的综合使用能使用框架制作网站或项目6.强化拓展实训：框架中超链接使用

5）使用Dreamweaver打开网页defautl.htm文件，鼠标选择left.htm中的“素材下载”图片，在属性面板中选择“矩形热点工具”，利用工具在素材下载”图片上绘制热点，如左图所示。单击“链接”文本框右边的“浏览文件”按钮，在弹出的“选择文件”对话框中选择scxz.html文件，如右图所示。

对图片绘制矩形热区“选择文件”对话框6.强化拓展实训：框架中超链接使用

2）单击“确定”按钮后，在“属性”栏中的“目标”下拉列表框中选择“mainFrame”选项，如图所示。

设置目标通常设置“目标”下拉列表框中的topframe、leftframe、mainframe分别表示响应得网页scxz.html链接后显示的区域，通常选择_parent可以返回到父窗口中。

6.强化拓展实训：框架中超链接使用

3）保存后按<F12>键预览点击“素材下载”超级链接后的效果如图所示。

链接的文件显示效果1项目展示与项目目标

掌握表格的属性的设置技巧掌握使用表格制作单行线的制作方法掌握表格布局的技巧表格布局页面2.项目资讯

淮信科技有限公司培训中心针对淮安的市场竞争，满足企业自身经营和打造服务品牌的需要而建立的，网站不只是满足中心实施简单的网络宣传，它也是涉及中心服务的内部管理改革、经营流程重组等具体问题，更涉及到整个服务体制和机制的深层次变革。中心网站的建设，最根本的是通过打造一个培训品牌，促使公司培训服务水平产生质的飞跃，真正体现企业“用心服务、用户至上”的服务理念。

根据需求，本网站主要包括“组织架构”、“信息交流”、“组织创建”、“图片浏览”、“关爱社会”等几个模块，同时本网站要能够实现对所有信息的查询，能够显示并下载相关的文档，此外网站还有“服务动态”、“专家指导”等内容。

3.项目计划与决策

针对中心网站的基本设计思路，以蓝色为主色调，突出高新科技公司形象特点，页面干净整洁、主次分明，整个界面采用满屏设计。淮信科技有限公司培训中心网站网站标题“用心服务、用户至上”的服务理念网站动画网站导航文档搜索服务动态专家指导技术研讨关爱社会分类显示友情链接版权信息4.项目实施

1）创建“淮信科技有限公司培训中心网站”文件夹，在文件加中创建“images”、“flash”等文件夹，根据需要，处理相关的图片并保存到“images”文件夹中。2）打开Dreamweaver软件创建新网页，并将其保存到“淮信科技有限公司培训中心网站”文件夹中，命名为“index.htm”，然后设置“页面属性”中“网页标题”为“欢迎访问淮信科技有限公司培训中心网站”，背景色为白色，上、下、左、右边距为0像素。3）在网页中插入表格，具体参数为1行3列，宽为100%，高为65像素，填充、间距、边框都为0像素。分别设置三列的宽度为20%，60%，20%。

4.项目实施

4）分别将“head.gif”、“topmid.jpg”、“headright.gif”插入到表格的第1个单元格、第2个单元格和第3个单元格中，最终效果如图所示。插入淮信科技有限公司培训中心网logo4.项目实施

5）在网页中插入表格，具体参数为1行1列，宽为100%，高为160像素，填充、间距、边框都为0像素。将光标在单元格中点击一下，然后设置表格的背景图为“mid.jpg”。6）在网页中再次插入表格，具体参数为3行1列，宽为100%，填充、间距、边框都为0像素。将光标插入到第1个单元格中，设置背景色为“#243569”(蓝色)。高度设为1像素，同时插入“space.gif”到该单元格，第3个单元格设置和第一个相同，设置第2个单元格的背景色为“#E3E3E3”。7）在第2个单元格中嵌套新表格，具体参数为1行7列，宽为720，高25像素，填充、边框为0像素，间距为1像素，背景色为白色，设置表格单元格的背景色为“#E3E3E3”，依次给单元格中输入“首页”、组织架构”、“学习型班组”、“信息交流”、“组织创建”、“图片浏览”、“关爱社会”等文字，并设置他们的超级链接地址为“index.htm”，如图9-18所示。

4.项目实施

插入背景图片与导航后的效果4.项目实施

8）继续在网页中插入表格，具体参数为1行2列，宽为100%，填充、间距、边框都为0像素，第1列列宽为20%，第2列列宽为80%。9）在第1列中嵌套一个6行2列的表格，宽为100%。设置1、3、5行中的两列宽分别为30%和70%，高为28像素，背景色为“#E3E3E3”。并在1、3、5行中第1列插入图片“left.jpg”，第2列依次插入“文档搜索”、“分类显示”、“友情链接”。将第2、4、6行合并单元格，单元格的高依次为100像素、80像素、30像素，如图所示。

4.项目实施

10）在第2行中插入表格3行2列，宽100%，高90像素。第1行的第一个单元格中输入“检索内容”，第2个单元格中插入文本框（表单元素）；第2行的第1个单元格中输入“文件类型”，第2个单元格中插入列表框（表单元素），第3行的第1个单元格中插入查询按钮（表单元素），第2个单元格中插入重置按钮（表单元素）。11）鼠标在第4行中插入表格2行2列，宽70%，高80%。依次在四个单元格中插入“全部文档”、“组织管理”、“规章制度”、“流程管理”，并设置他们的超级链接为“index.htm”。将光标插入到第6行中，然后插入“互动学习网”，效果如图所示。

4.项目实施

12）在右边的单元格中嵌套新表格，具体参数为1行7列，宽为771像素，填充、间距、边框为0像素，背景色为白色，采用第7步制作横线的方式，将第2、4、6列宽设置为1像素，背景色设置为“#CCCCCC”，并在其中插入“space.gif”图片。设置第1、3、5、7列宽为192像素。

13）在第1列中嵌套新表格，具体参数为4行1列，宽为177像素，在第1行中插入“pix03.jpg”，第2行中插入“pix003.jpg”，第3行中插入“淮信科技有限公

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

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

最新文档

评论

0/150

提交评论