大学计算机导论实践报告
中南大学
大学计算机导论实践报告
题目学生姓名指导老师学院专业班级学生学号
201*年12月16日
大学计算机基础实践报告
1.任务内容1.1.题目内容
学习掌握中文演示软件PowerPoint201*的操作及使用，并用此软件实际一份综合演示报告。
1.2.内容主题
陕西风景名胜展示。
2.设计的步骤2.1.所选题目分析
题目的目的是掌握PowerPoint201*的操作和使用。通过自由确定主题，利用一份完整的综合演示报告完整表现出相应主题，使用音乐、图片等多媒体元素辅助与衬托。因此，要首先确定报告主题，然后应该确定演示报告的组成板块及彼此联系，最后进行逐个的详细设计以及资料的收集。进而逐步的完成演示报告，并从中熟悉PowerPoint的操作和使用。
2.2.内容主题分析
综合演示报告所选主题是陕西风景名胜展示，目的是展示自然人文风光，依次简介和展示钟鼓楼、大雁塔、半坡遗址、秦岭、黄帝陵等22处风景名胜。按照以西安为起点，按照东西南北顺序依次主要通过文字与图片结合的方式来表现。
2.3.页面设计分析
首页为封面并点名主题。第二页为目录页，超链接至对应页。最后一页为“谢谢观赏”和超链接目录。在除了第一、二页外每页插入动作按钮，便于在上下两页以及第二页的目录和最后一页间切换。在首页插入音乐，播放方式为跨幻灯片播放与循环播放，作为背景音乐。
其余各页为演示文稿的正文部分。通过母版设计，完善内容版式，方便使用，同时确定页面背景与色调。各页基本组成为标题、文字介绍、图片、装饰性艺术字、相关网站的超链接。基本为一处景点一页，共37页。
每一页中的各组成部分均设计有顺序的动画，依次自动出现。在内容
1大学计算机基础实践报告
重叠与同一页的分别设置退出动画。个别使用突出动画和动作路径动画。
每一页都设置切换动画以及与动画演示时间配合的换片时间，实现自动播放。
3.采取的手法的手段3.1.制作工具
PowerPoint201*作为演示报告制作工具。Photoshop作为部分图片的处理工具。
3.2.幻灯片母版设计
在PowerPoint201*的“视图”菜单下打开幻灯片母版，进行设计母版以方便现在和将来的幻灯片的制作。
利用现有版式制作自己所需新版式，如一个与背景同色标题和多个内容占位符组成的多张图片展示版式，一个竖排标题和两个上下并列文本占位符的目录页版式。
然后在母版中加入每个幻灯片均拥有的公共元素，如统一的页脚和链接到上下页和首末页的动作按钮。
最后改变利用幻灯片设计更改幻灯片主题，如色调、字号、字体颜色、背景图片等。
3.3.图像音频的插入
插入图片的步骤：插入→图片→选择相应图片文件→点击“确定”然后调节图片大小与位置，图片的处理利用Photoshop完成。插入音频的步骤：插入→音频→选择“来自文件”→选择相应音频文件→点击“确定”。
然后在“自定义动画”设置音频播放时机与触发方式。对于背景音乐，将背景音乐插入至首页，然后设置为“放映时隐藏”、“循环播放，直到停止”，在“自定义动画”中设置为第一个播放，播放时间为“之前”。
3.4.动画的使用与幻灯片切换
在每一页幻灯片中，依次选中某一文字、图片等元素后，选择“动画”菜单，选择所需的进入动画。需要突出效果的，在进入动画之后插入突出
2大学计算机基础实践报告
动画，退出动画设置同理。然后打开“自定义动画”窗口，通过上下拖动改变播放顺序，同时设置播放时机、播放速度和延迟时间，实现动画自动有序播放。
之后在“动画”菜单中选择所需的切换动画，然后根据动画时长与内容信息量设置换片时间，实现自动换片。
3.5.幻灯片之间和幻灯片与网页之间的超链接
选中需要插入超链接的文字、图片等，然后右击选择“超链接”或点击“插入”菜单下的“超链接”。对于需要链接到报告内的幻灯片的，在“本文档中的位置”下选择相应幻灯片后确定；对于需要链接到报告外的网页、文件的，在“现有文件或网页”下填入相应地址或选择相应文件后确定。
按照以上方法制作目录，分别超链接到相应幻灯片。同时在华清池、大明宫等页插入转到互联网网页的链接。
在每一页中插入转到首末页、上下页的四个动作按钮。
4.遇到的问题与解决办法4.1.使用母版的作用及如何设计
使用母版可以方便快捷的设置幻灯片的各种版式，插入一些统一的元素，减少重复操作。对母版的幻灯片主题，即主色调、字号、字体颜色及背景，以及四个动作按钮的插入
4.2.在同一张幻灯片中依次展示多张图片文字和设置图片移动动画
效果
在一张幻灯片中插入全部图片，调节好图片大小及位置，然后按照出现顺序添加出现、退出动画的组合，并对退出动画作适当延时处理。
对需要移动的图片插入动作路径。
4.3.实现在每页幻灯片之间任意的切换
制作目录，并插入超链接至各文字标题的对应幻灯片，在最后一页重复目录。
在每一页中插入动作按钮，链接到目录页、结束页、上一页和下一页。
3大学计算机基础实践报告
5.总结
此次课程设计通过综合演示报告的制作，熟悉了幻灯片的综合设计，以及WindowsXP和计算机的使用，也进一步了解到PowerPoint201*的用途和操作，同时也学会了一些基本的文档处理的方法和操作。
在素材收集过程中，感受到互联网在信息容量和获取中的优势，学会如何有效利用素材和信息。利用互联网使制作过程更简单，内容更丰富。
利用文字与图片、音乐、超链接的结合使得整个主题更加透彻的展示。而且所制作的幻灯片作为一种简易的多媒体形式，也感受到了多媒体的魅力，将图、文、声、像有机的结合，更加生动吸引人。超链接也使得交互性变强。
设计过程充分理解课程的原理和设计技能，掌握了PowerPoint201*的基本使用。
4扩展阅读：中南大学 大学计算机导论实践报告 樊列龙 吴同茂
中南大学
大学计算机导论实践报告
题目网页制作实践美食之家学生姓名指导教师学院专业班级学生学号
樊列龙胡扬吴同茂信息科学与工程学院
1132班0909113224
201*年12月12日大学计算机导论实践报告大学计算机导论实践报告大学计算机导论实践报告
Contents目录
一.主题内容
1.网站属性简介...................................................................................................12.关于“美食之家”网站简介...........................................................................1二.实验目标..............................................................................................................1三.实验准备..............................................................................................................1四.实验步骤..............................................................................................................21.实验设计站点简介............................................................................................22.关于“美食之家”网页简介...........................................................................23.搭建站点...........................................................................................................24.设计首页及各个网页的框架...........................................................................35.设计页面整体风格............................................................................................46.收集网页素材...................................................................................................47.制作网页............................................................................................................58.链接和效果的检查和网站的测试....................................................................10五.待解决的问题.......................................................................................................10六.心得体会...............................................................................................................11附：“美食之家”所有网页预览..............................................................................12
首页index01.htm图片展示框中的重叠图片............................................................20
大学计算机导论实践报告大学计算机导论实践报告大学计算机导论实践报告
一.主题内容
1.网站属性简介
使用Frontpage制作网页---美食之家，设计的网站一共有33个网页，还包括5个子文件夹，总站点占用存储空间约56M(主要是本地音乐链接文件)。
2.关于“美食之家”网站简介
“美食之家”是一个旨在传播美食文化，推广美食制作方法，宣传美食常识，交流美食心得，放松心情的网站。在站点中，首页（index01.htm）设计了相关的导航和链接，方便用户轻松了解美食信息。在网页制作的过程中尽量考虑到网站文化传播与对用户有好界面的设计，考虑到网站的特殊视觉效果的同时，还要兼顾用户计算机配置的问题。
二.实验目标
1、初步了解html标记语言的结构和语法规则。2、了解与网站搭建相关的知识领域。3、掌握Frontpage的基本操作。
4、通过迁移word文档和Excel表格的操作，进一步了解office办公软件。5、培养快速接受新知识，并将其转化为可视的知识界面的能力。
三.实验准备
1、安装Frontpage201*、PhotoshopCS4、Flash8、DreamwaverCS5软件。2、在图书馆借阅相关书籍和在互联网上查询Fronpage的使用方法。3、制定时间计划，按时完成相关的任务。
大学计算机导论实践报告大学计算机导论实践报告大学计算机导论实践报告四.实验步骤
1．选定设计对象内容
根据课程设计实验要求，考虑到网站的扩展、通用、兴趣和易编写等方面
的因素。我选择制作的网页主题是“美食”，网站命名为“美食之家”。网页包括了“八大菜系”、“美食美文欣赏”、“心情驿站”、“美食制作”、“音乐尽享”等内容，网页设置了其他网站的链接，基本实现了网站搭建的基本要求。
2.设计网站logo
在网页的制作之前我首先构思了一个网站的logo（如图4.2），这个logo是利用PhotoshopCS5制作的，关于该图标的含义在站点根目录下的“aboutme.html”文件中有详细的解释。
图4.2logo
3.搭建站点
在网页制作的过程中，第一步要做的是搭建一个站点。首先在Frontpage中新建一个站点保存在熟悉的路径中（如果不新建软件会默认在C盘中自动建立一个站点）。
在站点创建完成之后，需要系统有效地管理站点。
首先，在站点中创建合适名字的文件夹。例如：我的图片文件统一保存在“images”文件夹下面；我的音乐文件和视频文件统一保存在“medias”文件夹下面；还有一些文件夹系统会自动生成，同样可以改变文件的位置，要注意的是在改变文件位置的时候，网页中的链接路径也要相应地改变，否则将出现链接错误的情况。
另外，为保存的文件和网页取一个恰当的名称也十分重要。一般来说文件和网页的命名要简洁且有意义，最好是英文命名。例如我的主页命名为“index01.htm”。
这样就可以系统地管理网站，当网页发布之后可以方便实行查找、修改、
大学计算机导论实践报告大学计算机导论实践报告大学计算机导论实践报告添加、替换等操作。
4.设计首页及各个网页的框架
在搭建完站点之后，我开始设计构造网页的布局。首先在草纸上画出草图（见图4.1.1），通过简单的计算和定位确定版式布局。例如：我在导航栏设置了十个栏目通过这些栏目分别链接到相应的二级网页；在首页“index01.htm”的左边放了“图片展框”、“站长推荐”、“友情链接”三个栏目；在首页的右边放了“aboutme”、“音乐尽享”两个栏目；在首页的中间放置了一些快速链接的栏目，其中有导航栏中出现过的，也有没出现过的如：“美食美文”栏目；在底部添加版权（见图4.4.2）。这就是我的首页的基本设计思路，其他页面的设计过程和首页类似。
图4.4.1设计草图
然而，在基于大量的网页制作实践中，不可能每一个页面都完全经过上面的设计过程，因此在内容接近的页面中我使用了同样的框架结构。当然，在不同类型的页面中尽量避免出现同一个框架。
图4.4.2首页index01的局部
大学计算机导论实践报告大学计算机导论实践报告大学计算机导论实践报告5.设计页面整体风格
不同的网站甚至同一网站不同的页面有不同的风格，因此网页风格的设置同样十分重要。我在设计网页的过程中考虑到页面的数量和水平限制尽量避免特别出众的页面风格类型，而是考虑到尽量使用不同风格的页面类型。
页面风格的实现方式有多种，例如：背景颜色、背景图片、背景音乐、板式布局、边框类型、动画插入等等。我在实行页面风格的实现过程中主要采用前四种。例如“index01.htm（图4.4.2）”、“xiangcai01.htm”“diy01.htm”、“aboutme.htm（见图4.5）”这四个网页通过上面的几种方式实现了了不同的风格。
图4.5夜景风格
6.收集网页素材
网页素材的收集直接关系到网页制作的整体质量、总体速度、网页的内容丰富程度等。收集素材时，我主要收集了图片、文字、Flah视频、.mid格式的声音文件还有一些网站的域名等。
网页素材的收集的过程主要是通过互联网实现的，在收集素材的同时也浏览了大量同主题的网站，通过查看这些网站的源代码也学到了许多网页制作的技巧和网页布局类型的知识以及网页特效的实例。
大学计算机导论实践报告大学计算机导论实践报告大学计算机导论实践报告7.制作网页
1）根据已制定的草图布局页面
在上面的过程中已经做好制作网页的大部分准备工作，接下来就是让设计
的网页实现的过程。根据已经画好的网页草图制作出对应网页。
我在实现网页布局的过程中，主要用了两种方法：插入层和插入表格。其中包含了层的嵌套和层的继承（在同类网页结构的时候用可以快速实现页面布局），表格的嵌套和表格的继承。
通过层和表格相结合的方式实现了网页的布局。
2）背景的相关设置①背景图片的选定
插入背景图片既可以在网页属性中插入，还可以通过代码的输入来实现。Frontpage为用户制定的可视化操作界面可简单方便地进行操作，与word、Excel操作类似。在网页上右键单击→网页属性→格式→背景图片（图4.7.2）。代码方式：在中写入“background=“路径””。例如：在网页“aboutme.htm”中写入的代码为划横线的部分即为插入背景图片的代码。
图4.7.2背景的相关设置
②背景颜色的选定
设置背景颜色相对来说比较简单，在Frontpage中也能实现可视化操作，也可以通过写入代码的方式设定。在网页上右键单击→网页属性→格式→背景颜色（图4.7.2）。代码方式：在中写入。例如：在网
大学计算机导论实践报告大学计算机导论实践报告大学计算机导论实践报告页”diy02.htm”中代码为大学计算机导论实践报告大学计算机导论实践报告大学计算机导论实践报告5）图文混排①插入图片
插入图片看似很简单，但是在实际操作的过程中我还是遇到了很多问题。
例如：图片的插入位置。如果直接在网页原始层或者表格中插入图片，图片的位置放置方式是有限的，不能任意摆放图片的位置。通过反复的试验，最后发现可以通过插入层的方式来定位图片的位置，因为层的位置在网页中是可以任意改变的。
②修改图片和文字属性
在图文混排的过程中，设置图片和文字的属性对于美化网页外观、优化网页属性起到极其重要的作用。
例如：在插入一张图片后，为了使制作的页面更加美观和符合用户进行浏览的习惯，往往会对图片的大小进行修改。但是如果仅仅修改图片的显示大小是远远不够的，如果一张原本100KB的图片在改变显示大小之后他占的存储空间仍然为100KB，会使得用户浏览网页的速度减慢。这样显然是不合适的。所以在编辑时，我对图片采取重新取样（图7.4.5）的方式解决这个问题。
图7.4.5重新取样
6）超链接
超链接有内部链接外部链接之分。内部链接主要是通过设定锚点来实现的，外部链接需要指出链接的地址。只要给出正确有效的链接地址，从理论上说是可以对任意的图像和文字进行链接。
由于互联网是由一个个网页通过链接组成的，在网页制作的过程中会有大量的链接，如果每一个链接都由手动设置将会占用大量的时间。为了解决这个问题，我在制作的过程中采用了将相同框架下的重复链接通过复制的方式减少了链接的工作量。
链接的属性修改从一开始就困扰着我，例如Frontpage默认的链接是有下划线、浏览前为蓝色、浏览后为红色。然而我在设置链接的时候希望只是在鼠标经过连接时出现下划线，浏览后也不希望它改变颜色。在Frontpage没能找到相应的设置（应该有这个设置），但是我记得在DreamwaverCS5中有相应的设置，
大学计算机导论实践报告大学计算机导论实践报告大学计算机导论实践报告所以我就想能不能通过DreamwaverCS5来找到代码。结果我找到了这样一串代码：
a:link{color:#00F;text-decoration:none;}a:visited{text-decoration:none;color:#00F;}a:hover{text-decoration:underline;}a:active{text-decoration:none;}
经过修改后复制粘贴实现了上述功能。
7）特殊页面效果的实现①图片展框
图片展框可以增强页面的动态效果，方便用户直观快捷地浏览网站内容。例如在我设计的展框中用户可以点击展框中的图片可以链接到美食DIY的网页（图7.4.7.1）。
②带logo图标的鼠标跟踪效果
当用户移动鼠标的时候，在鼠标的旁边会出现本网站的一个logo的图标。这个设置有利于宣传网站文化。
③时钟鼠标跟踪效果
时钟跟踪效果是一个用户友好型的网页特效，用户浏览网页的时候可以方便地查看时间，同时这个效果可以增强网页页面的动态效果。
-8-
图7.4.7.1图片展框
图7.4.7.3时钟鼠标跟踪效果大学计算机导论实践报告大学计算机导论实践报告大学计算机导论实践报告
④烛光效果页面
当用户浏览网页时，页面会模拟夜晚的效果，这时候鼠标旁边会出现一支蜡烛，在蜡烛的周围会出现局部的光亮。就像一个人在夜晚，拿着蜡烛阅读墙壁上的画卷一样（图7.4.7.4）。
我把这个效果设计在“美文欣赏”的页面中，配上恰当的背景音乐，可以让读者在幽静的情景气氛中尽享阅读的带来的美感。
图7.4.7.4烛光效果页面
⑤弹框的设置
当用户打开某个特定的网页的时候，网站会自动弹出一个对话框，提醒用户正在进行的操作，例如在我设计的网页中当打开“aboutme”或者logo图标的时候会弹出一个对话框“欢饮来到美食之家！！！”（图7.4.7.5）。
图7.4.7.5一个简单的弹框
8）滚动字幕设计
滚动字幕可用于通知、申明、提示等情况下，有助于用户更多地了解网站
内容等信息。在字幕设计属性中可以更改背景颜色和重复次数等属性。
9）meta语句的的设置
meta语句可以用来定义和描述很多内容，比如大学计算机导论实践报告大学计算机导论实践报告大学计算机导论实践报告http-equiv="Content-Type"content="text/html;charset=gb2312">这句话描述了网页显示为简体中文GB2312标准。当网站发布之后meta语句可以定义关键字和内容以便用户可以在收索引擎中收索的网站的相关信息。除了这些meta语句还可以实现一些例如作者信息（auther）、自动刷新页面(refresh)等功能。
8.链接和效果的检查和网站的测试
当网站创作基本完成之后，还要检查链接和代码是否正确和是否有效以对及网站进行测试。如果人工进行逐条检查，无疑工作量是很大的，并且正确率和完整程度不高。为了解决这个问题我将已经制作好的网站放到DreamwaverCS5中进行检查和测试。测试制作的网页放在不同的浏览器环境下地浏览效果，并进行修改。DreamwaverCS5提供了相关的功能。最后检查修改完成后保存。
五.待解决的问题
1.在我制作的网页中插入了mp3格式音乐的本地文件链接，但是这样一来我的站点的文件就会很大，因此我考虑是否可以将音乐链接到互联网上通过访问其他网站进行音乐欣赏。但是这样一来，用户打开链接后还需要跳转到其他网页，对用户来说是不友好的。
2.Frontpage201*中提供的交互式按钮种类太少,需要自己用Flash做，但是本人对Flash软件操作不熟这样就有很多页面效果无法实现。
3.关于css层叠样式表的运用不熟，运用Div+css布局页面方法掌握还没到位。4.布局页面时div层与表格之间转化后会出现便面变形混乱的情况，但是如果不转化某些页面效果的实现将无法完全实现。
5.关于与用户实现交互的效果没能做出，比如用户登录的对话框、对用户的调查对话等。
6.广告条动态效果很难实现。
7.用Frontpage201*设计字幕的时候无法实现字幕的文字颜色、字体、大小等一些特殊功能。
大学计算机导论实践报告大学计算机导论实践报告大学计算机导论实践报告六.心得体会
网页的所有实现都可以通过代码来完成，在我完成这个网页的制作的过程中虽然有Frontpage、Dreamwaver等功能强大的可视化网页制作软件，但是我认为要成为一名真正的网页制作高手，必须要学会自己写代码。同时对高级语言也要熟练掌握,尤其是HTML标记语言和Java语言。虽然现在还有很多知识不懂，但是我相信在后面的学习中我会投入更多的精力和热情，一定能够学好这些知识。
在使用Frontpage201*制作网页的过程中遇到了许多问题，虽然大部分问题通过不断摸索和查阅资料等方式已经解决了，然而解决的方法不一定很高明，还有很多未解决的问题，比如对页面布局和网页维护管理方面还存在很大的问题。所以接下来我要学习的东西除了提到的高级语言学习方面，还有常用软件的使用方面比如Photoshop、Flash等。
只有熟练掌握了各类知识才能将知识运用到实践中，同时在实践中也能学到不少的知识。所以这次课程设计给我的最大收获是找到了学习的目标、明白了理论与实践相结合的重要性。
大学计算机导论实践报告大学计算机导论实践报告大学计算机导论实践报告附1:“美食之家”所有网页预览
index01.htm
aboutme.htm
chuancai01.1.htmchuancai02.htm
大学计算机导论实践报告大学计算机导论实践报告大学计算机导论实践报告
chuancai03.htm
diy01.htm
-13-
chuancai04.htm
diy02.htm大学计算机导论实践报告大学计算机导论实践报告大学计算机导论实践报告
diy03.htm
huicai01.htm
-14-
diy03.htm
huicai01.htm
lucai01.0.htm大学计算机导论实践报告大学计算机导论实践报告大学计算机导论实践报告
lucai01.1.htm
lucai01.2.htm
lucai01.3.htm
-15-
lucai02.1.htm大学计算机导论实践报告大学计算机导论实践报告大学计算机导论实践报告
lucai03.2.htm
lucai03.1.htm
meiwen01.htm
-16-
meiwen02.htm大学计算机导论实践报告大学计算机导论实践报告大学计算机导论实践报告
mincai01.htm
sucai01.htm
mincai02.htm
sucai02.htm
大学计算机导论实践报告大学计算机导论实践报告大学计算机导论实践报告
xiangcai01.htmxiangcai02.htm
xqyz01.htmxqyz02.htm
大学计算机导论实践报告大学计算机导论实践报告大学计算机导论实践报告
yuecai01.htm
zhecai01.htm
-19-
yuecai02.htm
zhecai02.htm大学计算机导论实践报告大学计算机导论实践报告大学计算机导论实践报告
附2：首页index01.htm图片展示框中的重叠图片
以下五张图片均保存在站点的images文件夹下，文件名分别为diy01.jpg、diy02.1.png、
diy03.1.png、鸭头.jpg、12.jpg
链接地址为：images/diy01.jpg
第一张
链接地址为：images/diy03.1.png
第三张
链接地址为：images/12.jpg
第五张
-20-
链接地址为：images/diy02.1.png
第二张
链接地址为：images/鸭头.jpg
第四张
友情提示：本文中关于《大学计算机导论实践报告》给出的范例仅供您参考拓展思维使用，大学计算机导论实践报告：该篇文章建议您自主创作。
来源：网络整理 免责声明：本文仅限学习分享，如产生版权问题，请联系我们及时删除。
公文素材库友情提示：本网站所有内容为共享上传提供，不涉及任何商业利益，本站对此不承担任何保证责任！
Copyright © www.bsmz.net Corporation, All Rights Reserved 共享时代 共享你我他 版权所有