制作个人博客页面PPT课件

1、制作个人博客页面PPT 精品文档优质文档 仅供学习 精品文档优质文档 仅供学习20.1 制作页面前的准备工作在制作具体页面之前，先要对页面进行大体的规划，这个规划可以帮助确定页面的大体结构，这个步骤一般在头脑中进行，可以不必显示在效果图上。在页面区块大概构思完成后，使用Photoshop的切片工具对页面进行切割，在切割的过程中制作出页面的背景等修饰图片。20.1.1 规划页面的内容页面结构的规划是制作整个页面的基础，好的页面规划能够使页面更具有扩展性，能够适应页面内容的变化。在规划页面的时候，首先区分割页面为几个部分，例如Logo、Banner、导航条、侧栏等内容。然后在各个部分中切出内容和背

2、景。20.1.1 规划页面的内容20.1.2 切分效果图在Photoshop中首先区分页面中的修饰图片和内容图片。然后将页面中的文本内容等隐藏，根据构思的页面区块，切割出背景图片和内容图片。最后将各种图片内容保存在磁盘的某个文件夹中。从软件保存后的的图片，都会默认的使用编号的格式定义图片的名称。20.2 规划站点文件夹准备好各种页面文件之后，需要做的是制作好站点的各种文件夹。通常各种图片文件都放在名称为images的文件夹中。样式表文件单独放在一个名称为style的文件夹中。站点的首页一般命名为“default”，并保存在根文件夹下。此时，站点的目录结构，如图20-3所示。20.3 定义基本的

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

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

5、两行文本，其中部分文本包含超级链接，为了更好的独立控制每个部分的显示效果，在制作结构的时候为各种内容定义了不同的id，便于分别控制每个部分的显示效果，其具体的代码如下所示。20.4.2 定义页面头部的样式根据页面头部的结构，可以分析出头部的代码分为几个部分，一部分是整体定义页面大小和背景的wrapper样式。20.5 制作页面导航页面导航内容包括制作导航的结构、导航的背景、链接样式等。在导航的样式中，首先要对各个元素进行精确定位。然后使用各种伪类和类选择符，制作出每个导航链接的独立背景，以及显示、隐藏效果。其具体内容如下所示。20.5.1 制作页面导航的结构页面导航条主要由一个元素和一个元素嵌

6、套而成。其中元素用来制作导航部分的背景，元素用来制作导航条的具体内容。其具体的XHTML代码如下所示。20.5.2 定义页面导航的样式导航的各种表现效果，主要通过在导航条的各个元素中定义背景和伪类实现的。大体可以分为两个部分，一部分用来定义导航内容的位置和整体效果，另一部分用来定义每个导航鼠标悬停时候的转换效果。20.6 制作页面主体页面主体内容由日志内容和侧栏内容两个部分。由于日志和侧栏部分的内容都由可能扩展，所以在制作的时候要将高度定义为自动伸展。由于日志部分和侧栏内容都很多，所以本节省略了这两部分的制作，只讲解主体结构的制作方法。20.6.1 制作页面主体的结构在页面的主体内容中，由于导

7、航部分的背景高度比较高，所以要使用负的边界值，将内容向上移动。由于内容位置的原因，在日志部分和侧栏部分需要使用更复杂的嵌套结构，其具体的XHTML代码如下所示。20.6.2 定义页面主体内容的样式页面主体内容主要由页面主体使用的背景图片，以及两个主要内容的位置显示效果构成的。其具体的代码如下所示。20.7 制作日志日志内容主要由几个重复的结构完成的，其中主要要注意的问题是，控制各个区域的分隔距离。另外由于日志部分是由几个部分组成的，所以还要为每个部分定义的文本不同的显示颜色。日志内容的具体制作过程如下所示。20.7.1 制作日志内容的结构日志结构分为3个部分，日志标题、日志内容、底部链接。由于

8、要对三个部分进行分隔和修饰，所以要各自使用独立的元素定义，其具体的XHTML代码如下所示。20.7.2 定义日志内容的样式日志部分由三个部分组成，日志的标题、日志的内容、日志的相关信息，在每个部分中都需要定义文本的显示方式和位置，其具体的代码如下所示。20.8 制作侧栏侧栏内容用来显示相关的个人信息、友情链接、日志分类等内容。在这部分内容中，CSS样式包括两个部分，一部分是通用的统一样式，另一部分是各个内容的独立样式。侧栏内容的具体制作方法如下所示。20.8.1 制作侧栏的结构侧栏内容包括，个人档案、归档信息、友情链接、日志分类、推荐日志、统计信息等几个部分。其中每个部分都是由标题、内容两个部

9、分构成，根据内容的不同，所使用的结构由略有区别。20.8.2 定义侧栏的通用样式侧栏的通用样式包括侧栏标题样式、侧栏文本样式、侧栏链接样式等。这些样式都是每个侧栏内容都要使用的样式。其中侧栏每个内容的整体控制，以及侧栏标题的显示效果是通下面的代码完成的，具体内容如下所示。20.8.2 定义侧栏的通用样式20.9 制作页面底部内容页面底部内容包括站点的相关信息、邮箱地址、欢迎口号等。在制作页面底部内容的时候，只需要对各个文本和图片元素进行定位，同时定义好链接文本的显示效果即可。制作页面底部内容的具体步骤如下所示。20.9.1 制作页面底部的结构页面底部内容主要由一些文本内容构成，在这里为了方便使用表格制作了各种内容。其具体的代码如下所示。 客服论坛客服邮箱：*.com24小时客服热线:*-*(人工8:00-24:00)Cop