(
课件网) 创建“杨柳青饭店” 网站 高等教育-出卷网- 网页设计与制作 教学目的： 了解杨柳青饭店网站设计的特点 帮助学生理解和掌握插入和编辑图像 帮助学生理解掌握制作超级链接 培养学生综合运用多种软件工具(Photoshop+Dreamweaver等) 教学重点： 帮助学生理解和掌握插入和编辑图像 帮助学生理解掌握制作超级链接 知识点： 图像和图像占位符 图像属性 鼠标经过图像 超级链接 图像热区 1. 项目描述与分析 项目描述： 为一家饭店设计制作、编辑“关于我们”、“特色菜肴”、“厨师风采”页面 项目分析： 本项目主要介绍在网页中如何插入及编辑图像，及如何制作超级链接。 本项目的案例网站是杨柳青饭店，饭店属于食品类网站，一般用色都以暖色调为主，暖色让人感觉温暖，并提高食欲，所以杨柳青饭店主色以桔色为主，然后配以网站的菜肴图片，给人身心放松，舒服的感觉。 最后一个任务是“厨师风采”，通过制作相册的方式来制作热点链接，给人轻松愉悦的感觉，让食客给与杨柳青饭店很多好感。 2. 预 备 知 识 （1）、图像 、图像占位符和图像属性 图像是网页中最主要的元素之一,漂亮的图像和按钮可以使网页更形象和生动，而且配合文字能更直观的表达主题，会使网页更具有生命力。但在网页上加入的图片越多,浏览的速度就会受到影响导致用户失去耐心而离开页面.网页中使用的图像可以是GIF、JPEG、BMP、TIFF、PNG等格式的图像文件,其中使用最广泛的主要是GIF和JPEG两种格式. 图像占位符是指在江最终图像插入到网页中之前的替代图像，为的是在不确定图像时对稳拿网页进行布局，图像占位符可以设置不同尺寸、颜色和文字来替代图像。 图像属性在文档插入图像后，Dreamweaver CS6会自动按照图像的大小来显示，所以如果有需要我们还可以在属性里对图像大小、位置和对齐等进行调整。 （2）、鼠标经过图像 鼠标经过图像是一种在浏览器中查看并使用鼠标指针移过时发生变化的图像。这种图像是由主图像（首次载入页面时的图像）和次图像（鼠标指针滑过时显示的图像）组成的。鼠标经过图像中的两个图像的尺寸必须相同，如果不相同，Dreamweaver CS6会自动将两个图像调整为相同尺寸。 （3）、超级链接 超级链接属于网页的一部分，是一种与其它网页或站点之间进行链接的元素。各个网页链接在一起后，才能构成一个网站。所谓的超级链接是指从一个网页指向另一个目标的链接关系，整个目标可以是另一网页，也可以是一张图片、一个电子邮件地址、一个文件，甚至是一个应用程序。在同一个网页中用来超级链接的对象可以是一段文本或者一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示喜爱浏览器上，并且根据目标的类型来打开或运行。 （4）、热区链接 超级链接属于网页的一部分，是一种与其它网页或站点之间进行链接的元素。各个网页链接在一起后，才能构成一个网站。所谓的超级链接是指从一个网页指向另一个目标的链接关系，整个目标可以是另一网页，也可以是一张图片、一个电子邮件地址、一个文件，甚至是一个应用程序。在同一个网页中用来超级链接的对象可以是一段文本或者一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示喜爱浏览器上，并且根据目标的类型来打开或运行。 3.项目任务 任务一、制作“关于我们”页面 插图图像 插入图像占位符 设置图像属性 “关于我们”网页效果图 任务二、制作“特色菜肴”页面 插入鼠标经过图像 添加背景图像 设置超级链接 “特色菜肴”网页效果图 任务三、制作“厨师风采”页面 创建热区链接 “厨师风采”网页效果图 4. 知 识 链 接 （1）、 线 上 学习线：网站欣赏 大疆无人机近年来风靡全球，它的网站信息简约明了，少 ... ...
