网页设计基础第九章.ppt

1、9.1 9.1 网站规划网站规划建设网站之前就应该有一个整体的战略规划和目标，规划好网页建设网站之前就应该有一个整体的战略规划和目标，规划好网页的大致外观后就可以着手设计了。的大致外观后就可以着手设计了。9.1.1 9.1.1 网站目标网站目标（1）网站的整体定位。）网站的整体定位。（2）网站的主要内容。）网站的主要内容。（3）网站浏览者的教育程度。）网站浏览者的教育程度。9.1.2 9.1.2 内容组织内容组织（1）内容一定要紧扣主题。）内容一定要紧扣主题。（2）设立一个最近更新栏目。）设立一个最近更新栏目。（3）设立一个网页交互栏目，不需要很多，但一定要有。如班级论坛、）设立一个网页交互栏

2、目，不需要很多，但一定要有。如班级论坛、访客留言等，能够让浏览者留下他们的信息。访客留言等，能够让浏览者留下他们的信息。9.1.3 9.1.3 链接结构链接结构（1）树状链接结构。）树状链接结构。（2）星状链接结构。）星状链接结构。9.1.4 9.1.4 网站风格网站风格无论是商业网站还是个人网站，要想使网页丰富多彩，吸引大量的访问无论是商业网站还是个人网站，要想使网页丰富多彩，吸引大量的访问者，网站风格的设计是至关重要的。站点风格设计包括设计站点的整体者，网站风格的设计是至关重要的。站点风格设计包括设计站点的整体色彩、网页的结构、文本的字体和大小、背景的使用等，这些没有一定色彩、网页的结构、

3、文本的字体和大小、背景的使用等，这些没有一定的公式或规则，需要设计者通过各种分析决定。的公式或规则，需要设计者通过各种分析决定。9.1.5 9.1.5 版面布局设计版面布局设计1.常见的网页版面布局类型网页的版面布局类型归纳起来有以下网页的版面布局类型归纳起来有以下3种。种。1）“”型布局型布局2）“”型布局型布局3）其他布局）其他布局9.1.5 9.1.5 版面布局设计版面布局设计2.版面布局设计要求版面布局设计要求归纳起来有以下版面布局设计要求归纳起来有以下4点：点：（1）整洁大方。）整洁大方。（2）突出重点。）突出重点。（3）平衡对称。）平衡对称。（4）风格一致。）风格一致。9.2 9.

4、2 主页设计主页设计9.2.19.2.1制作主页图片稿制作主页图片稿通常一个网站的主页设计初稿都由网站美工人员或者艺术设计人员设计通常一个网站的主页设计初稿都由网站美工人员或者艺术设计人员设计制作出的一张图片稿。专业的设计人员也许不是专业的网页制作人员，制作出的一张图片稿。专业的设计人员也许不是专业的网页制作人员，同样让网页制作人员完全替代美工设计的工作也是勉为其难。而且，主同样让网页制作人员完全替代美工设计的工作也是勉为其难。而且，主页的设计样式往往需要多次修改才能满足前期策划的要求，中间可能会页的设计样式往往需要多次修改才能满足前期策划的要求，中间可能会有很多个设计稿，如果对每个设计稿都制

5、作成网页，浪费的人力物力也有很多个设计稿，如果对每个设计稿都制作成网页，浪费的人力物力也会相当大。会相当大。主页图片稿通常使用主页图片稿通常使用Photoshop或网页制作三剑客之一的或网页制作三剑客之一的Fireworks进行进行制作，这取决于艺术设计人员的喜好。制作，这取决于艺术设计人员的喜好。9.2.29.2.2利用利用FireworksFireworks对图片切片对图片切片将图片导出为网页的操作步骤如下：将图片导出为网页的操作步骤如下：（1）在）在Fireworks中执行中执行“文件文件”“导出导出”命令，弹出命令，弹出“导出导出”对话框。对话框。（2）在）在“导出导出”下拉列表框中，

6、选择下拉列表框中，选择“HTML和图像和图像”选项，在选项，在HTML下拉列下拉列表框中选择表框中选择“导出导出HTML文件文件”，选中，选中“将图像放入子文件夹将图像放入子文件夹”复选框。复选框。（3）单击）单击“导出导出”按钮，就可以将图片导出成为一个按钮，就可以将图片导出成为一个HTML网页和一系列图片网页和一系列图片切片，这些切片会存放在指定的文件夹内，默认是与网页同目录下的切片，这些切片会存放在指定的文件夹内，默认是与网页同目录下的images文件文件夹中。夹中。通过通过Fireworks的处理，一张主页的图片设计稿就变成了一个基本的网页形式了。的处理，一张主页的图片设计稿就变成了一

