一、策划

1.明确网站制作的目的

制作网站并不是目的,而是达成目的的一种手段。
如果用售卖巧克力来举例子,不仅可以通过制作网站介绍产品,也可通过在社交媒体宣传或投放广告的方式进行。有了目的再制作网站,效果就会好不少。

2.明确目标用户

也就是说,此网站为谁设计,提供什么。
可以从“6W1H”的角度进行思考。
在思考时,要注意目标用户的描述不能过于模糊。比如对象是“20岁的女性”的描述就过于泛化,应该再多想一些具体的特征,比如说对方的兴趣爱好,烦恼,性格等等。

3.制作架构图

目标用户访问网站是为了寻找特定的信息或者体验内容,但网站如果没有合理的分类就麻烦了。所以我们需要架构图,来为用户提供合适的切入点,改善使用体验。
用超市来举例的话,如果我们通过商品类型进行规划,比如果蔬,肉类等,这样就更为直观,但是只用价格区间分类就没有那么直观了。
制作架构图时,可以先想一下这个网站的人的需求,再制作对应的切入点。举例来说,目标用户想要知道某个电影的演员,那么就可以从演员阵容作为切入点。
特别注意,必须是要从访问者的视角多加考虑,提出的需求也必须具有代表性。
其次还要确定顺序,主要是区分信息的优先级。

4.制定计划

使用WBS(工作分解结构)来制定,可以使开发计划更加明朗。
明确任务时并不能想到什么写什么,而是按照从上到下的顺序依次列举下来,以减少遗漏。
Gantter(甘特图)是很好用的制作工具,可以利用Google Drive将其关联使用。

二、设计

1.先画线框图

其实也就是确定好网站的大体布局。线框图就是把网站的页面布局画下来的图,不考虑配色,装饰等UI设计问题,只是确定把什么元素放在什么位置上。

如果一开始就考虑视觉化的设计,那么很有可能会干扰想让用户真正看到的功能。所以,在制定线框图的时候,要以专注于网站目的为目标进行。

利用Mockplus,Sketch,Axure等工具,可以很方便地制作线框图。

2.用图片编辑软件进行设计

设计的原则:简单易用,风格恰当

让网站简单易用的方法

(1)对元素进行适当分组,把相同的元素排布得更紧凑一些、,不同的元素间距放大一些;
(2)明确父子结构,建立清晰的逻辑关系;
(3)尊重主流的习惯,比如把返回键放在左边,前进键放在右边;
(4)设置导航栏,提供清晰的网页定位。

如何展现风格呢?

用饮料举例子来解释一下什么是风格。碳酸饮料的包装让人感到清爽,橙汁包装盒能让人感到充满汁水的水果,如果全部用相同的透明饮料瓶装着,就没有想让人喝一口或者购买的欲望了。不同的饮料包装让消费者产生对应的感觉,这就可以认为是一种“风格”。
基调与风格可以用以下两部确定:
提炼商品的特征、列出想让用户拥有的印象。

三、HTML

1.网页在互联网上可见的底层逻辑

大体可以概括为,设备先向网络寻找拥有所需数据的Web服务器,然后发送获取数据的请求,最后Web服务器再把对应的数据发回来,这样网页就显示出来了。
Web服务器可以在任何地方,也许某一台服务器就在身边。

2.HTML是什么?

HTML,全名Hyper Text Markup Language,中文名超文本标记语言。在浏览器中右键点击“查看网页源代码”,就可以看到HTML的代码。
HTML由 Tim Berners-Lee 和 Daniel W. Connolly 创立,起初是为了解决资料和人数太多难以寻找的问题。HTML可以便捷地整理信息,同时具有跳转功能,这样管理资料就方便很多了。

HTML能做什么事呢?

(1)文章结构化。比如标题部分,我们可以用 <h1></h1>这样的标记区分,对于不同类型的内容做上标记,就可以把网页做出来了。
但是,要注意标记要适当。HTML的目的就是向阅读文章的人和程序正确地传递文章内容。使用正确的标记,对于网页阅读和搜索引擎收录网页都很有好处。

如果我们知道HTML最初的作用是整理机构论文的话,理解这里会相对容易一些。

(2)超链接。直观地说就是,点击链接就可以在网页之间灵活地跳转。
真的是很棒的功能!

3.迎接HTML的准备工作

