1、 天 津 城 建 大 学网站建设与管理专题报 告 学 号 11710115学 生 姓 名 路 江 飞专 业 名 称 计 算 机年 级 班 级 11 卓 越 七 班成 绩2013 年 11 月天津城建大学设计性实验任务书计算机与信息工程 学院 计算机 专业 卓越七 班 姓名 路江飞 学号:11710 115 课程名称： 网站建设与管理 设计题目： 个人网站的建设与管理 完成期限：自 2013 年 9 月 21 日至 2013 年 11 月 9 日设计依据、要求及主要内容（可另加附页）：1 设计依据:本课程设计是依据为设计依据, 从技术、管理角度，掌握网站系统建设与管理的基础知识、网站规划设计、网
2、站平台建设、网站系统管理、网站发布与维护、FTP 服务器管理、索引服务器管理、网站数据库管理、网站安全管理以及网站宣传与推广等内容。2 设计要求:1遵守网站设计原则。2合理的、符合逻辑的网站结构。3网站内容要丰富、简洁明快、独具特色、保持统一的风格。要求图文并茂，颜色搭配合理。但是图片、动画、音频及视频文件不要太大。希望充分发挥各自的创造能力。 4遵守网页设计规则。 5. 遵守网站技术规范。一、设计与管理内容设计一个主题为介绍性网页，通过网页把自己的一些观点介绍给大家，用自己所学习的网页知识来完成，使网页达到一定的效果，所包含的内容全面运用的网页知识丰富。二、网站项目需求说明 登录模块：显示用
3、户名和密码界面主页模块：显示个人的简介和照片收藏模块: 显示相册，包括三个相册，分别为，,梦想模块：显示自己对生活和以后工作的观点以及相应的图片和简单的视频三、网站总体设计技术 首先构思出网页的大致结构，把网站分成若干个独立的页面，把每个页面划分成不同的模块，从网络上面下载资源，然后再主页上面建立相应的链接键，链接相关的内容。网页包括：登陆界面，主页，搜藏，信仰等模块，通过链接把这些子网页链接到主网页不同的模块上面，从而实现各个网页之间的联系和转换。在网页中插入图片和 flash 使得网页更加的有活力，同时不同的模块选用不同的颜色字体使网页更有层次感。同时在不同的子网页中针对各个主题插入有符合
4、主题的背景音乐进一步完善网站。四、网站开发建设方案 1、整理规划网站建设的 开始就应该 有一个整体 的战略目标 ，即确定站点 的目标。首先要有一 个总的目标 ，这个网站到 底是要做什 么。有的要显示 自己的设计 水平，这就要求页 面美观；有的是为了 求职而设计 的求职网站 ，这就要求提供足够的信 息让别人了 解你的工作 能力；有的是要为 用户服务，这就要求网 站有较强的 互动性。确定好目标 之后，需要注意的 是在设计中 要在不同的 浏览器中浏 览自己的网 页，看看有没有 发生变化。 2、新建站点规划好站点 之后，就可以用专 门的网页开 发软件创建 站点了。在创建站点之前，我们应该首 先在我们的
5、 磁盘上创建 一个文件夹 ，用于存放站 点内的所有资源，当然如果你 的站点资源 比较丰富这 是可以建立 子文件夹存 放站点内相 应的资源。创建站点：在 Dreamweaver 中执行 【站点】|【新建站点】命令，弹出【未命名站点 1 的站点定 义为】对话框，这个对话框 包括【基本】选项卡和【高级】选项卡。在对话框的 【基本】选项卡中输 入新建站点 的名称，单击下一步 ，在弹出的对 话框中设置 站点的文件 类型，单击下一步 ，在弹出的对 话框中选择 编辑站点文 件的方法，并在下面的 文本框中输 入新建站点 所知的目录 。单击下一步 ，进入共享文 件窗口，在“您如何选择 连接到远程 服务器？” ，
6、选择“无” 。单击下一步 ，进入总结窗 口，点击完成按 钮，再次弹出“管理站点”对话框，在“管理站点”对话框中显 示出新建本 地站点的名 称。单击完成，站点创建完 成。3、收集资源确定好站点 目标和结构 之后，接下来要做 的就是收集 有关网站的 资源，其中包括以 下资源：（1）文字资料：文字是网站 的主题。无论是什么 类型的网站 ，都要离不开叙述性的文 字。离开了文字 即使图片再 华丽，浏览者也不 知所云。所以要制作一个成功的 网站，必须要提供 足够的文字 资料。（2）图片资料：网站的一个 重要要求就 是图文并茂 。如果单单有 文字，浏览者看了 不免觉得枯 燥无味。文字的解说 再加上一些 相关
7、的图片 ，让浏览者能够了解更多 的信息，更能增加浏 览者的印象 。（3）动画资料：在网页上插 入动画可以 增添页面的 动感效果。现在 Flash动画在 网页上应用 的相当多，所以建议大 家应该学会 Flash制作动画的 一些知识。（4）其它资料：例如网站上 的应用软件 ，音乐网站上 的音乐文件 等等。4、布局页面设计站点结 构和收集了 足够的资源 之后，就可以开始 布局页面了 。在Dreamweaver 中，可以通过以 下手段进行 排版：（1）利用表格进 行排版：表格主要有 三个元素表格、行和列及单 元格，而且表格还 可以嵌套，不过在这里 建议大家不 要把所有的 网页都放在 一个大表格 中，并
8、且嵌套最 好不要超过 层，因为如果你 那样做了，浏览器解析 的时间会增 加了，那么当浏览 者访问时速 度就慢了。（2）利用层排版 ：层很适合形 式自由的排 版，现在 标准建议排 版时抛弃表 格，不过如果初 学者学习利 用层排版时 还要学习其 它好多相关 知识，其中最重要 的是 CSS和 Javascript，使用 CSS来辅助层可 以对网页实 现排版，可以解决表 格给我们带 来的烦恼。如果你对 WEB 标准感 兴趣，那么你就该 好好的学习 CSS 了！（3）利用布局视 图进行排版 ：在 Dreamweaver MX 2004 中 有专门的布 局视图，我们初学网 页设计时可 以使用它进 行排版。
9、利用框架进 行排版：它是一种用 浏览器窗口 ，显示多个网 页的形式，前几天记得 有人在论坛 中求，网页格式的 课件，网页格式的 课件大部分 是用框架做出来的。5、编辑文档与 超级连接经过上面的 几个步骤之 后，一切准备工 作都已经就 绪，现在可以象 装箱一样把 收集到的资 料及制作的 组件放到页 面布局中为 它们指定的 位置上了。插入到网页 布局之后，文字都是同 一种字号，同一种风格 ，同一种颜色 ；图片有大有 小。所以这时就 要对各种元 素进行编辑 了，例如，改变文本字 体、字号、颜色、大小等，对图片进行 大小，表格的调整 ，按钮行为的 调整等等！链接是网页 的灵魂。浏览者在浏 览网页时，单
10、击网页设 置的超级连 接可以跳转 到相关页面 ，所以一个好 的网页是离 不开连接的 。五、网站详细设计 1、ASP 动态网页的设计步骤1建立个人站点文件夹（如：E:University）2配置 IIS：开始控制面板管理工具Internet 信息服务默认网站属性(1)主目录：本地路径：E:University(2)文档：time.asp3启用 Dreamrever 8.0 建立站点：站点新建站点“高级”或站点管理站点编辑“高级”(1)本地信息：站点名称：myweb；本地根文件夹：E:University(2)测试服务器：服务器模型：ASP VBScript；访问：本地/网络。4在 Deramre
11、ver 中选择：文件新建动态页 ASP VBScript（文档类型：无）创建5开始网页页面设计及代码编写等操作，将文件保存为.asp 类型。This page was crated aton the computer rnuning asp6在 internet 信息服务器窗口中右键点击要浏览的网页文件，选择“浏览”，在打开的 IE 窗口中进行测试。2、Access 数据库连接的设计步骤 用 ASP 脚本连接到 data 数据库0 then 判断数据库是否连接成功ResPonse.Write“数据库连接失败“ResPonse.EndesleResPonse.Write“数据库连接失败“ResP
12、onse.Endend if%3、使用动态网页数据源的设计步骤 （1）创建 ODBC 数据源。如果要在 ASP 中使用ADO 组件对象数据库，首先要创建一个指向数据库的ODBC 连接。在 Windows 系统中，ODBC 的连接主要通过 ODBC数据源管理器来完成。创建 ODBC 数据源:执行【开始】|【控制面板】|【管理工具】|【数据源（ODBC） 】命令，弹出【ODBC 数据源管理器】对话框，然后选择【系统 DSN】选项卡，在【系统 DSN】选项卡中单击【添加】按钮，弹出【创建新数据源】对话框。在【创建新数据源】对话框中选择数据源的驱动程序 Microsoft Access Driver（
13、*.mdb） ，然后单击【完成】按钮，弹出【ODBC Microsoft Access 安装】对话框。在【数据源名】文本框中输入要连接的数据源名，在【数据库】项中单击【选择】按钮，弹出【选择数据库】对话框，在此对话框中选择前面所创建的数据库。选好数据库后，单击【确定】按钮，回到【ODBC Microsoft Access 安装】对话框，在此对话框中的【数据库】项中显示连接的数据库的路径，单击【确定】按钮，回到【ODBC 数据源管理 器】对话框，此时也就创建好了 ODBC 数据源的连接了。（2）创建 DSN连接。DSN 即数据源名称。它表示将应用程序和某个数据库连接的信息集合。ODBC 数据源管
14、理器使用该信息来创建数据库的连接，通常 DSN可以保存在文件或注册表中。实际上创建ODBC 连接，就是创建同DSN 的连接。当创建了指向数据库的ODBC 连接后，同该数据库连接的有关信息就被保存在了 DSN 中，而在程序中如果要操作数据库，也必须通过DSN 来进行。在 Dreamweaver 8 中来创建DSN 的连接。首先打开 Dreamweaver 8，执行【窗口】|【数据库】命令，打开【数据库】面板，然后单击加号按钮，从弹出菜单中选择【数据源名称（DSN） 】命令，弹出【数据源名称（DSN） 】对话框，在此对话框中的【连接名称】文本框中输入连接数据库名称，在【数据源名称（DSN） 】下拉
15、列表中选择数据源，然后单击【测试】按钮，如果成功，会弹出成功创建连接脚本提示信息。此时数据库也就连接好了。在【数据源名称（DSN） 】对话框中单击【确定】按钮，回到【数据库】面板，这是就可以看到创建的数据源了。4.登录模块的界面：5.主页模块的界面：6.收藏模块的界面7.理想模块的主要界面：六、网站测试与发布 1 登录测试 测试内容：打开首页后，是否显示相应的界面。 操作：打开首页查看。 结果：相应的界面显示出来。 结论：测试成功。 2 主页测试 测试内容：是否显示自己的信息 操作：点击主页按钮 结果：显示出自己的正确信息结论：测试成功 3 收藏测试测试内容：是否显示相册。 操作：点击收藏按扭
16、，点击相册结果：显示相册信息，显示每个相册的照片结论：测试成功 4 理想测试 测试内容：是否显示正确的图片和正确的文字。操作：点击理想按钮结果：显示出正确的图片和文字。 结论：测试成功 七、网站系统管理八、设计体会（要求宋体四小）通过这次课程设计，我了解了一个网站形成的基本过程和基本纲领构架，加深了我对动态网站的认识，相信这些知识都将对我的学习带来很大的帮助。这次设计个人博客网站，对我来说是一个将所学知识从书本运用到实际操作的宝贵次体验。在设计过程中我学会了很多，也感到自身知识的贫乏，同时也认识到了理论与实践间存在的巨大差距，有些看上去很简单的问题，在动手去实践时却未必会顺利。一味的啃书并非是
17、好的。只有理论与实践相结合，才能更快的进步，学到更多的知识。希望在今后的努力中能做出更完善的设计。 同时，通过这次课程设计，我们对一个动态网站从设计到功能的实现有了一个更全面的理解。同时老师和同学的相互讨论促使我们对课本上的知识理解得更加全面，并且将其运用到实践中。培养了我们的团队协作解决问题的能力。在这次课设中遇到好多书上没有提到的问题，通过运用书上的知识，并且将其加以现实化，解决了这些问题，提高了我们独立思考解决问题的能力。这一切，都将成为我以后工作中的一笔很大的财富，也为以后走上工作岗位打下了基础。九、参考资料 1 张强等编著. 网页制作与开发教程.北京：人民邮电出版社，2008 2 何东健，朱俊平等编著. 网页设计与Web 编程.西安：西安交通大学出版社，20073 张正礼，王坚宁.ASP.Net 4.0 从入门到精通.北京：清华大学出版社,20114 俞传正基于博客的个人知识管理平台研究天津：天津师范大学，2006 5 VB 程序设计之网络编程M.北京：清华大学出版社,2006,3. 6 VBscript 并发编程设计原则与模式M.北京:中国电力出版社,2004,1. 7 耿祥义，张跃平.VB 实用教程.清华大学出版社.2003.1
