visualstudioc网页制作完全手册簿

《visualstudioc网页制作完全手册簿》由会员分享，可在线阅读，更多相关《visualstudioc网页制作完全手册簿（239页珍藏版）》请在装配图网上搜索。

1、word新闻制作详解第0章 系统特点实用的新闻内容管理系统，可通过后台管理系统创建各种类型的文章栏目，灵活设置页面显示版块；可自定义会员类型，针对不同会员类型授权不同操作管理权限；具有丰富的广告发布形式和多项辅助功能，适合创建新闻内容、大型文章。1、自由创建新闻中心栏目可自由创建一个或多个新闻中心型栏目，新闻中心型栏目前台具有新闻首页、检索页、搜索页、内容页，各页面均可自由设置页面布局，可自由输出新闻文章列表、图文新闻等版块。可以用来建立富有层次的新闻文章栏目。创建多个新闻中心栏目，可以构建大型文章。2、自由创建多种类型的文章内容栏目，适合不同规模的需要1) 分类文章型栏目：访问栏目直达检索页

2、、适合建立小型文章栏目。2) 章节文章型栏目：用于大篇幅的手册、论文、作品、法律法规等，按章节分页显示。3) 模版单页型栏目：用于建立只有一个网页的栏目，可自由设置页面布局3、任意的首页排版布局通过修改模版可任意调整首页版块布局，支持多个首页版块，每个版块可自由编辑或选择插入中的动态内容。4、灵活的内页排版布局每个栏目的功能网页都可以自由选择使用通栏、左栏、右栏、三栏模版页，自由增减版块，自由编辑版块内容或插入显示模块。5、文章动态输出1)可生成动态文章插件，将新闻文章动态显示在任何页面或内容中2)可生成JS代码插件，将新闻文章内容插入任何外部 6、可自由控制会员操作权限可以将不同栏目分别授权

3、，并授权给不同会员7、独立会员系统，自由设定会员类型系统自带功能强大的会员系统，可以自由设定会员类型，自由分配每一类、每一位会员的权限。8、强大的广告管理系统支持弹出窗口、旗帜广告、通栏广告、浮动广告、对联广告、挂角广告等广告类型。9、功能强大的在线网页编辑器可任意编辑图文内容，插入多幅图片、FLASH、媒体，图文混排，还具有查找替换等功能。10、辅助功能丰富，具有以下辅助功能1) 动态缓存系统：针对不同栏目设置缓存，提高访问速度2) 统计分析系统：访问统计、计数功能，特有的顾客兴趣分析功能3) 投票调查系统：可创建多个投票组，插入到的任何位置4) 友情系统：发布图片或文字友情，插入到任何位置

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

5、 开发界面图1.1-4 工作界面在的开发界面中要重点知道以下几个命令图标：“刷新用于将外部复制到文件夹中文件加载显示到资源之中。“资源管理打开解决方案资源管理器窗口。“属性页面处于设计页打开属性窗口。“工具箱打开工具箱窗口。“设计进入网页的视图设计器界面。“源进入网页的HTML代码页。如图1.1-5。图1.1-5 常用的命令图标1.1.5 现有的的打开1对已经建立好的现有，且在“最近的项目图1.1-6 打开已有的界面2对在别的电脑上建立好的，要在本电脑上进展开发。操作过程是：第一步是先将整个文件夹直接复制过来，例如原电脑中文件夹为D:WebNews，复制过来可变为F:WebNews。注意是在根

