第一篇：中文版Dreamwever 8网页制作基础与实训教学计划 2
《网页设计》教学大纲
——郭启婷
学
时：45学时 适应专业：高职计算机专业
一、课程的性质与任务
课程的性质：本课程是为培养高职计算机专业学生对网页设计与制作的基础知识而设置的一门专业必修实训课程。由于网页设计与制作所涉及的软件和相关知识十分广泛，针对计算机专业学生的专业方向和专业基础，本课程侧重于网页视觉效果和版式布局的设计与制作，对大中型网站制作中的所涉及到的动态程序编写等较复杂技术手段作了回避或仅作简单介绍。
课程的任务：通过本课程学习，使学生了解网页制作的基础知识、基本流程，并能熟练使用Macromedia Dreamweaver进行个人网站和中小型商业网站的设计、制作与维护更新，为培养高级网页设计专业人才打下坚实的基础。
前导课程：电脑操作基本知识，Photoshop、Flash，图形设计、编排设计与制作。后续课程：所有计算机设计课程，以及毕业设计。
二、教学基本要求
通过课程的教学，在理论知识教学和技能培养两方面要求学生达到下列目标。
（一）理论知识方面主要达到：
1．了解互联网、网页、网站、超级连接、HTML语言、FTP、HTTP等基础网络知识； 2．了解网站设计制作的常用工具与基本流程 3．了解html语言的一般规律
4．了解不同网站类型不同的设计与制作要求 5．了解网站的整体结构规划
（二）能力方面主要达到：
1． 熟练掌握Macromedia Dremweave的基本操作； 2． 掌握photoshop中网页设计稿文件的切片与优化输出； 3． 掌握网页图像的优化技巧；
4． 了解网站的测试、发布、推广与维护；
三、教学条件
保障每个学生都能单独使用一台电脑，每台电脑都配备Dreamweaver、photoshop等设计软件。
四、教学内容及课时安排：
第一章 网页设计基础知识（4课时）
第一节 第二节 第三节 第四节 网页设计概述
在DreamweaverCS3中建立站点 创建站立点地图 设置Web服务器
第二章 网页的编辑（4课时）
第一节 第二节 文本操作 图像操作
第三章 网页的布局（4课时）
第一节 第二节 第三节 表格
在布局模式下绘制布局表格 框架
第四章 超链接的创建与管理（4课时）
第一节 第二节 超链接和路径概述 超链接的使用
第五章 CSS样式表与行为（5课时）
第一节 第二节 使用CSS样式表 行为及简单应用
第六章
AP元素和时间轴（4课时）
第一节
使用AP元素 第三节 AP元素时间轴配合使用的动态效果
第七章
表单的使用
（6课时）
第一节
创建表单网页 第二节
创建留言簿 第三节
验证表单内容
第八章 图像和动画的制作与优化（4课时）
第一节 第二节 图像的制作与优化 动画的制制与优化
第九章 网站文件的检查与发布（2课时）
第一节
网站文件的检查与测试
第二节
注册域名、申请空间与网站发布
第十章
综合训练（4课时）
第一节
网站的规化 第三节 网站的上传发布、备案和维护
五、教法说明
1、本课程是一门专业技能训练课程，以学生的实践操作为主，注重设计与制作能力的培养、经验与技巧的积累。课程中引导学生在练习中解决具体的问题，使学生能灵活地、熟练地应用所学的理论知识。
2、教学练习中，以优秀实际案例为参照，增强教学的趣味性、实用性和针对性。
3、课程末要求设计制作一个完整的小型网站，并上传、发布和推广，以综合运用和巩固所学知识，激发学生兴趣，为将来的进一步学习打下基础。
六、考核方式与评分方法 1.考勤总成绩的10％。
2.过程考核（理论知识、提问、查阅、课堂作业与课堂表现等）总成绩的30％ 3.以综合性设计作业的方式，设计制作完整的小型网站，占总成绩的60％。
七、教材、参考材料及使用工具
教材：
1、《网页设计与制作实用教程》：肖丽（主编），北京师范大学出版社，2008年2月；
第二篇：网页与制作实训论文范文
网页实训报告
新闻系统前后台交互
组长：
组员：
指导老师：
实训目的………………………………………………………………………2 项目思路………………………………………………………………………3 项目准备………………………………………………..…………………….4 前台页面主要代码……………………………………………………………5 数据库连接，确保登录代码…………………………………………………6 后台页面主要代码…………………………………………….………………7 项目亮点………………………………………………………………….…..13 优点和不足之处……………………………………………………………...13 实训总结…………………………………………………………………......14
实训报告
实训目的：
这次网页与制作的实训是锻炼我们实践能力重要环节，是对我们实践工作能力的具体训练和考察过程。随着科学技术发展的日新月异，网页设计制作已经成为当今计算机应用中空前活跃的领域，在生活中可以说是无处不在。因此作为二十一世纪大学生来说掌握网页设计制作的技术能力是十分重要的。
1.进一步熟悉和掌握网站建设的基本流程和技术规范；
2.巩固运用sublime, Dreamweaver,PhotoShop网页制作软件制作网页 3.巩固运用NatBeans,wampmanager动态网页制作软件制作动态网页
4.用sublime,NetBeans,wampmanager三个软件完成网站建设登录前后台任务的方法，能独立设计一个内容完整，图文并茂，技术运用得当的网站；
5.具备独立撰写实训报告等科技文件的基本能力；
6.在网页设计的实践中培养分析问题，解决问题的能力，培养协作，交流的能力，培养创新和团队意识；
7.为今后从事网站开发，维护和管理奠定基础。通过实训，掌握网页设计系列软件sublime, wampmanager软件的使用方法，达到全面理解，运用网页制作的知识，并使之得以融会贯通，在掌握理论知识的基础上再加以实践，进一步提高,加强设计，制作网站的综合能力。
项目思路：
首先我们分为两大块，前台页面和后台页面。分别建文件夹web和admin。前台：先利用我们学习的div+css布局方法+JavaScripte做好静态页面。接下来利用from表单+简单的CSS样式做好登录页面。然后利用fromeset分帧做好后台框架。框架左列表为后台首页，用户列表，新增用户，新闻列表，新增新闻。接下来要完成的就是在每个列表中实现页面效果。点击列表能够出现每个列表的页面。然而要实现这个效果是要先建数据库，再在数据库中建表，在表中插入我们要的数据。我们要建三张表，分别为admin，user，news。再就是连接数据库。admin表是要通过数据库连接在后台实现管理员登录页面。news表是要通过数据库连接实现新闻增加，修改，删除。user表是要通过数据库连接实现用户信息，添加用户显示在后台。
项目准备：
news-info:
数据库名
admin：
管理员登录表名
user：
用户注册信息表名
news：
新闻信息表名
前台（web）：
images：
js播放图片；
img：
登录页面背景图
ht.php：
前台静态页面效果图
Style：
前台静态页面样式
config.php：
连接数据库
conn.php：
确保登录成功
login.php：
登录页面
jQuery.js：
js代码 后台(admin):
登录页面(dl):
img:
背景图 config.php
确保登录成功 login.php
登录页面
admin：
conn.php
连接数据库
htsy.php
后台首页
index.php
后台界面
left.php
框架左列表选项
news.add.php
添加新闻
news-del.php
news-upd.php
news-list.php
zcye.php
zcye-del.php
zcye-list.php
zcye-upd.php
1.前台页面主要代码：
删除新闻 新闻修改 新闻列表
添加用户
删除用户 用户列表 修改用户
2.登录页面代码：
3.连接数据库：
4.确保登录：
5.后台界面代码：
6.框架左列表代码：
7.后台首页：
8.新闻列表代码：
9.添加新闻：
10.删除新闻：
11.修改新闻：
12.用户列表：
13.添加用户：
14.修改用户：
15.删除用户：
16.前台显示后台数据代码：
项目亮点：
运用了两次js代码来实现效果，使页面更加生动。同时也运用了验证码等一些小亮点。
优点：
思路清晰，充分增强了动手能力，创作能力，更加懂得团队协作能力，对网页设计软件DreamWeaver,Sublime,WampServer,NetBeans,PhotoShop,JavaScript的强大运用有了很大提高。也大大提高了自己分析问题，解决问题的能力。
不足之处：
充分体现出老师教的知识并没有完全掌握，也是根本没有真正理解老师上课教的内容。尤其是对PHP，数据库知识了解，懂的太少，以至于在做项目后台过程中遇到很多问题，大大影响了整个项目的进度。
总结：
通过本次实训我们基本掌握了制作简单网页，完善登陆前后台，相互连接的过程。基本熟悉了各种软件的综合使用方法。实践出真理，实训的日子快要结束，感觉还是学到了很多，从理论和操作中融合了我们平时所学的知识，也为我们今后的学习和工作铺垫了精彩的一幕。因此，我们坚信，只要用心去学，没有什么是学不会的。希望今后的我们更加努力的开拓我们的极限，我们也要更加努力。通过这两周的学习，我们也更加明白平时学习的重要性，平时认真学习的同学，经常做网页项目的同学，明显做整个项目很轻松，整个项目做得也非常好。所以，我们平时的学习是不能马虎的，一分耕耘一分收获。当然，在制作过程中也出现了很多问题，我们小组先一起讨论，一起查找问题，研究问题，最后也能发现出问题我们会一起解决。我明白这就是团队的力量，不可小觑。当然也有解决不了的问题，我们会请教他人大家互相帮助，共同进步。有时候解决不了问题的时候，一次又一次在修改代码，运行不出来时，我们会很着急失去耐心，也想放弃。可还是咬牙坚持下来了，坚持就是胜利。做项目真的需要更多的耐心和能力。我们还有很多能力需要提高，还有很多不足需要在今后生活中慢慢改进。这次实训也收获了很多，和我们的组员学到了很多，我们一起学习，一起进步。最大的收获还是觉得老师讲课很幽默，知识点讲解的很透彻，让我们能很容易去理解。遇到不理解的问题老师会很耐心的跟我们讲解，还用起了画图方法，真的很形象生动。这次实训真的很充实。在这，我表示深深的感谢！感谢我的小组成员，感谢帮助过我的同学，感谢我们的老师！
第三篇：网页制作实训报告
《网站设计与制作》实训报告
X学院XX班XXX号
一．实训时间：
2010年6月7日到2010年6月13日
二．实训地点：
XXX学院XXX班级
三．实训组员：
XXX、XXX
四．实训目标：
运用网页设计方法，设计一个网站，提高综合应用所学知识的能力，积累Web网站的制作经验，培养团队协作精神。本次实训的具体目标为:了解网站制作的一般流程;熟练使用网页制作工具Dreamweaver、Flash、Fireworks设计网页;能灵活运用表格、层和框架布局页面;熟练使用CSS样式表美化网页;正确使用JavaScript添加网页特效;灵活使用模板和库来制作网页；学会申请免费域名空间和正确上传站点的方法。
五．实训策划：
这一周，我们要进行《网站设计与制作》实训，我们认为做网站前最主要的是确定主题、框架和标题栏的设计。因此我们相互讨论之后，确定制作以“婚纱”为主题的“喜多坊时尚婚纱网”。在之后的资料收集和网页的框架的建设中，我们发现了许多问题，某些关键点无法做出心中的效果，这让我们有些遗憾。通过自身及组员的共同探索，我们已尽权利将以下是我们的策划内容：
1.确定主题。制作网页,首先是确定主题，冬天很冷,却冷得很幸福，刚刚过去的圣诞的热闹劲还在心头。于是我们从幸福出发，想到了结婚-婚纱，建立一个简单的介绍婚纱的网站并取名喜多坊时尚时尚婚纱,专业介绍一些喜多坊婚纱的特色等。我们本次间的网站基本以粉红为基点，粉红是可爱清纯的颜色，粉红代表着幸福温馨，所以本站以粉红为风格，让整个网站充满爱的力量。
2.设计主页。主页的设计是整个网站的灵魂，构思导航栏的分类，然后是整体规划，每一版块都有其个性的色彩，清晰明了，便于阅读浏览，我们构思大致
分几部分，首页，关于我们，婚纱礼服，量体裁衣，婚纱选购，公司门市，与我联系，在线论坛8大板块，每一板块又分几小部分，内容比较充分，多样。确定导航栏的各个分类标题之后对于建立二级子网尤为重要，我们运用Photoshop CS3技术来设计出导航栏，制作切片，建立导航栏，将整体的主页效果建立起来。
3.资料的搜集。主页的导航栏设计好后，接下来就是对主页导航栏的各个内容进行资料的收集，我们采用大量的资料收集再对资料进行塞选p图，得到最适合导航栏内容的资料。素材的选择，要符合网站的主题，图片的大小要符合模板的轮廓，我们将不符合模板的用Photoshop处理编辑，然后放入站点底下，进行图文的链接和排版。
4.各个子网页的建立。我们设计好模板后只要在可编辑区依次编辑所需资料就可，运用模板建立子网页少了很多工序，为我们节省大量的时间。尽管我们建立了模板，但我们在建立子网时很小心，因为一张图片的大小插入就有可能破坏整个模板的结构尤其在使用表格时，因此我们对所插入的图片和表格都得进行测量，做到不影响网站整体的美观。
5.实现网页间的链接。做好个格子网和首页后，接下来就是通过模板的链接，将整个网站中的网页链接起来，过程其实很简单，主要是把要链接的文字和图标选择在选择工具栏的链接按钮最后选择自己要链接的网页单击确定便可以了。做好这一步后，网站基本算是建好了。
6.向静态网页插入动态效果。在基本建好网页中的插入层和时间轴，制作其动态效果，让整个网页充满生机。我们在网上进行flash素材的收集，通过Flash CS3设计出主题下的风格动态效果。然后插入到静态网页中，使网页更加生动形象。
六．实训心得：
通过这周的学习实践，在老师的指导下以大量明晰的操作步骤和典型的应用实例，使我们真正对所学的软件融会贯通。我们结合年轻人心理制作了时尚婚纱网站，作为实训的成果。其内容是多样化的，制作网页用的软件是Deamweaver CS3软件。它提供了网页和表单的动态生成到网站的解决方案。主图是一个网页的门面，它能体现出这个网页的整体风格。
制作网页,首先是确定主题,经过再三考虑,就做了个关于婚纱的网站。考虑到,现在城市普遍幸福感不高，加上寒冬，于是以幸福为论点扩展想到了结婚，想到了婚纱，想到了未来的美好城市生活，城市让生活更美好，结婚让生活更完整婚纱让生活更多姿！想到这些，我们最后决定建立一个简单的介绍都市婚纱的网站,让这个冬天不再寒冷，让我们回忆起那些幸福的日子。于是网站主题确立。
然后是整体规划，每一版块都有其个性的色彩，清晰明了，便于阅读浏览，大致分几部分，首页，关于我们，婚纱礼服，量体裁衣，婚纱选购，公司门市，与我联系，在线论坛，每一部分又分几小部分，内容比较充分，多样。
再后是收集资料与素材，大量浏览相关网站，收集关于婚纱的图片，进行Photoshop CS3图片处理和排版，插入好的文章和图片等，还有参考一些好的网站的布局，特色，颜色搭配，背景图等。
再后是设计网页图片，用flash制作动画，用Photoshop制作静态图片。再后是建立站点，和制作网页了，使用dreamweaver制作。
首页内容精彩丰富，首页主要是导航作用。首页制作时，时刻考虑着网页的基本原则：统一，连贯，分割，对比及和谐的原则，内容统一，都是为了主题服务，一个网站强调的就是一个整体，只有围绕一个统一的目标所做的设计才是成功的；连贯，页面之间关系连贯，统成一体；每版内容都自成一体，颜色各异，便于浏览；整个网页有动有静，颜色不同，形成对比，不呆板，富有生气；颜色各异，但又不同之中又相同，浑然一体。
简洁实用: 这是非常重要的，网络特殊环境下，尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，所以要去掉所有的冗余的东西。使用方便:同第一个是相一致的，满足使用者的要求，网页做得越适合使用，就越显示出其功能美；页面用色协调，布局符合形式美的要求: 布局有条理，充分利用美的形式，是网页富有可欣赏性，提高档次。当然雅俗共赏是人人都追求的。
利用我们所学的模板设计，制作更完美的页面。将动态网页与静态网页结合起来
再后，调试过程，好多次本来在Deamweaver CS3里好好的，把字调的好好的，位置很对，可在浏览器里御览就出毛病了，不是靠上了，就是靠下了，经过再三调试，整理，加了好多表格，终于满意了。
通过温本周的实训，发现自己还有很多的不足。框架的应用很难把握，切片也很难合理切割，当插入图片的时候把原有的模板给撑破了，精确定位很重要。
因为学艺不精，所以不会网页的代码设计，只能通过网络三剑客综合使用。不过也实践中也学到了很多知识，表格的嵌套是非常重要的，CSS样式的应用也很便捷。还有一些行为中的效果也是蛮不错的。所以这次实训还是很有意义的。
第四篇：网页设计与制作实训报告
《网页设计与制作》课程设计报告书
设计题目：起止日期： 工作室或公司网站设计
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，这表示此文本域为单行文本域。“多行”类型将产生一个