毕业设计（论文）基于Dreamweaver的网站设计

《毕业设计（论文）基于Dreamweaver的网站设计》由会员分享，可在线阅读，更多相关《毕业设计（论文）基于Dreamweaver的网站设计（21页珍藏版）》请在装配图网上搜索。

1、新 乡 学 院 毕 业 论 文论文题目院（系）名称专业名称班 级学生姓名学 号指导教师姓名2012年4月完成19目 录内容摘要：1关 键 词：1Abstract：1Key words：11. 前言21.1课题来源22. 开发工具和运行环境22.1 网站设计的基本知识22.2 Dreamweaver 8 简介32.3 HTML 介绍32.4 网站运行环境43. 网页布局43.1 网页布局的基本概念53.2 网页布局的技术63.3 网站的层次结构图74. 建立网页连接74.1 文字连接和跳转菜单75. 网站的测试与维护146. 结论16参考文献18致谢19内容摘要：在Internet飞速发展的今天

2、，互联网已成为人们快速获取、发布和传递信息的重要渠道，正以一种前所未有的冲击力影响着人类的活动。它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet应用上的地位显的格外重要，它已成为政府、企事业单位信息化建设中的重要组成部分。现今的社会，人们已经离不开了网络，网络已经成为人与人之间交流的一种形式，它能够把事情的复杂化转为简单化，摆脱了时间和空间的限制。网站为很多人提供了一个网络生活空间，通过其网页展示了企业介绍、城市文化、校园文化介绍、招商信息、加盟程序、留言等一系列内容的介绍。为了更好的宣传和服务于经济发展，我通过制作一个网站来介绍一下电子商务网站。关 键 词：

3、 网站建设 Internet 电子商务Abstract：In the Internet rapid development today, the Internet has become a people quickly get, release and transmit information, is an important channel in an unprecedented wallop affect human activities. It in people politics, economy, life aspects played an important role. Ther

4、efore website construction in the Internet application status of especially important to show, and it has become the government, enterprises, an important part of informatization construction. Todays society, people have without the Internet, network has become between a form of communication, it ca

5、n make things complicated to simplicity, get rid of the time and space restrictions. Web site for many people provides a network life space, through its web demonstrate the enterprise introduces, urban culture and campus culture introduction, investment promotion information, join procedure, introdu

6、ced a series of content of the message. In order to better publicize and serve the economic development, I by making a website to introduce electronic commerce website.Key words：website construction Internet Electronic commerce1. 前言1.1课题来源随着二十一世纪新兴科技的飞速发展，如今的信息产业正在经受着一个巨大的挑战，同时也面临着一个重大的机遇。就目前的科技发展水平

7、而言，信息产业的发展已经不能够满足社会化大生产的要求，因此，各个国家集中人力、财力加大对信息技术产业的投入，以适应目前需要。可喜的是在这几十年的发展中我们有了互联网。互联网加大了我们了解世界的眼界，缩紧了人与人之间的距离，这就更容易的使我们走上信息化的道路。互联网拉近了各个领域之间的距离，如今利用互联网来宣传或购物已经是必不可少的工具，因此电子商务网站建设在Internet应用上的地位显的格外重要。2. 开发工具和运行环境2.1 网站设计的基本知识静态页面是网页的代码都在页面中，不需要执行asp,php,jsp,.net等程序生成客户端网页代码的网页。静态页面不能自主管理发布更新的页面,如果想

8、更新网页内容,要通过FTP软件把文件DOWN下来用网页制作软件修改（通过fso等技术例外）。但是静态页面最大的好处是下载速度快，因为不需要程序运算和数据库连接。常见的静态页面以.html、.htm为扩展名的。并非网站上没有动画的就是静态页面，那么如何设计出精美的网页以及动态更新交互的站点，这就需要网页编程与网页制作相结合。本章主要介绍网站建设所必须掌握的基础知识，如网页文档的结构、超链接、表格等基本的HTML标识的写法要求，网页编辑的常用工具，动态网站项目工程的设计步骤要求，以及网站的发布与维护、网站的主机方案等相关知识。动态页面是通过执行.asp、.php、.jsp、.net等程序生成客户端

