博客首页制作方法.doc

今天我们来做第二张首页网页，首先我们先来分析下这个页面：这里也分为最上面的页眉部分，然后大的通栏部分，接着是分成两列的内容部分，左边分成三行，右边是相应的内容部分和最后的页脚整体页面看上去非常的简单，不是非常难，难点在：上面的斜角图片这里：所有的这些斜角图片我们要去给他定位，同时要定位到相应的位置上，这是如何做到的，这是一个难点第二根问题相对比较复杂的是：放大比例大家可以看到我们的框外面有灰框、白边再加灰边这三种不同的效果，这是怎么做的？这是多个嵌套的结果好了，现在 FW 里来作下切片然后就可以进入到两幅预览状态进行优化：LOGO: 优化为：gif 格式 精确三张小图片： jpg 的格式品质 80通栏大图片： jpg 的格式品质 60优化为：gif格式 精确字也是：gif 格式 精确页脚 LOGO: 优化为：gif 格式 精确按钮小切片：jpg 的格式品质 100背景小切片优化为：gif 格式 精确接着使用文件——导出：接着还要再这里单独再切一下斜角切片，单独处理它：将这个斜角选中 ：先将两个多边形的边角选中，选择修改菜单下的——片面化所选，接着选择位图工具里面的矩形选框将多余的地方删除：复制一下，新建一个画布，画布颜色点透明，切贴在里面，然后选择属性面板里的符合画布的命令将大小此存确定，然后选择文件——图像预览，进行优化： GIF 最适合 索引色透明导出保存在 img 文件里 起名叫：newwork同样的道理将设计教程也照刚才的办法进行优化保存。

保存起名叫教程：现在大家看那看还有没有需要切的地方：是不是整个大的背景？这个大的背景是不是带有一个渐变色？但是大家可以看到这么多东西把他盖住了，怎么办？打开我们的图层面板：隐藏页脚、内容、页眉 只显示背景，接着选择隐藏切片：只剩下背景，然后选择裁剪工具将这张图裁下来即可接着选择文件菜单下的——图像预览接着再用裁剪工具 裁出这么一小块：基本上我们都切完了这下就可以回到 DW 里面继续来添加内容页面的信息在站点里新建页面 1 的网页和相对应的 CSS 样式表在 public1.css 样式表写：body,html{ margin:0; padding:0; background:url(../img/bgtop.gif) repeat-x top;} repeat-x 水平重复 top局顶，保存刷新看效果整个页面有个背景颜色， 在 FW 将这个背景颜色吸取过来，#C4C0BFbody,html{body,html{ margin:0;margin:0; padding:0;padding:0; background:url(../img/bgtop.gif)background:url(../img/bgtop.gif) repeat-xrepeat-x toptop #C4C0BF;}#C4C0BF;} 整个页面的设置是不是就完成了，保存刷新看效果。

