第20章制作个人博客页面-课件.ppt

1、第第2020章章 制作个人博客页面制作个人博客页面个人博客页面用来展示个人的一些信息、日志以及个个人博客页面用来展示个人的一些信息、日志以及个人的图片等等，是一个方便的展示平台。个人博客页面的设人的图片等等，是一个方便的展示平台。个人博客页面的设计和制作都比较自由。具体的制作过程包括以下几个步骤，计和制作都比较自由。具体的制作过程包括以下几个步骤，制作页面效果图，这个部分通常使用制作页面效果图，这个部分通常使用Photoshop完成。然后完成。然后再使用再使用Photoshop的切片工具，将效果图的各个部分制成图的切片工具，将效果图的各个部分制成图片。最后在片。最后在Dreamweaver中制

2、作成网页。中制作成网页。20.1 20.1 制作页面前的准备工作制作页面前的准备工作在制作具体页面之前，先要对页面进行大体的规划，在制作具体页面之前，先要对页面进行大体的规划，这个规划可以帮助确定页面的大体结构，这个步骤一般在头这个规划可以帮助确定页面的大体结构，这个步骤一般在头脑中进行，可以不必显示在效果图上。在页面区块大概构思脑中进行，可以不必显示在效果图上。在页面区块大概构思完成后，使用完成后，使用Photoshop的切片工具对页面进行切割，在切的切片工具对页面进行切割，在切割的过程中制作出页面的背景等修饰图片。割的过程中制作出页面的背景等修饰图片。20.1.1 20.1.1 规划页面的

3、内容规划页面的内容页面结构的规划是制作整个页面的基础，好的页页面结构的规划是制作整个页面的基础，好的页面规划能够使页面更具有扩展性，能够适应页面内容面规划能够使页面更具有扩展性，能够适应页面内容的变化。在规划页面的时候，首先区分割页面为几个的变化。在规划页面的时候，首先区分割页面为几个部分，例如部分，例如Logo、Banner、导航条、侧栏等内容。然、导航条、侧栏等内容。然后在各个部分中切出内容和背景。后在各个部分中切出内容和背景。20.1.1 20.1.1 规划页面的内容规划页面的内容20.1.2 20.1.2 切分效果图切分效果图在在Photoshop中首先区分页面中的修饰图片和内容图片。

4、然中首先区分页面中的修饰图片和内容图片。然后将页面中的文本内容等隐藏，根据构思的页面区块，切割出背后将页面中的文本内容等隐藏，根据构思的页面区块，切割出背景图片和内容图片。最后将各种图片内容保存在磁盘的某个文件景图片和内容图片。最后将各种图片内容保存在磁盘的某个文件夹中。从软件保存后的的图片，都会默认的使用编号的格式定义夹中。从软件保存后的的图片，都会默认的使用编号的格式定义图片的名称。图片的名称。20.2 20.2 规划站点文件夹规划站点文件夹准备好各种页面文件之后，需要做的是制作好站点的各种文准备好各种页面文件之后，需要做的是制作好站点的各种文件夹。通常各种图片文件都放在名称为件夹。通常各

5、种图片文件都放在名称为images的文件夹中。样式的文件夹中。样式表文件单独放在一个名称为表文件单独放在一个名称为style的文件夹中。站点的首页一般命的文件夹中。站点的首页一般命名为名为“default”，并保存在根文件夹下。此时，站点的目录结构，并保存在根文件夹下。此时，站点的目录结构，如图如图20-3所示。所示。20.3 20.3 定义基本的样式定义基本的样式在站点建立后，就可以制作在站点建立后，就可以制作CSS样式文件，并关联在样式文件，并关联在XHTML文件中。然后通过在文件中。然后通过在XHTML中，对每个元素定义中，对每个元素定义（或关联）不同的样式，制作页面的各个部分。按照最初

6、规（或关联）不同的样式，制作页面的各个部分。按照最初规划的页面结构，整个页面分为头部内容、导航内容、主体内划的页面结构，整个页面分为头部内容、导航内容、主体内容、底部内容几个部分。本节讲解定义和关联容、底部内容几个部分。本节讲解定义和关联CSS文件，以文件，以及页面头部内容的制作，其具体内容如下所示。及页面头部内容的制作，其具体内容如下所示。20.3.1 20.3.1 新建新建CSSCSS文件文件在制作具体的内容之前，首先要制作好需要使用的在制作具体的内容之前，首先要制作好需要使用的CSS样式文件，并在样式文件，并在XHTML中调用该文件。这样做可以将页面中调用该文件。这样做可以将页面结构部分

