案例07网站首页的制作.docx

案例07网站首页的制作.docx

《案例07网站首页的制作.docx》由会员分享，可在线阅读，更多相关《案例07网站首页的制作.docx（30页珍藏版）》请在冰点文库上搜索。

案例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