9、网页代码的网页。动态页面通常可以通过网站后台管理系统对网站的内容进行更新管理。发布新闻，发布公司产品，交流互动，博客，网上调查等，这都是动态网站的一些功能，也是我们常见的。动态网页是需要语言环境支持的，动态页面常见的扩展名有：.asp、 .php、 .jsp 、.cgi 等。动态页面的“动态”是网站与客户端用户互动的意思，而非网页上有动画的就是动态页面4。动态网页是最常用的网站建设的一种表达形式，其优点在于可以根据先前所制定好的程序界面，根据用户的不同请求返回相应的数据。可以说是一对多的关系。从而达到资源的最大利用和节省服务器上的物理资源。如果今后需要改变站点风格，只需要重新制作前台所访问的数

10、据即可。只要数据库结构不变，可以很快的进行改版的。2.2 Dreamweaver 8 简介Dreamweaver是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件，随着Dreamweaver 8的发布，更坚定Dreamweaver在该领域的地位。它集网页设计、网站开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性，是目前网站设计、开发、制作的首选工具。突出的特点主要有灵活的编写方式；可视化编辑界面；功能更多的CSS支持CSS可视化设计、CSS检查工具；动态跨浏览器验证；强大的WEB站点管理功能；内建的图形编辑引擎；丰富的媒体支持能力等。它将可视布局工具、应用程序开发功能

11、和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。开发人员可以使用 Dreamweaver 及所选择的服务器技术来创建功能强大的 Internet 应用程序，从而使用户能连接到数据库、Web 服务和旧式系统。开发环境支持HTML、ASP、ASP.NET、JSP等，提供众多功能强大的可视化设计工具、应用开发环境以及代码编辑支持。主要用于素材整理、排版以及后台程序的交互。2.3 HTML 介绍全称：HyperText Mark-up Language 译称：超文本标记语言。 简意：一种为普通文件中某些字句加上标识的语言，其目的

12、在于运用标记（tag）合文件 达到预期的效果。 HTML 是在 SGML 定义下的一个描述性的语言，或可说 HTML 是 SGML 的一个应用程式。HTML 不是程式语言，如 C+ 和 Java 之类，它只是标记语言，基本上你只要明白了各种 标记的用法便算学懂了 HTML，HTML 的格式非常简单，只是由文字及标记组合而成，于编辑部方面，任何文字编辑器都是可以，只要能将档案存为文本格式即可，用专门的网页编辑工具当然更好。 Macromedia公司的Roundtrip HTML技术让用户可以随意导入HTML文件而无需重新设置代码格式，用户还可以利用Dreamweaver清除或重新格式化HTML代

13、码，实现代码的优化。利用Dreamweaver，可以方便地使用动态HTML功能，却不需要写一行行的代码；利用它还可以检查作品在所有流行的平台和浏览器中可能发生的错误。当然,如果不用DW的话,同样可以制作出非常棒的网站来,其实什么样的程序或者HTML代码都可以直接用记事本来写,只不过DW实现起来确实方便一些吧,还有一些其他的网页编辑工具,比如微软的Frontpage等等,只是想说明一下,做网站,DW很好用，但是不是必须的!2.4 网站运行环境使用IE6.0或以上版本 ，用1024*768分辨率为最佳显示效果3. 网页布局网站主页就好象是宣传栏或者店面对访问者产生第一印象，都希望尽量给人留下好的印

