第8章 快速创建Web站点 网页设计与制作教程（第3版） 教学课件.ppt

* 第8章 快速创建Web站点 8.1 快速创建静态Web站点 8.1.1 使用网页模板快速创建站点 1．通过Internet搜索引擎下载网页模板 图8-1所示的是在“百度”中以“网页模板”为搜索关键词找到的提供免费网页模板下载的站点页面。 2．通过模板创建Web站点 图8-2所示的是在FrontPage 2003中打开某网页模板主页文件后的显示。编辑修改后的主页效果如图8-3所示。 如图8-4所示的页面是将主页中除标题和版权部分外所有内容删除，并在二者之间插入一个1行1列的表格后得到的效果。 8.1.2 依托现有页面快速创建站点 1．保存单一网页及包含的图片 看到自己满意的网页，可执行IE浏览器“文件”菜单下的“另存为”命令，在打开的“保存页面”对话框中选择“保存类型”为“网页，全部（*.html;*.htm）”后单击【保存】按钮。 2．使用HTTrack下载整站内容 HTTrack Website Copier（简称为HTTrack）的使用方法十分简单，启动时会自动进入站点镜像操作的向导程序，如图8-5所示。 单击【下一步】按钮在图8-6所示的对话框中输入新建工程的名称，输入完毕后单击【下一步】按钮。 在图8-7所示的对话框中用户可以从“操作”下拉列表框中选择“操作类型”，如图8-8所示。 单击“限制”选项卡，打开图8-9所示的对话框。 单击“链接”选项卡，打开图8-10所示的对话框。 下载过程中显示图8-11所示的当前下载进程信息，经过一段时间的下载显示图8-12所示的对话框。 图8-13所示的是在FrontPage 2003中打开的主页index.html。 8.1.3 常用图片编辑修改工具 1．使用Photoshop修改图片 图8-14所示的是在Photoshop中打开的标题图片。 (1) 向图片中添加文字 打开图8-15所示的拾色器对话框。 如图8-16所示。在Photoshop中，文字是以“图层”的形式出现的，用户可在工具箱中选择“移动工具” ，并在图8-17所示的“图层面板”中选择文字层后用鼠标将其拖动到适当的位置即可。 (2) 设置文字效果 图8-18所示的是选择了“投影”效果后出现的设置对话框。 (3) 向图片中添加其他图片 用鼠标拖动出现在图片周围的控制点即可改变图片的大小，如图8-19所示。 得到图8-20所示的效果。 (4) 无痕迹除去图片中多余部分 拖动鼠标涂抹时，屏幕上会出现一个“＋”标记和一个“○”标记，分别表示取样点和复制点，如图8-21所示。 擦除了多余的部分后，可再次使用文字工具将需要的内容添加到导航栏中，图像修改完毕后的效果如图8-22所示。 (5) 切片图像 在图片和拖动鼠标“切出”图8-23所示的区域即可。 2．使用Gif Animator制作动画 (1) 使用动画向导合成Gif动画 如图8-24所示单击“动画向导”前面的按钮，将打开图8-25所示的对话框。 在打开的对话框中将需要的静态图片添加进来，如图8-26所示。单击【下一步】按钮，打开“动画向导—画面帧持续时间”对话框，如图8-27所示。 单击【完成】按钮，GIF动画制作完成，GIF Animator将完成的动画在程序窗口中打开，如图8-28所示。 (2) 添加预设动画效果 可以选择菜单中的“视频F/X”中的动画效果命令，来添加动画效果。“视频F/X”菜单如图8-29所示。 打开“应用过滤器”对话框，如图8-30所示。 打开“HueSaturation（色调饱和）”对话框，如图8-31所示。 设置完成后我们可以看到，在GIF Animator窗口下增添了8帧过渡画面，如图8-32所示。 打开“添加效果”对话框，如图8-33所示。 (3) 优化、预览与保存 处理完成的动画中会有一些冗余成份，需要让GIF Animator对Gif动画图片进行优化。 如图8-34所示单击GIF Animator窗口中的“优化”选项卡。 *