轻松学HTMLCSS开发14章 个人网站制作.pptxVIP

第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:\personal\img目录，由于网站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文件代码。为了节省编写代码的工作量，可以