框架与CSS教学案例.ppt

布局
讲解员：伍汉
QQ：285049575
TEL：**********
一个浏览器窗体可以通过几个页面的组合来显示。
我们可以使用框架来完成(frames)这项工作。(框架可以把HTML文档分为多个页面)
框架页使用了布局
讲解员：伍汉
QQ：285049575
TEL：**********
一个浏览器窗体可以通过几个页面的组合来显示。
我们可以使用框架来完成(frames)这项工作。(框架可以把HTML文档分为多个页面)
框架页使用了表格的方式组合，可以分为数行与数列。
框架
框架的优点：
重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，增加了网页下载速度)
方便制作导航栏
框架的缺点：
会产生很多页面，不容易管理
不容易打印
浏览器的后退按钮无效
代码复杂,无法被一些搜索引擎索引到
多数小型的移动设备（PDA 手机）无法完全显示框架
多框架的页面会增加服务器的http请求
由于上面诸多缺点不符合标准网页设计的理念,已经被标准网页设计抛弃
温馨提示: 目前框架的所有优点完全可以使用Ajax实现，因此已经没有必要使用框架了。
制作框架网页
制作框架网页：
添加每个框架的内容
1、单击“框架” ”窗口”，打开框架面板
2、为每个框架指定网页文件
框架面板
为名为topFrame框架指

制作框架网页
教员演示制作框架网页的步骤：
设置超链接
1、
2、在属性窗口中，选择链接网页文件和输入目标框架名
3、同理，设置另两个链接
预览网页

CSS是用于布局与美化网页的.
CSS是Cascading Style Sheets的英文缩写,即层叠样式表.
CSS语言是一种标记语言,因此不需要编译,可以直接由浏览器执行(属于浏览器解释型语言).
CSS文件是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀.
CSS是大小写不敏感的,CSS与css是一样的.
CSS是由W3C的CSS工作组产生和维护的.
CSS样式表
CSS样式表
使用CSS的几个优势:
,有了CSS,网页的内容(XHMTL)与表现就可以分开了
,可以使网页的表现非常统一,并且容易修改.
,比如手机,PDA,打印机,电视机,游戏机等.
,增加网页的浏览速度,减少硬盘容量.
样式表的基本语法
样式表的基本结构
<STYLE type="text/css">
P {color:red; font-size:30px; font-family:隶书;}
……
</STYLE>
声明文档样式表结束
文档样式表开始，类型为CSS样式
样式规则
选择器
样式规则
P {color:red; font-size:30px; font-family:隶书;}
属性
属性的值
网站开发的流程介绍
网站开发的4个步骤：
1、需求分析
2、网站制作
3、测试网页
4、发布网站
创建站点
使用Dreamweaver创建站点的步骤如下：
1、选择“新建站点”，然后为其命名
2、选择“是否”使用服务器技术
3、选择“编辑我的计算机上的本地副本…”选项
4、选择用于存储网站文件的文件夹
5、选择连接到远程服务器的选项
6、在“文件”面板中创建名为images文件夹
框架布局
框架布局的优缺点和应用场合
表格布局
表格布局的优缺点和应用场合
DIV层布局
DIV布局的优缺点和应用场合
心得
CSS之所以重要，是因为对于某些属性的修改，CSS更方便，充分的利用了HTML代码的就近原则。比如：虚线的应用，背景图片+边框等等属性的同时修改，能够批量的修改，特别是对于模板的批量修改，其功不可没。