6、目录之下D:，F:都是根目录，这是今后对程序调试跟踪的要求。第二步是点“菜单，点“打开，在“打开窗口中找到并选中F:WebNews文件夹，再点击“打开，即完成了从别的电脑复制的工作。如图1.1-7。图1.1-7 打开未列出的界面1.2 数据库建立1.2.1 参加数据库文件此处为简化操作，且为以后的安全做好准备，所以没有自己另外建立数据库，而直接使用的是由系统提供的安全数据库Aspnetdb.mdf，这样数据和安全数据共用一个数据库，这种共用完全可以应对任何中型企业对的根本要求。安全性能也不错。将鼠标移动到图标(1、打开VS的命令提示，输入aspnet_regsql，用默认的数据库(aspnet

7、db)。 2、打开VS，依次：工具-选项-数据库工具-数据连接-SQL Server实例名称(默认为空)，改为你的服务器名称。 3、还是VS，工具-连接到数据库-服务器名(选择刚刚的服务器)，可以按你要求选择Windows或SQL Server身份验证，然后数据库选择刚刚的aspnetdb。测试OK后，在高级里复制出语句Data Source=KLXQXJMYSQLSERVER;Initial Catalog=aspnetdb;User ID=sa 4、打开IIS:默认-属性-ASP.NET-编辑全局配置-常规-连接字符串管理器LocalSqlServer的连接字符串改为Data Source

8、=Server;Initial Catalog=aspnetdb;User ID=sa;Password=sa (后面的sa用你的密码替换)。 5、还是在IIS:默认-属性-ASP.NET-编辑全局配置-身份验证-选定启用角色管理。)1.2.2 配置安全在管理工具中点击“安全项图1.2-2 管理工具主页1.2.3 使用安全向导简化操作过程在安全页中点击“使用安全设置向导按部就班地配置安全性1.2.4 定义安全验证点“下一步，选中“通过Internet， 再点“下一步。互联网上的一般是采用这种格式。单位内部的如此多采用“通过局域网图1.2-4 访问方式选择“通过Internet1.2.5 启用角

9、色角色管理使得能够通过创建的类别称为“角色管理应用程序的授权。通过在用户上附加角色，可以通过角色控制对 Web 应用程序的不同局部或功能的访问，从而取代基于用户名的控制，或者作为对基于用户名的控制方式的补充。例如，员工应用程序可能具有诸如“经理(Managers)、“雇员(Employees)、“主管(Directors) 等角色，并为每种角色指定了不同的特权。用户可以具有多种角色。例如一个论坛中，有些用户可能同时具有“成员(Members) 和“版主(Moderators) 角色。每种角色定义了在站点中拥有不同的特权，同时具有两种角色的用户将可同时使用两组特权。角色是中权限的载体，一般说法是

10、：先对角色授权，再将角色赋给用户，用户就具有了角色的权限，一个角色可以赋给多个用户，一个用户也可以有多个角色。勾选中“为此启用角色， 点“下一步图1.2-5 启用角色1.2.6 创建角色为创立两个角色，分别取名为adminRo管理员，最高权限，useRo用户，负责新闻操作，点“下一步。图1.2-6 建立两个角色1.2.7 创建用户为创建两个用户，分别取名为admin管理员，最高权限，use用户，负责日常操作，点“下一步。 admin用户密码为admin600，use用户密码为user600。如图1.2-7。因为的架构还未建立起来，所以对的角色和用户设置访问权限规如此为时过早，等主体开发完成以后

11、再来设置访问规如此比拟恰当。此处点“完成，然后关闭配置工具。下一次ASP.NET管理工具的使用要等到网页完全做好，最后的访问权限设置工作时。注意：用户密码最少长度为7位，且要含有字母，数字，符号等多种，否如此系统不承认。图1.2-7 中创建两个用户后即关闭此工具1.3 数据表的建立在“解决网络方案资源管理器中先点击刷新，打开App_Data文件夹，找到数据库文件，双击打开，即查看数据库中的各种对象，以与新闻数据表的建立。数据库的查看是经常要做的工作，可以掌握对表中数据记录的操作是否正确，掌握存储过程的使用情况。如图1.3-1。图1.3-1 数据库文件1.3.2 建立用户数据表表是一切数据操作的

12、根底，没有表中存贮数据的支持，动态网页的自动建立完全不可能。在打开的数据库中建立数据表的方法有多种，可以手工建表，也可使用存储过程建表。本次开发使用存储过程建立数据表。注意：系统内部提供了很多的存储过程，用于安全管理，在你没有掌握之前，不要去改动，否如此会导致系统不能正常运行。你目前要用的存储过程只是你自己建立的存储过程。本站目前只使用两个表来进展新闻的根本操作。一个表是“栏目表：负责存贮栏目名，栏目排序，栏目说明等数据。栏目名用来对各新闻条分类，栏目排序用来决定栏目的网页中的排布位置。另一个表是“新闻表： 负责存贮新闻标题，栏目，作者，新闻发布时间，新闻内容，新闻查看次数，审核通过情况。在新

