使用before和:after伪类制作css3圆形按钮_网页设计教程_MSDN 我告诉你
&制作步骤:一, &head&标签结构下面代码中使用了CSS3无前缀脚本prefixfree.js,可以省去CSS3中前缀&-moz&、&-webkit&、&-o&、&-ms&&代码如下:&head&&meta
charset=&utf-8&&&title&button&/title&&script
src=&js/jquery.js& type=&text/javascript&&&/script&&script
src=&js/prefixfree.min.js& type=&text/javascript&&&/script&&link
rel=&stylesheet& type=&text/css& href=&css/button.css& /&&script
type=&text/javascript&&/*这里采用淡入效果试试*/$(function(){$(&.bt&).css(&opacity&,&1&);});&/script&&/head&&二, &body&标签结构代码如下:&body&&div
class=&bt&&&div class=&button&&&/div&&div
class=&button2&&&/div&&div style=&clear:both&& &/div&
&/div&&/body&&三，CSS代码&代码如下:* {padding: 0;margin: 0;}/*
清除浮动 */.clearfix:after {content: &&;display:clear:}html, body {height: 100%;}body {font-family:
&Microsoft YaHei&;background: #E1E1E1;font-weight: 300;font-size:
15color: #333;overflow:}a {text-decoration:}/*按钮 阴影无扩展 */.bt {margin: 100display:width: 350opacity:0;border-bottom: 1px solid
#C5C5C5;border-top: 1px solid #C5C5C5;box-shadow: 0 1px 0 #F6F6F6, 0 1px
0 #F6F6F6transition: all 0.5s ease-}&/p&
&p&.button:before, .button2:before {content: &&;width:
130height: 130display:z-index: -1;position:background: #left: -15top: -15border-radius:
65box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);}.button:after,
.button2:after {content: &注册&;color: #09F;font-size: 20width:
100%;height: 100%;line-height: 100text-align:position:top: 0;display:}.button2:after {content: &登入&;word-spacing:
25color: #A0D989;}.button, .button2 {float:margin:
50cursor:height: 100width: 100display:position:color:text-align:line-height: 100
本站内容部份来至互联网，版权归原作者/公司所有。如有侵犯权益，请联系我删除！谢谢网页设计实训总结
网页设计实训报告总结
范文一：网页设计实训总结通过这次实训对这门课程的学习，做好主页，并不是一件容易的事，它包括个人主页的选题、内容采集整理、图片的处理、页面的排版设置、背景及其整套网页的色调等很多东西。所以我得出一下总结： 一、 准备资料和挑选符合目的主题的合适素材 做主页当然要收集、准备资料。在网上多转转，看到什么漂亮的网页，把它保存起来，作为以后自己设计主页时的参考。另外，还包括搜集美化主页可能要用到的各种材料，如背景、小动画图标等等。你可以在硬盘上建一个文件夹，下分“图片、声音、动画”等文件夹，养成上网时看到有创意、新鲜的图像，就按鼠标右键存入你硬盘相应文件夹的习惯，时间一长你就有拥有了一个可观的图库，等做主页时随手拈来或加以修改就成你自己的东西了。二、 规划好整个网站 主页的设计应以醒目优先，应该令人一目了然，切勿堆砌太多不必要的细节，或使画面过于复杂。切记，页面给人的第一观感最为重要！在网上到处浏览网站的人很多，如果你的主页给人的第一印像没有吸引力，很难令他们深入观赏，而且他们恐怕再也不会访问你的网站了。 三、 善用图片，增强艺术效果 我记得老师说过网页的迷人之处之一，要算它上面能点缀许多漂亮的图片。精美的图片设计，可以使自己的网页增辉不少，令人过目不忘。图片的内容应有一定的实际作用，切忌虚饰浮夸，同时还要注意与文字的颜色搭配。最佳的图像集美观与资讯于一身。四、善于借鉴他人主页制作中的设计技巧 由于在网上用浏览器浏览任何主页时，都能查看到该主页制作时所编写的绝大部分网页编程源代码。因此，如果你想知道并掌握一些优秀的主页采用的设计技巧，试着将其源代码调出来仔细揣摩，并模仿着一步一步去实现。
范文二：实训总结经过俩周的实训，我从中收获了很多。原本以为计算机科学导论的实训是纯理论的，得知是上机操作还是有一点兴奋。刚打开实训的要求，发现在实训期间我们要学的好多。像word、excel、photoshop、PowerPoint、flash、dreamweaver等软件的应用，有些是我从来没有接触过的，有一些是自己会一点皮毛的。带着一份紧张一份好奇，我开始展开了对这些软件的探索。按照老师在实训期间给我们的要求，在做word的时候，原本以为很简单的，后来才发现自己会的只是冰山一角，原来word的用处那么多。通过训练，我掌握了段落的拆分、移动和复制处理以及段落格式设置，格式、特殊字符的查找和替换，分栏、首字下沉设置，页眉、页脚及页码的设置，插入艺术字体、图片、公式等对象， 图片的旋转和翻转、组合和对齐。Excel在我的意识里只能用来编辑数据，做个表格，没想到还有数据排序和自动筛选、图表的创建和编辑、分类汇总等功能。Photoshop的功能是处理图片，在实训的时候自己做的那个端午节的粽子是通过这个软件自己绘制出来的，感觉到软件应用的神奇。ppt由于自己上学期的学习，因此在实训期间做的作业也就驾轻就熟的完成了。最好玩的软件应该就是flash了，通过几张图片的叠加和处理，就出现很可爱的动画了。最让我惊讶的软件当然就是dreamweaver了，它竟然是用来做自己的个人网页的，本来觉得自己做网站是一件很不切实际的事情。经过实训期间的学习，我也学会了制作自己的个人主页。这次的实训让我掌握了办公自动化以及网页制作软件的使用，也能运用Word、Excel、PowerPoint处理文档，能运用Dreamweaver、Flash、Photoshop制作网页了。总之实训的收获颇多。
范文三：网页设计技能比赛总结12月24日，结束了河北省网页设计项目技能比赛，我校取得了团体三等奖的成绩，其中六名选手均获得三等奖。先将本次比赛总结如下:一.整体训练过程在本次比赛中，领导、技术科给予了很大的支持，学生经过严格的筛选，教研室主任也从选人，培训时间，培训内容等很多方面协助我们的学生选定,日常培训等工作。培训时间从11月2日至12月20日，主要利用中午休息时间以及周末时间，考前最后一周，进行集训，共48天。二.培训情况（1）学生选定学生选择范围是13、14计算机专业的在校学生，除了学生自愿报名以外，我还咨询了几个班级的班主任老师以及计算机专业任课教师，由他们推荐了几名优秀学生，又通过平时培训中的观察，最后选出基础扎实，领悟能力较强的六名学生参加比赛。（2）培训计划借鉴上次比赛的经验，我决定这次培训要做到全面细致，基于这个目标制定培训计划。网页设计项目需要学习的软件有dreamweaver、flash和photoshop。老师和学生一起在学校图书馆借来大量的学习资料和教学光盘。经过分析三门课程的难易程度以及在网页制作中的作用，列出了培训计划，以dreamweaver为主为先，flash和photoshop同时进行的学习。（3）前期培训对每一个关于网页制作的知识点都力求讲过练过，不放过任何一个知识点，做到全面。又通过强化练习的方式使学生对基础知识做到熟练，能够灵活运用每个知识点。培训时间分为两段，中午是基础知识的学习，下午是综合实例的训练，这样将基础知识及时应用于网站建设，提高了学习效率。（4）后期培训由于比赛有时间限制，根据以往的比赛，技能有两场考试：第一场三个小时，第二场两个小时，所以在后期培训中，采用测验的方式，要求学生必须在三小时内完成六七个页面的网站，要求每个网页效果图都能还原成网页，经过这样的练习，学生的技能得到强化，操作速度也有了很大的提升。（5）临赛之前另外，总结每次比赛都有学生因为读题失误而丢分的情况，我找遍资料，找到了河北，保定CEAC考试题，以及评分标准，带领学生仔细读题，审题，揣摩试题的规律，进行练习。考前几天，分析比赛过程中的注意事项，如果遇到某类情况应该如何应对，希望学生们在比赛中不要慌款，紧张。（6）学生学习刻苦努力。在培训的50天里，学生和老师放弃了休息时间，除了生病，没有缺勤的记录。因为冬天流感盛行，有两个学生生了病，除了输液时间都坚持来培训，每名学生都努力提高技能，希望在比赛中取得好成绩。除了培训时间，学生还来利用晚上回家时间搜集资料，加强练习，和老师一起探讨。我也为了比赛付出了很多，平时在家里，每天都有家务活和孩子，这近两个月只能放下这些全力备赛，有很多次因为孩子没有人看，带着孩子来培训，平时上课已经很紧张，再加上比赛更显得忙碌疲惫。期间还病了一场，缺勤了一天，学生们都发来安慰的短信，没有因为我的生病而耽误练习。培训的过程中有辛苦也有感动。三.比赛感受作为指导老师，此次带领学生参加技能比赛，虽然拿回了团体奖项，但成绩不算很理想，更使我认识到与其他职业中学的差距，学生的技能水平和理论水平方面都有所欠缺。四.比赛成绩分析及改进方向（1）学生的筛选方式可以更多样。本次比赛选手的全由指导教师从报名的学生的中筛选，有些计算机专业的优秀学生没能参加，或者是因为对技能比赛的重要性缺乏认识，或者是因为惰性、怕辛苦等原因。而指导教师还需要时间对不熟悉的学生进行了解。所以除了自愿报名外，也可以由平时与学生接触较多的任课教师或班主任进行择优推荐，多向学生们说说参加技能比赛的重要性，以及对自身能力的提高，这样还可以达到鼓励学生参加技能比赛。（2）学生应试能力较差。由于参加这种大型比赛经验缺乏，有些选手考试由于紧张，对考试环境的不适应，导致没有发挥出正常水平，出现读题不细致，由于慌张没有正常发挥等问题。所以，学生应该多一些机会参加比赛，锻炼心理素质和应试能力。（3）赛前准备还应再加强。熟练度方面，还应在技巧方面多下功夫，改掉浪费时间且造成代码冗余的不良操作习惯，精细度方面，网页作品还应该再细化，有些同学觉得差不多就行了，对作品没有追求完美。（4）理论题还应该再加强理论题复习内容主要是CEAC和人才培养工程的题目，理论性较强，而考试题目针对日常操作的题目较多，所以理论题的复习也应该更加全面。（5）比赛题目不清楚对于技能比赛的考试范围，都是听学生考完之后的描述，但具体的评分标准和题目要求都不清楚，有时候成绩下来并不知道与一等奖究竟差距在哪里，看不到一等奖学生的作品。再加上网页三门软件培训范围太广，所以有时候培训重点抓不到。总之，这次比赛是网页设计专业在教学好实践中的又一次探索，鉴于中职学校的特点，在今后的教学实践中，会更加注重学生技能的培养，使我们的学生掌握更多的专业知识，在以后的工作中学以致用，存在的问题和不足，我们也力求在今后的类似活动中克服和改进。
范文四：（信息工程系）综合实训总结报告 实训课程：____
网页制作 ____ ______实训项目： _
网页制作基础教程实训
11计算机应用学
号：_______指导教师：___
_ _实训时间： 学年第一学期第20周 网页制作实训总结报告一、实训目标1、知识目标：⑴掌握设置站点。⑵掌握网页元素的基本操作。⑶灵活使用超级链接。⑷熟练掌握表格、层和框架来布局页面。⑸掌握表单的设置与使用。⑹掌握设置CSS样式。⑺能够使用多媒体来丰富页面。⑻能够使用模板制作大批风格相似的页面。2、技能目标：⑴对于给定的设计题目，学会如何进行分析，理清思路，并给出相应的结构模型。⑵通过对所选课题的分析，有针对性的进行调查研究，学会收集、整理相关资料。⑶合理运用所学过的知识及实验中的练习，将其融入本次实训当中，真正成为自己的东西。⑷熟练运用所学知识制作出具有个人特色的班级网站二、实训环境我们在6号机房完成了为期一周的实训，此机房设备、软件齐全1、硬件设备PC机2、软件环境Dreamweaver 8.0、 flash、photoshop等三、实训内容1、确定的网站内容要健康、具有时代气息。2、网站提供的信息应与网站主题相符合。3、页面布局合理，网站结构应层次分明，主题鲜明，界面美观、简洁。4、建议采用层、表格、框架结构布局页面，导航和超链接清晰。5、插入图片、多媒体元素。6、撰写实训报告。四、实训步骤1、根据老师布置的实训要求，构思整体布局以及LOGO的设计。2、打开Macromedia Dreamweaver 8，创建相应的本地站点，命名为banjizhuye(E/banjizhuye)，在banjizhuye站点中建立文档和文件夹，分别为index，xiangce，banwei，chengyuan，huodong和文件夹images，flash，ps等。3、打开Adobe Photoshop CS4，利用ps着手做logo，因为我们是11级计算机应用班，所以我就用艺术字设计了字体，外面的图标代表这我们团结进取，里面倒影的树叶是代表着我们蓬勃的精神面貌，下面的五个字母是计算机应用的首字母缩写。如下图； 4、利用表格对页面布局，我的网站共有5个主页面：班级首页、相册集合、班委成员、班级成员、班级活动，每一个页面用统一的背景以及图片，以保证网站统一的页面风格，版面设计十分灵活，根据各部分内容的不同适当的自由设计。网页布局主要用框架和表格，用框架定位内容的大体结构，再用表格具体定位。位子的设计也是重要的一个部分，根据具体内容决定字体风格，相同的风格多次调用是用css设计一个样式，以保证随时、准确的调用。1)通过绘制表格来设计页面布局； 2）在表格中插入页面元素，如利用文本域，来创建用户登录界面，插入图片等，首页头部插入了flash动画，改变其参数，使其达到了雪花飘落的动态效果，如下图： 主页的左边我用代码实现了其自动播放幻灯片的效果，右边利用代码达到了字幕的滚动效果，如下图： 5、子页面的设计，整体格局美观，温馨，明亮，能让观赏者眼前一亮，并在每个子页面添加了滚动字幕，以及flash特效。如下图： 6、每个网页完成后，为其添加链接，以达到浏览每个页面时畅通无阻，在添加 链接时，为了使导航文字在浏览时是白色字体，我用CSS为导航栏定义了一个版块，并用 CSS高级设置设置我需要的色彩。 五、实训总结在这三天多的实训当中和同学进讨论制作网站，同时学到了许多关于网页制作的相关知识。第一，我觉得在制作过程中，发现自己学的东西太欠缺了，要学习有条不紊，要学习冷静思索，所以我想以后课上课下一定要认真学习，虚心听取别人意见，多去学习一点网页制作的技术，以备我以后的制作之路。通过这次实训，我学到了很多有价值的东西。我独立的完成了网站设计的全过程，把设计中散乱的网页链接成框架体系，使平时学到的知识点有了很高的提高，并且合理的在试验中进行了实践。第二，在这次实验的过程中，我搜集了大量的素材和网页设计的技术技巧方面资料，扩大了知识面，给我在以后的设计过程中能博采众长，制作出好的网页打下了基础。我现在已经掌握文档排版标记的使用熟练使用及其属性设置、特殊符号；第三：我现在已经熟练使用超级链接，合理使用列表；第四：我现在已经掌握图片标记及相关属性的使用、了解表格标记制作表格的方法。最后，我感受最深的是：要想做好一个网站，素材和技能都十分重要。好的素材需要多方查找资料，可以从图书、网站和新闻上查找。好的技能需要不断的实践，经常锻炼做网页。如果拥有好的素材和精湛的技能就可以做出精湛的网页。
五天的实训课程结束了，此次实训检验了通过一学期的学习对知识进行了汇总，通过本次实训我已基本掌握了制作简单网页的过程，基本熟悉了各种软件的综合使用方法。实践出真理，实训的日子过去了，从理论和操作中融合了我们平时所学的知识，为我们的学习和工作铺垫了精彩的一幕。因此，我坚信，用血去做自己认为应该做的事，努力的开拓我们的极限，没有什么是不可能的，我们要更加的去努力。通过这五天的学习，在制作过程中出现了许多问，这些都是细节问题，我与同学进行了细致的研究后，最后达到了所要预期的效果。我非常感谢学校给了我这次制作网页的机会！
范文五：网页设计实习总结真的是万事开头难啊，遇到了很多问题，比如：插入的图片不符合规格，一下子把其他内容的框架挤开；插入的层太多，大一点的就把小一点的给覆盖掉了；插入的FLASH不能产生效果。总之问题一箩筐。实践出真知，原来自己还有那么多欠缺的知识。于是回归本源，先把课本上的东西弄通再谈其他。然后又到图书管里借了几本网页制作方面的书籍来参考。在对基本知识有了详细的了解之后，做起东西来就得心应手多了，知道引导页能过加映像之后，我决定为我的网页设计一个引导页。然后是主页和二级页面的设置。要注意,网上只能使用JPG和GIF两种图象格式，其他诸如BMP和TIF等很通用的格式都不能用在网上,因为它们太大了,但可以用图象软件进行转换，比如Office 97的照片编辑器。把准备在主页上出现的图象放进相应的目录里后.在一步一步的边学边做的过程中，看着心中的东西一点一点的出来，真的很有成就感。虽然自己的网页技术还差的远，但是回顾一下这周真的学到了很多的东西。网页的调试之前把作过的东西放到U盘里，发生过图片显示不出来的状况，还好即使找到了解救的方法，把源文件和WEB页面放到一起这样就算路径改变的话也不会影响页面的效果。一．网站的整体规划1.讨论网站主题：因为自己对普罗旺斯很感兴趣，于是就想到要是一下为心中的仙境设计一个旅游网站。2.定位网站CI形象：旅游网站最重要的就是是浏览者产生想去亲身体验一下的共鸣。于是在网页设计上面，根据普罗旺斯梦幻般的意境，我采用的是清新隽永的CI形象。使浏览者有宾至如归的感受。3.确定栏目和板块：1]首先要考虑整个网页的长和宽，以及长度和宽度之间的比例。2]其次就应该考虑导航条的设置了。3]正文的框架设置 （横向因素和纵向因素交错）在浏览了很多精美的旅游网站之后，再结合自己的想法，我先在草纸上画出了大体的栏目和板块。4.网站的整体风格和创意：建立一个浪漫的旅行网站，走映像派路线，目的务必使浏览者留下映像。二．网页制作的前期策划与准备1.资料的搜集：由于个人的爱好，我很早以前就收集了许多普罗旺斯的美图，这次就方便多了。接着就搜集了一些有梦幻效果的网页背景，FIASH源代码、小图标和一些GIF的动画等。2.熟悉制作工具软件：主页制作的基本条件有：网页设计实习总结硬件：一台电脑(64MB以上内存，当然越大越好啦)；可以拨号上网；如果你有条件的话,建议:配置扫描仪,这将大大方便图像和文字的输入;软件：HTML编辑软件：常用的有Frontpage、Hotdog等，本文重点介绍 Dreamweaver；图像处理软件：常用的有Photoshop、flash、Fireworks 等；文件上传软件：常用的有Cuteftp、WSftp等。
范文六：实习总结为期一个月的实习结束了，首先我感谢老师、感谢思普公司给我这个锻炼自我的机会。在这个月里，我学到很多，感受也很深刻，给我以后找工作积累了工作经验。 来到公司，文总给我的第一个任务就是要我做世界旅游小姐的一张图片，还有设计布局世界旅游小姐大赛的热点赛事和主办单位。我做了很久都没做出来，只是在那蛮想，不懂得去借鉴类似的网站，在小吕的提示下，我借鉴了别的网站，终于做出来了，虽然做的不好看，自己很不满意，不过老总满意就行了。这不是我不负责任，我明白了两个问题。一、做我们这一行的，做出来的东西是给顾客跟老板看的，不是给自己看的 。二、做出来的东西要符合大众的眼光，所以要多鉴赏别的好的网站，你觉得好的仅仅只是你觉得好，人家不一定会这么想。 在公司，我的主要工作就是接收美工人员的网站模板，将其通过Photoshop切片，然后导入Dreamweaver进行排版，（排版主要使用css+div），并进一步的加以制作，完善美化，如加入js代码，或Flash，因为网页是用css+div进行排版的，所以在最后一步的时候，我们还需要进行浏览器测试，因为css+div排版方式有一个最大的缺点就是：浏览器不兼容的问题，典型的如：IE6、IE7、IE8、Fireworks，因为各种浏览器使用的协议不同，所以会导致页面在最终浏览的时候有一些小问题，如：页面混乱，图片、文字之间的距离过大或过小，页面不美观等等，做为一个新人，我在有些方面的技术还很不成熟，所以在小吕的帮助下，解决了很多问题，所在我很感谢他。在布局页面的时候，我也明白了几点，如下：一、一定要按照美工设计的模板去布局网页，老板没说要修改不要擅自做主加以修改。二、页面的布局，要先看整体后局部，还要注意浏览器的兼容性1、少用margin多padding2、少用float多用overflow:hidden3、使用float指定宽4、继承关系不要复杂5、大块拆成小块写6、标签关系不要太复杂7、少用定位8、不要偷懒，有些层不要一个标签搞定9、多练 三、要有耐心，特别对于新手来说。 经过一个月的实习，让我认识到自己懂的太少，必须得不断的学习，才能提升自己。网络的更新速度太快，跟不上这个节奏，只能被这个浪潮淹没。所以，我们要不断的学习来充实自己。
范文七：网页设计实验报告（一）系部名称 学生姓名 实训 时间雪岩贸易学院 陶晨然专业 班级电子商务 电商 1302实验教师 学号李先龙 G132176718 日2015 年 2 月9 日-------- 2015 年 3 月实训项目和地点： 实训项目： 个人简历 实训地点： 9208 和 9212 实训室实训目的： 了解网页设计这门课程， 初步设计个人简历， 通过一次次不断地学习、 更改、 和深入。 对于这门课程我懂得了更多， 也学会了设计一个简短的网页内容。实训设备及器材： （实训使用的主要工具、软件和辅助工具、软件）硬件：PC 机一台 软件：DW CS6 网络环境：互联网实训的步骤和内容： 实训步骤： 1．简单设计个人简介 2．插入图片，了解标签和内容的设计用法 3．进一步加深设计个人简历，添加颜色，设置居中 4．图文并茂，混合排版，多一步添加整体颜色 5．设计一份完整的个人简历 实训的内容： 设计个人简历 了解 HTML 语言 网站的主题： 网站设计思路： 网站设计过程：实训中遇到的难点及解决办法： 几次插入图片后，有时候不能看，通过一次次的调整，明白了问题的所在并改了 过来，还有颜色排版出问题了，在老师的帮助下也明白了问题的所在，问题出在 主体部分多了一个 body，删掉就可以了。 实训心得： 了解了网页设计这门课， 会用简单的 HTML 语言， 一些很简单的网页设计语 言也能看的懂了，而且也能设计晓得简单的网页了。不再是以前的茫然所知，对 这方面的知识也有了了解！
范文八：《网页设计实训》课程标准 适用专业：电子商务
学分数：7 总学时数：28
实践课时：28一、理论教学部分（一）课程的性质和任务1．课程性质：《Dreamweaver网页设计》本课程是计算机各专业的一门实践性很强的技术基础课，是一门必修的专业课。主要学习如何利用Dreamweaver这个软件进行网页的设计与制作。2．课程任务：本课程的主要任务是介绍利用Dreamweaver开发工具进行网页设计，包括新建、编辑和设置一个Web站点；如何对页面属性进行基本的设置，如何设置、编辑CSS层叠式样式表；如何排版文字、表格和层；如何进行基本的图像处理；建立框架；模板和库的使用和编辑；网站的发布与维护等基本知识与应用。目的是通过本课程的学习，培养学生的实际动手能力和计算机的操作能力，能够运用所学的知识进行网页设计。（二）教学内容和教学要求第一章 Dreamweaver基础（2学时）【教学内容】一、Dreamweaver 的历史和简介；二、Dreamweaver
8.0的安装过程；三、Dreamweaver 8.0 的全新界面；四、改进的设计与开发环境；五、主菜单介绍；六、对象控制面板介绍。【教学目的与教学要求】掌握Dreamweaver的基本特点、新增功能及界面组成。基本操作，如安装、新建、打开、导入、保存、关闭等；理解新增功能、界面组成的优点；了解Dreamweaver可以为我们做些什么。第二章 网页设计语言基础（8学时）【教学内容】一、HTML及XHTML语言介绍；二、常用的网页语法标记。【教学目的与教学要求】理解HTML及XHTML语言介绍，常用的网页语法标记。第三章 文本和图像处理（2学时）【教学内容】一、文本属性面板介绍；二、编辑文本和插入对象；三；设置文本的格式；四、编号与项目符号；五、在网页中插入图像；六、图像的应用。【教学目的与教学要求】掌握设置文本属性和格式，编号与项目符号的使用，插入、编辑和排版图像；
理解如何进行图像调整。第四章
表格与页面布局?（6学时）【教学内容】一、表格的基本操作；二、单元格的基本操作；三、表格的自动套用格式；四、表格的创建；五、表格的编辑；六、创建布局单元和表格。【教学目的与教学要求】掌握如何插入、编辑表格，创建布局单元和表格；理解表格在网页排版中的作用；了解使用页面布局模式进行网页排版的方法。第五章
创建超级链接（1学时）【教学内容】一、链接分类；二、创建超级链接；三、链接的四种状态；四、创建Email链接；五、管理超级链接。【教学目的与教学要求】掌握创建超级链接和Email链接，会设置链接的各种状态；理解：超级链接几种状态之间的差别和共同点；了解：创建Email链接中的各种技巧。第六章 层与层动画（1学时）【教学内容】一、层的概念；二、创建层；三、层操作；四、层与表格的相互转换；五、层动画的概念与设计。【教学目的与教学要求】掌握层的概念与使用；理解层动画的概念与设计。第七章
框架与框架网页（2学时）【教学内容】一、框架的基本概念；二、创建框架和框架集；三、框架的使用；四、框架和框架集的属性设置。【教学目的与教学要求】掌握框架和框架集的创建，框架的使用；理解使用框架的优缺点。第八章
创建CSS样式表（8学时）【教学内容】一、CSS层叠式样式表；二、定义CSS样式表；三、创建并链接到外部CSS样式；四、设置CSS样式的格式化参数；五、设置超链接显示状态；六、添加各种CSS效果。【教学目的与教学要求】掌握内部CSS和外部CSS的添加方法，编辑CSS属性，使用CSS进行页面的排版，创建各种CSS效果；理解使用CSS排版的优点；了解如何使用CSS控制背景、鼠标以及添加其它特殊效果。第九章
资源、模板和库（3学时）【教学内容】一、资源管理；二、模板的创建；三、模板的编辑；四、定义模板可编辑区域；五、创建、管理和编辑库项目。【教学目的与教学要求】掌握模板的创建，模板的编辑，定义模板可编辑区域；理解资源管理；了解创建，管理和编辑库项目。第十章
媒体对象的应用（2学时）【教学内容】一、插入Flash对象；二、插入Shockwave对象；三、插入视频；四、插入ActiveX控件与Java小程序；五、填加声音。【教学目的与教学要求】掌握插入Flash对象、插入Shockwave对象、插入视频、插入ActiveX控件与Java小程序、填加声音。第十一章
表单处理（5学时）【教学内容】一、表单概述；二、表单对象；三、创建表单；四、处理表单；五、创建动态表单。【教学目的与教学要求】掌握创建表单、处理表单和设置表单参数；理解表单的概念和作用；了解如何使用表单创建交互式界面。第十二章
创建Web站点（1学时）【教学内容】一、站点规划；二、在Dreamweaver8中创建站点；三、管理站点与站点文件；四、使用站点地图；五、为网站指定服务器技术。【教学目的与教学要求】掌握规划站点、建立和管理站点；使用站点文件和地图；理解创建站点的必要性；了解服务器技术的指定。第十三章
制作动态网站（6学时）【教学内容】一、Access数据库基础；二、ODBC数据源设置；三、ASP与Web服务器配置；四、Dreamweaver8动态网站设计；五、创建与数据库连接。【教学目的与教学要求】掌握数据源的设置，如何配置Web服务器，如何创建与数据库的链接；理解数据库在动态网站设计中角色的重要性；了解设置数据源和创建数据库链接的技巧。第十四章
网站的维护和上传（1学时）【教学内容】一、在本机中测试网站；二、预览网页效果；三、网站的查错；四、发布网站到服务器。【教学目的与教学要求】掌握Dreamweaver8的测试、预览和发布设置；理解网站排错的必要性；了解如何发布网站到服务器。 二、实训教学部分：（一）实训教学目的与任务通过实训，锻炼学生提高学生网页设计的能力，并且将网页设计理念转变为动手操作的能力，将学到的知识用到具体的实训练习中。通过该课程的实训，应使学生具备以下技能：1. 利用Dreamweaver新建、编辑和设置一个Web站点2. 对页面属性进行基本的设置，编辑和使用CSS层叠式样式表3. 排版文字、表格和层，进行基本的图像处理4. 建立框架；模板和库的使用和编辑；学会网站的发布与维护（二）实训学时分配表（三）实训内容和要求实训模块一：Dreamweaver的使用1. 实训要求：通过实训，使学生掌握Dreamweaver的基本操作2. 实训方式：讨论分析、实验操作。3. 实训内容：（1）掌握Dreamweaver的基本特点、新增功能及界面组成；（2）基本操作，如安装、新建、打开、导入、保存、关闭等；（3）理解新增功能、界面组成的优点；（4）了解Dreamweaver可以为我们做些什么。实训模块二：HTML及XHTML语言1. 实训要求：通过实训，使学生掌握常用的网页语法标记使用2. 实训方式：讨论分析、实验操作。3. 实训内容：通过实训操作，理解HTML及XHTML语言，以及常用的网页语法标记。实训模块三：文本和图像处理1. 实训要求：通过实训使学生掌握编辑文本以及图像的应用2. 实训方式：分析讨论、实验操作。3. 实训内容：掌握设置文本属性和格式，编号与项目符号的使用，插入、编辑和排版图像，理解如何进行图像调整。实训模块四：表格与页面布局1. 实训要求：通过实训教学使学生掌握表格的基本操作2. 实训方式：实验操作、案例分析。3. 实训内容：（1）掌掌握如何插入、编辑表格，创建布局单元和表格；（2）理解表格在网页排版中的作用；（3）了解使用页面布局模式进行网页排版的方法。实训模块五：创建超级链接1. 实训要求：通过实训教学使学生掌握创建超级链接的操作方法2. 实训方式：讨论分析、实验操作。3. 实训内容：（1）掌握创建超级链接和Email链接，会设置链接的各种状态；（2）理解：超级链接几种状态之间的差别和共同点；（3）了解：创建Email链接中的各种技巧。实训模块六：层的使用1. 实训要求：通过实训教学使学生掌握层的概念与使用2. 实训方式：案例分析、实验操作。3. 实训内容：创建层以及进行层布局，层属性设置，层动态行为等操作。 实训模块七：框架与框架网页1. 实训要求：通过实训使学生掌握框架的概念及使用2. 实训方式：案例分析、实验操作。3. 实训内容：（1）掌握框架和框架集的创建，框架的使用；（2）理解使用框架的优缺点实训模块八：创建CSS样式表1. 实训要求：通过实训使学生掌握创建并链接到外部CSS样式2. 实训方式：案例分析、实验操作。3. 实训内容：（1）掌握内部CSS和外部CSS的添加方法，编辑CSS属性；（2）使用CSS进行页面的排版，创建各种CSS效果；（3）理解使用CSS排版的优点；（4）了解如何使用CSS控制背景、鼠标以及添加其它特殊效果。实训模块九：模板和库1. 实训要求：通过实训使学生掌握创建、管理和编辑模板和库的方法2. 实训方式：案例分析、实验操作。3. 实训内容：（1）掌握模板的创建，模板的编辑，定义模板可编辑区域；（2）理解资源管理；了解创建，管理和编辑库项目实训模块十：媒体对象的应用1. 实训要求：通过实训教学使学生掌握插入Flash对象、Shockwave对象的方法2. 实训方式：案例分析、实验操作。3. 实训内容：插入Flash对象、Shockwave对象。实训模块十一：表单处理1. 实训要求：（1）通过实训教学使学生掌握创建表单、处理表单和设置表单参数；理解表单的概念和作用；（2）了解如何使用表单创建交互式界面2. 实训方式：案例分析、实验操作。3. 实训内容：表单的创建与使用等操作。实训模块十二：创建Web站点1. 实训要求：通过实训教学使学生掌握在Dreamweaver8中创建站点2. 实训方式：案例分析、实验操作。3. 实训内容：（1）掌握规划站点、建立和管理站点；（2）使用站点文件和地图；理解创建站点的必要性；（3）了解服务器技术的指定。实训模块十三：制作动态网站1. 实训要求：通过实训教学使学生掌握Dreamweaver8动态网站设计 2. 实训方式：案例分析、实验操作。3. 实训内容：（1）数据源的设置，配置Web服务器，创建与数据库的链接；（2）理解数据库在动态网站设计中角色的重要性；（3）了解设置数据源和创建数据库链接的技巧。实训模块十四：网站的维护和上传1. 实训要求：（1）通过实训教学使学生掌握Dreamweaver8的测试、预览和发布设置；（2）理解网站排错的必要性；（3）了解如何发布网站到服务器。2. 实训方式：案例分析、实验操作。3. 实训内容：测试网站,发布网站到服务器。 三、考核方式和标准总成绩按照“平时成绩×40%+期末考试成绩×60%”评定。1、期末考试采取闭卷考试，占总成绩的60%。2、平时成绩侧重过程式考核，占总成绩的40%，其中包括实训成绩、作业、考勤情况和课堂表现等。其中，实训成绩占总成绩的30%，作业、考勤和课堂表现占总成绩的10%。实训成绩由下面三种个部分组成：1、实训中的表现、实训结果，占实训成绩的40%；2、实训报告或总结，占实训成绩的30%；3、实训考核，占实训成绩的30%。 四、推荐教材及教学参考书1．梅小清，《网页制作基础教程》，北京理工大学出版社2．美国adobe公司，《adobe dreamweaver cs5 中文版经典教程》，人民邮电出版社3．刘瑞新等，《网页设计与制作教程》，机械工业出版社4．王欣，《网页设计与制作教程》，北京理工大学出版社五、几点说明1．课堂讲授：以多媒体教学为主要教学方式，讲解内容以主教材为主，其他教学资源适当补充。因为这是一门重在实践的科目，因此需要学生多上机、多进行实际操作，把老师所教授的各种网页制作、版面设计以及程序熟练制作或调试出来，并且能够在此基础上有所创造、有更进一步的发挥。2．作业：因为这是一门重在实践的科目,因此大部分作业需要学生在上课练习及自己的电脑上完成,主要上交电子作业.3．考核方式：学期的期中与期末测验各一次，机试，考试内容应与课程重点内容相符，适当设置一些能让学生有自我发挥空间的题目。4．先修课程：网络基础、flash动画设计、photoshop。5．课时安排：可以根据不同专业的要求适当调整课时，也可理论与实训相结合，穿插教学，但建议理论与实践课程的比例不得低于1：1.5。
范文九： 网站名称：微言微语个人主页班
级：J09301班，J09302班学生姓名：指导老师：李
向实训时间：—2010年下期网页设计课程实训报告一、实习目的：通过教学实习掌握站点制作、站点测试与发布技术。会综合利用Fireworks 、Flash和Dreamweaver三个软件进行静态网站的设计。二、实习内容：1.用Fireworks处理图片。对图片裁剪、钝化、高斯模糊。设置图片的GIF动画格式，制作标题动画。对文字应用效果。利用Fireworks制作导航条并导出格式为html。2.用Flash制作标题动画。首页中的动画不超过20M。制作按钮来超级链接到其他页面。3.使用Dreamweaver布局视图，设置本地站点。在标准视图和布局视图模式相互转换。建议使用布局视图，在标准模式中插入层对象制作层动画，利用行为面板添加鼠标行为，制作翻转动画，使用CSS样式统一网页中文字样式，插入Fireworks中的GIF 文件及导入Flash中的SWF文档，设置文档间的超级链接。三、具体要求：1、利用Dreamweaver制作一个静态网站，要求网站有特色，整个网站的内容和形式要统一，应能够反映一个简单的主题。可以选择制作《个人网站设计》、《企业网站设计》、《文化网站的设计》、《娱乐网站设计》或者其他自己认为适合的网站。2、 作一个主页面，至少5个次页面。3、 必须用到框架、表格或层排版技术、Flash技术和图像处理技术，使网站具有合理的外观和功能。4、 主页基本要求：页头Logo，准确无误地标识站点和企业标志；网页标题动画，可以制作成GIF动画或者Flash动画；导航条；E-mail地址，用来接受用户垂询；联系信息，如普通邮件地址或电话；版权信息。5、制作一个表单页面。6、某个页面有滚动字幕。7、为一个页面添加背景音乐。8、至少添加一种行为效果。9、整个网站各页面之间保持风格一致，页面之间要有合理的超级链接。10、进行站点测试后申请免费空间并发布到网络。四、网站设计思路：本站应该算是一个人主页的小型网站。关于本站站名的来源：微言微语个人主页，因为，我觉得这个网站里面的所有文字都是像一个人在自言自语，在低声地向某人诉说着什么，没有主题，没有目的。取这个站名，是做了网站的大概构思后才取的，觉得，这个名字与网站的图片、背景音乐还有文字都很相符。个人主页，一般都会包括首页，相册，链接，一些个人喜欢的文字加图片，我的个人主页也不例外，包括次首页（个人喜欢的的文章加图片），我的作品（里面包括自己做的三个FLASH动画），文章（一些自己喜欢的文章），相册（Firworks处理过的相册），关于（关于自己的文字，关于本站的一些说明），链接（世界著名网站的有关链接），反馈表（浏览者信息反馈表）。五、网站设计过程：把所有的素材都整理好（图片，文章，相片），开始布局。此站大多数用的是“三”字型的，三字型是我给它取的名字，因为，最开头是一张带有导航条的图片，用Firworks处理过的HTML文件，中间一大片用于放正文，下面就是版权信息，E-mail地址用来接受用户垂询；联系信息，如普通邮件地址或电话，像被分开的三个部分，所以我叫它三字型。这种布局方式看起来比较的整齐，简洁美观。首页本想做一个动态网页，由于时间有限所以还没完全成功。只好用了一张与次页面一样的背景图片做背景，加上从下向上的滚动字幕，背景图片是用Firworks处理过的图片，大片的灰色墙壁加上颜色艳丽的钮扣图案，首页加了状态栏逐字出现的效果，加了“加入收藏”、“设为首页”等代码。次页面包括如下些内容：首页、作品、文章、相册、关于、链接以及反馈表。这些页面是用模板做的，上面的图片，导航条以及下面的版权联系方式是不用改变的，都保持着首页的风格，背景图一样，字体与样式一样，图片风格一样。中间是两个可编辑区域。在所有的页面导航条下面，插入层对象制作了一个层动画，来回移动的层，里面存放日期，利用行为面板为此层添加了鼠标行为，单击此层，会出现对话框，“欢迎您访问我的个人主页！”，做布局大多使用表格布局，使用了少量的css样式，字体，字号，颜色都统一套用相应的样式。首页中添加背景音乐，小说音乐《我在那一角落患过伤风》，一边看慢慢上移的文字，一边听这轻柔的音乐，给人一种意境美。其实次页面添加《虫儿飞》，轻快而活泼。首页禁止右键复制功能，右键单击没有反应。次首页，就是进入次页面的第一个页面。主题算是与青春有关的三种感情，三张图片，用Firworks处理，加上相应的文字。要用到两个表格，分别放在两个可编辑区域里面，一个1*2的表格，一个2*2的表格，第一个表格放一张有关于亲情的图片加一小段文字，第二个表格放一张有关于友情的图片加一小段文字,还有一张有关于爱情的图片加一小段文字。作品页面是三个FLASH动画，第一个是左右键控制的图片移动按钮，可以单击来链接到主页面（代码见附录），四个图片经过裁剪、高斯模糊。第二个是光芒四射（代码见附录），要用到ActionScript语言，长短不一的线条加上透明度的改变组成光芒四射。第三个是鼠标跟随特效（代码见附录）。文章页面，就是简单的文字页面，没有什么特别的。相册页面，上面是一个用Firworks处理后的一组图片，鼠标移到小图片上，下面做出现相应的大相片，中间有少量文字，底部是用FLASH做的一组循环滚动图片（代码见附录），图片跟着鼠标的移动而左右移动。关于页面，也是简单的文字页面，没什么特别的，“个人简历”文字链接到WORD文档“个人简历”(代码：附录：源代码(1)
状态栏逐字出现的效果代码：(2)
首页收藏代码：onClick=（3）设为首页代码：onclick=strHref=window.location.this.style.behavior='url(#default#homepage)';this.setHomePage('http://redcarrot2001.xinwen520.net');（4）滚动字幕代码：width=550 hspcace=5 scrollmount=2 scrolldelay=200 vspce=5 loop=-1>……………………183、希望每一个新的一天，醒来的那个你都神清气爽。（5）添加背景音乐代码：（6）禁止右键复制功能代码：
范文十：网页设计实训心得通过这次实训对这门课程的学习，做好网页，并不是一件容易的事，它包括网页的选题、 内容采集整理、 图片的处理、 页面的排版设置、 背景及其整套网页的色调等很多东西。所以我得出一下总结：一、 准备资料和挑选符合目的主题的合适素材做网页当然要收集、准备资料。在网上多转转，看到什么漂亮的网页，把它保存起来， 作为以后自己设计主页时的参考。另外，还包括搜集美化主页可能要用到的各种材料，如背景、小动画图标等等。可以在硬盘上建一个文件夹，下分“图片、声音、动画”等文件夹， 养成上网时看到有创意、新鲜的图像，就按鼠标右键存入你硬盘相应文件夹的习惯，时间一长就拥有了一个可观的图库，等做网页时随手拈来或加以修改就成你自己的东西了。二、 规划好整个网站主页的设计应以醒目优先，应该令人一目了然，切勿堆砌太多不必要的细节，或使画面 过于复杂。切记，页面给人的第一观感最为重要！在网上到处浏览网站的人很多，如果你的主页给人的第一印像没有吸引力， 很难令他们深入观赏， 而且他们恐怕再也不会访问你的网站了。三、 善用图片，增强艺术效果我记得老师说过网页的迷人之处之一， 要算它上面能点缀许多漂亮的图片。 精美的图片设计，可以使自己的网页增辉不少，令人过目不忘。图片的内容应有一定的实际作用，切忌 虚饰浮夸，同时还要注意与文字的颜色搭配。最佳的图像集美观与资讯于一身。四、善于借鉴他人主页制作中的设计技巧由于在网上用浏览器浏览任何主页时， 都能查看到该主页制作时所编写的绝大部分网页编程源代码。因此，如果想知道并掌握一些优秀的主页采用的设计技巧，试着将其源代码 调出来仔细揣摩，并模仿着一步一步去实现。最后感谢老师多日来的辛勤教导！