边做边学——Dreamweaver CS3网页设计案例教程教学课件 作者 官辛华 03.ppt

本章简介： 图像在网页中的作用是非常重要的，图像、按钮、标记可以使网页更加美观、形象生动，从而使网页中的内容更加丰富多彩。 所谓“媒体”是指信息的载体，包括文字、图形、动画、音频、视频等。在Dreamweaver CS3中，用户可以方便快捷地向Web站点添加声音和影片媒体，并可以导入和编辑多个媒体文件和对象。 * 第3章　图像和多媒体 课堂学习目标 插入图像 图文混排和创建网站相册 多媒体在网页中的应用 3.1　卡通素材网页 案例分析 设计理念 操作步骤 相关工具 3.1.1　案例分析 本例是设计公司制作的卡通素材网页，设计公司的卡通素材主要提供给喜爱设计、热衷于设计的人群。在网页设计上希望能体现出网页的服务功能和素材特色。 3.1.2　设计理念 在网页设计制作过程中，左侧的菜单设计简洁清晰，为设计师提供了素材分类。右侧展示了真实的素材效果，让设计师们在查阅的同时，享受视觉上的冲击而产生非凡灵感。整个界面以不同颜色块进行划分，方便浏览者查看和下载。整体设计简洁流畅、活泼大方。 卡通素材网页效果图 3.1.3　操作步骤 1 2 3 4 3.1.4　相关工具 1.网页中的图像格式 Web页中通常使用的图像文件有JPEG、GIF、PNG 三种格式，但大多数浏览器只支持JPEG、GIF两种图像格式。因为要保证浏览者下载网页的速度，所以网站设计者也常使用JPEG和GIF这两种压缩格式的图像。 GIF文件 JPEG文件 PNG文件 2.插入图像 要在Dreamweaver CS3文档中插入的图像必须位于当前站点文件夹内或远程站点文件夹内，否则图像不能正确显示。因此在建立站点时，要先创建一个名叫“image”的文件夹，并将需要的图像拷贝到其中。 3.设置图像属性 插入图像后，在“属性”面板中显示该图像的属性。 属性面板 4.插入图像占位符 在网页布局时，网站设计者需要先设计图像在网页中的位置，等设计方案通过后，再将这个位置变成具体图像。Dreamweaver CS3提供的“图像占位符”功能，可满足上述需求。 在文档窗口中，将插入点放置在要插入占位符图形的位置。 通过以下两种方法选择“图像占位符”命令，打开“图像占位符”对话框。 （1）选择“插入”面板中的“常用”选项卡，单击“图像”展开式工具按钮，选择“图像占位符”选项。 （2）选择“插入记录 图像对象 图像占位符”命令。 5.跟踪位图 在工程设计过程中，一般先在图像处理软件中勾画出工程蓝图，然后在此基础上反复修改，最终得到一幅完美的设计图。制作网页时也应采用工程设计的方法，先在图像处理软件中绘制网页的蓝图，将其添加到网页的背景中，按设计方案对号入座，等网页制作完毕后，再将蓝图删除。Dreamweaver CS3利用“跟踪图像”功能来实现上述网页设计的方式。 3.1.5 实战演练-家居时尚网页 使用“图像”按钮插入图像布局页面，使用“属性”面板改变图像的大小。 效果图 3.2　购房中心网页 案例分析 设计理念 操作步骤 相关工具 3.2.1　案例分析 购房中心网页最大的特色即在于“足不出户，选天下房”，用户不需要从一地赶到另一地选房看房，仅在家里利用因特网，就可了解房地产楼盘项目的规模和环境，查询和观看各种房屋户型。因此，在网页的设计上要根据功能需求，合理进行布局和制作。 3.2.2　设计理念 在网页设计、制作过程中，使用房屋的写实照片作为背景，能充分体现独特的建筑形式和自然风光。导航栏的设计简洁清晰，方便购房者浏览、查找需要的项目和户型。通过文字与图片的编排，体现出房产项目的人文气息。整个页面设计表现出休闲时光的惬意和享受。 购房中心网页效果图 3.2.3　操作步骤 1 2 3 4 3.2.4　相关工具 1.调整图像与文本的相对位置 网页中既有文字，又有图像，如何调整同一行文字和图像的摆放位置达到表现良好的视觉效果，这就涉及图像与文字的相对位置问题。 调整同一行图像与文字相对位置的具体操作步骤如下。 （1）在设计视图中选择图像。 （2）在图像“属性”面板中展开“对齐”选项的下拉列表，选择一种调整