资源描述：

《网站制作详细步骤》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

本站制作过程目录摘要：40前言51绪论61.1网站设计需求分析61.2网站设计目标62开发工具的选择和介绍72.1HTML简介72.2JSP简介82.3Dreamweaver简介93主页制作103.1网站的架构103.2定义站点113.3创建主页123.4插入表格123.5页面属性设置133.6插入标题栏图画133.7创建导航条133.8设置背景颜色143.9页面之间的链接144单个页面的制作154.1新建一个网页154.2填写网页标题164.3输入网页内容164.4文本编辑174.5插入日期174.6编辑“个人简介”网页184.6.1网页主体编辑184.6.2设置锚点链接194.6.3创建锚点链接1924 本站制作过程4.6.4设置锚点不可见204.7动态页面的制作步骤225数据库的制作235.1数据库制作概论235.2数据库制作内容246网站的测试和上传256.1网站的测试256.2网站的上传26参考文献2724 本站制作过程学习网站设计与制作摘要：这篇论文是关于我的一个学习网站的设计，首先我以网站设计需求分析、网站设计目标为出发点，然后介绍自己设计的这个个人网站作品所使用的语言（HTML、JSP）、平台(Dreamweaver8)等工具，最后来说明并演示一个完整的网站制作过程。本论文是网站建设的理论和实践的相结合。当然，一个好网站的整个设计过程是不能用短短的几十页纸就可以说清楚，所以，在我的这篇论文中，我主要介绍了整个网站中最重要的部分，主要包括前言、本论、结果三个部分，前言是论文的开头部分；本论是本论文的主体，包括本人网站设计的目的、前景，还有网站制作的各个步骤，以理论和实际相结合的方式来呈现出来。结果是本论文的收尾部分，是围绕本论所作的结束语。在本论文的最后，我会列出在本论文编写过程中所参考的文献资料，其中有一些专著、论文和其他资料。关键词：HTMLJSPDreamweaver实践主体Thedesignandproductionofdynamicwebsites(SchoolofPhysicsandElectronics,HenanUniversity,HenanKaifeng475004,China)Abstract:Thispaperisaboutoneofmylearningwebsitedesign,firstofall,Idemandforwebsitedesign,websitedesigngoalsasastartingpoint,andthendescribesthelanguageusedbythepersonalwebsiteoftheirowndesignworks(HTML,JSP),platform(Dreamweaver8tools),andfinallytoexplainanddemonstrateacompletewebsiteproductionprocess.Thispaperisacombinationoftheoryandpracticeoftheconstructionsite.Ofcourse,agoodsitethroughoutthedesignprocesscannotbeusedafewdozensofpagesthatcanbeexplained,inthispaper,Imainlyintroducesthemostimportantpartoftheentiresite,includingthePreface,thetheory,resultsofthreeparts,thepreambleisthebeginningpartofthepaper;thetheoryisthemainbodyofthepaper,includingthepurposeofmywebsitedesign,prospects,andeachstepoftheproductionsiteofthecombinationoftheoreticalandpracticalwaytorenderout.Theresultistheendingpartofthisthesis,Conclusionismadearoundthistheory.Attheendofthisthesis,Iwilllistreference24 本站制作过程documentsinthecourseofthepreparationofthispaper,someofwhicharemonographs,papersandotherinformation.Keywords:HTMLJSPDreamweaverPracticeSubject0前言21世纪以来，互联网在我国的发展相当迅速，已经成为人们快速获取、发布和传递信息的重要渠道，它在人们经济、生活和教育等各个方面发挥着越来越重要的作用。人们通过访问网站、浏览网页来达到获取信息的目的，这就说明了网站的重要性，而一个优秀的网站，一个能互动的动态网站又能极大的激发用户的兴趣，从而调动用户的积极性。本网站就是一个既能浏览动态网页，还能进行互动讨论的一个平台，这个平台是为广大的用户朋友提供帮助的，网站中有很多学习方法，学习经验，还有讨论专区，以及本人收集并归类整理的一些好的学习网站和学习论坛的链接，提供多种学习选择，可以更方便用户学习。这个网站是一个具有动态互动的网站，其动态效果就是用JSP（JavaServerPage）来实现的。JSP充分继承了Java的众多优势，包括一次编写到处运行、高效的性能、和强大的可扩展能力。最后，由于制作者水平有限，网站和论文难免有错误和牵强之处，欢迎大家提出，本人一定虚心学习，在此先谢谢老师和同学们了。1绪论1.1网站建设的需求分析24 本站制作过程网络发展到今天，建立网站已经成为一个很普遍的问题了，对于一个企业来说，建设好自己的网站可以抢占新世纪发展的战略要点。建立新的企业形象，直接开拓国际市场，开展24小时网上营销及高效廉价的定向宣传；与客户建立最直接的交流机制，缩短推出新产品和打开新市场的周期，与富有吸引力的客户群发展客户关系网；与自己的销售人员保持联系，进一步面向本地市场。对于个人来说，建设好时间的个性化网站可以更加方便的收集信息，开展更加直接的网络交流，使用自己构筑的友善平台，我们可以为自己毕业后找工作做好充分的准备，通过自己建设的网站，用人单位可以更好的去了解你，从而给自己增加了一份很重的砝码。总之，一个优秀的网站的市场需求是非常大的，建设网站顺应时代潮流的。1.2制作本网站的目标每一个网站在建设之初都会有一个建设本网站的目标，所谓目标就是本网站所要实现的功能和作用。不同的网站其目标也是不同的，一个交友的网站与一个做市场营销的网站，以及一个大型门户网站和一个小型企业网站，其出发点和建站目的都有所不同，在整个网站的建设规划方面的要求也是肯定是大不一样的。因此在规划我的这个网站时，我选择了和大学生的生活和学习相关联的主题。网站的作用是通过用户来访问而实现其价值的。对于网站的设计者和建设者来说，在设计规划网站时必须要明确自己网站的浏览者，也就是确定自己的用户群体。每一个网站都有自己特定的用户群体，本网站预计的用户群体：在已经确定了建设目的的前提下，应根据建站方向所会导致出现的不同用户群体的需求来规划设计整个网站。我的这个网站就确定了以大学生为用户群体。本网站的设计目标是提供一个良好的网上学习平台，让用户能更好的学习知识，特别是针对要自学的用户，本网站更是提供了一些优秀的学习方法，学习指导和其他有名网站的学习链接，以方便用户更好的学习。本网站的结构和风格：网站的风格反映了一个网站的特色，它具有很大的代表性。出色的网站吸引人的地方不仅仅在于其内容，鲜明的结构和独特的风格往往能起到画龙点睛的作用。一个网站即使内容再丰富，如果网站的结构和风格不能吸引人，那也是毫无价值的。往往整个网站的风格是一个网站吸引浏览者的魅力所在，因此应当根据网站的主题、内容和浏览者的要求来设计自己独特的网站风格。我的网站设计风格是高度结构化、易用。高度结构化、易用的一个很大优势是便与设计，便与浏览，便与学习。2开发工具的选择和介绍24 本站制作过程2.1HTML简介HTML简介超文本标记语言，即HTML（HypertextMarkupLanguage），是用于描述网页文档的一种标记语言之所以在制作网站时选用HTML语言，主要是基于以下几点：超级文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下1简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。2可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。3平台无关性：超级文本标记语言可以使用在广泛的平台上。HTML提供六个级别的标题：从最大的

