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

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

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

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

4、邻同学间 也可以团结协作、共同完成。(2) 按照 时间与任务安排”及时完成当天的网页操作任务，并用U盘保存网页，(3) 网页体裁、形式、风格不限。(4) 参考网页”只是起到范例作用，希望同学们看到参考网页上的效果，还能想起来那些 效果是如何设计的。每组设立一个组长，负责组织分配该组成员的具体工作。(5) 教师负责整个网页制作过程的体裁和内容的审核、系统指导和监督工作。六、实训要求1. 确定目标通过网络就某个专题搜索资料， 题材不限，要求有个人特色、新颖和有吸引力，并对网站作简单的介绍如主题是什么？分那几个栏目，每个栏目的特色和主要内容是什么？ 参考专题： 对计算机基础教育的看法， 互动式教学的

5、方式， 网上论坛， QQ 聊天论述等。也可以是其它的有兴趣的专题如：文学、历史、科技、体育、旅游、生活、时尚等。参考选题：班级主页，动漫，个人主页，求职简历，电子商务网站，花卉网站，学习网 站2. 选择目标用户确定了站点实现的目标之后， 需要确定站点的浏览客户。 创建世界上每个人都能使用的Web 站点是不可能的。人们的兴趣、爱好不同，使用不同的浏览器，以不同的速度连接， 这些因素都会影响站点的使用。因此需要确定目标用户，根据用户的特点来设计站点风格。3. 组织站点结构如果没有考虑文档在文件夹层次结构中的位置就开始创建文档，最终可能会导致一个充满了文件的臃肿混乱的文件夹，或导致相关的文件散布在许

6、多名称类似的文件夹中。设置站点的常规做法是在本地磁盘上创建一个包含站点所有文件的文件夹(称作本地站点)，然后在该文件夹中创建和编辑文档。当准备好发布站点并允许公众查看时，再将这些 文件拷贝到 Web 服务器上。组织站点结构时，应注意以下三个问题：( 1)将站点分类，把相关的页面放在同一文件夹中。( 2)将图像和声音文件等项目放在指定的文件夹中，以便于文件的查找定位。例如，将所有图像放在 Images 文件夹中，当在页面中插入图像时，就可以方便的找到它。(3)本地站点和远程 Web站点应该具有完全相同的结构。如果使用 Dreamweaver MX创建本地站点，然后将全部内容上传到远程站点，则Dr

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

8、开始开发站点前，请确保收集了所有这些项目并做好了准备。否则，可能为找不 到一幅图像而中断设计、开发过程。LogoBanner简单功能导航栏功能列表或局部导航主要内容版权声明16七、实训计划表时间安排内容安排第一天上午明确网站主题，应力求简洁，要点明确，要 以简单的画面和语言告诉浏览者，站点的主 题。收集网页素材，确定栏目，决定网站结 构，通过小组讨论，画出网页草图。下午确定内容安排，将每个页面的草图设计完成。 相关的文字工作录入完毕， 定义好本地站点， 将资料保存。第二天上午用Photoshop将网页草图实现，决定网站的配 色方案，可以借鉴其他网站。对各个网页可 以分工实现。下午制作网页中所需

9、要的Flash。将在PS中完成的图片切片，保存。第三天上午主页的设计主要是对版面进行合理布局，利 用表格和层对版面进行合理定位。通过文字 图形的空 间结合，表达出和谐与美。利用 DW，设计网页的排版方式，把各个切片放入 DW中的表格。下午将相应的内容，放入网页的对应位置。其它 页面的制作，注意与主页的和谐统一，并对 各页内容进行充实；适当搜集一些网页特效， 做出适合自己站点的特效。第四天上午修改并完善已经做好的网页，同时完成网页 之间超级链接的设置。多页面之间的链接， 特别是关系十分密切的有上下文关系的页 面，设计时一定要含有向前和向后的按钮， 便于浏览者的访问下午完善并测试网页，准确无误后，

