简单网页设计----个人简介

天津城建大学

网站建设与管理专题报告

学

学

专生业

姓名号 名 称 11710115 路江飞 计算机 11卓越七班

年级 成班级 绩

2013年 11月

天津城建大学

设计性实验任务书

学院 姓名 路江飞 学号:11710115

课程名称： 网站建设与管理

设计题目： 个人网站的建设与管理 完成期限：自年 设计依据、要求及主要内容（可另加附页）：

1设计依据:

本课程设计是依据>为设计依据, 从技术、管理角度，掌握网站系统建设与管理的基础知识、网站规划设计、网站平台建设、网站系统管理、网站发布与维护、FTP服务器管理、索引服务器管理、网站数据库管理、网站安全管理以及网站宣传与推广等内容。

2设计要求:

1．遵守网站设计原则。

2．合理的、符合逻辑的网站结构。

3．网站内容要丰富、简洁明快、独具特色、保持统一的风格。要求图文并茂，颜色搭配合理。但是图片、动画、音频及视频文件不要太大。希望充分发挥各自的创造能力。

4．遵守网页设计规则。

5. 遵守网站技术规范。

一、设计与管理内容

设计一个主题为介绍性网页，通过网页把自己的一些观点介绍给大家，用自己所学习的网页知识来完成，使网页达到一定的效果，所包含的内容全面运用的网页知识丰富。

二、网站项目需求说明

登录模块：显示用户名和密码界面

主页模块：显示个人的简介和照片

收藏模块: 显示相册，包括三个相册，分别为>，>,

我的图片>>

梦想模块：显示自己对生活和以后工作的观点以及相应的图片和简单的视频

三、网站总体设计技术

首先构思出网页的大致结构，把网站分成若干个独立的页面，把每个页面划分成不同的模块，从网络上面下载资源，然后再主页上面建立相应的链接键，链接相关的内容。网页包括：登陆界面，主页，搜藏，信仰等模块，通过链接把这些子网页链接到主网页不同的模块上面，从而实现各个网页之间的联系和转换。

在网页中插入图片和flash使得网页更加的有活力，同时不同的模块选用不同的颜色字体使网页更有层次感。同时在不同的子网页中针对各个主题插入有符合主题的背景音乐进一步完善网站。

四、网站开发建设方案

1、整理规划

网站建设的开始就应该有一个整体的战略目标，即确定站点的目标。 首先要有一个总的目标，这个网站到底是要做什么。有的要显示自己的设计水平，这就要求页面美观；有的是为了求职而设计的求职网站，这就要求提供足够的信息让别人了解你的工作能力；有的是要为用户服务，这就要求网站有较强的互动性。确定好目标之后，需要注意的是在设计中要在不同的浏览器中浏览自己的网页，看看有没有发生变化。

2、新建站点 规划好站点之后，就可以用专门的网页开发软件创建站点了。在创建站点之前，我们应该首先在我们的磁盘上创建一个文件夹，用于存放站点内的所有资源，当然如果你的站点资源比较丰富这是可以建立子文件夹存放站点内相应的资源。创建站点：在Dreamweaver中执行【站点】|【新建站点】命令，弹出【未命名

站点1的站点定义为】对话框，这个对话框包括【基本】选项卡和【高级】选项卡。在对话框的【基本】选项卡中输入新建站点的名称，单击下一步，在弹出的对话框中设置站点的文件类型，单击下一步，在弹出的对话框中选择编辑站点文件的方法，并在下面的文本框中输入新建站点所知的目录。单击下一步，进入共享文件窗口，在“您如何选择连接到远程服务器？”，选择“无”。单击下一步，进入总结窗口，点击完成按钮，再次弹出“管理站点”对话框，在“管理站点”对话框中显示出新建本地站点的名称。单击完成，站点创建完成。

3、收集资源 确定好站点目标和结构之后，接下来要做的就是收集有关网站的资源，其中包括以下资源：

（1）文字资料：文字是网站的主题。无论是什么类型的网站，都要离不开叙述性的文字。离开了文字即使图片再华丽，浏览者也不知所云。所以要制作一个成功的网站，必须要提供足够的文字资料。

（2）图片资料：网站的一个重要要求就是图文并茂。如果单单有文字，浏览者看了不免觉得枯燥无味。文字的解说再加上一些相关的图片，让浏览者能够了解更多的信息，更能增加浏览者的印象。

