0036 如何编写网页迁移跳转功能

上节课讲解了关于图片的相关知识，这节课来讲解关于如何使用超级链接实现网页之间的跳转功能。

上节课的课后练习

准备做2个新的网页，设计好里面的文字内容和图片。
学哥要来做2个新的网页，一个网页是显示关于“宝钢焦炉火落判定自动控制系统”的详细信息；另一个网页是显示关于项目“AES256位加密保存个人密码本”的相关信息。
程序设计如下：
第一个网页命名为project1.html，第二个网页命名为project2.html。
网页打算使用index.css当中用到的式样，第一行放一个大标题bigtitle，然后下面是一个smallcontent，里面放多段文字或多个图片。
首先准备好一些图片文件，存放到images目录下面。
project1.html里面的代码如下：

2-10-1.jpg

project1.html代码文件在浏览器中显示的效果：

2-10-2.jpg

project2.html里面的代码如下：

2-10-3.jpg

project2.html代码文件在浏览器中显示的效果：

2-10-4.jpg

大家可以参照代码，设计和编写自己的网页，可以使用前面课程中说明过的各种标签元素。

a标签和属性

前面做好了2个新的网页，可以通过浏览器直接打开这2个网页进行浏览查看。
但是每次打开这个网页，都要去文件管理器里面寻找并打开，并不是太方便，有没有什么办法，在网页上点击一个链接，网页就可以跳转到新的网页呢？
通过使用标签在HTML中创建链接。
如果大家用过浏览器访问网站的，应该就会很熟悉什么是链接，当把鼠标指针移动到网页中的某个链接上时，箭头一般会变为一只小手，点击之后，网页就会跳转到新的文档或者当前文档中的某个部分。
这种链接称之为超链接。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像。
链接的HTML代码格式是这样的：
Link text
href属性规定链接的目标。它可以是一个网络链接地址，也可以是一个相对目录和文件名，和上节课的img标签的src属性类似。
开始标签和结束标签之间的文字被作为超级链接来显示。
实例是这样的：
访问百度
或者：
AES256位加密保存个人密码本
在创建链接之前，需要设计和准备好，将什么内容做为一个超链接，允许用户点击它跳转页面。
学哥这里设计好了，点击“成果展示”里面的关于“宝钢焦炉火落判定自动控制系统”的图片的时候，页面跳转到project1.html；
在“工作经验（部分）”里面增加一段文字，说明项目“AES256位加密保存个人密码本”的信息，点击文字“AES256位加密保存个人密码本”的时候，也看跳转到project2.html。
在index.html当中增加关于项目“AES256位加密保存个人密码本”的内容。
index.html代码修改如下：

2-10-5.jpg

刷新页面：

2-10-6.jpg

点击图片迁移页面

先来做第一个网页跳转功能，修改index.html，在“宝钢焦炉火落判定自动控制系统”的图片的前后加上标签，设置好属性。
index.html代码修改如下：

2-10-7.jpg

刷新页面：

2-10-8.jpg

可以看到网页的这个图片显示效果好像没有什么变化，但是当鼠标移动到图片上时，鼠标光标变成了一个小手了，说明这是一个链接，可以点击了，点击一下，发现页面迁移到了新的网页：

2-10-9.jpg

如何返回前页面

网页跳转完成之后，浏览器里面的内容就是显示新的网页的内容了，那么该如何返回原来的网页呢？
一种办法是使用浏览器的返回按钮，就像导航一样，返回到前一个网页：

2-10-10.jpg

点击这个返回按钮，可以看到网页回到了index.html网页了。
使用浏览器的返回按钮呢，有些时候并不是太方便或者友好，这个以后在学习编写动态网页的时候就能体会到，这里不深入讲解。
那么还有一种办法，可以通过修改新网页里面的代码，增加一个返回的超链接，用户点击这个超链接之后，链接返回到原来的网页。
来修改project1.html网页程序，在大标题的前面，增加一个返回图片，去网上搜索一个“返回图片”，下载后存放到images目录下。
project1.html代码修改如下：

2-10-11.jpg

