第一篇：《网页设计与制作》综合实训
《网页制作》期末大作业
一、概述：
要求设计并制作一个表达某个主题的网站，通过网站的制作，综合运用本课程各单元所学的知识。网站的内容不能是一些素材如图片、音乐等的堆积，必须有鲜明的主题。可以从网上下载部分资料，但不能超过整个内容的30%，更不要指望从网上下一个完整的网站应付老师。总的页数应超过10页（一个包含主题内容的htm文件算一页）。请同学们注意不要下载相同的资料，如果出现网页内容雷同，双方都要扣分，严重的必须重做。
二、网站内容：
自行选择如下内容：科普、科幻知识；公益形象宣传；大、中、小学教学用动画形象；奥林匹克体育；环境保护；战争与和平；求职；校园生活；诚信、传统美德；交通安全；卫生与健康；爱心；教育；新青年；管理；实用工具等。自己确定一个主题，整个网站要突出主题，信息分类合理，导航清晰。要求必须有自己创作的内容，这些原创内容可以是文字、图片、动画等。
三、版面及格式：
l、要求图文并茂，颜色搭配合理，但是图片及声音文件不要太大。如果能加入自己创作的动态元素(如Flash，Gif动画等)将获得加分。希望充分发挥自己的创作能力。
2、要求每个网页都使用表格布局。
3、要求网页中插入有Web组件，包括悬停按钮、滚动字幕、横幅广告管理器等。
4、导航设计简洁明了，不能有“死链接”，要保证能够在网络上浏览。
5、自创内容越多越好，得分越高。
四、递交方式：
1、每个同学以自己的学号姓名建一个文件夹，上交时间为18周2、所做网页的首页文件名必须为index.htm3、所有文件名和目录名全部使用英文字母和数字，不得使用汉字或全角符号，否则，网络将出现死链接。
4、递交时必须把网页中所有用到的图片、声音、动画等都一起上传到服务器。网页的总容量一般不要大于3MB5、建议将网页中的素材分类，建立不同的子目录存放。
五、网页评分标准:
整个网页的评分强调“自己的创意”，不管主题是什么，也不论是哪一个栏目的内容，如果创意独特，有自己鲜明的个性、观点，得分较高。
1、主题鲜明，有关主题的内容丰富（30分）
2、原创内容丰富，能体现自己的想法，文字流利通顺（30分）
3、版面布局合理，整理效果美观（20分）
4、其他内容如友情链接、相关资料等（5分）
5、插入的图片等素材恰当、美观（5分）
6、技术含量（使用了各种效果、技术等）（10分）
六、网页制作特别注意事项：
1、网页文件名最好全部用英文字母或数字（不能包含汉字）；
2、整理图片和其他素材；
3、在与网页主文件（index.htm)同级的目录中建立子目录image(图片）、wave(声音）、„等，将取得的素材按类保存好，在制作网页（即编辑HTM文件）时，必须从这些目录中插入素材，以保证显示正确，不能从其他目录插入，提示另外保存图片时，不要改变保存目录，直接按[确定]即可。同学们要改变那种在编辑网页时到处找图片，找到了就往HTML文件中插的坏习惯(也不管这个文件在哪里）；
4、作好笔记将对后期调试非常有利，从开始规划起就记录目录名、文件名的分配，以便调试时节省时间。
第二篇：《网页设计与制作综合实训》实训指导书
武汉商贸职业学院 信息工程学院
《网页设计与制作综合实训》实训指导书
软件教研室 2013年9月 《网页设计与制作综合实训》实训指导书
目录
实训目的...........................................................................................................................................1 实训内容及要求...............................................................................................................................1 实训性质、实训地点、实习时间安排，适用专业班级...............................................................2 实训一 站点的规划设计..................................................................................................................3 实训二 设计案例网站LOGO.........................................................................................................4 实训三 设计案例网站BANNER...................................................................................................5 实训四 设计案例网站导航条.........................................................................................................6 实训五 设计案例网站网页内容和网页版权声明.........................................................................7 实训六 对案例网站版面切图.........................................................................................................8 实训七 制作完成案例网站首页.....................................................................................................9 实训八 案例网站模板的制作.......................................................................................................10 实训九 案例网页超级链接的添加...............................................................................................11 实训十 案例网站加入动态元素...................................................................................................12
第2页 《网页设计与制作综合实训》实训指导书
实训目的
在前一阶段，学生完成了《网页设计与制作》、《图形图像处理》、《CSS设计》、等专业课程的学习，为了让学生将前期的专业课程学以致用，融会贯通，特开设本系统化实训。
本次综合实训基于学生的兴趣，选取专业建设网站开发为主题，基于网页开发的流程，把实训周期当做是一个项目的开发周期，严格把握项目进度，最终要求学生完成网站的前台设计。
通过本次实训希望达到以下目的：
1.熟悉和掌握Dreamweaver软件的使用方法； 2.熟悉和掌握PS软件的使用方法； 3.熟悉FLASH软件应用的方法； 4.学会使用CSS+DIV做网页布局； 5.熟练掌握站点的规划与设计
实训内容及要求
本实训的内容简述： 1.网站首页（1）专业概况（2）专业建设规划
（3）展示最新动态文章标题（8条）（4）专业建设成效的文章标题（8项）（5）专业建设特色文章标题（8项）2.专业概况
点击项目概况，显示相关文本 3.专业建设规划
点击项目申报书菜单，显示flashpaper格式的申报书内容 4.专业建设特色
显示专业建设特色的文章标题列表，点击标题进入内容 5.专业建设动态
显示专业建设动态的标题列表，点击标题进入成果详细展示 6.专业建设成效
显示专业建设成效的标题列表，点击标题进入成果详细展示。本实训的要求：
1.应用css和html（div+css）技术完成至少4个页面，其中必须包括网站主页面设计、栏目页设计、管理员管理登陆页面、管理员登录以后的页面。2.显示环境：网页视觉效果应采用Internet Explorer 6.0以上版本浏览器，显示分辨率以1024×768状态为准。
第1页 《网页设计与制作综合实训》实训指导书
3.网页规模：网页总量原则上不应超过10M，且必须要是不连接互联网就可以进行展示的作品。
4.网站结构：要求结构清晰，文件有清晰的分类，比如图片都放在images文件夹下等。
5.要求页面美观大方、颜色搭配协调；
6.作品留存，下学期或下一阶段继续完善、开发。
实训性质、实训地点、实习时间安排，适用专业班级
该实训为校内模拟实训。根据高等教育教学大纲规定和学院教学计划安排及培养学生职业技能的要求，软微班的学生于第一学期进行为期4周的校内实训，项目名称为《网页设计与制作综合实训》。
实训时间：2013-2014学年第一学期第15-18周 实训班级：软件1301班、软件1302班 实训地点： 学校机房
第2页 《网页设计与制作综合实训》实训指导书
实训一 站点的规划设计
1、学时分配：6学时
2、实训目的
（1）熟悉Dreamweaver软件的界面布局和工作环境。（2）熟练掌握本地站点创建和管理的方法。
3、实训任务
（1）创建一个静态网站站点。（2）从网络上收集网页素材。
（3）根据提供的网站策划方案范本，结合自己要制作完成的网站，开始着手书写网站策划方案。
4、实训内容
（1）打开Dreamweaver 软件，熟悉软件的界面布局和工作面板的摆放，能够熟练使用Dreamweaver 软件。
（2）在本机D盘上创建文件夹“home”，在“home”文件夹下根据网站的规划设计，创建相关的文件夹，用来放置不同的文件。
（3）在Dreamweaver 软件中，将D盘 “home” 文件夹定义成静态网站站点，站点名称任意。
5、实训要求
（1）由指导教师讲清实训的基本原理，要求，实训目的。
（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。（3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。（4）除了教师的指导外，还要着重培养学生自学的能力。
第3页 《网页设计与制作综合实训》实训指导书
实训二 设计案例网站LOGO
1、学时分配：6学时
2、实训目的
（1）熟悉Photoshop软件的界面布局和工作环境。（2）熟练掌握网站LOGO的设计方法。（3）创建项目案例网站的LOGO。
3、实训任务
（1）掌握Photoshop软件文字工具工具的使用方法。（2）查看网络上相关网站LOGO。
（3）根据小组讨论结果，实际动手完成网站的LOGO。
4、实训内容
（1）打开Photoshop软件，熟悉软件的界面布局和工作面板的摆放，能够熟练使用Photoshop软件。
（2）新建Photoshop文件，大小为980*600像素，分辨率为72像素/英寸，颜色模式为RGB颜色8位，背景颜色为白色或者透明都可以。（3）使用文字工具，输入MZD三个字母，设置文字属性。
（4）栅格化文字图层，将栅格化后的图层上的3个字母分别移动到不同的3个图层上。
（5）分别对3个字母进行艺术化处理。（6）输入其他的文字。
（7）为输入的文字图层设置“混合选项”。（8）保存文件。
5、实训要求
（1）由指导教师讲清实训的基本原理，要求，实训目的。
（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。（3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。（4）除了教师的指导外，还要着重培养学生自学的能力。
第4页 《网页设计与制作综合实训》实训指导书
实训三 设计案例网站BANNER
1、学时分配：6学时
2、实训目的
（1）熟悉Photoshop软件的使用方法。（2）熟练掌握网站BANNER的设计方法。（3）创建项目案例网站的BANNER。
3、实训任务
（1）掌握Photoshop软件渐变工具的使用方法。（2）查看网络上相关网站BANNER。
（3）根据小组讨论结果，实际动手完成网站的BANNER。
4、实训内容
（1）打开Photoshop软件，熟悉软件的界面布局和工作面板的摆放，熟练使用Photoshop软件。
（2）打开上次保存好的Photoshop源文件，在上次完成的LOGO基础上，准备开始制作本次的BANNER。
（3）根据网站策划方案里的主色调和主题的要求，开始设计网站的BANNER，首先去选择一张适合的图片。
（4）使用矩形选框工具选择要使用的图片部分，图片的其他部分删除。（5）根据设计要求，在BANNER上添加其他元素，比如文字或者其他能够表达网站主题的图片。
（6）使用魔术棒工具将要放置到BANNER上的图片的某一部分扣出来，然后设置适合的大小，旋转好方向后放好。
（7）设置图层的样式，以及文字的混合选项等。（8）保存文件。
5、实训要求
（1）由指导教师讲清实训的基本原理，要求，实训目的。
（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。（3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。（4）除了教师的指导外，还要着重培养学生自学的能力。
第5页 《网页设计与制作综合实训》实训指导书
实训四 设计案例网站导航条
1、学时分配：6学时
2、实训目的
（1）熟悉Photoshop软件的使用方法。（2）熟练掌握网站导航条的设计方法。（3）创建项目案例网站的导航条。
3、实训任务
（1）掌握Photoshop软件圆角矩形工具的使用方法。（2）查看网络上相关网站导航条。
（3）根据小组讨论结果，实际动手完成网站的导航条。
4、实训内容
（1）打开Photoshop软件，熟悉软件的界面布局和工作面板的摆放，熟练使用Photoshop软件。
（2）查看网上其它网站的导航条，了解导航条的基本情况。
（3）打开上次保存好的Photoshop源文件，在上次完成的基础上，准备开始制作本次的导航条。
（4）根据网站策划方案里的主色调和主题的要求，开始设计网站的导航条，首先去选择一张适合的图片。
（5）使用圆角矩形工具绘制一个圆角矩形，颜色与大小要与整个网站的风格与主题相一致。
（6）选中绘制好的圆角矩形，使用渐变工具，绘制立体感导航条背景。（7）输入导航条文字，输入导航条文字间的竖线间隔。（8）设置文字和竖线的混合选项，增加立体感。（9）保存文件。
5、实训要求
（1）由指导教师讲清实训的基本原理，要求，实训目的。
（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。（3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。（4）除了教师的指导外，还要着重培养学生自学的能力。
第6页 《网页设计与制作综合实训》实训指导书
实训五 设计案例网站网页内容和网页版权声明
1、学时分配：6学时
2、实训目的
（1）熟悉Photoshop软件的使用方法。
（2）熟练掌握网站网页内容和网页版权声明的设计方法。（3）创建项目案例网站的网页内容和网页版权声明。
3、实训任务
（1）掌握Photoshop软件多种工具结合的使用方法。（2）查看网络上相关网站网页。
（3）根据小组讨论结果，实际动手完成网站的网页内容和网页版权声明。
4、实训内容
（1）打开Photoshop软件，熟悉软件的界面布局和工作面板的摆放，熟练使用Photoshop软件。
（2）查看网上其它网站的网页，了解网页对象分布的基本情况。
（3）打开上次保存好的Photoshop源文件，在上次完成的基础上，准备开始制作本次的网页内容和网页版权声明。
（4）根据网站策划方案里的主色调和主题的要求，选择灰色与深蓝色作为边框颜色，网页内容标题文字颜色为黑色。
（5）以制作通知公告为例，使用文字工具输入文字“通知公告”，文字大小为14号，文字颜色为黑色，文字字体为“宋体或者黑体”，根据自己的理解，可以为文字增加“混合选项”，设置文字效果。（6）新建图层，选择“线条工具”，线条粗细为1 像素，颜色为黑色或者深蓝色都可以，绘制一条直线。
（7）新建图层，选择“圆角矩形工具”，半径为50 像素，颜色为黑色或者深蓝色。
（8）新建图层，选择“文字工具”，在刚才绘制好的圆角矩形上输入“More”，文字大小是12，颜色为白色，字体为“Arial”。
（9）使用同样的办法可以制作完成其他网页内容部分的标题。（10）保存文件。
5、实训要求
（1）由指导教师讲清实训的基本原理，要求，实训目的。
（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。（3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。（4）除了教师的指导外，还要着重培养学生自学的能力。
第7页 《网页设计与制作综合实训》实训指导书
实训六 对案例网站版面切图
1、学时分配：6学时
2、实训目的
（1）熟悉Photoshop软件的使用方法。（2）掌握网站版面设计的方法。（3）对案例网站版面进行切图。
3、实训任务
（1）掌握Photoshop软件切片工具的使用方法。（2）查看网络上相关网站网页。
（3）根据小组讨论结果，实际动手对网站版面进行切图。
4、实训内容
（1）打开Photoshop软件，熟悉软件的界面布局和工作面板的摆放，熟练使用Photoshop软件。
（2）查看网上其它网站的网页，了解网页对象分布的基本情况。
（3）打开制作好的网站版面源文件，使用切片工具准备对版面进行切图。（4）使用参考线将网站版面部分之间进行分割。（5）使用切片工具对网站版面进行切割。
（6）切图完成后，选择“文件”——“存储为WEB所用格式”，存储文件类型可以选择“JPEG”或者“GIF”。（7）整理保存好的文件。
5、实训要求
（1）由指导教师讲清实训的基本原理，要求，实训目的。
（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。（3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。（4）除了教师的指导外，还要着重培养学生自学的能力。
第8页 《网页设计与制作综合实训》实训指导书
实训七 制作完成案例网站首页
1、学时分配：6学时
2、实训目的
（1）熟悉Dreamweaver软件的使用方法。（2）掌握使用表格布局网页的方法。（3）制作完成案例网站首页。
3、实训任务
（1）掌握Dreamweaver软件的使用方法。（2）查看网络上相关网站网页。
（3）根据小组讨论结果，实际动手完成案例网站首页。
4、实训内容
（1）预览实训网页。
（2）在D盘根目录下新建一个文件夹“home”，在该文件夹中分别新建“css”、“images”，“html”三个文件夹，（3）打开Dreamweaver软件，将“home”文件夹定义为站点。
（4）创建一个命名为“index.html”的网页文档，设置网页的页面属性。（5）根据网页首页效果图，插入表格，进行表格的嵌套，完成网页首页的布局。（6）在网页插入的表格中输入文字、水平线和日期等内容，设置文本的属性。（7）在网页中插入图像，设置图像的属性。
（8）创建CSS样式表文件，分别定义需要添加效果的不同CSS样式。（9）在网页上分别应用不同的CSS样式。（10）保存网页文件。
5、实训要求
（1）由指导教师讲清实训的基本原理，要求，实训目的。
（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。（3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。（4）除了教师的指导外，还要着重培养学生自学的能力。
第9页 《网页设计与制作综合实训》实训指导书
实训八 案例网站模板的制作
1、学时分配：6学时
2、实训目的
（1）熟悉Dreamweaver软件的使用方法。（2）掌握网页模板的制作方法。
（3）掌握使用网页模板创建网页的方法。
3、实训任务
（1）掌握Dreamweaver软件的使用方法。（2）查看网络上相关网站网页。
（3）根据小组讨论结果，实际动手制作网页模板。
4、实训内容（1）根据下发的“二级网页.jpg”，在Photoshop软件中设计完成二级网页版面，并且切图制作网页。
（2）查看网上其它网站的网页，了解网页对象分布的基本情况。
（3）在Dreamweaver软件中打开制作好的二级网页，选择“文件”—“另存为模板”，将制作好的网页转化为模板文件。（4）在创建好的模板网页上插入“可编辑区域”，根据需要可以插入多个可编辑区域。
（5）也可以选择“文件”—“新建”—“模板文件”，重新创建一个新的模板文件，跟制作网页的方法一样，制作完成模板网页后，一定要在模板网页中插入可编辑区域。
（6）选择“文件”—“模板”，选择创建好的网页模板，选择“由模板创建”，利用制作好的模板来生成网页。
（7）在生成的网页中的可编辑区域中添加相应的网页内容。（8）对创建好的网页模板进行编辑，并且进行更新。（9）整理保存好的文件。
5、实训要求
（1）由指导教师讲清实训的基本原理，要求，实训目的。
（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。（3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。（4）除了教师的指导外，还要着重培养学生自学的能力。
第10页 《网页设计与制作综合实训》实训指导书
实训九 案例网页超级链接的添加
1、学时分配：6学时
2、实训目的
（1）熟悉Dreamweaver软件的使用方法；（2）掌握网页超连接的添加和设置方法；（3）创建完成案例网页的超连接。
3、实训任务
（1）掌握Dreamweaver软件的使用方法。（2）查看网络上相关网站网页。
（3）根据小组讨论结果，实际动手创建网页超链接。
4、实训内容
（1）根据设计好的二级网页版面，制作网页模板。（2）打开Dreamweaver软件使用创建的二级网页模板来创建主页的新闻网页。（3）根据首页新闻链接标题内容，选择新闻网页内容，并将新闻内容添加到使用网页模板生成的新闻网页中。
（4）为首页新闻文字添加文字超链接。
（5）在创建新闻网页的模板文件中添加返回首页的链接。（6）更新网页。
（7）根据首页导航条内容，选择合适的网页内容，使用二级网页模板生成相应网页。
（8）为首页导航条添加图片超链接，链接到相应的二级网页。
（9）在创建二级网页的模板文件中创建返回首页，以及二级网页之间互相链接的超链接。
（10）更新网页。（11）为首页添加邮件链接、锚点链接、跳转菜单链接、下载链接等其他超链接。（12）测试网页超链接，保存相关文件。
5、实训要求
（1）由指导教师讲清实训的基本原理，要求，实训目的。
（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。（3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。（4）除了教师的指导外，还要着重培养学生自学的能力。
第11页 《网页设计与制作综合实训》实训指导书
实训十 案例网站加入动态元素
1、学时分配：6学时
2、实训目的
（1）熟悉Flash软件的使用方法；（2）掌握创建滚动效果的方法；（3）为案例网站加入动态效果。
3、实训任务
（1）掌握Dreamweaver软件和Flash软件的使用方法。（2）实际动手为网站首页制作一个Flash动画。
（3）为首页增加新闻动态滚动效果，以及图片动态滚动效果。
4、实训内容
（1）打开Flash软件，熟悉Flash软件的使用方法。
（2）使用Flash软件创建一个简单动画，比如图片之间的简单切换。（3）打开Dreamweaver软件，将Flash中生成的SWF格式动画文件插入到网页中，设置动画属性。
（4）熟悉链接网页源代码的编写方法，掌握基本的网页代码标签。（5）在“通知公告”中给网页新闻添加由下向上的动态滚动效果。（6）在“专业展板”中给图片添加由右向左的动态滚动效果。（7）测试网页效果，整理保存好的文件。
5、实训要求
（1）由指导教师讲清实训的基本原理，要求，实训目的。
（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。（3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。（4）除了教师的指导外，还要着重培养学生自学的能力。
第12页
第三篇：网页设计与制作实训报告
《网页设计与制作》课程设计报告书
设计题目：起止日期： 工作室或公司网站设计
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 6 6 7 7 8 9
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.第三层展示
看漫画页面，是我们制作的重点，并且为了让大家能看漫画，我们专门找了类似翻页的网页特效，方便读者的翻阅，而且让网站更炫，也不容易觉得无趣及疲劳。第三层部门动漫是漫画欣赏，有的是动漫观看。主要是看我们更新的是什么哦~ 也可以让各位动漫迷提前看到剧情的发展，好看又过瘾啊！亲。定时进入查看最新动漫吧~注册用户账号，方便随时进入看哦 送上一幅漫画图： 第三层页面的设计代码如下：
第四篇：网页设计与制作实训十二
《网页设计与制作》实训
表单设计
实训内容：用户注册界面设计
操作提示：
第一步：制作“用户注册”界面
1）在Dreamweaver CS4中新建一个网页文件，将网页标题设置为“用户注册”。2）选择“插入→表单→表单”命令在文档中插入一个表单，如图12-1所示。
图12-1 插入表单
3）将光标置于创建的表单内，插入一个12行2列的表格，并设置表格的宽度为530像素、间距为0像素、边框为0像素。
4）选中第一行的两个单元格，单击“修改→表格→合并单元格”命令，将它们合并为一个单元格。用同样的方法将最后一行的单元格合并为一个单元格，如图12-2所示。
图12-2
插入的表格 5）将光标置于第一行的单元格中，输入“用户注册”，在单元格“属性”面板中设置文本居中对齐。
6）根据图12-3提供的界面内容，分别在表格第1列的其它单元格中输入昵称、真实姓名、密码等文本。选中输入的文本，并将它们设置为粗体、右对齐方式。
图12-3
输入文本
7）选中表格中所有的单元格，在单元格“属性”面板中设置单元格的高为30。第二步：插入文本域
1）在图12-2所显示的表格中，将光标置于“昵称：”后面的单元格中，单击“表单”标签中的“文本字段”按钮，或者选择“插入→表单→文本域”命令，均将打开“输入标签辅助功能属性”对话框，如图12-4所示。
图12-4
“输入标签辅助功能属性”对话框
2）单击【确定】按钮，在光标处插入了一个单行的文本域。3）选中插入的文本域，其对应的“属性”面板如图12-5所示。
图12-5
文本域“属性”面板
文本域“属性”面板中各选项含义如下：
文本域：用于标志该文本域的名称。每个文本域的名称都不能相同，它相当于表单中的一个变量名，服务器通过这个变量名来处理用户在该文本域中输入的值。
字符宽度：设置文本域中最多可显示的字符数。当设置该选项后，若是多行文本域，标签中增加cols属性，否则标签增加size属性。如果用户的输入超过字符宽度，则超出的字条将不被表单指定的处理程序接收。
最多字符数：设置单行、密码文本域中最多可输入的字符数。当设置该项后，标签增加maxlength属性，如果用户的输入超过最大字符数，则表单产生警告声。
类型：设置文本域的类型，可在单行、多行或密码3个类型中任选一个。“单行”类型将产生一个标签，它的type属性为text，这表示此文本域为单行文本域。“多行”类型将产生一个