最新新闻公告系统的制作

1、1. 创建网站创建网站为了方便网页测试，本例采用为了方便网页测试，本例采用“文件系统文件系统”方式创建网站。站点位置方式创建网站。站点位置是是d:newscenterd:newscenter。2. 自定义起始网页自定义起始网页网站建立后，系统默认的起始网页为网站建立后，系统默认的起始网页为,本例将以自定本例将以自定义的义的 作为起始网页，因此作为起始网页，因此将将删除删除。3. 复制原始文件复制原始文件把把 .rar文件解压到当前站点文件解压到当前站点文件夹中。文件夹中。4. 创建管理员账号创建管理员账号新闻公告系统除了可以对外显示公告外，还有内部的公告管理系统，新闻公告系统除了可以对外显示公

2、告外，还有内部的公告管理系统，在管理系统中可以发布、修改及删除新闻公告，因此只有具备管理权限的在管理系统中可以发布、修改及删除新闻公告，因此只有具备管理权限的管理员才能登录管理系统。管理员才能登录管理系统。asp.net 2.0asp.net 2.0为了安全起见，默认将登录者的数为了安全起见，默认将登录者的数据存储于内置的据存储于内置的数据库。数据库。visual web developervisual web developer为创建为创建“登录者账号登录者账号”设计了一套向导程序，设计了一套向导程序，设计者只要按部就班使用这套向导，即可轻易创建登录者账号。具体步骤设计者只要按部就班使用这套

3、向导，即可轻易创建登录者账号。具体步骤如下：如下：（1 1）选择菜单）选择菜单“网站网站”“asp.net“asp.net设置设置”。（2 2）在）在“asp.netasp.net网站管理工具网站管理工具”窗口中选择窗口中选择“安全安全”功能。功能。4. 创建管理员账号创建管理员账号（3 3）选择）选择 “ “使用安全设置向导按部就班地配置安全性使用安全设置向导按部就班地配置安全性”链接。链接。4. 创建管理员账号创建管理员账号（4 4）连续点击）连续点击“下一步下一步”按钮，直至出现如下画面，输入管理员的账号按钮，直至出现如下画面，输入管理员的账号资料。管理员的用户名是：资料。管理员的用户名

4、是：adminadmin，密码是：，密码是：123456123456，其余资料任意填写。赶，其余资料任意填写。赶写完成后，单击写完成后，单击“创建用户创建用户”按钮。按钮。4. 创建管理员账号创建管理员账号（5 5）管理员账号创建完成后，单击）管理员账号创建完成后，单击“下一步下一步”按钮，再单击按钮，再单击“完成完成”。单击单击“视图视图”/“/“服务器资源管理器服务器资源管理器”，右击，右击“aspnet_users”aspnet_users”数据表，选择数据表，选择“显示表数据显示表数据”，就可见到刚才创建的管理员数据。，就可见到刚才创建的管理员数据。1. 制作公告标题页面制作公告标题页

5、面（1 1）公告标题页面的文件名称为）公告标题页面的文件名称为 。在。在“解解决方案资源管理器决方案资源管理器”窗口中双击打开该文件。窗口中双击打开该文件。（2 2）配置数据源。添加）配置数据源。添加“sqldatasource”sqldatasource”控件，连接控件，连接当前站点下当前站点下 数据库，配置文件名为数据库，配置文件名为 ，显示所有字段，并按，显示所有字段，并按“news_datenews_date”字段降字段降序排列。序排列。1. 制作公告标题页面制作公告标题页面（3 3）添加）添加“gridviewgridview”控件，设置数据源为控件，设置数据源为“sqldataso

6、urce1sqldatasource1”,”,然后然后“启用分页启用分页”，并设置该控件的有关属性，如下表所示：，并设置该控件的有关属性，如下表所示：属性名称属性值borderwidth0pxcellpadding4cellspacing1cssclassforumlinepagesize15width95%1. 制作公告标题页面制作公告标题页面（5 5）在智能标记中选择）在智能标记中选择“编辑列编辑列”，删除，删除“news_id”news_id”、“news_subject”news_subject”、“news_content”news_content”三个字段。三个字段。（6 6）设置

7、）设置“news_type”news_type”、“news_date”news_date”、“news_editor”news_editor”三个三个字段的属性，具体属性值如下表所示：字段的属性，具体属性值如下表所示：属性名称news_typenews_datenews_editorheadertext类型日期编辑者itemstyle-width60px80px80pxhtmlencodefalsedataformatstring0:d1. 制作公告标题页面制作公告标题页面（7 7）在日期与编辑者之间加入一个）在日期与编辑者之间加入一个“hyperlinkfield”hyperlinkfie

