湖北职晚计算机科学与技术理论课教案一《网页设计》 教学项目十四 HTML中框架的实现 【教学内容】 讲解HML中框架标志及相应的属性 【教学目的】 使学生掌握框架标志及属性,学会熟练使用HM标志设计框架网页。 【教学重点】 框架的嵌套使用 【教学难点】 理解属性name、 target的意义 【教学方式】 案例分析式、项目教学 【教学参考】 1.〉 电脑报社出版 3.TML网页制作教程材义语编著铁道出版社 4.HIML基础与实例程耀编著电子工业出版社 【新课】 、设计框架网页的标志 标志一: 用于定义框架的分割方式 格式 说明: (1) rows. cols中必须选择一个 (2) rows, cols的值有三种表示方式 数字:定的像素值 百分比:相对宽度,以当前的浏览器窗口为参照; *:将剩下未被分配空间平均分配 例:
湖北职院计算机科学与技术系理论课教案—《网页设计》 教学项目十四 HTML 中框架的实现 【教学内容】 讲解 HTML 中框架标志及相应的属性 【教学目的】 使学生掌握框架标志及属性，学会熟练使用 HTML 标志设计框架网页。 【教学重点】 框架的嵌套使用 【教学难点】 理解属性 name、target 的意义 【教学方式】 案例分析式、项目教学 【教学参考】 1．> 杨浩著 清华大学出版社 2．> 电脑报社出版 3．TML 网页制作教程 材义语编著 铁道出版社 4．HTML 基础与实例 程耀编著 电子工业出版社 【新课】 一、设计框架网页的标志 标志一： 用于定义框架的分割方式 格式： 说明： （1） rows,cols 中必须选择一个 （2） rows,cols 的值有三种表示方式： 数字： 定的像素值； 百分比：相对宽度，以当前的浏览器窗口为参照； *： 将剩下未被分配空间平均分配； 例： 1
湖北职晚计算机科学与技术糸理论课教豪一《网页设计》 表示按水平方向分割,每一框架窗口占浏览器窗口的1/3,窗口从上到下排列 2. 表示先水平方向分割,再垂直方向分割,两行三列排列。 40% 标志二: 用于定义一个子框架窗口,指定窗口中显示的网页的路径、名称及框架名称。 格式: 例1:设计如下框架网页
湖北职院计算机科学与技术系理论课教案—《网页设计》 表示按水平方向分割，每一框架窗口占浏览器窗口的 1/3，窗口从上到下排列； 2. 表示按垂直方向分割，第一个窗口占 40%,其余两个窗口各占 30%，窗口从左到右排列 3. 表示先水平方向分割，再垂直方向分割，两行三列排列。 标志二： 用于定义一个子框架窗口，指定窗口中显示的网页的路径、名称及框架名称。 格式 ： 例 1：设计如下框架网页： 40% 60% 50% 200
湖北职晚计算机科学与技术亲理论课教案一《网页设计》 2G\ frontPage多12aht一 microsoft Internet Expl】orer 件)编佞)查看①收0)工具①帮助00 后份冈回的搜索收夹的媒体的,孕8·回 地址①)e)G:1 FrontPage\samp15lbtm 转到链” 特别推荐 文学芳草 竹林听海 梧桐下 如烟往事 牧歌唱晚 我的电脑 分析 这是一个左右结构的框架,框架左边窗口显示网页为1htm,框架窗口右边显示网页为2htm 框架结构部分对应网页为ahtm 程序代码如下: 1HIM代码 p>特别推荐 文学芳草 竹林听海 梧桐树下
湖北职院计算机科学与技术系理论课教案—《网页设计》 分析： 这是一个左右结构的框架，框架左边窗口显示网页为 1.htm,框架窗口右边显示网页为 2.htm 框架结构部分对应网页为 aa.htm； 程序代码如下： 1.HTM 代码： 特别推荐 文学芳草 竹林听海 梧桐树下
湖北职晚计算机科学与技术亲理论课教案一《网页设计》 如烟往事 牧歌唱晚 2htm代码如下: ahm代码如下: 二、框架标志配合使用的属性 < frameset标志中的配合使用属性 (1) namespacing设定框架边框线的宽度 (2) frameborder:设定是否显示框线 frameborder=0不显示框线; frameborder=1时显示框线 (3) bordercolor:设定框线颜色 2.<fame标志中配合使用的属性 (1) scrolling:设定是否显示滚动条 scrolling=auto需要自动出现 olling=yes始终出现 scrolling=no从不出现
湖北职院计算机科学与技术系理论课教案—《网页设计》 如烟往事 牧歌唱晚 2.htm 代码如下： aa.htm 代码如下： 二、框架标志配合使用的属性 1．标志中的配合使用属性： （1）framespacing: 设定框架边框线的宽度 （2）frameborder: 设定是否显示框线 frameborder=0 不显示框线；frameborder=1时显示框线； (3) bordercolor: 设定框线颜色 2．标志中配合使用的属性 （1）scrolling: 设定是否显示滚动条 scrolling=auto 需要自动出现 scrolling=yes 始终出现 scrolling=no 从不出现
湖北职院计算机科学与技术糸理论课教案一《网页设计》 (2) noresize:设定是否允许调整窗口大小 (3) marginwidth:框架内网页内容与边缘的空白区宽度 (4) marginheight:框架内网页内容与边缘的空白区的高度 三、框架网页中超级链接的使用 例:设计如下框架网页: 地①)1G:F心BtFN1心5%4H种 爱情究党是什么?心 老妈说,情是聊洋煎头,一片片下去,总有一片让你就满面 端票”露程满学面如甲器高本品具您鉴爱需杂器浓高品 特列值 分析:此例使用了框架嵌套,在下左窗口中设置超级链接,目标窗口分别是 right、self、 爱情完氧是什立 说,情最颗惠共,一片片下新,总有一片让你泪流滴面 品薇置下石壁量如学命中部都具你签是需油森器需品 特’辛 它变新1对 webl月顶义 板来创建,也可不 行设i 使新贝的 老丸说,情甲洋共,一片片到下去,总有一片 于开1对 如1果想要打开前 Web站点的一个页,进 文件”菜单的“扌 ”命令,或单,常月1 具栏的“打开”钮
湖北职院计算机科学与技术系理论课教案—《网页设计》 (2) noresize: 设定是否允许调整窗口大小 (3) marginwidth: 框架内网页内容与边缘的空白区宽度 (4) marginheight: 框架内网页内容与边缘的空白区的高度 三、框架网页中超级链接的使用 例：设计如下框架网页： 分析：此例使用了框架嵌套，在下左窗口中设置超级链接，目标窗口分别是 right、_self、 _blank、bottom、target=top
湖北职晚计算机科学与技术亲理论课教案一《网页设计》 当特测 格式化文本 入文木 从总亻面 文木仍是网中的体容,在 FrontPage中布 (1).需囈加入空行成换段时才使用Ente,当输入 文本达所定义的名边界时 录入文 孓有错可按 backspace键清除错读 新入 ).可在文本中任意位置处插入新文木容,操作再 地热①)G: montH12nAH,ht 建立超链接 超链接( Hyperlink)的出现使网浏览变得加 便捷,只颏用鼠标轻轻点击,便能轻松地从一个页面 转到另一个页面,从一个Web站点跳到另一个Web站 点,从一个国家跳到另一个国家。超链接就是一些特类 收的“什也,已图□ 情完竟是什么? 老妈说,爱情是颗洋煎共,一片片剩下去,总 让你流m 端的程油是吧在段而高击兵贷腺爨需一杂器浓品 入图形和水多 1.在网中插入图形 片往往比大量前文字讲述具引力和说用 方,在we面這当地添加图月会使网宫多x 但过多地加1入图将降低吹面的载速度,特列是x 过是立we 人多为 最上窗口是显示的网页12hm,上下框架网页为 index htm左右框架网页为ahm,左框架显 示网页为1hm,右框架显示网页为2hm;程序代码如下 INGEX. htm代码 <frame src=12. htm name=top <frame src=aa. htm nam
湖北职院计算机科学与技术系理论课教案—《网页设计》 最上窗口是显示的网页 12.htm,上下框架网页为 index.htm;左右框架网页为 aa.htm,左框架显 示网页为 1.htm,右框架显示网页为 2.htm;程序代码如下： INGEX.htm代码：
湖北职晚计算机科学与技术理论课教案一《网页设计》 12.Htm代码: p>/p   p>老爸说:爱情是感冒,既瞒不了自己,也瞒不了别人,因为你抑制不住自己的喷嚏和 鼻涕 朋友说:爱情是只啁啾的鸟,总想往高处飞,但又总要找个栖息的角落:而嗜饮咖啡的我 更愿意说:爱情是一杯香浓的咖啡 p>既然是咖啡,光有冲泡还不够味,因为总有些东西会漂在上面,所以还要找把小勺子 轻轻地、慢慢地来搅和,让它们就在这一搅一拌中渐渐融合, 你中有我,我中有你,散发出令人神清气爽的醇香。 所以,情窦初开的你,爱如潮水的你,浓情蜜意的你,不论应酬有几多,工作有多忙,时 间多紧张,你都要找点时间,找点空闲,带上你的心上人儿找个 安静、浪漫的、温馨的地方,散散步聊聊天-因为爱情咖啡需要找把小勺慢慢搅拌。就在 这摇拌中,把心摇近,把情摇浓,最后融合在一起再也分不开 p>关于爱情的点点滴滴,在这轻轻地搅拌中,愈久弥香,飘散在这座城市的角角落落 1.Htm代码如下: p>特别推荐 竹林听海
湖北职院计算机科学与技术系理论课教案—《网页设计》 12．Htm代码： ◇爱情究竟是什么？◇ 老妈说：爱情是颗洋葱头，一片片剥下去，总有一片让你泪流满面； 老爸说：爱情是感冒，既瞒不了自己，也瞒不了别人，因为你抑制不住自己的喷嚏和 鼻涕； 朋友说：爱情是只啁啾的鸟，总想往高处飞，但又总要找个栖息的角落；而嗜饮咖啡的我 更愿意说：爱情是一杯香浓的咖啡。 既然是咖啡，光有冲泡还不够味，因为总有些东西会漂在上面，所以还要找把小勺子， 轻轻地、慢慢地来搅和，让它们就在这一搅一拌中渐渐融合， 你中有我，我中有你，散发出令人神清气爽的醇香。 所以，情窦初开的你，爱如潮水的你，浓情蜜意的你，不论应酬有几多，工作有多忙，时 间多紧张，你都要找点时间，找点空闲，带上你的心上人儿找个 安静、浪漫的、温馨的地方，散散步聊聊天--因为爱情咖啡需要找把小勺慢慢搅拌。就在 这摇拌中，把心摇近，把情摇浓，最后融合在一起再也分不开。 关于爱情的点点滴滴，在这轻轻地搅拌中，愈久弥香，飘散在这座城市的角角落落.... 1．Htm代码如下： 特别推荐 文学芳草 竹林听海
湖北职晚计算机科学与技术亲理论课教案一《网页设计》 梧桐树下 如烟往事 a href=fp6 html target=op>牧歌唱晚 【课后小结】 框架结构是布局网页的一种常用方式,要掌握框架及其嵌套的实现,以及在框架中设置超 级链接时目标框架位置的设置
湖北职院计算机科学与技术系理论课教案—《网页设计》 梧桐树下 如烟往事 牧歌唱晚 【课后小结】 框架结构是布局网页的一种常用方式，要掌握框架及其嵌套的实现，以及在框架中设置超 级链接时目标框架位置的设置