只要浏览器和记事本就行了,真的。
其实这句话并不假,我们只需要利用记事本编辑网页源代码,然后用浏览器查看效果就好了。
为了方便编辑,可以选用一些专为编程设计的编辑器,比如Atom和Visual Studio Code,浏览器可以选用Chrome,Microsoft Edge和Firefox等。

4.HTML的基本结构

以一个最简单的HTML文件举例子:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html> <!--声明这是一个HTML文件-->
<html lang="zh"> <!--制定HTML元素和语言。所有的元素都在HTML元素之内-->
<head>
<meta charset="utf-8"> <!--指定使用的字体编码-->
<title>标题</title> <!--显示在浏览器的标签或标题栏-->
</head> <!--head元素,记录页面标题与相关联的外部文件-->
<body>
文字和图片
</body> <!--body元素,包括网页内容-->
</html>

在写HTML代码的时候,一定要注意使用正确的格式,养成换行和缩进的习惯。HTML的缩进使用两个空格比较合适。

你也许注意到了,在上面的代码中使用了类似 <!--内容-->这样的代码格式。这样的代码被称为注释,它不会显示在网页中,主要用来代码的可读性,使代码易于维护。在制作的过程中,合理使用注释很有必要。
在写注释的过程中,要特别注意连字符的个数。使用连字符过多,会使浏览器错误地判断注释代码的结束位置,导致显示效果异常。

5.制作标题和段落

基本格式:
标题:<h1>大标题</h1>一共有 <h1><h6>六种层次的标题格式。
段落:<p>文章内容</p>
换行:<br>

h=heading(标题),p=paragraph(段落),br=line break(换行)。

当效果不符合预期的时候……

主要从是否错误使用了半角/全角符号,是否是保存后再打开网页检查效果的,浏览器打开的和修改的是否是同一个文件三个角度检查。

一行代码中各部分的名称

请看以下代码:
<h1 class="ranking">本周人气T恤</h1>
(1)标签<>括起来的部分;
(2)属性:为标签添加的附加信息,没有或者有很多个都可以。上面的 class就是属性;
(3)属性值:上面的 "ranking"部分;
(4)元素:标签和标签内的内容一起被称为元素。上面整行代码都是元素。
特别地,没有开始和结束标签的被称为空元素,比如 <br>

段落中使用文字样式

在HTML中,可以使用以下标签,给文字增加显示效果:

<strong>加粗

<b>程度弱一点的加粗

<em>斜体

<i>程度弱一点的斜体

<sub>下标

<sup>上标

<del>删除线

<ins>下划线

<hr>:水平线

此外,还有一些特殊字符的表示方法:

&nbsp:空格

&lt;:小于号’<’,用于纯文字输出

&gt;:大于号’>’,用于纯文字输出

&#114514#:表情符号输出,不同的表情由后面的六位数字控制

&copy:版权标志’©’

6.用列表制作导航栏

使用ul(unordered list)元素,ol(ordered list)元素和li(list)元素
使用方法如下:

1
2
3
4
<ul>
<li>主页</li>
<li>关于</li>
</ul>

<ul><ol>的区别在于,显示标题的时候是否会加上顺序。
上面的代码,用ul元素是这样的效果:

  • 主页
  • 关于

用ol元素则是这样的:

  1. 主页
  2. 关于

而从上面的代码,我们能看出来,ul元素包着li元素,我们说两种元素之间包含着父子关系。从 <li>的角度看,<ul>是父元素,反过来以 <ul>的角度看,<li>是子元素。
父子关系的思考方式在学习CSS时很有用。

7.添加超链接

使用a(anchor)元素。 使用例如下:
<a href="index.html">TOP</a> <!--href后面表示网页的路径-->

在同一页面中,也可以通过设置对应部分的id来实现页内不同部分的跳转。这种叫做锚点跳转。举一个例子:

页面的下半部分有这样的标题:

1
<h3 id="a1">下半部分</h3>

若想在页面的上半部分设置超链接,实现跳转到页面下半部分的功能,可以这么设计:

1
<a href="#a1">跳转到下半部分</a>

如果想实现不同页面之间的锚点跳转,则需要在#前增加目标网址。比如:

1
2
<a href="https://example.com#a1">跳转</a>
<!--跳转到example.com中id为a1的部分-->

相对路径和绝对路径

