杭州电子科技大学软件实习报告.docx

1、杭州电子科技大学软件实习报告（短学期）实习报告题 目软件实习学 院计算机学院专 业计算机科学与技术班 级学 号学生姓名指导教师完成日期目 录1 工具介绍 11.1 EditPlus 11.2 photoshop 1 1.3 Flash mx 1 2 总体设计 23 详细设计 33.1 html设计 33.1.1 内容设计 33.1.2 代码设计 33.2 css设计 34 结论 4参考文献 5附 录 6摘 要个人主页摘要我的第一个个人主页,里面集成了我生活的点滴,其中包括了我的一些个人信息 生活照片,和个的一些作品展示,还有家乡温州的一些信息。不可否认的说，由于时间，经验等原因，做的还较幼稚，

2、但是却充分表达的我性格特点，大家可以多去看看，给我一些支持，毕竟这是属于我们大学生自己的空间，对我是一种鼓励，当然，在这里也我也会多多努力，以后一定会把自己的主页做的更好，但是通过这次的学习我已经基本掌握了网页制作的方法，以后不仅会做个人主页还能做其他网站，关键词：个人主页，个人信息，温州，生活照片，作品展示实验报告摘要这分实验报告是由工具介绍，总体设计，详细设计，结论，及附录构成的，工具介绍中我主要介绍一下我使用的工具和这个工具的作用。总体设计中我写了我制作这份网页的思路及网页的大致布局，详细设计中我会具体解释网页中每一个层的布局和css代码的应用，结论中主要是记录这次实习的得失和一些心得，

3、总结一下经验，附录中我是写一下原代码关键词：工具介绍，总体设计，详细设计，结论，1 工具介绍1.1 editplus:首先，EditPlus是一套功能强大的文本编辑器。它拥有无限制的Undo/Redo功能，让你不再为一步误操作而后悔不已；其强劲的英文拼字检查、自动换行、列数标记、搜寻功能，让你全面体验记事本所没有的超强功能；它可以同时编辑多种文件类型，轻松做到“一旦拥有，别无所求”；另外还有全屏幕浏览功能；特别值得一提的是，它的监视剪贴板的功能，能同步于剪贴板自动将文字贴进EditPlus的编辑窗口中，让你省去粘贴的步骤。 其次，EditPlus还是一个好用的HTML编辑器。在EditPlus

4、中设计网页和编辑一个文档没什么两样。单击“File”“New”“HTMLPage”，就可以打开“HTML页面编辑器”窗口，使用它所提供的工具就可以直接进行网页的编辑与创作。EditPlus除了可以对你直接输入的文字用颜色标记HTMLTag（同时支持C/C、Perl、Java）外，还内建了完整的HTML和Css1指令功能，你甚至可以一边编辑一边“浏览”页面效果。对于习惯用记事本进行网页编辑的网友们来说，它可以帮你节省一半的网页编辑时间。再次，EditPlus其他比较好用的功能包括：可以设置工程并进行多文件查找；代码片断；自动完成；设置标记方便跳转1.2 photoshop:Photoshop是世

5、界顶尖级的图像设计与制作工具软件。图像处理是对已有的位图图像进行编辑加工处理以及运用一些特殊效果，其重点在于对图像的处理加工。在表现图像中的阴影和色彩的细微变化方面或者进行一些特殊效果处理时，使用位图形式是最佳的选择，它在这方面的优点是矢量图无法比拟的。 学习内容：Photoshop掌握绘画的基础理论，学习色彩原理和选取颜色、范围选取、工具与绘图、图像编辑、控制图像色彩和色调、使用图层、路径、通道和蒙板的应用、滤镜等。1.3 Flash MX:Macromedia公司于2002年3月4日发布了Macromedia Flash 开发环境的最新版本Macromedia Flash MX，并同时发布

