第 7章 建立框架网页
教学目标：
1．能够理解框架的作用
2．能够合理使用框架划分窗口布局
3．能够明白框架和框架集的关系
4．能在框架中创建编辑网页
5．能在框架中打开已有的网页进行编辑
6．能够正确保存框架和框架集
7．能够理解和编辑框架的属性
教学重点：
绘制布局表格、绘制布局单元格、设置布局表格和布局单元格的属性
教学难点：
绘制嵌套布局表格
教学课时：理论：2课时 实训：4课时
教学方法：讲授法、任务驱动法。
教学过程:
一、导入新课
网页布局技术还有一种，叫做框架。然而框架本质上是一种浏览器窗口的分割技术。而前面我们学习的表格和层的布局方式则属于页面分割技术，只是对一个网页的页面做了的划分，在页面不同的位置放置不同的内容，但这些内容仍在同一个页面上。利用框架，我们可以把浏览器窗口分成几个部分，每一部分都相当于浏览器窗口的一个子窗口，都可以用来显示一个完整的网页，从而可以实现多个页面在浏览器中的同时显示，所以说框架应该算作是一种“窗口” 的布局技术。按照布局要求，把浏览器窗口分成若干子窗口，并在各个子窗口中显示具有不同内容的网页，这些网页有机的结合在一起，达到一个完整的布局效果。 二、讲授新课
（ 一）、框架和框架集的概念
框架是一种窗口分割布局技术，利用框架我们可以把窗口分成规划好的若干子窗口，每一个框架都相当于一个子窗口，我们可以在框架中编辑和显示一个完整的网页。不同框架中的网页是互不相干，根据我们的整体规划，可以把不同的信息放置在不同框架中页面上，从而实现我们想要的布局效果。每一个框架都属于某个框架集，我们可以把框架集中的一个框架拆分，来实现更多子窗口的划分，就像我们项目中一样，这其实是通过在框架集中不断的嵌套子框架集来实现的。
（二）、创建框架
在创建框架集或使用框架前，通过选择“查看/可视化助理/框架边框”命令，使框架边框在文档窗口的设计视图中可见。
网页设计
实验指导书
经济与管理学院
二零一二年二月
1 实验一 HTML标记的基本语法
一、实验目的和要求
1．熟悉HTML文件的编辑环境；
2．掌握HTML中与文字、图像、页面、表格、表单和框架等的基本标记。
3．学会使用HTML设计出文本与图像相结合的较为复杂的页面。
二、实验内容
1、根据如表1-1所示的表格写出完整的HTML代码；
课程表
课号 课程名 学分
1002201
《网络原理》 6
1003302 《网页设计与制作》 5
1003507 《管理学原理》 5
其中，《网络原理》和《网页设计与制作》课程的详细说明文件分别为该网页所在目录的net.htm和web.htm，需要为表中的书名设置相应的超级链接，以便在点击后可跳转到相应的说明页上。
2、编写出实现如图1-1所示页面效果的关键html代码，要求点击左边各目录项，相应的链接会显示在右下的帧中，并且适当填加特效如：背景图片、图像、动画等（也可自行设计效果）。
图1-1 个人网站首页
3、编写出实现如图1-2所示页面效果的关键html代码，其中各子项目都做了超链接，链接的目标文件自行指定。
2
图1-2 列表效果图
三、实验步骤
1．打开任何一种文本编辑工具，可以是附件中的记事本，也可以是rontPage/Dreamweaver的代码窗口。
2．按各种不同标签的语法规则，输入合法的代码。
3．输入完成后保存代码文件，文件后缀为.htm/.html。
4．在IE浏览器中打开保存的文件，看看是否能完成自己想要的设置。
四、程序代码（在实验报告中写出）
（1）
课程表
课号
课程名
学分
1002201
《网络原理》
6
3
1003302
xxx学校
课
程
大
纲
科目名称：《网页设计与制作》
专 业：计算机
说 明
随着互联网的高速发展和广泛传播，对从事网页设计与制作的人员需求量也愈来愈多。教材在教学过程中起着至关重要的作用，而缺乏优秀实用的网页设计与制作方面的教材是目前中职学校普遍存在的问题。本书编者旨在为中职学校相关专业，以及对网页设计与制作有兴趣的人员提供一本实用教程。
本书是依据网页设计行业的业内制作标准和相关案例执行为范围编写的。在编写过程中针对读者的特点，项目选择合理、针对性强、理论和实践有机融合；以实践为主，特别注重实用性，并注重融入先进的教学理念与方法，注重提高读者的学习能力。全书从实用的网页设计制作项目入手，以任务驱动的方式系统地介绍了以下内容：网站的制作流程、使用HTML制作简单网页、认识Dreamweaver CS3、搭建与管理本地站点、网页元素的编辑、使用CSS控制页面元素、使用表格布局制作页面、使用框架布局制作网页、使用CSS+DIV布局页面、使用模板和库提高制作效率、使用JAVAScript制作网页特效、策划与制作个人艺术网站。同时结合作者多年来积累的教学工作经验，以实践为主，理论融合其中，是帮助教师联想三大软件、提高学生实践力的有力助手。通过课程学习，学生将具备网页设计与制作的基本技能，并帮助学生在从业道路上积累经验。
本教材还具备一下特点：
1.任务明确；
2.结构新颖；
3.图文并茂，简洁易懂；
4.与国家职业资格证接轨。
《网页设计与制作》课程教学大纲
课程名称：《网页设计与制作》
课程总学时：72
一、教学目的和任务
（一）目的
《网页设计与制作》是计算机相关专业的一门应用性较强的选修课程。通过对网页设计与制作的初步学习，使学生对网页设计与制作的各个环节有感性的认识并理性理解各个网页中各布局的功能和特点，学习网页设计与制作制作方法，为今后在网页设计与制作行业工作提供必要的基础知识，以便能够得心应手地使用好Dreamweaver软件，更好地使设计网页发挥作用。
⽹站布局之------栅格化系统，什么是栅格化系统，使⽤栅格化的
优点和缺点？跟着淘宝UED⾛
栅格系统的形成
1692年，新登基的法国国王路易⼗四感到法国的印刷⽔平差强⼈意，因此命令成⽴⼀个管理印刷的皇家特别委员会。他们的⾸要任务是
设计出科学的、合 理的， 重视功能性的新字体。委员会由数学家尼古拉斯加宗（Nicolas Jaugeon）担任领导，他们以罗马体为基础，采⽤
⽅格为设计依据，每个字体⽅格分为64个基本⽅各单位，每个⽅各单位再分成36个⼩格，这样，⼀个印 刷版⾯就有 2304个⼩格组成，在这
个严谨的⼏何⽹格⽹络中设计字体的形状，版⾯的编排，试验传达功能的效能，这是是世界上最早对字体和版⾯进⾏科学实验的活动，也 是
栅格系统最早的雏形。
栅格系统英⽂为“grid systems”，也有⼈翻译为“⽹格系统”，其实是⼀回事。不过从定义上说，栅格更为准确些，从维基百科查到栅格的
定义为：栅格设计系统（⼜称⽹格设计系统、标准尺⼨系统、程序版⾯设计、瑞⼠平⾯设计风格、国际主义平⾯设计风格），是⼀种平⾯设
计的⽅法与风格。运⽤固定的格⼦设计版⾯布局，其风格⼯整简洁，在⼆战后⼤受欢迎，已成为今⽇出版物设计的主流风格之⼀。
⽹页设计中的栅格系统
我给⽹页栅格系统下的定义为：以规则的⽹格阵列来指导和规范⽹页中的版⾯布局以及信息分布。⽹页栅格系统是从平⾯栅格系统中发
展⽽来。对于⽹页设计来说，栅格系统的使⽤，不仅可以让⽹页的信息呈现更加美观易读，更具可⽤性。⽽且，对于前端开发来说，⽹页将
更加的灵活与规范。
栅格系统在现在的⽹页设计中应⽤越来越多，从⽹络上搜罗了⼀篇关于栅格系统应⽤的⽂章：。
栅格系统的设计原理及应⽤
那么如何设计⼀个栅格系统？接下来我们将通过实例，详细的介绍⼀下⽹页栅格系统的原理与应⽤：
在⽹页设计中，我们把宽度为“W”的页⾯分割成n个⽹格单元“a”，每个单元与单元之间的间隙设为“i”,此时我们把“a+i”定义“A”。他们之间
