网页设计与网站建设实验与特效资料.doc

《网页设计与网站建设实验与特效资料.doc》由会员分享，可在线阅读，更多相关《网页设计与网站建设实验与特效资料.doc（16页珍藏版）》请在三一办公上搜索。

1、网页设计与网站建设实验指导书网页制作实训安排一、实训目的网页设计是操作性很强的一门课程。本学期学生主要学习了三个软件Photoshop、Flash、Dreamweaver，学好这三个软件，是制作网页的关键，而学好的关键是多练。尽管平时上机有联系，但将三个软件联系的整合度还不够。通过对个人网站或班级网站的设计，使学生熟练应用Dreamveaver MX和FrontPage MX网页设计软件，使学生对网页制作所学的内容有一个系统的理解和掌握。在制作过程中，主要掌握对网页的布局、色彩的搭配、框架的应用、层的运用、行为的实现、表单的使用、模板和库的应用等，独立完成自己的作品并上传至Internet网上

2、。本次实训给学生提供了深入学习的资料和信息，紧紧围绕网页制作的流程：规划、设计、开发、发布、维护来进行网站的开发，制作出具有较高水准的静态网页。以此作为学生学习这门课程的阶段性总结，使学生复习、巩固所学过的理论，并予以适当的深化，进一步训练学生的基本技能（如：搜集资料、整理数据、制表绘图、发现与分析问题、寻求解决问题的方案等），训练学生掌握计算机操作技术，运用计算机技术进行数据处理分析。二、实训时间：周（天）三、实训地点：实验楼机房 四、实训设施1 相关基础：学生应熟练掌握Dreamweaver MX、Flash MX、FireWorks MX等软件的应用。2硬件环境：(1)主机上要求安装有D

3、reamweaver MX、Flash MX、FireWorks MX等软件。(2)主机能与互联网相连、以便学生能够浏览优秀网站，搜集相关材料等。(3)将主机配置成WEB服务器。五、实训组织形式及进行方式：（）制作班级网页具有一定的开放性和综合性。因此采取小组协作学习的方式是非常必要的。小组成员的知识程度、学习能力和思维方式都有差异，可以通过讨论、交流与合作，取长补短、拓展思路。每个学习小组由6-8人组成，实际制作中采取合理分工的工作方法。希望同学们能够结合所学知识，尽量独立完成相关任务，对于较复杂的操作部分，相邻同学间也可以团结协作、共同完成。（）按照“时间与任务安排”及时完成当天的网页操作

4、任务，并用U盘保存网页，（）网页体裁、形式、风格不限。（）“参考网页”只是起到范例作用，希望同学们看到参考网页上的效果，还能想起来那些效果是如何设计的。每组设立一个组长，负责组织分配该组成员的具体工作。（）教师负责整个网页制作过程的体裁和内容的审核、系统指导和监督工作。六、实训要求1. 确定目标 通过网络就某个专题搜索资料， 题材不限，要求有个人特色、新颖和有吸引力，并对网站作简单的介绍如主题是什么？分那几个栏目，每个栏目的特色和主要内容是什么？参考专题：对计算机基础教育的看法，互动式教学的方式，网上论坛，QQ聊天论述等。也可以是其它的有兴趣的专题如：文学、历史、科技、体育、旅游、生活、时尚等

5、。参考选题：班级主页，动漫，个人主页，求职简历，电子商务网站，花卉网站，学习网站2. 选择目标用户 确定了站点实现的目标之后，需要确定站点的浏览客户。创建世界上每个人都能使用的 Web 站点是不可能的。人们的兴趣、爱好不同，使用不同的浏览器，以不同的速度连接，这些因素都会影响站点的使用。因此需要确定目标用户，根据用户的特点来设计站点风格。 3. 组织站点结构 如果没有考虑文档在文件夹层次结构中的位置就开始创建文档，最终可能会导致一个充满了文件的臃肿混乱的文件夹，或导致相关的文件散布在许多名称类似的文件夹中。 设置站点的常规做法是在本地磁盘上创建一个包含站点所有文件的文件夹（称作本地站点），然后