相对路径以当前的位置为起点,说明目标文件的位置;绝对路径则是完整描述文件位置,不论在哪个网页都显示一致。
举个例子,如果用两种方法描述一个人的住址,相对路径就是“这个公寓同一层的XXX”,绝对路径就是“中国XX省XX市XX区X街道X公寓的XXX”。
使用相对路径,可以减小网站迁移时更改代码的工作量。

8.插入图片

使用img(image)元素。 请看下面的代码:
<img src="图片地址" alt="替代文本">
src属性指定图片的路径,相对绝对的都可以;alt属性则是指定在图片无法正常加载时显示的替代性文本。

9.划分区域

划分区域对于后续的页面布局很有好处。一般来说,网页可以分为三个基本区域:header元素,main元素和footer元素

header元素

主要负责定义网页的头部内容,具体包含网页的标题,商标,导航和搜索框。 使用例如下:
<header>头部内容</header>

注意和head元素区分开哦,两个不一样的。

main元素

负责定义主内容的范围,一个页面只能使用一次。 使用例如下:
<main>主内容</main>

footer元素

顾名思义,就是定义页脚的部分。主要包括网站运营者的联系方式,版权声明和相关链接等。 使用例如下:
<footer>页脚部分</footer>
除了这三个元素之外,还有一些其他的用来定义区域的元素:

主要定义导航栏的范围。 使用例如下:
<nav>导航栏</nav>

section元素

用来定义大纲,也就是文件的层次结构,类似于一本书的章节和段落。被section元素包围表示这个范围写的内容与这个标题相关。
所以,section元素包围的部分必须得有标题。

article元素

用于定义独立内容范围。被article元素包围的内容表示其独立于页面其他部分,像是商品介绍,公司简介以及单个的博客文章都比较适合使用。

div元素

用于内容的模块化,表示内容属于一个组。

10.命名元素

命名了元素后,CSS和JavaScript就能通过名字指定元素来美化网页了。我们使用id元素和class元素进行标记。
id元素在同一网页中只能使用一次,class元素可以多次使用。 如果只是用来调整外观,那么一般使用class元素就可以了。

11.制作表格

使用table元素。

先把想做的表格整体用 <table></table>包围起来,然后把标题用<caption>元素包围起来。

对于表格内容,把每一行用”<tr>包围起来,最后把单元格的部分用 <th><td>一个个围起来。

从单元格的内容来看,标题使用 <th>元素进行标记,数据使用 <td>进行标记。表格的排列方式为横向并列。 另外需要注意的是,默认的表格是没有边框的,使用 <table>时需要设置一下border属性才能显示。

1
<table border="1"> <!--1表示边框粗细,单位为像素-->

除此之外,在表格中还可以使用以下的元素:

cellspacing:规定单元格之间的空间;

width:规定表格的宽度。除了作用于整个表格,此属性也可以单独用在每一列上。

height:规定表格的高度。除了作用于整个表格,此属性也可以单独用在每一行上。

backgroundbgcolor:设置背景/颜色。可单独用于行和列上。

align:设置表格文字的对齐方式。

colspanrowspan:跨行/跨列元素,值为从当前格开始跨越的行数/列数。与Excel中的“合并单元格”类似。

12.表单的制作方法

表单的自动发送功能仅靠HTML和CSS是无法实现的。在这里我们先介绍如何使用HTML写简单的表单框架。 表单使用form元素进行标记。
而在表单中,主要使用以下几种元素:
name属性。 使用方法为 name="example"
action属性。 指定数据发送地址的URL。使用方法为 action="example.html"
method属性。 指定数据传送方式,使用方法与上面两种类似。分为get与post两种传输方式
两种传输方式的区别请见下表。

属性值 功能
get 把数据加载URL的后面进行传输,可以被第三方看到
post 传输数据不在浏览器上呈现,适用于传输邮箱,密码等保密信息

input属性。 用于单行输入。input元素中主要使用以下几种属性:

  • type属性
    指定输入数据的类型,使用方法参照name属性的指定方法。属性值主要有以下几种:

    属性值 输入形式的类型
    text 单行文本输入框
    password 密码输入框,输入的信息会自动变为圆点显示
    checkbox 复选框
    radio 单选框
    submit 发送按钮
    hidden 隐藏的输入框
    email tel url 电子邮箱,电话与网址。具有校验功能,如果输入格式不正确会进行提示
  • value属性
    对于不同的输入类型,value属性所指内容也不同。主要有以下几种:

    输入类型 属性值所指内容
    文本输入框 输入框内的初始值
    复选框 单选按钮 传输给服务器的值
    按钮 按钮上的文字
  • name属性
    定义表单中每个输入框的名字,便于服务器正确匹配数据。

  • placeholder属性
    指定文本框内的提示文字。

  • checked属性
    此属性不具有属性值,用来预先选定复选框或单选按钮。

  • readonly属性
    此属性不具有属性值,表示这里的文字不允许被修改。

  • required属性
    定义必填项。若未完成必填项就点击发送键,数据不会被发送,并且网页会有相应提示。无属性值。

