HTML5网页制作技术第10章 框架
Web前端基础：HTML5浮动框架
pixels / % pixels pixels
frame_name
yes/no/auto
不赞成使用。请使用样式代替。 规定如何根据周围的元素来对齐此框架。
规定是否显示框架周围的边框。 规定iframe的高度。 定义iframe的顶部和底部的边距。 定义iframe的左侧和右侧的边距。 规定 iframe 的名称。 规定是否在iframe中显示滚动条。
第一步：设置浮动框架名称
课堂任务
1、将课前准备的7个页面修 改为左侧效果。
iframe
2、页面中每个超链接链接的 页面都在iframe浮动框架中 显示。
HTML5浮动框架 小结
浮动框架
标签：<iframe>…</iframe> 属性：height、width、align、scrolling、name、frameborder
超链接与框架应用
第1步：设置框架的name属性 第2步：设置超链接的target属性，该属性值与框架的name属性值一致
Thanks
Web 前 端 基 础
单元一 HTML5基础知识
HTML5浮动框架
1 添加浮动框架
2 格式化框架
3
超链接与框架联合应用
1 添加浮动框架
<iframe> 标签创建包含另一个文档的行内框架。 用法：
<iframe src=“index.html”> </iframe>
在<iframe>和</iframe> 之间放置的文本，在浏览器不支持iframe时 将会显示。
URL Pixels / %
规定在iframe中显示的文档的 URL。 定义 iframe 的宽度。
总结：HTML的框架结构
总结：HTML的框架结构<html><head><title>HTML的框架结构</title></head><frameset frameborder="1" rows="100,*"> <!-- 划分两⾏ --><frame scrolling="no" name="top" noresize src="top.html"/> <!-- 顶部⼤类窗体 --><frameset cols="200, *"> <!-- 划分左右两列 --><frame name="left" scrolling="no" src="left.html"/> <!-- 左边内容窗体 --><frame name="main" src="main.html"/> <!-- 右边内容窗体 --></frameset> <!-- 内层框架结束 --><noframes>你的浏览器不⽀持HTML的框架分帧！</noframes></frameset> <!-- 外层框架结束 --><body><!--HTML框架简述⼀个浏览器窗体可以通过⼏个页⾯的组合来显⽰。
我们可以使⽤框架来完成(frames)这项⼯作。
(框架可以把HTML⽂档分为多个页⾯)。
也就是将⼀个浏览器⽂档窗⼝分隔成多个窗⼝，每个窗⼝都可以显⽰⼀个独⽴的⽹页⽂件。
框架页使⽤了表格的⽅式组合，可以分为数⾏与数列。
html5的基本文件框架
html5的基本文件框架HTML5的基本文件框架HTML5是一种用于构建网页的标准化语言，它提供了一套丰富的标签和属性，可以实现复杂的网页效果和交互功能。
在使用HTML5构建网页时，我们需要使用一种基本的文件框架。
本文将介绍HTML5的基本文件框架，并对每个部分进行详细解析。
HTML5的基本文件框架由以下几个部分组成：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>网页标题</title></head><body></body></html>1. <!DOCTYPE html>：这是一个声明，它告诉浏览器当前网页使用的是HTML5的标准。
在HTML5中，这是文件的第一行，必不可少。
2. <html>：这是整个HTML文档的根元素。
所有的HTML标签都应该包含在<html>标签中。
3. <head>：这是头部部分，用于定义网页的元信息，如标题、字符编码等。
在<head>标签中，可以添加<meta>标签来设置字符编码，以确保网页能够正确显示各种语言的文本。
4. <meta charset="UTF-8">：这是一个元信息标签，用于设置网页的字符编码。
在UTF-8编码下，网页可以正确显示各种字符，包括中文、日文、韩文等。
5. <title>：这是网页的标题标签，用于定义网页在浏览器标签页中显示的标题。
在<title>标签中，可以输入网页的标题，这将是网页在搜索引擎结果中显示的标题。
6. <body>：这是网页的主体部分，用于定义网页的内容。
在<body>标签中，可以添加各种HTML标签，如<p>、<h1>、<ul>等，用于组织和展示网页的内容。
Dreamweaver学习HTML+DIV+CSS教学PPT第10章__网页框架Frame
在网页中，一个网页可以包含多个页面，此时需要用到 框架。使用框架可以进行页面布局，把网页化分为几个 区域。例如，一个水平框架用于放置Banner（也就是标 题）；左垂直框架用于放置导航；右垂直框架用于放置 正文。每一个框架单独使用一个网页，从而使页面设计 简单化。框架除了用于页面布局，还可用于制作目录。 包含框架的网页称为框架集。框架集定义了各个框架的 结构、数量、大小和目标等属性。本章将介绍框架的使 用方法。
自定义左右框架效果
自定义上下框架效果
10.1.2 预定义框架
在Dreamweaver CS3中，系统预定义了13种框架类型。 通过插入栏中【布局】标签的框架按钮，可以为页面设 置框架，具体步骤如下：
框架子菜单
【框架标签辅助功能属性】对话框
10.1.2 预定义框架
单击【确定】按钮，完成创建预定义框架，效果如图左 所示。按照以上步骤，可以创建其他类型框架，如左侧 和嵌套的顶部框架，效果如图右所示。
严格把控质量关，让生产更加有保障 。2020年12月 上午12时12分20.12.1200:12D ec恼。2020年12月12日星期 六12时12分28秒00:12:2812 December 2020
好的事情马上就会到来，一切都是最 好的安 排。上 午12时12分28秒上午12时12分00:12:2820.12.12
10.2 框架源码
<frame>标签有多个属性，其使用语法如表 。（续表）
10.3 调整框架
前面了解了如何创建框架。新创建的框架需要进行一些 调整才能符合设计的要求，如框架结构、尺寸大小和数 量等。在实际应用中，还需要对框架集及其属性进行修 改。本节将介绍如何调整框架以适合需要。
HTML网页设计教程框架
不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。（在下面的第一个实例中， 可以查看它是如何实现的。） 如何使用 <noframes> 标签 本例演示：如何使用 <noframes> 标签。 <html> <frameset cols="25%,50%,25%">
调整子窗口的尺寸
在前面的学习中，我们学习了如何运用 <frameset>标记的rows和cols属性来水平或 垂直分割窗口。但设置后，各窗口框架的大小并 非固定无法更改，当我们想更改窗口框架大小时， 可以将鼠标指针移到要更改的框架上，待指针呈 现双箭头符号时，再用鼠标进行拖拽，就可调整 窗口的大小。 当然我们不希望用户能随意地改变子窗口的大小， 那么这时我们可以在<frame>标记中，添加 noresize属性，语法如下： <frame noresize src="url">
பைடு நூலகம்
<frameset cols="30%,40%,*">
<frame src=left.html name=left> <frame src=center.html name=center>
<frame src=right.html name=right>
</frameset> </html>
控制子窗口滚动条
基本的注意事项 有用的提示： 假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。 为不支持框架的浏览器添加 <noframes> 标签。 重要提示：不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！
HTML5+CSS3网页设计与制作—教学大纲
《HTML5+CSS3网页设计与制作》课程教学大纲（课程英文名称）课程编号：学分：5学分学时：74学时（其中：讲课学时：50学时上机学时：24学时）先修课程：计算机基础、计算机网络、计算机应用后续课程：UI设计、JavaScript网页特效适用专业：信息技术及其计算机相关专业开课部门：计算机系一、课程的性质与目标《HTML5+CSS3网页设计与制作》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标签、CSS样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。
该课程属于“1+X证书制度”Web前端的初级课程，通过本课程，能够为学习后面的前端知识夯实基础。
二、课程设计理念与思路课程设计理念：课程的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限于单纯的技能训练。
单纯的技能训练不是提高高等职业教育的理想课程。
以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计出理论学习与技能掌握相融合的课程内容体系。
教学整体设计“以技能培养为目标，以案例（项目）任务实现为载体、理论学习与实践操作相结合”。
三、教学条件要求开发工具：Dreamweaver CS6或其他代码编辑工具四、课程的主要内容及基本要求第一章HTML5+CSS3网页设计概述学习单元HTML5+CSS3网页设计概述学时2学时学习目标◆了解网页概念和组成。
◆理解HTML、CSS和JavaScript的功能和作用。
◆熟悉Dreamweaver工具的基本操作。
学习内容知识点了解掌握重点难点认识网页√网页名词解释√Web标准√HTML简介√CSS简介√JavaScript简介√网页的展示平台—浏览器√认识Dreamweaver界面√Dreamweaver初始化设置√Dreamweaver基本操作√【阶段案例—创建第一个网页】√第二章初识HTML5学习单元初识HTML5 学时6学时学习目标◆了解HTML和HTML5的基本结构，能够区分两者的结构差异。
HTML框架
第 10 页
软 件 开 发 世 界
窗口标识(Frame Name)
格式：
<frame src=url name=“窗口名”> 例如： <frame src="frame/a.html" name=“left”>
第 11 页
软 件 开 发 世 界
Target属性
•定义了窗口名称，还应该有Target来配合使用，Target属性 指定了所链接的文件出现在哪一窗口。 •Target的值可以是name定义的名称，也可以是以下四类值:
第8页
软 件 开 发 世 界
混合排列多个窗口
<Html>
<Head> <Title> 混合排列多个窗口 </Title> </Head> <Frameset rows="30%，70%"> <Frame src="a.html"> <Frameset cols="20%， 80%"> <Frame src="b.html"> <Frame src="c.html"> </Frameset> </Frameset> </Html>
<frame scrolling=#>用来设定滚动条
第 18 页
软 件 开 发 世 界
浮动窗口
Iframe标记，又叫浮动帧标记，可以用它将一个HTML文档嵌入在一个HTML中显示
如同“画中画“电视
第 19 页
软 件 开 发 世 界
html5框架结构 学web必知
html5框架结构学web必知前端开发工作并不容易，除了掌握基本的HTML、CSS 和Javascript ，因为不同版本的浏览器和平台，还需要知道如何做一个跨浏览器的网站。
所以大家必须掌握有很多优秀的html5框架结构。
本文列出了一下html5框架结构的UI 组件和Javascript 插件，希望能帮助大家做出更好的成就。
第一个html5框架结构——Twitter Boostrap，HTML & CSS 组件：网格，布局，排版，代码，表格，表单，按钮，图像，图标，按钮组，导航，面包屑，分页，选项卡，徽章，缩略图，提醒，进度条。
JavaScript 组件：过渡，模态窗口，下拉框，滚动检测，标签，工具提示，弹出层，警报，按钮，手风琴，旋转木马，自动补齐。
其它特性：支持定制，LESS CSS。
第二个html5框架结构——InKHTML & CSS 组件：布局，导航，排版，图标，表格，提醒，表单。
JavaScript 组件：画廊，模态窗口，表格，可排序的日期选择器，选项卡，表单验证，行为。
其它特性：支持Sass 混入。
第三个html5框架结构——GroundworkCSSHTML & CSS 组件：网格，布局，排版，按钮，瓷砖，表格，表格，图示，社会的图标，响应文本，消息，警报。
JavaScript组件：导航，标签，工具提示。
其它特性：支持Sass 混入。
第四个html5框架结构——IvoryHTML & CSS 组件：网格，排版，表单，按钮，提醒，分页，面包屑，列表，表格。
JavaScript组件：工具提示，选项卡，切换开关，手风琴。
第五个html5框架结构——FoundationHTML & CSS 组件：网格布局模板，图标，字体，响应式表格，SVG 社交图标，分页，面包屑，边栏导航，按钮，字体，标签，提醒，面板，价格表，进度条，表格，缩略图。
JavaScript 组件：下拉按钮，分割按钮，开关，自适应视频，灯箱，下拉列表，导航，显示模态窗口，选项卡，工具提示。
HTML框架
二、框架集标记
框架集属性设置
边框的设置
<frameset frameborder=“#”>
#=yes, no/0,1
边框的粗细设置
<frameset border=“#”>
#为象素值
框架集属性设置
边框的颜色设置 <frameset bordercolor=“# ">
#为颜色值
边框宽度的设置
leizhang5@
框架的基本结构
基本语法： <frameset cols=“80,120”> <frame src=“”> <frame> …… </frameset>
语法解释：框架集是在一个文档内定义一组框架结构的HTML页面 leizhang5@ ，在这个页面中没有<BODY>标记。框架集定义了在一个窗口中显 示的框架数、尺寸和载入页面。
二、框架集标记
1、左右分割窗口属性Cols
#的值为一对用引号括起来的字符串，字符串中的 数值表示每个分窗口所占的尺寸，数值中间用逗号 隔开，有几个数值就表示分出了几个窗口。其中数 值可以是百分比值，也可是象素值，任何一个数值 也可由“*”来代替，表示由浏览器自动设置其大小 （剩余的都分配给最后一个窗口或平均分配给剩余 leizhang5@ 的窗口）。
leizhang5@
</frameset>
二、框架集标记
二、框架集标记
3、嵌套分割窗口
基本语法： <frameset cols=“value,value,……”> <frame> <frameset rows=“value,value,……”> <frame> <frame> …… </frameset> <frame> …… </frameset> 语法解释： 可以嵌套分割。
HTML框架
文件3： right.html
框架的基本结构
创建框架网页的步骤：
1.创建各子窗口对应的HTML文件 2.创建整个框架页面文件，引用子窗口文件 分割将窗口 左 (中 )右 将窗口上( 中)下分割 边框尺寸大 小
<frameset cols="25%,50%,*" rows ="50%,*" border="5"> <frame src="the_first.html "> …… </frameset>
将语法抄2遍 时间:2分钟
如何设置在内嵌窗口显示
如何实现？
总结
• 框架的基本语法？
• 如何实现2行2列的典型框架？ • 如何实现窗口间管理？ • 内嵌框架的语法？
第四章
HTML框架
预习
1：什么是框架？框架的用途？
2.框架分为哪两种？
3.框架网页对应的文件是一个还是多个？
将预习问题抄下来 时间:2分钟
本章目标
使用框架结构实现多窗口页面
使用<iframe />内嵌复用页面
什么是框架
客户 服务
框架文件的特点
• 多个页面文件组成
主文件 ： index. html 文件2 ： left.ht ml 文件1： top.html
引用各窗口 要显示的网 页文件
将语法抄2遍 时间:2分钟
框架的基本结构
纵向(上中下)分割窗口
操作演示：纵向(上中下)分割窗口
框架的基本结构
横向(左中右)分割窗口
操作演示：横向(左中右)分割窗口
框架实现多窗口页面
典型的2行2列结构
2行2列的 窗口划分