13、闻列表中显示新闻标题和时间，点击新闻标题即可查看新闻完整内容，作者，时间，点击次数。1.3.3 建表SQL代码图1.3-2 新建存贮过程2将存储过程的名由改为Create_table，并在AS和RETURN之间输入如下SQL代码内容。CREATE PROCEDURE Create_table -存储过程名字在此处自己生成AS/*Create table 栏目(lmid int identity primary key, -栏目编号 栏目 nvarchar(30), 说明 nvarchar(100), 排序 int )Create table 新闻( nwid bigint identity p

14、rimary 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

15、代码为建立数据表的代码。identity为定义自增列，让栏目号与新闻号可以自动增加。可减少工作量，并确保惟一性。使用外键约束可以让栏目表和新闻表中的数据保持一致，否如此会出现因为栏目表中某一栏目被删除，而此栏目名下的新闻在新闻表依然存在，导致出现数据不一致的错误。使用层叠删除，如此删除栏目表中的某一栏目，新闻表中此栏目名下的新闻会自动被删除。层叠更新如此是自动更改。1.3.4 运行SQL代码建表只运行建立表的SQL代码，先选中如下内容，点右键，再点“运行选定内容图1.3-3 在存贮过程之中运行SQL代码的方法1.4 查看建好的用户表建立表的SQL代码运行如没有报错，如此在表上右击后选“刷新，会

16、出现下右图，发现两个表“栏目表和“新闻“栏目和“新闻表，其它aspnet_打头的是系统提供的用于安全操作的表，在你还没有成为高手之前不要去动它们，否如此的安全性就不能得到保证。 图1.4-1 查看刚建立的表小结1掌握新建，打开，特别是打开复制过来的。2了解ASP.NET配置工具的使用，掌握安全验证的含义，了解劝角色，用户的含义。3掌握中数据库的建立，库内数据表的建立，SQL代码建立表的操作流程。掌握查看表的结构与内容。第2章 母版页和CSS文件使用 ASP.NET 母版页可以为应用程序中的页创建一致的布局。单个母版页可以为应用程序中的所有页或一组页定义所需的外观和标准行为。然后可以创建包含要显

17、示的内容的各个内容页。当用户请求内容页时，这些内容页与母版页合并以将母版页的布局与内容页的内容组合在一起输出。母版页实际由两局部组成，即母版页本身与一个或多个内容页。母版页为具有扩展名 .master如 MySite.master的 ASP.NET 文件，它具有可以包括静态文本、HTML 元素和服务器控件的预定义布局。母版页提供了开发人员通过传统方式创建的功能，这些传统方式包括重复复制现有代码、文本和控件元素；使用框架集；对通用元素使用包含文件；使用 ASP.NET 用户控件等。母版页具有下面的优点：l 使用母版页可以集中处理页的通用功能，以便可以只在一个位置上进展更新。l 使用母版页可以方便

18、地创建一组控件和代码，并将结果应用于一组页。例如，可以在母版页上使用控件来创建一个应用于所有页的菜单。l 通过允许控制占位符控件的呈现方式，母版页使您可以在细节上控制最终页的布局。l 母版页提供一个对象模型，使用该对象模型可以从各个内容页自定义母版页。CSSCascading Style Sheet，可译为“层叠样式表或“级联样式表是一组格式设置规如此，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式别离。页面内容存放在HTML文档中，而用于定义表现形式的CSS规如此如此存放在另一个文件中或HTML文档的某一局部，通常为文件头局部。将内容与表现形式别离，不仅

19、可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器的加载时间。层叠样式表极大地提高了工作效率样式表定义如何显示 HTML 对象。样式通常保存在外部的 .css 文件中。通过编辑一个简单的 CSS 文档，外部样式表可同时改变站点中所有页面的布局和外观。由于允许同时控制多重页面的样式和布局，CSS 可称得上 WEB 设计领域的一个突破。作为开发者，能够为每个 HTML 对象定义样式，并应用于任意多的页面中。如需进展全局的更新，只需简单地改变样式，然后中的所有相应对象都会自动地更新。CSS布局的优点，采用CSS布局比对传统的TABLE网页布局有以下几个显著优势：l 表现和内

20、容相别离：将设计局部剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。这样的页面对搜索引擎更加友好。l 提高页面浏览速度：对于同一个页面视觉效果，采用CSS布局的页面容量要比TABLE编码的页面文件容量小得多，前者一般只有后者的1/2大小。浏览器就不用去编译大量冗长的标签。l 易于维护和改版：只要简单的修改几个CSS文件就可以重新设计整个的页面。l 使用CSS布局更符合现在的W3C标准。2.1 母版页2.1.1 母版页文件与所在文件夹母版页文件和CSS样式文件这两个文件组合用于的总体样式设计，可以使整个的风格一致，是整体布局，美观设计最重要的方式方法。一定要为母版页和CSS样式文件

21、建立文件夹，由于系统在开发时和运行时，其绝对路径的不同，经常会出现找不到文件的错误，所以在系统开发时对网页各种文件的操作一定只能使用相对路径，这样可以保证在开发时和运行时文件路径的一致性。注意：开发时常用的相对路径格式为 / 表示根路径； ./ 表示上一级路径。1在“解决方案资源管理器的F:WebNews中右击，再点新建文件夹，建立MASTER文件夹，专用于存放母版页。如图2.1-1。图2.1-1 建立母版页文件夹master2母版页文件的建立在master文件夹上右击，点选“添加新项，在添加新项框中，选择母版页，将名称中的名字改为MyMaster.master，点添加。如图2.1-2。母版页

22、可以根据风格需求变化建立多个。2.1.2 母版页的设计布局在 HTML 设计器中创建 HTML 页或 ASP.NET 网页时，对象的物理布局是从上至下。其布局形式有两种，一是流式布局，二是两维方式布局。默认情况下，当在浏览器中呈现页时，流式布局将网页中的对象按照一样的从上至下顺序呈现。两维方式布局是对网页中的对象使用水平和垂直坐标在页中的相应位置定位对象。流布局：如果对象没有任何定位样式属性，如此它们将在页中从上至下、从左至右或从右至左排列，具体取决于页的 dir 属性的设置、对象的容器对象或浏览器的语言设置。任何 Web 浏览器都可显示使用此布局的 HTML 文档。如果调整页的大小，对象有时

23、将被重新定位。使用流布局，可以使用table 对象或使用div 对象来对齐多个对象。但是，对象不能重叠，只能包含嵌套，外观上显现为一层。当调整页的大小时，对象会有移动。两维定位：应用绝对定位选项，可将对象放置在页中的准确位置。也可为添加到页中的任何新对象指定定位选项。定位选项在实现 W3C HTML 4.0 标准的任何浏览器中都有效。常用的定位选项：absolute：由 left, right、top 和 bottom 样式属性的任意组合定义对象在网页中的位置。位置 0,0 基于当前对象的父级定义，父级是具有定位信息的第一个容器对象。例如，如果当前对象在具有定位信息的 div 对象内，如此将基

24、于 div 对象的位置来计算绝对定位信息。如果当前对象没有带定位信息的容器对象，如此将基于 body 对象计算定位信息。relative：由 left 和 top 样式属性定义对象在网页中的位置。此选项与 absolute 的区别在于，0,0 位置是根据对象在页面流中的位置来定义的。具有相对定位并且 top 和 left 都设置为 0 的对象将在流中正常显示。注意：使用绝对或相对定位的对象在页中可能会不按照页标记声明中的顺序显示，这可能会引起混乱。例如，在“源视图中，可能将某个按钮定义为标记中的第一个对象，但设置它的定位后，该按钮可能在呈现的页或“设计视图中显示为最后一个对象。static：对

25、象使用流布局呈现；即对象不使用两维定位。如果要对重写设置该设置继承自主题或样式表的单个控件设置定位选项，如此可选择此选项。注意：以上文字在你成为布局高手时来看，就不难了。本采用流式布局，使用DIV加CSS完成，要记住的是DIV对象有嵌套包含关系，此时设计布局的DIV，是定位各个大的板块，今后各板块的DIV都是容器对象，要在其中包含很多其它对象。1根本布局图示的整体布局主要是对母版页进展设计。本各大板块布局与大致功能划分如图2.1-3所示。图2.1-3 各页面的根本布局2布局的HTML代码上面布局图示对应的html代码如下： 注意：一个完整的div格式为 ；看清DIV的嵌套包含关系。class=

26、后面的类名要和CSS文件中类名一致。2.1.3 母版页的HTML主要代码图2.1-4 布局的HTML代码构成注意：ContentPlaceHolder控件为母版页中的内容定义一个相对区域，并且呈现在内容页中发现的相关 Content 控件内的所有文本、标记和服务器控件。ContentPlaceHolder控件在母版页中至少要有一个。看清标记说明，查清和布局的HTML代码的区别。如在Visual 2005中开发，如此绿色下划线不会出现。2.2 CSS样式文件2.2.1 建立CSS样式文件 在“解决方案资源管理器的F:WebNews中右击，再点新建文件夹，建立CSS文件夹。在CSS文件夹上右击，点

27、选“添加新项。在添加新项框中添加名为MyStyle.css的样式文件。样式文件是用于定义html页中各种对象的属性值的文本，属性值一般有：宽度，高度，颜色，字体，位置，动作等多种，是页面美工的关键文件。如图2.2-1。注意：样式文件的路径与引用问题。2.2.2 CSS文件的代码结构在myStyle.css页面中，先输入 .divAll 说明： .表示类，divAll为类名，必须和html页中各对象中的class后面指定的类名一致。中为类的样式参数地。在中点击，让光标进入其中，这时左上角工具条中的“生成样式变为可用状态，点击“生成样式，打开“修改样式，在其中可以定义样式。最后点“确定，就会自动生

28、成样式参数值。1输入样式类名和母版页中存在的类名完全一样，且一一对应，母版页中Class=后面的就是类名， CSS文件中的类名前要加上一个“，启用“生成样式工具，如图2.2-2。生成样式工具图2.2-2 启动“生成样式工具2使用“生成样式工具。对各个类名进展反复操作，对页面中所有各对象的样式都用此样式工具生成一个。图2.2-2 使用“生成样式工具生成样式属性值3在生成的完整样式属性值bodytext-align: center; /*居中 */font-size: 14px; /* 字体大小 */.divAllfont-family: 宋体, Arial, Helvetica, sans-se

