计算机基础网页制作实训报告

关于基础网页制作所写的实训报告,供大家参考

实训作品35 AKB48之家

制作学生：BW110435潘路峰

指导老师：万爱霞

1实训作品介绍

本人酷爱日本少女组合AKB48，尤其是其中的“小虎牙”坂野友美和麻友友。平时总爱听AKB48的歌曲，看她们演唱会的视频，只可惜现在无法去日本亲身感受她们的魅力。适逢计算机实训周，万老师让我们做一个自己感兴趣的网页，于是我便抓住这次机会，制作了这个关于AKB48的网页。

该网页主要介绍了AKB48这个组合的由来，各位成员，以及该组合的单曲，影视作品，参与的综艺节目，并在最后附上了问卷调查，以便更好地了解大家对该组合和本网站的看法。

2实训作品效果图

首页

关于基础网页制作所写的实训报告,供大家参考

团体介绍

成员介绍

作品节目

关于基础网页制作所写的实训报告,供大家参考

网址链接（由于网络问题无法连接）

问卷调查

关于基础网页制作所写的实训报告,供大家参考

3 设计思想

3.1功能设计

网站设计说明

1主页基本设计思想和布局说明：主题就是AKB48 之家，采用了一个3列6行的表格，并且根据主页的各个内容对表格进行了相应的调整，使之美观大方。还使用到了在表格中插入表单，再在表单中嵌套表格来制作用户登录界面。整体风格粉嫩可爱，富有女生气息，给人一种温馨的感觉，让人有忍不住浏览下去的冲动。

关于基础网页制作所写的实训报告,供大家参考

2.主页中采用的主要元素说明：主页采用表格布局，大小为80%，居中。在表格中插入有三张图片，并且之前用photoshop对图片进行过预处理，保证其大小合适，避免用户打开网页时耗费太多时间。对于每张图片我都在涉及代码中对表格中的宽，高进行了调整。在装饰背景方面，我大胆的采用了粉红色的背景图片，来加强可爱气息。文字方面则采用了CSS制式，不同文字都有不同的格式，给人一种五次斑斓的感觉。

3其他页面设计：

在后面所有的网页上我都插入了一个返回到首页的图片链接。

团体介绍网页：我插入了一个2*2的表格，放入了两张图片和一段文字介绍，并在设计代码中对其进行了行宽的调整。

团队成员网页：我采用了超链接和锚点连接相结合的方法，在顶端和图片旁使用锚点连接，在最顶端使用超级链接，使得浏览者能获得最好的视觉体验。

主要作品网页：我采用了文字叙述的表现方式，但为了缓解浏览者的视觉疲劳，添加了不同的文字背景，并对文字的篇幅进行了处理。

网址链接网页：设计了四个网址链接，来丰富大家对于AKB48的了解。

用户调查网页：为了更好的了解浏览者对于AKB48的看法，方便我网站今后的改进，我在最后运用表单和表格设计了一个用户调查界面，并且通过有奖竞猜的措施来鼓励大家。

3.2技术应用

关于基础网页制作所写的实训报告,供大家参考

1.图像处理过程

首先，我新建了一个适合主页像素的图层，涉及该图层为绿色，并在该图层上新建了一个文字图层，键入“AKB48之家”，并且文字采用不同的颜色，字体，营造更好的视觉效果。 然后，我对“AKB48之家”这一主题进行了滤镜处理，并对相应数值进行了微调。

2.动画制作过程

首先选取了四张图片，并用photoshop对图片大小进行了处理，随后通过创建关键帧，插入传同补间来实现图片替换效果

2.图片大小处理过程

关于基础网页制作所写的实训报告,供大家参考

在进行图片插入的时候，我敏锐地注意到了图片尺寸与表格大小的不符，出现图片不能填满表格的现象。于是我在设计代码中对图片进行了调整，通过对图片高宽的调整，很好的解决了这一问题。

3.3作品特色

毫无疑问，我的作品的特色就是主打可爱风，通篇给人一种发自内心的美感，并且详细地向大家介绍了AKB48这个组合的情况，增加了大家对于她们的认识。整个作品让人有一种眼前一亮的感觉，不落于俗套，不会引起浏览疲劳。希望大家以后能多多关注这个组合，感受一下她们的魅力！

3.4技术难点

该作品的技术难度主要体现在以下几个方面：

1， 如何制作好用户登录界面与用户调查问卷，使之人性化，便捷化

