网页设计与网站建设.docx

1、网页设计与网站建设目录一 设计的思路.1 二 网站的总体风格 .1 三 网站的分析与设计.1 四 规划站点. .1 五 网页制作步骤. 2 5.1创建站点 .2 5.2首页的布局.3 5.3制作其它页面.4 5.4制作联系我们的网页. 4 5.5设为首页、我的信箱、加为收藏夹.5 5.6制作在线人数.5 5.6制作聊天室.5 六 数据库的创建.6 6.1 SQL数据库的创建.6 6.2 数据库连接.6 七.实验中的错误和怎样解决的. .7 八.设计总结 .7 九.参考资料 .7 一 设计的思路 我所设计的班级网站主要是以绿色为主色调，以淡色为辅。主要是希望所有的朋友看到这个空间能一种和谐、安宁

2、、充满生机的感觉，得到心灵的慰藉！ 二 网站的总体风格 网站的总体风格主要是以绿色为主，以淡色为辅，充满活力，生机。具有个 性色彩。 网站的布局其实很简单，主要是做好一个模版，模版做好框架了，那网站就初步形成了，虽然主要框架做好了，但是也不要高兴得太早哦，但是你也要想清楚怎样把整个界面搭配得更具有个性化。首先，在框架的最top要插入一个能体现你个人网站的主图。然后在主图的下面插入按钮导航条，之后下面就插入自己想要的风格，虽然用模版做出来的风格都非常相似，但是各个页面都具有各自的特色，让我们感受到自己的空间的个性。 班级网站的内容结构也很简单，分类清楚。页面链接的层次也很明确，访问者可以很明确的

3、感受制作网站的人的心情和性格。 班级网站的主要色调是以绿色为主。鲜艳的绿色是一种非常美丽、优雅的颜色，它生机勃勃，象征着生命。绿色宽容、大度，几乎能容纳所有的颜色。绿色的用途极为广阔，无论是童年、青年、中年、还是老年，使用绿色决不失其活泼、大方。以淡色为辅，两种颜色的结合更体现出了青春与活力。 淡绿色网站主要采用的是环型结构，每一个页面连接另一个页面，使各个页面能方便的跳转。三 网站的分析与设计 设计一个个人网站,主要需要考虑两个方面的因素: 1.速度:反应出用户访问网站页面的速度。主页是经常被访问的页面，最好把每页的风格统一起来，例如：导航部分最好放在每页相同的位置，便于在每个页面中的跳转。

4、2.布局：是个人网站具有吸引力的根本所在，它主要说的是信息显示的视觉效果。四 规划站点 站点规划是设计站点前的一个重要步骤。合理地规划站点对以后站点的设计甚至网站的制作会有事半功倍的效果。 导航草图的制作有利于理清思路，避免在制作网站的过程中乱了方寸。如图1-1所示就是个人粉色网站的初始导航草图。 在导航草图中，网站首页下面有10个二级网页。 华迪网络班网站首页班班班 班休就级级 委 级闲业首简 成 成小情页介 员 员区况 五 网页制作步骤 合理地创建站点文件夹可将网站文档分门别类，井井有条地放置其中，这对以后网站的制作是极其有利的。创建班级网站的站点文件夹的具体操作如下：步骤1 在本地磁E盘

5、创建一个文件夹该文件夹在创建动态站点时将作为站点的根目录。这里在E盘下创建一个名为黄裕福个人网站的文件夹。步骤2 在黄裕福个人网站文件夹内创建不同功能的文件来，文件夹分别命名为图片素材库，按钮素材，我的主页，我的档案，登陆注册，相册，日记，音乐8个文件夹，并将对应的素材放到各自的文件夹中。5.1创建站点 步骤1 进入Dreamweaver 8工作界面后，选择“站点”/“新建站点”命令弹出“未命名站点1的站点定义为”对话框。 步骤2 在该对话框中的“基本”选项卡中的“您打算为您的站点起什么名字？”文本框中输入hyfu 步骤2 单击“下一步”按钮，在弹出的对话框中选中“是，我想使用服务器技术”，在