8、ld”字段来显字段来显示公告标题，并设置它的属性，如下表所示：示公告标题，并设置它的属性，如下表所示：属性名称属性名称属性值属性值headertext标题标题datanavigateurlfieldsnews_iddatatextfieldnews_subjectdatanavigateurlformatstringnewsdetail.aspx?news_id=0itemstyle-horizontalalignleft1. 制作公告标题页面制作公告标题页面（8 8）在）在“属性属性”窗口中，按照下表所示设置各样式的窗口中，按照下表所示设置各样式的“cssclass”cssclass”属性：

9、属性：样式名称样式名称cssclasscssclass属性值属性值alternatingrowstylerow2pagerstylenavrowstylerow11. 制作公告标题页面制作公告标题页面（9 9）在）在“属性属性”窗口中，按照下表所示设置窗口中，按照下表所示设置“pagersetting”pagersetting”的的各种分页属性：各种分页属性：属性名称属性名称属性值属性值modenextpreviousfirstlastfirstpagetext<<第一页第一页lastpagetext最后一页最后一页>>nextpaget

10、ext下一页下一页>previouspagetext<上一页上一页2. 制作新闻公告详细页面制作新闻公告详细页面（1 1）打开）打开 ,添加添加“sqldatasource”sqldatasource”控件，配置数据源。注意设置条件。控件，配置数据源。注意设置条件。2. 制作新闻公告详细页面制作新闻公告详细页面（2 2）添加）添加“detailsview”detailsview”控件，配置数据源为控件，配置数据源为“sqldatasource1”sqldatasource1”，并在窗口中设置属性，如下表，并在窗口中设置属性，如下表所示：所示：属性名称属性值autog

11、eneraterowsfalseborderwidth0pxcellpadding4cellspacing1cssclassforumlinecaption新闻内容width95%2. 制作新闻公告详细页面制作新闻公告详细页面（3 3）单击）单击“detailsview”detailsview”控件，选择智能标记的控件，选择智能标记的“编辑字段编辑字段”，保留，保留“news_type”news_type”、“news_date”news_date”、“news_subject”news_subject”、“news_editor”,news_editor”,删除多余字段，删除多余字段，并设置

12、这四个字段的属性，如下表所示：并设置这四个字段的属性，如下表所示：属性名称属性名称news_typenews_datenews_subjectnews_editorheadertext类别类别日期日期标题标题编辑者编辑者datafieldnews_typenews_datenews_subjectnews_editorsortexpressnews_typenews_datenews_subjectnews_editordataformatstring0:d2. 制作新闻公告详细页面制作新闻公告详细页面（4 4）加入）加入“templatefield”templatefield”字段，然后设置

13、字段，然后设置“headertext”headertext”值：内容，设置值：内容，设置“sortexpress”sortexpress”值是：值是：news_contentnews_content。（5 5）在）在“detailsview”detailsview”控件的智能标记中选择控件的智能标记中选择“编辑编辑模板模板”，然后选择，然后选择“itemtemplate”itemtemplate”。把工具箱中的。把工具箱中的labellabel控件拖动到控件拖动到“itemtemplate”itemtemplate”中，在中，在labellabel控件的控件的智能标记中选择智能标记中选择“编辑

14、编辑databindings”databindings”，然后输入，然后输入“自自定义绑定定义绑定”字段值，如下图所示：字段值，如下图所示：2. 制作新闻公告详细页面制作新闻公告详细页面（6 6）在）在“detailsview”detailsview”控件的智能标记中选择控件的智能标记中选择“编辑编辑模板模板”，然后选择，然后选择“footertemplate”footertemplate”。把工具箱中的。把工具箱中的input(button)input(button)控件拖动到控件拖动到“footertemplate”footertemplate”中，设置中，设置该控件的该控件的“value

15、”value”属性值为：回上一页，设置属性值为：回上一页，设置“class”class”属性值为：属性值为：buttonbutton2. 制作新闻公告详细页面制作新闻公告详细页面（7 7）设置）设置“detailsview”detailsview”控件各样式的属性值，如下控件各样式的属性值，如下表所示：表所示：rowstylealternatingrowstylefieldheaderstyle属性名称属性名称属性值属性值属性名称属性名称属性值属性值属性名称属性名称属性值属性值cssclassrow1cssclassrow2cssclassrow3horizontalalignlefthori

16、zontalaligncenterwidth80pxfont-boldtrue2. 制作新闻公告详细页面制作新闻公告详细页面（8 8）切换到）切换到“源源”窗口，在窗口，在“回上一页回上一页”处加入处加入“onclick”onclick”事件，并输入代码：事件，并输入代码：=“windows.history.back()”=“windows.history.back()”三、新闻公告系统管理页面制作 管理页面是提供给管理员执行管理功能的地方，管理页面是提供给管理员执行管理功能的地方，管理员可以通过此页面来新增、修改或删除网站公告管理员可以通过此页面来新增、修改或删除网站公告的内容，使网站的信息