6、在该文件夹中创建和编辑文档。当准备好发布站点并允许公众查看时，再将这些文件拷贝到 Web 服务器上。 组织站点结构时，应注意以下三个问题： （1）将站点分类，把相关的页面放在同一文件夹中。（2）将图像和声音文件等项目放在指定的文件夹中，以便于文件的查找定位。例如，将所有图像放在Images 文件夹中，当在页面中插入图像时，就可以方便的找到它。（3）本地站点和远程 Web 站点应该具有完全相同的结构。如果使用 Dreamweaver MX创建本地站点，然后将全部内容上传到远程站点，则 Dreamweaver MX确保在远程站点中精确拷贝本地结构。 4. 设计外观 页面布局和设计保持一致非常重要。

7、如果不考虑板块设计，浏览者会觉得你的网站内容杂乱、无条理，先要考虑好自己设计的板块与链接结构；根据所需的站点布局外观，在实训报告本上画一个站点草图，以便以后建立站点时可以按照它来操作。如图1所示，是一个站点首页的设计布局图。5. 设计导航方案 设计站点时，应考虑如何使访问者能够方便的从一个区域移动到另一个区域。具体考虑以下几点：明确“当前位置”；导航方便；提供与网站管理员的联系方法。 6. 规划和收集资料 完成了设计和布局后，就可以创建和收集需要的资源了。资源可以是图像、文本或媒体等项目。在开始开发站点前，请确保收集了所有这些项目并做好了准备。否则，可能为找不到一幅图像而中断设计、开发过程。

8、LogoBanner简单功能导航栏功能列表或局部导航主要内容版权声明七、实训计划表时间安排内容安排第一天上午明确网站主题，应力求简洁，要点明确，要以简单的画面和语言告诉浏览者，站点的主题。收集网页素材，确定栏目，决定网站结构，通过小组讨论，画出网页草图。下午确定内容安排，将每个页面的草图设计完成。相关的文字工作录入完毕，定义好本地站点，将资料保存。第二天上午用Photoshop将网页草图实现，决定网站的配色方案，可以借鉴其他网站。对各个网页可以分工实现。下午制作网页中所需要的Flash。将在PS中完成的图片切片，保存。第三天上午主页的设计 主要是对版面进行合理布局，利用表格和层对版面进行合理定

9、位。通过文字图形的空 间结合，表达出和谐与美。利用DW，设计网页的排版方式，把各个切片放入DW中的表格。下午将相应的内容，放入网页的对应位置。其它页面的制作，注意与主页的和谐统一，并对各页内容进行充实；适当搜集一些网页特效，做出适合自己站点的特效。第四天上午修改并完善已经做好的网页，同时完成网页之间超级链接的设置。多页面之间的链接，特别是关系十分密切的有上下文关系的页面，设计时一定要含有向前和向后的按钮，便于浏览者的访问下午完善并测试网页，准确无误后，在网上申请免费空间，将制作好的网站在网上发布。第五天上午对于已完成网站，进一步进行修改，可以加入一些动态技术。（如留言板）小组每个成员写好实验报

10、告。下午申请免费或收费的空间，将作品上传调试。书写实训报告。检查每个小组的网页，以及实验报告，并打分。附表：评分标准1、内容充实度：60% 2、动态技巧：20% 3、版面美工：10% 4、其他功能：10%八、考核办法评价指标(分值)具体指标量化等级分值自评教师优良中差网页内容(40)获得的信息准确且完整5432信息的收集方法效率高10864网页文字没有语法和拼写错误10864能找到合适的网页素材并合理应用10864引用他人作品，是否注明出处5432技术处理(35)网页布局整齐、合理10864网页色彩协调、风格鲜明10864网页链接正确、快捷10864具有较强的动态交互功能5432自主学习能力(

11、10)能独立查找操作指导并完成操作5432能独立上传和下载网页作品5432合作能力(10)明确自己的分工职责，圆满完成任务5432主动与他人讨论，尊重他人，帮助他人5432创新表现(5)网页栏目设计及整体规划有新意5432合计总得分实验步骤1网站策划1） 画出网站结构草图2）确定栏目确定网页所需的栏目。可在下列列举的栏目中选取。班级介绍、学习园地、通讯录、作品展示、班级相册、求职就业、班级新闻、好站分享、笑话心语、FLASH欣赏，音乐欣赏。（至少5个栏目）3）进行版面设计分为首页设计和二级页面的设计，清楚在页面上分别要放置哪些内容4） 搜集素材。如相关文字录入，图片素材，班级相片等等。二、制作