textarea元素。 用于多行输入。主要使用以下几种属性:

  • cols属性
    规定一行的文字数。
  • rows属性
    规定文本输入框的行数。文本框高度也会随着规定的行数发生改变。
  • required属性
    无属性值,定义必填项。

当用HTML设计网页时,我们需要思考文章的正确结构。由此就引出了类别与内容模型的概念。
现在举一个例子,水的类别是“液体”,水杯的类别是“容器”,内容模型是“液体”。我们很自然地可以想到,一般情况下都是杯子里盛水,而不是杯子浸泡在水里。
把这个关系用HTML表示出来就是这样:

1
2
3
<水杯>
<>放在杯子里的水</>
</水杯>

把这种情况推广到HTML的表示方法中,就可以直观地理解这两个概念。

四、CSS

1.什么是CSS?

CSS=Cascading Style Sheets,即层叠样式表。如果说HTML是网页的基本结构,那么CSS的作用就是为网页锦上添花,使网页看起来更加生动。

在最早的一开始,HTML同时担任着结构和美化的任务。但是这样导致结构和美化的部分杂糅,使源代码很难读懂。于是CSS应运而生。本文以CSS3标准进行介绍。

CSS的语法

首先,使用CSS是不需要声明的,它也不一定非得和HTML5绑定使用。 使用CSS的格式如下:

1
2
/* 选择器 {属性:值;} */
p{color:red;}

这个格式代表把选择器指定的元素的指定属性改为指定的值。上方的代码表示把元素p的字体颜色改为红色。

你也许注意到了,上方的代码使用 /* */这样的格式来进行注释。这是CSS中写注释的方式,和在HTML5中不太一样。

2.层叠

层叠就像是一层层连起来的瀑布,当一个元素上应用多种样式的时候,层叠可以安排样式的先后顺序,优化显示效果。

举个例子,我们要实现一个白底黑字的效果,那么HTML和CSS都是这么写的:

1
2
3
4
<!--HTML-->
<div>
<p>Cascading</p>
</div>
1
2
3
4
5
6
7
8
9
/* CSS */
<div> {
background-color: black; /* 背景色 白色 */
color: white; /* 文字颜色 白色 */
}

p {
font-size: large; /* 字号 大 */
}

也许你会疑惑,p元素中只指定了文字的大小,颜色真的会变白色吗?CSS中存在一个叫样式继承的机制,子元素会继承父元素的样式,这样我们就没必要对元素一个个设置了。

思考这样一个问题:如果在上述代码中,我们先指定p元素是白色,后指定p元素是黑色,结果会是什么样子?答案是黑色,因为CSS中,当选择器处于同一优先级的时候,后设置的样式优先

3.CSS的引入方法

一共有3种。分别是:

  • 行内样式:直接写入标签内
  • 内部样式:直接写入head元素中
  • 外部样式:CSS文件附在外面

具体的样子如下:

行内样式:

1
2
<!--行内样式,使用style元素进行引入-->
<p style type="color: red";> Example</p>

这样子使用会导致网页源代码的结构混乱,请尽量避免使用这样的方法。

内部样式:

1
2
3
4
5
6
7
8
9
10
11
12
<!--内部样式-->
<head>
······
<style type="text/css">
p {
color: red;
}
</style>
</head>
<body>
<p>Example</p>
</body>

相较于第一种方案,这一种在一定程度上实现了HTML和CSS的分离,但是如果使用的样式过多,依然会造成可维护性的下降。

外部样式:

HTML 文件:

1
2
3
4
5
6
7
8
<!--外部样式-->
<head>
······
<link rel="stylesheet" href="css/common.css">
</head>
<body>
<p>Example</p>
</body>

CSS文件:

1
2
@charset "UTF-8";
p {color: red;}

