网页设计实训报告总结

总结是在项目、工作、时期后，对整个过程进行反思，以分析出有参考作用的报告，用于为以后工作的实施，提供明确的参考。所以，编写一份总结十分重要，以下是小编整理的关于《网页设计实训报告总结》仅供参考，大家一起来看看吧。

第一篇：网页设计实训报告总结

ASP制作网页的实训报告总结

1.实习内容及知识应用

1.1实训内容以及进程安排

实训内容：动态网站制作的学习及动态网站的制作

这次在3名指导老师的带领下，我们主要学习了用2种现在比较流行的动态网站开发平台来开发网站：JSP平台与ASP.NET平台;JSP平台方面主要通过XX老师示范制作myblog个人博客网站而学习JSP平台的搭建、数据库的连接、网站测试等内容;而ASP.NET平台主要通过XX老师和XX2位老师的指导，学习并搭建了ASP.NET平台，掌握了网页三剑客制作动态网站的基本常识与方法，以及数据库的连接、网站测试及Photoshop处理图片等内容

：

进程安排

日期

日程安排

08年7月28日 确定小组组员，小组成员为：XX(组长)，XX(组员)08年7月29日 确定小组动态网页开发平台为ASP.NET

08年7月30日 确定网站要实现的功能①

08年7月31日-8月5日 制作BBS网站

08年8月6日 测试BBS网站

08年8月7日-08年8月15日 制作电子商务网站

08年8月16日-8月17日 测试电子商务网站

08年8月18日-8月20日 提交网站给指导老师，听取指导老师意见，完善网站

08年8月21日-8月22日 网站制作与小学期总结，写小学期文档

08年8月23日 提交小学期文档，小学期实训结束

说明：①经过讨论，我们组决定建设2个网站来实现以下功能

网站1-BBS网站：在这个网站中，我们主要实现了站点日历与站点搜索引擎2大功能。

网站2-电子商务网站：在这个网站中，我们主要实现了用户注册与登陆、购物车的实现、订单的显示等页面。

1.2知识(点)应用以及经验总结

这次制作2个网站主要应用的知识有以下：

⒈数据库的创建

①Access数据库的创建

Acess提供2种数据库创建方式：一种是创建一个空数据库，然后编辑数据表的内容;另一种使用数据库自带的模板创建;在动态网页面中，一般应用第一种方式

②Access数据库的打开方式

包括打开、只读方式打开、独占方式打开、只读独占方式打开

③利用设计器设计Access数据库

利用Access数据库里的设计器设计Access数据库

④使用向导设计Access数据库

通过Access的向导，经过一系列对话来设置Access数据库

⑤通过输入数据连接Access数据库。

先输入数据再确定字段

⒉数据库的连接

①ODBC连接数据库

打开ODBC数据源管理器面板。 在windows XP中打开控制面板，再打开管理工具，找到数据源(ODBC)，双击图标打开管理器，选择系统DSN。添加数据源，点击添加按钮，开始创建数据源，在接下来的对话框中选择数据源的驱动程序，因我们使用的是Microsoft Access创建的数据库，所以选择Microsoft Access Driver(*.mdb)作为数据库驱动程序。点击完成按钮，填写数据源名，以简单易记为原则，这里我们以userinfo(表名)来命名，注意不要冲突。说明填不填都无所谓，是描述这个数据库的用途而已。点击选择按钮，选择你的数据库文件。找到自己想添加的数据库，选中即可。

②OLEDB连接数据库

在Dreamweaver 中,可以通过在连接字符串中包含 Provider 参数来创建 OLE DB 连接。打开Dreameaver，在站点里面先新建个ASP页面(index.asp)。 在“应用程序”面板中选中“数据库”标签。只要我们在前面建立了站点，选择了文档类型(即我们选的ASP Javascript的)，并且还测试了服务器