刷新页面：

2-10-12.jpg

可以看到多了一个返回图片，点击后可以回到index.html网页了。
这里，学哥为了简化起见，直接在project1.html里面编写了style样式，请大家将这里修改一下，将所有的CSS属性和值全部转移到index.css当中去。

迁移时新打开一个窗口页面

网页跳转可以让浏览器显示新的网页，但是在有些情况下，用户希望同时看到原页面和新的页面，不希望网页来回跳转的形式，这种情况下，可以设置标签的属性target，让用户在点击链接的时候，打开一个新的窗口显示新的网页，这样对原页面没有影响， 相当于同时在浏览器打开了原网页呃和新网页，这种功能在某些时候非常有用。
修改index.html程序的网页跳转的地方，增加target="_blank"属性。注意有一个下划线。
index.html代码修改如下：

2-10-13.jpg

点击链接之后，发现浏览器新打开了一个窗口：

2-10-14.jpg

如果点击浏览器的Tab标题“学哥的个人简历”，回到index.html网页，再次点击那个图片链接，发现浏览器又打开了一个窗口，如果不停的点击链接，就会打开很多个窗口，在某些时候，可能并不希望这样，那么可以这样修改代码。
index.html代码修改如下：

2-10-15.jpg

关掉之前打开的所有的project1.html网页，重新点击链接试试看，可以看到打开一个窗口之后就无法打开第二个窗口了。
所以要记住“_blank”属性值是告诉浏览器，每次都打开一个新的窗口，如果不是这个属性值，自己起一个名字，则浏览器会判断如果新窗口没有的名字不存在这个，则新打开一个窗口，如果已经打开过这个名字的窗口，则显示这个窗口并刷新网页。

文字链接迁移页面

在前面增加的文字“AES256位加密保存个人密码本”前后加上标签，设置跳转到project2.html网页。
index.html代码修改如下：

2-10-16.jpg

刷新网页：

2-10-17.jpg

鼠标移动到蓝色有下划线的文字链接上，发现鼠标光标变成了小手，点击这个链接后，发现新打开了一个窗口显示了新网页。

修改文字链接CSS属性

如果觉得这个蓝色有下划线的文字不太好看，可以通过CSS属性来调整，来将蓝色去掉，下划线去掉，字体调整大一些，方便用户容易点击。
index.css代码修改如下：

2-10-18.jpg

index.html代码修改如下：

2-10-19.jpg

刷新网页：

2-10-20.jpg

可以看到字体变大了，颜色变化了，下划线没有了，点击的瞬间的效果也不一样。
链接可以设置的样式的CSS属性有很多，例如 color、font-family、background或者font-size等等。
链接的特殊之处在于可以设置不同的状态的样式。
链接有四种状态：
a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻
例子如下：
a:link {color:#FF0000;} /* 未被访问的链接 /
a:visited {color:#00FF00;} / 已被访问的链接 /
a:hover {color:#FF00FF;} / 鼠标指针移动到链接上 /
a:active {color:#0000FF;} / 正在被点击的链接 */
在a的后面加上.prolink表示针对a标签的样式，样式名字是prolink，在html里面使用class="prolink"来使用。
大家可以自由修改这里的文字链接属性，找到自己喜欢的样式。
使用文字做为链接，是经常使用的一种链接形式，也可以使用设置div的CSS属性来做出一个漂亮的按钮链接。

将链接做成一个漂亮的按钮

来修改CSS样式，增加背景色，增加内边距，将链接做成一个流行的色块按钮。
index.css代码修改如下：

2-10-21.jpg

刷新网页：

2-10-22.jpg

课后练习

网站编写的技巧基本上就讲解到这里，虽然还有很多知识和细节没有深入的讲解，但是做为网页编程的入门课程来说，掌握到这个程度已经差不多了，已经可以完成一个个人简历网站了。
大家学习了这些知识点以后，要举一反三，把内容填写完整，编写出自己的个人简历网站。
下节课开始，就开始讲解如何测试和部署个人简历网站了，可以让别人看到我们自己做的第一个网站啦。