在上面的例子中,我们先额外创立了一个CSS文件,写入了我们需要的样式。在额外创立CSS文件时,一定要注意先使用 @charset来指定编码方式。随后,我们在HTML文件中引用了这个CSS文件。其中,rel="stylesheet"指的是“附上于此处关联的样式表”,而 href="css/common.css"指定了样式表的位置。

为什么要尽量使用外部样式呢?思考这样一个问题:

假设你现在有一个网页,然后这个网页有50个HTML文件组成。现在我们想改掉同一个地方的样式,那么你需要:

A.行内/内部样式,修改50个HTML文件;

B.外部样式,修改1个对应的CSS文件。

这样就体现出来外部样式的好处了。当需要修改的时候,我们可以减少修改量,便于维护网页。

4.尝试导入字体吧!

一般情况下,浏览器只能显示进入用户终端的字体。而在线字体可以使用服务器上的字体文件,不受用户端的限制,显示相同的字体。

本节中,我们使用谷歌字体。谷歌字体的种类很全,并且使用简单,而完全免费。

(1)打开谷歌字体网站 (需要正确的上网姿势) ,在搜索框中需要你想要的字体。本节中我们以Montserrat字体为例。

(2)点开字体页面后往下滑,选择 Select Regular 400,在右侧的 Use on the web选项卡下,点击 <link>选项卡,复制 <link href...>开头的代码,放到 head元素内。

1
2
3
4
<head>
<!--省略-->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap" rel="stylesheet">
</head>

(3)在想要使用的元素中设定 font-family即可。

1
2
3
4
5
6
7
header nav ul li a{
color: #FFF;
font-family: "Montserrat",sans-serif; /* 字体设置 */
/* 这句话表示,在这个元素中优先使用Montserrat字体,如果不能正常调用的话,就用sans-serif。 */
font-size: 16px;
padding: 0 1em;
}

5.改变文字的大小与颜色

请看以下的例子:

1
2
3
4
.price {
color: #C00;
font-size: 2em;
}

让我们来解释一下代码的含义:

(1)控制字号的是 font-size属性,示例代码表示的是,将字号设置为原来的2倍。

在CSS中,要接触很多和大小有关的单位。具体的单位可以参见下表:

单位 说明 示例
px 字体的显示像素,具体大小为以设定值像素长为边的正方形 div {width: 100px; } /* 宽度为100像素 */
% 相对于父元素初始值的百分比 div {width: 80%; } /* 宽度为父元素的80% */
em 相对于页面原本的字号,这部分的放大倍数 上部分的示例代码

(2)color调整的是文字的颜色。填入后面的颜色可以使用以下的两种表示方法:

  • 16进制数,比如 #1f1e33
  • 10进制数,比如 rgb(114,51,4)

在这里简单解释一下RGB颜色的表示法。显示器组成的颜色,是由红色,蓝色和绿色三原色组成的。因此我们可以通过指定三种颜色的浓度,来混合出不同的颜色。

对于三种颜色的浓度,取值范围在[0,255],0到255从浅到深变化。十进制就是直接把三个值表示出来,十六进制就是先把每个值换算为十六进制的形式,再合并在一起表示。

6.选择器的特指度 CSS中还有优先级关系?

我们在前面说到,CSS中是有优先级关系的。在这一节中,我们对这里进行更为深入的解释。

顾名思义,优先级就是面对不同样式时,优先使用高优先级的样式。接下来一一介绍各个选择器,为了方便描述,从有高到低的优先级介绍。

(1)!important——强势国王!

!important就和国王一样,拥有最高的优先级。但也正因如此,请尽量避免过多使用此选择器,以免在覆盖样式的时候出现大麻烦。

使用的一个例子如下:

1
2
.price {color: red !important;}
.price {color: blue;}

如果没有 !important,按照“先来后到”的原则,应该是蓝色的样式先使用。但是加了这个选择器后就发生了变化,红色的样式优先级最高,会被最优先地使用。

可能有的同学不能理解,既然 !important下的样式可以被无条件使用,那么岂不是非常方便,为什么不能过多使用呢?

设想一下,如果一个王国内有好几个国王,那么国王之间同时下达指令,肯定会造成冲突和混乱。而且,能覆盖国王意见的也只有国王,如果我们想要这么做,只有另外造出来一个国王了,而这样子也肯定会产生大麻烦的。

(2)内联(行内)样式——内务大臣

内联样式就是直接把样式设置写入HTML的 style属性中的一种方式。我们在前面已经介绍过了,为了方便修改,最好不要使用这种样式。