(http://localhost/newgn/);则当前我们看到就剩下第四步没有打勾了。 那现在就点击“+”号，选择“自定义连接字符串”。在弹出来的“自定义连接字符串”对话框中，"连接名称"随便写一个。“连接字符串”就要好好填写了。当"使用此计算机上的驱动程序"时应用绝对路径：DRIVER={Microsoft Access Driver

(*.mdb)};DBQ=d: ewgndatabasecnbruce.mdb 否则“使用测试服务器上的驱动程序”采用Mappath转换路径"Driver={Microsoft Access Driver

(*.mdb)};DBQ="& server.mappath("/newgn/database/cnbruce.mdb"),点击“测试”，出现成功对话框，成功连接数据库后，在DW里其实是自动生成了一个连接文件。位置在自动生成的Connections文件夹中，名称是你刚才在“自定义连接字符串”随便敲的为命名asp文件。还可以注意到DW数据库标签内看到mdb文件内的各个字段。

⒊动态网页开发技术

①记录集的定义

分为简单记录集定义与高级记录集定义，简单记录集的定义使用户不必用SQL语句查询而快速定义记录集。高级记录集定义则通过SQL语来定义记录集。 ②记录集的绑定

记录集(查询)的绑定。在网页中插入一个表单，并输入需要插入到数据库的相关内容，然后通过记录集(查询)功能来实现表单和数据库的相互协调使用，并实现“动态”功能

③重复区域服务器行为

服务器行为其实一段VB代码，为了方便用户对记录集的操作，DW中将常用代码进行封装，命名为服务器行为。而重复区域服务器行为相当于一个FOR循环函数

④设置记录集导航条

添加记录集导航条以分页的方式用来显示重复区域服务器行为显示有限的记录 ⒋XML动态网页制作

①XSLT

XSLT 是一种用于将 XML 文档转换为 XHTML 文档或其他 XML 文档的语言，XSLT 用于将一种 XML 文档转换为另外一种 XML 文档，或者可被浏览器识别的其他类型的文档，比如 HTML 和 XHTML。通常，XSLT 是通过把每个 XML 元素转换为 (X)HTML 元素来完成这项工作的。

⒌服务器的配置

①站点存放点的创建

打开电脑，在D盘下建立一文件夹newgn(这个夹子就是你的站点存放点了)，并且在里面建几个子文件夹(就好似你网站的子目录)。

②建立虚拟目录

回到newgn的根目录，右键选择“共享和安全”(其实是快速地建立虚拟目录) ③设置IIS的虚拟目录

出现属性对话框后，选择“Web共享”标签，点选“共享文件夹”，出现共享别名对话框，选择默然设置，确定即可

⒍利用Dreamweaver创建站点

选择“编辑站点”，在弹出的属性框中选“高级”标签，从“分类”中先选“本地信息”，右窗口中设置站点名称，本地根文件夹，然后设置远程信息，访问选择“本地/网络”，远端文件夹仍选择站点文件夹d: ewgn，再接着“测试服务器”，“服务器模型”暂为ASP vbscript，“访问”本地/网络，“测试服务器文件夹”仍是站点文件夹d: ewgn，“URL前缀”在http://localhost后面添加“newgn/”，添加的东西就是设置的虚拟目录，这时，站点定义基本结束，点击确定。出现“编辑站点”对话框，“完成”即可。

⒎利用FIREWORKS处理图片

利用FIREWORKS处理一些图片和制作一些GIF动画图片

经验总结：

利用Dreamweaver做ASP动态网站主要为以下几步：

①网站服务器配置

②数据库设置

③数据库显示

④建立注册系统

⑤建立登陆系统

⑥美化网站

2.实习心得

{要求500字以上}

l 过程、功能需求、菜单设计、界面设计、数据库设计、知识的应用技巧、团队合作感受等(指导教师可按实习内容进行要求并自行增加内容)

本次小学期期实训，我们小组主要制作了2个动态网站,而制作这2个动态网站的主要过程是：

⒈个人博客网站

①站点的定义

②数据库的连接

③制作站点搜索引擎及搜索结果页面

④制作日志列表

⑤制作BLOG首页面，基本页面设计

⑥定义并绑定记录集

⑦界面的美化

⑧设置重复区域

⑨指定日期的日志内容页面