6、了新的Macromedia 服务器技术，它可以辅助Macromedia Flash MX制作更加丰富的Web应用程序。相信新的Flash MX将给网络多媒体设计带来新的革命。那么Flash MX增加了哪些新的特性呢？下面我们为大家介绍Flash MX的十个最突出的新特性。1、视频支持和在Flash 5 中加入了对MP3的支持一样，这个消息一定又能让闪客们高兴的发疯。对于视频文件的支持使得网页设计师们可以有更大的空间和自由来创建更加与众不同的丰富内容和应用程序。Flash MX可以导入所有Quick Time和Windows Media Player支持的标准视频文件，包括MPEG, DV(Di

7、gital Video), MOV(Quick Time)和AVI。在Flash MX中可以对于这些视频对象进行缩放、旋转、变形、遮照以及创建动画等各种操作，还可以用Action脚本语言使之具有交互性。由于内置了Sorenson Spark多媒体编码解码器，新的Macromedia Flash Player 6支持对高质量流媒体视频动画的播放。这一特性势必为Flash动画带来革命性的提高。2、拥有崭新的属性检查器及问答面板的用户界面Macromedia推出的软件向来具有很好的用户界面，Flash更是不例外，每一代的Flash版本都会在用户界面上有所改进。现在，在Flash MX友好灵活的新开发

8、环境下，用户们可以很快熟悉它的使用。新的用户界面包括可折叠的面板以及一个新的上下文相关属性检查器，这个属性检查器可以根据选定的不同元素对可使用的工具及对象显示高亮。用户界面中还增加了一个新的问答面板，问答面板可以直接把网页联接到开发工具，还可以在用户界面为设计开发人员提供有用的信息。3、对图像和声音的动态装载闪客们一定都有这样的体会：做Flash尽量少加JPEG和声音文件，不然你的swf文件就一定是个大块头。现在用Flash MX你可以毫无顾忌地向Flash里加多媒体文件了。Macromedia Flash Player 6可以在运行的同时动态装载外部JPEG和MP3等多媒体文件。这一特性可以

9、让文件体积大大“缩水”，而且，开发者可以更容易的修改动画内容而不必重新创作。4、锚点互联网开发者目的就是开发出的用户界面及应用程序能够最大限度的满足浏览者的需要。原来的应用了Flash技术的网页都不支持浏览器中的前进后退按钮，这让用户感到很麻烦。Flash MX改进了这一点，加入了对于锚点的支持。应用锚点可以对Macromedia Flash MX的内容做书签，这使得浏览器中的前进后退按钮可以使用。5、新的图形设计工具和调色板Flash里面绘图工具低下的工作效率一直是让闪客们很头痛的事情。要像做出复杂度高的图像往往要借助其他的矢量绘图软件。现在的Macromedia Flash MX提供了新的

10、图形变换工具和像素等级的控制工具，这给了设计师们更大的自由来创作和修改图形内容。调色板的增加让建立、修改和使用色彩和渐变比过去的固定色彩选择模式和面板更加方便。6、应用程序和服务器的优化结合Macromedia在Flash 5 中就开始加强Flash对于互联网后台技术的支持。在Flash MX中，这些支持功能变得更为强大，我们可以使用XML结构数据来引入丰富多采的用户界面以创建销售窗体、虚拟购物车、用户调查、股票价格实时更新等各种应用。稳定的XML连通性保证了实时信息的显示。7、可以开发和使用残疾辅助内容Macromedia Flash Player6 通过支持微软的Active AcceSS

11、ibility来支持像屏幕阅读器这样的残疾辅助技术。另外，Flash MX中集成了开发残疾辅助内容的工具。只要选定一个元素然后输入相应的描述就可以像动画和用户界面元素中加入描述文本。这样将使得身体有残疾的用户也能够了解网页的内容。8、多语言支持Macromedia Flash MX中对于双字节编码（例如中文）的支持让开发者能够快速建立多语言内容和程序。Flash MX中将装载11种语言，包括三种新的语言：朝鲜语、繁体中文和简体中文。 9、支持设计跨平台的多媒体作品Macromedia Flash MX 可以同时满足网页设计师和开发人员的需要，允许他们跨越所有系统平台和设备，制作丰富的Web内容

