1.4 设计网页的总体流程
对于网站来说，除了放置网页内容外，还要对网站进行整体规划设计。格局凌乱的网站内容再精彩，也不能说是一个好网站。要设计出一个精美的网站，前期的规划是必不可少的。
1.4.1 网页规划
规划站点就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。规划站点就是对站点中所使用的素材和资料进行管理和规划，对网站中栏目的设置、颜色的搭配、版面的设计、文字图片的运用等进行规划。
一般情况下，将站点中所用的图片和按钮等图形元素放在Images文件夹中，HTML文件放在根目录下，而动画和视频等放在Flash文件夹中。对站点中的素材进行详细的规划，便于日后管理。
1.4.2 搜集资料
确定了网站风格和布局后，就要开始搜集素材了。常言道：“巧妇难为无米之炊”，要让自己的网站有声有色、能吸引人，就要尽量搜集素材，素材包括文字、图片、音频、动画及视频等。搜集到的素材越充分，制作的网站就越漂亮。素材既可以从图书、报刊、光盘及多媒体上得来，也可以从网上搜集，还可以自己制作，然后把搜集到的素材去粗取精，选出制作网页所需的素材。如图1-10所示，就是百度图库里面的精彩图片。
图1-10 搜索素材图片
不过，在搜集图片素材时，一定要注意图片的大小，因为在网络中传输时，图片的容量越小，传输的速度就越快，所以应尽量搜集容量小、画面精美的图片。
1.4.3 设计网页的总体效果
制作网页是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂的顺序来制作。所谓先大后小，就是在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。所谓先简单后复杂，就是先设计出简单的内容，然后再设计复杂的内容，以便出现问题能及时修改。使用Photoshop可以设计网页的总体效果。如图1-11所示，就是使用Photoshop制作出的网页效果。
图1-11 网页总体效果图
1.4.4 制作网页素材文件
在得到网页的总体效果后，还需要通过切图，得到网页素材文件。最常用的切图工具还是Photoshop，在掌握切图原则后，就可以动手实际操作了。
切图并保存素材文件的操作步骤如下。
step 01 打开Photoshop软件，在工作界面中选择【文件】|【打开】菜单命令，在打开的对话框中选择制作好的网页总体效果图，如图1-12所示。
图1-12 网页效果图
step 02 在工具箱中单击【切片工具】按钮
，根据需要在网页中选择需要切割的图片，如图1-13所示。
图1-13 开始进行切片
step 03 选择【文件】|【存储为Web所用格式】菜单命令，打开【存储为Web和设备所用格式】对话框，在其中选中所有的切片图像，如图1-14所示。
图1-14 【存储为Web和设备所用格式】对话框
step 04 单击【存储】按钮，即可打开【将优化结果存储为】对话框，在【切片】下拉列表框中选择【所有切片】选项，如图1-15所示。
图1-15 【将优化结果存储为】对话框
step 05 单击【保存】按钮，即可将所有切片中的图像保存起来，如图1-16所示。
图1-16 保存的切片图像
提示
在切图过程中，如果有格式一致的重复项，我们只需切一次，其他重复项可以通过调整table表格，使其正常。这样做的好处有两点，一是避免重复劳动，二是保证每个重复项表格图片大小一致。
1.4.5 搭建网页DIV层
开发网站的首要任务就是搭建网页DIV层，搭建DIV层的方法是在HTML里的body部分，先用一些空白的DIV层，说明某个位置应该放某个特定的模块，如图1-17所示。我们通过Photoshop得到了网页的整体效果后，下面就可以在HTML页面中，用DIV搭建起其中的“产品分类”“联系我们”“友情链接”等模块，最后再向DIV层添加相应的内容就可以实现效果了。
图1-17 DIV效果演示
1.4.6 使用CSS与JavaScript
搭建好网页的DIV层后，就能在网页中通过HTML标签来定义页面的效果。在搭建的过程中，需要使用CSS来定义样式，用JavaScript来定义动态的效果。
CSS的作用主要是定义网页中的各个部分以及元素的样式，比如图片的大小、文字的显示方式、边框的样式等。
JavaScript的作用主要是定义网页动态效果，通过JavaScript的设置，可以使网页变得更加灵活、亲切，能够吸引更多的眼球。如图1-18所示，在页面中添加了JavaScript效果，实现的效果就是图片自动循环切换。
图1-18 某页面添加JavaScript效果
1.4.7 测试网页
网页制作完毕后，上传网站之前，要在浏览器中打开网站，逐一对站点中的网页进行测试，发现问题要及时修改，然后再上传。
1. 文字、图片的测试
网页的主要元素就是文字与图片，在网页中，适当的图片和动画既能起到广告宣传的作用，又能起到美化页面的作用。一个网页的元素可以包括图片、动画、边框、颜色、字体、背景、按钮等。测试的内容主要包括以下几个部分。
（1）要确保图形有明确的用途，图片或动画不要凌乱地堆在一起，以免浪费传输时间。
（2）验证所有页面字体的风格是否一致，以及文字表述信息是否有误。
（3）背景颜色应该与字体颜色和前景颜色相搭配。
（4）图片的大小和质量也是一个很重要的因素，一般采用JPG或GIF压缩。
2. 测试链接
一个网页中一般存在多个超级链接，测试链接的主要内容可分为以下三个方面。
（1）测试所有链接是否按指示的那样确实链接到了该链接的页面。
（2）测试所链接的页面是否存在。
（3）保证Web应用系统上没有孤立的页面，所谓孤立页面是指没有链接指向该页面，只有知道正确的URL地址才能访问。
3. 浏览器兼容性测试
浏览器是Web客户端最核心的构件，来自不同厂商的浏览器对Java、JavaScript、ActiveX、 plug-ins或不同的HTML规格有不同的支持。例如，ActiveX是Microsoft公司的产品，是为Internet Explorer而设计的，JavaScript是Netscape公司的产品，Java是Sun公司的产品，等等。另外，框架和层次结构风格在不同的浏览器中也有不同的显示，甚至根本不显示。不同的浏览器对安全性和Java的设置也不一样。
测试浏览器兼容性的一个方法是创建一个兼容性矩阵。在这个矩阵中，测试不同厂商、不同版本的浏览器对某些构件和设置的适应性。