个人网页制作论文.docx

个人网页制作论文.docx

《个人网页制作论文.docx》由会员分享，可在线阅读，更多相关《个人网页制作论文.docx（24页珍藏版）》请在冰点文库上搜索。

个人网页制作论文

2.3网站设计理念…………………………………………………………………………………5

2.4数据库的建立…………………………………………………………………………….5

摘要

在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。

因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。

为了让更多客人了解不同信息的情况，提高信息共享度。

所以，开发公司文化网站。

关键词：

公司主页，HTML技术

第一章引言

第一章开发工具和运行环境

1.1网站设计的基本知识

静态编程最重要的特征就是由程序自动生成网页，最终形成供浏览器解释的HTML。

设计出精美的网页以及动态更新交互的站点，需要网页编程与网页制作相结合。

主要介绍网站建设所必须掌握的基础知识，如网页文档的结构、超链接、表格和表单等基本的HTML标识的写法要求，网页编辑的常用工具，动态网站项目工程的设计步骤要求，以及网站的发布与维护、网站的主机方案等相关知识。

1.2Dreamweaver简介

Dreamweaver是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件，随着Dreamweaver8的发布，更坚定Dreamweaver在该领域的地位。

它集网页设计、网站开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性，是目前网站设计、开发、制作的首选工具。

突出的特点主要有灵活的编写方式；可视化编辑界面；功能更多的CSS支持——CSS可视化设计、CSS检查工具；动态跨浏览器验证；强大的WEB站点管理功能；内建的图形编辑引擎；丰富的媒体支持能力等。

它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

开发人员可以使用Dreamweaver及所选择的服务器技术来创建功能强大的Internet应用程序，从而使用户能连接到数据库、Web服务和旧式系统。

开发环境支持HTML、ASP、ASP.NET、JSP等，提供众多功能强大的可视化设计工具、应用开发环境以及代码编辑支持。

主要用于素材整理、排版以及后台程序的交互。

1.3HTML简介

全称：

HyperTextMark-upLanguage

译称：

超文本标记语言。

简意：

一种为普通文件中某些字句加上标识的语言，其目的在于运用标记（tag）合文件达到预期的效果。

HTML是在SGML定义下的一个描述性的语言，或可说HTML是SGML的一个应用程式。

HTML不是程式语言，它只是标记语言，基本上你只要明白了各种标记的用法便算学懂了HTML，HTML的格式非常简单，只是由文字及标记组合而成，于编辑部方面，任何文字编辑器都市可以，只要能将档案存为文本格式即可，用专门的网页编辑工具当然更好。

1.4HTML技术介绍

Macromedia公司的RoundtripHTML技术让用户可以随意导入HTML文件而无需重新设置代码格式，用户还可以利用Dreamweaver清除或重新格式化HTML代码，实现代码的优化。

利用Dreamweaver，可以方便地使用动态HTML功能，却不需要写一行行的代码；利用它还可以检查作品在所有流行的平台和浏览器中可能发生的错误。

当然,如果不用DW的话,同样可以制作出非常棒的网站来,其实什么样的程序或者HTML代码都可以直接用记事本来写,只不过DW实现起来确实方便一些吧,还有一些其他的网页编辑工具,比如微软的Frontpage等等,只是想说明一下,做网站,DW很好用，但是不是必须的!

为交流提供综合的网络环境，同时也为个人的宣传，发展，提供了一个平台。

存在的问题：

该网站的建设也牵涉到了动态网页的制作，这成了制作过程中的难点，就我个人而言，对动态网页的制作方面还缺少很多的理论与实际操作知识，曾经只是做一些简单的个人主页，仅此而已，需要深入的学习ASP方面内容和网页三剑客。

  主要研究内容：

个人网站设计使用动态网页的设计，提供日志、歌曲欣赏、访客留言等功能。

第二章需求分析

2.1系统概述

在现今的信息共享的时代，网络信息化管理工作系统经信息量大、数据准确、速度快、管理工作全面等特点在现实生活中得到广泛地应用。

互联网商业的普及应用已经成为网络经济的大势所趋。

本章介绍的回族文化网站是建立在用户和民族信息之间的，用户可以方便、快捷地查找到自己所需要了解的有关于回族的信息，可以足不出户就能了解到回族这一个民族的基本信息，从而提高自己的阅历以及在以后生活中能够有需要的去体验民族风情。

由于本人的知识水平有限，实际的经验也不足，所以所制作出来的作品有许多的不足和漏洞，希望老师提出宝贵的意见和批评。

2.2系统的可行性分析

（1）实用性

网站的宗旨是根据用户需求的有关公司信息和公司现今形势。