14、象。一般来说，好的网站应该给人有这样的感觉： 干净整洁；条理清楚；专业水准；引人入胜。如图3-1 3-1首页网页应该力求抓住而不是淹没浏览者的注意力，过多的闪烁、色彩、下拉菜单框、图片等会让访问者无所适从离开是最好的选择，就象一些商店，播放震耳欲聋的发烧音乐，你要做的唯一决定就是离开那里，越快越好。3.1 网页布局的基本概念最开始，网页呈现在你面前的时侯，它就好像一张白纸，它需要你任意挥洒你的设计才思，可以创造出自己的设计方案。，虽然你能控制一切你所能控制的东西，但假如你知道什么是一种约定俗成的标准或者说大多数访问者的浏览习惯，那么你可以在此基础上加上自己的东西，这样你创造出来的网页才能更好的

15、被别人接受。（1） 页面尺寸由于页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下给你的页面范围变得越来越小。一般分辨率在800x600的情况下，页面的显示尺寸为：780x428个象素；分辨率在640x480的情况下，页面的显示尺寸为:620X311个象素；分辨率在1024X768的情况下，页面的显示尺寸为：1007x600。从以上数据可以看出，分辨率越高页面尺寸越大。浏览器的工具栏也是影响页面尺寸的原因。一般目前的浏览器的工具栏都可以取消或者增加，那么当你显示全部的工具栏时，和关闭全部工具栏时，页面的尺寸是不一样的。在网页设计过

16、程中，向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。除非你能肯定站点的内容能吸引大家拖动，否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容，那么你最好能在上面做上页面内部连接，方便访问者浏览。（2）整体造型造型就是创造出来的物体形象，这里是指页面的整体形象。这种形象应该是一个整体，图形与文本的接合应该是层叠有序。虽然，显示器和浏览器都是矩形，但对于页面的造型，你可以充分运用自然界中的其它形状以及它们的组合：矩形，圆形，三角形，菱形等。对于不同的形状，它们所代表的意义是不同的。比如矩形代表着正式，规则，你注意到很多ICP和政府网页都是以矩形为整体造型；圆形带表着柔和，

17、团结，温暖，安全等，许多时尚站点喜欢以圆形为页面整体造型；三角形代表着力量，权威，牢固，侵略等，许多大型的商业站点为显示它的权威性常以三角形为页面整体造型；菱形代表着平衡，协调，公平，一些交友站点常运用菱形作为页面整体造型。虽然不同形状带表着不同意义，但目前的网页制作多数是接合多个图形加以设计，在这其中某种图形的构图比例可能占的多一些。（3）页头页头又可称之为页眉，页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样，访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键，它将牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片和公司标志以及旗帜广告。（4）

18、文本文本在页面中出现都数以行或者块(段落)出现，它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限，文本放置的位置的灵活性非常小，而随着DHTML的兴起，文本已经可以按照自己的要求放置到页面的任何位置。（5）页脚页脚和页头相呼应。页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。你能看到，许多制作信息都是放置在页脚的。（6）图片图片和文本是网页的两大构成元素，却一不可。如何处理好图片和文本的位置成了整个页面布局的关键。而你的布局思维也将体现在这里。（7）多媒体除了文本和图片，还有声音，动画，视频等等其它媒体。虽然它们不是经常能被利用到，但随着动态网页的兴起，它

19、们在网页布局上也将变得更重要。3.2 网页布局的技术网页的布局有表格布局，框架布局，CSS布局等，本网站采用的是表格布局，表格布局被广泛使用，已经成为一个潜在的标准。随便浏览一个站点，它们一定是用表格布局的。表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响。而且表格在定位图片和文本上比起用CSS更加方便。表格布局唯一的缺点是，当你用了过多表格时，页面下载速度受到影响8。对于表格布局，打开一个站点的首页，然后保存为HTML文件，利用网页编辑工具打开它(要所见即所得的软件)，会可以看到这个页面是如何利用表格的。3.3 网站的层次结构图如本网站的总体结构图，如图3-2首页新品

