轻松学html+css开发14章 个人网站制作

第14章 个人网站制作,个人网站是一个可以记录自我，展现自我的一个平台，已经被越来越多的人所熟悉和使用。通过个人网站人们可以将自己的信息、感想通过文字、图片等多种形式展现出来。本章将结合全书知识来制作一个个人网站。通过本章的学习，读者可以制作一个自己的个性化网站。,14.1 网站整体规划,做任何项目都需要提前进行规划，要有明确的目的，要知道所建网站的作用是什么，服务的对象又是那些。首先从大局出发，进行完整的需求分析，然后才考虑效果图样和具体的代码编写。,14.1.1 层次分析,个人网站是所有网站中比较简单随意的一种形式，每个人可以根据自己不同的需求来规划自己的网站，本章中以常见的博客形式来规划个人网站实例，其层次分析示意图如图14.1所示。,14.1.2 模块划分,为了使全站的风格统一，本站4个页面采用统一的头部和底部，头部为顶部栏，Banner条部分，底部为版权信息或个人信息部分，中间部分则为页面的主要内容。,14.1.2 模块划分,网站页面的功能结构图和相对应代码如下所示。,14.1.3 首页分析,每个页面会有不同内容的展示方法，因此要先确定内容布局，才能更好的制作出效果图。个人网站的首页一般会显示网站更新的最新内容，如留言，日志或者照片的更新内容。所以，首页的信息类别最丰富。,14.1.3 首页分析,本章个人网站首页主体区结构和相应代码如下所示。,14.2 首页制作,首页的制作是一个网站的重要部分，当进入一个网站时，最先看到的就是网站的首页。所以首页的好坏一般关系着网站的好坏。,14.2.1 首页设计效果图,要想更好的进行页面的设计，可以先使用图像软件制作页面设计效果图，再根据效果图来进行更详细的设计。图像软件有很多种，可以根据自己的实际情况选择。,14.2.1 首页设计效果图,本例采用Photoshop软件制作页面效果图。,14.2.2 XHTML结构的构建和CSS布局,网站布局完就要开始XHTML结构的构建。需要构建页面的头部元素，显示页面标题，基本设置元素，定义页面信息，创建页面样式，链接元素以及脚本元素等。在E:personal目录下创建网页文件（XHTML1.0），命名为index.htm，编写index.htm文件代码。,14.2.3 顶部栏的制作,顶部栏顾名思义是要放置在网页的最上面。在顶部栏制作中HTML调用CSS中的top来设置顶部栏的大小。,14.2.4 Banner条制作,网页上的广告条又称Banner，是用来发布一些重要信息的工具。在Banner条制作中，HTML调用CSS中的vi来设置Banner的大小，用tt来设置Banner条上字体的大小。,14.2.5 最新留言制作,最新留言是用来显示个人网站上的最新的几条留言。在最新留言制作中，HTML调用CSS中的left来设置最新留言的位置，使最新留言显示在网页的左边。,14.2.6 最新日志制作,最新日志是用来显示个人网站上的最新的几篇日志。在最新日志制作中，HTML调用CSS中的right来设置最新日志的位置，使最新日志显示在网页的右边。,14.2.7 最新照片制作,最新照片是用来显示个人网站上的最新的几张照片。在最新照片制作中，HTML调用CSS中的photo来设置最新照片的位置，使最新照片显示在网页的下边。,14.2.8 设置背景图片,完成了首页页面的内容填充后，开始进行Banner条的背景设置。笔者把Banner条的背景设置为如下所示，将图片命名为vi.jpg，读者也可根据自己的需要设置其他图片。将图片放入E:personalimg目录，由于网站Logo背景设置属于全站共用的样式，所以在style.css文件中添加CSS代码。,14.2.9 设置导航条及标题栏渐变背景,本节通过CSS代码设置导航条渐变背景，以及主体内容中各功能版块的标题栏背景。导航条内含4个超级链接，除了导航条本身的背景图片（命名为nav_bg.jpg），超级链接在鼠标滑过时也有1个背景图片（命名为hover_bg.jpg），,14.2.10 设置页面垂直滚动条样式,滚动条是用户比较熟悉的操作元素，一般情况下，滚动条的样式和所属浏览器的样式保持一致。但是很多网页将滚动条通过CSS设置为自定义的样式，本例网站也制作个性化滚动条，为了考虑浏览器兼容性，须将样式同时应用于html标签和body标签。,14.3 日志页面制作,首页制作好以后，就开始制作其他页面，本节介绍的是日志页面的制作，日志中包含了网站主要的文章内容，主要用于展示站长的个人文章以及转载的精华文章。由于日志页面样式和首页相差不多，本节重点讨论如何实现日志内容的浏览功能。,14.3.1 思路分析,在E:personal目录下创建网页文件（XHTML1.0），命名为article.htm，编写article.htm文件代码。为了节省编写代码的工作量，可以直接将index.htm代码复制到article.htm中，并删除不需要的留言功能版块和相片功能版块。,14.3.1 思路分析,本例页面具体思路为：将页面中5条日志的具体内容分别放入图中可视的p元素中，默认情况下，浏览者只能看到第1行。在页面中添加1个隐藏的并且绝对定位的容器，当用户单击日志标题后，将p元素内容及相应的标题和日期传递给这个容器，并显示这个容器。为了考虑不同分辨率的浏览器，隐藏容器的宽度必须使用自适应值，通过CSS设置将其定位与列表重合，即遮挡日志列表。,14.3.1 思路分析,整个程序的工作过程如图14.4所示。,14.3.2 浏览日志功能的实现,日志代码的实际编写中须将隐藏容器的定位控制准确，使之既覆盖日志列表，又保持网站整体风格。当点击日志列表时，HTML调用JS中的openContent()函数，使日志页面打开。当点击关闭窗口时，HTML调用JS中的closeContent()函数，使日志页面关闭。,14.4 照片页面制作,上节制作好了日志页面，本节开始制作照片页面。相册中包含了站长收藏的个人照片、精品图片等内容。相册页面样式和首页、日志页面相差不多，本节重点讨论如何展示图片的功能,14.4.1 思路分析,在E:personal目录下创建网页文件（XHTML1.0），命名为photo.htm，编写photo.htm文件代码。相册页面可展示多张图片的缩略图，本例相册页面浏览仍然和日志页面相似。,14.4.1 思路分析,整个程序的工作过程如图14.5所示。,14.4.2浏览照片功能的实现,相册代码的实际编写中使用CSS滤镜设置半透明背景，即filter:alpha（opacity=不透明度）。当点击照片链接时，HTML调用JS中的openContent()函数，使照片页面打开。当点击关闭窗口时，HTML调用JS中的closeContent()函数，使照片页面关闭。,14.5 小结,通过本章，对全书知识进行了一个综合实践，制作完成了