第2章网页版面设计基础.pptVIP

单击“确定”按钮即可将按钮转换为元件，如图2-27所示。 用指针工具 双击画布上的按钮元件进入按钮的编辑状态，此时默认是按钮的“释放”帧状态，如图2-28所示。 在属性面板中或工具箱中设置文字的颜色为蓝色“#0000FF”，效果如图2-30所示。 将文字向右下方稍微移动一点距离，效果如图2-31所示。 用指针工具 选择文字，在属性面板中或工具箱中设置文字的颜色为灰色“#333333”，效果如图2-32所示。 单击“活动区域”标签，Fireworks自动为按钮创建活动区域，如图2-33所示。 单击“完成”按钮，按钮创建完毕。将创建好的“网站首页”按钮移至水平分隔线之间，效果如图2-34所示。 (3) 制作其余的导航按钮 可以复制“网站首页”按钮，然后修改属性面板中“文本”右侧文本框中的提示即可实现，最终效果如图2-35所示。 2.3.3 网页模型的规划和设计 1. 布局页面主体区域 效果如图2-36所示。 2. 制作栏目圆角图片 3. 制作栏目内容 用户在Dreamweaver中可以轻松地制作栏目中的具体内容，如图2-43所示。 4. 制作公告栏目圆角及栏目内容 公告栏目圆角及栏目内容的制作与上边的制作过程很相似，这里不再赘述，制作好的效果如图2-44所示。 5. 制作宠物网上商城版块 在布局下面的空间中导入各种宠物及宠物用品的图像，调整好位置后，如图2-45所示。 6. 制作版权区域 版权区域的制作与栏目内容的制作过程很相似，不再赘述，制作好的效果如图2-46所示。 2.3.4 网页模型的切片与导出 根据本实例页面的特点，将页面切片如图2-47所示。 如果需要将导出的切片放入某个图像文件夹中便于管理，可以选中“将图像放入子文件夹”复选框，如图2-48所示，最后单击“导出”按钮。 2.3.5 在Dreamweaver中编辑导出的网页 启动Dreamweaver 8，打开生成的“websample.html”，如图2-50所示，将占位图像删除，占位图像所占用的区域转换为空表格， 然后用户在表格中输入需要的内容即可，编辑后的结果如图2-51所示。 2.4 习题 1．对于现在普遍使用的17英寸显示器，网页的版面尺寸设置为多少像素合适？为什么？ 2．上网浏览网页，指出这些网页版面属于哪种类型。 3．色彩搭配有那些原则？请给出几组匹配的色彩。 4．如图2-52所示是“别客中国”网站首页的设计草图，请用Fireworks制作网页模型，并将其切片并导出为HTML文件。 “ ” 第2章 网页版面设计基础 2.1 基本概念 2.1.1 虚拟界面 网页=虚拟界面 图2-1是EBAY易趣网的网页，该网页中包含了文字、图形、图像、动画、声音、视频等多种媒介。 图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