7、和表现修饰部分分离到两个文件中，便于后期的维结构部分和表现修饰部分分离到两个文件中，便于后期的维护。在护。在style文件夹中右击新建一个文本文档，然后更改名称文件夹中右击新建一个文本文档，然后更改名称为为“style.css”。20.3.2 20.3.2 定义页面的基础样式定义页面的基础样式新建页面之后，页面的默认标题为新建页面之后，页面的默认标题为“无标题文档无标题文档”，所以还需要将文档更改为更有意义的名称。另外为了更好的所以还需要将文档更改为更有意义的名称。另外为了更好的显示页面内容，以及辅助宣传页面，还需要修改和定义页面显示页面内容，以及辅助宣传页面，还需要修改和定义页面的文字编码、

8、的文字编码、标签等相关内容，其具体的代码如下标签等相关内容，其具体的代码如下所示。所示。20.4 20.4 制作页面头部制作页面头部在站点建立后，就可以制作在站点建立后，就可以制作CSS样式文件，并关联在样式文件，并关联在XHTML文件中。然后通过在文件中。然后通过在XHTML中，对每个元素定义中，对每个元素定义（或关联）不同的样式，制作页面的各个部分。按照最初规（或关联）不同的样式，制作页面的各个部分。按照最初规划的页面结构，整个页面分为头部内容、导航内容、主体内划的页面结构，整个页面分为头部内容、导航内容、主体内容、底部内容几个部分。本节讲解定义和关联容、底部内容几个部分。本节讲解定义和关

9、联CSS文件，以文件，以及页面头部内容的制作，其具体内容如下所示。及页面头部内容的制作，其具体内容如下所示。20.4.1 20.4.1 制作页面头部的结构制作页面头部的结构从效果图可以看到，页面头部的内容为两行文本，从效果图可以看到，页面头部的内容为两行文本，其中部分文本包含超级链接，为了更好的独立控制每个其中部分文本包含超级链接，为了更好的独立控制每个部分的显示效果，在制作结构的时候为各种内容定义了部分的显示效果，在制作结构的时候为各种内容定义了不同的不同的id，便于分别控制每个部分的显示效果，其具体，便于分别控制每个部分的显示效果，其具体的代码如下所示。的代码如下所示。20.4.2 20.

10、4.2 定义页面头部的样式定义页面头部的样式根据页面头部的结构，可以分析出头部的代码分为几个部分，根据页面头部的结构，可以分析出头部的代码分为几个部分，一部分是整体定义页面大小和背景的一部分是整体定义页面大小和背景的wrapper样式。样式。20.5 20.5 制作页面导航制作页面导航页面导航内容包括制作导航的结构、导航的背景、链页面导航内容包括制作导航的结构、导航的背景、链接样式等。在导航的样式中，首先要对各个元素进行精确定接样式等。在导航的样式中，首先要对各个元素进行精确定位。然后使用各种伪类和类选择符，制作出每个导航链接的位。然后使用各种伪类和类选择符，制作出每个导航链接的独立背景，以及

11、显示、隐藏效果。其具体内容如下所示。独立背景，以及显示、隐藏效果。其具体内容如下所示。20.5.1 20.5.1 制作页面导航的结构制作页面导航的结构页面导航条主要由一个页面导航条主要由一个元素和一个元素和一个元素嵌套元素嵌套而成。其中而成。其中元素用来制作导航部分的背景，元素用来制作导航部分的背景，元素元素用来制作导航条的具体内容。其具体的用来制作导航条的具体内容。其具体的XHTML代码如下所代码如下所示。示。20.5.2 20.5.2 定义页面导航的样式定义页面导航的样式导航的各种表现效果，主要通过在导航条的各个元素导航的各种表现效果，主要通过在导航条的各个元素中定义背景和伪类实现的。大体

12、可以分为两个部分，一部分中定义背景和伪类实现的。大体可以分为两个部分，一部分用来定义导航内容的位置和整体效果，另一部分用来定义每用来定义导航内容的位置和整体效果，另一部分用来定义每个导航鼠标悬停时候的转换效果。个导航鼠标悬停时候的转换效果。20.6 20.6 制作页面主体制作页面主体页面主体内容由日志内容和侧栏内容两个部分。由于页面主体内容由日志内容和侧栏内容两个部分。由于日志和侧栏部分的内容都由可能扩展，所以在制作的时候要日志和侧栏部分的内容都由可能扩展，所以在制作的时候要将高度定义为自动伸展。由于日志部分和侧栏内容都很多，将高度定义为自动伸展。由于日志部分和侧栏内容都很多，所以本节省略了这

13、两部分的制作，只讲解主体结构的制作方所以本节省略了这两部分的制作，只讲解主体结构的制作方法。法。20.6.1 20.6.1 制作页面主体的结构制作页面主体的结构在页面的主体内容中，由于导航部分的背景高度比较在页面的主体内容中，由于导航部分的背景高度比较高，所以要使用负的边界值，将内容向上移动。由于内容位高，所以要使用负的边界值，将内容向上移动。由于内容位置的原因，在日志部分和侧栏部分需要使用更复杂的嵌套结置的原因，在日志部分和侧栏部分需要使用更复杂的嵌套结构，其具体的构，其具体的XHTML代码如下所示。代码如下所示。20.6.2 20.6.2 定义页面主体内容的样式定义页面主体内容的样式页面主