（3）动画资料：在网页上插入动画可以增添页面的动感效果。现在Flash动画在网页上应用的相当多，所以建议大家应该学会Flash制作动画的一些知识。

（4）其它资料：例如网站上的应用软件，音乐网站上的音乐文件等等。

4、布局页面 设计站点结构和收集了足够的资源之后，就可以开始布局页面了。在Dreamweaver中，可以通过以下手段进行排版：

（1）利用表格进行排版：表格主要有三个元素－表格、行和列及单元格，而且表格还可以嵌套，不过在这里建议大家不要把所有的网页都放在一个大表格中，并且嵌套最好不要超过３层，因为如果你那样做了，浏览器解析的时间会增加了，那么当浏览者访问时速度就慢了。

（2）利用层排版：层很适合形式自由的排版，现在ＷＥＢ标准建议排版时

抛弃表格，不过如果初学者学习利用层排版时还要学习其它好多相关知识，其中最重要的是CSS和Javascript，使用CSS来辅助层可以对网页实现排版，可以解决表格给我们带来的烦恼。如果你对WEB标准感兴趣，那么你就该好好的学习CSS了！

（3）利用布局视图进行排版：在Dreamweaver MX 2004中有专门的布局视图，我们初学网页设计时可以使用它进行排版。

利用框架进行排版：它是一种用浏览器窗口，显示多个网页的形式，前几天记得有人在论坛中求，网页格式的课件，网页格式的课件大部分是用框架做出来的。

5、编辑文档与超级连接

经过上面的几个步骤之后，一切准备工作都已经就绪，现在可以象装箱一样把收集到的资料及制作的组件放到页面布局中为它们指定的位置上了。插入到网页布局之后，文字都是同一种字号，同一种风格，同一种颜色；图片有大有小。所以这时就要对各种元素进行编辑了，例如，改变文本字体、字号、颜色、大小等，对图片进行大小，表格的调整，按钮行为的调整等等！链接是网页的灵魂。浏览者在浏览网页时，单击网页设置的超级连接可以跳转到相关页面，所以一个好的网页是离不开连接的。

五、网站详细设计

1、ASP动态网页的设计步骤

1>建立个人站点文件夹（如：E:\University）

2>配置IIS：开始——控制面板——管理工具——Internet信息服务——默认网站——属性

(1)主目录：本地路径：E:\University

(2)文档：time.asp

3>启用Dreamrever 8.0建立站点：站点——新建站点——“高级”或站点——管理站点——编辑——“高级”

(1)本地信息：站点名称：myweb；本地根文件夹：E:\University

(2)测试服务器：服务器模型：ASP VBScript；访问：本地/网络。

4>在Deramrever中选择：文件——新建——动态页 ASP VBScript（文档类型：无）——创建

5>开始网页页面设计及代码编写等操作，将文件保存为.asp类型。

This page was crated at

on the computer rnuning asp

6>在internet信息服务器窗口中右键点击要浏览的网页文件，选择“浏览”，在打开的IE窗口中进行测试。

2、Access数据库连接的设计步骤

用ASP脚本连接到data数据库

>

Set cn=Server.Create(

Strcn=

Driver(*.mdb)};DBQ=

'连接数据库 data.mdb

cn.Open Strcn

