(中职）2022-2023学年SP.NET动态网页设计第二章. ASP课件.ppt

《(中职）2022-2023学年SP.NET动态网页设计第二章. ASP课件.ppt》由会员分享，可在线阅读，更多相关《(中职）2022-2023学年SP.NET动态网页设计第二章. ASP课件.ppt（112页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、(中职）2022-2023学年SP.NET动态网页设计第二章.ppt ASP课件第二章在Visual Web Developer 2005中编辑网页学习目标 n n1认识Visual Web Developer 2005的窗口界面n n2能在设计视图下编辑网页n n3能在设计视图下插入表格与设计窗体n n4认识HTML语法n n5认识CSS样式n n6能编辑ASP.NET代码2-1 Visual Web Developer 2005的基本操作n n利用Visual Web Developer 2005创建ASP.NET 2.0网站程序后，可先认识 Visual Web Developer 20

2、05的窗口界面，然后在设计视图中编辑网页内容。2-1-1 认识Visual Web Developer 2005的窗口环境标题栏n n 设计：当标题栏只显示网站名称时，代表该网设计：当标题栏只显示网站名称时，代表该网站目前的状态为可编辑网页程序的设计状态。站目前的状态为可编辑网页程序的设计状态。n n 执行：当标题栏的网站名称后面显示执行：当标题栏的网站名称后面显示“正在运正在运行行”信息时，代表该网站目前的状态为正在执行信息时，代表该网站目前的状态为正在执行与检测代码，仍然可以在源文件视图下编辑网页。与检测代码，仍然可以在源文件视图下编辑网页。n n 中断：当标题栏的网站名称后面显示中断：当

3、标题栏的网站名称后面显示“正在调正在调试试”信息时，代表该网站目前处于暂停执行程序信息时，代表该网站目前处于暂停执行程序的状态，在任何模式下都无法编辑网页。的状态，在任何模式下都无法编辑网页。菜单栏n n菜单栏位于标题栏的下方，包含文件、编辑、视图、网站、生成、调试、工具、窗口、社区与帮助等菜单选项，利用菜单栏中的功能，可快速启动或套用所需的功能。工具栏n n工具栏中的按钮就是将菜单栏内的常用功能转换成按钮图标，利用这些按钮同样可以启动或套用所需的功能。进入Visual Web Developer 2005界面后，只需从菜单栏的“视图”菜单中选择“工具栏”选项，就可从子菜单中选择想要打开的工具

4、栏名称，以打开其他工具栏并执行所需的功能。文件窗口 工具窗口n n熟练使用工具窗口可提高开发网站的效率，打开工具窗口的方式是从菜单栏选择“视图”选项，然后从菜单中选择想要打开的工具窗口。编辑视图栏n n在编辑视图栏单击”编辑”与”源”标签可以切换设计与源文件视图模式。2-1-2 在设计视图中设置网页属性与输入文字n n在Visual Web Developer 2005的设计视图中可以设置网页的标题与背景，并直接输入文字，完成后会在源文件视图中显示对应的HTML语法。HTML标签n n（1）：HTML文档的最外层标签，表示开头和结尾。n n（2）：标题区，可用来定义HTML文档相关信息的区域，

5、例如：可以在标签内设置网站标题。n n（3）：内容区，可以加上窗体与表格等文档内容，在设计视图中编辑网页内容后，会在此区域显示对应的HTML语法。设置网页属性与输入文字 n n单击“属性”窗口“BgColor”属性值字段右方n n的 按钮。n n返回“属性”窗口后，“BgColor”属性值已经被设置为“Pink”，单击“Text”属性值字段右方的 按钮n n颜色选取器”对话框后，选择命名色彩标签，然后从调色板选择想要设置的网页文字颜色为Navy（深蓝色），再单击”确定”按钮。2-1-3 在设计视图中设置项目列表2-1-4 在设计视图中插入图片与超级链接n n1 1（）下列哪一个窗口组件将菜单栏

6、内的常用功能转换成按钮图标？）下列哪一个窗口组件将菜单栏内的常用功能转换成按钮图标？n n标题栏标题栏工具栏工具栏工具箱工具箱“属性属性”窗口窗口n n2 2（）下列哪一个标签表示）下列哪一个标签表示HTMLHTML文档的内容区？文档的内容区？n nn n3 3（）下列哪一个标签表示换行？）下列哪一个标签表示换行？n nn n4 4（）如果要设置如果要设置E-mailE-mail超链接，必须在超链接窗口中选择哪一种类型的超链接，必须在超链接窗口中选择哪一种类型的超级链接？超级链接？n nhttp:http:telnet:telnet:ftp:ftp:mailto:mailto:n n5 5（）

7、标签的哪一项属性可以设置图片上显示的说明文字？标签的哪一项属性可以设置图片上显示的说明文字？n nAltAltBorderBorderAlignAlignSrcSrcn n1打开练习文件01_EX01（Default.as-px），按题意操作：n n 网页标题名称为“优质网站”，背景颜色为“GreenYellow”。n n 在网页中输入右方的编号清单文字，文字为楷体_GB2312、大小为14pt。n n 每行文字超链接到对应的网站 n n2打开练习文件01_EX02（Default.as-px），按题意操作：n n 设置“美丽的地球”文字为Heading 2。n n 在“美丽的地球”文字下方插

8、入一条水平线。n n 下方插入image文件夹的01_EX 02.gif，并设置居中，说明文字为“地球”。2-2 表格与窗体设计n n2-2-1 在设计视图中插入表格并编排完成后，界面显示如下2-2-2 在设计视图中设计窗体完成后,界面显示如下n n1打开练习文件CH0202_EX01（Defau-lt.aspx），按题意操作：n n 插入如右图所示的表格，表格没有框线，且宽度为120px。n n 表格上面为标题文字，格式为粗体。n n 每个单元格的背景颜色为单元格内的色彩名称。n n2打开练习文件CH0202_EX02（Default.aspx），制作留言板窗体，按题意操作：n n“账号”字

9、段宽度为15，“密码”字段宽度为10。n n 选项按钮旁插入图片02_EX02A.jpg、02_EX02B.jpg与02_EX02C.jpg。n n“留言”文字区域为2列30行。2-3 CSS与文件编排n n2-3-1 认识CSS2-3-2 行内样式与内嵌样式n n上述语法说明如下：n n（1）在标签内设置“type”属性为“text/css”，就是指使用CSS样式，内嵌样式在标签内定义CSS样式，其语法与行内样式非常相似，都可使用CSS样式表中的样式属性与属性值来定义样式。n n（2）自定义名称是指自定义样式名称，如“.text”。将自定义的名称使用于文件中的标签内，就可以在标签内套用自定义

10、的样式，例如：应用于段落标签中，要写成。2-3-3 链接样式与导入样式完成后,界面显示如下n n打开练习文件03_EX01（Default.aspx），n n按题意操作：n n 设置网页背景为image文件夹中的03_EX01.jpg图片。n n 利用行内样式设置标签为楷体_GB2312、白色。n n 设置网页内的字形样式为粗 2-4 在源文件视图中编辑代码n n2-4-1 在ASP.NET文件中加入代码完成后,界面显示如下完成后,界面显示如下2-4-2 显示日期时间完成后,界面显示如下2-4-3 更换背景颜色n n在上述的代码中，第在上述的代码中，第2 21313行是设置背景颜色的行是设置背

11、景颜色的ASP.NETASP.NET程序，其代码分析如下：程序，其代码分析如下：n n（1 1）第）第4 4和和6 6行分别声明行分别声明nono和和colorcolor变量（参考第变量（参考第3 3章变量声明方式的介绍），章变量声明方式的介绍），nono变量是由变量是由RndRnd随机随机函数随机取得函数随机取得0 04 4的任一个整数值。的任一个整数值。n n（2 2）第）第8 81212行是在执行行是在执行If.Then.If.Then.条件判断，条件判断，当当nono为为0 0、1 1、4 4的整数值时，分别显示不同的整数值时，分别显示不同的颜色，有粉红色、绿色、黄色、紫色、天蓝色的颜

12、色，有粉红色、绿色、黄色、紫色、天蓝色这这5 5种颜色（参考第种颜色（参考第3 3章章If.Then.If.Then.条件判断的使条件判断的使用介绍）。用介绍）。n n（3 3）第）第1717行利用行利用“%”“”“%”符号取得符号取得colorcolor颜色的变量，内含在颜色的变量，内含在标签内，作为标签内，作为bgcolorbgcolor背景颜色的属性值。在背景颜色的属性值。在HTMLHTML标签中取得标签中取得变量，除了必须使用变量，除了必须使用“%”“”“%”符号包含外，符号包含外，还要加上还要加上“=”“=”符号和变量名称，例如：符号和变量名称，例如：。完成后,界面显示如下2-4-4

13、 生 成 表 格完成后,界面显示如下n n1打开练习文件CH0204_EX01（Default.n naspx），利用ASP.NET命令输出“今天是：”字符串，然后在后面接着显示目前系统的日期，格式为“2006年9月20日”n n2打开练习文件CH0204_EX02（Default.n naspx），利用ASP.NET命令生成下拉列n n表的窗体组件，列表的项目内容如右图所示。n n3打开练习文件CH0204_EX03（Default.n naspx），编写一个更换网页文字颜色的n n动态程序，当单击IE浏览器的刷新按n n钮时，会随机显示“红色”、“绿色”n n与“紫色”3种文字颜色。n n

14、4 4（）标签的哪一项属性可以设置图片标签的哪一项属性可以设置图片文件的来源？文件的来源？n naltaltborderborderalignalignsrcsrcn n5 5（）在）在“属性属性”窗口单击哪一个按钮，可以窗口单击哪一个按钮，可以将属性按照英文字母排列？将属性按照英文字母排列？n n6 6（）下列哪一个不是）下列哪一个不是6 6使用导入样式来导入样式文件的语法？使用导入样式来导入样式文件的语法？n nimport url(import url(样式名称样式名称););import(import(样式名称样式名称););n nimport import 样式名称样式名称;impo

15、rt import 样式名称样式名称;n n7 7（）若编写）若编写ASP.NETASP.NET命令命令“%Response.Write(“”)%”，则可以改写成下列哪一行程序？，则可以改写成下列哪一行程序？n n%()%=%=%n n8 8（）若编写）若编写ASP.NETASP.NET命令命令“%Response.Write(“”)%”，则可以将，则可以将这两行命令改写为下列哪一个？这两行命令改写为下列哪一个？n n%Response.Write(&Now()%n n%Response.Write($Now()%n n%Response.Write(Now()%n n%Response.Wr

16、ite(And Now()%n n1打开练习文件CH02Q01（Defau-lt.aspx），按题意操作：n n 输入如右图所示的网页文字，第1行是H2标题文字，中间3行为项目列表文字，最后1行是H3标题文字。n n 第1行后面插入水平线，网页背景颜色为Brown，文字颜色为White。n n2打开练习文件CH02Q02（Defau-lt.aspx），按题意操作：n n 在网页中插入如右图所示的窗体组件，其中复选框默认选中“北戴河”。n n 插入image文件夹的Q02.gif，并设置图片对齐方式为“right”。n n 设置移动鼠标指针到图片上时，会显示说明文字“新年快乐”。n n3打开练习文件CH02Q03（Defau-lt.aspx），创建样式文件Q03.css，设置自定义样式名称“bg”与“text”，“bg”的背景颜色为黑色，“text”的文字颜色为黑色，然后在网页中导入此样式文件。n n4打开练习文件CH02Q04（Defau-lt.aspx），利用ASP.NET程序输出窗体组件，生成输入账号和密码的文本框以及可以提交数据与重新输入的按钮。