到最小的

。在标题标记内的文本根据级别自动格式化，并且通常都是粗体字。这些标记是段落级标记。下例是使用了六级标题标记。下面是一个简单的HTML代码的例子：

第一级标题

第二级标题

第三级标题

第四级标题

第五级标题

第六级标题

运行结果如下图2-1所示24 本站制作过程图2-12.2JSP简介JSP（JavaServerPages)是由SunMicrosystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。JSP技术有点类似ASP技术，它是在传统的网页HTML文件(*.html)中插入Java程序段和JSP标记(tag)，从而形成JSP文件(*.jsp)。用JSP开发的Web应用是跨平台的，既能在Linux下运行，也能在其他操作系统上运行。优点：（1）一次编写，到处运行。除了系统之外，代码不用做任何更改。（2）系统的多平台支持。基本上可以在所有平台上的任意环境中开发，在任意环境中进行系统部署，在任意环境中扩展。相比ASP的局限性JSP的优势是显而易见的。（3）强大的可伸缩性。从只有一个小的Jar文件就可以运行Servlet/JSP，到由多台服务器进行集群和负载均衡，到多台Application进行事务处理，消息处理，一台服务器到无数台服务器，Java显示了一个巨大的生命力。（4）多样化和功能强大的开发工具支持。这一点与ASP很像，Java已经有了许多非常优秀的开发工具，而且许多可以免费得到，并且其中许多已经可以顺利的运行于多种平台之下。(5)支持服务器端组件。web应用需要强大的服务器端组件来支持，开发人员需要利用其他工具设计实现复杂功能的组件供web页面调用，以增强系统性能。JSP可以使用成熟的JAVABEANS组件来实现复杂商务功能。24 本站制作过程2.3Dreamweaver简介是个原本由Macromedia公司所开发的著名网站开发工具。它使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。随Macromedia被Adobe收购后，Adobe也开始计划开发Linux版本的Dreamweaver了。Dreamweaver的工作界面如下图2-2所示图2-2Dreamweaver软件的优点：1效率高Dreamweaver可以用最快速的方式将Fireworks，FreeHand，或Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。2便与网页管理使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称，Dreamweaver会自动更新所有链接。使用支援文字、HTML码、HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。3控制能力很高Dreamweaver是唯一提供RoundtripHTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组，24 本站制作过程软件缺点：1效果难一致难以精确达到与浏览器完全一致的显示效果也就是说您在所见即所得网页编辑器中制作的网页放到浏览器中是很难完全达到真正想要的效果，这一点在结构复杂一些的网页（如分帧结构、动态网页结构）中便可以体现出来；2代码难控制页面原始代码的难以控制性，比如您在所见即所得编辑器中制作一张表格也要几分钟，但您要它完全符合您要求可能需要几十分钟，甚至更多时间。而相比之下，非所见所得的网页编辑器，就不存在这个问题，因为所有的HTML代码都在您的监控下产生，但是由于非所见所得编辑器的先天条件就注定了它的工作低效率。3主页制作3.1网站的架构下面开始制作网站的框架了，我要制作的网站是一个个人学习网站，根据学习网站所需的组成元素，本网站主要有主页、个人简介、学习方法、优美文章、学习网站链接、互动讨论等网页组成。如下图3-1所示学习网站链接个人简介学习方法主页优美文章互动讨论图3-124 本站制作过程3.2定义站点在使用Dreamweaver来进行网站制作时，首先要在本地硬盘上定义一个本地站点。用来存储网站中的诸多见面、图片、文字等。这样方便对网站内容的管理、以后的测试和网站的发布。单击“站点”下拉菜单中有一项是“管理站点”单击，出现下方图3-2所示：图3-2单击“新建”选择“站点”出现下图3-3图3-324 本站制作过程本图的作用是给站点取名字，然后点“下一步”选“否”，连着点击“下一步”直到完成。由于步骤较多，操作简单，就不一一截图了。3.3创建主页右击文件下拉菜单中的站点，选择“新建”命令，把新建的文件更名为“index.htm”也可以是“index.html”，我把它命名为“index.html”，如下图3-4所示：图3-43.4插入表格选择“插入”中的“表格”命令。；会出现如图所示表格对话框。设置行数为4，列数为2，表格宽度选为“百分比”，再单击“确定”图3-524 本站制作过程3.5页面属性设置上表完成后就需要对页面属性进行设置了，点击“页面属性”按钮，出现如下图所示“页面属性对话框”设置如下图所示，单击“确定”按钮。图3-63.6插入标题栏图画把光标定位到要插入的单元格中，在“插入”下拉菜单中选择“图片”，选择提前准备好的图片，单击“确定”出现如图3-7所示图3-73.7创建导航栏首先，在第二行的表格内插入一行一列的表格。再设置背景颜色为“FFCC33”。最后输入链接导航条“个人简介学习方法优美文章互动讨论学习网站链接”设置位置居中，如下图3-8所示24 本站制作过程图3-83.8设置背景颜色合并左侧的两个单元格，更新上“笑话一则”再设置好背景颜色。在右边的相应单元格中输入如下图所示内容，调整文本大小，位置，现设置背景颜色，这些内容我同前边做的一样，完成后，首页就制作成功了，如下图3-9所示。图3-93.9网页之间的链接在首页时，点击“文件”的“另存为”命令，出现如下图3-10所示的窗口：24 本站制作过程图3-10在窗口中的文件名中分别填入个人简介、学习方法、优美文章、学习网站链接、互动讨论等后单击“保存”。这时几个分类的网页就制作好了，只是他们的页面是完全相同的，等会儿我会再一个个地对他们编辑。选择导航条中的“首页”二字，在窗口下方的属性对话框的链接中输入“index.html”,在目标对话框的下拉列表框中选择“-black”–black是最常用的，表示在新的浏览器中加载文档。这样到位首页的超级链接就制作好了。可以按照这种方法制作到其他几个页面的链接。4单个页面的制作4.1新建一个网页创建网页的方法和创建主页的方法类似，只是名字不同。把本网页命名为“学习方法.htm”24 本站制作过程图4-14.2填写网页标题如下图所示，在“标题”后面的输入框中输入我的标题。也就是“学习方法”。图4-24.3输入网页内容图4-3输入文章内容后，要对它调节段首间距，这时候一个常常遇到的问题是空格键不能用了，经达查阅资料，我是用以下方法来完成的，首先是把光标定们到要空格的地方。然后把工具栏选为“文本”再单击工具栏按钮的最右侧向下的小箭头，选择“不换行空格”就可以。24 本站制作过程图4-44.4编辑文本选择文本后，可以在窗口下方的“属性”列表中修改文本的属性。其中添加背景颜色时，要先单击“页面属性”按钮，出现如图所示窗口，在背景颜色选项后面选择自己要添加的背景颜色。如图4-5所示图4-54.5插入日期1插入水平线如果要在页面的下方插入日期，最好是选插入水平线，它的作用是分隔文本和日期。方法是：单击“插入”选项中的“HTML”中的‘插入水平线’就可以，2插入日期单击“插入”选项中的“日期”选项就会出现下图所示窗口，可以在窗口中设置星期格式、日期格式、时间格式。24 本站制作过程图4-6我设置后的效果如下图所示：图4-74.6编辑“个人简介”网页4.6.1网页主体编辑输入个人简介内容，再在左侧表格中输入如力所示信息，调整文本，使之为下图中样式，结果如下图4-8所示：24 本站制作过程图4-84.6.2设置锚点链接由于网页页面较长，不方面查阅，为此，我采用了设置锚点设置锚点技术。所谓设置锚点，就是在网页内建立多个标记点，将链接指定到这些标记点上，能够使浏览者快速找到要阅读的内容。先把光标定位于“理论学习”前，然后单击“插入”下拉菜单中的“命名锚记”选项。出现如下图4-9所示窗口，输入“1”。图4-9单击确定，就会出现一个锚点标记，如下图所示图4-104.6.3创建锚点链接首先选择左侧目录中的“理论学习”，再在网页下方的链接中输入“#1”，其中“1”就是刚才我设置的锚记名称。再依次给“专业知识”、“思想修养”、“校内生活”、“英语水平”、“个人评价”、“总结”。设置完全后如下图4-11所示：24 本站制作过程图4-114.6.4设置锚点不可见有的时候锚点可能影响排版和阅览效果，在这里，我设置锚点不可见。选择“编辑”下拉菜单中的“首选参数”，会出现如下图所示的列表框，选择左侧的“不可见元素”。在“不可见元素”窗口中将排名第一个的“命名锚点”前方的对号单击取消就可以设置锚点不可见了。图4-124.7动态网页的制作步骤下面是网站中的动态网页设计，我就把我的这个个人主页的动态页面的制作大体的讲解一下。首先，我根据我的个人主页所要实现的功能我制作好了我的数据库（在下一章）。设定系统的DSN（数据源名称）的步骤：1.启动控制面板，双击“管理工具”下的“数据源（ODBC）”，如图4-1324 本站制作过程所示：图4-132.在打开的“数据源（ODBC）”对话框中选择“系统DSN”标签，然后单击“添加”按钮，如图4-14：图4-143.在弹出的“创建新数据源”对话框中，选择数据库的驱动程序为“MicrosoftAccessDriver（*.mdb）”，然后单击“完成”按钮，如图4-15：24 本站制作过程图4-154.在出现的“ODBCMicrosoftAccess安装”对话框，在“数据源名”文本框中输入我的这个网站的数据库的名称：我的学习网站,单击“数据库”栏中的“选择”按钮选择我的这个网站根目录中我已经建好的数据库我的学习网站.mdb，然后单击“确定”按钮，如图4-16：图4-165.这时，我发现系统数据源名称中已经多了一个“我的学习网站.mdb”，这就是我的网站要使用的数据库。单击“完成”按钮，这样，我就完成了数据源的创建过程。如图4-17：24 本站制作过程图4-176.接下来，我要在DreamweaverMX2004中把数据库的连接完成。运行DreamweaverMX2004，打开“应用程序”面板，然后选择“数据库”标签，如图4-18：图4-18单击“+”按钮，在弹出的快捷菜单中选择“数据源名称”。随即打开“数据源名称”对话框，在“连接名称”文本框中输入“我的学习网站”即可。单击“测试”，我就可以测试数据库是否正确连接了。单击“确定”，这样，我就完成了数据库的连接设置过程。5数据库的制作5.1数据库制作概论网站的数据库建设在整个网站的设计过程中占具最重要的位置，它设计的好与坏直接关系到整个网站的成败。其中，管理系统需要考虑到三者的使用问题：一.系统管理员二.信息发布者三.浏览者：24 本站制作过程一：系统管理员：系统管理员具有对整个网站发布，数据库的管理，信息管理，人员管理的最高权限。二：信息发布者：网站信息的发布者，他们的任务是更新网站上的信息，所以他们的权限只局限于对文章的增、删、改上。三：信息的最终浏览者，他们是不具有任何权限的普通用户。系统管理员（ADMIN）拥有最大的权限，可添加/删除任何信息，包括任何文章，任何用户。在设计数据库过程中，必须考虑到各种信息存放，更新，查询。所以数据库必须能最大限度的满足各种信息的输入输出。5.2数据库制作内容以下为后台数据库的各表的结构和字段的分析。Admin_id系统管理员图5-1：图5-1首页题目表图5-2：图5-2中间版块题目表图5-3：图5-3中间版块内容表图5-4：24 本站制作过程24本站的制作过程24本站数据库的设计过程图5-424网站的测试与上传网站公告栏表图5-5：图5-5网站中用到的调查表图5-6：图5-66网站的测试和上传6.1网站的测试网站设计好之后不能立即上传运行，应该在上传之前测试一段时间。因为网站往往会在浏览器兼容性和显示器兼容性上出现问题。为什么测试显得这么重要呢？没有经过测试的页面会出现那些问题呢？下面将从几个不同的方面来说明这些问题。24 1.分辨率不同经常上网的人可能会有这样的经历，那就是同样一个网页在不同的分辨率下会有不同的显示。这就是由于分辨率不同所造成的。2.浏览器不同显示器不同产生不同的浏览结果，浏览器版本不同也可能会使得网站的浏览效果产生差异。同一个页面在IE和Netscape浏览器下的显示效果也可能是不同的，这些页面上的问题都是访问者可能遇到的。网站建设者不能在页面上发布类似于“本站默认浏览器在IE5.0以上，默认显示器分辨率为800*600”的标记，反而应该想办法去适应浏览网站的访问者，而不是让访问者通过调整浏览器分辨率和显示器来适应网站。所以，网站的测试就显的很重要了。3.测试的项目。在一个网站的开发过程中，网站的测试是保证整个网站整体质量的重要一环，本章将就网站的测试技术及相应的自动测试工具做一个简要的介绍。主要就如下几个方面进行探讨：性能测试，安全性测试，稳定性测试，浏览器兼容性测试，可用性/易用性测试，链接测试，代码合法性测试。在我的个人网站的测试过程中，在数据库的链接，地址的链接，还有图片的相对位置都出现了许多小的错误，还好，经过我自己的修改，现在已基本消除了这种现象。在我的整个网站的测试中，数据库的测试是最重要的，它的设计的好与坏，直接关系的整个我的个人网站的成败，所以，我在测试过程中，对数据库的测试是花费时间最长的。6.2网站的上传网站做好后，要上传到自己的空间里别人才可以看到，下面，我们就讲讲用CuteFTP这个工具上传我自己的个人网站的方法。首先在自己的电脑装上CuteFTP这个软件，安装好后，在程序里找到并运行这个是我的CuteFTP打开后的页面： 图6-1在“主机”项后输入我提前申请的空间域名，或者是服务器所在的主机地址。“用户名”和“密码”中输入我的空间用户名和空间密码。输入后再点连接按钮，建立我的主机和空间服务器的连接。建立连接后再选择本地站点，点击上传就可以了。传送完成后，右边就会显示文件了。点右键会有一些常用功能，如删除。到些文件传送完毕，可以关了cuteftp了。以上就是我用cuteftp这个工具上传我的个人网页的过程，当然，上传网页不只有这一个工具，还有很多，但我是比较喜欢用cuteftp这个工具的。参考文献[1]刘春编著·网页制作三剑客标准培训教程·上海科学普及出版社·2003年1月[2]杨成文王竹林戴军峰编著·轻松打造个性化网站·国防工业出版社·2002年10月[3]李海兵李杰臣编著·超梦幻动态网页开发·中国青年出版社·2004年2月[4]马龙工作室编著·DreamweaverMX2004&ASP动态网页编程完全自学手册·人民邮电出版社·2005年1月[5]刘春编著·网页制作三剑客标准培训教程·上海科学普及出版社·2003年1月