12、网页1、建立站点。命名为webfile,网站的结构如下：2、进行主页的设计。要求主页中包含一个自己完成的Flash。3、进行其他页面的设计。4、建立几个页面间的链接关系。三、测试网页四、作业检查网上教学资源【网页素材】：网页制作大宝库 素材精品屋 黑马网页素材 遐思素材屋 http:/www.zzi.cc/sck/sck1.htm【网页特效】：网页特效集 网页特效 网页特效 七色风网页特效 【技术文章】：太平洋学院 蓝色理想 天极网-网页陶吧 网页设计师联盟 七色鸟设计空间 有风的日子 中国站长站 闪客帝国 宇风多媒体 闪吧 网页素材库参考书籍网页制作三剑客精彩实例详解 作者：赵艳铎 出版社：

13、上海科学普及出版 社 网页制作三剑客经典实例 作者：崔亚量 出版社：电子科技大学出版社 SQL Server 2000实用全书 专著(美)Ray Rankins等著；邱仲潘等译 ASP网络编程技术肖金秀主编/清华大学出版社出版 信息高速公路与大众传播 明安香 北京：华夏出版社 WWWDESIGN 丹涅尔，多累斯 中国轻工业出版社 Active Server Pages(ASP)3.0 网页设计手册 北京:清华大学出版社 1999 现代平面广告设计-CIS企业战略伍门西安交通大学出版社 巧学巧用Dreamweaver、Fireworks、Flash制作网页 北京:人民邮电出版社 施书恩，李冬梅网

14、页制作教程 丁爱萍 电子工业出版社 Dreamweaver MX中文版网页制作实用教程 洪江龙、顾凌燕、徐军玲 人民邮电出版社 网页设计与制作 谢永超 中国电力出版社 精彩网页制作三剑客 深源室 西安电子科技大学出版社 Adobe Photoshop 7.0C 标准培训教材 Adode 公司北京代表处 人民邮电出版社 Photoshop中文版金典案例教程 飞思科技产品研发中心 电子工业出版社 电脑平面设计大全 潇湘工作室 机械工业出版社 Potoshop7.0图像处理精彩实例创作通 朱仁成 西安电子科技大学出版社网页设计与制作制作过程中的参考技术一、图像处理图像的外形、大小、数量以及与背景的关

15、系，都与内容有着密切的联系。 （1）图像的外形处理图像的外形能使页面的气氛发生变化，并直接影响浏览者的兴趣。一般而言，方形的稳定、严肃，三角形的锐利，圆形或曲线外形的柔软亲切，退底图及一些不规则或不带边框的图像活泼。 （2）图像的面积图像在网页中占据的面积大小能直接显示其重要程度。一般地，大图像容易形成视觉焦点，感染力强，传达的情感较为强烈；小图像常用来穿插在字群中，显得简洁而精致，有点缀和呼应页面主题的作用。在一个页面中，如果只有大图像而无小图像或细密的文字，就会显得空洞，但只有小图像而无大图像又使页面缺乏视觉冲击力。 图像的大小不仅决定着主从关系，也控制着页面的均衡与运动。大小对比强烈，给

16、人跳跃感，使主角更突出；大小对比减弱，则页面稳定、安静。这是因为，访问者在浏览页面时，首先会注意到大图像，然后再看到较小的图像，这种由大到小的引导，使浏览者的视线在页面上流动，便造成一种动势，使页面活泼起来。因此，在网页设计时，应首先确定主要形象与次要形象，扩大主要图像的面积，使次要角色缩小到从属地位。只有大小图像主次得当地穿插组合，才能构成最佳的页面视觉效果。（3）图像的数量 图像的数量是根据内容决定的。只用一幅图像，会使内容突出、页面安定。增加一幅图像，页面会因为有了对比和呼应而活跃起来。再增加一幅，则更加热闹、活泼。但是，限于目前网络的传输速度，使用图像时一定要谨慎，大的图像会降低页面显

