第15讲 网站信息添加动态网页制作.docx
- 文档编号:6008478
- 上传时间:2023-01-02
- 格式:DOCX
- 页数:13
- 大小:422.52KB
第15讲 网站信息添加动态网页制作.docx
《第15讲 网站信息添加动态网页制作.docx》由会员分享,可在线阅读,更多相关《第15讲 网站信息添加动态网页制作.docx(13页珍藏版)》请在冰豆网上搜索。
第15讲网站信息添加动态网页制作
《动态网站交互技术》教学单元设计方案
课程编号:
50312003编制时间:
2009.7编制人:
谭东清
教学单元编号
8.1
教学单元名称
新闻信息添加
学时数
6
所属学习情境
名称编号
信息添加
教学目标
主要能力指标
1、能够制作带有网页编辑器的新闻信息添加表单
2、能够使用验证控件
相关能力指标
1、与人合作能力
2、解决问题能力
3、自我学习能力
教学单元的重点:
1、制作新闻信息添加表单
2、使用文本编辑器
3、OleDbParameter对象
4、ExecuteNonQuery带参数方法的引用
教学单元的难点:
1、使用文本编辑器
2、OleDbParameter对象
教师讲授的主要内容:
1、常用web控件
2、在新闻信息表单中增加文本编辑器
3、常用验证控件
4、OleDbParameter对象
5、ExecuteNonQuery带参数方法的引用
学生自主学习的主要内容:
1、web控件
2、验证控件
3、ExecuteNonQuery带参数方法
教学单元的教学微观设计
具体的教学
安排
本次课首先教学生制作带网页编辑器的新闻信息添加表单,然后讲解将表单数据添加到数据库的代码编写。
在代码部分重点讲解OleDbParameter对象以及给该对象赋值。
最后简单介绍调用类库带参数的ExecuteNonQuery方法完成将表单数据添加到数据库操作。
学习任务
Web控件和验证控件
教学载体
新闻信息添加网页
教学方法
讲授
教学手段
多媒体演示
学习成果
1、提交带有文本编辑器和具有控件验证功能的新闻信息添加网页
效果评估
教师:
1、学生是否熟练的使用基本的web控件和验证控件。
2、学生是否能够使用网页文本编辑器。
3、学生是否理解OleDbParameter对象,并能给该对象赋值
4、学生是否理解带参数的方法调用
学生:
1、是否能够制作带有文本编辑器和具有控件验证功能的新闻信息添加网页。
2、能够编写将表单数据添加到数据库的代码
实施评估:
1、能够创建带有文本编辑器和具有控件验证功能的新闻信息添加网页40%;
2、能够编写将表单数据添加到数据库的代码60%。
主要教学内容
在网站后台添加信息是动态网站建设的重要功能之一。
信息添加一般分为两种情况,一种是以文字为主的信息,如新闻信息,另一种是以图片为主的信息,如产品信息或公司活动图片展示信息等。
本次任务采用了分层编写代码的模式,将复杂的、可以重复使用的操作数据库代码存放在App_Code文件夹的DataAccess.cs文件中。
本次任务主要使用了DbHelperOleDb的ExecuteNonQuery(strSql,commandParameters)带参数方法完成将表单数据添加到数据库的操作。
网页文本编辑eWebEditor是添加信息或图片的详细内容时常用的工具。
一、Add_News.aspx网页制作
1、主要控件及其用途
Add_News.aspx页面主要控件的属性设置及其用途
控件类型
控件名称
主要属性设置
用途
TextBox
BiaoTi
信息标题
TextBox
LaiYuan
信息来源
TextBox
GuanJianZi
关键字
TextBox
NeiRong
信息详细内容
Button
btnLogin
执行登录操作
2、数据库设计
存放Add_News.aspx网页信息的xinwenzixun表的设置
字段名称
数据类型
字段长度
必填字段
id
自动编号
标题
文本
50
是
来源
文本
100
否
栏目名称
文本
10
否
内容
备注
否
发布时间
日期/时间
否
点击数
数字
否
关键字
文本
20
否
3、Add_News.aspx页面效果图
新闻资讯信息添加网页表单如图8-1所示,表单使用到了网页文本编辑器。
4Add_News.aspx网页制作步骤
1、右击站点后台管理文件夹admin,单击添加新项,在网站后台管理文件夹添加一个名为Add_News.aspx文件。
2、在新建的网页上添加一个6行2列的表格,表格宽度850。
表格第1行和第6行合并单元格。
然后在表格输入文字,如图3所示。
3、给表单添加文本框和按钮控件,并适当的设置控件宽度,按图8-4设置控件ID。
4、从教程提供的参考网站将eWebEditor文件夹复制到自己的网站根文件夹下。
5、切换到源代码视图,在内容行第2个单元格输入下面网页编辑器代码。
id=txtContent&style=coolblue"frameborder="0"scrolling="no"width="750"height="350"> TextBoxID="txtContent"runat="server"Width="10px"Style="visibility: hidden"> TextBox>
代码注释如下:
6、切换到设计视图,网页显示如下。
当网页浏览时文本编辑器可以正常使用。
Add_News.aspx源文件代码如下:
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Add_News.aspx.cs"Inherits="Add_News"%>
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
//www.w3.org/1999/xhtml">
.style1
{
width:
750px;
}
center"> 添加新闻资讯 标题: left"> TextBoxID="biaoti"runat="server"Width="228px"> TextBox> 来源: left"> TextBoxID="laiyuan"runat="server"Width="230px"> TextBox> 关键字 left"> TextBoxID="guanjianzi"runat="server"Width="230px"> TextBox> 正文 id=txtContent&style=coolblue"frameborder="0"scrolling="no"width="750"height="350"> TextBoxID="txtContent"runat="server"Width="10px"Style="visibility: hidden"> TextBox> ButtonID="Button1"runat="server"Text="确定"Width="61px" onclick="Button1_Click"/>