⑩日志具体内容页面-日志内容和回复及日志回复功能

⒉电子商务网站

①站点的建立和连接字符串

②用户登陆及用户登陆信息显示页面

③错误信息页面设计

④创建模板

⑤添加登陆页面的嵌入框架

⑥用户注册页面的实现

⑦添加“密码”比较验证的代码

⑧制作最新产品导航条与滚动产品导航条

⑨产品展示的实现

⑩用户购物车：限制用户登陆、添加购物车程序、购物车链接、删除购物车 而这2个网站实现的功能大不相同，前者为一个博客网站，主要实现了站点搜索引擎、日志列表、站点日期等内容;后者为一个电子商务网站，主要实现了用户登陆、用户注册、密码验证、产品展示以及用户在线购物等内容;刚确定制作网站的时候，本设想将2个网站整合在一起，但由于技术和其他原因，这个目的没能实现。

制作动态网站，数据库最重要，在我们小组这次制作网站的过程中，花时间最多的地方就是数据库-数据库的建立、数据库与网站的连接、记录集的绑定、数据

库安全等等，由于时间的关系，我们小组这次采用的是Acess数据库，它与其他数据库相比较相对来说操作比较简单。在数据库的制作中，这次我们小组遇到的难题主要是采用OLEDB连接数据库的方法，这个难题的关键之处是在于如何利用 Provider 参数来创建 OLEDB 连接，我们在网上搜索了大量资料并在XX老师的帮助下终于学会了如何使用OLEDB连接数据库。

总结这次小学期实训，这次2个网站能这么顺利的完成，离不开老师的帮助和小组成员的努力，虽然这次小学期实训我们小组只有2人，但是我们是一个有效率、有组织、有团队精神的小组，有效率在于小组制作网站中分工明确、讨论有目的;有组织在于小组成员能按时、有质量的完成自己的分工任务，值得一提的是这次小学期网站开发的大部分时间在小学期实训教室而我们小组成员还从未擅自旷课、上课迟到、早退等违纪行为;有团队精神在于我们小组实训过程中的共进退，从不因为自己分工任务提前完成而拉下其他组员，我们意识到小组是一个有组织、有记录、有共同目的的集体而不是一个由分散的个人组成的团体，在这次小学期实训中之所以提出小组分工这是锻炼小组组员的个人能力培养，而帮助有困难的组员这充分培养了组员之间的默契和团队协作能力。

这次是毕业前最后的一次小学期实训，也是自己做投入、最用心的一次实训，与以前的小学期相比，以前的小学期都是以掌握某种实训技能为主，而这次小学期则不仅掌握了动态网站的制作技术而且还制作出了自己的成果，自己非常高兴。经过这次小学期，我领悟到任何东西都要“学以至用”，学习了还不行还要看自己掌握了没，掌握了还不行还要看自己熟练了没，熟练了还不行还要做出一定成果。即将毕业，能接受这么一次有意义的小学期实训感觉很充实。v

第二篇：网页设计实训报告

天津电子信息职业技术学院 暨国家示范性软件职业技术学院

网页制作实训报告

姓名：系别：专业：班级：指导教师：完成时间：2012 年 6 月 1日

第三篇：网页设计实训报告

《网页设计与制作》实训报告

实训题目:

专业:

班级：

学号:

姓名：

实训时间：

实训地点：

指导教师:

一、 实训目的

二、 实训环境(软、硬件环境)

三、 实训内容及相关技术

(具体的设计步骤及所使用的关键技术，要求附有图表说明)

四、 实训结果及分析

五、 实训收获、体会和问题

第四篇：网页实训报告

日照职业技术学院

网页实训报告

学号：

姓名：

班级：

实训日期：

指导老师：

X年X 月 X 日

个人博客

一、实训目的与要求

目的：通过实训让同学们对网页有更深一步的了解，培养学生的动手能力，提高学生运用HTML语言编写静态网页能力的水平，掌握HTML和CSS语言的应用，为学生学习动态网页打下坚实的基础，通过实训可以达到全面理解、运用网页制作的知识，并使之得以融会贯通，在掌握理论的基础上再加以实践，进一步提高、加强学生的综合能力，把本学期学到的东西都运用起来达到一定的技术性、创意性，让其更美观。

