网页设计与制作教程web.pptxVIP

第2章网页版面设计基础2.1基本概念2.1.1虚拟界面网页=虚拟界面图2-1是ebay易趣网的网页，该网页中包含了文字、图形、图像、动画、声音、视频等多种媒介。

图2-1包含多种多媒体的网页

2.1.2网页界面的特点版面尺寸规范化800×600像素。1024×768像素。1280×1024像素或更高

010203040506070809媒介形式的多样化有限的界面颜色数量界面的嵌套性具有控制功能超链接功能2.1.3网页的功能展示功能检索功能统计、计算功能

2.2.1版面编排原则1突出中心，理清主次。2搭配合理，大小呼应。3图文并茂，相得益彰。42.2网页版面设计

2.2.2版面典型风格对称型对称型的网页设计风格是最为常见的结构类型，如图2-3所示。

2．偏置型偏置型风格与对称型风格十分接近，不同之处在于，其中部版面显示主要内容的区域分栏不对称，如图2-4所示。

3．标题型标题型网页风格简练，传达内容直观，如图2-5所示。混合型具有混合型风格的网页往往兼具以上几种网页风格的特点。

2.2.3色彩搭配01确定主体色02选用相近色03色彩均衡原则04黑白灰运用05色彩心理与情感06

2.2.4设计规则（1）首屏页面的尺寸（2）首屏页面的把握（3）设法抓住读者的视线1．首屏页面的设计所谓“首屏页面”是指打开一个网站首页时，不拖动画面右侧的滚动条能够看到的部分，如图2-6所示。

导航栏的设计图2-7是网站的导航栏。从该网页中看出，功能丰富的导航栏可引导读者获取多方面的信息，如公司简介、软件系统、服务项目等。

3．媒介规格设计（1）图像（2）动画（3）声音4．网页效果与网页效率（1）避免滥用媒体形式（2）文字的使用（3）图形的使用（4）背景的处理5．强调整体6．网页与读者群7．网页命名规则8．及时更新网页

2.2.5设计误区片面追求版面效果规则化使用纵向的导航栏使用多种媒体形式

用Fireworks创建网页模型2.3.1Fireworks8的基本概念创建新文档第一次启动Fireworks8中文版时，会出现一个初始页面，如图2-8所示。

当用户选择新建Fireworks文件后，就会弹出“新建文档”的对话框，如图2-9所示。

Fireworks8的工作区窗口新建文档完成后可以看到Fireworks8的工作区窗口，如图2-10所示。

3．打开和导入文件(1)打开文件打开文件用于重新加载一幅新的图像。执行“文件”→“打开”命令，或者单击工具栏上的“打开”按钮，即可启动“打开”文件对话框，如图2-11所示。

导入文件导入文件和打开文件的区别是，前者是将图像文件插入到目前正在编辑的文档中，而不是重新加载一幅图像。执行“文件”→“导入”命令，启动“导入”对话框，如图2-12所示。

4．修改画布单击画布，或在画布的工作区外单击一下，从而显示相应的画布属性面板，如图2-13所示。在属性面板中，单击画布颜色选择框，可以重新设置新的画布颜色，如图2-14所示。

单击“画布大小”按钮将出现设置对话框，如图2-15所示。“图像大小”对话框如图2-16所示。

2.3.2Fireworks8的基本操作如图2-17所示为“宠物乐园”首页的设计草图。下面用Fireworks创建其网页模型，完成后，将其切片并导出为HTML文件。

”新建文档制作网站的LOGO（网站徽标）导入图片执行“文件”→“导入”命令，导入一幅宠物图片，图片的大小为184×60像素，在属性面板中修改图片的位置参数X为“0”，Y为“0”，使图片位于整个页面的左上角，如图2-18所示。

在导入图片的上边输入“宠物之家”四个字并调整其位置。接着，设置字体为“MonotypeCorsiva”，大小为“20”，颜色为桔红色“#FF9933”，在“宠物之家”四个字下面输入英文“MypetHome”，如图2-20所示。(2)制作文字标志选择文字工具，在属性面板中设置字体为“幼圆”，大小为“26”，颜色为黑色“#000000”，如图2-19所示。

导入广告条广告条的大小通常为468×60像素，执行“文件”→“导入”命令，打开“导入”对话框，然后选择一幅广告画面即可导入。如图2-21所示。

制作网站辅助功能的图像绘制一个浅蓝色的矩形，然后使用文字工具在矩形区域中间输入文字提示“加入收藏夹”和“设置本页为首页”两行文字，调整好位置后效果如图2-22所示。

制作导航按钮绘制水平分隔线使用直线工具，绘制一条水平线，如图2-23所示。

(2)制作“网站首页”导航按钮首先绘制一个圆角矩形，如图2-24所示。

单击资源面板中的“样式”选项卡，如图2-25所示然后选择一种样式应用于刚绘制好的圆角矩形，如图2-26所示。

单击“确