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

第2章 网页版面设计基础,2.1 基本概念 2.1.1 虚拟界面 网页=虚拟界面 图2-1是ebay易趣网的网页，该网页中包含了文字、图形、图像、动画、声音、视频等多种媒介。,图2-1 包含多种多媒体的网页,2.1.2 网页界面的特点,1版面尺寸规范化 1）800600像素。 2）1024768像素。 3）12801024像素或更高,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所示。,2Fireworks 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) 导入图片 执行“文件”“导入”命令，导入一幅宠物图片，图片的大小为18460像素，在属性面板中修改图片的位置参数X为“0”，Y为“0”，使图片位于整个页面的左上角，如图2-18所示。,(2) 制作文字标志 选择文字工具 ，在属性面板中设置字体为“幼圆”，大小为“26”，颜色为黑色“#000000”，如图2-19所示。,在导入图片的上边输入“宠物之家”四个字并调整其位置。接着，设置字体为“Monotype Corsiva”，大小为“20”，颜色为桔红色“#FF9933”，在“宠物之家”四个字下面输入英文“MypetHome”，如图2-20所示。,3. 导入广告条 广告条的大小通常为46860像素，执行“文件”“导入”命令，打开“导入”对话框，然后选择一幅广告画面即可导入。如图2-21所示。,4. 制作网站辅助功能的图像 绘制一个浅蓝色的矩形，然后使用文字工具 在矩形区域中间输入文字提示“加入收藏夹”和“设置本页为首页”两行文字，调整好位置后效果如图2-22所示。,5. 制作导航按钮 (1) 绘制水平分隔线 使用直线工具 ，绘制一条水平线，如图2-23所示。,(2) 制作“网站首页”导航按钮 首先绘制一个圆角矩形，如图2-24所示。,单击资源面板中的“样式”选项卡，如图2-25所示,然后选择一种样式应用于刚绘制好的圆角矩形，如图2-26所示。,单击“确定”按钮即可将按钮转换为元件，如图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