实验1-.net环境及网页制作

实验1.net环境及网页制作目的与要求(1)掌握HTML文档结构。(2)掌握HTML常用标记的用法。(3)学会使用DreamweaverCS6制作一个简单网页。(4)掌握在网页中插入文本，设置文本格式。(5)掌握表格及单元格的建立和设置方法。(6)掌握为文本添加超链接。(7)掌握表单的建立方法。(8)学会使用VisualStudio2010开发一个简单Web应用程序。内容和步骤【实验题1.1】使用DreamweaverCS6制作一个网页，该网页展示的内容如图1.7所示。步骤如下：(1)执行【文件】菜单中【新建】功能，在新建文档窗体中选择“空白页”，页面类型为“HTML”，单击“创建”按钮。(2)在新建的网页编辑窗口空白处单击右键，选择“页面属性”功能，在字体“大小”下拉列表框中选择12，并设置页面边距为0，如图p1.1所示。图p1.1页面属性设置图p1.2表格设置(3)单击【确定】按钮，完成“页面属性”设置。(4)选择【插入】/【表格】菜单，弹出“表格”对话框，在“行数”文本框输入8，在“列数”文本框输入2，“表格宽度”文本框输入800，在其后的下拉列表框中选择“像素”选项，单元格边距设为0，间距设为6，如图p1.2所示。(5)单击选中该表格，在屏幕下方的“属性”面板中选择【对齐】/【居中对齐】命令，将插入的表格居中对齐，如图p1.3所示。图p1.3设置表格居中对齐(6)单击表格第1行第1列，在“属性”面板中【背景颜色】输入“#6699FF”，如图p1.4所示。同理，对第1行第2列、第4行1、2列、第4行第1列、第2列、第7行1、2列，以及第8行第1列、第2列的背景颜色分别设为“#339900”、“#663300”、“#FFFFCC”、“#CCFFFF”、“#FFFFCC”、“#CCCCFF”、“#FFDDDD”。图p1.4设置表格背景颜色(7)在表格第2行第1列单元格中输入文字“∵基本信息”，选中该文字后单击“属性”面板中的【B】，对当前文字加粗。同理，在第2行第2列、第6行1、2列分别输入“∵兴趣爱好”、“∵学习经历”和“∵获得奖项”，并对字体加粗。(8)单击第1行第1列单元格后，单击“属性”面板上方tr标记，设置“属性”面板中【高度】为12，如图p1.5所示。设置第3行、第7行的高度为2。图p1.5设置表格行高度(9)在第4行和第8行的各个单元格中分别输入如图1.7中的文字。注意，每输入一行文字后，换行采用“Shift”+“Enter”组合键，从而在HTML代码中创建一个“br/”标记。如果直接按下“Enter”键，在HTML代码中将创建一对“p/p”段落标记。(10)选中“[e-mail]”，然后设置“属性”面板中【链接】为mailto:[e-mail]，如图p1.6所示。选中“”，然后设置“属性”面板中【链接】为。图p1.6设置文字超链接(11)示例HTML代码如下：headmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8/titlep1-1/title/headbodytablewidth=800border=0align=centercellpadding=0cellspacing=6trtdwidth=50%bgcolor=#6699FFheight=12/tdtdbgcolor=#339900height=12/td/trtrtdwidth=50%strong∵基本信息/strong/tdtdstrong∵兴趣爱好/strong/td/trtrtdwidth=50%height=2bgcolor=#663300/tdtdheight=2bgcolor=#663300/td/trtrtdwidth=50%bgcolor=#FFFFCC姓名：张军br/性别：男br/出生年月：1988年12月br/电子邮箱：ahref=mailto:[e-mail][e-mail]/abr/个人主页：ahref=手机号码：138138000123br//tdtdbgcolor=#CCFFFF体育方面：乒乓球、游泳br/音乐方面：弹钢琴、唱歌br/技术方面：软件开发、动画制作br/阅读方面：推理小说、散文br/br//td/trtrtd /tdtd /td/trtrtdwidth=50%strong∵学习经历/strong/tdtdstrong∵获得奖项/strong/td/trtrtdwidth=50%bgcolor=#663300height=2/tdtdbgcolor=#663300height=2/td/trtrtdwidth=50%bgcolor=#CCCCFF本科：南京信息工程大学计算机与软件学院br/硕士：南京大学软件工程br/br/br//tdtdbgcolor=#FFDDDD2010年9月，校软件设计大赛一等奖。br/2009年3月，学院课件设计比赛一等奖。br/2010年5月，省科技创新大赛二等奖。br/br//td/tr/table/body/html(12)按【F12】键，预览当前网页效果，如图p1.7所示。图p1.7实验题1.1的运行结果【实验题1.2】使用VisualStudio2010开发一个简单Web应用程序，该网页展示的内容如图p1.8所示。步骤如下：(1)启动VisualStudio2010，单击“创建：项目…”链接，即弹出“新建项目”对话窗口，左侧“项目类型”列表框选中选择“VisualC#Web”；在“模板”列表框中选择“ASP.NETWeb应用程序”。自定义项目名称，并设置项目存储位置。(2)在Source视图“Body/Form/Div”标签中编写HTML代码，创建一个4行2列表格，然后在第1行、第2行1列、第3行1列，分别输入“用户登录”、“用户名”和“密码”。(3)参照图p1.8，设置表格及单元格样式。(4)在Design视图，从Toolbox窗口拖放2个TextBox控件和1个Button控件，参照图1.8设置好各控件的属性及布局。选中“密码”右侧的TextBox控件，设置其“TextMode”属性为Password。(5)双击Button控件，VisualStudio会自动切换到逻辑代码编辑区，将自动生成该Button控件的Click方法。在该方法中输入如下代码：if(TextBox1.Text==user&&TextBox2.Text==123456){Button1.Text=登录成功;}else{Button1.Text=登录失败;}(6)示例HTML部分代码如下：headrunat=servertitle/title/headbodyformid=form1runat=serverdivtablestyle=width:320px;text-align:centerborder=1cellpadding=6cellspacing=0trtdcolspan=2bgcolor=#99CCFF用户登录/td/trtrtd用户名/tdtdasp:TextBoxID=TextBox1runat=serverWidth=200px/asp:TextBox/td/trtrtd密码/tdtdasp:TextBoxID=TextBox2runat=serverTextMode=PasswordWidth=200px/asp:TextBox/td/trtrtdcolspan=2asp:ButtonID=Button1runat=serverText=登录onclick=Button1_Click/td/tr/table/div/form/body/html(7)按【F5】键，编译运行当前Web应用程序，通过输入测试不难发现，只有用户名和密码右侧的文本框分别输入“user”和“123456”时，登录按钮上的文档才会显示为“登录成功”；否则显示为“登录失败”。图p1.8实验题1.2的运行结果思考与练习(1)参照【实验题1.1】在此基础上新增两项内容：实践经历和自我介绍，并在各项中增加若干文字内容。(2)脱离IDE开发环境，使用纯文本编辑器如NotePad记事本，编写【实验题1.1】中的HTML代码。(3)使用Table等HTML标记，制作一个课程表。实验2JavaScript程序设计目的与要求(1)掌握JavaScript的基本语法。(2)学会使用VisualStudio.NET编写JavaScript代码。(3)学会使用浏览器运行、调试JavaScript程序。(4)学会使用if…else选择语句。(5)学会使用for、while循环语句。(6)学会使用JavaScript内建对象及其属性和方法。(7)学会使用JavaScript浏览器对象及其属性和方法。内容和步骤【实验题2.1】计算1+2+…+100，将结果输出到页面中。步骤如下：(1)打开任意一种纯文本编辑工具，如Windows自带的“记事本”程序。本实验后面程序的建立步骤都与本实验相同，所以均将此步骤略去。(2)输入如下代码：scriptlanguage=javascriptvarx=0;for(vari=0;i=100;i++){x+=i;}document.write(x);/script(3)运行，结果如p2.1所示。图p2.1实验题2.1的运行结果【实验题2.2】根据输入的阿拉伯数字（0-6），在页面上输出“星期X”，X代表“星期日”-“星期六”，例如，当输入“0”，则输出“星期日”。输入如下代码：htmlheadscriptlanguage=javascriptfunctionchange(x){if(x==0){document.write(星期日);}elseif(x==1){document.write(星期一);}elseif(x==2){document.write(星期二);}elseif(x==3){document.write(星期三);}elseif(x==4){document.write(星期四);}elseif(x==5){document.write(星期五);}elseif(x==6){document.write(星期六);}else{document.write(输入的数字不正确);}}/script/headbody输入一个0-6的阿拉伯数字：inputid=Text1type=text/inputid=Button1type=buttonvalue=buttononclick=javascript:change(document.getElementById('Text1').value);//body/html运行，结果如图p2.2所示。图p2.2实验题2.2的运行结果【实验题2.3】使用嵌套for循环，在页面上显示如下图案：112123123412345输入如下代码：scriptlanguage=javascriptf