网页设计与网站建设实验与特效Word下载.docx
《网页设计与网站建设实验与特效Word下载.docx》由会员分享，可在线阅读，更多相关《网页设计与网站建设实验与特效Word下载.docx（20页珍藏版）》请在冰点文库上搜索。
参考选题：
班级主页，动漫，个人主页，求职简历，电子商务网站，花卉网站，学习网站……
2.选择目标用户
确定了站点实现的目标之后，需要确定站点的浏览客户。
创建世界上每个人都能使用的Web站点是不可能的。
人们的兴趣、爱好不同，使用不同的浏览器，以不同的速度连接，这些因素都会影响站点的使用。
因此需要确定目标用户，根据用户的特点来设计站点风格。
3.组织站点结构
如果没有考虑文档在文件夹层次结构中的位置就开始创建文档，最终可能会导致一个充满了文件的臃肿混乱的文件夹，或导致相关的文件散布在许多名称类似的文件夹中。
设置站点的常规做法是在本地磁盘上创建一个包含站点所有文件的文件夹（称作本地站点），然后在该文件夹中创建和编辑文档。
当准备好发布站点并允许公众查看时，再将这些文件拷贝到Web服务器上。
组织站点结构时，应注意以下三个问题：
（1）将站点分类，把相关的页面放在同一文件夹中。
（2）将图像和声音文件等项目放在指定的文件夹中，以便于文件的查找定位。
例如，将所有图像放在Images文件夹中，当在页面中插入图像时，就可以方便的找到它。
（3）本地站点和远程Web站点应该具有完全相同的结构。
如果使用DreamweaverMX创建本地站点，然后将全部内容上传到远程站点，则DreamweaverMX确保在远程站点中精确拷贝本地结构。
4.设计外观
页面布局和设计保持一致非常重要。
如果不考虑板块设计，浏览者会觉得你的网站内容杂乱、无条理，先要考虑好自己设计的板块与链接结构；
根据所需的站点布局外观，在实训报告本上画一个站点草图，以便以后建立站点时可以按照它来操作。
如图1所示，是一个站点首页的设计布局图。
5.设计导航方案
设计站点时，应考虑如何使访问者能够方便的从一个区域移动到另一个区域。
具体考虑以下几点：
明确“当前位置”；
导航方便；
提供与网站管理员的联系方法。
6.规划和收集资料
完成了设计和布局后，就可以创建和收集需要的资源了。
资源可以是图像、文本或媒体等项目。
在开始开发站点前，请确保收集了所有这些项目并做好了准备。
否则，可能为找不到一幅图像而中断设计、开发过程。
Logo
Banner
简单功能
导航栏
功能列表
或
局部导航
主要内容
版权声明
七、实训计划表
时间安排
内容安排
第一天
上午
明确网站主题，应力求简洁，要点明确，要以简单的画面和语言告诉浏览者，站点的主题。
收集网页素材，确定栏目，决定网站结构，通过小组讨论，画出网页草图。
下午
确定内容安排，将每个页面的草图设计完成。
相关的文字工作录入完毕，定义好本地站点，将资料保存。
第二天
用Photoshop将网页草图实现，决定网站的配色方案，可以借鉴其他网站。
对各个网页可以分工实现。
制作网页中所需要的Flash。
将在PS中完成的图片切片，保存。
第三天
主页的设计主要是对版面进行合理布局，利用表格和层对版面进行合理定位。
通过文字图形的空间结合，表达出和谐与美。
利用DW，设计网页的排版方式，把各个切片放入DW中的表格。
将相应的内容，放入网页的对应位置。
其它页面的制作，注意与主页的和谐统一，并对各页内容进行充实；
适当搜集一些网页特效，做出适合自己站点的特效。
第四天
修改并完善已经做好的网页，同时完成网页之间超级链接的设置。
多页面之间的链接，特别是关系十分密切的有上下文关系的页面，设计时一定要含有向前和向后的按钮，便于浏览者的访问
完善并测试网页，准确无误后，在网上申请免费空间，将制作好的网站在网上发布。
第五天
对于已完成网站，进一步进行修改，可以加入一些动态技术。
（如留言板）
小组每个成员写好实验报告。
申请免费或收费的空间，将作品上传调试。
书写实训报告。
检查每个小组的网页，以及实验报告，并打分。
附表：
评分标准
1、内容充实度：
60%
2、动态技巧：
20%
3、版面美工：
10%
4、其他功能：
八、考核办法
评价指标
（分值）
具体指标
量化等级分值
自评
教师
优
良
中
差
网页内容
（40）
获得的信息准确且完整
5
4
3
2
信息的收集方法效率高
10
8
6
网页文字没有语法和拼写错误
能找到合适的网页素材并合理应用
引用他人作品，是否注明出处
技术处理
（35）
网页布局整齐、合理
网页色彩协调、风格鲜明
网页链接正确、快捷
具有较强的动态交互功能
自主学习能力（10）
能独立查找操作指导并完成操作
能独立上传和下载网页作品
合作能力
（10）
明确自己的分工职责，圆满完成任务
主动与他人讨论，尊重他人，帮助他人
创新表现（5）
网页栏目设计及整体规划有新意
合计总得分
实验步骤
1．网站策划
1）画出网站结构草图
2）确定栏目
确定网页所需的栏目。
可在下列列举的栏目中选取。
班级介绍、学习园地、通讯录、作品展示、班级相册、求职就业、班级新闻、好站分享、笑话心语、FLASH欣赏，音乐欣赏。
（至少5个栏目）
3）进行版面设计
分为首页设计和二级页面的设计，清楚在页面上分别要放置哪些内容
4）搜集素材。
如相关文字录入，图片素材，班级相片等等。
二、制作网页
1、建立站点。
命名为webfile,网站的结构如下：
2、进行主页的设计。
要求主页中包含一个自己完成的Flash。
3、进行其他页面的设计。
4、建立几个页面间的链接关系。
三、测试网页
四、作业检查
网上教学资源
【网页素材】：
网页制作大宝库
素材精品屋
黑马网页素材
遐思素材屋http:
//www.zzi.cc/sck/sck1.htm
【网页特效】：
网页特效集
网页特效
七色风网页特效
【技术文章】：
太平洋学院
蓝色理想
天极网-----网页陶吧
网页设计师联盟
七色鸟设计空间
有风的日子
中国站长站
闪客帝国
宇风多媒体
闪吧
网页素材库
参考书籍
《网页制作三剑客精彩实例详解》作者：
赵艳铎出版社：
上海科学普及出版社
《网页制作三剑客经典实例》作者：
崔亚量出版社：
电子科技大学出版社
《SQLServer2000实用全书》[专著]／（美）RayRankins等著；
邱仲潘等译
《ASP网络编程技术》 肖金秀[主编]/清华大学出版社出版
《信息高速公路与大众传播》明安香．北京：
华夏出版社
《WWWDESIGN》丹涅尔，多累斯 中国轻工业出版社
《ActiveServerPages（ASP）3.0》网页设计手册北京:
清华大学出版社1999．
《现代平面广告设计---CIS企业战略》伍门西安交通大学出版社
《巧学巧用Dreamweaver、Fireworks、Flash制作网页》北京:
人民邮电出版社施书恩，李冬梅
《网页制作教程》丁爱萍电子工业出版社
《DreamweaverMX中文版网页制作实用教程》洪江龙、顾凌燕、徐军玲人民邮电出版社
《网页设计与制作》谢永超中国电力出版社
《精彩网页制作三剑客》深源室西安电子科技大学出版社
《AdobePhotoshop7..0C标准培训教材》Adode公司北京代表处人民邮电出版社
《Photoshop中文版金典案例教程》飞思科技产品研发中心电子工业出版社
电脑平面设计大全潇湘工作室机械工业出版社
《Potoshop7.0图像处理精彩实例创作通》朱仁成西安电子科技大学出版社
《网页设计与制作》制作过程中的参考技术
一、图像处理
图像的外形、大小、数量以及与背景的关系，都与内容有着密切的联系。
（1）图像的外形处理
图像的外形能使页面的气氛发生变化，并直接影响浏览者的兴趣。
一般而言，方形的稳定、严肃，三角形的锐利，圆形或曲线外形的柔软亲切，退底图及一些不规则或不带边框的图像活泼。
（2）图像的面积
图像在网页中占据的面积大小能直接显示其重要程度。
一般地，大图像容易形成视觉焦点，感染力强，传达的情感较为强烈；
小图像常用来穿插在字群中，显得简洁而精致，有点缀和呼应页面主题的作用。
在一个页面中，如果只有大图像而无小图像或细密的文字，就会显得空洞，但只有小图像而无大图像又使页面缺乏视觉冲击力。
图像的大小不仅决定着主从关系，也控制着页面的均衡与运动。
大小对比强烈，给人跳跃感，使主角更突出；
大小对比减弱，则页面稳定、安静。
这是因为，访问者在浏览页面时，首先会注意到大图像，然后再看到较小的图像，这种由大到小的引导，使浏览者的视线在页面上流动，便造成一种动势，使页面活泼起来。
因此，在网页设计时，应首先确定主要形象与次要形象，扩大主要图像的面积，使次要角色缩小到从属地位。
只有大小图像主次得当地穿插组合，才能构成最佳的页面视觉效果。
（3）图像的数量
图像的数量是根据内容决定的。
只用一幅图像，会使内容突出、页面安定。
增加一幅图像，页面会因为有了对比和呼应而活跃起来。
再增加一幅，则更加热闹、活泼。
但是，限于目前网络的传输速度，使用图像时一定要谨慎，大的图像会降低页面显示速度，即使是小图像，如果运用数量过多，同样会使页面下载速度变慢。
随着网络环境及技术条件的改善，这种情况已经有了很大的改观。
（4）与背景的关系
网页图像与背景是对比和统一的关系。
也就是说，图像与背景在和谐统一的基础上，应存在一定的对比，以使主要图像更加突出。
如精密的相机镜头以粗糙的岩石为背景，明亮的文字以深邃的星空为背景，或者使用没有背景及陪衬物的退底图像，周围留出大面积空白，都是利用对比对主体形象起到突出作用。
二、图像在长页面中的应用
网页一般都是纵向的（也有特意设计成横向滚屏的），其长度从一屏到三屏不等，有时甚至更多。
访问者在浏览页面时，通过拖动垂直滚动条使网页一屏一屏地显示，但这并不意味着我们可以将整个页面分割开来，孤立地进行每一屏的设计。
页面的整体感是建立在形象的启承关系上，尽管页面被分割成几屏来显示，但图像或文字的延续性应使浏览者得到完整、统一的视觉感受。
设计者所要做的就是进行通盘考虑，例如：
寻找对比中的和谐、建立同一的视觉识别等，来处理好每一屏与整个页面的关系。
三、版式的基本类型
网页版式的基本类型主要有骨骼型、满版型、分割型、中轴型、曲线型、倾斜型、对称型、焦点型、三角型、自由型十种。
四、iframe的用法
解释成“浏览器中的浏览器“很是恰当
<
iframeframeborder=0width=170height=100marginheight=0marginwidth=0scrolling=nosrc="
move-ad.htm"
>
/iframe>
IFRAME>
用于设置文本或图形的浮动图文框或容器。
BORDER
IFRAMEBORDER="
3"
/IFRAME>
设定围绕图文框的边缘宽度
FRAMEBODER
IFRAMEFRAMEBODER="
0"
设置边框是不否为3维（0=否，1=是）
HEIGHT,WIDTH
IFRAMEHEIGHT="
31"
WIDTH="
88"
设质边框的宽度和高度
SCROLLING
IFRAMESCROLLING="
NO"
是否有滚动条（YES,NO,AUTO）
SRC
IFRAMESRC="
GIRL.GIF"
指定IFRAME调用的文件或图片（HTML,HTM,GIF,JPEG,JPG,PNG,TXT,*.*）
五、改变滚动条颜色。
styletype="
text/css"
!
--
body{
{scrollbar-face-color:
#339900;
scrollbar-shadow-color:
#336600;
scrollbar-highlight-color:
#FFFFFF;
scrollbar-3dlight-color:
scrollbar-darkshadow-color:
scrollbar-track-color:
#66FF66;
scrollbar-arrow-color:
#006600}
//-->
/style>
将以上代码中的颜色代码换成要改的颜色，放在<
/head>
前。
六、滚动字幕的制作方法。
水平滚动
MARQUEEdirection=leftalign="
bottom"
height="
100%"
width="
onmouseout=this.start（）
onmouseover=this.stop（）scrollamount="
2"
scrolldelay="
1"
水平滚动字幕内容
/marquee>
垂直滚动
MARQUEEdirection=upheight=200onmouseout=this.start（）
onmouseover=this.stop（）scrollAmount=1scrollDelay=1>
垂直滚动字内容
各参数详解：
a）scrollAmount。
它表示速度，值越大速度越快。
如果没有它，默认为6，建议设为1～3比较好。
b）width和height，表示滚动区域的大小，width是宽度，height是高度。
特别是在做垂直滚动的时候，一定要设height的值。
c）direction。
表示滚动的方向，默认为从右向左：
←←←。
可选的值有right、down、up。
滚动方向分别为：
right表示→→→，up表示↑，down表示↓。
d）scrollDelay，这也是用来控制速度的，默认为90，值越大，速度越慢。
通常scrollDelay是不需要设置的。
e）behavior。
用它来控制属性，默认为循环滚动，可选的值有alternate（交替滚动）、slide（幻灯片效果，指的是滚动一次，然后停止滚动）
七、图片切换代码。
SCRIPTLANGUAGE="
JavaScript"
varimgUrl=newArray（）;
varimgLink=newArray（）;
varadNum=0;
imgLink[1]="
imgUrl[1]="
imgLink[2]="
imgUrl[2]="
imgLink[3]="
imgUrl[3]="
imgLink[4]="
imgUrl[4]="
imgLink[5]="
imgUrl[5]="
varimgPre=newArray（）;
varj=0;
for（i=1;
i<
=5;
i++）{
if（（imgUrl[i]!
="
"
）&
&
（imgLink[i]!
））{
j++;
}else{
break;
}
}
varpreloadedimages=newArray（）;
6;
i++）{
preloadedimages[i]=newImage（）;
preloadedimages[i].src=imgUrl[i];
functionplayTran（）{
if（document.all）
imgInit.filters.revealTrans.play（）;
functionsetTransition（）{
if（document.all）{
imgInit.filters.revealTrans.Transition=Math.floor（Math.random（）*23）;
imgInit.filters.revealTrans.apply（）;
varkey=0;
functionnextAd（）{
if（adNum<
j）adNum++;
elseadNum=1;
if（key==0）{
key=1;
}elseif（document.all）{
setTransition（）;
playTran（）;
document.images.imgInit.src=imgUrl[adNum];
theTimer=setTimeout（"
nextAd（）"
5000）;
functiongoUrl（）{
jumpUrl=imgLink[adNum];
jumpTarget='
_blank'
;
if（jumpUrl!
='
'
）{
if（jumpTarget!
）
window.open（jumpUrl,jumpTarget）;
else
location.href=jumpUrl;
document.write（"
IMGstyle='
FILTER:
revealTrans（duration=2,transition=20）;
CURSOR:
hand;
TD:
'
onclick='
javascript:
goUrl（）'
height='
232'
src='
nextAd（）'
width='
348'
vspace='
1'
border='
0'
name='
imgIni
升级会员 