29、rif; /* 字体类型 */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; /* 边

30、框线宽度 */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

31、;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的靠左会作

32、用于其内含的对象，body的居中对divall内含的对象不起作用。如果divall内部还包含有tws层，也设了属性，如此tws层的已设定属性优先起作用，tws层中未设定的属性由外层中设定的属性起作用，依次外推。如还有些属性各层都未设置，如此起用默认值。Divall如未设宽度，如此其默认宽度为body的宽度容器的宽度，这样body的居中效应在divall层上就不能看到，因为已占满了宽度，要看到居中效果，内层的宽度要小于容器的宽度。高度height局部以后要删除或调整，以防止器容中的对象溢出越界造成布局破坏。删除高度数值如此会自动胀大以适应内含的对象高度，达到适应高度的目地，但此做法有时会导致块与

33、块之间的高度不一致。2.3 CSS文件的应用要用CSS文件控制母版页中所有对象的属性，就要将样式文件和网页文件结合起来，才能让样式文件中定义的样式属性作用到网页中各个对象类。CSS文件的引用就是将样式文件和网页文件相结合，让网页文件中对象能够引用到样式文件中定义的样式值，并相应变化。此步操作必不可少。2.3.1 引用CSS文件点击源进入母版页的HTML代码页，从“解决方案资源管理器中找到刚制作的样式文件，将其拖入到母版页 至 之间2拖动文件至此位置，CSS文件只能放在此处1点击拖动此文件图2.3-1 页面中引用CSS文件2.3.2 查看CSS样式作用结果点击“设计，进入设计页面后即可看到布局结

