网页设计与网站建设实验与特效Word下载.docx

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

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

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

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

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

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

7、，尊重他人，帮助他人创新表现（5）网页栏目设计及整体规划有新意合计总得分实验步骤1网站策划1） 画出网站结构草图2）确定栏目确定网页所需的栏目。可在下列列举的栏目中选取。班级介绍、学习园地、通讯录、作品展示、班级相册、求职就业、班级新闻、好站分享、笑话心语、FLASH欣赏，音乐欣赏。（至少5个栏目）3）进行版面设计分为首页设计和二级页面的设计，清楚在页面上分别要放置哪些内容4） 搜集素材。如相关文字录入，图片素材，班级相片等等。二、制作网页1、建立站点。命名为webfile,网站的结构如下：2、进行主页的设计。要求主页中包含一个自己完成的Flash。3、进行其他页面的设计。4、建立几个页面间的

8、链接关系。三、测试网页四、作业检查网上教学资源【网页素材】：网页制作大宝库 素材精品屋 黑马网页素材 遐思素材屋 http:/www.zzi.cc/sck/sck1.htm【网页特效】：网页特效集 网页特效 七色风网页特效 【技术文章】：太平洋学院 蓝色理想 天极网-网页陶吧 网页设计师联盟 七色鸟设计空间 有风的日子 中国站长站 闪客帝国 宇风多媒体 闪吧 网页素材库参考书籍网页制作三剑客精彩实例详解 作者：赵艳铎 出版社：上海科学普及出版 社 网页制作三剑客经典实例 作者：崔亚量 出版社：电子科技大学出版社 SQL Server 2000实用全书 专著（美）Ray Rankins等著；邱仲

9、潘等译 ASP网络编程技术肖金秀主编/清华大学出版社出版 信息高速公路与大众传播 明安香 北京：华夏出版社 WWWDESIGN 丹涅尔，多累斯 中国轻工业出版社 Active Server Pages（ASP）3.0 网页设计手册 北京:清华大学出版社 1999 现代平面广告设计-CIS企业战略伍门西安交通大学出版社 巧学巧用Dreamweaver、Fireworks、Flash制作网页 北京:人民邮电出版社 施书恩，李冬梅网页制作教程 丁爱萍 电子工业出版社 Dreamweaver MX中文版网页制作实用教程 洪江龙、顾凌燕、徐军玲 人民邮电出版社 网页设计与制作 谢永超 中国电力出版社 精

10、彩网页制作三剑客 深源室 西安电子科技大学出版社 Adobe Photoshop 7.0C 标准培训教材 Adode 公司北京代表处 人民邮电出版社 Photoshop中文版金典案例教程 飞思科技产品研发中心 电子工业出版社 电脑平面设计大全 潇湘工作室 机械工业出版社 Potoshop7.0图像处理精彩实例创作通 朱仁成 西安电子科技大学出版社网页设计与制作制作过程中的参考技术一、图像处理图像的外形、大小、数量以及与背景的关系，都与内容有着密切的联系。 （1）图像的外形处理图像的外形能使页面的气氛发生变化，并直接影响浏览者的兴趣。一般而言，方形的稳定、严肃，三角形的锐利，圆形或曲线外形的柔软

11、亲切，退底图及一些不规则或不带边框的图像活泼。 （2）图像的面积图像在网页中占据的面积大小能直接显示其重要程度。一般地，大图像容易形成视觉焦点，感染力强，传达的情感较为强烈；小图像常用来穿插在字群中，显得简洁而精致，有点缀和呼应页面主题的作用。在一个页面中，如果只有大图像而无小图像或细密的文字，就会显得空洞，但只有小图像而无大图像又使页面缺乏视觉冲击力。 图像的大小不仅决定着主从关系，也控制着页面的均衡与运动。大小对比强烈，给人跳跃感，使主角更突出；大小对比减弱，则页面稳定、安静。这是因为，访问者在浏览页面时，首先会注意到大图像，然后再看到较小的图像，这种由大到小的引导，使浏览者的视线在页面上

12、流动，便造成一种动势，使页面活泼起来。因此，在网页设计时，应首先确定主要形象与次要形象，扩大主要图像的面积，使次要角色缩小到从属地位。只有大小图像主次得当地穿插组合，才能构成最佳的页面视觉效果。（3）图像的数量 图像的数量是根据内容决定的。只用一幅图像，会使内容突出、页面安定。增加一幅图像，页面会因为有了对比和呼应而活跃起来。再增加一幅，则更加热闹、活泼。但是，限于目前网络的传输速度，使用图像时一定要谨慎，大的图像会降低页面显示速度，即使是小图像，如果运用数量过多，同样会使页面下载速度变慢。随着网络环境及技术条件的改善，这种情况已经有了很大的改观。（4）与背景的关系网页图像与背景是对比和统一的