20、上架特价商品会员资料修改购物车查看订单销售排行联系我们收藏本站设为首页时尚卫衣牛仔天地衬衫裙子外套图3-2 网站总体结构图4. 建立网页连接网站实际上是由很多网页组成的，那么网页之间是如何联系的呢？这就是本章要讲的内容-网页的“链接”。“链接”，又称“超链接（Hyperlink）,它作为网页的桥梁。网页中的很多对象都可以加入“链接”属性。在Dreamweaver 8中，如果以“链接”的媒介来划分的话，则“链接”可以分为“文字链接”、“图像链接”、“图像地图链接”、“内部链接和外部链接”、“E-mail链接”、“命名锚记链接”、“文件下载链接”和“跳转菜单”，共8种。4.1 文字连接和跳转菜单网

21、站大多采用的是文字连接和跳转菜单，“文字链接”即以文字作为媒介的链接，它是网页中最常被使用的链接方式，具有“文件小、制作简单和便于维护”的特点。接下来结合我的个人网站为实例，来讲解如何为文字建立“链接”。操作步骤：步骤1、准备好已经制作完成的首页的各个栏目页面步骤2、在Dreamweaver 中打开首页，之后反白选取作为“链接”的文字。步骤3、观察“属性面板”，其中包括一个“链接”文本框。步骤4、接下来需要把链接的位址加入到文本框中。步骤5、在“链接”文本框下面还有一个“目标”下拉列表，从中可以选择链接网页显示的窗口方式，共有4种。如图：4-14-1下拉列表步骤6、还可以设置一些“链接”的属性

22、，单击“属性面板”中的“页面属性”，选择其中的“链接”分类，可以进行的设置有“链接字体”、“大小”、“链接颜色”、“变换图像链接”颜色、“已访问链接”颜色、“活动链接”颜色及“下划线样式”。步骤7、至此，第1个栏目的链接就制作完毕了，按下Ctrl+S保存网页，再按下F12预览，测试一下，当鼠标放在“放松心情”这4个文字上时将变成手形，并且浏览器窗口下面的状态区中会显示链接到的网页的位址，单击文字，页面会立即跳转到第1个栏目中，这表示链接已经制作成功了。步骤8、同理，按照以上步骤，再为“闲情逸致”和“个人主页”等其它栏制作指向对应栏目的链接。至此，整个“文字链接”的实例就全就全部完成了。“图像”

23、也是常被使用的链接媒体，它和“文字链接”非常相似。为图像加入链接，首先应该在网页中插入“图像”，有关插入“图像”或“导航条”按钮的内容，接下来以我的网站“my web“为例，讲解如何建立“图像链接”。操作步骤：步骤1、首先仍然要准备好已经制作完成的首页和各个栏目的页面步骤2、在Dreamweaver中打开网站的首页，之后选取要制作“链接”的图像。步骤3、观察“属性面板”，在“链接”文本框中输入链接的文字位址。步骤4、如果有需要，可以在“目标”下拉列表中选择“链接”网页显示的窗口方式，分别为-blank 、-parent 、-self或 top。步骤5、至此，第1个栏目的图像链接就制作完毕了，按

24、下Ctrl+S保存网页，再按下F12预览，测试一下，将鼠标放在“动画制作”4个文字上时将变成手形，同时浏览器窗口下面的状态区中会显示出链接到的网页的地址，并且会显示出“替代”文本“动画制作”，单击文字，页面会立即跳转到第3个栏目中，这表示链接已经制作成功了。步骤6、同理，按照以上步骤，再为其它几幅图像制作指向对应栏目的链接。步骤7、在栏目页面中制作“返回首页”的链接，使得单击后可以跳转回首页。至此，整个“图像链像”的实例就全部完成了。其中也用到了css和js以下以js为例，如图4-2图4-2折叠样式经过如下代码实现如图4-2var faisunMenu_closedfolderimage_sr

25、c=images/jia.gif;var faisunMenu_treeurl=new Array();var faisunMenu_treeNum=0;document.write(.blockhidedisplay:none; .blockmoveoverflow: hidden;height:1px;display:block; .blockshowoverflow: visible; display:block; .hidemeoverflow: visible;display:none; .showmeoverflow: visible;display:block; .faisunM

26、enu tdfont-size:12px; );function fun5()var a = document.getElementById(typeweiyi);if(a.options.value=0)window.location.href=niuzaitiandi.html;function outinit(itemNo,dir,blockheight) /缩小一个div的高度 var subfiles=document.getElementById(item+itemNo); if(blockheight=0)subfiles.className=blockshow;subfiles

