visual studio c# 网页制作完全手册.doc

新闻网站制作详解第0章 系统特点实用的新闻内容网站管理系统，可通过后台管理系统创建各种类型的文章栏目，灵活设置页面显示版块；可自定义会员类型，针对不同会员类型授权不同操作管理权限；具有丰富的广告发布形式和多项辅助功能，适合创建新闻内容网站、大型文章网站。1、自由创建新闻中心栏目可自由创建一个或多个新闻中心型栏目，新闻中心型栏目前台具有新闻首页、检索页、搜索页、内容页，各页面均可自由设置页面布局，可自由输出新闻文章列表、图文新闻等版块。可以用来建立富有层次的新闻文章栏目。创建多个新闻中心栏目，可以构建大型文章网站。2、自由创建多种类型的文章内容栏目，适合不同规模网站的需要1) 分类文章型栏目：访问栏目直达检索页、适合建立小型文章栏目。2) 章节文章型栏目：用于大篇幅的手册、论文、作品、法律法规等，按章节分页显示。3) 模版单页型栏目：用于建立只有一个网页的栏目，可自由设置页面布局3、任意的首页排版布局通过修改模版可任意调整首页版块布局，支持多个首页版块，每个版块可自由编辑或选择插入网站中的动态内容。4、灵活的内页排版布局每个栏目的功能网页都可以自由选择使用通栏、左栏、右栏、三栏模版页，自由增减版块，自由编辑版块内容或插入显示模块。5、文章动态输出1)可生成动态文章插件，将新闻文章动态显示在网站任何页面或内容中2)可生成JS代码插件，将新闻文章内容插入任何外部网站 6、可自由控制会员操作权限可以将不同栏目分别授权，并授权给不同会员7、独立会员系统，自由设定会员类型系统自带功能强大的会员系统，可以自由设定会员类型，自由分配每一类、每一位会员的权限。8、强大的网站广告管理系统支持弹出窗口、旗帜广告、通栏广告、浮动广告、对联广告、挂角广告等广告类型。9、功能强大的在线网页编辑器可任意编辑图文内容，插入多幅图片、FLASH、媒体，图文混排，还具有查找替换等功能。10、网站辅助功能丰富，具有以下辅助功能1) 动态缓存系统：针对不同栏目设置缓存，提高访问速度2) 统计分析系统：网站访问统计、计数功能，特有的顾客兴趣分析功能3) 投票调查系统：可创建多个投票组，插入到网站的任何位置4) 友情链接系统：发布图片或文字友情链接，插入到网站任何位置5) 数据备份系统：实时倒出网站数据库进行数据备份注意：以上描述是对一个标准新闻网站的全功能定义，本书建立的新闻网站没有做全这些功能。读者可以自己添加。第1章 新闻网站基础工作该新闻网站可以使用Visual Studio 2008系统开发，也可以使用VS2005系统开发。但建议使用VS2008来做。1.1 建立网站文件夹1.1.1 启动VS2008图1.1-1 启动开发系统vs20081.1.2 新建网站此处是从0开始建立一个网站。以后就可以使用打开网站了。图1.1-2 选择新建-网站1.1.3 定义网站所在的文件夹在位置直接输入路径F:WebNews，点“确定”，即建立此文件夹，再点“确定”即可建立网站。图1.1-3 确定网站所在的路径1.1.4 网站开发界面图1.1-4 工作界面在网站的开发界面中要重点知道以下几个命令图标：“刷新”用于将外部复制到网站文件夹中文件加载显示到网站资源之中。“资源管理”打开解决方案资源管理器窗口。“属性”页面处于设计页打开属性窗口。“工具箱”打开工具箱窗口。“设计”进入网页的视图设计器界面。“源”进入网页的HTML代码页。如图1.1-5。图1.1-5 常用的命令图标1.1.5 现有网站的的打开1对已经建立好的现有网站，且在“最近的项目”中已经列出，可直接点击网站名打开。如图1.1-6图1.1-6 打开已有网站的界面2对在别的电脑上建立好的网站，要在本电脑上进行开发。操作过程是：第一步是先将整个网站文件夹直接复制过来，例如原电脑中网站文件夹为D:WebNews，复制过来可变为F:WebNews。注意是在根目录之下（D:，F:都是根目录，这是今后对程序调试跟踪的要求）。第二步是点“菜单”，点“打开”，在“打开网站”窗口中找到并选中F:WebNews文件夹，再点击“打开”，即完成了从别的电脑复制网站的工作。如图1.1-7。图1.1-7 打开未列出网站的界面1.2 网站数据库建立1.2.1 加入数据库文件此处为简化操作，且为以后的网站安全做好准备，所以没有自己另外建立数据库，而直接使用的是由系统提供的安全数据库Aspnetdb.mdf，这样网站数据和安全数据共用一个数据库，这种共用完全可以应对任何中型企业对网站的基本要求。安全性能也不错。将鼠标移动到图标之上，点击，打开ASP.NET网站配置管理工具。如图1.2-1图1.2-1 启动ASP.NET配置1.2.2 配置网站安全在网站管理工具中点击“安全”项图1.2-2 网站管理工具主页1.2.3 使用安全向导简化操作过程在安全页中点击“使用安全设置向导按部就班地配置安全性”。如图1.2-3图1.2-3网站管理工具安全页1.2.4 定义安全验证点“下一步”，选中“通过Internet”， 再点“下一步”。互联网上的网站一般是采用这种格式。单位内部的网站则多采用“通过局域网”，其安全性更好。如图1.2-4图1.2-4 网站访问方式选择“通过Internet”1.2.5 启用角色角色管理使得能够通过创建的类别（称为“角色”）管理应用程序的授权。通过在用户上附加角色，可以通过角色控制对 Web 应用程序的不同部分或功能的访问，从而取代基于用户名的控制，或者作为对基于用户名的控制方式的补充。例如，员工应用程序可能具有诸如“经理”(Managers)、“雇员”(Employees)、“主管”(Directors) 等角色，并为每种角色指定了不同的特权。用户可以具有多种角色。例如一个论坛中，有些用户可能同时具有“成员”(Members) 和“版主”(Moderators) 角色。每种角色定义了在站点中拥有不同的特权，同时具有两种角色的用户将可同时使用两组特权。角色是网站中权限的载体，一般说法是：先对角色授权，再将角色赋给用户，用户就具有了角色的权限，一个角色可以赋给多个用户，一个用户也可以有多个角色。勾选中“为此网站启用角色”， 点“下一步”。如图1.2-5图1.2-5 启用角色1.2.6 创建角色为网站创立两个角色，分别取名为adminRo（网站管理员，最高权限），useRo（网站用户，负责新闻操作），点“下一步”。注意：角色名可任取，只要求见名识意。如图1.2-6图1.2-6 建立两个角色1.2.7 创建用户为网站创建两个用户，分别取名为admin（网站管理员，最高权限），use（网站用户，负责日常操作），点“下一步”。 admin用户密码为，use用户密码为。如图1.2-7。因为网站的架构还未建立起来，所以对网站的角色和用户设置访问权限规则为时过早，等网站主体开发完成以后再来设置访问规则比较恰当。此处点“完成”，然后关闭网站配置工具。下一次ASP.NET网站管理工具的使用要等到网站网页完全做好，最后的访问权限设置工作时。注意：用户密码最少长度为7位，且要含有字母，数字，符号等多种，否则系统不承认。图1.2-7 网站中创建两个用户后即关闭此工具1.3 网站数据表的建立1.3.1查看数据库表在“解决网络方案资源管理器”中先点击刷新，打开App_Data文件夹，找到ASPNETDB.MDF数据库文件，双击打开，即查看数据库中的各种对象，以及新闻数据表的建立。数据库的查看是经常要做的工作，可以掌握对表中数据记录的操作是否正确，掌握存储过程的使用情况。如图1.3-1。图1.3-1 数据库文件1.3.2 建立用户数据表表是一切数据操作的基础，没有表中存贮数据的支持，动态网页的自动建立完全不可能。在打开的数据库中建立数据表的方法有多种，可以手工建表，也可使用存储过程建表。本次开发使用存储过程建立数据表。注意：系统内部提供了很多的存储过程，用于安全管理，在你没有掌握之前，不要去改动，否则会导致系统不能正常运行。你目前要用的存储过程只是你自己建立的存储过程。本站目前只使用两个表来进行新闻的基本操作。一个表是“栏目表”：负责存贮栏目名，栏目排序，栏目说明等数据。栏目名用来对各新闻条分类，栏目排序用来决定栏目的网页中的排布位置。另一个表是“新闻表”： 负责存贮新闻标题，栏目，作者，新闻发布时间，新闻内容，新闻查看次数，审核通过情况。在新闻列表中显示新闻标题和时间，点击新闻标题即可查看新闻完整内容，作者，时间，点击次数。1.3.3 建表SQL代码1右击存储过程，在菜单中点击添加新存储过程。如图1.3-2图1.3-2 新建存贮过程2将存储过程的名由dbo.StoredProcedure1改为Create_table，并在AS和RETURN之间输入下列SQL代码内容。CREATE PROCEDURE Create_table -dbo.StoredProcedure1-存储过程名字在此处自己生成AS/*Create table 栏目(lmid int identity primary key, -栏目编号 栏目 nvarchar(30), 说明 nvarchar(100), 排序 int )Create table 新闻( nwid bigint identity primary key, -新闻编号 lmid int , -本新闻所属的栏目 标题 nvarchar(30), 作者 nvarchar(10), 时间 datetime default(getdate(), -上传的时间 次数 int, -文章点击打开的次数 内容 ntext, 审核 nvarchar(20) , constraint tblm_news foreign key (lmid) REFERENCES 栏目(lmid) ON DELETE CASCADE ON UPDATE CASCADE -建立外键约束-层叠删除-层叠更新) */RETURN注意：/* */不能少，其之间的SQL代码为建立数据表的代码。identity为定义自增列，让栏目号及新闻号可以自动增加。可减少工作量，并确保惟一性。使用外键约束可以让栏目表和新闻表中的数据保持一致，否则会出现因为栏目表中某一栏目被删除，而此栏目名下的新闻在新闻表依然存在，导致出现数据不一致的错误。使用层叠删除，则删除栏目表中的某一栏目，新闻表中此栏目名下的新闻会自动被删除。层叠更新则是自动更改。1.3.4 运行SQL代码建表只运行建立表的SQL代码，先选中如下内容，点右键，再点“运行选定内容”。如图1.3-3图1.3-3 在存贮过程之中运行SQL代码的方法1.4 查看建好的用户表建立表的SQL代码运行如没有报错，则在表上右击后选“刷新”，会出现下右图，发现两个表“栏目”表和“新闻”表已建好。如图1.4-1右图中的“栏目”和“新闻”表，其它aspnet_打头的是系统提供的用于安全操作的表，在你还没有成为高手之前不要去动它们，否则网站的安全性就不能得到保证。 图1.4-1 查看刚建立的表小结1掌握新建网站，打开网站，特别是打开复制过来的网站。2了解ASP.NET配置工具的使用，掌握安全验证的含义，了解劝角色，用户的含义。3掌握网站中数据库的建立，库内数据表的建立，SQL代码建立表的操作流程。掌握查看表的结构及内容。第2章 母版页和CSS文件使用 ASP.NET 母版页可以为应用程序中的页创建一致的布局。单个母版页可以为应用程序中的所有页（或一组页）定义所需的外观和标准行为。然后可以创建包含要显示的内容的各个内容页。当用户请求内容页时，这些内容页与母版页合并以将母版页的布局与内容页的内容组合在一起输出。母版页实际由两部分组成，即母版页本身与一个或多个内容页。母版页为具有扩展名 .master（如 MySite.master）的 ASP.NET 文件，它具有可以包括静态文本、HTML 元素和服务器控件的预定义布局。母版页提供了开发人员通过传统方式创建的功能，这些传统方式包括重复复制现有代码、文本和控件元素；使用框架集；对通用元素使用包含文件；使用 ASP.NET 用户控件等。母版页具有下面的优点：l 使用母版页可以集中处理页的通用功能，以便可以只在一个位置上进行更新。l 使用母版页可以方便地创建一组控件和代码，并将结果应用于一组页。例如，可以在母版页上使用控件来创建一个应用于所有页的菜单。l 通过允许控制占位符控件的呈现方式，母版页使您可以在细节上控制最终页的布局。l 母版页提供一个对象模型，使用该对象模型可以从各个内容页自定义母版页。CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器的加载时间。层叠样式表极大地提高了工作效率样式表定义如何显示 HTML 对象。样式通常保存在外部的 .css 文件中。通过编辑一个简单的 CSS 文档，外部样式表可同时改变站点中所有页面的布局和外观。由于允许同时控制多重页面的样式和布局，CSS 可称得上 WEB 设计领域的一个突破。作为网站开发者，能够为每个 HTML 对象定义样式，并应用于任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有相应对象都会自动地更新。CSS布局的优点，采用CSS布局比对传统的TABLE网页布局有以下几个显著优势：l 表现和内容相分离：将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。这样的页面对搜索引擎更加友好。l 提高页面浏览速度：对于同一个页面视觉效果，采用CSS布局的页面容量要比TABLE编码的页面文件容量小得多，前者一般只有后者的1/2大小。浏览器就不用去编译大量冗长的标签。l 易于维护和改版：只要简单的修改几个CSS文件就可以重新设计整个网站的页面。l 使用CSS布局更符合现在的W3C标准。2.1 母版页2.1.1 母版页文件及所在文件夹母版页文件和CSS样式文件这两个文件组合用于网站的总体样式设计，可以使整个网站的风格一致，是网站整体布局，美观设计最重要的方式方法。一定要为母版页和CSS样式文件建立文件夹，由于系统在开发时和运行时，其绝对路径的不同，经常会出现找不到文件的错误，所以在系统开发时对网页各种文件的操作一定只能使用相对路径，这样可以保证在开发时和运行时文件路径的一致性。注意：网站开发时常用的相对路径格式为 / 表示根路径； ./ 表示上一级路径。1在“解决方案资源管理器”的F:WebNews中右击，再点新建文件夹，建立MASTER文件夹，专用于存放母版页。如图2.1-1。图2.1-1 建立母版页文件夹master2母版页文件的建立在master文件夹上右击，点选“添加新项”，在添加新项框中，选择母版页，将名称中的名字改为MyMaster.master，点添加。如图2.1-2。母版页可以根据风格需求变化建立多个。图2.1-2 建立母版页文件MyMaster.master2.1.2 母版页的设计布局在 HTML 设计器中创建 HTML 页或 ASP.NET 网页时，对象的物理布局是从上至下。其布局形式有两种，一是流式布局，二是两维方式布局。默认情况下，当在浏览器中呈现页时，流式布局将网页中的对象按照相同的从上至下顺序呈现。两维方式布局是对网页中的对象使用水平和垂直坐标在页中的相应位置定位对象。流布局：如果对象没有任何定位样式属性，则它们将在页中从上至下、从左至右或从右至左排列，具体取决于页的 dir 属性的设置、对象的容器对象或浏览器的语言设置。任何 Web 浏览器都可显示使用此布局的 HTML 文档。如果调整页的大小，对象有时将被重新定位。使用流布局，可以使用table 对象或使用div 对象来对齐多个对象。但是，对象不能重叠，只能包含嵌套，外观上显现为一层。当调整页的大小时，对象会有移动。两维定位：应用绝对定位选项，可将对象放置在页中的精确位置。也可为添加到页中的任何新对象指定定位选项。定位选项在实现 W3C HTML 4.0 标准的任何浏览器中都有效。常用的定位选项：absolute：由 left, right、top 和 bottom 样式属性的任意组合定义对象在网页中的位置。位置 0,0 基于当前对象的父级定义，父级是具有定位信息的第一个容器对象。例如，如果当前对象在具有定位信息的 div 对象内，则将基于 div 对象的位置来计算绝对定位信息。如果当前对象没有带定位信息的容器对象，则将基于 body 对象计算定位信息。relative：由 left 和 top 样式属性定义对象在网页中的位置。此选项与 absolute 的区别在于，0,0 位置是根据对象在页面流中的位置来定义的。具有相对定位并且 top 和 left 都设置为 0 的对象将在流中正常显示。注意：使用绝对或相对定位的对象在页中可能会不按照页标记声明中的顺序显示，这可能会引起混乱。例如，在“源”视图中，可能将某个按钮定义为标记中的第一个对象，但设置它的定位后，该按钮可能在呈现的页或“设计”视图中显示为最后一个对象。static：对象使用流布局呈现；即对象不使用两维定位。如果要对重写设置（该设置继承自主题或样式表）的单个控件设置定位选项，则可选择此选项。注意：以上文字在你成为布局高手时来看，就不难了。本网站采用流式布局，使用DIV加CSS完成，要记住的是DIV对象有嵌套包含关系，此时设计布局的DIV，是定位各个大的板块，今后各板块的DIV都是容器对象，要在其中包含很多其它对象。1网站基本布局图示网站的整体布局主要是对母版页进行设计。本网站各大板块布局及大致功能划分如图2.1-3所示。图2.1-3 网站各页面的基本布局2网站布局的HTML代码上面布局图示对应的html代码如下： 注意：一个完整的div格式为 ；看清DIV的嵌套包含关系。class=后面的类名要和CSS文件中类名一致。2.1.3 母版页的HTML主要代码进入母版页的设计界面，对母版页MyMaster.master输入下述html代码。如图2.1-4图2.1-4 布局的HTML代码构成注意：ContentPlaceHolder控件为母版页中的内容定义一个相对区域，并且呈现在内容页中发现的相关 Content 控件内的所有文本、标记和服务器控件。ContentPlaceHolder控件在母版页中至少要有一个。看清标记说明，查清和网站布局的HTML代码的区别。如在Visual 2005中开发，则绿色下划线不会出现。2.2 CSS样式文件2.2.1 建立CSS样式文件 在“解决方案资源管理器”的F:WebNews中右击，再点新建文件夹，建立CSS文件夹。在CSS文件夹上右击，点选“添加新项”。在添加新项框中添加名为MyStyle.css的样式文件。样式文件是用于定义html页中各种对象的属性值的文本，属性值一般有：宽度，高度，颜色，字体，位置，动作等多种，是页面美工的关键文件。如图2.2-1。注意：样式文件的路径及引用问题。图2.2-1 建立样式文件MyStyle.css2.2.2 CSS文件的代码结构在myStyle.css页面中，先输入 .divAll 说明： .表示类，divAll为类名，必须和html页中各对象中的class后面指定的类名一致。中为类的样式参数地。在中点击，让光标进入其中，这时左上角工具条中的“生成样式”变为可用状态，点击“生成样式”，打开“修改样式”，在其中可以定义样式。最后点“确定”，就会自动生成样式参数值。1输入样式类名（和母版页中存在的类名完全一样，且一一对应，母版页中Class=后面的就是类名， CSS文件中的类名前要加上一个“”），启用“生成样式”工具，如图2.2-2。生成样式工具图2.2-2 启动“生成样式”工具2使用“生成样式”工具。对各个类名进行反复操作，对页面中所有各对象的样式都用此样式工具生成一个。图2.2-2 使用“生成样式”工具生成样式属性值3在myStyle.css样式文件中生成的完整样式属性值bodytext-align: center; /*居中 */font-size: 14px; /* 字体大小 */.divAllfont-family: 宋体, Arial, Helvetica, sans-serif; /* 字体类型 */width: 1010px; .headdivwidth: 1010px; .logodivborder: 1px dotted #FF9966; /*边框宽度颜色 *width: 1010px; /*层的宽度 */height: 120px; .menudivborder: 1px solid #FF0000;width: 1010px;height: 26px; /*层的高度 */.bodydivborder-style: none solid none solid; /* 边框线类型 */border-width: 0px 1px 0px 1px; /* 边框线宽度 */width: 100%;border-right-color: #FF0000;border-left-color: #FF0000; .bodyleftborder-style: none solid none none;border-width: 0px 1px 0px 0px;border-color: #FF0000;float: left; /*float表示浮动,是div定位的要点,不使用folat,就不能实现左右定位布局*/width: 760px;height: 560px; .bodyrightborder-style: none none none solid;border-width: 1px 0px 0px 1px;border-color: #FF0000;float: right; /*float表示浮动,是div定位的要点,不使用folat,就不能实现左右定位布局*/width: 245px;height: 560px; .bottdivborder: 1px solid #FF0000;width: 1010px;height: 50px; 注意：样式属性的优先级问题。优先级规则是越内层的越高，body是外层，divall是内层，如果所以body设居中，divall设靠左，则body的居中只作用到divall，divall的靠左会作用于其内含的对象，body的居中对divall内含的对象不起作用。如果divall内部还包含有tws层，也设了属性，则tws层的已设定属性优先起作用，tws层中未设定的属性由外层中设定的属性起作用，依次外推。如还有些属性各层都未设置，则起用默认值。Divall如未设宽度，则其默认宽度为body的宽度（容器的宽度），这样body的居中效应在divall层上就不能看到，因为已占满了宽度，要看到居中效果，内层的宽度要小于容器的宽度。高度height部分以后要删除或调整，以防止器容中的对象溢出越界造成布局破坏。删除高度数值则会自动胀大以适应内含的对象高度，达到适应高度的目地，但此做法有时会导致块与块之间的高度不一致。2.3 CSS文件的应用要用CSS文件控制母版页中所有对象的属性，就要将样式文件和网页文件结合起来，才能让样式文件中定义的样式属性作用到网页中各个对象类。CSS文件的引用就是将样式文件和网页文件相结合，让网页文件中对象能够引用到样式文件中定义的样式值，并相应变化。此步操作必不可少。2.3.1 引用CSS文件点击”源”进入母版页的HTML代码页，从“解决方案资源管理器”中找到刚制作的样式文件MyStyle.css，将其拖入到母版页 至 之间2拖动文件至此位置，CSS文件只能放在此处1点击拖动此文件图2.3-1 页面中引用CSS文件2.3.2 查看CSS样式作用结果点击“设计”，进入设计页面后即可看到布局结果。注意：此处为了结果的美观，对DIV对象的Height定义了值，以后在各个板块中加入了其它对象后，要考虑删除Height的值，或修改Height的值。如未定义Height的值，则DIV容器的Height会自动胀大，这很常用。图2.3-2 布局最终的效果2.4 网页上加载图片或flash图片或flash对网站的美工程度有极重要的作用，离开了图片或flash，网站就会单调无味，没有生机。2.4.1 准备图片及flash文件1在网站所在的文件夹之中新建一个名为Images的文件夹，再在其中复制一些图片及flash文件。图2.4-1 复制到网站中的图形文件 2打开“解决方案资源管理器”，点击“刷新”图标，即可看到Images的文件夹及其中刚才加入的图片文件 图2.4-2刷新看到新加入的图形文件2.4.2 加载图片1加入图片控件，设置其宽高属性。可加入多个图片控件在bodyright层中从“工具箱”中拖入一个Image图像控件（自动命名为Image1），再打开其属性窗口，设置其Height为100px，Width为100%。注意：100%表示占容器的比例，Image1图像控件的容器为bodyright层（DIV），Image1对象的Width为100%是指bodyright层有多宽，Image1就有多宽。 图2.4-3 在页面上加入图形显示控件2进入Image1属性窗口，找到ImageUrl属性（图片路径），点击，弹出选择图像框图2.4-3图形显示控件加载图片文件3点击images文件夹，从中选择所要的图像文件，点“确定”。 图2.4-4图形显示控件加载图片文件4最简单的图片加载方法是，在网页处于设计视图时，将选中的图片文件直接拖到网页之中，然后用鼠标调整大小。注意：此操作使用为工具箱内HTML项中的img对象。2.4.2加载flash文件加载方法有多种，但最常用的是使用下列代码进行加载。1. 点击中的源进入HTML代码页中，在logodiv层中输入下列代码。 %- -% 注意：这是格式代码，不能改动。看清value=./images/head.swf及embed src=./images/head.swf的值是一样的。Width及height可以调整，但也要一致。注意：有时embed可以不用，flash文件同样会显示。但考虑兼容性不同浏览器及版本，一般保留embed。小结1母版页是网站中非常重要的页面，可以决定整个网站或一类页面的一致性，必须掌握。2CSS样式可减小网站布局和美化的工作量，在网站布局及美化中至关重要，必须学会，深入了解。3Flash，图片，音乐等是网站之中不缺少的元件，如何使用应该掌握。第3章 栏目页操作栏目是一个新闻网站的基础，所有新闻最终都归类到相应的栏目之中。栏目名应该是动态的可以随时增加或修改调整的。甚至各栏目在网站中排布的位置也是可调整的。这样的新闻网站才具有适应性。栏目页的主要功能是对栏目进行以下操作：增加栏目项，修改栏目名，删除栏目项，变动栏目项所在位置。3.1 建立栏目文件夹及栏目管理页不同功能的操作放在不同的文件夹中，非常有利于网站的权限管理。分离的权限管理可以使得网站权限清晰，层次分明，同时减少权限管理的工作量。3.1.1 建立栏目及新闻文件夹在“解决方案资源管理器”的F:WebNews中右击，再点新建文件夹，分别建立LMIO和NEWIO文件夹，用于存放栏目操作页和新闻操作页，如图3.1-1。建立不同文件夹的目地是方便进行“权限管理”。 图3.1-1 建立栏目文件夹和新闻文件夹3.1.2 新建栏目管理页为统一网站样式布局，此页是建立在母版页的基础之上，由母版页决定了其基本的布局格式。这是本网站建立的第一个页面，步骤非常详细，之后的网页新建过程就会略过。1在LMIO文件夹上右击，点击“添加新项”。如图3.1-2。图3.1-2 新建栏目操作页2选中“WEB窗体”，在名称栏中改名为“lmio.aspx”，勾选中“选择母版页”，点“添加”。如图3.1-3图3.1-3 新建有母版页的栏目操作页LmIo.aspx3选择母版页，点“确定”。如图3.1-4图3.1-4 选中母版页4在lmio.aspx页的HTML代码页中改Title=无标题页，如图3.1-5。为Title=栏目操作，如图3.1-6，此为网页的标题名。要养成修改页面标题的好习惯。图3.1-5 修改前的代码图3.1-6 修改以后的代码3.2 栏目页设计制作准备点lmio.aspx页的“设计”进入设计视图，点图标打开工具箱。图3.2-1左边为存放所有控件对象的工具箱，右边为设计视图。工具箱中的控件对象要加入到网页中才能发挥作用。页面中加入工具箱对象的方法有多种，可以在工具箱中用鼠标点住控件对象将其拖入到页面，也可以直接在工具箱中鼠标双击要加入的控件对象到光标所在点。图3.2-1 工具箱中控件对象加入页面操作3.3 栏目页中GridView对象操作3.3.1 加入GridView1对象显示表格数据是软件开发中的一个基本任务。ASP.NET 提供了许多工具来在网格中显示表格数据，GridView 控件是其中最常用的一种，功能非常强大。通过使用 GridView 控件，可以显示、编辑和删除多种不同的数据源中的数据。要做好网站必须学精GridView的使用。使用 GridView 可以执行以下操作：l 通过数据源控件自动绑定和显示数据。l 通过数据源控件对数据进行选择、排序、分页、编辑和删除。还可以通过执行以下操作来自定义 GridView 控件的外观和行为：l 指定自定义列和样式。l 利用模板创建自定义用户界面 (UI) 元素。l 通过处理事件将自己的代码添加到 GridView 控件的功能中。进入lmio.aspx的设计视图，在DIV框中点一下，让光标进入之中（目地是将以后加入的对象放入此DIV层中），然后双击“工具箱”中的GridView，将其加入到网页中成GridView1对象（此举为加入网格，用于显示数据库中的数据）。如图3.3-1为加入网页后GridView1对象的初始状态。图3.3-1 GridView对象3.3.2 GriaView1的任务GriaView是专门用于显示及操作表格数据的对象。要让GriaView显示及操作数据，就必须将GriaView和数据库中的表或抽取数据的SQL命令进行绑定。“GriaView任务”就是进行数据绑定的工具。如图3.3-2。1启动GriaView任务将鼠标的箭头移入GriaView1对象之中，并点击GriaView1对象右上角的，出现GriaView任务。图3.3-2 GridView1对象的任务2新建GriaView1对象的数据源点“选择数据源”的下拉按钮，点“新建数据源”，再点“数据库”，点“确定”。如图3.3-3。图3.3-3 数据源的ID值注意：此处对数据源没有重新取名，使用得是系统提供的默认名SqlDataSource1。以后要养成改名的好习惯，因为取一个见名识意的名字能让以后的维护工作少走弯路。3.3.3 配置GriaView1对象的数据源1. 点下拉框，选中ASPNETDB.MDF数据库，点“下一步”，如图3.3-4。图3.3-4 选择网站中的数据库连接注意：第一次进行数据连接时会出现ASPNETDB.MDF数据库名，以后不会出现。如果数据库名没有出现，最简单可靠的方法是将VS系统关掉，重新再打开，即可，还否则是未建数据库。2. 改ConnectionString为Conn，如图3.3-5。点“下一步”。图3.3-5 修改连接字串名注意：以后本网站对数据库的联接就使用Conn，再也不会出现ASPNETDB.MDF了。3.3.4 GriaView1对象数据源中表配置1. 选中“指定来自表或视图的列”，在名称下拉框中选中“栏目”表，并如下勾选栏目表的列（自动生成SQL代码：SELECT lmid, 栏目名, 说明, 排序 FROM 栏目）。图3.3-6指定在页面上显示的字段。勾选中的字段会在页面中显示表中的数据记录，未勾选的则不会。图3.3-6 栏目表数据要显示的列勾选2. 点“ORDER BY（R）”，此为对从数据库栏目表中选择出来的数据进行排序，在排序方式中，选中排序（排序列），即使用栏目号进行从小到大的排序。自动生成SQL代码：SELECT lmid, 栏目, 说明, 排序 FROM 栏目 ORDER BY 排序，如图3.3-7。点“确定”，回到上一页。图3.3-7 配置数据记录的排序3.3.5 数据源中生成SQL代码在“高级SQL生成选项”框，勾中“生成INSERT、UPDATE和DELETE”（此时会自动在页面中生成SQL的插入、更新和删除等命令代码），如图3.3-8。点“确定”。回到上一页，点“下一步”，再点“完成”。要对数据进行操作就必须在页面生成INSERT、UPDATE和DELETE代码。以后用存贮过程代替。图3.3-8 勾选生成INSERT、UPDATE和DELETE，生成SQL操作代码注意：不能勾选“使用开放式并发”项，这是高级用法，等水平较高时再去掌握。3.4 GriaView对象的列操作3.4.1 编辑GriaView1对象中列将鼠标的箭头移入GriaView1对象之中，点击GriaView1对象右上角的，出现GriaView任务，勾中“启用编辑”，“启用删除”项，再去点击“编辑列”。如图3.4-1图3.4-1 操作GriaView1对象的命令按钮列3.4.2 调整GriaView1中用于显示的列1选中CommandField列，点，将其移到最下面，如图3.4-2。图3.4-2调整GriaView1中显示列的顺序2删除“lmid”列，如图3.4-2。再点“确定”。Lmid为栏目编号，由系统生成，用户管不到，所以不要显示出来。图3.4-2删除GriaView1中不想显示的列3.4.3 GriaView对象的属性设置将鼠标的箭头移入GriaView1对象之中，右击鼠标，在菜单中点击“属性”，打开属性窗口，在属性窗中找到“Width”，输入96%作为GriaView1对象的宽度。如图3.4-3图3.4-3 设置GriaView1对象的宽度3.5 栏目页中FormView对象FormView 控件用于一次显示数据源中的一个记录。在使用 FormView 控件时，可创建模板来显示和编辑绑定值。这些模板包含用于定义窗体的外观和功能的控件、绑定表达式和格式设置。FormView 控件通常与 GridView 控件一起用于主控/详细信息方案。FormView 控件通常用于更新和插入新记录。该控件通常用于主/从方案，在此方案中，主控件的选定记录决定要在 FormView 控件中显示的记录。FormView 控件依赖于数据源控件的功能执行诸如更新、插入和删除记录的任务。即使 FormView 控件的数据源有多条记录，该控件一次也仅显示一条数据记录。FormView是数据录入操作的好帮手。3.5.1 加入FormView1对象FormView1对象在此只是用于一个数据行的新增操作，即用于一个栏目项的新增。在DIV框中点一下，让光标进入之中，双击工具箱中的“FormView”，加入一个FormView1对象，用回车键下移FormView1对象，和GriaView1对象隔开一点。图3.5-1。图3.5-1 加入FormView1对象3.5.2 为FormView1对象配置数据源点击FormView1对象的按钮，在“选择数据源”下拉框中选中“SqlDataSource1”。即可。图3.5-2 配置FormView1对象的数据源注意：FormView1对象和GriaView1对象共用数据源SqlDataSource1，可简化很多操作，如数据刷新。3.5.3 删除FormView1多余的模板FormView对象中有三个常用模板：ItemTemplate模板，EditItemTemplate模板，InsertItemTemplate模板。ItemTemplate模板作用为显示数据，EditItemTemplate模板的作用为编辑数据，InsertItemTemplate模板的作用为插入数据。本页中只使用InsertItemtemplate模板以加入数据。其他两个模块中的内容可删除。1删除ItemTemplate模板：点FormView1对象的按钮，点“编辑模板”，选择ItemTemplate模板，在ItemTemplate模板中用鼠标拖曳选中全部对象，按Delete健删除。如图3.5-3，图3.5-4此为ItemTemplate模板，将其全部删空。再选择EditItemTemplate模板，将其也全部删空图3.5-3 进入ItemTemplate模板图3.5-4 删空ItemTemplate模板2删除EditItemTemplate模板：点FormView1对象的按钮，点“编辑模板”，选择EditItemTemplate模板，在EditItemTemplate模板中用鼠标拖曳选中全部对象，按Delete健删除。如图3.5-5图3.5-5 删空EditItemTemplate模板3.6 FormView1中的模板布局网页中大的布局目前最常用的是使用DIV+CSS完成，小的局部布局使用表格（Table），方便快捷，极大减少代码量。此处是为FormView1中一个模板的布局，属局部小块，所以使用Table来进行布局。3.6.1 对InsertItemTemplate模板用Table美化布局1. 选择InsertItemTemplate模板，对其用表格（Table）进行美观化处理。图3.6-1还未美化。图3.6-1 进入InsertItemTemplate模板2. 点击将光标移到“取消”按钮后，回车键使其下移，点“菜单”中表（A），点“插入表”。图3.6-2让出加入表（Table）的空间。图3.6-2 回车下移让出空间3. 在“插入表格”中输入行数为2，列数为3，具体值如下图所示。点“确定”。图3.6-3表格工具中行数，列数，指定宽度，边框等都是要关注的数值。图3.6-4为页面中插入的表。图3.6-3 插入2行3列Table网格图3.6-4 T