34、果。注意：此处为了结果的美观，对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打开“解决方案资源管理器，点击“刷新图标，即可看到Im

35、ages的文件夹与其中刚刚参加的图片文件 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属性图片路径，点击，弹出选择图像框3点击images文件夹，从

36、中选择所要的图像文件，点“确定。 4最简单的图片加载方法是，在网页处于设计视图时，将选中的图片文件直接拖到网页之中，然后用鼠标调整大小。注意：此操作使用为工具箱内HTML项中的img对象。加载方法有多种，但最常用的是使用如下代码进展加载。1. 点击中的源进入HTML代码页中，在logodiv层中输入如下代码。 %- -% 注意：这是格式代码，不能改动。看清value=./images/head.swf与embed src=./images/head.swf的值是一样的。Width与height可以调整，但也要一致。注意：有时embed可以不用，flash文件同样会显示。但考虑兼容性不同浏览器与

37、版本，一般保存embed。小结1母版页是中非常重要的页面，可以决定整个或一类页面的一致性，必须掌握。2CSS样式可减小布局和美化的工作量，在布局与美化中至关重要，必须学会，深入了解。3Flash，图片，音乐等是之中不缺少的元件，如何使用应该掌握。第3章 栏目页操作栏目是一个新闻的根底，所有新闻最终都归类到相应的栏目之中。栏目名应该是动态的可以随时增加或修改调整的。甚至各栏目在中排布的位置也是可调整的。这样的新闻才具有适应性。栏目页的主要功能是对栏目进展以下操作：增加栏目项，修改栏目名，删除栏目项，变动栏目项所在位置。3.1 建立栏目文件夹与栏目管理页不同功能的操作放在不同的文件夹中，非常有利于

