网页设计与网站建设.docx
《网页设计与网站建设.docx》由会员分享，可在线阅读，更多相关《网页设计与网站建设.docx（7页珍藏版）》请在冰豆网上搜索。
网页设计与网站建设
目录
一设计的思路..............................................................................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.1SQL数据库的创建.......................................................................6
6.2数据库连接...................................................................................6
七.实验中的错误和怎样解决的........................................................7
八.设计总结.........................................................................................7
九.参考资料...........................................................................................7
一设计的思路
我所设计的班级网站主要是以绿色为主色调，以淡色为辅。
主要是希望所有的朋友看到这个空间能一种和谐、安宁、充满生机的感觉，得到心灵的慰藉！
二网站的总体风格
网站的总体风格主要是以绿色为主，以淡色为辅，充满活力，生机。
具有个性色彩。
网站的布局其实很简单，主要是做好一个模版，模版做好框架了，那网站就初步形成了，虽然主要框架做好了，但是也不要高兴得太早哦，但是你也要想清楚怎样把整个界面搭配得更具有个性化。
首先，在框架的最top要插入一个能体现你个人网站的主图。
然后在主图的下面插入按钮导航条，之后下面就插入自己想要的风格，虽然用模版做出来的风格都非常相似，但是各个页面都具有各自的特色，让我们感受到自己的空间的个性。
班级网站的内容结构也很简单，分类清楚。
页面链接的层次也很明确，访问者可以很明确的感受制作网站的人的心情和性格。
班级网站的主要色调是以绿色为主。
鲜艳的绿色是一种非常美丽、优雅的颜色，它生机勃勃，象征着生命。
绿色宽容、大度，几乎能容纳所有的颜色。
绿色的用途极为广阔，无论是童年、青年、中年、还是老年，使用绿色决不失其活泼、大方。
以淡色为辅，两种颜色的结合更体现出了青春与活力。
淡绿色网站主要采用的是环型结构，每一个页面连接另一个页面，使各个页面能方便的跳转。
三网站的分析与设计
设计一个个人网站,主要需要考虑两个方面的因素:
1.速度:
反应出用户访问网站页面的速度。
主页是经常被访问的页面，最好把每页的风格统一起来，例如：
导航部分最好放在每页相同的位置，便于在每个页面中的跳转。
2.布局：
是个人网站具有吸引力的根本所在，它主要说的是信息显示的视觉效果。
四规划站点
站点规划是设计站点前的一个重要步骤。
合理地规划站点对以后站点的设计甚至网站的制作会有事半功倍的效果。
导航草图的制作有利于理清思路，避免在制作网站的过程中乱了方寸。
如图1-1所示就是个人粉色网站的初始导航草图。
在导航草图中，网站首页下面有10个二级网页。
华迪网络班网站首页
班
班
班
班
休
就
级
级
委
级
闲
业
首
简
成
成
小
情
页
介
员
员
区
况
五网页制作步骤
合理地创建站点文件夹可将网站文档分门别类，井井有条地放置其中，这对以后网站的制作是极其有利的。
创建班级网站的站点文件夹的具体操作如下：
步骤1在本地磁E盘创建一个文件夹该文件夹在创建动态站点时将作为站点的根目录。
这里在E盘下创建一个名为黄裕福个人网站的文件夹。
步骤2在黄裕福个人网站文件夹内创建不同功能的文件来，文件夹分别命名为图片素材库，按钮素材，我的主页，我的档案，登陆注册，相册，日记，音乐8个文件夹，并将对应的素材放到各自的文件夹中。
5.1创建站点
步骤1进入Dreamweaver8工作界面后，选择“站点”/“新建站点”命令弹出“未命名站点1的站点定义为”对话框。
步骤2在该对话框中的“基本”选项卡中的“您打算为您的站点起什么名字？
”文本框中输入hyfu
步骤2单击“下一步”按钮，在弹出的对话框中选中“是，我想使用服务器技术”，在“哪种服务器技术？
”下拉列表中选择“ASPVBScript”。
步骤3单击“下一步”按钮，在弹出的对话框中选择在开发过程中如何使用文件，这里选中“在本地进行编辑和测试”，在“你将把文件存储在计算机上的什么位置？
”文本框中输入F:
\index\
步骤4在弹出的对话框的“您应该使用什么URL来浏览站点的根目录？
”中输入http:
//localhost/index/,输完后，单击“测试URL”按钮。
如果这时它提醒你URL前缀测试成功，点击“确定”按钮，你就可以进入下一步了，否则的话，你再按照前面的步骤检查站点出现的问题。
步骤5单击“下一步”按钮，在对话框中选择“否”。
步骤6单击“下一步”按钮，点击“完成”按钮即可完成本地站点的创建，这时，创建的站点就显示在“文件”面板中了
图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登陆页面所示
步骤6在插入菜单-应用程序对象形字-记录集分页，插入一个记录集分页
5.5设为首页、我的信箱、加为收藏夹
步骤1在index1中输入设为首页、我的信箱、加为收藏夹的字样
步骤2选中设为首页字样，在链接处输入一个空链接，切换到代码视图，在代码视图中输入代码，代码如下：
onClick="this.style.behavior='url（#default#homepage）';this.sethomepage（'http;//www.我的域名.com'）;"
步骤3选中加为收藏夹字样在链接处输入一个空链接，切换到代码视图，在代码视图中输入代码，代码如下：
onClick="window.external.addfavorite（'http:
//www.我的域名.com','mysite'）"步骤4选中我的信箱字样，在属性面板的链接中输入：
mailto:
08wangluohuangyufu@
5.6制作在线人数
步骤1新建一个global.asa网页，在代码视图中插入代码，代码如下：
subapplication_onstart（）application（"sum"）=0endsubsubsession_onstart
（）session.Timeout=1application（"sum"）=application（"sum"）+1endsub
subsession_onend（）application（"sum"）=application（"sum"）-1endsub
步骤2在index.asp网页中，在相应的位置输入在线人数为：
步骤3在index.asp网页中，在代码视图中插入代码，代码如下：
<%=application（"sum"）%>5.7制作聊天室
步骤1新建一个动态页面插入一个表单，在表单中插入一个3行2列的表格输入相应的文安，插入相应的按钮和文字安段。
步骤2“文件”/“保存”，在弹出的对话框中输入login1保存
步骤3“文件“/”新建“在弹出的对话框中选则常规中选择”框架集“，选中”下方固定“的框架集单击”创建“
步骤4“文件“/”框架集另存为“分别保存main1sponse1display1
步骤5在display1网页中输入”欢迎进入我的聊天室“
步骤6在“插入/”HTML“/”水平线“
步骤7在到代码视图中插入代码，代码如下：
第6页<%response.write（application（"show"））%>
步骤8切换到sponse1网页，在网页中插入一个表单在输入“我要发言”，在插入一个文本字段，在添加两个按钮
步骤9在到sponse1的代码视图中输入代码，代码如下：
<%ifrequest.form（"message"）<>""thenmessage1=trim（request.form（"message"））application.Lock（）xm3=session（"xm2"）application（"show"）=xm3&"在"&"说：
"&message1&"
"_&application（"show"）application.UnLock（）endif%>
步骤10切换到main1网页中，在代码视图中输入代码，代码如下：
<%ifrequest.form（"xm1"）=""orrequest.form（"mm"）=""thenresponse.write（"对不起,你的资料不全!
请返回重填"）elsesession（"xm2"）=trim（request.form（"xm1"））endif%>
六数据库的创建
6.1SQL数据库的创建
创建一个空数据库，然后编辑数据表的内容在动态网页面中，一般应用这种方式。
数据库的连接步骤如下：
步骤1新建数据库
步骤2建立“tuser”数据库
步骤3新建表步骤4新建登录名
步骤5新建登录名“a”
步骤6选择“sysadmin”
步骤7选择“tuser”
步骤8数据库建好了
6.2数据库连接
连接数据库的代码：
setcn=server.CreateObject（"adodb.recordest"）cn.open"select*fromuserswhereuserswhereuser='"&n1&"'
andpwd='"&n2&"'","provider=SQLOLEDB;UID=a;PWD=a;InitialCatalog=users;Datasource=hal"
升级会员 