网页版面设计基础浅析.pptVIP

单击“画布大小”按钮将出现 设置对话框，如图2-15所示。 “图像大小”对话框如图2-16所示。 § 2.3.1 Fireworks 8的基本概念 如图2-17所示为“宠物乐园”首页的设计草图。下面用Fireworks 创建其网页模型，完成后，将其切片并导出为HTML文件。 § 2.3.2 Fireworks 8的基本操作 1．新建文档 2．制作网站的LOGO（网站徽标） (1) 导入图片 执行“文件”→“导入”命令，导入一幅宠物图片，图片的大小为184×60像素，在属性面板中修改图片的位置参数X为“0”，Y为“0”，使图片位于整个页面的左上角，如图2-18所示。 § 2.3.2 Fireworks 8的基本操作 (2) 制作文字标志 选择文字工具 ，在属性面板中设置字体为“幼圆”，大小为“26”，颜色为黑色“#000000”，如图2-19所示。 在导入图片的上边输入“宠物之家”四个 字并调整其位置。接着，设置字体为 “Monotype Corsiva”，大小为“20”， 颜色为桔红色“#FF9933”，在“宠物之家”四个字下面输入英“MypetHome”， 如图2-20所示。 § 2.3.2 Fireworks 8的基本操作 3. 导入广告条 广告条的大小通常为468×60像素，执行“文件”→“导入”命令，打开“导入”对话框，然后选择一幅广告画面即可导入。如图2-21所示。 § 2.3.2 Fireworks 8的基本操作 4. 制作网站辅助功能的图像 绘制一个浅蓝色的矩形，然后使用文字工具 在矩形区域中间输入文字提示“加入收藏夹”和“设置本页为首页”两行文字，调整好位置后效果如图2-22所示。 § 2.3.2 Fireworks 8的基本操作 5. 制作导航按钮 (1) 绘制水平分隔线 使用直线工具 ，绘制一条水平线，如图2-23所示。 § 2.3.2 Fireworks 8的基本操作 (2) 制作“网站首页”导航按钮 首先绘制一个 圆角矩形， 如图2-24所示。 § 2.3.2 Fireworks 8的基本操作 单击资源面板中的“样式”选项卡，如图2-25所示 然后选择一种样式应用于刚绘制好的圆角矩形，如图2-26所示。 § 2.3.2 Fireworks 8的基本操作 单击“确定”按钮即可将按钮转换为元件，如图2-27所示。 § 2.3.2 Fireworks 8的基本操作 用指针工具双击画布上的按钮元件进入按钮的编辑状态，此时默认是按钮的“释放”帧状态，如图2-28所示。 § 2.3.2 Fireworks 8的基本操作 在属性面板中或工具箱中设置文字的颜色为蓝色“#0000FF”，效果如图2-30所示。 § 2.3.2 Fireworks 8的基本操作 第一部分 网页设计与制作基础 网页设计与制作基础 第二章 网页版面设计基础 本章的教学目的和要求 通过本章的教学要求学生达到下列要求： ⑴ 了解网页版面设计的基本概念； ⑵ 掌握网页版面设计的规则； ⑶ 学会用Firework 8创建网页模型。 本章教学内容 §2.1 版面设计基本概念 §2.2 网页版面设计 §2.3 用Firework 8创建网页模型 本章教学的重点和难点 1、教学重点： 网页版面的类型 网页版面设计的规则 用Firework 8创建网页模型的步骤 2、教学难点 各版面类型间的区别 网页色彩的搭配 §2.1 版面设计基本概念 虚拟界面 网页界面的特点 网页的功能 §2.1.1 虚拟界面 网页=虚拟界面 利用多媒体技术在计算机网络与人之间建立的具有展示和交互功能的虚拟界面 利用计算机技术对文字、图形、图像、动画、声音、视频等多媒体进行综合处理并完成交互作用的技术 图2-1 包含多种多媒体的网页 §2.1.2 网页界面的特点 版面尺寸规范化 800*600像素 1024*768像素 1280*1024像素 §2.1.2 网页界面的特点 媒介形式的多样化 有限的界面颜色数量 256色模式 界面的嵌套功能 §2.1.3 网页的功能 展示功能 超链接功能 检索功能 统计和计算功能 §2.2 网页版面设计 版面典型风格 色彩搭配 设计规则 §2.2.1 版面典型风格 比较典型的网页风格 对称型 偏置型 标题型 混合型 对称型 对称型的网页设计风格是最为常见的结构类型，如图2-3所示。 偏置型 偏置型风格与对称型风格十分接近，不同之处在于，其中部版面显示主要内容的区域分栏不对称，如图2-4所示。 标题型 标题型网页风格简练