38、的权限管理。别离的权限管理可以使得权限清晰，层次清楚，同时减少权限管理的工作量。3.1.1 建立栏目与新闻文件夹在“解决方案资源管理器的F:WebNews中右击，再点新建文件夹，分别建立LMIO和NEWIO文件夹，用于存放栏目操作页和新闻操作页，如图3.1-1。建立不同文件夹的目地是方便进展“权限管理。 图3.1-1 建立栏目文件夹和新闻文件夹3.1.2 新建栏目管理页为统一样式布局，此页是建立在母版页的根底之上，由母版页决定了其根本的布局格式。这是本建立的第一个页面，步骤非常详细，之后的网页新建过程就会略过。1在LMIO文件夹上右击，点击“添加新项。如图3.1-2。图3.1-2 新建栏目操作

39、页2选中“WEB窗体，在名称栏中改名为“，勾选中“选择母版页，点“添加3选择母版页，点“确定图3.1-4 选中母版页Title=无标题页，如图3.1-5。为Title=栏目操作，如，此为网页的标题名。要养成修改页面标题的好习惯。图3.1-5 修改前的代码图3.1-6 修改以后的代码3.2 栏目页设计制作准备点“设计进入设计视图，点图标打开工具箱。左边为存放所有控件对象的工具箱，右边为设计视图。工具箱中的控件对象要参加到网页中才能发挥作用。页面中参加工具箱对象的方法有多种，可以在工具箱中用鼠标点住控件对象将其拖入到页面，也可以直接在工具箱中鼠标双击要参加的控件对象到光标所在点。图3.2-1 工具

40、箱中控件对象参加页面操作3.3 栏目页中GridView对象操作3.3.1 参加GridView1对象显示表格数据是软件开发中的一个根本任务。ASP.NET 提供了许多工具来在网格中显示表格数据，GridView 控件是其中最常用的一种，功能非常强大。通过使用 GridView 控件，可以显示、编辑和删除多种不同的数据源中的数据。要做好必须学精GridView的使用。使用 GridView 可以执行以下操作：l 通过数据源控件自动绑定和显示数据。l 通过数据源控件对数据进展选择、排序、分页、编辑和删除。还可以通过执行以下操作来自定义 GridView 控件的外观和行为：l 指定自定义列和样式。

41、l 利用模板创建自定义用户界面 (UI) 元素。l 通过处理事件将自己的代码添加到 GridView 控件的功能中。进入lmio.aspx的设计视图，在DIV框中点一下，让光标进入之中目地是将以后参加的对象放入此DIV层中，然后双击“工具箱中的GridView，将其参加到网页中成GridView1对象此举为参加网格，用于显示数据库中的数据。如GridView1对象的初始状态。图3.3-1 GridView对象3.3.2 GriaView1的任务GriaView是专门用于显示与操作表格数据的对象。要让GriaView显示与操作数据，就必须将GriaView和数据库中的表或抽取数据的SQL命令进展

42、绑定。“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

43、. 点下拉框，选中数据库，点“下一步，如图3.3-4。图3.3-4 选择中的数据库连接注意：第一次进展数据连接时会出现数据库名，以后不会出现。如果数据库名没有出现，最简单可靠的方法是将VS系统关掉，重新再打开，即可，还否如此是未建数据库。2. 改ConnectionString为Conn，如图3.3-5。点“下一步。图3.3-5 修改连接字串名注意：以后本对数据库的联接就使用Conn，再也不会出现了。3.3.4 GriaView1对象数据源中表配置1. 选中“指定来自表或视图的列，在名称下拉框中选中“栏目表，并如下勾选栏目表的列自动生成SQL代码：SELECT lmid, 栏目名, 说明, 排

