第2章 节 网页版面设计基础 网页设计与制作教程（第3版） .pptVIP

第2章 网页版面设计基础 ;图2-1 包含多种多媒体的网页 ;2.1.2 网页界面的特点 ;2．媒介形式的多样化 3．有限的界面颜色数量 4．界面的嵌套性 5．具有控制功能 2.1.3 网页的功能 1．展示功能 2．超链接功能 3．检索功能 4．统计、计算功能;2.2 网页版面设计 ;3．标题型 标题型网页风格简练，传达内容直观，如图2-5所示。 ;2.2.3 色彩搭配1．确定主体色2．选用相近色3．色彩均衡原则4．黑白灰运用5．色彩心理与情感;2.2.4 设计规则 ;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创建网页模型 ;当用户选择新建Fireworks文件后，就会弹出“新建文档”的对话框，如图2-9所示。 ;2．Fireworks 8的工作区窗口 新建文档完成后可以看到Fireworks 8的工作区窗口，如图2-10所示。 ;3．打开和导入文件 (1) 打开文件 打开文件用于重新加载一幅新的图像。执行“文件”→“打开”命令，或者单击工具栏上的“打开”按钮，即可启动“打开”文件对话框，如图2-11所示。; (2) 导入文件 导入文件和打开文件的区别是，前者是将图像文件插入到目前正在编辑的文档中，而不是重新加载一幅图像。执行“文件”→“导入”命令，启动“导入”对话框，如图2-12所示。;4．修改画布 单击画布，或在画布的工作区外单击一下，从而显示相应的画布属性面板，如图2-13所示。;单击“画布大小”按钮将出现设置对话框，如图2-15所示。;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所示。;3. 导入广告条 广告条的大小通常为468×60像素，执行“文件”→“导入”命令，打开“导入”对话框，然后选择一幅广告画面即可导入。如图2-21所示。;4. 制作网站辅助功能的图像 绘制一个浅蓝色的矩形，然后使用文字工具 在矩形区域中间输入文字提示“加入收藏夹”和“设置本页为首页”两行文字，调整好位置后效果如图2-22所示。;5. 制作导航按钮 (1) 绘制水平分隔线 使用直线工具 ，绘制一条水平线，如图2-23所示。;(2) 制作“网站首页”导航按钮 首先绘制一个圆角矩形，如图2-24所示。;单击资源面板中的“样式”选项卡，如图2-25所示;单击“确定”按钮即可将按钮转换为元件，如图2-27所示。;用指针工具 双击画布上的按钮元件进入按钮的编辑状态，此时默认是按钮的“释放”帧状态，如图2-28所示。;在属性面板中或工具箱中设置文字的颜色为蓝色“#0000FF”，效果如图2-30所示。;将文字向右下方稍微移动一点距离，效果如图2-31所示。;用指针工具 选择文字，在属性面板中或工具箱中设置文字的颜色为灰色“#333333”，效果如图2-32所示。;单击“活动区域”标签，Fireworks自动为按钮创建活动区域，如图2-33所示。;单击“完成”按钮，按钮创建完毕。将创建好的“网站首页”按钮移至水平分隔线之间，效果如图2-34所示。;(3) 制作其余的导航按钮 可以复制“网站首页”按钮，然后修改属性面板中“文本”右侧文本框中的提示即可实现，最终效果如图2-35所示。;2.3.3 网页模型的规划和设计 ;2. 制作栏目圆角图片;3. 制作栏目内容 用户在Dreamweaver中可以轻松地制作栏目中的具体内容，如图2-43所示。;4. 制作公告栏目圆角及栏目内容 公告栏目圆角及栏目内容的制作与上边的制作过程很相似，这里不再赘述，制作好的效果如图2-44所示。;5. 制作宠物网上商城版块 在布局下面的空间中导入各种宠物及宠物用品的图像，调整好位置