《第-2-章标记语言与网页制作-计算机基础技术课件.ppt》由会员分享，可在线阅读，更多相关《第-2-章标记语言与网页制作-计算机基础技术课件.ppt（58页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、高等教育高等教育“十一五十一五”国家级规划教材计算机技术基础国家级规划教材计算机技术基础计算机网络原理、技术及应用计算机网络原理、技术及应用第 2 章标记语言与网页制作PartB 网页设计基础网页设计基础使用使用FrontPage计算机网络原理、技术及应用计算机网络原理、技术及应用网页设计与制作n网页设计基础网页设计基础l页面功能与内容设计页面功能与内容设计l页面布局设计页面布局设计 l页面视觉设计页面视觉设计 l页面效果设计页面效果设计 n使用使用Front Page n网页编辑网页编辑 n设置标记属性设置标记属性 n定义和使用样式定义和使用样式 nFrame框架和框架和IFrame框架框架
2、 计算机网络原理、技术及应用计算机网络原理、技术及应用网页设计基础n页面功能与内容设计页面功能与内容设计n页面布局设计页面布局设计 n页面视觉设计页面视觉设计 n页面效果设计页面效果设计 计算机网络原理、技术及应用计算机网络原理、技术及应用WEB技术基础技术基础生命周期法：将软件工程学和系统工程的理论和方法引入计算机系统的研制开发中，按照用户至上的原则，采用结构化、模块化自顶向下对系统进行分析和设计。具体来说，它将整个信息系统开发过程划分为独立的六个阶段，包括系统分析、程序设计、系统测试、运行和维护以及系统评估。这六个阶段构成信息系统的生命周期。在开发复杂的大系统时，显示了无比的优越性。它也是
3、迄今为止开发方法中应用最普遍最成熟的一种。计算机网络原理、技术及应用计算机网络原理、技术及应用WEB技术基础技术基础原型法:在系统开发之初，尽快给用户构造一个新系统的模型（原型），反复演示原型并征求用户意见，开发人员根据用户意见不断修改完善原型，直到基本满足用户的要求再进而实现系统，这种软件开发方法就是快速原型法。主要优点在于它是一种支持用户的方法，使得用户在系统生存周期的设计阶段起到积极的作用；它能减少系统开发的风险，特别是在大型项目的开发中,由于对项目需求的分析难以一次完成，应用原型法效果更为明显。计算机网络原理、技术及应用计算机网络原理、技术及应用WEB技术基础技术基础 MVC本来是存在
4、于Desktop程序中的，M是指数据模型，V是指用户界面，C则是控制器。使用MVC的目的是将M和V的实现代码分离，从而使同一个程序可以使用不同的表现形式。比如一批统计数据你可以分别用柱状图、饼图来表示。C存在的目的则是确保M和V的同步，一旦M改变，V应该同步更新。计算机网络原理、技术及应用计算机网络原理、技术及应用网页功能进行分类根据根据MVC设计模式，可以将网页功能进行分类设计模式，可以将网页功能进行分类n用于输入输出的页面（视图）；用于输入输出的页面（视图）；n服务端脚本程序页面（模型），这类页面不在浏览器中显服务端脚本程序页面（模型），这类页面不在浏览器中显示，主要是负责数据的查询、存储
5、等；示，主要是负责数据的查询、存储等；n导航页面，类似导航页面，类似MVC中的控制器，也类似于传统程序中的中的控制器，也类似于传统程序中的菜单，实现页面之间的调用和导航，典型的导航页面就是菜单，实现页面之间的调用和导航，典型的导航页面就是站点首页。站点首页。将网页按照将网页按照MVC设计模式进行分类可以更好的规划一个设计模式进行分类可以更好的规划一个Web站点，保证站点的可扩展性、灵活性和可维护性，这也是所有站点，保证站点的可扩展性、灵活性和可维护性，这也是所有的软件设计模式所追求的目标。的软件设计模式所追求的目标。计算机网络原理、技术及应用计算机网络原理、技术及应用网页内容与表现形式n网页内
6、容网页内容l网站网站标志，导航，菜单，图片按钮，表单样式，表格标志，导航，菜单，图片按钮，表单样式，表格数据文字表现，数据文字表现，新闻新闻，公告，讨论区，公告，讨论区，blogs，友情链，友情链接，广告条，版权信息等。接，广告条，版权信息等。n表现形式表现形式l文本、图片、动画等不同的媒体形式来展示，以产生文本、图片、动画等不同的媒体形式来展示，以产生更好的用户体验更好的用户体验 计算机网络原理、技术及应用计算机网络原理、技术及应用常见页面布局-1n基于栏目的页面布基于栏目的页面布l大部分的门户网站首页即采用基于栏目的页面布局形大部分的门户网站首页即采用基于栏目的页面布局形式，例如，式，例如
7、，sina，yahoo，163，265上网导航等上网导航等l优点，基于栏目的页面布局主要应用于一些商业网站优点，基于栏目的页面布局主要应用于一些商业网站的首页。为吸引用户，增加用户访问量，从商业运营的首页。为吸引用户，增加用户访问量，从商业运营的目的出发，网站的内容很多，分成了不同的超链接的目的出发，网站的内容很多，分成了不同的超链接区域（版块）。为节省屏幕空间，在栏目内往往还使区域（版块）。为节省屏幕空间，在栏目内往往还使用标签，以组织更多的内容。用标签，以组织更多的内容。计算机网络原理、技术及应用计算机网络原理、技术及应用常见页面布局-2n整幅效果型布局整幅效果型布局l页面采用大幅图片或页
8、面采用大幅图片或Flash动画，在底部加一动画，在底部加一“登录登录”按钮，通常用于站点首页。按钮，通常用于站点首页。l特点，页面美观，可以较好的展示企业形象。特点，页面美观，可以较好的展示企业形象。l缺点，登录速度较慢。缺点，登录速度较慢。计算机网络原理、技术及应用计算机网络原理、技术及应用常见页面布局-3n“口口”型页面布局型页面布局l页面一般上下各有一个广告条，左面是主菜单，页面一般上下各有一个广告条，左面是主菜单，右面放友情链接等，中间是主要内容，这种页右面放友情链接等，中间是主要内容，这种页面布局也经常用于一些站点的首页设计。面布局也经常用于一些站点的首页设计。n优点，充分利用版面，
9、信息量大。优点，充分利用版面，信息量大。n缺点，页面拥挤，不够灵活。也有将四边缺点，页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计。空出，只用中间的窗口型设计。计算机网络原理、技术及应用计算机网络原理、技术及应用常见页面布局-5n自顶向下层次结构布局自顶向下层次结构布局l将页面自顶向下分成几个平行的区域，顶部是将页面自顶向下分成几个平行的区域，顶部是页头，接下来的区域分别放置超链接块，最下页头，接下来的区域分别放置超链接块，最下面的区域显示具体的文章正文内容。一些文章面的区域显示具体的文章正文内容。一些文章页面或注册页面等经常采用这种类型的页面布页面或注册页面等经常采用这种类型的页面
10、布局。局。计算机网络原理、技术及应用计算机网络原理、技术及应用常见页面布局-6n自由式结构布局自由式结构布局l页面结构布局打破了传统的页头、页尾、菜单、栏目、超链接区页面结构布局打破了传统的页头、页尾、菜单、栏目、超链接区域等布局模式，把页面设计成一张极具创意的广告作品域等布局模式，把页面设计成一张极具创意的广告作品n特点特点l自由式结构布局的优点是页面靓丽、现代、轻松、节奏明快，很自由式结构布局的优点是页面靓丽、现代、轻松、节奏明快，很容易让访问者驻足欣赏。容易让访问者驻足欣赏。l缺点，下载速度缓慢，文字信息量少，信息的逻辑表达能力弱，缺点，下载速度缓慢，文字信息量少，信息的逻辑表达能力弱，
11、浏览者不易直奔主题，信息查找麻烦。浏览者不易直奔主题，信息查找麻烦。n应用应用l自由式结构布局一般用在时尚类站点上，如时装、化妆品等以崇自由式结构布局一般用在时尚类站点上，如时装、化妆品等以崇尚现代、美感为主题的站点，专业性的商务站点不宜采用。尚现代、美感为主题的站点，专业性的商务站点不宜采用。计算机网络原理、技术及应用计算机网络原理、技术及应用页面视觉设计n页面视觉页面视觉l视觉设计是指利用视觉符号来传递各种信息的设计，其应用的范畴很广，可以包括工业产品设计，视觉设计是指利用视觉符号来传递各种信息的设计，其应用的范畴很广，可以包括工业产品设计，广告设计，新媒体设计，服饰设计等等。广告设计，新
12、媒体设计，服饰设计等等。l页面视觉设计分成图形、字体和色彩几个方面页面视觉设计分成图形、字体和色彩几个方面n色彩设计色彩设计 l不同功能的网站，其颜色的主色调设计也不相同，突出网页的主题。政府网站，不同功能的网站，其颜色的主色调设计也不相同，突出网页的主题。政府网站，IBM,Microsoft l其次是颜色的搭配其次是颜色的搭配。确定背景色，确定背景色，标题栏和导航条：深色的背景使空间显得紧密，网页内容少时用；标题栏和导航条：深色的背景使空间显得紧密，网页内容少时用；浅色背景使狭小的空间显得明亮，网页内容多时可使页面干净整洁。浅色背景使狭小的空间显得明亮，网页内容多时可使页面干净整洁。背景色、
13、栏目及文字的颜色通常使用一种颜色，如变化太大会是整个页面显得混乱不堪。背景色、栏目及文字的颜色通常使用一种颜色，如变化太大会是整个页面显得混乱不堪。n图形的应用图形的应用l用于信息反馈用于信息反馈 l增加趣味性增加趣味性，图片和动画的颜色往往非常绚丽和丰富，整个页面会变得生动活泼。图片和动画的颜色往往非常绚丽和丰富，整个页面会变得生动活泼。n文字的字体文字的字体l大号字大号字l空白，提高页面的易读性和易用性空白，提高页面的易读性和易用性，空白可以分离出重要信息，使眼睛得到休息，并给人以冷静，空白可以分离出重要信息，使眼睛得到休息，并给人以冷静和有秩序的感觉。和有秩序的感觉。计算机网络原理、技术
14、及应用计算机网络原理、技术及应用页面效果设计n效果设计效果设计l效果设计就是效果设计就是利用利用Photoshop等图形图像处等图形图像处理工具，按照理工具，按照页面的布局设页面的布局设计，来设计页计，来设计页面的完整图片面的完整图片l然后对图片进然后对图片进行切图，为下行切图，为下面的页面面的页面html代码编代码编写准备写准备images。计算机网络原理、技术及应用计算机网络原理、技术及应用页面效果设计n效果设计效果设计l效果设计就是利用效果设计就是利用Photoshop等图形图像处理工具，按照页面的布局设计，来设等图形图像处理工具，按照页面的布局设计，来设计页面的完整图片计页面的完整图片
15、l然后对图片进行切图，然后对图片进行切图，1）在页面上部是一行带有背景的菜单，因此，我们可以从中切一个像素宽度为）在页面上部是一行带有背景的菜单，因此，我们可以从中切一个像素宽度为1的小图的小图片，在页面片，在页面html代码中，利用该图片实现代码中，利用该图片实现table单元格中的背景横向填充，以达到效单元格中的背景横向填充，以达到效果图的显示效果。如果需要纵向填充，可以取高度为果图的显示效果。如果需要纵向填充，可以取高度为1的小图片，进行纵向填充。的小图片，进行纵向填充。2）对于页面主体中的一些栏目标题，可以直接切为小图片，这些图片的文件很小。）对于页面主体中的一些栏目标题，可以直接切为
16、小图片，这些图片的文件很小。其其他他的的页页面面元元素素，操操作作类类似似。最最后后将将这这些些切切图图图图片片存存储储到到一一个个特特定定的的images文文件件夹中，它是下一步进行夹中，它是下一步进行html页面设计的素材。页面设计的素材。在页面效果设计中，还涉及了其中的文字，对于文字内容，可以通过在页面效果设计中，还涉及了其中的文字，对于文字内容，可以通过css样式表技术，样式表技术，来定义文字的样式。如果布局采用来定义文字的样式。如果布局采用Table，表格属性要定义，表格属性要定义css，从而实现页面布局，从而实现页面布局和显示样式的分离，增加页面维护的灵活性和显示样式的分离，增加页
17、面维护的灵活性 计算机网络原理、技术及应用计算机网络原理、技术及应用网站草图网站草图 个人简介动画作品文学作品教程作品学习方法联系我们提纲、目录计算机网络原理、技术及应用计算机网络原理、技术及应用WEB技术基础技术基础 作业：建立一个个人网站，内容不限，格式自定，生成压缩文件。注意：网页：图文并茂、表格、超链接 至少10个网页文档,首页名：index.htm 压缩文件名格式：班级_学号_姓名.rar 2010年5月1号前交上！计算机网络原理、技术及应用计算机网络原理、技术及应用推销你的网站lEmail 告诉你一个好消息，我的网页做好了，网址：告诉你一个好消息，我的网页做好了，网址：l通过通过Q
18、Q发布消息发布消息l网络上各个搜索引擎去登录你的网址网络上各个搜索引擎去登录你的网址 输入一些基本数据及网站特色即可完成登录操作输入一些基本数据及网站特色即可完成登录操作 计算机网络原理、技术及应用计算机网络原理、技术及应用使用Front Page制作网页nFront Page的功能的功能l网站的新建与维护网站的新建与维护l网页制作网页制作n网页编辑网页编辑n设置标记属性设置标记属性n定义和使用样式定义和使用样式nFrame框架和框架和IFrame框架框架计算机网络原理、技术及应用计算机网络原理、技术及应用Front Page的功能nFront Page的功能的功能l网站的新建与维护网站的新建
19、与维护l网页制作网页制作nFrontPage主界面主界面l设计模式设计模式l拆分模式拆分模式l代码模式代码模式l预览模式预览模式 计算机网络原理、技术及应用计算机网络原理、技术及应用新建站点n操作步骤操作步骤l执行执行“文件文件”菜单中的菜单中的“新建新建”命令，显示命令，显示“新建新建”任务窗格，任务窗格，l在在“新建网站新建网站”区域，点击其中的任何一个超链接，都打开区域，点击其中的任何一个超链接，都打开“网站模版网站模版”对话框对话框 l单击单击“个人站点个人站点”，在指定新网站位置文本框中，输入一个文件夹名，该文件夹即，在指定新网站位置文本框中，输入一个文件夹名，该文件夹即为站点主目录
20、，单击为站点主目录，单击“确定确定”按钮。先导则自动创建一个站点主目录，并根据模版，按钮。先导则自动创建一个站点主目录，并根据模版，创建相应的子文件夹和网页文件，创建相应的子文件夹和网页文件，计算机网络原理、技术及应用计算机网络原理、技术及应用新建网页n在在“文件文件”菜单中，执行菜单中，执行“打开网站打开网站”命令，选择要打开的网站主目录。命令，选择要打开的网站主目录。n在在“文件文件”菜单中，执行菜单中，执行“新建新建”命令，在客户区右侧显示命令，在客户区右侧显示“新建新建”任务窗任务窗格。格。n在网站文件夹列表中，单击要新建网页的文件夹。在网站文件夹列表中，单击要新建网页的文件夹。n在在
21、“新建新建”任务窗格中，单击任务窗格中，单击“空白网页空白网页”超链接，将新建一个空白网页。单超链接，将新建一个空白网页。单击击“其他网页模版其他网页模版”，则打开，则打开“网页模版网页模版”对话框，显示对话框，显示FrontPage提供的默提供的默认模版认模版计算机网络原理、技术及应用计算机网络原理、技术及应用网页编辑n输入文本内容输入文本内容n插入图片插入图片n建立超链接或书签建立超链接或书签n图像地图图像地图n插入表格插入表格 n插入表单插入表单 计算机网络原理、技术及应用计算机网络原理、技术及应用输入文本内容n输入文本内输入文本内容容n格式化格式化n生成生成HTML代码代码计算机网络原
22、理、技术及应用计算机网络原理、技术及应用插入图片n插入图片插入图片l将插入点定位到要插入图片的地方（本例定位到文字的开始）将插入点定位到要插入图片的地方（本例定位到文字的开始）l选择菜单选择菜单“插入插入”、“图片图片”、“来自文件来自文件”，打开，打开“图片图片”对话框。对话框。l设置图片属性。设置图片由于图片的高度和文字不一致，接下来应该设置图片设置图片属性。设置图片由于图片的高度和文字不一致，接下来应该设置图片的环绕方式。的环绕方式。u右单击图片，在快捷菜单中，执行右单击图片，在快捷菜单中，执行“图片属性图片属性”命令，打开图片属性对命令，打开图片属性对话框，设置图片环绕样式。话框，设置
23、图片环绕样式。n格式化格式化n生成生成HTML代码代码计算机网络原理、技术及应用计算机网络原理、技术及应用建立超链接或书签n标记超链接标记超链接l选定超链接的文本或图片选定超链接的文本或图片 l单击工具栏上的单击工具栏上的“超链接超链接”按钮按钮n定义书签定义书签l在网页中选定文字，然后在在网页中选定文字，然后在“插入插入”菜单中，执行菜单中，执行“书签书签”命令，打开命令，打开“书签书签”对话框对话框 l在在“书签书签”对话框中，显示书签名称和网页中已经定义的书签列表，输入书签名，然后单对话框中，显示书签名称和网页中已经定义的书签列表，输入书签名，然后单击击“确定确定”按钮按钮 计算机网络原
24、理、技术及应用计算机网络原理、技术及应用建立图像地图n在在“插入插入”菜单中，指向菜单中，指向“图片图片”，执行，执行“来自文件来自文件”命令，插入一命令，插入一幅图片幅图片 n单击图片，则在单击图片，则在FrontPage窗口的底部显示图片工具栏。窗口的底部显示图片工具栏。l定义书签定义书签l在网页中选定文字，然后在在网页中选定文字，然后在“插入插入”菜单中，执行菜单中，执行“书签书签”命令，命令，打开打开“书签书签”对话框对话框 l在在“书签书签”对话框中，显示书签名称和网页中已经定义的书签列表，对话框中，显示书签名称和网页中已经定义的书签列表，输入书签名，然后单击输入书签名，然后单击“确
25、定确定”按钮按钮 计算机网络原理、技术及应用计算机网络原理、技术及应用建立图像地图（Cont.）n图像地图图像地图计算机网络原理、技术及应用计算机网络原理、技术及应用图像地图HTML代码nHTML代码代码计算机网络原理、技术及应用计算机网络原理、技术及应用插入表格n在网页中插入表格，选择菜单在网页中插入表格，选择菜单“表格表格”，指向，指向“插入插入”，打开，打开“插入表格插入表格”对话框对话框 n表格编辑，插入到网页上的表格，可表格编辑，插入到网页上的表格，可以进行一系列的编辑操作以进行一系列的编辑操作 n设置表格属性设置表格属性在表格上右单击在表格上右单击l表格属性表格属性l单元格属性单元
26、格属性n生成生成HTML代码代码计算机网络原理、技术及应用计算机网络原理、技术及应用插入表单n在在“插入插入”菜单中，指向菜单中，指向“表单表单”，执行，执行“表单表单”，插入一个表单，然，插入一个表单，然后依次执行要插入的控件（表单元素）命令，以便在表单中插入需要的后依次执行要插入的控件（表单元素）命令，以便在表单中插入需要的表单元素。表单元素。n调整表单布局。表单一般和表格联合使用，通过表格设置表单布局。调整表单布局。表单一般和表格联合使用，通过表格设置表单布局。l在在“拆分拆分”或或“代码代码”视图中，手工调整代码。视图中，手工调整代码。n设置表单属性，在表单上右单击，在快捷菜单中，执行
27、设置表单属性，在表单上右单击，在快捷菜单中，执行“表单属性表单属性”命令命令n设置表单域属性，在表单域上右单击，在快捷菜单中，执行设置表单域属性，在表单域上右单击，在快捷菜单中，执行“表单域属表单域属性性”命令命令n生成生成HTML代码代码计算机网络原理、技术及应用计算机网络原理、技术及应用设置标记属性nIntelliSense技术技术 l是指当用户编辑到一个对象时，系统能动态的显示当前对象的方法、属是指当用户编辑到一个对象时，系统能动态的显示当前对象的方法、属性名列表，从而保证用户输入的正确性，或从中选择输入性名列表，从而保证用户输入的正确性，或从中选择输入。计算机网络原理、技术及应用计算机
28、网络原理、技术及应用使用行为面板n标记事件属性，行为标记事件属性，行为 l标记中的事件属性对应的事件，又称为行为，即用户对所标记对象的操作行为标记中的事件属性对应的事件，又称为行为，即用户对所标记对象的操作行为。n行为函数行为函数l要设置标记的行为，首先选择要设置标记的行为，首先选择“设计设计”视图，在视图，在“格式格式”中，执行中，执行“行为行为”命令，打开命令，打开“行为行为”任务面板。任务面板。l单击单击“插入插入”，在下拉列表中，可以选择一个行为。则在下面的事件列表中，显示行为对，在下拉列表中，可以选择一个行为。则在下面的事件列表中，显示行为对应的默认事件。应的默认事件。l如果需要修改
29、行为对应的事件，可以点击事件，则显示当前对象的可选事件列表，选择一如果需要修改行为对应的事件，可以点击事件，则显示当前对象的可选事件列表，选择一个事件作为当前行为的激活事件即可。个事件作为当前行为的激活事件即可。计算机网络原理、技术及应用计算机网络原理、技术及应用定义样式n执行执行“格式格式”菜单中的菜单中的“样式样式”菜单命令，打开菜单命令，打开“样式样式”对话框对话框n在左下侧列表中，可以选择在左下侧列表中，可以选择“用户自定义样式用户自定义样式”或者或者“HTML标记标记”l修改修改html标记默认样式标记默认样式l新建用户样式类新建用户样式类 n在文档的在文档的.内部生成类似如下的代码
30、内部生成类似如下的代码 计算机网络原理、技术及应用计算机网络原理、技术及应用新建样式表文件n在在“新建新建”任务窗格中，点击任务窗格中，点击“其他网页模版其他网页模版”超链接，打开超链接，打开“网页模网页模版版”对话框，选择对话框，选择“样式表样式表”选项卡，然后选择一个样式表模板，从而选项卡，然后选择一个样式表模板，从而建立一个样式表文件。建立一个样式表文件。n通过执行通过执行“格式格式”菜单中的菜单中的“样式样式”菜单命令来编辑样式即可。菜单命令来编辑样式即可。n使用样式表文件使用样式表文件l在在“格式格式”菜单中，执行菜单中，执行“样式表链接样式表链接”命令，打开命令，打开“连接样式表连
31、接样式表”对话框，选择一个对话框，选择一个.css文件，例如文件，例如mystyles1.css，l则在该网页的则在该网页的内增加下述语句：内增加下述语句：计算机网络原理、技术及应用计算机网络原理、技术及应用Frame框架n新建框架网页新建框架网页l在在“文件文件”菜单中，执行菜单中，执行“新建新建”命令，打开命令，打开“新建新建”任务窗任务窗格，格，l在新建网页区域，单击在新建网页区域，单击“其他网页模版其他网页模版”超链接，打开超链接，打开“网页网页模板模板”对话框对话框 l选择选择“框架网页框架网页”选项卡选项卡计算机网络原理、技术及应用计算机网络原理、技术及应用Frame框架设属性设置
32、n拆分与删除框架拆分与删除框架n改变框架窗格的大小改变框架窗格的大小 n设置框架属性设置框架属性 计算机网络原理、技术及应用计算机网络原理、技术及应用Frame框架举例n定义样式表文件定义样式表文件a font-size:11pt;color:#0000FF;text-decoration:none;a:hover color:#FF0000;font-weight:bold;text-decoration:none;a:visited color:#0000FF;text-decoration:none;计算机网络原理、技术及应用计算机网络原理、技术及应用使用浮动框架IFrame浮动框架浮动
33、框架IFramen是一种特殊的框架，它允是一种特殊的框架，它允许在浏览器窗口中嵌套子许在浏览器窗口中嵌套子窗口，在其中显示子页的窗口，在其中显示子页的内容。内容。nn 计算机网络原理、技术及应用计算机网络原理、技术及应用使用浮动框架IFrame浮动框架浮动框架Iframe如如果果用用Frameset来来设设计计，则则需需要要设设计计四四个个frame，如如果果B区区和和C区区的的内内容容较较多多时时，会会在在相相应应的的位位置置显显示示滚滚动动条条。但但是是，D区区的的版版权权信信息息一一直直在在屏屏幕幕上上显显示示，占占用用屏屏幕幕空空间间，我我们们希希望望整整个个页页面面窗窗口口出出现现滚
34、滚动动条条，即即：如如果果B区区或或C区区的的内内容容较较多多时时，会会出出现现窗窗口口垂垂直直滚滚动动条条，即即D区需要拖动滚动条才能显示。区需要拖动滚动条才能显示。要要实实现现上上述述要要求求，使使用用Frameset是是不不能能实实现现别别的的。应应该该通通过过table来来布布局局实实现现，即即设设计计一一个个3x2的的表表格格，分分别别将将第第一一行行和和第第三三行行的的两两个个表表格格合合并并，则则得得到到上上面面的的布布局局结结构构。当当B区区和和C区区的的内内容容较较多多时时，则则在在页页面面窗窗口口自自动动出现垂直滚动条，出现垂直滚动条，D区被推到后面不显示。区被推到后面不显
35、示。如果希望如果希望B区和区和C区的内容高度协调，应该在区的内容高度协调，应该在C区使用区使用IFrame，这样，当点击，这样，当点击B区的一个超链接是，对应的区的一个超链接是，对应的页面在页面在C区显示，如果页面内容超过区显示，如果页面内容超过C区的设定高度，区的设定高度，则则C区出现滚动条区出现滚动条 计算机网络原理、技术及应用计算机网络原理、技术及应用Part B计算机网络原理、技术及应用计算机网络原理、技术及应用WEB技术基础技术基础为什么学习HTML 工具（Frontpage,Dreamweaver）均页面代码共存有利于提高网页编辑效率优化网页代码，手工修改网页排错提高网页制造水平，
36、参看优秀网页的代码知根求源计算机网络原理、技术及应用计算机网络原理、技术及应用CSS样式表基础 CSS是Cascading Style Sheets（层叠样式表单）的简称。它允许在HTML文档中加入样式。在编写html时候，可以将所有关于文档的样式指定和html的文档内容分离。甚至作为外部样式文件供HTML调用。CSS样式表可以依附于某个网页上，也可以单独作为一个CSS样式表文件保存，应用于多个网页文档。仅仅改变一个文件就可以改变数百个网页的外观.个性化的表现而不损失访问者.所有这些都因为网页样式表的强大和灵活特性。计算机网络原理、技术及应用计算机网络原理、技术及应用CSS样式表基础 _css
37、_example1.htm 样式单举例 CSS 段落一 段落二 计算机网络原理、技术及应用计算机网络原理、技术及应用CSS样式表基础 _css_example2.htm 样式单举例 CSS 段落一 段落二 计算机网络原理、技术及应用计算机网络原理、技术及应用CSS样式表基础 _css_example3.htm 样式单举例 CSS 段落一 段落二 计算机网络原理、技术及应用计算机网络原理、技术及应用CSS样式表基础 CSS_解释：CSS层叠样式单,又称级联样式单 可可见，层叠叠样式式单优点：内容和格式分开，用点：内容和格式分开，用统一的一的方式来管理各种不同的方式来管理各种不同的显示格式示格式分为：内联式样式单；嵌入式样式单；外部式样式单计算机网络原理、技术及应用计算机网络原理、技术及应用Part B网页设计与制作网页设计与制作The End计算机网络原理、技术及应用计算机网络原理、技术及应用