（2）技术性

网站提供给客户了了解公司的基本信息和各种产品信息，使客户能够更好的在本站内了解大元公司。

（3）经济性

网站能够提供给致力于推广大元公司文化的来达到所能达到的经济效益，并且能够达到预期的推广效果。

2.2软件介绍

该个人网站所使用的软件有：

网页三剑客，ASP程序设计语言，ACCESS数据库，PhtososhopCS。

2.3网站设计理念及设计思路

在Internet发展迅速的今天，博客，个人空间，个人主页都是非常流行的展示自我，和联系朋友的平台，而我也即将面临毕业，大家以后的联系很可能会因为各自的事业而很少联系，每当自己工作很累的时候如果能打开自己的网站听听自己喜欢的歌曲，看到朋友的留言是一件非常舒心解累的事情，每当自己在生活上遇到心烦郁闷的事的时候，也可以在自己的个人网站上发发牢骚，让自己的心灵能够得到解放。

每当自己想念家人朋友的时候，能够打开自己的个人网站看看家人朋友的照片，我相信回忆也是一件很美好的事情。

所以我就想做个属于自己的个人网站。

网站主页的设计主要是网页设计软件的操作与技术应用的问题。

但是，要使主页设计、制作得美观大方、切合主题，必然离不开对主页进行艺术的加工和处理。

在动手制作之前思考整个网站的风格和创意。

网站主页的风格是浏览者对整个网站的普遍的感觉，是主页的版式、色调及图文组合的高度抽象。

我的个人网站的主要内容包括以下几个板块：

个人网站首页，自己的资料的页面，日志心情，相册，留言板，收集，链接和登陆。

色彩，网站风格之魂、创意之先锋。

主页的风格我配上比较淡的墨绿色衬托，在视觉上给人一种比较神秘的感觉，然后后面衬托一张夏之回忆的日出图。

黎明，拥有一天中最纯净、最清澈、最让人激动的光线，那是生命最易受鼓舞、最能添置信心和渴望的时刻，日出象征着生命的开始而我们即将毕业对于社会我们也是一个开始。

点击进入页面后，整体界面我采用的依然是淡墨绿的背景颜色而其他的颜色选择了经典黑白的主题颜色，黑白相间的调子简洁明快，给人一种大方得体的感觉，让人觉得非常的舒适，在标题栏下方的图片都是花朵树木的图片，盛开着的花朵象征着祖国以后的繁华发展寓意着我们的未来越来越美好。

导航条上的字体用的是传统的黑体，其他的页面都是运用此页的模板制作。

第三章规划设计过程

3.1总体设计及功能模块划分

每个网站都是一项庞大的工程。

好比造高楼，没有设计图纸，规划好结构，盲目的建造，结果往往是倒塌；也好比写文章，构思好提纲，才不至于逻辑混乱，虎头蛇尾。

全面仔细规划架构好自己网站，不要急于求成。

规划一个网站，可以用树状结构先把每个页面的内容大纲列出来，尤其当要制作一个很大的网站（有很多页面）的时候，特别需要把这个架构规划好，功能模板如下图：

3.2设计制作过程

1、确定计划设计的风格以及中心意图

2、构造总体框架

3、收集网页设计制作的所有信息资料，素材。

4、整理信息资料、素材。

把相关的信息准备好。

5、利用各种工具开始制作首页。

从色彩的搭配，和总体的框架入手，有条不紊的进行。

对于主页版面布局的我主要依据如下几条原则来做：

1.主次分明，中心突出。

在一个页面上，必然考虑视觉的中心，这个中心一般在屏幕的中央，或者在中间偏上的部位。

因此，一些重要的文章和图片一般可以安排在这个部位，在视觉中心以外的地方就可以安排那些稍微次要的内容，这样在页面上就突出了重点，做到了主次有别。

下面的首页页面就是用的这样的说明来做的，视觉的中心点做了个超链接联到下个页面，使得整体效果看上去非常明了。

首页

2.大小搭配，相互呼应。

较长的文章或标题，不要编排在一起，要有一定的距离，同样，较短的文章，也不能编排在一起。

对待图片的安排也是这样，要互相错开，造成大小之间有一定的间隔，这样可以使页面错落有致，避免重心的偏离。

下面的心情日志页面就是这样设计的，较长的文章或标题，不要编排在一起，要有一定的距离，同样，较短的文章，也不能编排在一起。

我的心情日志里面的文章就是这样做的。

将可编辑区域一，二换成自己所需要的图片，然后做的就是在可编辑区域三内编辑自己所需要的内容，关于里面内容的制作，先创建若干个模板页，再将日志的内容打入，做超链接将各网页连接好。