13、关系。也就是说，图像与背景在和谐统一的基础上，应存在一定的对比，以使主要图像更加突出。如精密的相机镜头以粗糙的岩石为背景，明亮的文字以深邃的星空为背景，或者使用没有背景及陪衬物的退底图像，周围留出大面积空白，都是利用对比对主体形象起到突出作用。 二、图像在长页面中的应用 网页一般都是纵向的（也有特意设计成横向滚屏的），其长度从一屏到三屏不等，有时甚至更多。访问者在浏览页面时，通过拖动垂直滚动条使网页一屏一屏地显示，但这并不意味着我们可以将整个页面分割开来，孤立地进行每一屏的设计。页面的整体感是建立在形象的启承关系上，尽管页面被分割成几屏来显示，但图像或文字的延续性应使浏览者得到完整、统一的视觉

14、感受。设计者所要做的就是进行通盘考虑，例如：寻找对比中的和谐、建立同一的视觉识别等，来处理好每一屏与整个页面的关系。三、版式的基本类型 网页版式的基本类型主要有骨骼型、满版型、分割型、中轴型、曲线型、倾斜型、对称型、焦点型、三角型、自由型十种。四、iframe的用法解释成“浏览器中的浏览器“很是恰当 /iframeIFRAME用于设置文本或图形的浮动图文框或容器。BORDERIFRAME BORDER=3/IFRAME设定围绕图文框的边缘宽度FRAMEBODERIFRAME FRAMEBODER=0设置边框是不否为3维（0=否，1=是）HEIGHT,WIDTHIFRAME HEIGHT=31

15、WIDTH=88设质边框的宽度和高度SCROLLINGIFRAME SCROLLING=NO是否有滚动条（YES,NO,AUTO）SRCIFRAME SRC=GIRL.GIF指定IFRAME调用的文件或图片（HTML,HTM,GIF,JPEG,JPG,PNG,TXT,*.*）五、改变滚动条颜色。style type=text/css!-body scrollbar-face-color: #339900;scrollbar-shadow-color: #336600;scrollbar-highlight-color: #FFFFFF;scrollbar-3dlight-color:scrol

16、lbar-darkshadow-color:scrollbar-track-color: #66FF66;scrollbar-arrow-color: #006600/-/style将以上代码中的颜色代码换成要改的颜色，放在前。六、滚动字幕的制作方法。水平滚动MARQUEE direction=left align=bottom height=100% width= onmouseout=this.start（） onmouseover=this.stop（） scrollamount=2 scrolldelay=1水平滚动字幕内容/marquee垂直滚动MARQUEE direction=u

17、p height=200 onmouseout=this.start（） onmouseover=this.stop（） scrollAmount=1 scrollDelay=1垂直滚动字内容各参数详解： a）scrollAmount。它表示速度，值越大速度越快。如果没有它，默认为6，建议设为13比较好。 b）width和height，表示滚动区域的大小，width是宽度，height是高度。特别是在做垂直滚动的时候，一定要设height的值。 c）direction。表示滚动的方向，默认为从右向左：。可选的值有right、down、up。滚动方向分别为：right表示，up表示，down表示

18、。 d）scrollDelay，这也是用来控制速度的，默认为90，值越大，速度越慢。通常scrollDelay是不需要设置的。 e）behavior。用它来控制属性，默认为循环滚动，可选的值有alternate（交替滚动）、slide（幻灯片效果，指的是滚动一次，然后停止滚动） 七、图片切换代码。SCRIPT LANGUAGE=JavaScriptvar imgUrl=new Array（）;var imgLink=new Array（）;var adNum=0;imgLink1=imgUrl1=imgLink2=imgUrl2=imgLink3=imgUrl3=imgLink4=imgUrl

19、4=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（）;6;i+） preloadedimagesi=new Image（）; preloadedimagesi.src=imgUrli;function playTran（） if （document.all） imgInit.filters.revealTrans.play（）;function setTra

20、nsition（）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（）; playTran（）; document.images.imgInit.src=imgUrlad

21、Num; theTimer=setTimeout（nextAd（）, 5000）;function goUrl（） jumpUrl=imgLinkadNum; jumpTarget=_blank; if （jumpUrl != ） if （jumpTarget !） window.open（jumpUrl,jumpTarget）; else location.href=jumpUrl;document.write（IMG style=FILTER: revealTrans（duration=2,transition=20）; CURSOR: hand; TD: onclick=javascript:goUrl（） height=232 src=nextAd（） width=348 vspace=1 border=0 name=imgIni