制作个人博客页面

《制作个人博客页面》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第20章制作个人博客页面个人博客页面用来展示个人的一些信息、日志以及个人的图片等等，是一个方便的展示平台。个人博客页面的设计和制作都比较自由。具体的制作过程包括以下几个步骤，制作页面效果图，这个部分通常使用Photoshop完成。然后再使用Photoshop的切片工具，将效果图的各个部分制成图片。最后在Dreamweaver中制作成网页。20.1制作页面前的准备工作在制作具体页面之前，先要对页面进行大体的规划，这个规划可以帮助确定页面的大体结构，这个步骤一般在头脑中进行，可以不必显示在效果图上。在页面区块大概

2、构思完成后，使用Photoshop的切片工具对页面进行切割，在切割的过程中制作出页面的背景等修饰图片。20.1.1规划页面的内容页面结构的规划是制作整个页面的基础，好的页面规划能够使页面更具有扩展性，能够适应页面内容的变化。在规划页面的时候，首先区分割页面为几个部分，例如Logo、Banner、导航条、侧栏等内容。然后在各个部分中切出内容和背景。20.1.1规划页面的内容20.1.2切分效果图在Photoshop中首先区分页面中的修饰图片和内容图片。然后将页面中的文本内容等隐藏，根据构思的页面区块，切割出背景

3、图片和内容图片。最后将各种图片内容保存在磁盘的某个文件夹中。从软件保存后的的图片，都会默认的使用编号的格式定义图片的名称。20.2规划站点文件夹准备好各种页面文件之后，需要做的是制作好站点的各种文件夹。通常各种图片文件都放在名称为images的文件夹中。样式表文件单独放在一个名称为style的文件夹中。站点的首页一般命名为“default”，并保存在根文件夹下。此时，站点的目录结构，如图20-3所示。20.3定义基本的样式在站点建立后，就可以制作CSS样式文件，并关联在XHTML文件中。然后通过在XHTML中

4、，对每个元素定义（或关联）不同的样式，制作页面的各个部分。按照最初规划的页面结构，整个页面分为头部内容、导航内容、主体内容、底部内容几个部分。本节讲解定义和关联CSS文件，以及页面头部内容的制作，其具体内容如下所示。20.3.1新建CSS文件在制作具体的内容之前，首先要制作好需要使用的CSS样式文件，并在XHTML中调用该文件。这样做可以将页面结构部分和表现修饰部分分离到两个文件中，便于后期的维护。在style文件夹中右击新建一个文本文档，然后更改名称为“style.css”。20.3.2定义页面的基础样式新

5、建页面之后，页面的默认标题为“无标题文档”，所以还需要将文档更改为更有意义的名称。另外为了更好的显示页面内容，以及辅助宣传页面，还需要修改和定义页面的文字编码、标签等相关内容，其具体的代码如下所示。20.4制作页面头部在站点建立后，就可以制作CSS样式文件，并关联在XHTML文件中。然后通过在XHTML中，对每个元素定义（或关联）不同的样式，制作页面的各个部分。按照最初规划的页面结构，整个页面分为头部内容、导航内容、主体内容、底部内容几个部分。本节讲解定义和关联CSS文件，以及页面头部内容的制作，

6、其具体内容如下所示。20.4.1制作页面头部的结构从效果图可以看到，页面头部的内容为两行文本，其中部分文本包含超级链接，为了更好的独立控制每个部分的显示效果，在制作结构的时候为各种内容定义了不同的id，便于分别控制每个部分的显示效果，其具体的代码如下所示。20.4.2定义页面头部的样式根据页面头部的结构，可以分析出头部的代码分为几个部分，一部分是整体定义页面大小和背景的wrapper样式。20.5制作页面导航页面导航内容包括制作导航的结构、导航的背景、链接样式等。在导航的样式中，首先要对各个元素进行精确定位。

7、然后使用各种伪类和类选择符，制作出每个导航链接的独立背景，以及显示、隐藏效果。其具体内容如下所示。20.5.1制作页面导航的结构页面导航条主要由一个