HTML入门 学习笔记3

框架

实现在一个浏览器上看到多个页面。

• 框架属于将要被淘汰的标签，w3c建议以后使用内嵌框架，主要应用在后台管理处。

框架集：<frameset></frameset>
框架：<frame></frame>

• 如果n个框架，则保存n+1个文件；
  在保存框架的注意事项：光标放在哪个框架中，就保存框架中哪个页面。如果要保存所有的页面，文件–保存全部（先保存框架集，再陆续保存框架）。

• 将已经有的界面显示到框架中：光标定位到框架中，执行文件–在框架中打开的命令。

• 框架中显示其他页面用src属性。

在指定框架中显示页面

1.指定框架name属性
2.链接a标记属性中，添加taget="指定框架的名称name" 或者在设计也页面设置目标为指定框架的名称。

内嵌框架

标记：<iframe></iframe>
属性：

• name名称：框架名称
• src嵌套的页面路径 路径取值
• width宽度 数值取值
• height高度 数值取值
• frameborder框架边框 数值取值
• marginwidth边界宽度：页面距左的边界 数值取值
• marginheight边界高度：页面距上的边界 数值取值

图片

关于图片的基本概念

位图

位图像素：由屏幕上的像素点来描述图像。

• 放大失真，会出现马赛克模糊。
• 位图颜色较为丰富。

操作位图的软件：PS 和 FW

矢量图

矢量图形：使用线和面组成图形，所以称为矢量。

• 放大不失真，体积小。
• 颜色数没有位图丰富。

操作位图的软件：ai，FW

• 注意：矢量图不能直接放在网页上，必须经过图像处理软件转换成网页支持的图片格式（jpg、gif、png）。

分辨率

分辨率：在单位长度上的像素数，用来衡量位图质量好坏的指标，分辨率越大，图片质量越好。通常以“像素/英寸”，网上一般72（像素/英寸）。

• 网站默认尺寸单位为像素。

常见的图片格式

JPG/JPEG

有损压缩，颜色数达到一千六百多万种，是目前使用量很大的一种图片格式。

• 不支持透明，不支持动画。

GIF

颜色数很少，只有256种。

• 支持透明，支持透明，图片质量很差，现在已经用的很少。

二者比较：

1. gif颜色数目少，最多256种，一般用于图标、标识；jpg颜色细腻丰富，支持颜色多达1600多万种。用于质量要求较高的图像，如人物照片、风景等
2. gif体积小，jpg体积大
3. gif支持透明，jpg没有透明色
4. gif支持动画，jpg不支持

PNG

无损压缩，体积小，质量好。

• 支持格式透明，此格式越来越被广泛应用。

• 在项目中用jpg和png格式图片。

格式转换

打开源图–文件–另存为–选择格式–保存

图片的优化

使用工具ps和fw

1. 改大小（尺寸）：修改–画布–大小 或者 直接点击属性面板中的“图像大小”按钮–更改像素尺寸
2. 降分辨率：直接点击属性面板中的“图像大小”按钮–取消图像重新取样选项–更改分辨率
3. 降质量（压缩）：文件–图像预览–降低品质（品质降低应适当，否则会失真）
4. 做切片：详细如下

切片

做切片：拿到一个效果图后，将有用的部分给切下来。

步骤：

1. 选择web-切片工具
2. 文件–导出，类型选择“仅图像”，切片选择“导出切片”，取消包括无切片区域
3. 切片后一般要拿到Dreamweaver中拼版

• 拼版：用table标记拼版，具体在表格拼版中介绍

ps和fw常用快捷键

1. ctrl+加号：图片放大
2. ctrl+减号：图片缩小ctrl+减号：图片缩小
3. 双击手型工具：将图片自适应大小显示双击 手型 工具：将图片自适应大小显示
4. Tab键全部显示/隐藏工具面版（在fw和dw中，F4也可以显示/隐藏工具面版）
5. 按住空格键快速切换到手型工具
6. ctrl键快速切换到选择工具

网页

基本概念

网站：所有网页的集合
首页（主页）：当输入网址后打开的页面，名称一般为index或default

• 如果一个网站中没有首页，则这个网站将无法显示。

子页面：除了首页以外的页面。
子页命名规则：小写的英文字母或数字，不能是中文。（图片也不能用中文）
页面尺寸：以不出现水平滚动条为准，目前的页面宽度以17寸屏（1024*768）为准。

表格拼版

表格拼版的特性

1. 表格可以被内容的撑开，不能被背景撑开。
2. 背景默认是平铺的，标签有多大，背景就铺多大。
3. 内容不能放在内容上面，但可以放在背景上。
   使用背景图的情况：
   1.图在图上或字在图上
   2.一张图重复出现

通过设计器 插入素材

插入图片

方法一：点击插入图片按钮
方法二：直接将站点中的图片拖放到相应位置

插入文字

• 注意事项：
  1.输入空格：切换到全角，再输入空格
  2.回车：换段
  3.shift+回车：换行

超链接

方法一：选择文字或图片，在属性面板上选择链接的地址
方法二：用指向文件工具连接到指定文件处

链接文件在新的浏览器中打开，在目标选项中选择_blank

插入表格

• 表格的单位：
  1.像素：绝对单位
  2.百分比：相对单位

  • 最外层表格单位是像素，套用的可以是像素也可以是百分比。

• 边框：一般调成0

• 单元格填充：内容距边的距离（默认=1px）一般设置为0

• 单元格间距：单元格与单元格的距离（默认=2px）一般设置为0

合并单元格和拆分单元格

选中单元格，在属性面板上会出现合并单元格和拆分单元格按钮

标签选择

标签选择用来快速选择HTML对象。

表格布局注意点

1. 整个页面不要嵌套在一个表格里，尽量拆分多个表格；若将内容都放在一个表格里，下载速度会很慢。
2. 表格的结构尽量整齐。