17、示速度，即使是小图像，如果运用数量过多，同样会使页面下载速度变慢。随着网络环境及技术条件的改善，这种情况已经有了很大的改观。 （4）与背景的关系网页图像与背景是对比和统一的关系。也就是说，图像与背景在和谐统一的基础上，应存在一定的对比，以使主要图像更加突出。如精密的相机镜头以粗糙的岩石为背景，明亮的文字以深邃的星空为背景，或者使用没有背景及陪衬物的退底图像，周围留出大面积空白，都是利用对比对主体形象起到突出作用。 二、图像在长页面中的应用 网页一般都是纵向的(也有特意设计成横向滚屏的)，其长度从一屏到三屏不等，有时甚至更多。访问者在浏览页面时，通过拖动垂直滚动条使网页一屏一屏地显示，但这并不意

18、味着我们可以将整个页面分割开来，孤立地进行每一屏的设计。页面的整体感是建立在形象的启承关系上，尽管页面被分割成几屏来显示，但图像或文字的延续性应使浏览者得到完整、统一的视觉感受。设计者所要做的就是进行通盘考虑，例如：寻找对比中的和谐、建立同一的视觉识别等，来处理好每一屏与整个页面的关系。 三、版式的基本类型 网页版式的基本类型主要有骨骼型、满版型、分割型、中轴型、曲线型、倾斜型、对称型、焦点型、三角型、自由型十种。 四、iframe的用法解释成“浏览器中的浏览器“很是恰当 用于设置文本或图形的浮动图文框或容器。BORDER设定围绕图文框的边缘宽度FRAMEBODER设置边框是不否为3维（0=否

19、，1=是）HEIGHT,WIDTH设质边框的宽度和高度SCROLLING是否有滚动条（YES,NO,AUTO)SRC指定IFRAME调用的文件或图片(HTML,HTM,GIF,JPEG,JPG,PNG,TXT,*.*)五、改变滚动条颜色。将以上代码中的颜色代码换成要改的颜色，放在前。六、滚动字幕的制作方法。水平滚动水平滚动字幕内容垂直滚动垂直滚动字内容各参数详解：a)scrollAmount。它表示速度，值越大速度越快。如果没有它，默认为6，建议设为13比较好。b)width和height，表示滚动区域的大小，width是宽度，height是高度。特别是在做垂直滚动的时候，一定要设height

20、的值。c)direction。表示滚动的方向，默认为从右向左：。可选的值有right、down、up。滚动方向分别为：right表示，up表示，down表示。d)scrollDelay，这也是用来控制速度的，默认为90，值越大，速度越慢。通常scrollDelay是不需要设置的。e)behavior。用它来控制属性，默认为循环滚动，可选的值有alternate(交替滚动)、slide(幻灯片效果，指的是滚动一次，然后停止滚动) 七、图片切换代码。!-var imgUrl=new Array();var imgLink=new Array();var adNum=0;imgLink1=imgUr

21、l1=imgLink2=imgUrl2=imgLink3=imgUrl3=imgLink4=imgUrl4=imgLink5=imgUrl5=var imgPre=new Array();var j=0;for (i=1;i=5;i+) if( (imgUrli!=) & (imgLinki!=) ) j+; else break;var preloadedimages=new Array();for (i=1;i6;i+)preloadedimagesi=new Image();preloadedimagesi.src=imgUrli;function playTran()if (docum

22、ent.all)imgInit.filters.revealTrans.play();function setTransition()if (document.all)imgInit.filters.revealTrans.Transition=Math.floor(Math.random()*23);imgInit.filters.revealTrans.apply();var key=0;function nextAd()if(adNumj)adNum+ ;else adNum=1;if( key=0 )key=1; else if (document.all)setTransition(

23、);playTran();document.images.imgInit.src=imgUrladNum;theTimer=setTimeout(nextAd(), 5000);function goUrl()jumpUrl=imgLinkadNum;jumpTarget=_blank;if (jumpUrl != )if (jumpTarget != ) window.open(jumpUrl,jumpTarget);elselocation.href=jumpUrl;document.write();/-八、实现网页间的切换效果将下面的代码复制到里注：22种不同的效果： / 内向外方形 / 外向内圆形 / 内向外圆形 / 下至上推升 / 上至下推升 / 左至右拉屏 / 左至右拉屏 / 左至右半百叶窗 / 上至下半百叶窗 / 左至右百叶窗 / 上至下百叶窗 / 麻点显示 / 由外向内开场 / 由内向外开场 / 由上下向里开场 / 由里向上下开场 / 由右上向左下 / 由右下向左上 / 由左上向右下 / 由左下向右上 / 横向线条显示 / 纵向线条显示 / 随机