之后在每个日志页面做好返回按纽。

3.图文并茂，相得益彰。

文字和图片具有一种相互补充的视觉关系，页面上文字太多，就显得沉闷，缺乏生气。

页面上图片太多，缺少文字，必然就会减少页面的信息容量。

因此，最理想的效果是文字与图片的密切配合，互为衬托，既能活跃页面，又使主页有丰富的内容。

相片展示页就是按照上述方法做的，我的相册页面上文字和图片密切配合，既能活跃页面又整洁了页面，使人看上去一目了然，不会繁杂。

将可编辑区域一，二换成自己所需要的图片，然后在自己的图片根目录里将自己以收集的照片新建文件夹，接着运用命令里的创建网络相册，利用fireworks,将图片都换成100*100格式大小的图片，然后在可编辑区域3内插入一个2行5列的表格，将创建好的100*100格式大小的图片插入进去，再给相片弄下名字，之后设置图片的超连接，点击小图片可以出现圆图大小的图片。

在每个大图的页面做上返回按钮，系统将回到原相册页面。

关于about页面模板的做法如下：

其制作方法：

首先将背景色选取为墨绿色，然后插入表格，将所做好的图片依次插入，导航及logo都是自己利用photoshop制作，个人资料里的字体是汉仪丫丫体，大小24号。

导航上的关于，日志，心情，相册，收集，链接，留言板，登陆都用了行为里的交换图片功能。

所有的都用的居中对齐，其宽度为802。

然后将该页面运用做成模板，接着设置模板的可编辑区域，

此为可编辑区域一。

此为可编辑区域二。

此为可编辑区域三。

然后利用模板制作其他页面。

其他的页面就不一一做介绍，其做法都和以上一样，都是合理利用视觉的审美。

留言板页面：

此页面是运用asp制作的。

1．ASP是一个服务器的脚本环境，内嵌在HTML页面中的脚本程序在这里运行并建立Web服务器应用程序。

在ASP脚本中可以通过三种方式访问数据库：

传统的IDC（InternetDatabaseConnector）、ADO（ActiveXDataObject）和RDS（RemoteDataServer）。

其中ADO是ASP内置的数据库存取组件，各种脚本和语言均可调用它实现对数据库的直接访问，并利用相应的数据接口显示查询结果。

ADO拥有强大的活力，它是位于ODBC和OLEDB之上的高性能数据库操作接口，提供了开放的数据操作对象模型，允许开发人员使用任何语言和统一的编程模式操作各种与ODBC和OLEDB兼容的数据库，如MicrosoftAccess、FoxPro、MicrosoftSQLServer、Oracle等。

ADO的简单易行、应用广泛使之成为ASP访问数据库所采用的最佳选择。

这种对数据库的访问方式是由InternetInformationServer来完成的。

执行过程如图所示：

A）浏览器：

用户通过Web浏览器用HTTP协议向Internet信息服务器（IIS）发出请求。

B）服务器：

服务器检查网页文件的类型，对扩展名是.asp的文件服务器调用ASP系统程序，解释执行被请求页面文件的所有脚本命令。

若脚本中含有对数据库的请求，服务器就执行连接访问数据库的操作，并将结果以HTML格式送回用户浏览器作为响应。

C）数据库：

储存了动态交互所需的信息数据，用户可通过指令对其进行查询、修改、添加、删除等操作。

然后是根据对该系统做出的整体的分析和设计，开始在FRONTPAGE环境下使用HTML、VBScript、JavaScript等语言相互嵌套进行系统开发设计，通过ADO——ActiveXDataObjects，将程序语言ASP与数据库ACCESS建立连接，以实现相关功能。

另外辅助使用Photoshop等处理软件做界面的优化设计工作。

其代码如下：

privateDataTabledodatabind（stringsql,stringcountsql,intpagenum）