2， 如何处理好各个网页中图片的尺寸问题，提升图片浏览效果

3， 如何正确制作网页中的文字，图片的超链接，以及锚点连接，使用户浏览信息更方便 4， 如何搭配网页中各个元素的颜色，背景，使之符合主题

5， 如何使用photoshop和flash来制作标题和动态图片

6， 如何正确新建站点以及保存自己所运用的各个元素

4实训体会

一份成品的背后总是有无数的汗水，不克服困难是无法取得成功的。在这次的计算机网页制作中，我遇到了一系列的无法想象的困难：1，在网页制作的保存上我就犯了傻，在一开始并没有进行站点管理，而是直接做了起来，幸亏他人的及时提醒。但在之后网页制作完成，我却并没有把素材都保存到网页的根目录，结果就导致了在网页浏览时图片无法显示，过了好一会我才意识到这个错误，并进行了纠正,；2，在整个网页的布局上我也遇到了很多困难。首先是在大表格上，在一开始我并没有考虑到页面美观的问题，大表格都没有居中放置，在老师的提醒之后我才将其改了过来。其次是在用户登录和用户调查表单方面，这是在老师做了相应的演示之后我才有了灵感，并且制作了自己网站的该类界面，并且采用有奖调查的方式来鼓励用户进行参与；3，对于插入图片在整个网页表格中的显示问题，我一开始也是一头雾水的，弄了半天也没搞明白。后来在老师的指点以及自己的参悟下，我找到了解决的办法，那就是要在设计代码中修改图片的尺寸，比如将其宽改为百

关于基础网页制作所写的实训报告,供大家参考

分之一百等等，使之在网页中填满空白区域；4，在网站中元素的超链接和锚点连接上我还是比较顺利的，只是在最后的图片连接上出了点小问题，一直没能解决。咨询老师才发现是自己没有选中图片插入超链接，如此粗心大意的毛病以后不能再犯了；5，对于自己网站各个元素的颜色，背景色，我也是花了一番功夫的。因为自己主打的是AKB48这个少女团体，所以在一番思考之后决定走可爱路线。于是我挑选了粉色这个代表少女的颜色来作为整个网站的背景，并且在文字信息的处理上尽量使用不同的字体颜色，来舒缓浏览者的身心，避免视觉疲劳，6，在整个网站的标题上，我想了很长时间，最终决定使用“AKB48这个标题”，意为这是所用AKB迷的爱之家，大家可以在这里看到自己喜欢的偶像，了解到相关的信息。随后我用photoshop来制作了标题。由于是在很久之前学的该软件，所以操作上显得十分生疏,以至于连滤镜什么的都忘记了，过了一段时间才慢慢找回感觉。我是在一个绿色背景图片上新建文字图层“AKB48之家”的，并且对文字的大小，颜色，字体等进行了相应的调整，最后运用滤镜中的打磨效果，使之更加美观。而在flash中我则遇到了更大的难题，制作出来的动画无法播放，在经过同学的帮助之后才知道自己没有创建补间，在经过纠正之后我顺利作出了首页的动画。

对于自己的这份作品，我还是比较满意的，毕竟这是自己努力了几个小时的成果。在网页的总体布局，文字图片的引用，链接的设置等方面我觉得挺好的，给人一种可爱的感觉。但在网站首页标题，动态图片的制作以及网站内容的丰富性上，还是很需要改进的，特别是要大力提升网站内容的数量与质量，增加更多关于AKB48的信息，举办越来越多的网站活动等等。以上的这些我都会在以后的实践中不断的改进，努力为大家创造一个更好的“AKB48”之家！

通过这次的计算机基础实训，我重新温习了以前学过的知识，打牢了自己的计算机基础。更为重要的是，我学到许多崭新并且实用的文档排版技巧以及网站制作技术，使我有一种眼前一亮的感觉。不仅如此，我还学会了自己在计算机相关工作查找错误，独立解决问题，以及虚心接受同学的意见，运用于自己的作品之中。在以后的实践生活中，我将会努力用好自己学到的计算机知识，做到学以致用。

这次的实训周也让我明白了：对待任何事情，我们都要去认认真真的负责任的去做，只有全身心的去努力了，事后才不会有遗憾，要么不做，要么就认认真真的做好，这便是我所一直秉持的信念。

本文来源：https://www.bwwdw.com/article/4q54.html