《新闻网页设计与制作实验》课程实验大纲.docx
- 文档编号:30568490
- 上传时间:2023-08-16
- 格式:DOCX
- 页数:49
- 大小:46.14KB
《新闻网页设计与制作实验》课程实验大纲.docx
《《新闻网页设计与制作实验》课程实验大纲.docx》由会员分享,可在线阅读,更多相关《《新闻网页设计与制作实验》课程实验大纲.docx(49页珍藏版)》请在冰豆网上搜索。
《新闻网页设计与制作实验》课程实验大纲
《新闻网页设计与制作实验》课程实验大纲
课程名称:
新闻网页设计与制作实验实验学时:
72
适用专业:
新闻学专业(本科)课程类别:
必修
一、实验实验任务与目的:
本课程面向新闻学的学生设立,通过本课程的学习,使学生在了解网页设计一般概念的基础上,了解网页设计的一般程序与步骤,掌握合理有效的制作方法,培养起一定的动手能力,熟悉一个网站或一个网页完成的具体过程,并能进行一定的创作。
二、实验项目内容、基本要求与学时分配
序号
实验项目名称
实验学时
实验类别
实验类型
实验要求
实验内容提要
1
Fireworks新建文件处理矢量对象
4
专业
综合
必做
Fireworks基础;关于矢量和位图图形;关于在Fireworks中工作创建新文档;打开和导入文件;保存Fireworks文件;Fireworks工作环境;更改画布
2
Fireworks矢量对象高级处理
4
专业
综合
必做
选择和变形对象;选择对象;
选择象素;编辑所选对象
变形和扭曲所选对象和选区;组织对象
3
Fireworks网页文字中设计
4
专业
综合
必做
使用文本;输入文本;编辑文本;将笔触、填充和效果应用到文本;将文本附加到路径;变形文本;将文本转换为路径;导入文本;检查拼写
4
Fireworks提高图像设计的效率
4
专业
综合
必做
使用位图;创建位图对象;绘制、绘画和编辑位图对象
修饰位图;调整位图颜色和色调;模糊和锐化位图
5
Fireworks创建动画创建交互网页
4
专业
综合
必做
创建动画;制作动画;使用动画元件;使用帧;补间;预览动画;导出动画;使用现有动画优化和导出;关于优化使用“导出向导”;在工作区中优化;从Fireworks导出;使用“快速导出”按钮
6
Flash基础
4
专业
综合
必做
使用Flash:
Flash插图;Flash动画;Flash交互式影片;Flash应用程序开发;舞台和工作区;创建新文档;设置Flash中的首选参数
使用属性检查器更改文档属性;自定义键盘快捷键
7
Flash准备动画角色期中阶段性练习
4
专业
综合
必做
处理图形对象;选择对象;将对象分组;移动、拷贝和删除对象;层叠对象
8
Flash创建动画的形式
4
专业
综合
必做
用动作脚本撰写脚本;使用“动作”面板;使用外部文本编辑器关于语法突出显示;设置“动作”面板首选参数;使用代码提示为帧指定动作;为按钮指定动作;为影片剪辑指定动作
9
Flash创建复杂的影片剪辑元件
4
专业
综合
必做
使渐变色和位图填充变形;用滴管工具拷贝笔触和填充;锁定渐变或位图以填充舞台教学内容:
使用工具箱中的笔触颜色和填充颜色控件;使用属性检查器中的笔触颜色和填充颜色控件;使用混色器中的纯色和渐变填充;用墨水瓶工具修改笔触;用颜料桶工具应用纯色、渐变和位图填充;
10
Flash创建蒙板动画
4
专业
综合
必做
Flash绘画和涂色工具;关于Flash中的重叠形状;用铅笔工具绘画;绘制直线、椭圆和矩形;使用钢笔工具;使用画笔工具涂色;改变线条和形状轮廓;擦除;修改形状
11
Flash动画声音效果处理
4
专业
综合
必做
添加声音;导入声音;在影片中添加声音;向按钮添加声音;通过Sound对象使用声音;使用声音编辑控件;在关键帧中开始播放和停止播放声音;关于onSoundComplete事件;压缩声音用于导出
12
Flash创建基本交互动画
4
专业
综合
必做
用动作脚本撰写脚本;使用“动作”面板;
使用外部文本编辑器;关于语法突出显示;设置“动作”面板首选参数;
使用代码提示;为帧指定动作;为按钮指定动作;为影片剪辑指定动作
13
Flash创建高级交互动画
4
专业
综合
必做
处理影片剪辑和按钮;关于多个时间轴;使用动作和方法控制影片剪辑;用动作脚本处理事件;用动作脚本处理按钮;用动作脚本创建交互操作;控制影片回放;创建复杂交互性
14
Flash动画的最终合成及发布
4
专业
综合
必做
测试影片;优化影片;测试影片下载性能;创作和脚本撰写准则;使用调试器;使用“输出”窗口;发布;播放Flash影片;Flash影片中的Unicode文本编码;发布Flash文档;关于HTML发布模板
15
Dreamweaver建立简单的图文混排网页
4
专业
综合
必做
设置文档;创建Dreamweaver文档;使用“新建文档”对话框;打开现有文档;设置文档属性
16
了解Dreamweaver工作区
4
专业
综合
必做
使用Dreamweaver工作区;使用Dreamweaver窗口和面板;与其他应用程序一起使用Dreamweaver;自定义Dreamweaver:
基础
17
提高Dreamweaver网页创建效率
4
专业
综合
必做
管理您的站点;关于“站点”面板;关于站点地图;导入和导出站点从站点列表中删除站点;使用存回/取出
18
站点的整理维护与上传
4
专业
综合
必做
获取和上传文件;同步本地和远程站点上的文件;遮盖站点中的文件夹和文件
使用设计备注;使用报告改进工作流程;关于Dreamweaver中的“SiteSpring”面板;使用“Sitespring”面板
注:
1、实验类别:
基础、专业基础、专业、其它。
2、实验类型:
演示、验证、综合、设计研究、其它。
3、实验要求:
必做、选做。
三、实验项目的目的及要求
新闻网页设计与制作实验
(1)
一、教学目的
了解Fireworks操作环境、熟悉界面
二、教学要求
通过Fireworks入门课能够了解本软件的操作环境,了解最基本的的一些软件工具和菜单
三、教学时数
4课时
四、教学内容
Fireworks是流行的一体化Web设计工具的最新版本。
但是,它的Web创作特性比任何优秀的软件都有了明显的提高,特别是自从它用一种非常有用的HTML显示(超级链接标记语言)加入了丰富的WYSIWYG(所见即所得)显示功能,并且可以通过单击在Fireworks屏幕底部的标签在两种模式之间进行切换。
换句话说,可以用以前的HTML标记和包容器进行很好的工作,也可以在完全图形化的环境中进行工作,或者在两种环境下进行工作。
所以,灵活性是这个软件的特征之一。
Fireworks的设计特性是很丰富的。
可以开发基本的HTML文档,可以添加表、框架和多媒体,可以使用样式表,可以使用数据库,可以开发JavaScript和ActiveServerPages组件,并且可以添加动态的HTML。
但是,对许多用户来说,Fireworks真正的闪光点在于它的Web维护和管理功能。
开始,在你试图建立自己开始的几个Web页的时候,这些功能可能看起来没有那么重要。
但是不久之后,你就会发现自己需要依赖于它们才能进行工作。
一旦到Web服务器上,这些功能允许你直接处理它们,而省去了把新的或修改过的网页从本机上载到服务器的需要。
这些功能也会检查你的整个Web中的不再工作的超级链接,这是成功的Web维护中的一个主要问题。
无效的链接会打扰用户,甚至会破坏它们的可靠性。
Fireworks的另外一个重要功能是它能够控制用户和作者的访问。
即使希望Web的一部分是完全公共的,你也可以创建只有指定的用户名和密码的用户或作者可以访问的子Web页。
你也可以为浏览的目的把Web设置成完全公共的,且同时控制Web的作者和管理员的访问。
如果愿意的话,甚至可以限制对整个网站的访问。
对于适当的Web管理来说,“访问权限”是特别重要的。
Fireworks为Web的合作开发也提供了几个功能。
如果在开发自己的网站的时候牵扯到了别人的话,你可以给特定的作者或管理员分配专门的任务,可以生成一个任务列表来帮助你在完成设计的整个过程中跟踪这些任务。
利用称为“签入/签出”的功能,你可以确保在任何指定的时刻只有一个用户在编辑任何指定的网页。
你也可以为合作者建立Web讨论。
Fireworks是一个本质性的升级,它提供了全新的界面,几个重要的新功能,以及对现有功能的重大改进。
并且,随着这一新版本的发行,Fireworks已经直接捆绑到MicrosoftOffice2000,使得它们不仅具有统一的界面,而且具有了几个新的合作应用程序。
在Fireworks中,关于创建Web文档的大部分界面都保留了下来,只有一个重要的改动:
“Fireworks编辑器”,以前编辑部分的设计程序不再作为一个独立的程序存在。
相反,“Fireworks编辑器”已经成为一个单个的程序,现在叫作Fireworks的“网页”视图。
但是,以前版本的用户可以看出合并后的Fireworks就是以前的Fireworks资源管理器添加了一个新的视图。
几个新的或者改进后的创作功能作为新的“网页”视图的一部分出现。
层叠样式表支持获得了改进,现在已经支持“动态HTML”。
利用DHTML工具栏,可以很容易地创建特殊的效果,
包括鼠标的单击或双击、移动以及网页加载的DHTML事件。
例如,对于网页加载,可以对所有突出显示的文本从“DHTML效果”工具栏上选择飞入、擦除、缩放和五个其他效果。
Fireworks包含了6个主题,可以把它们指定到单个网页,或者指定到整个Web。
而且可以编辑所有主题中的组件来满足核心内容,或者创建新的组件。
在以前的Fireworks的版本中,可以利用SoftwareDevelopmentKit(SDK)附带的特殊程序来编辑和创建主题,但现在这个功能已经加入到主程序的“主题”对话框中。
在Fireworks中,文档的特定元素的位置是非常精确的。
当想在网页上放置一个元素的时候,可以利用像素准确定位和布局的新功能来精确地放置这个元素。
可以给元素设置一个绝对位置,使得不管如何修改这个网页,或者修改定位,都可使元素保持相同的相对位置,它都会出现在浏览器的同一个位置。
浮动定位可以定位一个元素,以便文本或其他元素可以环绕在它的周围,而Z定位可以在元素的顶部放置元素。
这一功能来自CSS2.0(“层叠样式表”版本2.0)技术说明书,并且只对具有CSS2.0能力的浏览器有效,但是它对可以要求浏览器的版本的企业网可能是特别有用的。
但是,随着越来越多的用户升级到版本4.0的浏览器,对他们来说这将也是有用的。
如果你习惯于在原始的HTML模式下创建网页,Fireworks比以前的版本提供了良好的支持。
首先,Fireworks不再修改导入到程序中的HTML代码,这对基于代码的作者来说是一个巨大的改善。
其次,你不再需要通过原先的复杂步骤在文档中添加原始HTML代码:
Fireworks提供了通过简单的鼠标单击就可以使用的HTML视图,它可以只读取代码本身并且可以完全编辑。
在这个视图中可以编辑HTML、ASP、DHTML,甚至可以编辑XML代码。
在这个视图中,可以指定所希望的代码的表现形式。
用这种方法总可以找到希望的代码,以便Fireworks会使导入的代码按照你指定的方式进行显示。
另外,Fireworks中的一个新的“显示标记”功能准确地显示了在正常的“网页”视图(所见即所得)中标记所在的位置。
在选中了“显示标记”之后,HTML标记和容器会出现在“网页”视图中,以帮助你准确地确定Fireworks是如何把“所见即所得”的设计转换成原始的HTML代码。
它对于故障排除来说也是一个重要的功能。
五、实验环境
戴尔计算机、网络交换机(TP-LINK、D-LINK、3com)、无线路由器(108M)(TP-LINK、D-LINK、3com)、视频工作站DELL、投影仪及屏幕、等离子电视
新闻网页设计与制作实验
(2)
一、教学目的
开发基本网页:
文本、列表和超链接
二、教学要求
通过Fireworks课能够掌握本软件的文本、列表和超链接
三、教学时数
4课时
四、教学内容
考虑网页设计
和用文本编辑器编写HTML代码相比,在Fireworks的网页视图中制作网页要容易一些。
你可以在网页上放置几个标题、一些文本段落、三个或四个图像(也可能是一个imagemap)、一个列表、一个窗体、一个表、一些动态HTML效果、一些声音以及你愿意拥有的尽可能多的超级链接,这些都可以在很短的时间内完成。
这样你已经有了一个主页了。
然后又可以制作出另一个网页,然后又是一个,很快,你已经有了一个相当不错的Web站点了,并且可以让全世界的人来访问,不是吗?
但是糟糕的设计是许多Web网页的报应,并且如果你不知道,没有遵循几个属于常识的指导原则,那么就很可能创建了一个乏味的网页。
最重要的是,你不得不考虑你的访问者,以及他们在多大程度上愿意访问你的站点。
为访问者进行计划
如果你曾经花费时间浏览Web,那么你肯定已经遇到过许多不愿意再重新访问的站点,因为这些站点的第一页往往有下列的一个或更多的问题:
•花费大量的时间来加载。
•没有明确的意图。
•布局很糟糕或写得很差。
•晦涩的导航工具。
•没有像它所说的那样与其他站点相连。
•没有有用的信息。
显然,你并不希望人们也这样对待你的站点,但是怎么才能确保他们不这样做呢?
简短的回答就是把你放在访问者的位置上,想像一下你作为观众所希望得到的东西。
任何作者,无论
是出版物、多媒体或者Web的作者,都不得不这样做,或者承担失败的危险。
作为实例,考虑你自己的经验。
当你打开一般新书或杂志,或者看一个出现在你的浏览器中的未知的Web网页,在内心深处你是怎么想的呢?
你可能对此并没有清醒的意识,但是它总
是存在的:
“这里有什么适合我的内容?
”你希望从这个网页中得到一些东西:
信息、娱乐、审美的愉悦或者是智力的启发,这取决于你的品味和当时的需要。
如果你在头一两分钟之内,没有感觉到这些内容,那么你就会很快地到别处去了,如果你的访问者从他们在你的站点的第一个Web网页上得到相同的感觉,那么他们也会这样做。
创建新的只有一个网页的站点和它的主页
现在你已经了解了一些基本的设计规律,本章剩余的部分将介绍如何在一个空白的网页上放置文本和超级链接。
要创建的网页是只有一个网页的站点的主页。
要创建这样的一个站点,可以按照下面的步骤进行操作:
1)启动Fireworks。
选择“文件”、“新建”、“站点”,在出现“新建”对话框的时候,选择“只有一个网页的站点”。
这个网页会自动地成为站点的主页。
2)找到标有“指定新站点的位置”的文本框。
在这里,输入新的Web的路径名称(如果是一个基于磁盘的Web),或者输入新的Web的URL(如果是一个基于服务器的Web)。
完成之后,选择“确定”。
如果这是第一次运行Fireworks,它会询问是否要创建MyWeb目录。
如果愿意的话,可以接受这一默认设置。
注意你可能会回想起第2章“Fireworks的环境”中,必须把新的基于服务器的站点的名称追加到计算机的名称后面;例如,你可以输入http:
//mypc/NewWeb,在这里,mypc是计算机的名称,NewWeb是站点的名称。
如果没有按照这种方式修改新的站点的名称的话,将会得到一个错误信息,提示不能在这个位置创建一个根Web。
3)将出现一个对话框,告诉你正在创建新的站点。
理解超链接
没有超链接,就不会有全球信息网(WWW),只是一大堆孤立的网页,就像在一个地图上没有标明的未知岛屿。
当人们说浏览Web时,不是指别的,它实际上就像大量的,不断扩充的
岛屿的集合,而超链接就像通过电缆将这些岛屿连接到一起的贸易和通讯路线。
超链接并不像字面上看起来那么有诗意,它通常指向那些高亮显示的词语(或者是特殊定义的图像),通过在
Web网页上单击它们来访问该Web上或者Internet上的其他资源。
在这个突出显示或图像后面隐藏的是一段HTML代码的字符串,它告诉你的浏览器新的位置的URL,并且指挥浏览器跳到那个位置去。
当你准备了超链接之后,Fireworks将自动生成这种代码。
有效使用超链接
大多数超链接将由词语组成,而不是图像。
当你选择用哪些词语来表示这个超链接时,应从你的读者的角度来考虑。
如果链接本身暗示了进入此链接将会发生的事情,那么这将是有益的。
对于一个含糊的链接,读者必须进入链接之后,才能发现他是否真正希望去,那么这是潜在的时间浪费。
例如,一个模糊的链接写着:
“单击此处HTML4;”一个清晰的链接写着:
“HTML4特征参考。
”你可以通过编辑周围的文本来安排它的上下文,实现使之更清晰的目的。
另外,超链接本质上要求从背景中突出。
它们吸引读者的目光,如果它们选取得不是很好,或者有太多的链接,那么它们的出现将压倒周围文本的含义。
你也应该注意避免链接太短,以致于它们毫无含义(例如“向后”)或者太长,例如一个完整的句子。
而且,你应该小心使用常规的链接颜色。
在浏览一个网页的时候,人们希望能够辨别出他们已经访问过的链接。
因此要确保访问过和没有访问过的链接区分明显。
最后,不要在你不希望成为超链接的文本下面加下划线。
如果你的网页超出两屏,应该考虑在合适的位置重复这些浏览链接。
以便于读者无需经所有的路径返回到文档的顶部,来获得那里的超链接。
你经常会在一个网页的底部看到重复的文本浏览控件,和相应的图形控件。
提示避免在浏览链接中使用使用“向后”和“向前”标签,因为它们的表现如何取决于访问者是如何访问你的站点的。
五、实验环境
戴尔计算机、网络交换机(TP-LINK、D-LINK、3com)、无线路由器(108M)(TP-LINK、D-LINK、3com)、视频工作站DELL、投影仪及屏幕、等离子电视
新闻网页设计与制作实验(3)
一、教学目的
用图形和多媒体增强用Fireworks编辑的网页
二、教学要求
通过Fireworks掌握图形和多媒体的使用情况
三、教学时数
4课时
四、教学内容
使用图像不但可以增加视觉效果、提供更多信息、丰富文字的内容,而且可以将文字分为更易操作的小块,更重要的是,能够体现出你的站点的特色。
没有哪一个网页制作者会不想使用图像这种资源。
不过,要想使用图像达到最佳的效果,还得颇费心思。
假如你有艺术家的天分和眼光,那么在这个方面就很有优势。
但是如果你没有该方面的训练,也不代表你做不好这件事情。
在往网页上添加图像文件时,首先问自己以下几个问题:
•这些图像用来达到什么目的?
•什么样的内容最适合这些目的?
•这些图像有多大(即下载这些图像需要多长时间)?
•要使用多少个图像?
•这些图像和其他文字以及相互之间有什么联系?
•将这些图像放在网页什么位置最好?
回答这些问题,能够让你避免将网页制作成许多不相关的东西的大杂烩。
当你确定使用哪些图像时,在你的头脑中一定要有以下几条指导性原则:
•不要使用让你的文字和图形可视性减弱的背景图像;
•尽量不要使用很大的图形文件,而导致下载时间很长。
如果你想用这样的图像,最好使用小图标,并建立一个链接到这个大图像。
最大的单张图像最好应小于25KB,除非你确实需要这样一幅更大的图像。
尽量使一张网页上所有图形的大小总和小于30KB;
•谈到尺寸,使用较宽的图形时一定要小心谨慎。
假如访问者不是在全屏模式下运行浏览器,或者他们的硬件只支持VGA(640×480)分辨率,这时图像的边缘部分就会被裁去。
图像的宽度保持在5~6英寸,并且别忘记测试你的最后结果;
•设计图像时,要保证可以单击的区域能够很容易识别;
•挑选浏览器可用的调色板,并尽可能坚持使用它。
•不要使用过多的特殊效果,比如闪烁文字、渐淡、渐化和慢移。
许多人对那些新奇的东西感到讨厌,尤其是页面上的闪烁,缓慢的蠕动和滑动效果。
特别地,如果你想让别人的注意力集中于某一段文字的内容时,切记不要在文字周围使用跳动的图案,以免使访问者分心。
图像基础
插入到网页中的图形称为内联图形。
其中最常用的两种图像文件格式是GIF(GraphicsInterchangeFormat,可交换的图像文件格式)和JPEG(JointPhotographicExpertsGroup,联合图像专家组)。
所有可以查看图形的浏览器都支持这两种格式,因而可以毫不费力地显示。
不过,图像文件还有几种其他格式,例如TIFF、PCX、BMP和PNG。
较新版本的Netscape和Mosaic浏览器可以通过调用专为这些格式设计的助手程序来解决这个问题。
大部分情况,你最好采用下载
GIF和JPG格式,也可以是PNG格式。
注意PNG(PortableNetworkGraphicsFormat,可移植的网络图像文件格式)是相对较新的图形文件格式,它或许会逐渐成为网络图像的标准格式。
它支持真彩色,这使它在照片图像方面比GIF
更优越;而且,区别于JPEG格式,它的压缩是无损压缩(也就是说,图像文件被压缩时,图像质量不会降低)。
在你的网页中,应采用什么文件格式呢?
GIF或者JPEG?
其实,每一种格式都有其优点。
GIF格式的优越之处在于它是万维网中最基本的文件格式,至少现在是。
浏览器可以很快完成该格式的解压缩,因此,在访问者的屏幕显示中GIF格式的文件格外地活跃。
它是一种选择用于线条艺术的图形格式,也就是不需要像照片那样柔和的颜色变化的艺术。
它能够支持256色,还可以通过抖动处理来模拟更多的颜色。
相反地,你还可以减少颜色数,因为GIF格式的一个很有用的特点就是可以使用图像编辑器来减少图像中不同的颜色数,从而使文件变小。
另外,你还可以用图形编辑器来减小图像的尺寸。
这一点对JPEG格式可能有效。
GIF图像文件往往比等价的JPEG文件大出许多,因此在你获得GIF文件的高速解压缩的同时,你为此付出的将是在你的站点上保存一个更大的文件。
另一方面,尽管JPEG文件比GIF文件小,但是解压缩的速度比GIF慢。
JPEG文件格式比GIF优越的地方在于它可以支持近16,700,000种颜色,因此柔和变化的图像可以在屏幕上显示出很好的效果。
但是,至今还没有哪一个站点在网页上使用真正的高彩色或者真彩色图像。
话又说回来,这种显示技术相对于一年前已经得到了更广泛的应用,只不过大部分人仍在使用256色,所以说这种超高的显示质量似乎显得浪费了。
使用JPEG时,你还可以调整压缩级别(在Fireworks中,这等同于质量)来减小图形文件的大小。
调整压缩级别时,要注意压缩效果,因为压缩级别越高,图像质量就越低。
所以,你必须在文件大小和图像质量之间找到一个最佳的平衡点。
注意要达到更好的压缩效果,你最好使用专门的图形软件(比如Lview和ImageComposer)来调整JPEG图形的压缩比例,而不要用Fireworks的图形命令。
可以在http:
//www.lview.com/站点上获得Lview的测试版。
Fireworks200
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 新闻网页设计与制作实验 新闻 网页 设计 制作 实验 课程 大纲