网页设计与制作教：（DIV+CSS初级仿制百度）

         DIV+CSS的初步了解 呵呵，今天我就来简单的给大家说一下用DIV+CSS来制做网页。 在制做的时候是有个前提的，对HTML和CSS标记一定要知道，当然，像我们这样的初学者，最好把常用的给记下来就OK了，用不着记那么多，基本上用不了那么多，最好是准备一些参考书，这样学起来方便一些。         什么是DIV+CSS，在很多人才网上看到，100%招聘网页设计师和网站美工的都得会使用DIV+CSS，DIV是什么，CSS是什么，现在给大家简单的说一下，DIV是html中一组标记和其它标记一样，也是以<div>和</div>结束,那中间是放会么东西的，中间就是我们要和的内容，我们知道，以前做网页都是用表格来制做，表格中放入图片，文本等内容，现在呢，将表格换成了DIV，换成DIV有什么好处呢，这个很简单，我们来简单的说一下，我们知道计算机程序是从程序的开始部分依次往下读的，就好像我们读文章一样，从最前面开始，你不可能从最后面开始读，对吧，那样很多意思就变了，计算机和人是一样的，我们制做一个网页发布到网上，当客户访问这个页面的时候，这时候客户的IE就会读取网页html语言代码，一行一行的读，读到一个表格就显示一个表格，大家想一个在一个表格中存在多个单元格，而在单元格中可能还会有很多表格，你这样想下去，你想一下有多复杂，自然而然就降低了IE读代码的速度，造成网页访问速度慢等问题，有没有会么方法可以解决这一问题，DIV就可以解决，DIV和表格不同的是，DIV排出来的线框是不会显示出来的，大小1像素，单元格可不是1px了，随然我们设置的是1px但是效果明显不如DIV，就这样DIV成了主流。

       CSS是什么？层叠样式表，它的作用就是为网页中的对像提供控制属性，比如，我们在一个网页中加入5个DIV，然后我们可以对这5个DIV进行不同的设置，把第一个DIV换成红色，其它的换成绿色，橙色，青色等，当然这点表格也可以同样做的到，但是效果不是那么好。（这里可以给大家提供个学习CSS的地方，就是百度博客，百度博客支持自己制做模板，我们只要在本地做出来就可以了，图片全部上传到百度像册，得到网络图片路径，再修改一个CSS中的图片路径，即可，）  下面我们就开始在本地进行测试学习，本章主要是学习DIV+CSS组合来排版网页，最后会教大家制做网站整站模板。 准备:DW CS3,PS CS3,记事本 注:DW,就是我们常说到的Dramwerver,这里用CS3版本,当然共它版本也可以,PS,有名的Photoshop这里也用CS版本,当然电脑可以的同志们可以考虑一下用最新版CS4.我这里就用CS版本来做演示. 制做入门级的网页(仿制百度) 现在我们就用CSS+DIV来仿制一个百度的主页,先热下身,http://www.baidu.com由于本章是手工制做,我们只做参考百度,网页整体设计流程步骤: 素材制做:打开百度网,首页非常简洁明了,制做起来也没那么多步骤,学习起来相对来说是最简单的一个。

        步骤一:分析，分析我们要做的页面的大小，800*600，1024*768，尽量不要出现右边滚动条，这一点大家一定要注意，我们登陆QQ，上线以后，打开百度网页，按ctrl+alt+A,测试一下百度内容区域有多大，（拖拉一个区域会在左上角显示大小，注意看）基本上500*500的区域,图片只有一张，右击百度logo，这时候不要动，看到图片的边框没有，已经出现了，观察图片和地址栏的距离，大约有1CM，其它地方不用动，再看一下，右击百度logo，点击属性，看一下这张图片的大小270*129的，GIF图片，网站文字的颜色，蓝色，观察点击时的四种状态，右击查看源代码发现是：a{color:#00c}a:active{color:#f60}，OK，必要的条件我们已经知道了，接下来就是我们手工制做页面排版布局。 步骤二：打开PS，做LOGO，画布大小是270*129,当然你可以自己设定大小，内容由你充分发挥想像力来设计 内容更新中….

本文来源 我爱IT技术网 http://www.52ij.com/jishu/128.html 转载请保留链接。