17、可以及时更新。的内容，使网站的信息可以及时更新。1. 登录页面登录页面不是每一个浏览者都可以进入管理页面，否则一些不是每一个浏览者都可以进入管理页面，否则一些破坏者会任意损坏网站内容，所以管理员必须通过登录破坏者会任意损坏网站内容，所以管理员必须通过登录页面来验证账号及密码，以确认是否有权限管理网站。页面来验证账号及密码，以确认是否有权限管理网站。asp.net 2.0asp.net 2.0提供了登录控件，使得制作登录页面提供了登录控件，使得制作登录页面变得再简单不过，只要将登录控件拖动到设计区，再设变得再简单不过，只要将登录控件拖动到设计区，再设置好各项属性值即可。其他的工作，系统都会自动处

18、理置好各项属性值即可。其他的工作，系统都会自动处理好，不用设计者费心。好，不用设计者费心。三、新闻公告系统管理页面制作1. 登录页面登录页面（1 1）登录页面的文件名称为）登录页面的文件名称为 。在。在“解决方案资源管理器解决方案资源管理器”窗口中双击打开该文件。注意窗口中双击打开该文件。注意在此处右上角的链接更换为在此处右上角的链接更换为“回主页面回主页面”，链接的网页，链接的网页为为 。三、新闻公告系统管理页面制作1. 登录页面登录页面（2 2）由）由“工具箱工具箱”窗口中拖动窗口中拖动“login”login”控件到设计窗控件到设计窗口中版权声明上方的空白行。口中版权声明上方的空白行。三

19、、新闻公告系统管理页面制作1. 登录页面登录页面（3 3）按照下表所示，在）按照下表所示，在“属性属性”窗口中设置窗口中设置“login”login”控件的属性。控件的属性。属性名称属性名称属性值属性值backcolor#f7f7debordercolor#cccc99borderstylesolidborderwidth1pxfont-nameverdanafont-size10ptdestinationpageurl/newsadmin.aspxdisplayremembermefalse三、新闻公告系统管理页面制作1. 登录页面登录页面（4 4）按照下表所示，在）按照下表所示，在“属性属

20、性”窗口中设置窗口中设置“login”login”控件的控件的“titletextstyle”titletextstyle”样式属性。样式属性。属性名称属性名称属性值属性值backcolor#6b696bfont-boldtrueforecolor#ffffff三、新闻公告系统管理页面制作2. 制作新闻公告管理主页面制作新闻公告管理主页面管理员在通过登录页面的验证后就会进入管理主管理员在通过登录页面的验证后就会进入管理主页面，可以在此页面执行管理新闻公告的功能。此页页面，可以在此页面执行管理新闻公告的功能。此页面看起来与新闻公告主页面面看起来与新闻公告主页面 非常类似，非常类似，只是增加了删除

21、及创建新公告的功能。本网页只负责只是增加了删除及创建新公告的功能。本网页只负责执行删除公告的功能，添加及修改公告则链接到执行删除公告的功能，添加及修改公告则链接到 网页执行。网页执行。三、新闻公告系统管理页面制作2. 制作新闻公告管理主页面制作新闻公告管理主页面（1 1）新闻公告管理主页面的文件名称为）新闻公告管理主页面的文件名称为 。在在“解决方案资源管理器解决方案资源管理器”窗口中双击打开该文件。注意此窗口中双击打开该文件。注意此处右上角的链接更换为处右上角的链接更换为“添加添加”，链接的网页为，链接的网页为 。三、新闻公告系统管理页面制作2. 制作新闻公告管理主页面制作新闻公告管理主页面

22、（2 2）配置数据源。添加）配置数据源。添加“sqldatasource”sqldatasource”控件，连接当前站控件，连接当前站点下点下 数据库，显示所有字段，并按数据库，显示所有字段，并按“news_date”news_date”字段降序排列。字段降序排列。三、新闻公告系统管理页面制作2. 制作新闻公告管理主页面制作新闻公告管理主页面（3 3）单击）单击“高级高级”按钮加入数据管理（添加、修改及删除）按钮加入数据管理（添加、修改及删除）功能。然后单击功能。然后单击“完成完成”按钮就创建了有数据管理能力的数据按钮就创建了有数据管理能力的数据库连接。库连接。三、新闻公告系统管理页面制作2.

23、 制作新闻公告管理主页面制作新闻公告管理主页面 只有经过登录页验证的管理员才能进入此管理页面，假如只有经过登录页验证的管理员才能进入此管理页面，假如有浏览者直接由浏览器的地址栏输入本网页名称来打开此网页，有浏览者直接由浏览器的地址栏输入本网页名称来打开此网页，除了禁止其进入管理系统外，还应显示信息告知其应先登录才除了禁止其进入管理系统外，还应显示信息告知其应先登录才能进入管理系统。能进入管理系统。 loginviewloginview控件有控件有“anonymoustemplate”anonymoustemplate”及及“loggedintemplate”loggedintemplate”两