44、序 FROM 栏目。图3.3-6指定在页面上显示的字段。勾选中的字段会在页面中显示表中的数据记录，未勾选的如此不会。图3.3-6 栏目表数据要显示的列勾选2. 点“ORDER BYR，此为对从数据库栏目表中选择出来的数据进展排序，在排序方式中，选中排序排序列，即使用栏目号进展从小到大的排序。自动生成SQL代码：SELECT lmid, 栏目, 说明, 排序 FROM 栏目 ORDER BY 排序，如图3.3-7。点“确定，回到上一页。图3.3-7 配置数据记录的排序3.3.5 数据源中生成SQL代码在“高级SQL生成选项框，勾中“生成INSERT、UPDATE和DELETE此时会自动在页面中生

45、成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 操作G

46、riaView1对象的命令按钮列3.4.2 调整GriaView1中用于显示的列1选中mandField列，点，将其移到最下面，如图3.4-2。2删除“lmid列，如图3.4-2。再点“确定。Lmid为栏目编号，由系统生成，用户管不到，所以不要显示出来。3.4.3 GriaView对象的属性设置将鼠标的箭头移入GriaView1对象之中，右击鼠标，在菜单中点击“属性，打开属性窗口，在属性窗中找到“Width图3.4-3 设置GriaView1对象的宽度3.5 栏目页中FormView对象FormView 控件用于一次显示数据源中的一个记录。在使用 FormView 控件时，可创建模板来显示和编

47、辑绑定值。这些模板包含用于定义窗体的外观和功能的控件、绑定表达式和格式设置。FormView 控件通常与 GridView 控件一起用于主控/详细信息方案。FormView 控件通常用于更新和插入新记录。该控件通常用于主/从方案，在此方案中，主控件的选定记录决定要在 FormView 控件中显示的记录。FormView 控件依赖于数据源控件的功能执行诸如更新、插入和删除记录的任务。即使 FormView 控件的数据源有多条记录，该控件一次也仅显示一条数据记录。FormView是数据录入操作的好帮手。3.5.1 参加FormView1对象FormView1对象在此只是用于一个数据行的新增操作，即

48、用于一个栏目项的新增。在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多余的

49、模板FormView对象中有三个常用模板：ItemTemplate模板，EditItemTemplate模板，InsertItemTemplate模板。ItemTemplate模板作用为显示数据，EditItemTemplate模板的作用为编辑数据，InsertItemTemplate模板的作用为插入数据。本页中只使用InsertItemtemplate模板以参加数据。其他两个模块中的内容可删除。1删除ItemTemplate模板：点FormView1对象的按钮，点“编辑模板此为ItemTemplate模板，将其全部删空。再选择EditItemTemplate模板，将其也全部删空图3.5-3

50、进入ItemTemplate模板图3.5-4 删空ItemTemplate模板2删除EditItemTemplate模板：点FormView1对象的按钮，点“编辑模板图3.5-5 删空EditItemTemplate模板3.6 FormView1中的模板布局网页中大的布局目前最常用的是使用DIV+CSS完成，小的局部布局使用表格Table，方便快捷，极大减少代码量。此处是为FormView1中一个模板的布局，属局部小块，所以使用Table来进展布局。3.6.1 对InsertItemTemplate模板用Table美化布局1. 选择InsertItemTemplate模板，对其用表格Table

51、进展美观化处理。图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 Table网格2行3列4. 将栏目，说明，排序与相对应的文本框移入到表格中，然后删除多余的“：。最后点“完毕模板编辑。图3.6-5

52、小布局完成。其实还应调整各文本框的宽度。图3.6-5 将对象移入表格之中3.6.2 FormView1对象初始显示模式设定将鼠标的箭头移入FormView1对象之中，点右键打开属性窗口，找到属性“DefaultMode，将其值由“ReadOnly改为“Insert图3.6-6 设置FormView1对象的显示模式为Insert3.6.3 网页运行效果查看在页面右键打开菜单，点击“在浏览器中查看。图3.6-7。 注意：一定要保存更改。图3.6-7 准备在网页中查看页面效果在运行页面中的各文本框中输入值，点“插入，各值即输入到了栏目表中。此处要多多插入一些数据。然后点“编辑，检查可修改数据，点“删