(1)掌握创建Dreamweaver本地站点的方法，利用表格和层规划网页布局

(2)掌握在网页中添加文本、图像、Flash动画等页面元素

(3)掌握在网页中输入、设置标题和正文文字的方法。

(4)掌握在Dreamweaver中建立链接

(5)综合运用所学软件进行网页材料的准备

要求：掌握网页设计基本概念和HTML的基本结构，了解网页技术概况、HTML的编辑和运行环境，掌握文字版面的编辑，掌握网页的超链接技术的应用，了解图像的处理。包括背景图案、图形、图像及其超链接等的设定和应用。了解列表的各种使用，了解表格的基本语法，掌握表格的定义、控制、分组、标题等的应用。了解表单在网页中的应用，了解如何在网页中加入各种动态效果，了解网页中CSS的基础知识。掌握CSS的各种属性应用。最后根据自己的兴趣，设计一个个人站点或介绍一个集体的小网站，围绕一个主题并能够体现出自己的个性，有足够的页面及链接，有整体的框架结构，表格定位以及表单处理等，布局合理，色彩搭配协调统一，内容丰富多彩，页面风格独特。

二、实训内容

1.准备工作

(1)先想好做什么方面的网站。

(2)根据自己的需要在网上下载图片、动画等相关的素材。

(3)安装好需要用到的相关软件。

(4)大致设计一下该用到的页面的布局版面情况，规划一下网站的结构，画一下草图。

2.使用的技术

用Word处理艺术字、在Photoshop中用切刀工具切图片、用其它工具处理图片、裁切

图片、转换格式等，用Flash做动感图片，用ACDsee裁切图片。制作网页时应用表格、层、超链接、动态文本、表单等。

3.网站的整体布局及介绍

该个人博客使用了16个页面，一个进入页面，用了几个图片和一个“Enter”链接进入主页面，其主页面使用了一个以糖果屋为主题的背景图片，其中有导航、个人资料、微博、留言、好友、照片、博客、版权信息、按钮、文本框等组成并做了相应的链接。16个页面分别是：jinru.html、index.html、jiaru.html、pengyou.html、liuyan.html、xiangce.html、boke.html、gerendang.html、yinyuehe.html、guanyu.html、lianxi.html、youqing.html、yinsi.html、wenzhang.html、jianai.html、yuluo.html，.在音乐盒和个人档页面中用到了很多的表单项，有文本域、单选按钮、复选框、列表/菜单、按钮。前几个页面的主要背景色是#F3B8CA和#ABCD45后几个页面主要应用了#ABCD45和白色作为背景色，前几个页面和后几个页面采用了不同的风格。

4.实现的功能

主要是几个页面的链接，加入我们、联系我们、关于我们、友情链接、隐私与版权几个页面主要是针对本网站进行了介绍，介绍了该网站的联系方式、加入方式、合作商、网站的隐私及版权信息。个人档主要写个人信息，音乐盒写了最近流行的专辑及歌曲，还有一些朋友、留言、相册、博客等信息。

三、调试中出现的问题

在制作网页的过程中出现的问题主要是排版布局问题和链接问题，链接有时行有时不行，还有表单的使用，通过问老师同学及在网上自己找寻答案最后都解决了。

其次在使用其它软件时也是出现种种问题，主要还是自己对这些软件还没有真正的熟练掌握，在以后的学习过程中我会更加努力一定多多练习。

四、实训心得体会

在这次实训的过程中让我唯一感觉到创新的重要性。我也看了其他的同学做的网页，大家的都千篇一律，大多是学习过程的但是有的同学通过其他的参考资料，然后得到自己想要的画面和效果，然后把自己的与其他人的区分开来，我认为在这个过程中是一种创新的过程，一种将别人的智慧运用到自己生活中为己所用的能力，这种能力虽然反映的不是自己的真实水平，但是一种学习的过程，这以后，就成为了自己的东西。也发现很多同学都在自己的脑海中构造自己想要的画面，同时，自我摸索，在不断地失败

