网页设计实习报告

哈尔滨工程大学实验报告实验名称：网页设计班级：******学号：******姓名：夙愿宿缘实验时间：成绩：________________________________指导教师：________________________________实验室名称：哈尔滨工程大学实验室与资产管理处制目录一、设计背景................................................3二、设计标题................................................3三、结构设计................................................4四、技术分析................................................5五、设计展示................................................8六、实验心得..............................................10一、设计背景当今是个网络驰骋的时代，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们生活圈子各个方面发挥着重要的作用。而网页在我们生活中更是常见，无论是搜索引擎、视频观看、还是微博浏览都是十分常见的，网页已经成了网络和我们间最重要的媒介，我们当代大学生更是离不开网络给我们带来的好处与便利。但是我们对网页本身并不了解,关于它的本质和设计方法并不清楚，这学期接触了计算机创新设计课程，在课程中我们组决定进行网页设计，来体会网页设计的过程。在当前各大高校林立的时代，做好自己学校的宣传是十分重要的，同时也能让本校学生进一步了解自己学校，增进与学校间的互动性，网页宣传兼具宣传面广，成本低，大众化的特点，一个好的网页能鲜明的宣传自己的学校，也能为学生提供相关的帮助，如何做一个既美观又清晰的网页成了当前各大高校的问题。我们组针对这个问题，进行了相关研讨，在查阅了大量资料和进行探索后做了属于我们哈尔滨工程大学自己的宣传网页，在这之中认识了Photoshop、Dreamweavercs等软件，实现了计算机创新设计。二、设计标题哈尔滨工程大学网页设计三、结构设计在网页设计的过程中，我主要做了校园发展和学院宣传等方面的主题制作，以个人空间的模式展示，分为三个版块，学校简介、院系风光、校园杂谈。在首页我设计了一个旋转图片，是哈尔滨工程大学的图片，并在每个版块标题上设置了迷你小图标，显得更加亲切，在院系风光又分为五个院系，每个院系采用6张图片及文字依附的方式展示，清晰明了，显得十分简洁大方。结构设计流程图：首页学校简介院系风光校园杂谈】四、技术设计(一)建立布局在这次的网页设计中用到大量的布局，所以怎么样建立布局是关键。我们采用Dreamweavercs3来进行操作。css(casecatingstylesheet)也叫层叠样式表单,意思是用于网页中样式的定义,所以网页有三个主要的部分,HTML,CSS,JS,主要用于结构,样式与行为,CSS主要的作用就是美化网页的一个语言,它的特点:(1).结构与样式分离的方式,便于后期维护与改版;(2).样式定义精确到像素的级别;(3).可以用多套样式,使网页有任意样式切换的效果4.降低服务器的成本div+css是一种网页的布局方法，这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式，可实现网页页面内容与表现相分离。div+css文件是指的html网页文本文件和css文件两个部分组成。如index.html+main.css。步骤如下：（1）.点击“ALT+F6”键，进入布局模式，插入布局表格。建立一个大概的布局。（2）.使用背景图片：选中该项，按浏览可以插入一幅准备好的图片作为表格的背景，因为图片是以平铺的形式作为表格背景，表格大小和图片尺寸都要控制好。（二）网页中的图像图像传输是网页的魅力所在，它与文字相比具有显著的优点：一是直观，人眼观看图像时接受信息的速度远远超过观看文字时接受信息的速度；二是能更清楚地表达细节内容。正是由于这些优点，所以在进行网页设计时图像很受欢迎。。图像文件的格式有几十种，最常用的图像格式是jpg和png。（1）在网页中插入图像利用Dreamweavercs3可以方便地在网页中插入图像，还可以设置图像边框、大小、和位置，并且可以直接对图像进行编辑。在网页中加入图像的操作非常简单：1.新建一个空白网页，把光标定位在网页的开始位置。2.打开“工具”菜单，选择“图片”菜单项，在子菜单中选择“来自文件”菜单项，或者单击工具栏中的图片工具图标，弹出一个“图片”对话框。3.在此对话框中单击“浏览”按钮，出现一个“选择文件”对话框。4.在“选择文件”对话框的文件列表中选择某个图像文件，然后单击“确定”按钮，或直接双击该图像文件，该图像即被加入到网页中。在网页中插入图像后我们就可以对图像的各种属性进行设置了。（2）像的属性设置1.选中所插入的图片，单击鼠标右键，弹出一个快捷菜单，在菜单中选择“图片属性”菜单项，出现一个“图片属性”对话框.2.图像大小：在Dreamweavercs3中，当在网页中加入一幅图像后，图像大小默认设置为其原来的大小，如果加入的图像太大或太小，或有其他特别需要，就得调整图像的大小。调整图像大小非常简单灵活，只要你选中加入的图像，用鼠标左键拖动图像边框，可任意调整图像的宽度和高度直到达到你满意的尺寸。3．设置图像缩放比例的步骤：选中网页中的图像，单击鼠标右键，在弹出的快捷菜单里，选择“图像属性”菜单项，弹出一个“图像属性”对话框.在“大小”栏中选中“指定大小”复选框，同时选中“宽度”和“高度”下面的“百分比”单选按钮，然后在“宽度”和“高度”栏里输入想显示的比例，单击“确定”完成设置。（3）编辑网页中的图像在Dreamweavercs3中，可以使用“图片”工具栏中的各种工具对网页中的图像进行编辑，编辑功能主要有：图像旋转和翻转、剪裁、图像淡化、凹凸效果等等。（4）使用背景图像使用背景图像与使用背景色不同，使用背景色只将网页的背景用某种颜色填充，而使用背景图像则是将网页的背景用图像平铺。这样做可以使制作的网页更美观好看。（三）JS特效设置js是javascript是缩写js是网页前台脚本，用于网页的特效、功能的脚本编程，是一种很强大的脚本语言，几乎你所见的网页效果都是JS的功劳，如果没有JS网页将变得呆板。JScript是一种解释型的、基于对象的脚本语言。在本次设计中，我们用Dreamweavercs3中相应js特效进行处理。使用jQueryRotate.js实现图片旋转：示例：!DOCTYPEhtmlhtmlheadtitle/titlestyletype=text/css#div1{width:800px;height:600px;background-color:#ff0;position:absolute;}.imgRotate{width:100px;height:80px;position:absolute;top:50%;left:50%;margin:-40px00-50px;}/style/headbodydivid=div1imgid=img1class=imgRotatesrc==input2type=buttonvalue=btn2/input/div/bodyscripttype=text/javascriptsrc=jquery.min.js/scriptscripttype=text/javascriptsrc=jQueryRotate.js/scriptscripttype=text/javascriptvarnum=0;$(#input2).click(function(){num++;$(#img1).rotate(90*num);});/script/html五、设计过程1.首先我在设计网页的软件上进行了筛选，最后选择了Dreamweaver来进行设计，Dreamweaver提供了网页和表单的动态生成到企业级的解决方案，它有很强的图像处理功能，图象切割，图象映射，图象翻转等效果能直接生成HTML代码，还有图像嵌入功能。在主题上选择了当前热门的校园宣传，我的这部分网页主要用于对我们哈工程院系的风光宣传，还有一些校园趣事来吸引浏览者的眼球，针对校园风光，我分了5个院系来进行展示，每个院系用6张图片附文字进行说明，在Internet上我找到相应图片，制作网页的基本材料和布局有了。2.有了材料和布局后，在Dreamweaver中对网页代码进行编写。Js特效引入;scripttype=text/javascriptrel=scriptsrc=js/jquery.min.js/scriptscripttype=text/javascriptrel=scriptsrc=js/index.js/scriptscripttype=text/javascriptrel=scriptsrc=js/script.js/script四个模块及图片插入;liahref=index.htmlimgsrc=images/home.pngbr首页/a/liliahref=#m-infoimgsrc=images/info.pngbr学校简介/a/liliahref=#m-lifeimgsrc=images/view.pngbr院系风光/a/liliahref=#m-diaryimgsrc=images/dairy.pngbr校园杂谈/a/li3.对代码进行保存编译，查看网页效果，并针对效果不足处进行代码改进。六、实验心得本次计算机创新技术课程非常有意义，不仅仅让我接触了网页设计这个热门的领域，更让我在这个设计过程中学会了探索创新，不断思考的能力，在设计过程中还接触了Dreamweaver和Photoshop两款软件，拓展了视野，丰富了自己的知识面，也为以后进行此方面的研究打下了基础，在制作网页的过程中也遇到了各种各样的小问题，本以为很容易解决，但实际解决起来却发现不是那么的容易，从而提高了发现问题、分析问题以及解决问题的能力。总体来说，通过这次的计算机创新设计课程，有收获也有遗憾、不足的地方，收获的是我在这个过程中努力并取得的成果，遗憾的是课程时间较短，并没有让我的热情真正的发挥体现出来，但我想，只要我再认真努力的去学习，去拓展完善，我将会设计出会更加美观实用的网页，也感谢老师和小组各位成员在这次创新课程中给我的帮助与指导！文献引用：朱印宏，袁衍明.《Dreamweaver完美网页设计:网页特效篇》.中国电力出版社,2006,12