静态网页第三讲

                                                                                     

### 意见反馈

• 能够找一些实际的网址进行引入和分析，就像讲解书签链接时用北理工官网演示那样
• 这个意见非常好，我也采纳了。（就是类似的网站可能不好找，我们现在学习的是基础知识，现在很多的网站使用的是更加复杂的技术，我尽量找啊）

 

### 今天上课的主要内容

 

 

#### 图像

在学习图像之前，我们先了解一下图像的分类：

• 位图
• 位图是由像素组成的，存储在图像栅[shān]格中，每个像素具有特定的位置和颜色值。占用内存较大。
• 矢量图
• 矢量图是根据几何特性来绘制图形，是用线段和曲线描述图像。占用内存较小

 

上述定义有些抽象，简单的说，矢量图放大或者缩小不会影响清晰度，位图放大和缩小则会影响清晰度

我们常见的bmp,jepg,png,gif都是位图，所以当把他们应用于网页时，不要拉伸得太厉害，否则会影响清晰度。

矢量图的主流格式时CDR和AI,还有SWF,SVG,WMF等等，不过我至今没怎么用过矢量图

 

图像的分辨率，是指每英寸图像内有多少个像素点。分辨率单位为PPI，通常叫像素每英寸。

 

图像是大部分网站都有的格式，有的时候是作为封面，有的时候是作为轮播图，以我们北京理工大学官网为例子。

涉及到的图片就非常的多，包括标志，轮播图，具体内容，还有一些小图标。

当然，如果查看这些网站的源代码，会发现其实比我们今天学习的复杂许多。我们今天的学习的只是基础啊。

至于怎么查看网页源代码，我们下节课会说到。

 

##### 图像的引入，高度，宽度，边框，水平间距，垂直间距，提示文字

 

 

代码3.1.1

 

##### 图像的对齐方式

 

代码3.1.2

 

 

#### 表格

 

表格是网页中重要的元素，虽然平时我们浏览的娱乐性质的网站，看到的表格不多，但是一旦涉及到信息展示，

业务管理等等，表格几乎都是必要的元素。现在我们主要看一下三个市面上的网站中，表格元素。

当然，实际他们的代码可能和咱们今天讲的有所不同，因为咱们现在讲的主要是基础。

 

##### 表格的三个基础标记，表头，表格标题，边框

 

代码3.2.1

 

##### 表格的边框，宽度，高度，对齐方式，背景颜色，背景图像，边框宽度，边框颜色，内框宽度，内框中文字与内框的距离

 

代码3.2.2

 

##### 表格行的属性，行高度，行背景颜色，行文字水平对齐方式，行文字垂直对齐方式，特殊的行

 

代码3.2.3

目前为止，我们谈到的属性都是行的属性，实施上，表格也有列的属性，下面我放上表格的列的属性链接，大家课后可以自己看。

HTML <col> 标签：             https://www.w3school.com.cn/tags/tag_col.asp

HTML <colgroup> 标签;                https://www.w3school.com.cn/tags/tag_colgroup.asp

 

 

##### 表格单元格的属性

 

代码3.2.4

 

##### 表首，表主体，表尾

 

代码3.2.5

 

 

 

今天就给大家分享一些免费的，可以找到漂亮图片的网站，百度里面的图片有的太丑了

https://www.pexels.com/

https://pixabay.com/

 

阿里自己的图标网站https://www.iconfont.cn/plus

 

 

 

 

##### 作业

今天咱们的小作业呢，就是图片和表格的应用，同样还是有关家乡。

以贵州为例：