以下是内联样式的一个例子:

1
<span style="color: red;">2,980</span>日元(含税)

(3)id选择器——孤傲公主

人(?)如其名,id选择器就和自尊心很强的公主一样,不允许城堡内再有同名的公主。也就是说,在一个页面内同名的id属性仅可使用一次。

id选择器的标记是 #,在 #后标注目标元素的id属性。比如这样:

1
#sale {color:blue;}

在这里使用id选择器更改外观只是为了演示使用,实际使用应该尽量避免这种用法,避免样式覆盖带来麻烦。

(4)类选择器、属性选择器,伪类——三类将军

类选择器是通过 class属性来选择元素的选择器。类选择题的标记是 .,在这之后加需要修改的元素的 class属性值。比如这样:

1
.price {color: red;}

属性选择器是根据属性,以及对应属性中是否有特定内容来进行样式的修改。比如:

1
2
/* href的属性值中有"Web"元素的文字颜色设置为红色 */
a[href*="web"]{ color: red;}

伪类用来设定某个元素在特定条件下时的样式规则,比如在链接被点击前后时设置不同的颜色。使用例子如下:

1
2
a: hover { color: red;} /* 伪类的设定需要一个冒号 */
/* 光标放在链接上时,文字变为红色 */

伪类名字中虽然有“类”,但是和类选择器没关系哦。

(5)元素选择器、伪元素——二类士兵

元素选择题就是通过元素的种类来设定样式规则的一种选择器。比如:

1
span { color:red; }

伪元素用来修改HTML中没有被标记的内容的样式设置,比如改变某个元素第一个字的颜色。使用例子如下:

1
2
3
p::after { /* 伪元素的设定需要两个冒号 */  
content:"example";
} /* 在p元素对应的内容后添加字样 */

(6)通配选择器——万能女仆

通配选择器虽然优先级最低,但是可以影响整个页面的全部元素。*是使用通配选择器的标志。比如:

1
2
3
4
* { /* 重置默认留白 */
margain: 0;
padding: 0;
}

由于每个浏览器都有一套默认的CSS样式规则,而且这些样式规则的属性值不完全相同,因此可以通过使用通配选择器,来将页面外观统一重置,这样做也被称为CSS重置。

不过,这样做虽然很方便,但是也有以下缺点:

  • 默认样式规则的好处没有了
  • 被重置的部分还需要重新写入,时间成本增加,CSS也会臃肿

所以,现在大家更多的还是“只重置需要的元素”,而不是一锅端。

强度数值化

关于选择器的强度(优先级),也可以通过特指度来判断。我们前面用拟人化的形象来比喻各种选择器,在这里同样可以使用。

思考一下,如果有以下两个选择器:

  • #id p
  • p.class::after

哪一个选择器更强?

让我们来具体分析一下。如果用前面的知识表示,那么 #id p就是一位公主加一位士兵,而 p.class::after就是一位将军加一位士兵,而公主比士兵有更高的权力(也就是优先级),所以 #id p的优先级更高。

从上面的例子我们可以看出,通过特指度判断优先级的时候,按照“大臣,公主,将军,士兵”的顺序依次判断,先判断这一阶层的人数,人数多的直接胜出,如果这一阶层人数相同,则顺延到下一阶层进行判断,直至分出胜负为止。!important是最高优先级的(国王),不需要比较就可以无条件胜出。

如果我们按照上面介绍的顺序,把每个阶层的人数标出来,那么上述两个选择器的强度可以表示为 0.1.0.10.0.1.2。这就是特指度。同样地,!important没有优先级,可以无条件胜出。

是不是已经晕了?没关系,你可以点击这里,用这个网址计算特指度。

7.内边距与外边距的区别

在网页制作中,会有“在一定元素间设置空白”的需要,这时候就要用到 paddingmargin。两个都可以设置空白,但是两个的含义并不一样。前者是边内侧的空白(内边距),后者是边外侧的空白(外边距)。

是不是感觉理解起来有点费劲?我们用一个图表示一下:

https://images.shojola.top/box_model_example_d41d8cd98f00b204e9800998ecf8427e.png

就像我们看到的,网页中的图像都是被这三层包围着,从内到外分别是 paddingborder我图里面拼错了,请自动忽视),margin。这三者总称为CSS的框模型(Box Model)。从观感来说,padding元素设置后画面会“变胖”,而 margin是扩大了“禁止入内的范围”。