{

stringconnstr="Provider=Microsoft.Jet.Oledb.4.0;DataSource="+Server.MapPath（System.Configuration.ConfigurationSettings.AppSettings["DBPath"]）+";";

OleDbConnectionconn=newOleDbConnection（connstr）;

conn.Open（）;

//计算留言总数

intrecnum;

OleDbCommandcmd=newOleDbCommand（countsql,conn）;

OleDbParameterparm=cmd.Parameters.Add（"@keyword",OleDbType.WChar）;

parm.Value="%"+searchlabel.Text+"%";

parm.SourceVersion=DataRowVersion.Original;

OleDbDataReaderdr=cmd.ExecuteReader（）;

if（dr.Read（））

recnum=dr.GetInt32（0）;

else

recnum=0;

dr.Close（）;

//计算留言总页数

intallpage=（（recnum%pagesize）==0）?

（recnum/pagesize）:

（（recnum/pagesize）+1）;

//显示留言

DataSetds=newDataSet（）;

cmd=newOleDbCommand（sql,conn）;

parm=cmd.Parameters.Add（"@keyword",OleDbType.WChar）;

parm.Value="%"+searchlabel.Text+"%";

parm.SourceVersion=DataRowVersion.Original;

OleDbDataAdapterda=newOleDbDataAdapter（）;

da.SelectCommand=cmd;

intstartnum=（pagenum-1）*pagesize;

da.Fill（ds,startnum,pagesize,"content"）;

//Response.Write（startnum）;

//Response.Write（pagenum）;

（（repeat）this.FindControl（"Repeat1"））.DT=ds.Tables["content"];

//显示状态

pagesizelabel.Text=pagesize.ToString（）;

countnum.Text=recnum.ToString（）;

nowpagelabel.Text=pagenum.ToString（）;

allpagenumbabel.Text=allpage.ToString（）;

nextpage.Enabled=!

（Boolean）（pagenum>=allpage）;

prepage.Enabled=!

（Boolean）（pagenum<=1）;

//关闭连接

conn.Close（）;

conn.Dispose（）;

cmd.Dispose（）;

da.Dispose（）;

ds.Dispose（）;

returnds.Tables["content"];

}

privatevoidPage_Load（objectsender,System.EventArgse）

{

//在此处放置用户代码以初始化页面

代码如下：

privatevoidsubmit_Click（objectsender,System.EventArgse）

{

if（Page.IsValid==true）

{

//创建数据库连接

stringdbpath=Server.MapPath（System.Configuration.ConfigurationSettings.AppSettings["DBPath"]）;

stringconnstr="Provider=Microsoft.Jet.Oledb.4.0;DataSource="+dbpath;

OleDbConnectionconn=newOleDbConnection（connstr）;

conn.Open（）;

//更新数据库，写入留言

stringsql=String.Format（"insertintocontent（username,DTime,cont,email）values（@userkname,'{1}',@content,'{3}'）","",DateTime.Now,"",email.Text）;

OleDbCommandupdatecomm=newOleDbCommand（sql,conn）;

updatecomm.Parameters.Add（"@userkname",OleDbType.VarChar,20）.Value=username.Text;

updatecomm.Parameters.Add（"@content",OleDbType.WChar）.Value=content.Text;

updatecomm.ExecuteNonQuery（）;

//关闭数据库连接

conn.Close（）;

conn.Dispose（）;

Response.Redirect（"default.aspx"）;

}

}

删除留言代码：

stringaction;

intid;

//创建数据库连接

OleDbConnectionconn;

DataSetds=newDataSet（）;

privatevoidPage_Load（objectsender,System.EventArgse）

{

//打开数据库连接

stringconnstr="Provider=Microsoft.Jet.Oledb.4.0;DataSource="+Server.MapPath（System.Configuration.ConfigurationSettings.AppSettings["DBPath"]）+";";

conn=newOleDbConnection（connstr）;

conn.Open（）;

//页面初始化

if（!

IsPostBack）

{

action=Page.Request.QueryString["action"];

id=System.Convert.ToInt32（Page.Request.QueryString["id"]）;

guestid.Text=Page.Request.QueryString["id"];

if（（action=="del"）&&（id>0））

{

（（repeat）this.FindControl（"Repeat1"））.ContentID=this.id.ToString（）;

（（repeat）this.FindControl（"Repeat1"））.Action=this.action.ToString（）;

}

else

Response.End（）;

}

//在此处放置用户代码以初始化页面

}

#regionWeb窗体设计器生成的代码

overrideprotectedvoidOnInit（EventArgse）

{

//

//CODEGEN:

该调用是ASP.NETWeb窗体设计器所必需的。

//

InitializeComponent（）;

base.OnInit（e）;

}

///

privatevoidInitializeComponent（）

{

this.Button1.Click+=newSystem.EventHandler（this.Button1_Click）;

this.Load+=newSystem.EventHandler（this.Page_Load）;

}

#endregion

privatevoidButton1_Click（objectsender,System.EventArgse）

{

if（adminpass.Text==System.Configuration.ConfigurationSettings.AppSettings["PassWord"]）

{

OleDbCommandcmd=newOleDbCommand（"delete*fromcontentwhereID="+guestid.Text,conn）;

cmd.ExecuteNonQuery（）;

cmd.Dispose（）;

conn.Close（）;

conn.Dispose（）;

Response.Redirect（"default.aspx"）;

}

el