27、.style.height=;blockheight=parseInt(subfiles.offsetHeight);if(dir0) subfiles.className=blockmove; var outinspeed=blockheight/10; var nowheight=parseInt(subfiles.offsetHeight)+outinspeed*dir; if(nowheight=blockheight & dir0) subfiles.className=blockshow;subfiles.style.height=;return; subfiles.style.h

28、eight=nowheight; subfiles.scrollTop=blockheight; parentsresize(subfiles); setTimeout(outinit(+itemNo+,+dir+,+blockheight+),15);function checkU()var username = ducument.getElementByName(username).value;var psword = ducument.getElementByName(PWD).value;if(username!=null&psword!=null)function parentsre

29、size(obj) /缩小父类div的高度doif(obj.className=faisunMenu)break;if(obj.className=blockshow)obj.style.height=;while(obj=obj.parentElement);function showhideit(itemNo) var showfolder=document.imagesopenedfolderimage+itemNo; var hidefolder=document.imagesclosedfolderimage+itemNo; var subfiles=document.getElem

30、entById(item+itemNo); if(subfiles.className=blockmove) return; if(showfolder.className=hideme) hidefolder.className=hideme; showfolder.className=showme;outinit(itemNo,1,0); else showfolder.className=hideme; hidefolder.className=showme;outinit(itemNo,-1,0); function addtree(text,url,target) faisunMen

31、u_treetext.push(text); faisunMenu_treeurl.push(url?url:); faisunMenu_treeurltarget.push(target?target:main);function getsubnum(text) /算出前面有几个-号 var newtext=text.replace(/-*/,); return text.length-newtext.length;function createtree() faisunMenu_treeNum+; var treeendlayer=new Array(); var next_subnum=

32、0; for(i=faisunMenu_treetext.length-1;i=0;i-) /从后面分析起,是否有为结束位置或有子树枝 var subnum=getsubnum(faisunMenu_treetexti);treestatusi=0;if(subnumnext_subnum) /有子目录 treeendlayernext_subnum=0; treestatusi+=1;if(!treeendlayersubnum) /结束位置 treeendlayersubnum=1; treestatusi+=2;/显然地,既有子目录又是结束位置时 treestatusi=3;next_s

