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

《边做边学——Dreamweaver CS3网页设计案例教程教学课件 作者 官辛华 03.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、本章简介：图像在网页中的作用是非常重要的，图像、按钮、标记可以使网页更加美观、形象生动，从而使网页中的内容更加丰富多彩。所谓“媒体”是指信息的载体，包括文字、图形、动画、音频、视频等。在DreamweaverCS3中，用户可以方便快捷地向Web站点添加声音和影片媒体，并可以导入和编辑多个媒体文件和对象。第3章　图像和多媒体课堂学习目标插入图像图文混排和创建网站相册多媒体在网页中的应用3.1卡通素材网页案例分析设计理念操作步骤相关工具3.1.1案例分析本例是设计公司制作的卡通素材网页，设计公司的卡通素材主要提供给喜爱设

2、计、热衷于设计的人群。在网页设计上希望能体现出网页的服务功能和素材特色。3.1.2设计理念在网页设计制作过程中，左侧的菜单设计简洁清晰，为设计师提供了素材分类。右侧展示了真实的素材效果，让设计师们在查阅的同时，享受视觉上的冲击而产生非凡灵感。整个界面以不同颜色块进行划分，方便浏览者查看和下载。整体设计简洁流畅、活泼大方。卡通素材网页效果图3.1.3操作步骤12343.1.4相关工具1.网页中的图像格式Web页中通常使用的图像文件有JPEG、GIF、PNG三种格式，但大多数浏览器只支持JPEG、GIF两种图像格式。因为

3、要保证浏览者下载网页的速度，所以网站设计者也常使用JPEG和GIF这两种压缩格式的图像。GIF文件JPEG文件PNG文件2.插入图像要在DreamweaverCS3文档中插入的图像必须位于当前站点文件夹内或远程站点文件夹内，否则图像不能正确显示。因此在建立站点时，要先创建一个名叫“image”的文件夹，并将需要的图像拷贝到其中。3.设置图像属性插入图像后，在“属性”面板中显示该图像的属性。属性面板4.插入图像占位符在网页布局时，网站设计者需要先设计图像在网页中的位置，等设计方案通过后，再将这个位置变成具体图像。Dre

4、amweaverCS3提供的“图像占位符”功能，可满足上述需求。在文档窗口中，将插入点放置在要插入占位符图形的位置。通过以下两种方法选择“图像占位符”命令，打开“图像占位符”对话框。（1）选择“插入”面板中的“常用”选项卡，单击“图像”展开式工具按钮，选择“图像占位符”选项。（2）选择“插入记录>图像对象>图像占位符”命令。5.跟踪位图在工程设计过程中，一般先在图像处理软件中勾画出工程蓝图，然后在此基础上反复修改，最终得到一幅完美的设计图。制作网页时也应采用工程设计的方法，先在图像处理软件中绘制网页的蓝图，将其添加到

5、网页的背景中，按设计方案对号入座，等网页制作完毕后，再将蓝图删除。DreamweaverCS3利用“跟踪图像”功能来实现上述网页设计的方式。3.1.5实战演练-家居时尚网页使用“图像”按钮插入图像布局页面，使用“属性”面板改变图像的大小。效果图3.2购房中心网页案例分析设计理念操作步骤相关工具3.2.1案例分析购房中心网页最大的特色即在于“足不出户，选天下房”，用户不需要从一地赶到另一地选房看房，仅在家里利用因特网，就可了解房地产楼盘项目的规模和环境，查询和观看各种房屋户型。因此，在网页的设计上要根据功能需求，合理进

6、行布局和制作。3.2.2设计理念在网页设计、制作过程中，使用房屋的写实照片作为背景，能充分体现独特的建筑形式和自然风光。导航栏的设计简洁清晰，方便购房者浏览、查找需要的项目和户型。通过文字与图片的编排，体现出房产项目的人文气息。整个页面设计表现出休闲时光的惬意和享受。购房中心网页效果图3.2.3操作步骤12343.2.4相关工具1.调整图像与文本的相对位置网页中既有文字，又有图像，如何调整同一行文字和图像的摆放位置达到表现良好的视觉效果，这就涉及图像与文字的相对位置问题。调整同一行图像与文字相对位置的具体操作步骤如下

7、。（1）在设计视图中选择图像。（2）在图像“属性”面板中展开“对齐”选项的下拉列表，选择一种调整图像与文字相对位置的方式。“对齐”选项中提供了9种图像与文字的对齐方式。2.创建网站相册在开始创建网站相册之前，将相册的所有图像放置在一个文件夹中（该文件夹不必位于站点中），并确保图像文件名的扩展名为“.Gif”、“.Jpg”、“.Jpeg”、“.Png”、“.Psd”、“.Tif”或“.Tiff”。首先，使用FireworksCS3来为该文件夹中的每个图像创建一个缩略图和一个较大尺寸的图像。然后，应用Dreamweave

8、rCS3创建一个Web页，它包含所有缩略图以及指向大图像所在网页的链接（带有无法识别的文件扩展名的图像不会包含在相册中）。3.2.5实战演练-健康水果网页使用“图像”按钮插入图像布局页面，使用“属性”面板改变图像的对齐方式和边距。效果图3.3营养美食网页案例分析设计理念操作步骤相关工具3.3.1案例分析本例是为美食家园餐饮公司制作的网页。美食家