轻松学HTML+CSS之个人网站制作课件.ppt

《轻松学HTML+CSS之个人网站制作课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第14章个人网站制作个人网站是一个可以记录自我，展现自我的一个平台，已经被越来越多的人所熟悉和使用。通过个人网站人们可以将自己的信息、感想通过文字、图片等多种形式展现出来。本章将结合全书知识来制作一个个人网站。通过本章的学习，读者可以制作一个自己的个性化网站。14.1网站整体规划做任何项目都需要提前进行规划，要有明确的目的，要知道所建网站的作用是什么，服务的对象又是那些。首先从大局出发，进行完整的需求分析，然后才考虑效果图样和具体的代码编写。14.1.1层次分析个人网站是所有网站中比较简单随意的一种形式，每个人可以根据自己不同的需

2、求来规划自己的网站，本章中以常见的博客形式来规划个人网站实例，其层次分析示意图如图14.1所示。14.1.2模块划分为了使全站的风格统一，本站4个页面采用统一的头部和底部，头部为顶部栏，Banner条部分，底部为版权信息或个人信息部分，中间部分则为页面的主要内容。14.1.2模块划分网站页面的功能结构图和相对应代码如下所示。14.1.3首页分析每个页面会有不同内容的展示方法，因此要先确定内容布局，才能更好的制作出效果图。个人网站的首页一般会显示网站更新的最新内容，如留言，日志或者照片的更新内容。所以，首页的信息类别最丰富。14.1

3、.3首页分析本章个人网站首页主体区结构和相应代码如下所示。14.2首页制作首页的制作是一个网站的重要部分，当进入一个网站时，最先看到的就是网站的首页。所以首页的好坏一般关系着网站的好坏。14.2.1首页设计效果图要想更好的进行页面的设计，可以先使用图像软件制作页面设计效果图，再根据效果图来进行更详细的设计。图像软件有很多种，可以根据自己的实际情况选择。14.2.1首页设计效果图本例采用Photoshop软件制作页面效果图。14.2.2XHTML结构的构建和CSS布局网站布局完就要开始XHTML结构的构建。需要构建页面的头部元素，显

4、示页面标题，基本设置元素，定义页面信息，创建页面样式，链接元素以及脚本元素等。在E:personal目录下创建网页文件（XHTML1.0），命名为index.htm，编写index.htm文件代码。14.2.3顶部栏的制作顶部栏顾名思义是要放置在网页的最上面。在顶部栏制作中HTML调用CSS中的top来设置顶部栏的大小。14.2.4Banner条制作网页上的广告条又称Banner，是用来发布一些重要信息的工具。在Banner条制作中，HTML调用CSS中的vi来设置Banner的大小，用tt来设置Banner条上字体的大小。1

5、4.2.5最新留言制作最新留言是用来显示个人网站上的最新的几条留言。在最新留言制作中，HTML调用CSS中的left来设置最新留言的位置，使最新留言显示在网页的左边。14.2.6最新日志制作最新日志是用来显示个人网站上的最新的几篇日志。在最新日志制作中，HTML调用CSS中的right来设置最新日志的位置，使最新日志显示在网页的右边。14.2.7最新照片制作最新照片是用来显示个人网站上的最新的几张照片。在最新照片制作中，HTML调用CSS中的photo来设置最新照片的位置，使最新照片显示在网页的下边。14.2.8设置背景图片完成了

6、首页页面的内容填充后，开始进行Banner条的背景设置。笔者把Banner条的背景设置为如下所示，将图片命名为vi.jpg，读者也可根据自己的需要设置其他图片。将图片放入E:personalimg目录，由于网站Logo背景设置属于全站共用的样式，所以在style.css文件中添加CSS代码。14.2.9设置导航条及标题栏渐变背景本节通过CSS代码设置导航条渐变背景，以及主体内容中各功能版块的标题栏背景。导航条内含4个超级链接，除了导航条本身的背景图片（命名为nav_bg.jpg），超级链接在鼠标滑过时也有1个背景图片（命名为h

7、over_bg.jpg），14.2.10设置页面垂直滚动条样式滚动条是用户比较熟悉的操作元素，一般情况下，滚动条的样式和所属浏览器的样式保持一致。但是很多网页将滚动条通过CSS设置为自定义的样式，本例网站也制作个性化滚动条，为了考虑浏览器兼容性，须将样式同时应用于html标签和body标签。14.3日志页面制作首页制作好以后，就开始制作其他页面，本节介绍的是日志页面的制作，日志中包含了网站主要的文章内容，主要用于展示站长的个人文章以及转载的精华文章。由于日志页面样式和首页相差不多，本节重点讨论如何实现日志内容的浏览功能。14.3.

8、1思路分析在E:personal目录下创建网页文件（XHTML1.0），命名为article.htm，编写article.htm文件代码。为了节省编写代码的工作量，可以直接将index.htm代码复制到article.htm中，并删除不需要的留