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

,Click to edit Master title style,Click to edit Master text styles,第20章 制作个人博客页面,个人博客页面用来展示个人的一些信息、日志以及个人的图片等等，是一个方便的展示平台。个人博客页面的设计和制作都比较自由。具体的制作过程包括以下几个步骤，制作页面效果图，这个部分通常使用Photoshop完成。然后再使用Photoshop的切片工具，将效果图的各个部分制成图片。最后在Dreamweaver中制作成网页。,第20章 制作个人博客页面个人博客页面用来展示个人的一些信,20.1 制作页面前的准备工作,在制作具体页面之前，先要对页面进行大体的规划，这个规划可以帮助确定页面的大体结构，这个步骤一般在头脑中进行，可以不必显示在效果图上。在页面区块大概构思完成后，使用Photoshop的切片工具对页面进行切割，在切割的过程中制作出页面的背景等修饰图片。,20.1 制作页面前的准备工作在制作具体页面之前，先要对页,20.1.1 规划页面的内容,页面结构的规划是制作整个页面的基础，好的页面规划能够使页面更具有扩展性，能够适应页面内容的变化。在规划页面的时候，首先区分割页面为几个部分，例如Logo、Banner、导航条、侧栏等内容。然后在各个部分中切出内容和背景。,20.1.1 规划页面的内容页面结构的规划是制作整个页面的,20.1.1 规划页面的内容,20.1.1 规划页面的内容,20.1.2 切分效果图,在Photoshop中首先区分页面中的修饰图片和内容图片。然后将页面中的文本内容等隐藏，根据构思的页面区块，切割出背景图片和内容图片。最后将各种图片内容保存在磁盘的某个文件夹中。从软件保存后的的图片，都会默认的使用编号的格式定义图片的名称。,20.1.2 切分效果图在Photoshop中首先区分页面,20.2 规划站点文件夹,准备好各种页面文件之后，需要做的是制作好站点的各种文件夹。通常各种图片文件都放在名称为images的文件夹中。样式表文件单独放在一个名称为style的文件夹中。站点的首页一般命名为“default”，并保存在根文件夹下。此时，站点的目录结构，如图20-3所示。,20.2 规划站点文件夹准备好各种页面文件之后，需要做的是,20.3 定义基本的样式,在站点建立后，就可以制作CSS样式文件，并关联在XHTML文件中。然后通过在XHTML中，对每个元素定义（或关联）不同的样式，制作页面的各个部分。按照最初规划的页面结构，整个页面分为头部内容、导航内容、主体内容、底部内容几个部分。本节讲解定义和关联CSS文件，以及页面头部内容的制作，其具体内容如下所示。,20.3 定义基本的样式在站点建立后，就可以制作CSS样式,20.3.1 新建CSS文件,在制作具体的内容之前，首先要制作好需要使用的CSS样式文件，并在XHTML中调用该文件。这样做可以将页面结构部分和表现修饰部分分离到两个文件中，便于后期的维护。在style文件夹中右击新建一个文本文档，然后更改名称为“style.css”。,20.3.1 新建CSS文件在制作具体的内容之前，首先要制,20.3.2 定义页面的基础样式,新建页面之后，页面的默认标题为“无标题文档”，所以还需要将文档更改为更有意义的名称。另外为了更好的显示页面内容，以及辅助宣传页面，还需要修改和定义页面的文字编码、标签等相关内容，其具体的代码如下所示。,20.3.2 定义页面的基础样式新建页面之后，页面的默认标,20.4 制作页面头部,在站点建立后，就可以制作CSS样式文件，并关联在XHTML文件中。然后通过在XHTML中，对每个元素定义（或关联）不同的样式，制作页面的各个部分。按照最初规划的页面结构，整个页面分为头部内容、导航内容、主体内容、底部内容几个部分。本节讲解定义和关联CSS文件，以及页面头部内容的制作，其具体内容如下所示。,20.4 制作页面头部在站点建立后，就可以制作CSS样式文,20.4.1 制作页面头部的结构,从效果图可以看到，页面头部的内容为两行文本，其中部分文本包含超级链接，为了更好的独立控制每个部分的显示效果，在制作结构的时候为各种内容定义了不同的id，便于分别控制每个部分的显示效果，其具体的代码如下所示。,20.4.1 制作页面头部的结构从效果图可以看到，页面头部,20.4.2 定义页面头部的样式,根据页面头部的结构，可以分析出头部的代码分为几个部分，一部分是整体定义页面大小和背景的wrapper样式。,20.4.2 定义页面头部的样式根据页面头部的结构，可以分,20.5 制作页面导航,页面导航内容包括制作导航的结构、导航的背景、链接样式等。在导航的样式中，首先要对各个元素进行精确定位。然后使用各种伪类和类选择符，制作出每个导航链接的独立背景，以及显示、隐藏效果。其具体内容如下所示。,20.5 制作页面导航页面导航内容包括制作导航的结构、导航,20.5.1 制作页面导航的结构,页面导航条主要由一个元素和一个元素嵌套而成。其中元素用来制作导航部分的背景，元素用来制作导航条的具体内容。其具体的XHTML代码如下所示。,20.5.1 制作页面导航的结构页面导航条主要由一个di,20.5.2 定义页面导航的样式,导航的各种表现效果，主要通过在导航条的各个元素中定义背景和伪类实现的。大体可以分为两个部分，一部分用来定义导航内容的位置和整体效果，另一部分用来定义每个导航鼠标悬停时候的转换效果。,20.5.2 定义页面导航的样式导航的各种表现效果，主要通,20.6 制作页面主体,页面主体内容由日志内容和侧栏内容两个部分。由于日志和侧栏部分的内容都由可能扩展，所以在制作的时候要将高度定义为自动伸展。由于日志部分和侧栏内容都很多，所以本节省略了这两部分的制作，只讲解主体结构的制作方法。,20.6 制作页面主体页面主体内容由日志内容和侧栏内容两个,20.6.1 制作页面主体的结构,在页面的主体内容中，由于导航部分的背景高度比较高，所以要使用负的边界值，将内容向上移动。由于内容位置的原因，在日志部分和侧栏部分需要使用更复杂的嵌套结构，其具体的XHTML代码如下所示。,20.6.1 制作页面主体的结构在页面的主体内容中，由于导,20.6.2 定义页面主体内容的样式,页面主体内容主要由页面主体使用的背景图片，以及两个主要内容的位置显示效果构成的。其具体的代码如下所示。,20.6.2 定义页面主体内容的样式页面主体内容主要由页面,20.7 制作日志,日志内容主要由几个重复的结构完成的，其中主要要注意的问题是，控制各个区域的分隔距离。另外由于日志部分是由几个部分组成的，所以还要为每个部分定义的文本不同的显示颜色。日志内容的具体制作过程如下所示。,20.7 制作日志日志内容主要由几个重复的结构完成的，其中,20.7.1 制作日志内容的结构,日志结构分为3个部分，日志标题、日志内容、底部链接。由于要对三个部分进行分隔和修饰，所以要各自使用独立的元素定义，其具体的XHTML代码如下所示。,20.7.1 制作日志内容的结构日志结构分为3个部分，日志,20.7.2 定义日志内容的样式,日志部分由三个部分组成，日志的标题、日志的内容、日志的相关信息，在每个部分中都需要定义文本的显示方式和位置，其具体的代码如下所示。,20.7.2 定义日志内容的样式日志部分由三个部分组成，日,20.8 制作侧栏,侧栏内容用来显示相关的个人信息、友情链接、日志分类等内容。在这部分内容中，CSS样式包括两个部分，一部分是通用的统一样式，另一部分是各个内容的独立样式。侧栏内容的具体制作方法如下所示。,20.8 制作侧栏侧栏内容用来显示相关的个人信息、友情链接,20.8.1 制作侧栏的结构,侧栏内容包括，个人档案、归档信息、友情链接、日志分类、推荐日志、统计信息等几个部分。其中每个部分都是由标题、内容两个部分构成，根据内容的不同，所使用的结构由略有区别。,20.8.1 制作侧栏的结构侧栏内容包括，个人档案、归档信,20.8.2 定义侧栏的通用样式,侧栏的通用样式包括侧栏标题样式、侧栏文本样式、侧栏链接样式等。这些样式都是每个侧栏内容都要使用的样式。其中侧栏每个内容的整体控制，以及侧栏标题的显示效果是通下面的代码完成的，具体内容如下所示。,20.8.2 定义侧栏的通用样式侧栏的通用样式包括侧栏标题,20.8.2 定义侧栏的通用样式,20.8.2 定义侧栏的通用样式,20.9 制作页面底部内容,页面底部内容包括站点的相关信息、邮箱地址、欢迎口号等。在制作页面底部内容的时候，只需要对各个文本和图片元素进行定位，同时定义好链接文本的显示效果即可。制作页面底部内容的具体步骤如下所示。,20.9 制作页面底部内容页面底部内容包括站点的相关信息、,20.9.1 制作页面底部的结构,页面底部内容主要由一些文本内容构成，在这里为了方便使用表格制作了各种内容。其具体的代码如下所示。,客服论坛 2009*.com Inc.All rights reserved.*网 版权所有,20.9.1 制作页面底部的结构页面底部内容主要由一些文本,20.9.2 定义页面底部的样式,页面底部内容主要包括几个部分，首先是页面底部的背景，然后是各个内容显示的位置，最后是各种内容的颜色。,20.9.2 定义页面底部的样式页面底部内容主要包括几个部,