24、个模板，若用户没有登录，系统会显两个模板，若用户没有登录，系统会显示示“anonymoustemplate”anonymoustemplate”模板中的内容；或用户已经过登录模板中的内容；或用户已经过登录验证，系统则会显示验证，系统则会显示“loggedintemplate”loggedintemplate”模板中的内容。因模板中的内容。因此，可以将警告未登录者的信息放入此，可以将警告未登录者的信息放入“anonymoustemplate”anonymoustemplate”模板中，而将管理系统置于模板中，而将管理系统置于“loggedintemplate”loggedintemplate”模

25、板中，就模板中，就能达到对未登录者的警示目的。能达到对未登录者的警示目的。三、新闻公告系统管理页面制作2. 制作新闻公告管理主页面制作新闻公告管理主页面（4 4）由）由“工具箱工具箱”窗口拖动窗口拖动loginviewloginview控件到设计窗口中版权控件到设计窗口中版权声明上方的空行。声明上方的空行。三、新闻公告系统管理页面制作2. 制作新闻公告管理主页面制作新闻公告管理主页面（5 5）由）由“工具箱工具箱”窗口拖动窗口拖动imageimage控件到控件到loginviewloginview控件中，控件中，然后将然后将“align”align”属性值设为属性值设为“absmiddle”a

26、bsmiddle”，“sc”sc”属性值设属性值设为为“images/icon_stop.gif”images/icon_stop.gif”。在图形后面输入。在图形后面输入“请您先执行请您先执行操作！操作！”。三、新闻公告系统管理页面制作2. 制作新闻公告管理主页面制作新闻公告管理主页面（6 6）由）由“工具箱工具箱”窗口拖动窗口拖动loginstatusloginstatus控件到控件到loginviewloginview控控件到件到“行行”与与“操操”两字之间。两字之间。说明：说明：loginstatusloginstatus控件会依据用户的登录状态，显示不同的链接文字及超控件会依据用户的

27、登录状态，显示不同的链接文字及超链接：如果用户尚未登录，此控件会显示链接：如果用户尚未登录，此控件会显示“登录登录”，单击后会打开登录网，单击后会打开登录网页；如果用户已经登录，此控件会显示页；如果用户已经登录，此控件会显示“退出退出”，单击后退出。，单击后退出。三、新闻公告系统管理页面制作2. 制作新闻公告管理主页面制作新闻公告管理主页面 当用户单击当用户单击loginstatusloginstatus控件的控件的“登录登录”文字后，会打开默认文字后，会打开默认的登录网页。默认的登录网页名称为的登录网页。默认的登录网页名称为，而本网站的，而本网站的登录网页名称为登录网页名称为，因此必须在，因

28、此必须在文文件中指定，系统才能正确打开登录网页。件中指定，系统才能正确打开登录网页。（7 7）在）在“解决方案资源管理器解决方案资源管理器”窗口中双击窗口中双击文件，文件，打开该文件。找到打开该文件。找到“”，将，将其改为以下代码：其改为以下代码：三、新闻公告系统管理页面制作2. 制作新闻公告管理主页面制作新闻公告管理主页面 （8 8）切换到）切换到，在，在loginviewloginview控件的智能标记中控件的智能标记中选择选择“loggedintemplate”loggedintemplate”来编辑会员登录后的内容。由来编辑会员登录后的内容。由“工具工具箱箱”窗口拖动窗口拖动gridv

29、iewgridview控件到控件到loginviewloginview控件中。控件中。三、新闻公告系统管理页面制作2. 制作新闻公告管理主页面制作新闻公告管理主页面 （9 9）设置）设置gridviewgridview控件的数据源，通过控件的数据源，通过“编辑列编辑列”删除删除“news_id”news_id”、“news_subject”news_subject”、“news_content”news_content”、“news_editor”news_editor”四个字段，并修改四个字段，并修改“news_type”news_type”、“news_date”news_date”的属性

30、的属性, ,如下表所示。如下表所示。属性名称news_typenews_dateheadertext类型日期itemstyle-width60px80pxhtmlencodefalsedataformatstring0:d三、新闻公告系统管理页面制作2. 制作新闻公告管理主页面制作新闻公告管理主页面 （1010）加入一个）加入一个“hyperlinkfield”hyperlinkfield”字段来显示公告标题，并字段来显示公告标题，并设置属性，如下表所示。设置属性，如下表所示。属性名称属性名称属性值属性值headertext标题标题datanavigateurlfieldsnews_iddatatextfieldnews_subjectdatanavigateurlformats