网页设计与制作教程 web2.ppt

第2章 网页版面设计基础 2.1 基本概念 2.1.1 虚拟界面 网页=虚拟界面 图2-1是ebay易趣网的网页，该网页中包含了文字、图形、图像、动画、声音、视频等多种媒介。 将文字向右下方稍微移动一点距离，效果如图2-31所示。 用指针工具 选择文字，在属性面板中或工具箱中设置文字的颜色为灰色“#333333”，效果如图2-32所示。 单击“活动区域”标签，Fireworks自动为按钮创建活动区域，如图2-33所示。 * 图2-1 包含多种多媒体的网页 2.1.2 网页界面的特点 1．版面尺寸规范化 1）800×600像素。 2）1024×768像素。 3）1280×1024像素或更高 2．媒介形式的多样化 3．有限的界面颜色数量 4．界面的嵌套性 5．具有控制功能 2.1.3 网页的功能 1．展示功能 2．超链接功能 3．检索功能 4．统计、计算功能 2.2 网页版面设计 2.2.1 版面编排原则 1．突出中心，理清主次。 2．搭配合理，大小呼应。 3．图文并茂，相得益彰。 2.2.2 版面典型风格 1．对称型 对称型的网页设计风格是最为常见的结构类型，如图2-3所示。 2．偏置型 偏置型风格与对称型风格十分接近，不同之处在于，其中部版面显示主要内容的区域分栏不对称，如图2-4所示。 3．标题型 标题型网页风格简练，传达内容直观，如图2-5所示。 4．混合型 具有混合型风格的网页往往兼具以上几种网页风格的特点。 2.2.3 色彩搭配1．确定主体色2．选用相近色3．色彩均衡原则4．黑白灰运用5．色彩心理与情感 2.2.4 设计规则 1．首屏页面的设计 所谓“首屏页面”是指打开一个网站首页时，不拖动画面右侧的滚动条能够看到的部分，如图2-6所示。 （1）首屏页面的尺寸 （2）首屏页面的把握 （3）设法抓住读者的视线 2．导航栏的设计 图2-7是网站的导航栏。从该网页中看出，功能丰富的导航栏可引导读者获取多方面的信息，如公司简介、软件系统、服务项目等。 3．媒介规格设计 （1）图像 （2）动画 （3）声音 4．网页效果与网页效率 （1）避免滥用媒体形式 （2）文字的使用 （3）图形的使用 （4）背景的处理 5．强调整体 6．网页与读者群 7．网页命名规则 8．及时更新网页 2.2.5 设计误区 1．片面追求版面效果 2．使用纵向的导航栏 3．使用多种媒体形式 4．规则化 2.3 用Fireworks创建网页模型 2.3.1 Fireworks 8的基本概念 1．创建新文档 第一次启动Fireworks 8中文版时，会出现一个初始页面，如图2-8所示。 当用户选择新建Fireworks文件后，就会弹出“新建文档”的对话框，如图2-9所示。 2．Fireworks 8的工作区窗口 新建文档完成后可以看到Fireworks 8的工作区窗口，如图2-10所示。 3．打开和导入文件 (1) 打开文件 打开文件用于重新加载一幅新的图像。执行“文件”→“打开”命令，或者单击工具栏上的“打开”按钮，即可启动“打开”文件对话框，如图2-11所示。 (2) 导入文件 导入文件和打开文件的区别是，前者是将图像文件插入到目前正在编辑的文档中，而不是重新加载一幅图像。执行“文件”→“导入”命令，启动“导入”对话框，如图2-12所示。 4．修改画布 单击画布，或在画布的工作区外单击一下，从而显示相应的画布属性面板，如图2-13所示。 在属性面板中，单击画布颜色选择框，可以重新设置新的画布颜色，如图2-14所示。 单击“画布大小”按钮将出现设置对话框，如图2-15所示。 “图像大小”对话框如图2-16所示。 2.3.2 Fireworks 8的基本操作 如图2-17所示为“宠物乐园”首页的设计草图。下面用Fireworks创建其网页模型，完成后，将其切片并导出为HTML文件。 1．新建文档 2．制作网站的LOGO（网站徽标） (1) 导入图片 执行“文件”→“导入”命令，导入一幅宠物图片，图片的大小为184×60像素，在属性面板中修改图片的位置参数X为“0”，Y为“0”，使图片位于整个页面的左上角，如图2-18所示。 (2) 制作文字标志 选择文字工具 ，在属性面板中设置字体为“幼圆”，大小为“26”，颜色为黑色“#000000”，如图2-19所示。 在导入图片的上边输入“宠物之家”四个字并调整其位置。接着，设置字体为“Monotype Corsiva”，大小为“20”，颜色为桔红色“#FF9933”，在“宠物之家”四个字下面输入英文“MypetHome”，如图2-20所示。 3. 导入广告条 广告条的大小通常为