33、ubnum=subnum; var echo=; for(i=0;i0&(treestatusli=1|treestatusli=3) echo += ; echo += n;for(j=1;jsubnum;j+) echo += n;var clicktoshowhide=(havechild? onclick=showhideit(+faisunMenu_treeNum+i+) style=cursor:pointer; :); echo += +newtext+nn; if(barstatus=2&!havechild) for(j=subnum;j=0;j-) if(!openedla

34、yerj) echo += ;else break; echo += ; document.write(echo); /清空列表以接受下一个菜单 faisunMenu_treeurl=new Array();5. 网站的测试与维护网站建成后并不意味着网站建设的结束，网站内容需要不断更新， 并且网站发布前要进行细致周密的测试，以保证正常浏览和使用。主要测试内容： 1、服务器稳定性、安全性。 2、程序软件的测试。 3、网页兼容性测试，如浏览器、显示器。 4、根据需要的其他测试。网站发布后也要定时的对网站进行维护，以保证网站的正常浏览和使用。主要的维护内容有：(1)、服务器及相关软硬件的维护，对可能

35、出现的问题进行评估，制定响应时间。 (2)、数据库维护，有效地利用数据是网站维护的重要内容，因此数据库的维护要受到重视。 (3)、内容的更新、调整等。 (4)、制定相关网站维护的规定，将网站维护制度化、规范化。6. 结论实践是检验真理的唯一标准，当然也是检验学习成果的标准。通过这次毕业设计让我对前面学过的许多课程有了更为深刻的理解，也是我对这三年所学的东西的一个综合体现。然而这次设计让我感受颇深，它让我体会到了理论知识结合实践的重要性，光有理论知识是远远不够的。首先，我选的课题是商务网站设计，随之而来的就是我如何来确定该网站的主题,起初自己把问题想的过于简单了，总觉得只要我把主题给确定了，其他

36、的事情也就好解决了。然而却远远不是我想的那样，当我确定了主题着手来做时，发现自己根本不知从哪着手，到底用什么来布局网站，网站的整体风格又是怎样的，如何来规划等这一系列的问题都是我极需要解决的。我开始变得有点浮躁不安，带着这样的心情来做我的设计，其结果是几天下来网站的整体布局都还没有一个统一的概念。慢慢的我就静下心来反思自己这几天所做的，发现自己的方法完全错了，太急于求成，然后我整整自己思绪，根据老师所说的，一步步来，先准备资料，画出网站的设计模型图，熟悉编程环境，把握整体布局，明确了网站的基本功能，做好流程图的情况下，再设计好系统各主要部分，将一些细节问题考虑周全后才开始动手进行开发，使得后来

37、的工作才得以顺利进行。其次，因对环境的熟悉程度不够也让我对整个开发过程受到了一定的阻碍。由于自己所学的东西不是很扎实，而以前只做过一些小的网站，对做大型网站不是很了解，所以自己只有去找资料。最后，在撰写毕业论文时也遇到了一些困难。由于这是我第一次写毕业论文，没有任何经验，所以在此篇毕业论文中不免会有些缺点。总的来说，这次的毕业设计为我即将踏入社会之前提供了一次锻炼的舞台。正像辅导老师说的一样，有些东西自己不会，但是可以去查，去学习，如果自己不去了解，你永远都不会。所谓活到老学到老，自己以后还要加强知识的学习，不断的完善自己。经过做这个网站，这不仅仅是一次毕业设计，不仅仅是学会了一门软件，更重要

38、的是在学习的过程中，脚踏实地，认真严谨，实事求是的学习态度，不怕困难、坚持不懈、吃苦耐劳的精神是我在这次设计中最大的收益。我想这是一次意志的磨练，是对我实际能力的一次提升，也会对我未来的学习和工作有很大的帮助。这次毕业设计不能说得上是完美，但我觉自己已经尽了自己最大努力去完成，我想只要自己努力了就能对得起自己了。在今后的学习生活中，我将不断提高自己网页设计与制作的能力和水平，从而弥补本次毕业设计中的不足，同时我也会在以后的时间里尽量的完善它，不断的对它进行升级，做出更好的成绩。参考文献1洪光.马希敏编著.静态网站建设M.大连理工出版社2008.62杨选辉.网页设计与制作教程M.清华大学出版社

39、2008.23于慧.编著静态网页编程精彩案例教程M.电子工业出版社2006.54王辉 .罗皇等编著.中文Dreamweaver8网页制作.M清华大学出版社2006.85古燕莹.编著网页设计制作基础与应用.清华大学出版社2008.7 6李舒亮主编.网页设计与制作使用教程.机械工业出版社2006.4致谢在论文完成之际，我要特别感谢我的指导老师xx老师的热情关怀和悉心指导。在我撰写论文的过程中，xx老师倾注了大量的心血和汗水，无论是在论文的构思和资料的收集方面，还是在论文的研究方法以及成文定稿方面，我都得到了xx老师的悉心细致的教诲和无私的帮助，特别是她广博的学识、深厚的学术素养、严谨的治学精神和一丝不苟的工作作风使我终生受益，在此表示真诚地感谢和深深的谢意。在论文的写作过程中，也得到了许多同学的宝贵建议，在工作过程中得到许多同事的支持和帮助，在此一并致以诚挚的谢意。感谢所有关心、支持、帮助过我的良师益友。感谢参考文献中的各位作者，真诚的感谢对我的帮助。