和成功中吸取不足和失败的原因，我认为这本身就是一种创新的过程。力求有一个很好的视觉效果，其次网页页面美观也是很重要的，不断地尝试调配颜色。想着也是一种创新，这种创新中得到自己所要的效果是学习的一部分。

其次我还知道了此次实训的目的，也清楚了目前自己的许多不足，那就是缺乏相应的专业知识与经验，对所学的专业知识不能够很好地运用于实践操作中。不过我也发现了以前不曾注意到的细节，在实训制作网页的过程中，我对作为一名网页设计师制作网页时要注意的细节和一些重要的地方也有了更多的了解。把职业能力训练与职业素质的训导有机结合起来。相信这对我接下来的学习专业知识会起到很有效的帮助，在接下来的时间里，我会以作为一名学习者的身份在这几个方面要求自己，严格自我，向专业知识靠近，丰富我们的知识。

五、实训总结

通过本次实训我又一次感觉到了实训的重要性，通过实训可以让我们深深地体会到理论与实践联系的重要性和必要性，通过实训我们可以把这学期以来学的东西做个总结，并且还可以学到一些新知识对该软件有更深一步的了解，我们要认真面对实训，虽说实训是一个很累的过程，但是实训一周让我们学到的东西要赶平时上课的好几倍，好好努力把握好一切学习的机会，不要让时间白白浪费。

第五篇：网页设计与制作实训报告

《网页设计与制作》课程设计报告书

设计题目：起止日期： 工作室或公司网站设计

2013.12.23-2013.12.27

目录

一、关于网站 ···························· 3

1、网站的主题 ·························· 3 2.网站材料 ··························· 4

二、网站的规划设计 ························· 5 1.网站的功能定位 ························2.站点的内容 ··························3.站点的风格 ··························4.网站功能模块图 ························三.网站技术解决方案 ························

1、网站的制作工具 ························

2、所用技术 ···························四.网页介绍 ····························

1、制作网站的网页 ························2.第二层展示 ··························3.动漫排行榜展示 ························4.第三层展示 ··························5.关于短片的插入： ·······················五. 关于我们： ···························六.实训总结： ··························· 2

5 5 5 6 6

6 7 7

7 8 9

10 13 14 14

一、关于网站

1、网站的主题

我的网站的主旨在于从各个方面全面的介绍动漫，展示动漫产品以及漫画，包括有动漫排行榜，小短片，另外，网站里还有漫画，以及周边产品。建立一个展示动漫的平台。同时，网站里的每一个网页都有统一的风格，每一个网页的主题都是图片加上文字介绍，用以展示自己性格的效果。最重要的是做出自己的风格，给浏览者好的欣赏感受。

动漫，是动画和漫画的合称与缩写，取这两个词的第一个字合二为一称之为“动漫”。

现可考证，该词语出处为1993年创办的动漫出版同业协进会与1998年创刊的动漫资讯类类月刊《动漫时代(Anime Comic Time)》，后经由漫友杂志传开，因概括性强在大陆地区的使用开始普及起来。在中国以外，并没有此种说法。国外习惯性将动画(anime)、漫画(comic)、游戏(game)三者合称作ACG，或加上轻小说(novel)合称为ACGN。

由于漫画本身的发展形成了现代故事漫画的表现形式，将影视艺术融入漫画之中，使得漫画与动画更容易结合，影视艺术独特的地方在于它能通过镜头的推拉摇移和片段剪辑的蒙太奇技巧来表达想法和感受。

