《网页设计与制作教程web.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作教程web.ppt（48页珍藏版）》请在三一办公上搜索。
1、第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 版面典
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
3、导航栏的设计图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所示。,当用户选择新建F
4、ireworks文件后，就会弹出“新建文档”的对话框，如图2-9所示。,2Fireworks 8的工作区窗口新建文档完成后可以看到Fireworks 8的工作区窗口，如图2-10所示。,3打开和导入文件(1)打开文件打开文件用于重新加载一幅新的图像。执行“文件”“打开”命令，或者单击工具栏上的“打开”按钮，即可启动“打开”文件对话框，如图2-11所示。,(2)导入文件导入文件和打开文件的区别是，前者是将图像文件插入到目前正在编辑的文档中，而不是重新加载一幅图像。执行“文件”“导入”命令，启动“导入”对话框，如图2-12所示。,4修改画布单击画布，或在画布的工作区外单击一下，从而显示相应的画布属
5、性面板，如图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所示
6、。,(2)制作文字标志选择文字工具，在属性面板中设置字体为“幼圆”，大小为“26”，颜色为黑色“#000000”，如图2-19所示。,在导入图片的上边输入“宠物之家”四个字并调整其位置。接着，设置字体为“Monotype Corsiva”，大小为“20”，颜色为桔红色“#FF9933”，在“宠物之家”四个字下面输入英文“MypetHome”，如图2-20所示。,3.导入广告条广告条的大小通常为46860像素，执行“文件”“导入”命令，打开“导入”对话框，然后选择一幅广告画面即可导入。如图2-21所示。,4.制作网站辅助功能的图像绘制一个浅蓝色的矩形，然后使用文字工具 在矩形区域中间输入文字提示
7、“加入收藏夹”和“设置本页为首页”两行文字，调整好位置后效果如图2-22所示。,5.制作导航按钮(1)绘制水平分隔线使用直线工具，绘制一条水平线，如图2-23所示。,(2)制作“网站首页”导航按钮首先绘制一个圆角矩形，如图2-24所示。,单击资源面板中的“样式”选项卡，如图2-25所示,然后选择一种样式应用于刚绘制好的圆角矩形，如图2-26所示。,单击“确定”按钮即可将按钮转换为元件，如图2-27所示。,用指针工具 双击画布上的按钮元件进入按钮的编辑状态，此时默认是按钮的“释放”帧状态，如图2-28所示。,在属性面板中或工具箱中设置文字的颜色为蓝色“#0000FF”，效果如图2-30所示。,将
8、文字向右下方稍微移动一点距离，效果如图2-31所示。,用指针工具 选择文字，在属性面板中或工具箱中设置文字的颜色为灰色“#333333”，效果如图2-32所示。,单击“活动区域”标签，Fireworks自动为按钮创建活动区域，如图2-33所示。,单击“完成”按钮，按钮创建完毕。将创建好的“网站首页”按钮移至水平分隔线之间，效果如图2-34所示。,(3)制作其余的导航按钮可以复制“网站首页”按钮，然后修改属性面板中“文本”右侧文本框中的提示即可实现，最终效果如图2-35所示。,2.3.3 网页模型的规划和设计,1.布局页面主体区域效果如图2-36所示。,2.制作栏目圆角图片,3.制作栏目内容用户
9、在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文件。,
