网页设计基础第九章

1、第9章 网站制作综合实例9.1 网站规划建设网站之前就应该有一个整体的战略规划和目标，规划好网页的大致外观后就可以着手设计了。9.1.1 网站目标（1）网站的整体定位。（2）网站的主要内容。（3）网站浏览者的教育程度。9.1.2 内容组织（1）内容一定要紧扣主题。（2）设立一个最近更新栏目。（3）设立一个网页交互栏目，不需要很多，但一定要有。如班级论坛、访客留言等，能够让浏览者留下他们的信息。9.1.3 链接结构（1）树状链接结构。（2）星状链接结构。 9.1.4 网站风格无论是商业网站还是个人网站，要想使网页丰富多彩，吸引大量的访问者，网站风格的设计是至关重要的。站点风格设计包括设计站点的整

2、体色彩、网页的结构、文本的字体和大小、背景的使用等，这些没有一定的公式或规则，需要设计者通过各种分析决定。9.1.5 版面布局设计1.常见的网页版面布局类型网页的版面布局类型归纳起来有以下3种。1）“”型布局2）“”型布局3）其他布局9.1.5 版面布局设计2.版面布局设计要求版面布局设计要求归纳起来有以下4点：（1）整洁大方。（2）突出重点。（3）平衡对称。（4）风格一致。9.2 主页设计9.2.1制作主页图片稿通常一个网站的主页设计初稿都由网站美工人员或者艺术设计人员设计制作出的一张图片稿。专业的设计人员也许不是专业的网页制作人员，同样让网页制作人员完全替代美工设计的工作也是勉为其难。而且

3、，主页的设计样式往往需要多次修改才能满足前期策划的要求，中间可能会有很多个设计稿，如果对每个设计稿都制作成网页，浪费的人力物力也会相当大。主页图片稿通常使用Photoshop或网页制作三剑客之一的Fireworks进行制作，这取决于艺术设计人员的喜好。 9.2.2利用Fireworks对图片切片将图片导出为网页的操作步骤如下：（1）在Fireworks中执行“文件”“导出”命令，弹出“导出”对话框。（2）在“导出”下拉列表框中，选择“HTML和图像”选项，在HTML下拉列表框中选择“导出HTML文件”，选中“将图像放入子文件夹”复选框。（3）单击“导出”按钮，就可以将图片导出成为一个HTML网

4、页和一系列图片切片，这些切片会存放在指定的文件夹内，默认是与网页同目录下的images文件夹中。通过Fireworks的处理，一张主页的图片设计稿就变成了一个基本的网页形式了。下一步，就是网页制作的主要内容了。 9.2.3利用Dreamweaver制作主页主页制作步骤如下：（1）在Dreamweaver中创建一个新文档，将该文档与图像文件放于同一个站点目录下，打开布局模式，然后单击插入栏内的“布局表格”按钮.（2）使用“布局表格”功能在文档编辑区内绘制一个表格，该表格的宽度是根据页面设计时图像的宽度决定的。例如，在本例中，表格的宽度设置为800像素.（3）单击插入栏内的“绘制布局单元格”按钮，

5、根据图像的大小绘制出所有图像所在的单元格。（4）完成布局表格绘制之后，启用扩展表格模式观察表格效果，此时可以更清楚地看到表格效果。（5）绘制好布局表格后，将文档命名为“index.htm”并保存。 9.2.4插入图片完成布局表格绘制之后，在扩展表格模式下，在表格内逐一插入相应图像。9.3 编辑子页面9.4 设置超链接9.5 CSS样式的应用 对于整个网站的多个页面，如果利用CSS来控制样式，那么在网站改版和批量调整网站样式时会大大提高工作效率。一般使用插入链接的外部样式表来引入CSS样式，这只需要将对应的样式集中书写在样式表文件中，然后在每个网页的中加以引用即可。如果更换样式，只需要替换对应的

6、样式表文件即可，不需要对大量的网页进行逐一修改。9.6 添加JavaScript特效1、在主页中可以自动获取用户所在计算机的时间，并根据不同的访问时间，向用户发出不同的问候.JavaScript代码如下： var mess1=; day = new Date( ) hr = day.getHours( ) if ( hr = 0 ) & (hr = 4 ) & (hr = 7 ) & (hr = 12) & (hr = 13) & (hr = 18)& (hr = 23) mess1=晚上好！辛苦了一天了 alert(mess1);2、如果访问者没有填写留言内容或姓名，浏览器可以发出相应的提示

7、。JavaScript代码如下：function CheckForm()var Err;Err=;if(document.VisitorForm.VisitorName.value=)Err=Err+请输入您的姓名！n ;if(document.VisitorForm.Words.value = )Err=Err+请输入您的留言内容！;alert(Err);return false;9.7 测试检查与网站发布9.7.1 测试检查1.链接的检查与修复2.检查网页的兼容性 9.7.2 网站发布要进行网站发布，先要向Web服务器申请一个空间，就像买一套房子一样，在网上给自己的网站找一个“房间”，然后将网站放进去。申请空间通常有几种