paddingmargin的设置方法有很多种:

  • 上下左右统一设置

直接指定两个元素的值即可,单位可以参考这一章第5节的介绍。值可以单一设置,也可以同时设置多个值,规则如下:

代码 含义
padding: 10px; 上下左右各10px
padding: 10px 20px; 上下各10px,左右各20px
padding: 10px 20px 30px; 上10px,左右各20px,下30px
padding: 10px 20px 30px 40px; 从上面开始顺时针设置,上10px,右20px,下30px,左40px
  • 上下左右分开设置

格式是 padding-xxxxxx处填入你想要设置的地方的值。上方是 top,下方是 bottom,左侧是 left,右侧是 right。比如:

1
padding-left: 10px; /* 设置左侧内边距为10像素 */

margin的作用是扩大禁止进入的范围,但是在元素纵向排列时,相邻部分的 margin会重叠。

举个例子,现在有两个纵向排列的元素,两个的 margin值都是60px。如果正常计算,当他们重叠后,间隔应该是120px,但实际上,重叠后他们的间隔依然是60px。

如果在实际开发的过程中搞不懂哪里是 margin,可以使用浏览器的开发者工具来确定。

8.用浮动把元素围起来

使用 float属性,可以让元素自动地向左或者向右靠拢,这时后面的元素将会按照顺序围上来。

float属性一共可以设置三个值:leftrightnone。效果分别是向左浮动,向右浮动,无浮动。

我们用数字大概表示一下效果:

  • left

1 2 3 4 5

6 7 8

  • right

5 4 3 2 1

ㅤ 8 7 6

  • none

1

2

3

如何解除浮动?

如果不结束浮动的话,那么后面的元素就会一个接一个跟上来。对于这种情况,我们使用 clear属性,在对应的地方结束浮动。先给需要结束的地方赋予 clear属性,再在css中进行选择,设定 clear的值。比如这样:

HTML文件:

1
2
3
4
5
6
7
8
9
<div class="box float">1</div>
<div class="box float">2</div>
<div class="box float">3</div>
<div class="box float">4</div>
<div class="box float">5</div>
<div class="box float">6</div>
<div class="box float">7</div>
<div class="box float">8</div>
<p class="clear">float练习中, 我想解除包围状态!</p> <!--在这里设置clear属性-->

CSS文件:

1
2
3
.clear{
clear:both;
} /* 选择clear属性,并设定对应的值 */

这样,从文字处我们就可以断开浮动了。

9.适配智能手机的方法

由于智能手机和电脑的布局很不一样,因此我们有必要为手机做一些适配,让访问者得到更友好的体验。为此,“响应式Web设计” 的概念应运而生。

响应式网站设计的理念是:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。 使用响应式布局的优点如下:

(1)节省HTML文件的运营成本

在之前,如果想要适配不同的设备,需要单独适配HTML文件,这样的话维护一个网页就必须维护两个或者更多的HTML文件,很费时。如果采用响应式设计,适配的工作交给CSS,那么只需要更新一个HTML文件就可以了。

(2)可以统一链接

如果网页是分开部署的,那么对于不同类型的设备,就需要使用不同的链接指向对应的网页,有的时候用户不清楚指向的平台,那么就会导致混乱,响应式布局统一了网页,就可以很好地解决这个问题。

但是,响应式布局也有以下缺点:

(1)网站的加载时间变长

因为不同平台使用的是同一网页,因此对于智能手机专门适配的网页,加载图片的时间会变长。

(2)页面布局的自由度降低

响应式Web设计的HTML代码是同一套,区分由CSS完成,有的时候网页布局不会很完美。

如何改变外观呢?

通过判断条件。比如这样:

1
@media screen and (max-width: 599px) /* 宽度在599px以下,使用智能手机的布局 */

什么是乱码?

简单说,乱码就是机器判断字符编码规则失败的一种情形。

什么是字符编码呢?在这之前我们得知道,计算机一开始是只能显示英文和阿拉伯数字的,要想显示中文或者其他语言,我们就得用英文和数字进行表示。

比如说,对于“爱”这个中文汉字,对于GB2312-80标准来说,它用 B0AE来表示,而UTF-8中,它用 E788B1表示。所以,当浏览器从前一种标准“翻译”到另一种标准的时候,就会因为标准不统一造成翻译的偏差,从而导致乱码。