12、和应用程序。Macromedia公司和硬件、操作系统以及浏览器提供商们合作以确保主流桌面设备平台对Macromedia Flash Player的支持（微软Windows，苹果Macintosh，Linux，Solaris，MicrosoftTV，Symbian EPOC，袖珍PC等）。10、用户界面组件可预定义Macromedia Flash MX 改善了编辑的工作流程，可自定义的弹性工作空间将显著提高设计师和开发人员的工作效率。预定义的界面组件为用户提供了可自定义的滚动条、列表框等标准界面元素，这将加快开发速度并确保不同的应用程序具有相同的界面。Flash MX在原有的基础上加入了众多的新

13、特性，这不仅使开发高质量的Flash动画变得更容易更快捷，也使得多媒体商业网络平台的建立成为可能。将丰富多彩的Web内容集成到应用程序中，将为我们带来前所未有的，更加引人注目的Web体验。Macromedia Flash MX必将创造出更多更绚丽的效果，使我们的互联网更加精彩。 2 总体设计我这份作业分为六张网页,第一张主页介绍我的情况，学校情况，及总体布局第二张是我的故乡，讲述故乡温州和温州话的概要，及温州话欣赏，第三张是个人相册，收入我的私人照片，里面的照片真的有够烂，大家看后一笑了之就可以了，第四张是我的作品欣赏，里面是个人在学习生活中的作品，不是拿来炫耀而是为了见证我的进步第五张是我关

14、心的事包括地震，奥运及偶像资讯，内容不是很详细。其中插入了多张图片更flash第六张为联系方式，方便读者联系和提出宝贵的意见主页布局设计图主题导航链接个人信息图片链接图片链接友情链接使用的是england06.css。本次作品除第四张我的作品外，都使用了同一个css， 布局也跟主页大致相同。第四张我的作品布局设计图主题导航金工实习作品随笔日志平时作品自制动态图片这张网页使用的是styles.Css3 详细设计 3.1 html设计3.1.1 内容设计 首先按总体设计的结构图布局好在相印的位置填入我需要添加的内容,比如首页中我的主题是my zone,个人信息包括姓名,学号,姓名.性别, 学校生日

15、:星座,兴趣爱好,喜欢书籍,喜欢明星,喜欢电影,喜欢动漫,喜欢运动,玩的游戏,加入社团,因为中间空白过多故插入一张图片下方是两个图片链接,一张链接到个人相册页面,另一张链接到我的故乡面右上方的导航链接我具体如图所示右下方为友情链接,链接到我的好友的blog上链接联系方式关心的事我的作品个人相册我的故乡主页导航 右上方的导航链接我具体如图所示右下方为友情链接,链接到我的好友的blog上其他页面大致与主页相同故略3.1.2 html代码设计Div为层,主页设计的层container中套了hdr,iftool, insetboxlarge, 两个insetboxsmall, rgtcol, nav,

16、 links8个层各个层的分布不一样组成主页布局以下是我所用到的一些详细代码1插入图片代码2换列代码3换行代码4排列代码5背景音乐代码6flash插入代码 7视频插入代码 9链接网络flash代码10超链接代码#3.2 css设计3.2.1css布局设计按照总体设计中的布局设计设计图如下div id=containerdiv id=containerdiv id=hdrdiv id=rgtcoldiv id=containerdiv id=lftcolul id=navdiv class=insetboxlargediv class=insetboxsmalldiv class=insetbo

17、xsmallul class=linksdiv id=container3.2.1css代码解释一、代码中包括的内容 这段代码是由CSS和HTML共同组成的。其中“”是超文本语言（HTML）的标识符，而“”就是CSS语言的标志。由于本文主要讲解CSS的应用，所以关于HTML语言请各位参考有关书 籍，也可参阅计算机应用文摘2001年第2期记事本网页作坊一文。 二、代码中的CSS元素介绍 1.Body结构块中的元素 (1)background-image:定义背景图片的元素，在上例中，笔者赋予其值为url(bg.gif)，并且把它加载到body中，目的 为了使这张网页有个背景图片。 (2)back

