网页设计及多媒体.ppt

2019/2/4,1,2012上海市高校计算机等级考（一级）复习,公共教学部 张丽 lucky_,网页设计,注意： 利用c:kswy文件夹中的素材（图片素材在wyimages中，动画素材在wyflash中） 按要求制作或编辑网页 效果参照样张，结果保存在原文件夹中,网页设计,修改网页属性 修改/页面属性 打开主页index.htm，设置网页标题为“西安世园会”；按样张设置网页背景色为浅绿色（#00ff99） (1/1) 打开主页index.htm。设置网页标题为：中学生健康膳食调查；设置网页背景图像为bj.gif (3/1),网页设计,文字输入及格式设置 输入或复制文字，属性面板设置格式 按样张在第3行第1列处插入“2011西安世园会简介.txt”中的有关文字，并按样张排版，标题设置字体为楷体_gb2312、颜色为蓝色（#0000ff）、大小18磅（或24像素）并居中，正文设置字体为楷体_gb2312、大小14磅（或18像素），毎段段首空二个字符。 (1/2),网页设计,添加水平线及格式设置 html面板插入水平线，颜色：编辑标签/浏览器特定 按样张在表格下方添加水平线，并设置水平线的宽度为75%，高度4像素，红色（#ff0000）。 (1/5),网页设计,添加项目符号 特殊项目符号 第一步：为文字使用标准列表 第二步：新建css样式，样式规则中定义列表符号 第三步：选中需要项目符号的文字，使用新样式。 在表格的第2列单元格插入文本文件“文字.txt”中的相关内容，设置项目符号。(空心圆项目符号)。 (3/4),网页设计,添加或修改滚动字幕 添加：插入/标签/html标签/页元素: marquee 修改属性：标签(marquee)面板/属性 按样张将网页上原滚动字幕“2011年西安世园会”，文字改为“2011年西安园艺博览会”，字体隶书、大小为24磅（或30像素），颜色为(#ff0066)，所在单元格背景颜色为(#66ff33)。 (2/4),网页设计,网页中使用表格 选中表格或单元格，使用属性面板 设置表格属性：对齐方式居中对齐、边框线宽度、单元格衬距（填充）和单元格间距都设置为0。(1/1) 在水平线下方插入一个1行2列表格，设置表格属性：边框线宽度0、单元格衬距（填充）为0、单元格间距0，水平居中，指定宽度为浏览器窗口的60%，将表格的背景色设置为白色。 (3/2) 注：表格属性中需将表格宽度转换成百分比,网页设计,网页中使用图片 按样张在第3行第2列插入图片new.jpg，设置图片宽度为550像素，高度280像素，并链接到网页np.htm，单击后在新窗囗中打开。 (1/3) 在表格的第1列单元格插入图片“baota.gif“，设置图片的宽度和高度都为160像素，为图片添加“食物金字塔“的说明，使其在浏览时，鼠标移上去停留后会自动显示该文字，将图片超级链接到，并能在新窗口中打开。 (3/3),网页设计,网页中使用动画 常用面板/flash 删除第1行的图片，按样张在单元格中插入动画xa.swf，设置宽度为820像素，高度为110像素，居中。 (2/2),网页设计,网页中使用表单 按样张第2行第1列插入表单，设置“全文”、“标题”、“标签”三个单选按钮，默认选中“标题”；在右边添加文本框、添加“搜索”按钮。 (1/4) 编辑修改表格第1列中内容使其与样张一致，在第1列中添加复选框表单元素，并设置默认选项为都选中，添加第2列为单选按钮表单元素，在表格最后一行添加两个按钮“提交“和“重置“，并居中。(4/5) 为注册下的用户名和密码后面添加文本框，设置文本框宽度都为15字符，并在下面添加两个按钮，分别为“提交”和“重置” 。(7/3),超级链接,由文字建立两个网页之间的超级链接 由文字建立用一网页不同段落之间的超级链接 在本页中部的文字“第十三届世界游泳锦标赛”前添加书签（锚）lm，并为“第十三届：2009年7月19日-8月2日 罗马”设置链接，链接到书签（锚）lm。设置已访问链接颜色为：灰色（#333333）。(7/3) 设置用户电子邮件地址、其他网站等超级连接 设置“联系我们”链接到。 （mailto:邮件地址）(1/5),超级链接,由图片建立超级链接 按样张在第3行第2列插入图片new.jpg，设置图片宽度为550像素，高度280像素，并链接到网页np.htm，单击后在新窗囗中打开。 (1/3) 由图象的一部分创建超级链接(热点),多媒体操作,注意 根据要求打开文件素材 根据要求保存文件，注意文件名称、文件格式及保存位置 打开“c:素材”文件夹中的picture1.jpg和picture2.jpg，参照样张结果以photo.jpg为文件名保存在c:ks文件夹中，结果保存时请注意文件位置、文件名及jpeg格式。 打开c:素材文件夹中的sc.fla，按下列要求制作动画，效果参见样张，制作结果以donghua.swf为文件名导出影片并保存在c:ks文件夹下。,图像处理,图像合成 方法：选取素材中的图像，复制到另一图像。 选取工具：魔棒、套索、选框 打开c:素材文件夹中的相框图片picture01.jpg，将图层命名为“相框”，删除相框内部区域内容；在相框图层下新建图层，填充白色，命名为“背景”；打开picture04.jpg猴子图片素材，将图像中的猴子部分合成到文档中，适当调整猴子的大小和位置，将该图层置于“背景”与“相框”图层之间。(1/1),图像处理,打开c:素材文件夹中的picture09.jpg、picture10.jpg和picture11.jpg，将picture11中的相框合成到picture09.jpg中。(5/1),图像处理,图像编辑 图像大小、位置、填充等变化：编辑菜单 打开picture17.jpg（鲜花），将其中的花朵部分合成到picture16.jpg，翻转并调整大小。 (8/3) 图像调整 图像去色、反相、替换颜色等变化：图像/调整 打开c:素材文件夹中的picture12.jpg和picture13.jpg，将素材picture13.jpg背景层复制一层，执行“图像/调整”中的“去色”，将去色后的图像再复制一层，执行“图像/调整”中的“反相”。 (6/1),图像处理,图层样式使用 图层/图层样式 复制“相框”图层，删除“相框副本”图层相框外部，对该图层设置斜面和浮雕，深度300%。 (1/4) 选择相框图层，使用适当的选区工具选择心形相框外部轮廓部分，通过拷贝产生新图层，并将该图层置于最上层，设置投影样式，距离7个像素。(3/4) 给相框添加“黄色、紫色、橙色、蓝色”的渐变叠加、斜面和浮雕及投影图层样式，投影距离为10像素。(5/2),图像处理,滤镜使用 将“反相”后的图层的混合模式改为“颜色减淡”，并添加半径为20的高斯模糊，合并所有图层。(6/2) 输入直排文字“傲雪欺霜“ （华文新魏、60点、白色），栅格化文字层并设置从左的“风“滤镜效果。(8/5),图像处理,添加文字 添加普通文字并设置文字层样式 添加蒙版文字并进行编辑 使用文本工具书写“我最调皮”，字体为隶书，36点，白色，按样张稍作旋转，设置该文字层图层样式：投影和描边，描边的颜色设置为（#468def），大小为3个像素。(1/5) 使用文本工具书写“我排在第一“ ，字体为隶书，48点，白色，设置该文字层图层样式：投影、填充颜色为（#468def），结构大小为3个像素描边。 。(3/5) 利用文本工具输入文字“夕阳无限“，字体为方正舒体，大小48点，将文本填充为“色谱“渐变，并加上5像素红色描边。 (4/3),动画制作,设置影片属性，如大小、帧频等：修改/文档 设置影片大小为550px400px，帧频为10帧/秒。 (1/1) 设置影片大小为550px400px，帧频为12帧/秒，背景色为黑色。 (2/1) 注意：添加并选择合适的图层，动画总长为40帧。,动画制作,逐帧动画 操作：逐帧制作 新建图层2，将“光标”元件，从第1帧开始，利用逐帧动画制作如样张所示的效果。(6/2) (2010) 新建图层3，将“文字“元件，从第6帧开始，利用逐帧动画制作如样张所示的打字效果。(6/3)(2010),动画制作,运动动画 条件：图形元件，文字、位图图形需转换为元件。 操作：设置关键帧，添加补间动画 新建图层，将“文字1”元件放置在该图层，在第1帧、第10帧、第20帧、第30帧处设置关键帧，创建从第1帧到第30帧逐字出现的动画效果，并显示至40帧。(1/3) 新建图层，将“毛笔”元件放置在该图层，在第1帧、第10帧、第20帧、第30帧处设置关键帧，创建“毛笔”元件从第1到第30帧，从左向右运动，从第31帧到第40帧，逐渐消失的动画效果。(1/4),动画制作,形状动画 条件：矢量图形，图形元件、文字等需分离，位图图形需转换为矢量图形（修改/位图/转换位图为矢量图） 操作：设置关键帧，添加形状动画 新建图层，将“球”元件放置在该图层，按照样张，在第1帧、25帧处设置关键帧，创建球的运动动画，在第26帧、第40帧处设置关键帧，创建“球”被撞成“气体”的变形动画。(3/3),动画制作,多图层动画 注意：图层顺序 (d卷) 设置影片大小为550px440px，帧频为10帧/秒。 将“背景“影片剪辑元件放置在图层1中，并显示至60帧。 新建图层，将图片“背景1.png“放置在该图层。 新建图层，将“元件1“放置在右侧圆形区域内，在第60帧设置关键帧，将“元件1“放置在背景中心绿色圆形区域内，调