《清华网制作3.ppt》由会员分享，可在线阅读，更多相关《清华网制作3.ppt（34页珍藏版）》请在三一办公上搜索。
1、网页制作,计算机文化基础课程电子讲稿2008年11月 http:/,HTML,2,本次大课的内容提要,导入已有站点,网页布局小结（框架）,网页背景音乐处理,使用DreamWeaver润色网站,应用图像作网页背景,创建导航条,表单的创建,设计各种网页部件,3,框架布局,框架是一种将浏览器窗口划分为功能独立的多个区域的常用方法。框架集定义每个框架的大小、位置、名称和初始网页，普通网页提供每个框架的内容。一个框架的超链接可以更改显示在另一个框架中的网页。,框架名称 初始网页banner页头.htmlMain 柠檬寝室.htmlcontents 菜单.htm,4,认识框架集网页,框架集是一种特殊的网页
2、，该网页定义了整体的框架布局，但不提供实际内容。,VIVABAND 此网页使用了框架，但您的浏览器不支持框架。,vivaband.htm,5,框架网页的创建（1）,6,框架网页的创建（2）,7,框架网页的创建（3）,分别为不同的框架设定初始网页文件,banner页头.html,Main 柠檬寝室.html,contents 菜单.htm,8,框架网页的创建（4）,设置框架属性：选中具体的框架，执行“框架”/“框架属性”命令。,9,框架网页的保存,需要分别保存每一个框架对应的网页文件，并要保存“框架集”文件本身。对话框的右侧为框架示意图，其中以深兰色框来突出显示的框架就是当前需要保存的框架。,当
3、前要保存的框架,10,框架之间的超链接,11,网页背景音乐处理,尽量使用mid格式的音乐文件，避免产生慢速网页。,12,网页背景音乐处理,设置开启新窗口的超链接,如何让主页音乐贯穿整个网站？,13,利用框架使网页背景音乐连贯,1.把index.htm重命名为index-conten.htm2.新建一个标题框架网页3.下框架设置初始网页为index-conten.htm4.上框架新建网页,14,利用框架使网页背景音乐连贯,5.取消index-content网页的背景音乐设置6.保存框架集网页为index.htm,上框架网页为index-top.htm7.在index-top.htm网页中设置背景
4、音乐,8.设置上框架属性:框架高度为1像素,取消显示边框复选框,15,创建和使用表单,表单能够向网页中添加文本框、单选按钮、复选框、按钮等用户界面控件。每个网页可以包含一个或多个表单，每个表单占据网页中的一个特定区域。表单中必须有一个元素作为“提交”按钮。,单击“提交”按钮后，浏览器将数据传送给服务器，站点服务器需要某种程序读取这些数据并进行处理。程序可能将数据保存在文件或数据库中，也可作为电子邮件发出等等。,申请免费留言本http:/www.xun-,16,发布站点,发布站点：将制作站点中的文件复制到一个目的地（一个他人可以浏览其站点的站点服务器）。准备工作：检查断开的超链接、测试站点的各项
5、操作都能正常工作。发布命令：使用菜单命令“文件”/“发布站点”。,17,来源：http:/,免费网页存放空间,18,导入已有站点,站点管理器窗口,观察站点管理器窗口执行“站点”/“新建站点”命令，打开“站点定义”对话框 输入站点名称 不使用服务器技术 确定站点路径 无远端服务器,本地站点,具体操作参考上机指导第8章实验一任务1,19,观察“站点定义”对话框,20,认识Dreamweaver界面,视图按钮,插入各种对象,网页编辑窗口,网页间切换标签,站点管理面板,标签选择器,属性面板,21,应用图像作网页背景,选择适于作背景的图像文件,选择平铺效果具有整体感的图像作背景,22,使用导航条,交互式
6、按钮 普通状态 鼠标经过状态 鼠标按钮状态,在Dreamweaver中，所有网页中使用的图像文件都必须保存在一个已经定义好的本地站点中。,23,创建交互式按钮,PhotoImpact,三个简单步骤：选取部件、自定义部件、导出,24,导出交互式按钮图像,25,设计各种网页部件,图标横幅按钮按钮栏Rollover按钮分隔条,PhotoImpact,26,动画原理与制作,动画的形成是由连续显示数张图片所造的视觉效果，其原理与卡通影片是一样的，我们可以设定每张图片所停滞时间，从而造成不同的动画显示速度。当要制作一张动画时，可使用有支持GIF格式的绘图软件来制作图像（或扫描进来的影像），将这些构成动画的
7、连续数张图像分别储存成不同档名的GIF文档，然後再使用动画制作软件，如GIF Construction Set或Ulead GIF Animator动画制作软件来整合这些图像，针对每张图像设定相关的属性（如显示的停滞时间），以完成一幅动画的制作，且在这些软件中就可以直接观看动画的显示。,27,Ulead GIF Animator制作工具,工作区（画布）,帧窗格,对象管理器,延时,28,使用动画向导制作动画（1）,在启动Ulead Gif Animator 程序时，会显示一个启动向导来引导我们创建动画。,将一系列静态图片连接生成动画。,29,使用动画向导制作动画（2）,步骤1：设置画布尺寸,步骤
8、2：选择文件,步骤3：设置帧延迟时间,将一系列静态图片连接生成动画,30,使用动画向导制作Gif（3）,进入编辑模式,步骤5：输出gif动画:执行“文件”/”另存为”/“gif文件”命令,步骤4：在预览模式下观看动画效果,31,制作Gif动画,添加图像,改变画布大小,选定范围工具：魔术棒,自动创建,手动创建,32,制作横幅文字（1）,先创建一个空白的动画文档，然后在“帧”菜单中选择“添加横幅文本”,在文本标签中设置字体、字号、颜色、阴影等效果,33,制作横幅文字（2）,设置文字动画效果,设置帧画面的延迟时间,添加霓虹效果,最终效果,34,用视频片段制作 GIF 动画,1.创建一个新的空白动画。2.单击标准工具栏上的“添加视频”按钮。3.选取影片文件，单击“区间”按钮。4.打开“区间”对话框，利用“开始标记”和“结束标记”选取视频片段。5.单击“确定”按钮，关闭“区间”对话框，返回到“添加视频”对话框。单击“打开”按钮，所选择的帧就被加载到 GIF Animator 中。,