18、ground-attachment:背景修饰元素，它包括两个属性值:fixed和scroll。fixed表示指定的背景是永远固定 的，即:背景图片不随着网页的滚动而滚动。通过此元素设置出的网页效果在当今受到很多网络高手垂青。scroll这元素的 作用正好与fixed相反，笔者发现此元素与HTML中的背景元素所产生的效果基本相同，因此大家不必多加理会。 2.h1结构块中的元素 (1)font-size:定义文字尺寸的元素，14pt是它的属性值，在h1中表示当前字体用14pt来显示。 (2)font-variant:转换文字大写的元素，它的固定值为small-caps，表示把h1中的小写英文字变为

19、大写。在很多专业 书籍中称它为小体文字大写化元素，就笔者认为这样的定义对于初学者很难理解。 (3)text-decoration:定义文字修饰元素。它有五大属性值:none、underline、overline、line-through和blink，即: 没有任何划线、有下划线、有上划线、有中间划线（犹如Word中的删除线）和闪烁。通常我们用的比较多的是前面四个， 而“闪烁”修饰好象没有什么作用（或许是笔者才疏学浅，呵呵）。 3.h2结构块中的元素 （1）font-family:文字字体元素。在h2中赋予此元素的值为“宋体”，表示h2中的文字以宋体显示，当然你也可以定 义其它字体，例如，“隶书

20、”、“幼圆”等等。 （2）font-style:文字形状元素。形状在CSS和HTML中都有一个指定解释，那就是是斜体还是普通体。值“italic”表 示“斜体”，而“normal”表示普通体。 （3）color:文字颜色元素。它所指定属性值（即颜色）的表示与HTML中是完全一致的。例如:在HTML中可以用 “00F00F”来赋予文字为明绿色，在CSS中同样适用。 （4）font-weight:文字粗细元素。它包括lighter（细体）、bold（粗体）、bolder（更粗体）等属性值。当然也可 以用数值表示，但笔者不提倡，原因是没有必要把文字指定得那么细。 （5）letter-spacing:

21、文字间距离元素。通过使用此元素可以定义文本中的字与字之间的距离。它定义的数值可以用 cm、em、pt和px作为单位。例如:letter-spacing:2cm表示文字之间距离为2厘米。至于em的概念，笔者将在后文中会提 到。 （6）text-indent:文本首行缩进元素。“首行缩进”我想熟悉Word的朋友对此概念不会陌生吧。不过这里笔者要提醒 各位不要以为“首行缩进”一定只能空两格。有时在CSS中可以利用它达到指定文本在网页中的位置。例如上面的代码中，笔者定义“首行缩进”为13em，我们发现h2的文本“虞美人”显然是居中了。 4.h3结构块中的元素 text-align:文本对齐元素。它有l

22、eft，right，center等属性值。left表示左对齐，right表示右对齐，center表示中 央对齐。是不是与HTML很相似？！ 5.h4结构块中的元素 (1)text-transform:文字转换元素。它有四个属性值capitalize、uppercase、lowercase和none。capitalize将文本 中每个单词的第一个字母变成大写，例如h4中用了此属性值以后，在浏览时您会发现“do you understand?”这句话中的 d、y、u分别变成大写D、Y、U，具体显示请各位看一下效果附图。uppercase文本中所有字母都大写。text- transform:uppe

23、rcase与上文中介绍的font-variant:small-caps作用几乎相同。lowercase文本中所有字母都小写，none使 用默认值。 6.其它结构块中的元素 A:link（超链接元素）、A:active（激活链接元素）、A:visited（已访链接元素）。这三个是当今网页制作最为流行 的元素。不夸张地说，在所有Web页中都能看见它的身影。那么究竟这类元素在网页里起着什么作用呢？这里笔者只能略微 地介绍一下，毕竟这篇只是CSS的初级应用文章，若讲多了会搅得各位一脑雾水。 A:link超链接元素是指超链接时的状态。它可以应用CSS的其他元素作为属性值，例如:font-size,color, text- decoration等等。A:active激活链接元素是指激活超链接所显示的状态，它与A:l