博客首页制作方法

ID：14493766

大小：1.96 MB

页数：23页

时间：2018-07-29

资源描述：

《博客首页制作方法》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、今天我们来做第二张首页网页，首先我们先来分析下这个页面：这里也分为最上面的页眉部分，然后大的通栏部分，接着是分成两列的内容部分，左边分成三行，右边是相应的内容部分和最后的页脚。整体页面看上去非常的简单，不是非常难，难点在：上面的斜角图片这里：所有的这些斜角图片我们要去给他定位，同时要定位到相应的位置上，这是如何做到的，这是一个难点。第二根问题相对比较复杂的是：放大比例大家可以看到我们的框外面有灰框、白边再加灰边这三种不同的效果，这是怎么做的？这是多个

嵌套的结果。好了，现在FW里来作下切片然后就可以进入到两幅预览状态进行优化：LOGO:优化

2、为：gif格式精确三张小图片：jpg的格式品质80通栏大图片：jpg的格式品质60优化为：gif格式精确字也是：gif格式精确页脚LOGO:优化为：gif格式精确按钮小切片：jpg的格式品质100背景小切片优化为：gif格式精确接着使用文件——导出：接着还要再这里单独再切一下斜角切片，单独处理它：将这个斜角选中：先将两个多边形的边角选中，选择修改菜单下的——片面化所选，接着选择位图工具里面的矩形选框将多余的地方删除：复制一下，新建一个画布，画布颜色点透明，切贴在里面，然后选择属性面板里的符合画布的命令将大小此存确定，然后选择文件——图像预览，进行优

3、化：GIF最适合索引色透明导出保存在img文件里起名叫：newwork同样的道理将设计教程也照刚才的办法进行优化保存。保存起名叫教程：现在大家看那看还有没有需要切的地方：是不是整个大的背景？这个大的背景是不是带有一个渐变色？但是大家可以看到这么多东西把他盖住了，怎么办？打开我们的图层面板：隐藏页脚、内容、页眉只显示背景，接着选择隐藏切片：只剩下背景，然后选择裁剪工具。将这张图裁下来即可接着选择文件菜单下的——图像预览接着再用裁剪工具裁出这么一小块：基本上我们都切完了。这下就可以回到DW里面继续来添加内容页面的信息。在站点里新建页面1的网页和相对应的

4、CSS样式表在public1.css样式表写：body,html{margin:0;padding:0;background:url(../img/bgtop.gif)repeat-xtop;}repeat-x水平重复top局顶，保存刷新看效果。整个页面有个背景颜色，在FW将这个背景颜色吸取过来，#C4C0BFbody,html{margin:0;padding:0;background:url(../img/bgtop.gif)repeat-xtop#C4C0BF;}整个页面的设置是不是就完成了，保存刷新看效果。好紧接着回到源代码里面来，将基本样

5、式写出来：在这里我们可以分为：页眉、内容、页脚三大部分同时这三大部分是不是都是居中在页面中的，所以可以看成是一个大的内容包含了三个小内容：首先先来写居中的DIV：

container容器的意思好所有的三大部分都坐在这个容器的

里，因此复制黏贴修改内容id名称：

6、container大的容器里面的内容：进入public1.css样式表写：html{background:url(../img/bgtop.gif)repeat-xtop#C4C0BF;}给个背景图片不重复局顶body{background:url(../img/bg.jpg)no-repeattopcenter;}#container{width:910px;margin:0auto;}宽度910居中保存刷新看效果。接下来写header：#header{width:910px;height:100px;padding-top:20px;}保存刷新

7、看效果。接着在里面分左边的图片加文字，右边的文字链接。进入源代码，先来加这个LOGO图片：在

博客首页制作方法

博客首页制作方法

网页效果图设计资源和教程

相关文章

相关标签