10、在网上申请 免费空间，将制作好的网站在网上发布。第五天上午对于已完成网站，进一步进行修改，可以加 入一些动态技术。（如留言板）小组每个成员写好实验报告。下午申请免费或收费的空间，将作品上传调试。 书写实训报告。检查每个小组的网页，以及 实验报告，并打分。附表：评分标准1、内容充实度：60%2、动态技巧：20%3、版面美工：10%4、其他功能：10%八、考核办法评价指标量化等级分值(分值)具体指标优良中差自评教师获得的信息准确且完整5432网页内信息的收集方法效率咼10864容网页文字没有语法和拼写错误10864(40)能找到合适的网页素材并合理应 用10864引用他人作品，是否注明出处5432

11、技术处网页布局整齐、合理10864理网页色彩协调、风格鲜明10864网页链接正确、快捷10864(35)具有较强的动态交互功能5432自主学能独立查找操作指导并完成操作5432习能力(10)能独立上传和下载网页作品5432合作能明确自己的分工职责， 圆满完成任 务5432力(10)主动与他人讨论，尊重他人，帮助 他人5432创新表现(5)网页栏目设计及整体规划有新意5432合计总得分实验步骤1网站策划1）画出网站结构草图2）确定栏目 确定网页所需的栏目。可在下列列举的栏目中选取。 班级介绍、学习园地、通讯录、作品展示、班级相册、求职就业、班级新闻、好站分享、笑 话心语、 FLASH 欣赏，音乐

12、欣赏。 （至少 5 个栏目）3）进行版面设计分为首页设计和二级页面的设计，清楚在页面上分别要放置哪些内容4）搜集素材。如相关文字录入，图片素材，班级相片等等。二、制作网页1、建立站点。命名为webfile,网站的结构如下:c g仆少倉匡-,；_j 站点-webfile webfile筒 subjectl由己J imagespags eowkIe白匸）subj ect2田 Q innaggs甲S0 匕aSL-iElBE!:.pagesQ soundsEubj eet3 subj ect4 subj ect5 index, him2、进行主页的设计。要求主页中包含一个自己完成的Flash。3、进行

13、其他页面的设计。4、建立几个页面间的链接关系。三、测试网页四、作业检查网上教学资源【网页素材】：网页制作大宝库 素材精品屋 http:/www.sucaiw.eom/index.asp黑马网页素材 遐思素材屋 http:/www.zzi.cc/sck/sck1.htm【网页特效】：网页特效集 网页特效 网页特效 七色风网页特效 http:/www.7wi nd.n et/wytx/wytx.htm【技术文章】：太平洋学院 蓝色理想 天极网网页陶吧 网页设计师联盟 七色鸟设计空间 有风的日子 中国站长站 闪客帝国 宇风多媒体 闪吧 http:/www.flash8. net/网页素材库 参考书籍

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

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

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

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

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

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

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

21、ght，表示滚动区域的大小，width是宽度，height是高度。特别是在做垂直滚动的时候，一定要设height的值。c) direction。表示滚动的方向，默认为从右向左：。可选的值有 right、down、up。滚动方向分别为：right表示m,up表示f, dow n表示J。d) scrollDelay ,这也是用来控制速度的，默认为90,值越大，速度越慢。通常scrollDelay是不需要设置的。e) behavior。用它来控制属性，默认为循环滚动，可选的值有alternate(交替滚动卜slide(幻灯片效果，指的是滚动一次，然后停止滚动)七、图片切换代码。!-var imgUr

22、l=new Array();var imgL ink=new Array();var adNum=0;imgL in k1= in gga n/2005-11-22/19.html;imgUrl1=http:/www. mn nwen/5.jpg;imgL in k2=http:/www.m n88.eom/x in gga n/2005-11-22/20.html;imgUrl2=http:/www. mn nwen /4.jpg;imgL in k3=http:/www.m n88.eom/x in gga n/2005-11-22/15.html; imgUrl3=http:/www.

23、mn nwen/2.jpg;imgL in k4=http:/www.m n88.eom/x in gga n/2005-11-22/38.html; imgUrl4=http:/www. mn nwen/l.jpg;imgL in k5=http:/www.m n88.eom/x in gga n/2005-11-22/17.html; imgUrl5=http:/www. mn nwen/3.jpg;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 (docume