案例07网站首页的制作.docx
《案例07网站首页的制作.docx》由会员分享,可在线阅读,更多相关《案例07网站首页的制作.docx(30页珍藏版)》请在冰豆网上搜索。
![案例07网站首页的制作.docx](https://file1.bdocx.com/fileroot1/2023-6/3/be982f85-1a0d-4cca-af94-74bb3c618d9e/be982f85-1a0d-4cca-af94-74bb3c618d9e1.gif)
案例07网站首页的制作
案例7:
网站首页的制作
一、启动MicrosoftVisualStudio2005
首先单击
后单击
或者单击
后在所在程序中找到MicrosoftVisualStudio2005程序组,在程序组中单击MicrosoftVisualStudio2005,如下图所示:
稍候即可出现MicrosoftVisualStudio2005起始页,如下图所示:
在起始页中,有最近的项目,也就是打开(项目、网站)、创建(项目、网站),如下图所示:
项目即是Windows应用程序,网站即是Web应用程序,本案例创建一个网站,即Web应用程序,所以单击创建后面的网站
,出现如下图所示的窗口:
在VisualStudio已安装的模板中选择ASP.NET网站,位置文本框中输入保存位置,如:
F:
\李绍明,在语言下拉列表框中选择VisualBasic,如下图所示:
单击确定,稍后出现VisualStudio2005界面,网站创建完成。
二、关于网站首页认识
首页通常也称为主页就是浏览器打开时进入的网站,是一个网站中最重要的网页,也是访问最频繁的网页,或者是网站建站时树状结构的第一页,如XX的首页就是:
.它是指一个网站的主索引页,是令访客了解网站概貌并引导其调阅重点内容的向导。
首页是一个网站的第一页,也是最重要的一页。
人们都将首页作为体现公司形象的重中之重,也是网站所有信息的归类目录或分类缩影。
首页设计要求在保障整体感的前提下,根据大多数人的阅读习惯以色彩、线条、图片等要素将导航条、各功能区以及内容区进行分隔。
首页设计采用客户的既定标准色,注重协调各区域的主次关系,以营造高易用性与视觉舒适性的人机交互界面为终极目标。
在网站文件中默认将首页命名为index或default等。
从上述描述中应该明确以下四点:
1、网站首页文件名一般使用:
index.aspx或default.aspx。
2、首页包含了网站所有信息的归类目录或分类缩影。
3、首页设计通常以色彩、线条、图片等要素将导航条、各功能区以及内容区进行分隔。
4、首页设计采用标准色,注重各区域的主次关系,以营造高易用性与视觉舒适性的人机交互界面为目标。
三、首页的制作注意事项
1、要让读者有理由逗留,就必须把网页作得生机盎然,引人入胜。
因此网站主题的确定、围绕主题所收集在资料、根据资料的情况和网站主题对资料进行适当的分类形成网站的栏目。
2、别轻易让文字居中和使用粗体或斜体字符。
除了视感混乱之外,很多浏览器不能很好地显示斜体字,也不能补偿由于字母倾斜引起的空白变化。
3、利用短的段落,加点列示,适当的整块引用文字,用水平线分节,用影象地图指引主要连接,使你的页面能吸引人和容易阅读。
4、不要在每一页使用风格不同的图标。
5、不必在以页面上填满图像来增加视觉趣味。
尽量使用彩色圆点——它们较小并能为列表项增加色彩活力(并能用于彩色列表)。
彩色分隔条也能在不扰乱带宽的情况下增强图形感。
6、对用作背景的GIF要谨慎。
它们可以使一个页面看起来很有趣,甚至很专业,但是装饰背景很容易使文字变得不可辨读。
要把背景做得好,光有颜色对比是不够的。
背景要么很亮(文字较暗)要么很暗(文字较亮)。
如果背景含有图像,对比度要较低才不至于过于分散读者的注意力。
7、不要把重要的内容放到页尾——有些读者可能不会往下看那么远。
8、不要让什么东西看起来象是一个按钮却不起按钮的作用。
四、首页的制作步骤
1、布局与设计
2、添加控件
3、编写事件代码
五、首页的布局与设计概要
一)栏目及结构
合理的网站栏目结构,其实没有什么特别之处,无非是能正确表达网站的主题内容及其内容之间的关系,站在用户的角度考虑,使得用户在网站中浏览时可以方便地获取信息,不至于迷失,做到这一点并不难,关键在于对网站结构重要性有充分的认识。
归纳起来,合理的网站栏目结构主要表现在下面几个方面:
1、通过主页可以到达任何一个一级栏目首页、二级栏目首页以及最终内容页面;
2、通过任何一个网页可以返回上一级栏目页面并逐级返回主页;
3、主栏目清晰并且全站统一;
4、通过任何一个网页可以进入任何一个一级栏目首页。
不同主题的网站对网页内容的安排会有所不同,但大多数网站首页的页面结构都会包括页面标题、网站LOGO、导航栏、登录区、搜索区、热点推荐区、主内容区和页脚区等,其他页面不需要设置如此复杂了,一般由页面标题、网站LOGO、导航栏、主内容区和页脚区等构成。
搞网站设计不是把所有内容放置到网页中就行了,还需要我们把网页内容进行合理的排版布局,以给浏览者赏心悦目的感觉,增强网站的吸引力。
二)结构与布局
在设计布局的时候我们要注意把文字、图片在网页空间上均匀分布并且不同形状、色彩的网页元素要相互对比,以形成鲜明的视觉效果。
我们常见的布局结构有“同”字形布局、“国”字形布局、“匡”字形布局、“三”字形布局和“川”字形布局等。
1、“同”字形布局:
所谓“同”字形结构,就是整个页面布局类似“同”字,页面顶部是主导航栏,下面左右两侧是二级导航条、登录区、搜索区等,中间是主内容区,如http:
//www.china-。
2、“国”字形布局:
它是在“同”字形布局上演化而来的,它在保留“同”字形的同时,在页面的下方增加一横条状的菜单或广告,如。
3、“匡”字形布局:
这种布局结构去掉了“国”字形布局的右边的边框部分,给主内容区释放了更多空间,内容虽看起来比较多,但布局整齐又不过于拥挤,适合一些下载类和贺卡类站点使用,如。
4、“三”字形布局:
一般应用在简洁明快的艺术性网页布局,这种布局一般采用简单的图片和线条代替拥挤的文字,给浏览者以强烈的视觉冲击,如。
5、“川”字形布局:
整个页面在垂直方向分为三列,网站的内容按栏目分布在这三列中,最大限度地突出主页的索引功能,一般适用在栏目较多的网站里,如。
在实际设计中我们也不要局限于以上几种布局格式,有时候稍作适当的变化会收到意想不到的效果,另外,平时在浏览网页时要多留心别人的布局方式,遇到好的布局就可以保存下来作为我们设计布局的参考。
三)色彩搭配与设计
网站页面色彩的规划、网页中色彩的应用是网页设计中极为极为重要的一环,赏心悦目的网页,色彩的搭配都是和谐优美的。
在确定网站的主题后,我们就要了解哪些颜色适合站点使用,哪些不适合,这主要根据人们的审美习惯和站点的风格来定,一般情况下要注意以下几点:
1、忌讳使用强烈对比的颜色搭配做主色;
2、配色简洁,主色要尽量控制在三种以内;
3、背景和内容的对比要明显,少用花纹复杂的背景图片,以便突出显示文字内容。
六、首页的布局与设计
常用的布局方法有:
表格布局、框架布局、CSS+DIV布局三种方法,本案例以表格布局为例说明网页布局的方法,结构采用“国”字型。
布局完成后其效果如下图所示:
顶部为页头LOGO和导航栏,尾部为版本信息,中间为内容区,下面说明操作过程及操作方法:
1、制作一个五行一列表格
在页面设计模式、设计视图方式下,布局菜单选择插入表,如下图所示:
在打开的对话框中,选择自定义表格,布局框架中行选择5,列选择1,选中宽度,值设置为760,单位为px(像素),如上图所示,单击确定后页面效果如下图所示:
2、更改表格属性
在属性窗口更改表格的属性值,如下图所示:
Align:
center(水平对齐方式:
居中)
Border:
0(表格线宽度:
0)
CellPadding:
0(内边距:
0)
CellSpacing:
0(外边距:
0)
设置完成后,页面效果如下图所示:
选中所有单元格,设置单元格属性,设置完成后,页面效果如下图所示:
Align:
center(水平对齐方式:
居中)
Width:
760(宽度:
760,单位为px)
选中第四行单元格,设置单元格属性,设置完成后,页面效果如下图所示:
Align:
left(水平对齐方式:
左对齐)
Valign:
top(垂直水平对齐方式:
顶端)
选中第三行单元格,设置单元格属性,设置完成后,页面效果如下图所示:
Height:
5(高度:
5,单位为px)
Bgcolor:
#6699cc(背景颜色:
#6699cc)
3、在第四行再插入一个一行三列的表格,插入表格对话框如下图所示:
在打开的对话框中,选择自定义表格,布局框架中行选择1,列选择3,选中宽度,值设置为100,单位为%(百分比),如上图所示,单击确定后页面效果如下图所示:
选择中第一个单元格,设置属性值:
Align:
left(水平对齐方式:
左对齐)
Valign:
top(垂直水平对齐方式:
顶端)
Width:
30%(宽度:
30,单位为百分比)
选择中第二个单元格,设置属性值:
Align:
left(水平对齐方式:
左对齐)
Valign:
top(垂直水平对齐方式:
顶端)
Width:
40%(宽度:
40,单位为百分比)
选择中第三个单元格,设置属性值:
Align:
left(水平对齐方式:
左对齐)
Valign:
top(垂直水平对齐方式:
顶端)
Width:
30%(宽度:
30,单位为百分比)
属性设置完成后,效果如下图所示:
在三个单元格中分别插入2行一列的表格,插入表格对话框中的值如下图所示:
在打开的对话框中,选择自定义表格,布局框架中行选择2,列选择1,选中宽度,值设置为100,单位为%(百分比),三个表格制作完成后,效果如下图所示:
4、在单元格中添加标签控件,将标签控件的Text属性设为空、ID属性及添加标签控件后表格的效果如下图所示:
Llogo为页头logo标签
Lmenu为页面导航栏
L1为第一类信息标签
L2为第二类信息标签
L3为第三类信息标签
L4为第四类信息标签
L5为第五类信息标签
L6为第六类信息标签
Ltail为页脚标签
七、事件代码编写
注意:
编写事件代码之前请按照“案例08:
建立数据库”和“案例09:
添加全局应用程序类”
设计窗口Default.aspx空白处双击,设计窗口如下图所示:
系统会自动产生如下两行,它是事件的形式。
ProtectedSubPage_Load(ByValsenderAsObject,ByValeAsSystem.EventArgs)HandlesMe.Load
EndSub
上述两行代码简单解释如下:
Protected保护,局部的意思
Sub子过程标志
Page_Load过程名称,该过程有两个参数,即ByValsenderAsObject和ByValeAsSystem.EventArgs
Handle表示本过程代码能被哪些事件响应,本例是窗体的Load事件。
EndSub是过程的结束标志。
在输入事件代码时,编写的代码必须放在这两行之间。
需要输入和编写事件代码如下:
1、Load事件代码
Load事件是页面打开时由系统引发的事件,Load事件代码是页面打开时执行的代码。
Load事件代码如下:
IfNotIsPostBackThen
Lmenu.Text=Application("menu")
read_logo()'页头logo
read_yw()'页尾版权等
read1()'第一类
read2()'第二类
read3()'第三类
read4()'第四类
read5()'第五类
read6()'第六类
EndIf
本事件过程调用相关子过程完成显示信息标题的功能。
第一行和第十一行是一个If……Then……EndIf分支(选择)结构语句,中文含意为如果……那么……结束IF,If和Then之间是一个条件关系式,在执行If……Then语句时,判断If和Then之间的条件关系式,如果条件成立,执行Then和EndIf之间的语句,如果条件不成立,则跳过Then和End去时If之间的语句。
If语句中的条件NotIsPostBack是在浏览器浏览网页的过程中,是否通过浏览器的后退按钮操作而来到本页面的,如果是,则不执行执行Then和EndIf之间的语句,如果不是则执行执行Then和EndIf之间的语句。
第二行,是把全局变量Application("menu")的值赋给Lmenu.text。
第三行、第四行、第五行、第六行、第七行、第八行、第九行、第十行都是执行调用子过程。
调用过程或子过程直接使用过程或子过程名称即可,也就是说,read_logo、read_yw、read1、read2、read3、read4、read5、read6都是过程名称。
2、read1过程代码
过程的形式:
ProtectedSubread1()
EndSub
上述两行代码简单解释如下:
Protected保护,局部的意思
Sub子过程标志
Read1是过程名称,过程名称之后的必须有一对圆括号,如果过程有一个或多个参数,则参数放在圆括号内,多个参数之间用“,”(逗号)分隔,本例中没有参数。
EndSub是过程的结束标志。
编写的过程代码必须放在两行之间。
read1过程代码如下:
DimmyconnAsNewData.OleDb.OleDbConnection
DimreaderAsData.OleDb.OleDbDataReader
DimmyCmdAsData.OleDb.OleDbCommand
DimstrcomAsString
L1.Text="
"
myconn.ConnectionString=Application("connstr")
myconn.Open()
strcom="selecttop5id,标题,类别,发布人from新闻where类别='第一类'and审核<>0orderbyid"
myCmd=NewData.OleDb.OleDbCommand(strcom,myconn)
reader=myCmd.ExecuteReader()
DoWhilereader.Read
L1.Text&="●id="&reader("ID")&"&lb="&Server.UrlEncode(reader("类别"))&"'>"&reader("标题")&""&"
"
Loop
reader.Close()
myCmd=Nothing
myconn=Nothing
本过程完成从数据库中读数据,并将读出的数据的信息标题显示出来。
第一行、第二行、第三行、第四行、第六行、第七行、第八行、第九行、第十行、第十四行、第十五行、第十六行从数据库中读取数据的一种模式。
从数据库中读数据的模式相对固定,一种为阅读器Reader,本例即是这种模式,另一种是数据集DataSet。
两种模式各有特点,阅读器Reader占内存小,读取数据速度快,只能按顺序读取一次,就象水龙头,水只能从水龙头流出。
数据集DataSet模式,占内存大,读取数据速度慢,读取数据方式灵活,可以顺序读取,也可从中随意读取,可读取多次。
在数据库程序设计中,两种方式都会用到,而且根据数据处理的需要而确定读取数据的方式。
本子过程使用的是阅读器Reader这种方式。
第一行、第二行、第三行是分别定义使用数据库时的三个对象,第一是数据库联接对象,第二个阅读器对象,第三行是命令对象。
第四行定义一个字符串变量。
第五行给L1.Text赋一个字符串,该字符串的功能是插入一张图片后换行。
第六行数据库联接对象的联接字符串赋值。
第七行打开数据库联接。
第八行是SQL的Select语句,可简单描述为从数据库中选择适合条件的数据。
关于Select语句,由于内容的关系,在此不详述。
第九行是用第七行的数据库联接和第八行的Select语句赋给命令对象。
第十行是执行第九行的命令,从数据库中选择适合条件的数据。
第十一行和第十三行是一个DoWhile……Loop循环结构,在DoWhile……Loop循环结构中,DoWhile的后边是循环条件,本例中循环条件为reader.Read,即阅读器中有数据可读。
DoWhile……Loop之间为循环体语句,本例中只有一条语句,即第十二行。
第十二行是把从数据库读出的数据标题作为超链接到read_new.aspx文件,并传递数据库中的数据ID和类别作用超链接参数,每条信息占一行。
第十三行关闭阅读器。
第十四行释放命令对象所占内存空间。
第十五行释放连结对象所占内存空间。
3、read2过程代码
与read1类似,代码说明请参看read1,在此不一一赘述。
DimmyconnAsNewData.OleDb.OleDbConnection
DimreaderAsData.OleDb.OleDbDataReader
DimmyCmdAsData.OleDb.OleDbCommand
DimstrcomAsString
L2.Text="
"
myconn.ConnectionString=Application("connstr")
myconn.Open()
strcom="selecttop5id,标题,类别,发布人from新闻where类别='第二类'and审核<>0orderbyid"
myCmd=NewData.OleDb.OleDbCommand(strcom,myconn)
reader=myCmd.ExecuteReader()
DoWhilereader.Read
L2.Text&="●id="&reader("ID")&"&lb="&Server.UrlEncode(reader("类别"))&"'>"&reader("标题")&""&"
"
Loop
reader.Close()
myCmd=Nothing
myconn=Nothing
4、read3过程代码
与read1类似,代码说明请参看read1,在此不一一赘述。
DimmyconnAsNewData.OleDb.OleDbConnection
DimreaderAsData.OleDb.OleDbDataReader
DimmyCmdAsData.OleDb.OleDbCommand
DimstrcomAsString
L3.Text="
"
myconn.ConnectionString=Application("connstr")
myconn.Open()
strcom="selecttop5id,标题,类别,发布人from新闻where类别='第三类'and审核<>0orderbyid"
myCmd=NewData.OleDb.OleDbCommand(strcom,myconn)
reader=myCmd.ExecuteReader()
DoWhilereader.Read
L3.Text&="●id="&reader("ID")&"&lb="&Server.UrlEncode(reader("类别"))&"'>"&reader("标题")&""&"
"
Loop
reader.Close()
myCmd=Nothing
myconn=Nothing
5、read4过程代码
与read1类似,代码说明请参看read1,在此不一一赘述。
DimmyconnAsNewData.OleDb.OleDbConnection
DimreaderAsData.OleDb.OleDbDataReader
DimmyCmdAsData.OleDb.OleDbCommand
DimstrcomAsString
L4.Text="
"
myconn.ConnectionString=Application("connstr")
myconn.Open()
strcom="selecttop5id,标题,类别,发布人from新闻where类别='第四类'and审核<>0orderbyid"
myCmd=NewData.OleDb.OleDbCommand(strcom,myconn)
reader=myCmd.ExecuteReader()
DoWhilereader.Read
L4.Text&="●id="&reader("ID")&"&lb="&Server.UrlEncode(reader("类别"))&"'>"&reader("标题")&""&"
"
Loop
reader.Close()
myCmd=Nothing
myconn=Nothing
5、read5过程代码
与read1类似,代码说明请参看read1,在此不一一赘述。
DimmyconnAsNewData.OleDb.OleDbConnection
DimreaderAsData.OleDb.OleDbDataReader
DimmyCmdAsData.OleDb.OleDbCommand
DimstrcomAsString
L5.Text="
"
myconn.ConnectionString=Application("connstr")
myconn.Open()
strcom="selecttop5id,标题,类别,发布人from新闻where类别='第五类'and审核<>0orderbyid"
myCmd=NewData.OleDb.OleDbCommand(strcom,myconn)
reader=myCm