漫画正是吸收了影视艺术的这两个特点。当要讲述的故事越发复杂、人物越发丰富的时候，用传统单线式叙事的方法就越行不通，蒙太奇的介入就成为一种需要了; 当漫画家在传统表现手段中无法找到更合适的抒发感情的方法的时候;当读者需要作品有更强的冲击力和表现力的时候，各种镜头的灵活运用就成为一种必需了。 一部现代故事漫画往往集远、中、近、特四种镜头于一身，漫画家往往能熟练地运用镜头的移动和各种蒙太奇剪接，对故事特定部分的情绪和氛围进行渲染。 这就是现代故事漫画容易和动画结合的一个原因，因为它天生就像动画的分镜头剧本，读者在看漫画时仿佛就是在看一部电影。正是有着这样的相似性，所以如今将动画和漫画合称为“动漫”。

动漫领域衍生出的许多术语均已经被广泛应用，例如：正太，萝莉，御姐，百合,BL等。

动漫产业日益与游戏产业结合紧密，在日本已经形成一个成熟的产业链，动漫已经 3 从单单的平面媒体和电视媒体扩展到游戏，书籍，网络，玩具等众多领域。许多动漫游戏应运而生，例如《死神bleach》PSP平台的游戏，也有许多GALGAME被改编成动漫作品。

Manga(まんが，manga)为日语“漫画”的罗马字注音。另外，英文词cartoon的中文音译“卡通”，也是漫画与动画的合称，但被用来特指美国动画。 版面有限，相关词条，详见：“动漫概论” 按类型分类：

情感;推理;动作;战争;后宫;宠物;历史;搞笑;机战;少年;冒险;治愈;童话;格斗;

少女;悬疑;科幻;竞技;社会;神魔;热血;校园;耽美;原创;魔法;教育;恐怖;惊悚;

政治;哲理;经典;励志;伦理;恶搞;血腥;言情;暴力。 按版本分类： 电视动画(TV)：

电视频道上播映的动画作品。

剧场动画(MOV)：影院公映的动画作品，是日本动画按传播方式分类的一种，在中国又被称为剧场版。

OVA(OAD)：原创动画录影带，其中OVA是单独发售，OAD是随书发售的。 网络动画(NET)：以网络为播放平台的动画。

动画音乐：一部动漫作品中的音乐，包括主题音乐和背景音乐(BGM)。

动画原创：依漫画改编的动画，由于动画的更新速度比漫画快的关系，当动画的剧集快赶上漫画时，动画的剧情就要脱离漫画剧情，开始动画原创。

同人：也叫二次创作，由漫画、动画、游戏、小说、影视等作品甚至现实里已知的人物、设定衍生出来的文章及其他如图片影音游戏等等，或“自主”的创作。 COS：全称COSPLAY，装扮成漫画、动画、游戏、小说等中的人物，也可以是原创。

2.网站材料

主要在网站上搜集所要的网页信息，包括图片、文字、相关的产品。同时，查询相关的动漫、百度等方式收集所需的文字资料,图象资料,网页特效等，用以得来更加具有说服力的页面。要想做好自己的网站，能够给浏览者好的欣赏感受，就要尽量搜集材料，搜集得材料越多，以后制作网站就越容易。精选自己收集的材料，作为自己制作网页的素材，这样就可以做好一个好的网站。

二、网站的规划设计

1.网站的功能定位

我的网站共有5个主页面：首页、动漫之家、动漫排行榜、动漫连载、周边产品。每一个页面用图片来做。

我是用素材拼音命名网站名，用以方便存储和转发。网站主页整体色调为梅红色，配上深沉的背景图，搭配出一种层次感。然后点缀其他不同的颜色相配，突出主题，颜色没有过多，过杂，用以避免给人一种杂乱的感觉。版面设计十分灵活，根据各部分内容的不同适当的自由设计。网页布局主要用框架和表格，用框架定位内容的大体结构，再用表格具体定位。位子的设计也是重要的一个部分，根据具体内容决定字体风格，相同的风格多次调用是用css设计一个样式，以保证随时、准确的调用。

2.站点的内容

我们动漫汇主要是要向客户介绍动漫，包括动漫的介绍，动漫的周边产品，动漫的图片及动漫的漫画或是动漫片段。站点里面包括：

