个人网站设计

计算机网络课程设计报告设计题目:个人网站设计学 院 经济与管理学院 专 业 信息管理与信息系统 班 级 081 学 号 3080561016 姓 名 余星 指导教师 严峻 2010年6月28日 2010年7月2日目录一、 课程设计的目的和意义二、 设计题目和要求 2三、 基本思路及所涉及的相关理论22.1 基本思路22.2 所涉及的相关理论4四、 方案设计63.1 主要网络设备63.2 网站设计构件图8五、 网络具体配置步骤84.1 创建网站首页面8 4.2 “留言板”页面的的创建144. 3 二三级网页制作20六、 调试过程中出现的问题及相应解决办法22七、 个人体会及建议22参考文献23一、课程设计的目的和意义21世纪是一个以网络为核心的信息时代。要实现信息化，就必须依靠完善的网络。通过本课程设计，使学生在对计算机网络技术与发展整体了解的基础上，掌握网络的主要种类和常用协议的概念及原理，初步掌握以TCP/IP协议族为主的网络协议结构，培养学生在TCP/IP协议工程和LAN、WAN上的实际工作能力：学会网络构建、日常维护以及管理的方法，使学生掌握在信息化社会建设过程中所必须具备的计算机网络组网和建设所需的基本知识与操作技能。二、设计题目和要求 题目：个人网站设计。要求：具有文字、图像、声音； 能够实现页面之间的链接； 能够实现页面与后台数据库的简单数据交互； 网页数不少于15页。 3、 基本思路及所涉及的相关理论基本思路：网站主页右端端的标题“我的个人书屋长度好书”是一段文字，其下是“留言板”，能够实现页面与后台数据库的简单数据交互；左端是一幅图片。最下端的是导航链接。网页背景是一深褐色。 然后做二三级网页及动态“留言板”网页。二级网页主要是各类书籍名及其简介。三级网页为书籍目录或书籍的章节内容。留言板主要有留言人名及其内容。设计内容： 中国文化小说典籍可说是丰富多彩，浩如烟海。所以我开列以下书籍栏目，基本包含了方方面面的书籍，大家可以根据自己的兴趣选读。通过对这些书籍的阅读，可以使大家对中国小说概貌有个大概的了解。我的书屋网站栏目设置1.青春校园是八九十年代兴起的一种小说，这种小说一般以少年十的纯真情感为主线,夹杂有青春期对生活的困惑,成长的烦恼,以及于家长老师，朋友之间的各种冲突与情感.一般比较唯美和理想化。2.玄幻小说是一种类型小说，通常以冒险、战争为主题，时代背景、世界观等皆无拘束，可任凭作者想像力自由发挥。与科幻、奇幻、武侠等幻想性质浓厚的类型小说关系密切。3.武侠修仙中国通俗旧小说的一种重要类型，多以侠客和义士为主人公，描写他们身怀绝技、见义勇为和叛逆造反行为。武侠小说有广义和狭义之分，广义上是指传统武侠 浪子异侠 历史武侠 谐趣武侠 古典仙侠 奇幻修真 现代修真，但从武侠小说的狭义层次上来说就只指 传统武侠 浪子异侠 历史武侠 谐趣武侠 这四类。4.都市言情即以都市为背景的言情小说，描述时尚男女、职场生活等等，有别于校园言情小说，都市言情小说的线索较为复杂也涉及到很多当下的社会问题，而男女主角一般都是性格较为强烈的都市青年。少了青涩，内容也较为开放。 5.军事历史通过研究过去的战争和军事建设以总结经验，探索军事指导原则和军事发展规律，是一门有悠久传统的学科。包括战争史、军队史、军事思想史、军事学术史、军事技术史等。军事理论就是在研究军事历史和现实情况的基础上产生和发展起来的。 6.散文诗歌散文是与诗歌、小说、戏剧并称的一种文学体裁，指不讲究韵律的散体文章，包括杂文、随笔、游记等。是最自由的文体，不讲究音韵，不讲究排比，没有任何的束缚及限制，也是中国最早出现的行文体例。通常一篇散文具有一个或多个中心思想，以抒情、记叙、论理等方式表达。诗歌是一种主情的文学体裁，它以抒情的方式，高度凝练，集中地反映社会生活，用丰富的想象富有节奏感韵律美的语言和分行排列的形式来抒发思想情感诗歌是有节奏有韵律并富有感情色彩的一种语言艺术形式，也是世界上最古老最基本的文学形式诗歌起源于上古的社会生活，因劳动生产两性相恋原始宗教等而产生的一种有韵律富有感情色彩的语言形式尚书.虞书：诗言志，歌咏言，声依永，律和声礼记.乐记：诗，言其志也；歌，咏其声也；舞，动其容也；三者本于心，然后乐器从之早期，诗歌与乐舞是合为一体的诗即歌词，在实际表演中总是配合音乐舞蹈而歌唱，后来诗歌乐舞各自发展，独立成体，诗与歌统称诗歌7.穿越小说指时空变换，古代到现代、现代到古代、现代到未来，以及人到宇宙人到其他次元等，很多性别转换文会利用穿越文的特点做些文章；以便使性别转换的合理化一些。 8.名著鉴赏 收藏具有较高艺术价值和知名度，且包含永恒主题和经典的人物形象，能够经过时间考验经久不衰，被广泛流传的文字作品。相关理论： 网站(Website)开始是指在因特网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。简单地说，网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网络服务。人们可以通过网页浏览器来访问网站，获取自己需要的资讯或者享受网络服务。网页(web page)，是网站中的一页，通常是HTML格式（文件扩展名为.html或.htm或.asp或.aspx或.php或.jsp等）。网页通常用图像档来提供图画。网页要使用网页浏览器来阅读。文字与图片是构成一个网页的两个最基本的元素。你可以简单的理解为：文字，就是网页的内容，图片，就是网页的美观。除此之外，网页的元素还包括动画、音乐、程序等等。 通常我们看到的网页，都是以 htm 或 html 后缀结尾的文件，俗称 HTML文件。不同的后缀， 分别代表不同类型的网页文件，例如以 CGI 、 ASP 、 PHP 、 JSP 甚至其他更多。静态网页是相对于动态网页而言，是指没有后台数据库、不含程序和不可交互的网页。你编的是什么它显示的就是什么、不会有任何改变。静态网页相对更新起来比较麻烦，适用于一般更新较少的展示型网站。与静态网页相对应的是动态网页，也就是说，网页 URL的后缀不是.htm、.html、.shtml、.xml等静态网页的常见形动态网页制作专家式，而是以.aspx.asp、.jsp、.php、.perl、.cgi等形式为后缀，并且在动态网页网址中有一个标志性的符号“?”， 静态网页，动态网页主要根据网页制作的语言来区分： 静态网页使用语言：HTML（超文本标记语言） 动态网页使用语言：HTMLASP 或 HTMLPHP 或 HTMLJSP 等。 静态网页与动态的区别 程序是否在服务器端运行，是重要标志。在服务器端运行的程序、网页、组件，属于动态网页，它们会随不同客户、不同时间，返回不同的网页，例如ASP、PHP、JSP、ASP.net、CGI等。运行于客户端的程序、网页、插件、组件，属于静态网页，例如html页、Flash、JavaScript、VBScript等等，它们是永远不变的。 静态网页和动态网页各有特点，网站采用动态网页还是静态网页主要取决于网站的功能需求和网站内容的多少，如果网站功能比较简单，内容更新量不是很大，采用纯静态网页的方式会更简单，反之一般要采用动态网页技术来实现。 静态网页是相对于动态网页而言，是指没有后台数据库、不含程序和不可交互的网页。你编的是什么它显示的就是什么、不会有任何改变。静态网页相对更新起来比较麻烦，适用于一般更新较少的展示型网站。 静态网页是标准的HTML文件，它的文件扩展名是.htm或.html，可以包含文本、图像、声音、FLASH动画、客户端脚本和ActiveX控件及JAVA小程序等。尽管在这种网页上使用这些对象后可以使网页动感十足，但是，这种网页不包含在服务器端运行的任何脚本，网页上的每一行代码都是由网页设计人员预先编写好后，放置到Web服务器上的，在发送到客户端的浏览器上后不再发生任何变化，因此称其为静态网页。 静态网页是网站建设的基础，静态网页和动态网页之间也并不矛盾，为了网站适应搜索引擎检索的需要，即使采用动态网站技术，也可以将网页内容转化为静态网页发布。 动态网站也可以采用静动结合的原则，适合采用动态网页的地方用动态网页，如果必要使用静态网页，则可以考虑用静态网页的方法来实现，在同一个网站上，动态网页内容和静态网页内容同时存在也是很常见的事情。HTML（HyperText Mark-up Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。网站数据库，就是动态网站存放网站数据的空间。也称数据库空间。现大多网站都是有.ASP .PHP开发的动态网站，网站数据是有专门的一个数据库来存放。网站数据可以通过网站后台，直接发布到网站数据库，网站则把这些数据进行调用。网站数据库根据，网站的大小，数据的多少，决定选用，SQL 或者ACCESE数据库。accese更适合一般的企业网站，因为开发技术简单，而且在数据量不是很大的网站上，检索速度快。不用专门去分离出数据库空间，数据库和网站在一起，节约了成本。而一般的大型政府，门户网站 ，由于数据量比较大，所以选用SQL数据库，可以提高海量数据检索的速度。 Dreamweaver提供的“行为”的机制，虽然行为也是基于JaveScript来实现动态网页和交互的，但却不需书写任何代码。在可视化环境中按几个按钮，填几个选项就可以实现丰富的动态页面效果，实现人与页面的简单交互。对行为的添加和控制主要通过“行为”面板来实现。选择窗口行为命令，打开行为面板，下图所示。在行为面板上可以进行如下操作：单击“+”按钮，打开动作菜单，添加行为；单击“-”按钮，删除行为。添加行为时，从动作菜单中选择一个行为项。单击事件列右方的三角，打开事件菜单，可以选择事件。单击向上箭头或向下箭头，可将动作项向前移或向后移，改变动作执行的顺序。在Dreamweaver中可以创建各种各样的表单，表单中可以包含各种对象，例如文本域、按钮、列表等。4、 方案设计（主要网络设备、网络拓扑结构设计图）：主要网络设备： 1、 客户机：客户机又称为用户工作站，是用户与网络打交道的设备，一般由微机担任，每一个客户机都运行在它自己的、并为服务器所认可的操作系统环境中。客户机主要享受网络上提供的各种资源。 2、 服务器：服务器指一个管理资源并为用户提供服务的计算机软件，通常分为文件服务器、数据库服务器和应用程序服务器。服务器作为网络的节点，存储、处理网络上80的数据、信息，因此也被称为网络的灵魂。做一个形象的比喻：服务器就像是邮局的交换机，而微机、笔记本、PDA、手机等固定或移动的网络终端，就如散落在家庭、各种办公场所、公共场所等处的电话机。我们与外界日常的生活、工作中的电话交流、沟通，必须经过交换机，才能到达目标电话；同样如此，网络终端设备如家庭、企业中的微机上网，获取资讯，与外界沟通、娱乐等，也必须经过服务器，因此也可以说是服务器在“组织”和“领导”这些设备。3、 Dreamweaver 8.0软件： 集网页设计、网站开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性，是目前网站设计、开发、制作的首选工具。Dreamweaver具有灵活编写网页的特点，不但将世界一流水平的“设计”和“代码”编辑器合二为一，而且在设计窗口中还精化了源代码，能帮助用户按工作需要定制自己的用户界面。Dreamweaver是一种所见即所得的HTML编辑器，可实现页面元素的插入和生成。或视化编辑环境大量减少了代码的编写，同时亦保证了其专业性和兼容性，并且可以对内部的HTML编辑器和任何第三方的HTML编辑器进行实时的访问。无论用户习惯手工输入HTML源代码还是使用可视化的编辑界面，Dreamweaver都能提供便捷的方式使用户设计网页和管理网站变得更容易。当保存时系统自动检查当前文档的跨浏览器有效性，可以指定何种浏览器为测试用浏览器，同时系统自动检验以确定页面有没有目标浏览器不支持的tags或CSS结构。动态跨浏览器有效性检查功能可以自动核对tags和CSS规则是否适应目前的主浏览器。Dreamweaver 8继承了Fireworks、Flash和Shockwave的集成特性，可以在这些Web创作工具之间自由地切换，轻松地创建美观实用的网页。网站硬件一般架构：5、 网站具体配置步骤； 一、创建网站首页面1、首先启动Dreamweaver，用站点管理器建立好了一个网站（根目录）Dreamweaver 8综合网网站文件。为了制作方便，事先打开资源管理器，把要使用的图片收集到网站目录文件夹内。2、 在Dreamveaver“文件新建常规基本页HTML”，这样就建好了一个页面，英文版的默认的文件名为untitled.htm。中文版的的默认的文件名为“无标题文档”。htm就表示这个网页文件是一个静态的HTML文件。给它改名为index.htm。 （注：网站第一页的名字通常是index.htm或index.html。其它页面的名字可以自己取。）3、 在标题空格里输入名称“酸甜心情”，点击修改页面属性，打开“页面属性”窗口。在这里可以设置网站的标题、字体12像素、上下左右边距为6像素及背景颜色，超级链接的颜色，其他都保持默认即可。 3（ 注：在网页上最常用的是宋体字。在网页上打入空格的办法是：把输入法调为全角。在网页上换行的办法是：shift+Enter。只按Enter则为换段。）4、 绘制表格 在“插入表格”弹出对话框中选择3行2列的表格，确定后调整大小把光标放在第三行，点击鼠标右键“表格拆分单元格”各4列，则第三行有八列。5、 【插入标题文字】 进入页面编辑设计视图状态。在一般情况下，编辑器默认左对齐，光标在左上角闪烁，光标位置就是插入点的位置。如果要想让文字居中插入，点属性面板居中按钮即可。启动中文输入法输入“我的个人书屋畅读好书”。字小不要紧，可以对它进行设置。【设置文字的格式】 选中文字，在上图属性面板中将字体格式设置成默认字体，大小可任意更改字号。【设置文字的颜色】首先选中文字，在属性面板中，单击颜色选择图标，在弹出的颜色选择器中用滴管选取颜色即可。 【设置背景颜色】 背景可以是图片，也可以是颜色。打开背景颜色选择器进行选取。如果背景要设为图片，点击背景图象“浏览”按钮，系统弹出图片选择对话框，选中背景图片文件，点击确定按钮。 【插入图像】使用插入菜单：在“插入”菜单选“图像”，弹出“选择图像源文件”对话框，选中该图像文件，单击确定。一个图片就插入完毕了。 【添加MP3音乐】为网页添加背景音乐的方法一般有两种，第一种是通过普通的标签来添加，另一种是通过标签来添加。我使用标签添加mp3src:音乐文件的路径及文件名;autostart:true为音乐文件上传完后自动开始播放，默认为false(否)loop:true为无限次重播，false为不重播，某一具体值(整数)为重播多少次volume:取值范围为0-100，设置音量，默认为系统本身的音量starttime:分:秒，设置歌曲开始播放的时间，如，starttime=00:10，从第10开始播放endtime: 分:秒，设置歌曲结束播放的时间width:控制面板的宽height:控制面板的高controls:控制面板的外观controls=console/smallconsole/playbutton/pausebutton/stopbutton/volumeleverconsole:正常大小的面板smallconsole:较小的面板playbutton:显示播放按钮pausebutton:显示暂停按钮stopbutton:显示停止按钮volumelever:显示音量调节按钮hidden:为true时可以隐藏面板6、创建链接 主页下方一列导航文字，依次把各分类名全选，点击“超级链接”，选择要连接的网页名字即可。 图示 主页面源代码如下：酸甜星晴   我的个人书屋         暢讀好書               留言板 青春校園 玄幻小說 武俠修仙 都市言情 軍事歷史 散文詩歌 穿越小說 名著鉴赏 二、“留言板”页面的的创建：（一）、创建ASP的运行环境（安装IIS）IIS(Internet Information Service)是构建ASP站点所必须的，所以，我们应该先确认自己的电脑已安装了IIS信息服务，如果没有安装好的话，请按以下步骤：1、打开“控制面板”2、双击“添加/删除程序”3、单击“添加/删除Windows组件”，打开添加/删除Windows组件对话框：3、从下拉的列表中选择“Internet 信息服务(IIS)”单击“下一步”：4、出现组件安装进度窗口，按提示操作即可。直至最后安装完毕。5、安装并配置IIS，配置：右击我的电脑图标管理服务和应用程序Internet信息服务网站右击”默认网站”属性打开默认属性的对话框,点击主目录,把主目录改成站点所在文件夹。 （二）、设计数据库打开Acess程序后，出现一个对话框，这里我们选择第一个选项”空Access数据库”点击确定，弹出一个新建数据库的文件框，选择你上次你建的站点目录，起个data的文件名，点击创建，OK! 双击”使用设计器创建表”打开表创建窗口”如图：创建表的结构如下表：保存后关闭数据库，回到DW中继续。（3） 、制作留言页面利用DW制作如下页面：插入表单:在网页中添加表单对象，首先必须创建表单。表单在浏览网页中属于不可见元素。在动态网页中插入一个表单。当页面处于“设计”视图中时，用红色的虚轮廓线指示表单。如果没有看到此轮廓线，请检查是否选中了“查看”“可视化助理”“不可见元素”。（1）插入点放在希望表单出现的位置。选择“插入”“表单”，或选择“插入”栏上的“表单”类别，然后单击“表单”图标，（2）用鼠标选中表单，在属性面板上可以设置表单的各项属性。在“动作”文本框中指定处理该表单的动态也或脚本的路径。在“方法”下拉列表中，选择将表单数据传输到服务器的方法。 如图：更改各表单元素的名称及属性： 姓名：文本域名称=姓名；字符宽度=30；类型=单行；初始值可以不写 QQ：文本域名称=QQ；字符宽度=30；类型=单行；初始值可以不写 邮件: 文本域名称=邮件;字符宽度=30；类型=单行；内容：文本域名称=内容；字符宽度=37；行数=8；类型=多行；按钮名称可保持默认，留言按钮的值=留言；动作=提交表单 取消按钮的值=取消；动作=重设表单（四）、连接数据库:1 打开add.asp页面，点击应用程序面板上的数据库，点击其“+”号按钮2 自定义连接字符串3 打开自定义连接字符串面板，填写连接名称conn(可以随便起)4 填写连接字符串（固定不变的）：”Provider=Microsoft.Jet.OLEDB.4.0;Data Source=”&Server.MapPath(“/ly.mdb”) ，如 5 “Dreamweaver应连接”选“使用测试服务器上的驱动程序”6 测试连接是否成功,如(五）、成功创建连接脚本后，就要插入记录了选择add.asp页面服务器行为点击“+”按钮选择“插入记录”打开插入记录面板插入相应得记录，插入后转到index.asp页面，如（六）、打开index.html页面 服务器行为点击“+”按钮记录集（查询）打开记录集面板：如(图12) A、名称：re B、连接：conn C、表格：ly D、列：全部 E、筛选：无 F、排序：选择“id”,为“降序” 打开绑定面板进行插入记录，如（图13） a、“编号”后面插入“id”b、“留言者”后面插入“name”c、把“内容.”替换成记录集里的“内容”d、把“留言时间”替换成记录集里的“时间”e、把“回复内容”替换成记录集里的“回复”f、把“回复时间”替换成记录集里的“回复时间” 三、二三级网页制作同上： 设计图如下：6、 调试过程中出现的问题及相应解决办法: 在DW中，如何输入一个空格呢？DW中对空格输入的限制是针对“半角”文字状态而言的，因此通过将输入法调整到全角模式就可以避免了，方法是：打开中文输入法（以人工智能ABC为例），按Shift+Space切换到全角状态，就没问题了。“