53、除，确定可删除数据。这是页面的测试工作，要多多进展插入、编辑、删除等操作，以判定代码正确可靠性。图3.7-1运行中的页面。可以发现的问题是：1页面多数操作根本正确，但页面不好看。可否美化？2点删除时没有任何提示，直接删除，不保险，容易误操作。可否给出提示？3排序中输入非数字时，出现错误。可否限定只能输入数字？4点更新操作时会出现错误。提示为同名错误。图3.7-1 页面运行效果测试最快的美化美化页面。先点击选中GriaView1对象，点击打开“GridView任务，点击“自动套用格式，从中选取自己认可的格式。同样对FormView1对象自动套用一样的格式类型，然后右击，点“在浏览器中查看。在浏览

54、器中查看的结果，页面好看多了。图3.7-2套用格式后的运行页面效果。3.7.2 网页操作提示-必须学会1先点击选中GriaView1对象，点击打开“GridView任务，点“编辑列。进入字段框，选中左边的mandField列，点击右边的“将此列转换为TemplateField，此列转换成了模板列。再从“可用字段中选择中TemplateField，点“添加，增加一个模板列。最后点“确定。图3.7-3模板列操作。此列要转换为模板列增加的模板列把普通列转换为模板列模板列2在“GridView任务中点“编辑模板，点下拉框，点Column3中的ItemTemplate，现如下图。右点选“删除，点剪切。图

55、3.7-4未剪切时。图3.7-4 编辑模板列3中的对象-剪切删除按钮3点下拉框，点Column4中的ItemTemplate，右点选“粘贴。点打开“GridView任务，点完毕模板编辑。图3.7-5删除按钮粘贴到Column4中。图3.7-5 编辑模板列4中的对象4点如下图中的“源图3.7-6 页面三种模式“设计、“拆分、“源5将删除命令按钮的 Text=删除修改为Text=，即在网页启动时先去调用CS代码页中的公共函数delete_bt()，然后将返回值赋给Text，此函数生成一段java代码。函数delete_bt存放在CS代码页之中，必须用public描述。图3.7-7中的修改位置提示。

56、注意：Eval(栏目).ToString()为数据源将栏目列的值传递过来。Eval为单向数据绑定。图3.7-7 在HTML页中对代码进展修改6在lmio.aspx 的CS代码页中输入建立公共函数delete_bt(string bts)，代码为：return 删除;，如图3.7-8所示。此行cs代码是生成一段客户端的JavaScript代码，目地返回一个弹出式的提示信息窗口，供用户选择操作。Bts参数是传过来的栏目名信息。双击打开代码窗口输入代码图3.7-8 在CS页中参加提示代码生成java代码图3.7-9 设计好的界面8运行时删除操作界面如图3.7-10：有详细提示信息出现。图3.7-10

57、 运行中的提示信息3.7.3 更新操作时的错误纠正1在使用更新操作时会出现如下的运行错误，原因是在GriaView1对象的内嵌对象之中由于系统在自动生成对象时出现了同名的对象即ID值一样的对象有两个或以上。修正错误的方法是：对同名的对象，将其中一个改为不同名即可。如图3.7-11所示。2进入Html代码页，按图3.7-11所示找到同名的对象，修改为不同名即可。图3.7-11 运行中的错误原因的修改3.7.4 排序输入中的数字限制1点FormView1对象的按钮，点“编辑模板， 选择InsertItemTemplate模板，找到“排序TextBox，先将宽度设为50px，再多“工具箱中将Regu

58、larExpressionValidator1验证控件拖到其所在单元格中。2设置RegularExpressionValidator1验证的四个属性值：ControlToValidate=排序TextBox，Display=Dynamic ，ErrorMessage=非数字，ValidationExpression=d1,3。如图3.7-12。图3.7-12 验证控件的正如此表达式说明：ControlToValidate=排序TextBox ：指明要验证的对象。即按正如此表达式限定该对象中的输入值。Display=Dynamic ：指明显示的类型为动态，即只在显示结果时占用空间。ErrorMessage=非数字 ：给出提示信息ValidationExpression=d1