基于dreamweaver的读书网站设计与实现.docx
- 文档编号:10126734
- 上传时间:2023-02-08
- 格式:DOCX
- 页数:21
- 大小:1.79MB
基于dreamweaver的读书网站设计与实现.docx
《基于dreamweaver的读书网站设计与实现.docx》由会员分享,可在线阅读,更多相关《基于dreamweaver的读书网站设计与实现.docx(21页珍藏版)》请在冰豆网上搜索。
基于dreamweaver的读书网站设计与实现
基于dreamweaver的读书网站
设计与实现
前言
今天的世界已经迅速进入信息时代,互联网已成为第二十一世纪最热门的行业之一,由于它的快速发展和在全世界的广泛应用带来了革命性的变化。
网络技术的发展也取得了巨大的成就,为网站的发展提供了技术支持。
网站已经成为必不可少的网络营销平台,很多企业在现阶段,互联网的应用规模不断扩大。
其中,特别是各类中小企业营销,对网络平台的需求十分迫切。
各大门户网站、企业网络是在WEB的标准上,使用DIV+CSS布局,因此我就有了此次选题的想法。
论文详细论述了一个基于书籍网站开发的设计过程。
在技术上,用Dreamweaver网页开发,PS的图像处理,动画设计工具,用HTML结合JavaScript客户端语言超级功能,PS强大的图像处理功能,flash的超强动画制作功能相联合,这种结构有利于网站系统对未来的把握,并对未来的发展积累了一定的经验,提高网站制作的能力,最重要的是魅力和功能的显示和DIV+CSS进行网页设计。
本网站实现了首页、一盏茶坊、佳篇难弃、读书时间、网络文学、文娱驿站等功能,系统符合读书网站的基本需求。
本论文的整体部署如下:
先介绍了相关的开发工具及技术基础;其次;在需求分析网站,并提出了具体的设计;而后详细的展示了全部网站的实现,其中包含网页的策划和衔接,每个功能模块的具体实现;最后对本网站进行了常规的测试。
1网站的开发工具
本网站运用的开发工具Dreamweaver、AdobePhotoshopCS3、Flash的简介。
1.1Dreamweaver简介
Dreamweaver是美国由MACROMEDIA公司开发的用于网页制作和网站管理的软件,它操作简便,可进行多个网站的管理,使用此软件可以将通过定义类文件、css样式、库文件、模板等,将多个页面设置成相同的页面,只需要更改母版文件就可以实现对文件的更新,十分的便利,就不需要单个更改。
Dreamweaver中部分常用的菜单和面板的作用如下所述:
1、主菜单栏
在Dreamweaver软件界面顶部的主菜单栏,包括Dreamweaver使用的各种编辑操作命令。
这些命令以下拉菜单的形式隐藏在每个菜单标题的下面。
通过单击菜单标题,可以打开标题内的下拉菜单列表。
选择各种菜单选项,可以完成各种相关的操作。
2、插入菜单栏
插入菜单栏位于主菜单的下面,包含了dreamweaver中各类经常使用的页面元素。
这些页面元素按照常用、布局、表单等功能分类显示在插入栏的上侧。
单击某个分类的名称,可以再插入菜单栏的下侧显示每个分类的具体信息。
3、文档窗口
文档窗口是dreamweaver中的主要部分,编辑和显示的页面内容都是在这个区域完成的。
在文档窗口的顶部,显示了文档的标题。
在文档标题的下面,显示了文档的三个视图和常用的按钮。
通过代码、拆分、设计这个三个选项,可以控制文档窗口中内容的显示方式。
4、属性面板
属性面板显示在文档窗口的下面,用来显示和编辑页面中各种页面元素中定义的相关属性。
通过对属性面板中相应参数的修改,可以对页面元素的各种显示效果和相关属性进行精确控制。
5、其他常用面板
其他经常使用的面板显示在dreamweaver界面的右边,包含面板、应用程序面板、标签面板等。
通过这些面板可以方便地查看和编辑页面中的各种相关内容,例如查看某些元素中定义的CSS样式等。
1.2DIV+CSS
CSS是CascadingStyleSheets的缩写,是一种用来体现XML或HTML等文件式样的计算机语言。
DIV+CSS是“WEB标准”中常用术语之一,div+css是一种网页的布局方式,这一种网页布局方式有别于传统的HTML网页设计语言中的表格(table)定位方法,真确地达到了w3c内容与表现相分离。
XHTML语言是一种可以将HTML语言标准化,用XHTML语言重写后的HTML页面可以应用许多XML应用技术。
使得网页更加容易扩展,适用于自动数据交换和更多的规则。
在XHTML网站设计标准中,再也不使用表格定位技术,而是采用DIV+CSS的式样完成各类定位。
如下是DIV+CSS的优点:
1.更好的控制页面布局。
2.提高易用性。
使用CSS可以结构化HTML。
3.大大缩减页面代码,提高页面浏览速度,缩减带宽成本;
4.制备的CSS很容易。
你会很容易的在HTML中写你喜欢的CSS样式。
5.由于CSS的兼容性它可以一次编写,多处使用。
你的设计不仅可以在Web浏览器上使用,也可以在其他设备上释放。
6.缩短改版时间。
7.表现和内容相分离。
8.强大的字体控制和排版能力。
1.3AdobePhotoshopCS3简介
AdobePhotoshop图像处理软件简称PS,是Adobe图像处理软件开发资讯公司开发的。
Photoshop包括了强大的快速浏览功能、颜色匹配方便快捷、调色板种类齐全、阴影或加亮的修正功能、支持多种模式的图像输入功能、支持快速查看、flash输入、沿路径放置文本、还可以自定义快捷键。
PS图像处理软件主要用于处理数字图像,而不是图形制作。
图像处理是可编辑的图像处理和特效的使用,其重点是对图像进行处理;PS已广泛应用在数字图像处理中,图像编辑领域的合成,封面设计,广告设计,网页设计等。
AdobePhotoshop经历了多个版本我所选用的是AdobePhotoshopCS3。
AdobePhotoshopCS3比AdobePhotoshopCS3的优越处有以下几点:
①文字处理更加方便。
②增加的图层集使图层管理更有序。
③新增图像功能、图像的剪切和剪裁更加方便。
④处理速度比较快、对机器的硬件要求不是特别的高。
1.4JAVA脚本语言
JavaScript的对象事件驱动的脚本语言,它是基于Web浏览器的客户导向。
由于HTML语言的能力有限,不能满足我们的期望设计,实现丰富多彩的动态效果。
在这样的环境下各种脚本语言应运而生,JavaScript就是其中之一。
JavaScript、C++和Java的面向对象的语言比较成熟,JavaScript的功能要差一些,但是JavaScript不能被用来编写独立运行的应用程序,但JavaScript的脚本可以在一个解释器中运行,解释器可以是Web服务器可以也可以是网络浏览器。
JavaScript是一个较为宽松的类型不具有明确定义的变量的数据类型的语言,JavaScript的将自动根据需要进行转换。
都写在出现在程序源代码的形式的JavaScript,就是说你看到一个页面中一个相当不错的JavaScript代码,只是你需要他们,你可以拷贝,然后把它放在你的网页中去。
这是因为它可以学习的优秀网站参考代码的特性,使JavaScript的本身也变得非常流行,它被广泛应用。
谁的人已经明白编程,多参考的JavaScript示例代码,可以很快上手。
JavaScript允许用户以交互方式浏览丰富多彩的个性化内容,能够大大提高了Web服务器和Web应用程序的吸引力。
JavaScript的特点:
简单、易学、易用;
事件驱动式的脚本程序设计思想;
动态、交互式的操作方式。
JavaScript最大特点是:
它的var类型有点貌似java语言的object类型,类型基本上都可以用它来声明,也正是它的弱类型,js具有非常强大的灵活性。
JavaScript的作用:
交互式操作;
表单验证;
网页特效;
Web游戏;
服务器脚本开发;
1.5Flash简介
Flash的一系列软都是交互式动画设计软件,是由美国的macromedia公司设计。
它是互联网上最流行的动画片高效的设计软件,它可以把音乐,声音,动画,以及一些富有新意和艺术效果的照片一起,然后创建一个优美的动画。
科技给我们带来很大变化,Flash系列的软件具有很强大的功能,它可制作MV动画,广告片头,娱乐短片,导航条学习软件,小游戏等等。
它的优点是制作简单,通用性比较大,做出的作品效果特别好。
同时它也存在一些缺点存在局限性(例如3D效果)。
利用Flash CS6能够设计出简单的MTV动画,它主要要包括的两部分:
音乐和动画。
制作出的动画作品文件小,上传下载快,很容易收到许多人的喜爱和欢迎。
以下是flash动画设计的三大基本功能:
(1)绘图和编辑图形
绘图和编辑图形不但是创作Flash动画的基本功,也是进行多媒体创作的基本功。
使用Adobe Flash CS6绘图和编辑图形——这是对Flash动画的三个基本功能的第一。
在绘图的过程当中要学习如何利用元件来组织图形元素,这也是Flash动画的一个特色。
(2)补间动画
动画是Flash动画的心脏,也是Flash动画的最大优点,它有动画,形状补间两种形式的补充。
我们研究了Flash动画的设计,最重要的是学会“吞”的设计。
在电影剪辑元件和动画的图形元素,也有一些细微的差别。
(3)遮罩
遮罩相当于一个面具层,它的功能是遮住下面图层的某一部分不让其显示出来。
遮罩层显示的是遮罩层和被遮罩层交叉的部分,显示的动画是被遮罩图层的内容,它与遮罩层没有任何关系。
遮罩在Flash动画创作中占据很重要的角色,它也是动画中的精彩点。
利用遮罩功能使用补间动画,我们可以制作出很多不同的精彩的动画效果:
图像切换、文字颜色变换等都是实用性很强的动画。
由于遮罩功能非常庞大,我们可以进一步制作出很多特殊的动画效果。
2网站的总体规划
网站的总体规划决定着网站的整体布局,在整个网站的设计中具有举足轻重的作用。
只有前期对网站的整体结构、网站的风格和素材等制作网站的必要东西准备齐全,在整个网站的制作中才能够快速顺利的完成。
2.1网站的结构图
根据一般网站的基本功能需求,完成了本网站的基本结构,网站主要由“一盏茶坊”,“佳篇难弃”,“读书时间”,“网络文学”,“文娱驿站”,“e空间”六个网站页面组成。
总体结构如图2-1所示:
图2-1
2.2网站的风格
本网站的主界面是很服饰和目录式的页面,分为上、下左、下中和下右4分部分。
顶部是一个横幅,下左是一个目录,下中是个书目,下右是本站介绍和本站寄语。
下左中的超链接可以保存本页面、可以给我留言、还可以直接进入我的空间。
下中书目上的超链接可以直接进去看本书的详细内容。
下右中的本站介绍可以让浏览者更详细的了解本网站,本站寄语中点击我的名字可以进入到我的微博可以对我有更多的了解。
网站整体运用蓝色做背景,风格上主要强调简洁、大方、布局简单的特点。
主页由flash制作,通过导航条的引导可以进入网站了解网站的全部内容。
用户可以通过网页上导航的提示来取得自己感兴趣的文本和图文的详细描述。
2.3素材准备
搜集素材在网站制作中也是重要的一个环节,我们只有准备好制作网站的必备素材,才能够更好更快的制作网站,从而不会浪费时间和精力。
制作网站的准备工作不仅仅包括收集许多符合网站的文本,网站内容的图片,还包括网站设计的布局和设计。
网站中图片大部分是从素材精品屋等网站搜集的,有的图片是直接应用到网站中,有的是自己用Photoshop自己处理的。
书籍是从当当图书、亚马逊商城和一些电子书网站上搜集过来的。
素材准备好后,我们最好能把从网上搜集过来的素材进行一些必要的归类,也就是把素材整理成一些整齐的目录,把它们放在站点所在放置的目录下,这样放置比较方便处理。
例如:
将图片都放在image文件夹中、文字都放在txt文档中等。
3网站功能某块的实现
3.1Index.html页面
用JavaScript写的,在此页面中点击“进入浓久沁香的小屋”便可进入网站的主页,页面如图3-1所示:
图3-1
以下是Index.html的主要代码:
functionMM_reloadPage(init)
if(init==true)with(navigator)
{
if((appName=="Netscape")&&(parseInt(appVersion)==4))
{
document.MM_pgW=innerWidth;document.MM_pgH=innerHeight;onresize=MM_reloadPage;
}
}
elseif(innerWidth!
=document.MM_pgW||innerHeight!
=document.MM_pgH)location.reload();
}
MM_reloadPage(true);
functionMM_openBrWindow(theURL,winName,features)
{
window.open(theURL,winName,features);
}
3.2主页页面
运用了javascript写了一个漂浮的窗口,即将鼠标放到导航上下边就会出现相应的小窗口,它来对你将访问的页面做简单的介绍。
效果如图3-2所示:
图3-2
实现漂浮窗口的代码如下:
if(typeoffcolor=='undefined'){varfcolor="#E0EDE0";}
if(typeofbackcolor=='undefined'){varbackcolor="#E0EDE0";}
if(typeoftextcolor=='undefined'){vartextcolor="#008040";}
if(typeofcapcolor=='undefined'){varcapcolor="#FFFFFF";}
if(typeofwidth=='undefined'){varwidth="200";}
if(typeofborder=='undefined'){varborder="3";}
if(typeofoffsetx=='undefined'){varoffsetx=12;}
if(typeofoffsety=='undefined'){varoffsety=12;}
ns4=(document.layers)?
true:
false
ie4=(document.all)?
true:
false
if(ie4){
if(navigator.userAgent.indexOf('MSIE5')>0){
ie5=true;
}
else{
ie5=false;}
}
else{
ie5=false;
}
varx=0;
vary=0;
varsnow=0;
varsw=0;
varcnt=0;
vardir=1;
vartr=1;
if((ns4)||(ie4))
{
if(ns4)over=document.overDiv
if(ie4)over=overDiv.style
document.onmousemove=mouseMove
if(ns4)document.captureEvents(Event.MOUSEMOVE)
}
functiondrc(text,title)
{
dtc(1,text,title);
}
functionnd(){
if(cnt>=1){sw=0};
if((ns4)||(ie4)){
if(sw==0){
snow=0;
hideObject(over);
}else{
cnt++;
}
}
}
functiondtc(d,text,title){
txt=" 10pt'> 9pt'> "
layerWrite(txt);
dir=d;
disp();
}
functiondisp(){
if((ns4)||(ie4)){
if(snow==0){
if(dir==2){//Center
moveTo(over,x+offsetx-(width/2),y+offsety);
}
if(dir==1){//Right
moveTo(over,x+offsetx,y+offsety);
}
if(dir==0){//Left
moveTo(over,x-offsetx-width,y+offsety);
}
showObject(over);
snow=1;
}
}
}
functionmouseMove(e){
if(ns4){x=e.pageX;y=e.pageY;}
if(ie4){x=event.x;y=event.y;}
if(ie5){x=event.x+document.body.scrollLeft;y=event.y+document.body.scrollTop;}
if(snow){
if(dir==2){//Center
moveTo(over,x+offsetx-(width/2),y+offsety);
}
if(dir==1){//Right
moveTo(over,x+offsetx,y+offsety);
}
if(dir==0){//Left
moveTo(over,x-offsetx-width,y+offsety);
}
}
}
functioncClick(){
hideObject(over);
sw=0;
}
functionlayerWrite(txt){
if(ns4){
varlyr=document.overDiv.document
lyr.write(txt)
lyr.close()
}
elseif(ie4)document.all["overDiv"].innerHTML=txt
if(tr){trk();}
}
functionshowObject(obj){
if(ns4)obj.visibility="show"
elseif(ie4)obj.visibility="visible"
}
functionhideObject(obj){
if(ns4)obj.visibility="hide"
elseif(ie4)obj.visibility="hidden"
}
functionmoveTo(obj,xL,yL){
obj.left=xL
obj.top=yL
}
functiontrk(){
if((ns4)||(ie4)){
nt=newImage(32,32);nt.src="images/2002-1/dot.gif";
bt=newImage(1,1);bt.src="images/2002-1/dot.gif";
refnd=newImage(1,1);refnd.src="images/2002-1/dot.gif";
}
tr=0;
}
3.3一盏茶坊
在休息时让我们的脚步在这里停留,让心在这里徜徉,用一盏灯,一杯茶的时间来品味人生的另一份灵动。
效果如图3-3所示:
图3-3
3.4佳篇难弃
一阵清新的茶香飘来,吸引你我来这到这里,品茗之后,便是久久弥香。
效果如图3-4所示:
图3-4
此页面中作家介绍处用到了文字滚动,主要代码如下:
document.write(" redriver;Formore,visit: >") document.write("
")
document.write("
document.write("//巴金的简介")
document.write("
")
document.write("
冰心
")document.write("
1900—1999.2.28")
document.write("//冰心简介")
document.write("
")
document.write("
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 基于 dreamweaver 读书 网站 设计 实现