14、体内容主要由页面主体使用的背景图片，以及页面主体内容主要由页面主体使用的背景图片，以及两个主要内容的位置显示效果构成的。其具体的代码如下所两个主要内容的位置显示效果构成的。其具体的代码如下所示。示。20.7 20.7 制作日志制作日志日志内容主要由几个重复的结构完成的，其中主要要日志内容主要由几个重复的结构完成的，其中主要要注意的问题是，控制各个区域的分隔距离。另外由于日志部注意的问题是，控制各个区域的分隔距离。另外由于日志部分是由几个部分组成的，所以还要为每个部分定义的文本不分是由几个部分组成的，所以还要为每个部分定义的文本不同的显示颜色。日志内容的具体制作过程如下所示。同的显示颜色。日志内

15、容的具体制作过程如下所示。20.7.1 20.7.1 制作日志内容的结构制作日志内容的结构日志结构分为日志结构分为3个部分，日志标题、日志内容、底部链个部分，日志标题、日志内容、底部链接。由于要对三个部分进行分隔和修饰，所以要各自使用独接。由于要对三个部分进行分隔和修饰，所以要各自使用独立的元素定义，其具体的立的元素定义，其具体的XHTML代码如下所示。代码如下所示。20.7.2 20.7.2 定义日志内容的样式定义日志内容的样式日志部分由三个部分组成，日志的标题、日志的内容、日志日志部分由三个部分组成，日志的标题、日志的内容、日志的相关信息，在每个部分中都需要定义文本的显示方式和位置，的相关

16、信息，在每个部分中都需要定义文本的显示方式和位置，其具体的代码如下所示。其具体的代码如下所示。20.8 20.8 制作侧栏制作侧栏侧栏内容用来显示相关的个人信息、友情链接、日志侧栏内容用来显示相关的个人信息、友情链接、日志分类等内容。在这部分内容中，分类等内容。在这部分内容中，CSS样式包括两个部分，一样式包括两个部分，一部分是通用的统一样式，另一部分是各个内容的独立样式。部分是通用的统一样式，另一部分是各个内容的独立样式。侧栏内容的具体制作方法如下所示。侧栏内容的具体制作方法如下所示。20.8.1 20.8.1 制作侧栏的结构制作侧栏的结构侧栏内容包括，个人档案、归档信息、友情链接、日侧栏内

17、容包括，个人档案、归档信息、友情链接、日志分类、推荐日志、统计信息等几个部分。其中每个部分都志分类、推荐日志、统计信息等几个部分。其中每个部分都是由标题、内容两个部分构成，根据内容的不同，所使用的是由标题、内容两个部分构成，根据内容的不同，所使用的结构由略有区别。结构由略有区别。20.8.2 20.8.2 定义侧栏的通用样式定义侧栏的通用样式侧栏的通用样式包括侧栏标题样式、侧栏文本样侧栏的通用样式包括侧栏标题样式、侧栏文本样式、侧栏链接样式等。这些样式都是每个侧栏内容都式、侧栏链接样式等。这些样式都是每个侧栏内容都要使用的样式。其中侧栏每个内容的整体控制，以及要使用的样式。其中侧栏每个内容的整

18、体控制，以及侧栏标题的显示效果是通下面的代码完成的，具体内侧栏标题的显示效果是通下面的代码完成的，具体内容如下所示。容如下所示。20.8.2 20.8.2 定义侧栏的通用样式定义侧栏的通用样式20.9 20.9 制作页面底部内容制作页面底部内容页面底部内容包括站点的相关信息、邮箱地址、欢迎页面底部内容包括站点的相关信息、邮箱地址、欢迎口号等。在制作页面底部内容的时候，只需要对各个文本和口号等。在制作页面底部内容的时候，只需要对各个文本和图片元素进行定位，同时定义好链接文本的显示效果即可。图片元素进行定位，同时定义好链接文本的显示效果即可。制作页面底部内容的具体步骤如下所示。制作页面底部内容的具

19、体步骤如下所示。20.9.1 20.9.1 制作页面底部的结构制作页面底部的结构页面底部内容主要由一些文本内容构成，在这里为了方便使用表格页面底部内容主要由一些文本内容构成，在这里为了方便使用表格制作了各种内容。其具体的代码如下所示。制作了各种内容。其具体的代码如下所示。客服论坛客服论坛    客服邮箱：客服邮箱：*24小时客服热线小时客服热线:*-*(人工人工8:00-24:00)Copyright©2009*Inc.All rights reserved.*网网 版权所有版权所有20.9.2 20.9.2 定义页面底部的样式定义页面底部的样式页面底部内容主要包括几个部分，首先是页面底页面底部内容主要包括几个部分，首先是页面底部的背景，然后是各个内容显示的位置，最后是各种部的背景，然后是各个内容显示的位置，最后是各种内容的颜色。内容的颜色。