visualstudioc网页制作完全手册.doc

visualstudioc网页制作完全手册.doc

《visualstudioc网页制作完全手册.doc》由会员分享，可在线阅读，更多相关《visualstudioc网页制作完全手册.doc（245页珍藏版）》请在冰点文库上搜索。

新闻网站制作详解

第0章系统特点

实用的新闻内容网站管理系统，可通过后台管理系统创建各种类型的文章栏目，灵活设置页面显示版块；可自定义会员类型，针对不同会员类型授权不同操作管理权限；具有丰富的广告发布形式和多项辅助功能，适合创建新闻内容网站、大型文章网站。

1、自由创建新闻中心栏目

可自由创建一个或多个新闻中心型栏目，新闻中心型栏目前台具有新闻首页、检索页、搜索页、内容页，各页面均可自由设置页面布局，可自由输出新闻文章列表、图文新闻等版块。

可以用来建立富有层次的新闻文章栏目。

创建多个新闻中心栏目，可以构建大型文章网站。

2、自由创建多种类型的文章内容栏目，适合不同规模网站的需要

1）分类文章型栏目：

访问栏目直达检索页、适合建立小型文章栏目。

2）章节文章型栏目：

用于大篇幅的手册、论文、作品、法律法规等，按章节分页显示。

3）模版单页型栏目：

用于建立只有一个网页的栏目，可自由设置页面布局

3、任意的首页排版布局

通过修改模版可任意调整首页版块布局，支持多个首页版块，每个版块可自由编辑或选择插入网站中的动态内容。

4、灵活的内页排版布局

每个栏目的功能网页都可以自由选择使用通栏、左栏、右栏、三栏模版页，自由增减版块，自由编辑版块内容或插入显示模块。

5、文章动态输出

1）可生成动态文章插件，将新闻文章动态显示在网站任何页面或内容中

2）可生成JS代码插件，将新闻文章内容插入任何外部网站

6、可自由控制会员操作权限

可以将不同栏目分别授权，并授权给不同会员

7、独立会员系统，自由设定会员类型

系统自带功能强大的会员系统，可以自由设定会员类型，自由分配每一类、每一位会员的权限。

8、强大的网站广告管理系统

支持弹出窗口、旗帜广告、通栏广告、浮动广告、对联广告、挂角广告等广告类型。

9、功能强大的在线网页编辑器

可任意编辑图文内容，插入多幅图片、FLASH、媒体，图文混排，还具有查找替换等功能。

10、网站辅助功能丰富，具有以下辅助功能

1）动态缓存系统：

针对不同栏目设置缓存，提高访问速度

2）统计分析系统：

网站访问统计、计数功能，特有的顾客兴趣分析功能

3）投票调查系统：

可创建多个投票组，插入到网站的任何位置

4）友情链接系统：

发布图片或文字友情链接，插入到网站任何位置

5）数据备份系统：

实时倒出网站数据库进行数据备份

注意：

以上描述是对一个标准新闻网站的全功能定义，本书建立的新闻网站没有做全这些功能。

读者可以自己添加。

第1章新闻网站基础工作

该新闻网站可以使用VisualStudio2008系统开发，也可以使用VS2005系统开发。

但建议使用VS2008来做。

1.1建立网站文件夹

1.1.1启动VS2008

图1.1-1启动开发系统vs2008

1.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、打开VS的命令提示，输入aspnet_regsql，用默认的数据库（aspnetdb）。

2、打开VS，依次：

工具-->选项-->数据库工具-->数据连接-->SQLServer实例名称（默认为空），改为你的服务器名称。

3、还是VS，工具-->连接到数据库-->服务器名（选择刚才的服务器），可以按你要求选择Windows或SQLServer身份验证，然后数据库选择刚才的aspnetdb。

测试OK后，在高级里复制出语句DataSource=KLXQXJ\MYSQLSERVER;InitialCatalog=aspnetdb;UserID=sa

4、打开IIS:

默认网站-->属性-->ASP.NET-->编辑全局配置-->常规-->连接字符串管理器LocalSqlServer的连接字符串改为DataSource=Server;InitialCatalog=aspnetdb;UserID=sa;Password=sa（后面的sa用你的密码替换）。

5、还是在IIS:

默认网站-->属性-->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用户密码为admin@600，use用户密码为user@600。

如图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代码内容。

CREATEPROCEDURECreate_table--dbo.StoredProcedure1 --存储过程名字在此处自己生成

AS

/* Createtable栏目

（lmidintidentityprimarykey,--栏目编号

栏目nvarchar（30）,

说明nvarchar（100）,

排序int

）

Createtable新闻

（nwidbigintidentityprimarykey,--新闻编号

lmidint,--本新闻所属的栏目

标题nvarchar（30）,

作者nvarchar（10）,

时间datetimedefault（getdate（））,--上传的时间

次数int,--文章点击打开的次数

内容ntext,

审核nvarchar（20）,

constrainttblm_newsforeignkey（lmid）REFERENCES栏目（lmid）

ONDELETECASCADEONUPDATECASCADE--建立外键约束--层叠删除--层叠更新

）*/

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（CascadingStyleSheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制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建立母版页文件夹master

2．母版页文件的建立

在master文件夹上右击，点选“添加新项”，在添加新项框中，选择母版页，将名称中的名字改为MyMaster.master，点添加。

如图2.1-2。

母版页可以根据风格需求变化建立多个。

图2.1-2建立母版页文件MyMaster.master

2.1.2母版页的设计布局

在HTML设计器中创建HTML页或ASP.NET网页时，对象的物理布局是从上至下。

其布局形式有两种，一是流式布局，二是两维方式布局。

默认情况下，当在浏览器中呈现页时，流式布局将网页中的对象按照相同的从上至下顺序呈现。

两维方式布局是对网页中的对象使用水平和垂直坐标在页中的相应位置定位对象。

流布局：

如果对象没有任何定位样式属性，则它们将在页中从上至下、从左至右或从右至左排列，具体取决于页的dir属性的设置、对象的容器对象或浏览器的语言设置。

任何Web浏览器都可显示使用此布局的HTML文档。

如果调整页的大小，对象有时将被重新定位。

使用流布局，可以使用table对象或使用div对象来对齐多个对象。

但是，对象不能重叠，只能包含嵌套，外观上显现为一层。

当调整页的大小时，对象会有移动。

两维定位：

应用绝对定位选项，可将对象放置在页中的精确位置。

也可为添加到页中的任何新对象指定定位选项。

定位选项在实现W3CHTML4.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代码如下：