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

《网页设计与制作教程web.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第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.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、页面的把握（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.1Fireworks8的基本概念1．创建新文档第一次启动Fireworks8

4、中文版时，会出现一个初始页面，如图2-8所示。当用户选择新建Fireworks文件后，就会弹出“新建文档”的对话框，如图2-9所示。2．Fireworks8的工作区窗口新建文档完成后可以看到Fireworks8的工作区窗口，如图2-10所示。3．打开和导入文件(1)打开文件打开文件用于重新加载一幅新的图像。执行“文件”→“打开”命令，或者单击工具栏上的“打开”按钮，即可启动“打开”文件对话框，如图2-11所示。(2)导入文件导入文件和打开文件的区别是，前者是将图像文件插入到目前正在编辑的文档中，而不是重新加载一幅图像。执行“文件”→“导入”命令，启动“导入”对话框，如图

5、2-12所示。4．修改画布单击画布，或在画布的工作区外单击一下，从而显示相应的画布属性面板，如图2-13所示。在属性面板中，单击画布颜色选择框，可以重新设置新的画布颜色，如图2-14所示。单击“画布大小”按钮将出现设置对话框，如图2-15所示。“图像大小”对话框如图2-16所示。2.3.2Fireworks8的基本操作如图2-17所示为“宠物乐园”首页的设计草图。下面用Fireworks创建其网页模型，完成后，将其切片并导出为HTML文件。1．新建文档2．制作网站的LOGO（网站徽标）(1)导入图片执行“文件”→“导入”命令，导入一幅宠物图片，图片的大小为184×60像

6、素，在属性面板中修改图片的位置参数X为“0”，Y为“0”，使图片位于整个页面的左上角，如图2-18所示。(2)制作文字标志选择文字工具，在属性面板中设置字体为“幼圆”，大小为“26”，颜色为黑色“#000000”，如图2-19所示。在导入图片的上边输入“宠物之家”四个字并调整其位置。接着，设置字体为“MonotypeCorsiva”，大小为“20”，颜色为桔红色“#FF9933”，在“宠物之家”四个字下面输入英文“MypetHome”，如图2-20所示。3.导入广告条广告条的大小通常为468×60像素，执行“文件”→“导入”命令，打开“导入”对话框，然后选择一幅广告画面

7、即可导入。如图2-21所示。4.制作网站辅助功能的图像绘制一个浅蓝色的矩形，然后使用文字工具在矩形区域中间输入文字提示“加入收藏夹”和“设置本页为首页”两行文字，调整好位置后效果如图2-22所示。5.制作导航按钮(1)绘制水平分隔线使用直线工具，绘制一条水平线，如图2-23所示。(2)制作“网站首页”导航按钮首先绘制一个圆角矩形，如图2-24所示。单击资源面板中的“样式”选项卡，如图2-25所示然后选择一种样式应用于刚绘制好的圆角矩形，如图2-26所示。单击“确定”按钮即可将按钮转换为元件，如图2-27所示。用指针工具双击画布上的按钮元件