7、个基本的网页形式了。下一步，就是网页制作的主要内容了。下一步，就是网页制作的主要内容了。9.2.39.2.3利用利用DreamweaverDreamweaver制作主页制作主页主页制作步骤如下：主页制作步骤如下：（1）在）在Dreamweaver中创建一个新文档，将该文档与图像文件放于同一个站点中创建一个新文档，将该文档与图像文件放于同一个站点目录下，打开布局模式，然后单击插入栏内的目录下，打开布局模式，然后单击插入栏内的“布局表格布局表格”按钮按钮.（2）使用）使用“布局表格布局表格”功能在文档编辑区内绘制一个表格，该表格的宽度是根功能在文档编辑区内绘制一个表格，该表格的宽度是根据页面设计时

8、图像的宽度决定的。例如，在本例中，表格的宽度设置为据页面设计时图像的宽度决定的。例如，在本例中，表格的宽度设置为800像素像素.（3）单击插入栏内的）单击插入栏内的“绘制布局单元格绘制布局单元格”按钮，根据图像的大小绘制出所有图按钮，根据图像的大小绘制出所有图像所在的单元格。像所在的单元格。（4）完成布局表格绘制之后，启用扩展表格模式观察表格效果，此时可以更清）完成布局表格绘制之后，启用扩展表格模式观察表格效果，此时可以更清楚地看到表格效果。楚地看到表格效果。（5）绘制好布局表格后，将文档命名为）绘制好布局表格后，将文档命名为“index.htm”并保存。并保存。9.2.49.2.4插入图片插

9、入图片完成布局表格绘制之后，在扩展表格模式下，在表格内逐一插入相应图完成布局表格绘制之后，在扩展表格模式下，在表格内逐一插入相应图像。像。9.3 9.3 编辑子页面编辑子页面9.4 9.4 设置超链接设置超链接9.5 CSS9.5 CSS样式的应用样式的应用 对于整个网站的多个页面，如果利用对于整个网站的多个页面，如果利用CSS来控制样式，那么在网来控制样式，那么在网站改版和批量调整网站样式时会大大提高工作效率。一般使用插站改版和批量调整网站样式时会大大提高工作效率。一般使用插入链接的外部样式表来引入入链接的外部样式表来引入CSS样式，这只需要将对应的样式集样式，这只需要将对应的样式集中书写在

10、样式表文件中，然后在每个网页的中书写在样式表文件中，然后在每个网页的中中加以引用即可。如果更换样式，只需要替换对应的样式表文件即加以引用即可。如果更换样式，只需要替换对应的样式表文件即可，不需要对大量的网页进行逐一修改。可，不需要对大量的网页进行逐一修改。9.6 9.6 添加添加JavaScriptJavaScript特效特效1、在主页中可以自动获取用户所在计算机的时间，并根据不同的访问时间，向、在主页中可以自动获取用户所在计算机的时间，并根据不同的访问时间，向用户发出不同的问候用户发出不同的问候.JavaScript代码如下：代码如下：var mess1=;day=new Date()hr=

11、day.getHours()if(hr=0)&(hr=4)&(hr=7)&(hr=12)&(hr=13)&(hr=18)&(hr=23)mess1=晚上好！辛苦了一天了晚上好！辛苦了一天了 alert(mess1);2、如果访问者没有填写留言内容或姓名，浏览器可以发出相应的提示。、如果访问者没有填写留言内容或姓名，浏览器可以发出相应的提示。JavaScript代码如下：代码如下：function CheckForm()var Err;Err=;if(document.VisitorForm.VisitorName.value=)Err=Err+请输入您的姓名！请输入您的姓名！n;if(docu

12、ment.VisitorForm.Words.value=)Err=Err+请输入您的留言内容！请输入您的留言内容！;alert(Err);return false;9.7 9.7 测试检查与网站发布测试检查与网站发布9.7.1 9.7.1 测试检查测试检查1.链接的检查与修复链接的检查与修复2.检查网页的兼容性检查网页的兼容性 9.7.2 9.7.2 网站发布网站发布要进行网站发布，先要向要进行网站发布，先要向Web服务器申请一个空间，就像买一套服务器申请一个空间，就像买一套房子一样，在网上给自己的网站找一个房子一样，在网上给自己的网站找一个“房间房间”，然后将网站放，然后将网站放进去。申请空间通常有几种方法，可以向本单位的网络管理员申进去。申请空间通常有几种方法，可以向本单位的网络管理员申请一个空间，也可以向一些请一个空间，也可以向一些Internet服务机构（服务机构（ISP）购买一个空）购买一个空间，还可以到提供免费空间的网站申请一个免费空间。发布站点间，还可以到提供免费空间的网站申请一个免费空间。发布站点就是将网站中的所有文件及文件夹复制到申请空间的过程。就是将网站中的所有文件及文件夹复制到申请空间的过程。谢谢！谢谢！