set rs=cn.Execute(

if err.Number 0 then '判断数据库是否连接成功

ResPonse.Write

ResPonse.End

esle

ResPonse.Write

ResPonse.End

end if

%>

3、使用动态网页数据源的设计步骤

（1）创建ODBC数据源。

如果要在ASP中使用ADO组件对象数据库，首先要创建一个指向数据库的ODBC连接。在Windows系统中，ODBC的连接主要通过ODBC数据源管理器来完成。

创建ODBC数据源:执行【开始】|【控制面板】|【管理工具】|【数据源（ODBC）】命令，弹出【ODBC数据源管理器】对话框，然后选择【系统DSN】选项卡，在【系统DSN】选项卡中单击【添加】按钮，弹出【创建新数据源】对话框。在【创建新数据源】对话框中选择数据源的驱动程序Microsoft Access Driver（*.mdb），然后单击【完成】按钮，弹出【ODBC Microsoft Access安装】对话框。在【数据源名】文本框中输入要连接的数据源名，在【数据库】项中单击【选择】按钮，弹出【选择数据库】对话框，在此对话框中选择前面所创建的数据库。选好数据库后，单击【确定】按钮，回到【ODBC Microsoft Access安装】对话框，在此对话框中的【数据库】项中显示连接的数据库的路径，单击【确定】按钮，回到

【ODBC 数据源管理器】对话框，此时也就创建好了ODBC数据源的连接了。

（2）创建DSN连接。

DSN即数据源名称。它表示将应用程序和某个数据库连接的信息集合。ODBC数据源管理器使用该信息来创建数据库的连接，通常DSN可以保存在文件或注册表中。实际上创建ODBC连接，就是创建同DSN的连接。当创建了指向数据库的ODBC连接后，同该数据库连接的有关信息就被保存在了DSN中，而在程序中如果要操作数据库，也必须通过DSN来进行。

在Dreamweaver 8中来创建DSN的连接。首先打开Dreamweaver 8，执行【窗口】|【数据库】命令，打开【数据库】面板，然后单击加号按钮，从弹出菜单中选择【数据源名称（DSN）】命令，弹出【数据源名称（DSN）】对话框，在此对话框中的【连接名称】文本框中输入连接数据库名称，在【数据源名称（DSN）】下拉列表中选择数据源，然后单击【测试】按钮，如果成功，会弹出成功创建连接脚本提示信息。此时数据库也就连接好了。在【数据源名称（DSN）】对话框中单击【确定】按钮，回到【数据库】面板，这是就可以看到创建的数据源了。

4.登录模块的界面：

5.主页模块的界面：

6.收藏模块的界面

7.理想模块的主要界面：

六、网站测试与发布

1 登录测试

测试内容：打开首页后，是否显示相应的界面。

操作：打开首页查看。

结果：相应的界面显示出来。

结论：测试成功。

2 主页测试

测试内容：是否显示自己的信息

操作：点击主页按钮

结果：显示出自己的正确信息

结论：测试成功

3 收藏测试

测试内容：是否显示相册。

操作：点击收藏按扭，点击相册

结果：显示相册信息，显示每个相册的照片

结论：测试成功

4 理想测试

测试内容：是否显示正确的图片和正确的文字。

操作：点击理想按钮

结果：显示出正确的图片和文字。

结论：测试成功

七、网站系统管理

八、设计体会（要求宋体四小）

通过这次课程设计，我了解了一个网站形成的基本过程和基本纲领构架，加深了我对动态网站的认识，相信这些知识都将对我的学习带来很大的帮助。这次设计个人博客网站，对我来说是一个将所学知识从书本运用到实际操作的宝贵次

体验。在设计过程中我学会了很多，也感到自身知识的贫乏，同时也认识到了理论与实践间存在的巨大差距，有些看上去很简单的问题，在动手去实践时却未必会顺利。一味的啃书并非是好的。只有理论与实践相结合，才能更快的进步，学到更多的知识。希望在今后的努力中能做出更完善的设计。

同时，通过这次课程设计，我们对一个动态网站从设计到功能的实现有了一个更全面的理解。同时老师和同学的相互讨论促使我们对课本上的知识理解得更加全面，并且将其运用到实践中。培养了我们的团队协作解决问题的能力。在这次课设中遇到好多书上没有提到的问题，通过运用书上的知识，并且将其加以现实化，解决了这些问题，提高了我们独立思考解决问题的能力。这一切，都将成为我以后工作中的一笔很大的财富，也为以后走上工作岗位打下了基础。

九、参考资料

[1] 张强等编著. 网页制作与开发教程.北京：人民邮电出版社，2008

[2] 何东健，朱俊平等编著. 网页设计与Web编程.西安：西安交通大学出版社，2007

[3] 张正礼，王坚宁.ASP.Net 4.0从入门到精通.北京：清华大学出版社,2011

[4] 俞传正．基于博客的个人知识管理平台研究．天津：天津师范大学，2006

[5] VB程序设计之网络编程[M].北京：清华大学出版社,2006,3.

[6] VBscript并发编程—设计原则与模式[M].北京:中国电力出版社,2004,1. [7] 耿祥义，张跃平.VB实用教程.清华大学出版社.2003.1