汽院网站建设实验报告Word下载.docx

汽院网站建设实验报告Word下载.docx

《汽院网站建设实验报告Word下载.docx》由会员分享，可在线阅读，更多相关《汽院网站建设实验报告Word下载.docx（9页珍藏版）》请在冰豆网上搜索。

1.1、主页面的主题与风格

“湖北汽车工业学院”网站作为我校主要的官方网站之一，在本次网站设计中，注重对网站整体效果的把握，作为教育机构的官方网站，主题围绕我校校园的学校要闻、学术动态、通知报告等消息，立足于“求是创新”的校训，整体呈蓝色凋。

整体给人呈现出大气典雅、严谨创新的内涵。

“湖北汽车工业学院”主页在制作风格上追求个性化却不失教育内涵的性质，页面整体来分可以分为四大部分，各部分之间层次分明，且具有较强的衔接效果。

banner设计中注重校训的凸显，同时将图书馆放上去，给人以“教育机构的第一感觉”；

在导航设计上追求简单明了的效果；

在内容设计中，以板块展示的形式进行，方便他人阅读；

同时在设计上注重网页与人的交互性，在页面中增加“搜索”、“快速导航”等功能。

总的来说，本网页在风格上独特新颖，在注重教育机构页面的严谨、创新性的同时也注重页面设计时的简洁易用的效果，各版块之间层次分明且相互协调，实现网站各版块、功能的一体化效果。

1.2二级页面的主题与风格

二级页面设计中在颜色效果上主要以“天蓝色”为主，配合banner中的“白云”及logo，再与页面内容版块及导航版块相互协调，整体给人呈现一种色彩靓丽、温馨、舒服的感觉；

同时在内容的布局中分为左右效果，结合常人的阅读习惯，采用左边放置“导航”，右边放置“文字内容”的效果；

1.3、新闻页面的主题与风格

新闻页面在设计中结合主页面的“蓝色”和二级页面的“天蓝色”相互结合的效果，使用了朦胧的效果，给人柔和、清亮典雅的感觉。

页面中同时区别于上面的页面，将其中的导航更加具体化，层次化，在设计中各版块之间相互独立又相互关联；

在页面的新闻字体采用“宋体”，符合绝大部分人的阅读模式。

二、网站各页面的设计过程及截图

本次网络页面的制作主要用了如下的软件：

Photoshopcs5、FrontPage（2003）、Dreamweavercs5、swishMax4中文版。

2.1、主页面的设计过程及截图

主页面的设计图

第一步：

先构思、设计出网站的效果，关键的时候可以通过模仿其他大学的网页进行制作。

第二步：

在photoshop软件中进行页面的绘制，最终的效果图如下：

第三步：

对所制作的图通过“切片工具”进行多次切割（后面需要进行图片的多次切割），然后将其转化为web所用的格式。

相关截图如下;

第四步：

打开Dreamweaver，并将保存的web格式所对应的打开。

现在在上面显示的是切割后的拥有图片的效果，由于图片在网页加载中比较慢，所以接下来需将相关的图片换位对应的文字，并实现相关的位置对应相应的功能。

第五步：

换取图片的时候注意要保存原有的网页框架，我们可以通过类似下面的代码来实现：

第六步：

动画播放制作，通过swishMax4中文版来制作，制作中要注意其中动画效果之间的过渡，调节帧的大小等，制作后的现实效果如下：

第七步：

将“影片”插入到之前的空白框架中，即可实现效果。

第八步：

将其在浏览器上面显示，查看效果，并进行后期的完善，最终的网页效果如下：

注：

下拉框代码的实现是较为关键的一步，其中需使用javascript语句，具体如下：

2.2二级页面的最终浏览器效果（步骤同上）

2.3、新闻页面浏览器效果：

（基本步骤同主页面设计一样）

在新闻网站设计中，在设计中增加了一个时间显示的滚动功能，同事也将网站的页头进行了蒙版处理，看起来给人感觉有一种朦胧美的感觉。

三、网站不足之处

在网站设计中，虽然实现了老师要求的网站需要达到的最基本的功能，但是在此过程中仍有一些不足之处。

具体表现在如下几方面：

第一、从主页面的网站来看，在主页面的设计中没有真正的实现页面中所有的功能，如在主页面中“搜索”功能的实现、在网址导航中相关的下拉菜单条目分辨的不够清楚，在一定程度上有的栏目之间存有一定的交集、导航条设计的时候由于代码问题没有使得最终的效果居中、在网站设计中图文替换的时候还存在一些问题，保证网站设计的完整性及色彩的过渡的衔接性还不够完善。

第二、在二级页面中网站的设计主要不足之处表现在其网站页头的美图的时候没有将图片实现很好的融合，在上面放置了几片祥云，但是效果还是不够完美的、在字体上也是有不足的地方，如在导航中字体设计的时候由于在ps中显示的比例较小结果忽视了其在网页中实际的显示效果，致使导航的字体稍微大了一点，同时在文内容中也稍微有点不和谐。

其次则是表现在页头的导航条制作时，为了增加页面加载时的速度，使得在替换文字的时候中间的一些“白条”在大小间距中也有较多的误差，致使导航条的效果仍有欠佳。

第三、在新闻页面的设计中不足之处主要表现在页面在色彩选取上不够明朗，同时页头中的图片放置效果也相对较差看起来给人感觉太僵硬了没有灵气、在下面的导航设计中导航栏目太多了（自己原以为这样会很好看，但是最终的效果证明了看来好多的余赘，给人感觉有种压迫感）、其实在这个网站存有和新闻页面相似的不足，那就是上面白条边框的切割较为困难而致使最终的效果也并不是太好看、当然了在页面的加载中由于设计过程中色彩的过渡较为难控制，所以就没有将其换为文字只是单一的进行了超链接而使得网站的加载速度不够快，这个是网站在设计过程中最大的缺点。

四、课程总结

《网站设计与网页建设》实践课程，是我第一次真正的去感受一个简单的网站全方位的制作过程，不管是从前期的网站构思（设计）到最终的网站绘制（在photoshop）中；

不管是最初的一句句代码的复制粘贴还是到后面的一段段代码的直接应用；

不管是从简单的网站效果图到最后的网站的制作成功……，其中都让自己在没一张张图片之间寻找着那一种简单的欣慰，让自己在由于代码的成功之时而表现的那种若隐若现的欣喜，这些都是课程中自己所收获的，也许不仅仅只是那些简简单单的理论知识的运用掌握，更重要的是从实践最终体会着那种微成就感觉，尤其是设计出自己感觉比我们学校主页面更好看的页面的时候。

当然了在实验的过程中自己也感受到了作为一个网站制作者不仅仅需要对最基本的代码只是的掌握，同时也需要一定的“美感”，这个是对网站整体效果的最基本的把握。

同时在试验中我们也注意到团队的力量是比较重要的，和同学之间的相互学习、相互了解，实验的过程也进一步增进了同学之间的那种合作友谊的关系。

在此，我希望多增加几次这样的课设，直接就是放在平时的教学中，如果可以的话我们可以通过小组的形式进行开展，制作一个合作团队的“创业网站”，这样的效果会更好，与此同时我们也应该在授课过程中对一些必要的代码进行详细的讲解，并通过实例进行掌握。

最后，非常感谢老师在本学期对我们课设的付出，谢谢老师！