6、“哪种服务器技术？”下拉列表中选择“ASP VBScript”。 步骤3 单击“下一步”按钮，在弹出的对话框中选择在开发过程中如何使用文件，这里选中“在本地进行编辑和测试”，在“你将把文件存储在计算机上的什么位置？”文本框中输入F: index 步骤4 在弹出的对话框的“您应该使用什么URL来浏览站点的根目录？”中输入http:/localhost/index/,输完后，单击“测试URL”按钮。如果这时它提醒你URL前缀测试成功，点击“确定”按钮，你就可以进入下一步了，否则的话，你再按照前面的步骤检查站点出现的问题。步骤5 单击“下一步”按钮，在对话框中选择“否”。步骤6 单击“下一步”按钮，

7、点击“完成”按钮即可完成本地站点的创建，这时，创建的站点就显示在“文件”面板中了 图1-2创建栈点5.2 首页的布局 步骤1选择“布局模式”，将页面布局为如图1-3 网页布局所示步骤2 在第1行第1列里插入一张主要的图片。步骤3 在第2行第2列里面插入导航条。步骤4 在相应的位置插入相应的图片的Flash影片。步骤5 在第2行第1列中插入一个表单，在表单中插入一4行2列的表格，输入相应的信息如图1-4所示步骤6 新建一个数据库文件，在其中输入用户名和密码，在设置一个主键保存退出（注意：再创建服务器行为时必须把数据库关闭，否则会出现错误）步骤7 还有就是创建一个注册动态网页，如图1-4登陆页面所

8、示步骤6 在插入菜单-应用程序对象形字-记录集分页，插入一个记录集分页5.5设为首页、我的信箱、加为收藏夹步骤1 在index1中输入设为首页、我的信箱、加为收藏夹的字样步骤2 选中设为首页字样，在链接处输入一个空链接，切换到代码视图，在代码视图中输入代码，代码如下：onClick=this.style.behavior=url(#default#homepage);this.sethomepage(http;/www.我的域名.com); 步骤3 选中加为收藏夹字样在链接处输入一个空链接，切换到代码视图，在代码视图中输入代码，代码如下：onClick=window.external.addf

9、avorite(http:/www.我的域名.com,mysite) 步骤4 选中我的信箱字样，在属性面板的链接中输入：mailto:08wangluohuangyufu 5.6制作在线人数步骤1 新建一个global.asa网页，在代码视图中插入代码，代码如下： sub application_onstart() application(sum)=0 end sub sub session_onstart()session.Timeout=1 application(sum)=application(sum)+1 end sub sub session_onend() application

10、(sum)=application(sum)-1 end sub 步骤2 在index.asp网页中，在相应的位置输入在线人数为：步骤3 在index.asp网页中，在代码视图中插入代码，代码如下： 5.7制作聊天室步骤1 新建一个动态页面插入一个表单，在表单中插入一个3行2列的表格输入相应的文安，插入相应的按钮和文字安段。步骤2 “文件”/“保存”，在弹出的对话框中输入login1保存步骤3 “文件“/”新建“在弹出的对话框中选则常规中选择”框架集“，选中”下方固定“的框架集单击”创建“步骤4 “文件“/”框架集另存为“分别保存main1sponse1 display1步骤5 在displa

11、y1网页中输入”欢迎进入我的聊天室“步骤6 在“插入/”HTML“/”水平线“步骤7 在到代码视图中插入代码，代码如下：第6页 步骤8 切换到sponse1网页，在网页中插入一个表单在输入“我要发言”，在插入一个文本字段，在添加两个按钮步骤9 在到sponse1的代码视图中输入代码，代码如下：% if request.form(message)then message1=trim(request.form(message) application.Lock() xm3=session(xm2) application(show)=xm3 & 在 & 说： & message1 & _ &app

12、lication(show) application.UnLock() end if % 步骤 10 切换到main1网页中，在代码视图中输入代码，代码如下： 六 数据库的创建6.1 SQL数据库的创建创建一个空数据库，然后编辑数据表的内容在动态网页面中，一般应用这种方式。数据库的连接步骤如下：步骤1 新建数据库步骤2 建立“tuser”数据库步骤3 新建表步骤4 新建登录名步骤5 新建登录名“a”步骤6 选择“sysadmin”步骤7 选择“tuser”步骤8 数据库建好了6.2 数据库连接连接数据库的代码：set cn=server.CreateObject(adodb.recordest) cn.open select*from users where users where user=&n1&andpwd=&n2&,provider=SQLOLEDB;UID=a;PWD=a;Initial Catalog=users;Data source=hal