好紧接着回到源代码里面来，将基本样式写出来：在这里我们可以分为：页眉、内容、页脚三大部分 同时这三大部分是不是都是居中在页面中的，所以可以看成是一个大的内容包含了三个小内容：首先先来写居中的 DIV：id=“container“> containercontainer 容器的意思容器的意思好 所有的三大部分都坐在这个容器的里，因此复制黏贴修改内容 id 名称：id=“container“>id=“header“>id=“content“>id=“footer“>做做 containercontainer 大的容器里面的内容：大的容器里面的内容：进入 public1.css 样式表写：html{html{ background:url(../img/bgtop.gif)background:url(../img/bgtop.gif) repeat-xrepeat-x toptop #C4C0BF;}#C4C0BF;} 给个背景图片给个背景图片 不重复不重复 局顶局顶body{background:url(../img/bg.jpg)body{background:url(../img/bg.jpg) no-repeatno-repeat toptop center;}center;}#container{#container{ width:910px;width:910px; margin:0margin:0 auto;}auto;}宽度宽度 910910 居中居中保存刷新看效果。

接下来写 header：#header{#header{ width:910px;width:910px; height:100px;height:100px; padding-top:20px;}padding-top:20px;} 保存刷新看效果接着在里面分左边的图片加文字，右边的文字链接进入源代码，先来加这个 LOGO 图片：在id=“header“>里加：：将 LOGO 图片连接进来，起名叫“LOGO” 边框为 0 同时 LOGO 下面的文字我们可以把它看作是一个标题 最小字号的标题:border=“0“/>网页效果图设计资源和教程网页效果图设计资源和教程接着写右边的无序列表的链接文字：一共是 5 个不同的列表内容，在标签里写上文字内容，然后复制四次，分别修改文字内容即可：href=“#“>作品赏析作品赏析href=“#“>设计服务设计服务href=“#“>关于我们关于我们href=“#“>联系方式联系方式href=“#“>交流论坛交流论坛保存刷新看效果这样我们的基本设置就做好了接下来进入到 public.css 代码区来将定位置、大小和样式进行定义就可以了先来定义的文字颜色和大小：灰色在 FW 里面来吸取同时通过观察大家也可以发现网页里的大部分文字是不是都是这个灰色的，因此可以把它写道公用样式里的body,htmlbody,html来定义：body,html{body,html{ margin:0;margin:0; padding:0;padding:0; color:#827D79;color:#827D79; font:12font:12 pxpx “ “宋体宋体“;}“;}接着来定义下的文字大小和位置：取消加粗、字体 14px 距离外补丁顶部为 5px：#header#header h6{h6{ font-weight:normal;font-weight:normal; font-size:14px;font-size:14px; margin-margin-top:7px;}top:7px;}接着定义无序列表里面的文字效果“首先列表是没有前面的圆点，内外补丁均为：0#header#header ul{ul{ list-style:none;list-style:none; margin:0;margin:0; padding:0;}padding:0;}然后链接字体为块级别元素，使他全部向左浮动，上下左右的外补丁为：0 15px 0 10px 字体无下划线 当前颜色为 灰色：#header#header ulul li{li{ float:left;float:left; margin:0margin:0 15px15px 0 0 10px;}10px;}#header#header ulul a{text-decoration:none;a{text-decoration:none; font-weight:600;font-weight:600; color:#827D79;}color:#827D79;}接着为按下以后的文字颜色：加一个伪类在里面：修改颜色即可#header#header ulul a:hover{a:hover{ color:#000;}color:#000;}最后把它放到右上角就可以了：我们在这里要回到#header#header｛｝里给他一个｛｝里给他一个position:relativeposition:relative 相对定位才可以：相对定位才可以：#header{#header{ width:910px;width:910px; height:100px;height:100px; padding-top:20px;padding-top:20px; position:relative;}position:relative;}然后进入到#header#header ul{ul{ } } 里面进行位置调整：里面进行位置调整：position:position: absolute;absolute; top:25px;top:25px; right:0px;}right:0px;}：：#header#header ul{ul{ list-style:none;list-style:none; margin:0;margin:0; padding:0;padding:0; position:position: absolute;absolute; top:25px;top:25px; right:0px;}right:0px;} 保存刷新看效果。

这样就做好了页眉部分接着来做通栏的部分，也就是相当于在内容的上面多了这个部分：那么这个通 栏区域的最外层有个深灰色的边框，里面有一个白边框再往里面才是内容，那 么这个怎么做？进入源代码，在我们的 content 前面来进行代码书写：先对这个通栏进行一个设置，这个在本网页中是特有的效果，因此进入到 shouye01.css 样式表区域来书写： 宽度 908 ，高度 320 像素，背景颜色白色， 边框 1 像素，实线 进入到 FW 吸取边框的灰色:#tonglan{ width:908px; height:318px; background:#FFF; border:1px solid #A3A2A0;} 保存刷新看效果然后我们在通栏里边还需要再做一个嵌套：回到源代码inner 内容的意思、接着回到 shouye01.css 样式表区域来书写：#inner{#inner{ width:908px;width:908px; height:318px;}height:318px;} 在这里大家要注意我们有在这里大家要注意我们有一个背景没有切，因此我们回到一个背景没有切，因此我们回到 FWFW 把他切一下即可，选择裁切工具：把他切一下即可，选择裁切工具：再回到 shouye01.css 样式表区域来书写：#inner{#inner{ width:908px;width:908px; height:318px;height:318px; background:url(../img/neirong34.jpg)background:url(../img/neirong34.jpg) repeat-x;}repeat-x;}然后我们要给塔加一个白边，那么需要相应的减掉宽和高，同时去掉#tonglan{}里的里的 background:#FFF; 背景白色背景白色：#tonglan{#tonglan{ width:908px;width:908px; height:318px;height:318px; border:1pxborder:1px solidsolid #A3A2A0;}#A3A2A0;}#inner{#inner{ width:906px;width:906px; height:316px;height:316px; border:1pxborder:1px solidsolid #FFF;background:url(../img/neirong34.jpg)#FFF;background:url(../img/ne。