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