如果在制作网页的过程中遇到了乱码,请确保HTML文件本身和 head元素中的指定一致。在HTML5中,推荐使用UTF-8,这是全世界通用的统一编码。

五、JavaScript

1.JavaScript是什么?

当需要实现一些动态效果,比如图片自动切换,光标放到某个位置后自动出现目录,这个时候就需要JavaScript。如果说把用HTML+CSS的网页说成是绘本,那么JavaScript就可以让绘本动起来。

JavaScript是一种编程语言。也就是说,JavaScript可以运行“程序”。作为比较,HTML和CSS只是“所见即所得”的变成语言,它们“展现”写下来的东西,而不能做到“实现”。

什么是程序呢?简单来说,程序就是完成一件事情的过程。比如说我们现在要做一道菜,那么做菜的程序可以分为这几步:买菜,洗菜,切菜,炒菜。对于计算机的程序也是一样的,比如说放映幻灯片的时候,程序可以是这样,先展示图片A,两秒后展示图片B,再过三秒后展示图片C……

对于JavaScript来说,它可以做到一些基于时间或者用户动作的交互,就像上面提到的,当访问者把鼠标移动到某个地方的时候,利用JavaScript可以做出相应的回应。

JavaScript的主要功能如下:

  • 计算
  • 鼠标点击或悬停等事件交互的触发
  • HTML的改写、添加、删除
  • 样式表的获取、设定等

JavaScript属于脚本语言,也就是说JavaScript写完就可以直接运行,不需要编译。编译形象地说,就是把写下来的代码“翻译”成计算机可以识别的语言的过程,像是C语言,Java这些都是编程语言

JavaScript和Java没有任何关系。

编写JavaScript

编写JavaScript同样只需要文本编辑器和浏览器。由于JavaScript的语法较为复杂,我们这里介绍一个简单的例子——用报警的形式显示“test”。

1
2
3
4
5
<script type="text/javascript">
<!--
alert("test");
-->
</script>

实现效果

JavaScript也可以像CSS那样外部引用。JavaScript文件的后缀名是 .js,只要写入源代码再在HTML的 head元素中中标记引用即可。就像这样:

1
<script type="text/javascript" src="sample.js"></script>

2.jQuery是什么?

jQuery将JavaScript的一些代码进行了模块化,这样就能用更方便的方法使用JavaScript。

jQuery的使用方法与CSS类似,使用选择器来选择元素,就像这样:

1
2
$("选择器").方式{参数};
/* 表示把选择器选择的元素以某种方式设定参数 */

举一个简单的例子,我们想要把元素p下的文字设置为红色,那么用jQuery就可以写为:

1
$("p").css("color","red");

其中“方式”这里写的是 css(),意思就是通过CSS这种方式进行颜色的设置。

3.使用jQuery的插件

jQuery可以通过引入插件来实现很多功能,这些插件既可以自己开发,也可以直接使用他人已经开发好的。在这一节,我们通过Lightbox插件,来实现“点击图片展开”的功能。

要想使用插件,我们需要经历以下几步:

(1)引入jQuery

我们需要先让jQuery能够被浏览器读取。有这样两种方法:

  • 调用服务器上的jQuery
    在服务器的 head元素中,加入如下代码:

    1
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
  • 从官网下载jQuery,再手动导入
    下载好jQuery之后,使用类似于在线导入的方式,在head元素中加入如下代码:

    1
    <script src="jquery.js"></script>

    其中src后面写入的是本地下载的jQuery目录中,此脚本对应的地址。

(2)下载Lightbox

点击这里下载Lightbox的源码,得到一个zip文件。将它解压,找到以下文件:

  • src/css/lightbox.css
  • src/images/*.png
  • src/js/lightbox.js

把这几个文件分别复制到网站目录对应的文件夹里。

(3)在网站目录里引用Lightbox

head元素中引用css样式:

1
<link rel="stylesheet" href="css/lightbox.css">

body元素结束前引用js代码:

1
<script src="js/lightbox.js"></script>

(4)使用Lightbox

对于想要使用Lightbox的部分,添加data-lightbox属性:

1
<a href="1.jpg" data-lightbox="detail">测试</a>

data-lightbox的属性值相同时,会被当作一个组处理。对于图片可以利用这个特性,实现“下一张”“上一张”的切换效果。

使用data-title属性,可以为图片添加说明。

1
<a href="1.jpg" data-lightbox="detail" data-title="测试描述">测试</a>