首页：第一层网页，画面主要有动漫汇的logo，logo下方是一个横幅，鼠标经过会有光亮，点击仍将是动漫的主页。左边是一个动态动漫图，显得主页可爱又有动漫气息等。下方是会员登录，点击登陆跳转至输入账号及密码界面，如不是会员，点击注册跳转个人用户注册界面。主页的背景图是动漫海报，由两层叠加。主图是6幅动漫图，6种动漫的介绍。鼠标进过动漫图时，会有相应的动漫简介。

跳转页：第二层和第三层，主要的主页的过渡。里面有动漫的详细介绍，有动态图欣赏左侧是关于动漫的周边产品。点击看漫画或动漫，即可欣赏相关动漫。

3.站点的风格

整个网页色彩明显，我们添加了gif图，这样网页稍微有活力，背景都是用动漫海报。其中使用翻看图片的特效，使得看漫画不那么单挑。同时也插入视频，使得网站有活力一些 。

首页的标题插入闪光效果，鼠标经过时能出现，不容易产生无趣感。首页的图片不只有图片，鼠标放至图片上会有文字出现，是动漫的简介。使得网页有活力。

4.网站功能模块图

三.网站技术解决方案

1、网站的制作工具

做网页时主要使用的是Dreamweaver CS3另外，为了处理网页中的其他元素，还使用了Photoshop、FLASH等软件。

2、所用技术

动漫汇需要大量的图片及相关的话题。我们需要插入图片，大小要适合，以动漫海报为网页的背景，则设置好页面设置，选好准备好的海报图。插入gif图片，需要时在ps中做gif图。插入视频时需要设置好相关的，视频名称中不能有中文，是flv格式的。图文介绍的需要经过ps的加工，使得首页的图片有生机活力。插入表单，是关于用户的登录，点击跳转至登录或是注册界面。首页标题都有链接，点击进入相应的网站。首页下方是关于动漫汇，为了突出字，用ps进行加工。

四.网页介绍

1、制作网站的网页

素材、风格、模板都设计好以后，下一步就是具体的制作网页。制作网站时，首先要做的就是站点的规划，建立一个本地站点“web”，建立的各个页面都应该放在本地站点中，在网页制作时所需的各个元素都进行了统一的管理，建立统一的文件夹放同一类型的文件，我在制作时建立了各类动漫的文件夹来存放图片。同时，由于漫画页面中的信息太多，于是建立了一个专门的文件夹存放相册信息，网页中的css 样式文件也应统一管理，做到有条不紊，我设计的网站的首页如下图：

根据自己的网页风格，在网上搜集合适的图片，另外网页的页宽一般没有超过900像素，以保证左右不出现滚动条。右下边插入的是表格，表格中添加了浅红色的背景图片。用以体现网站的主题色彩，表格还定位了网页特效、系统时间和flash动画。

2.第二层展示

页面中，中间的页面主要包含动漫介绍，周边产品，但浏览者有了新的认识后，可以点击下方的“点击看漫画”按钮来进入第三层页面(漫画页面)。而背景图必须选择横图，而且两边的位置要有良好的视觉效果，我们的排版虽然精简，但是非常有视觉效果，使页面的整体布局合理，既突出网站的主色调，又给人以凝重的感觉，同时增加页面的可看性。

动漫介绍页面

3.动漫排行榜展示

动漫排行榜是为了让浏览者更方便更快更准确地了解到动漫的最新信息而制作的，红色的为最热门的TOP5，分别有：总排行、日本漫画排行、香港漫画排行、大陆漫画排行等排行榜榜单。我们也会定时更新榜单，为了让广大读者更快更直接地了解最新的动漫信息。

4.第三层展示

看漫画页面，是我们制作的重点，并且为了让大家能看漫画，我们专门找了类似翻页的网页特效，方便读者的翻阅，而且让网站更炫，也不容易觉得无趣及疲劳。第三层部门动漫是漫画欣赏，有的是动漫观看。主要是看我们更新的是什么哦~ 也可以让各位动漫迷提前看到剧情的发展，好看又过瘾啊!亲。定时进入查看最新动漫吧~注册用户账号，方便随时进入看哦 送上一幅漫画图：

10 第三层页面的设计代码如下：

返回