《asp net程序设计徐占鹏)教学资源单元2 母版、主题和皮肤--1（新建网页）》由会员分享，可在线阅读，更多相关《asp net程序设计徐占鹏)教学资源单元2 母版、主题和皮肤--1（新建网页）（25页珍藏版）》请在金锄头文库上搜索。
1、母版、主题和皮肤,主讲教师：徐占鹏,主要内容（1）,学习目标 新建网站 CS、BS对比 网页基础知识 新建网站,CSS基础 主题和皮肤,主要内容（2）,母版 JavaScript基础 实例1：一个学习网页 实例2：导航栏设计,学习目标,【知识目标】 了解网页的基本知识和ASP.NET网站的基础知识 熟练掌握新建网站和新建网页的方法和步骤 【技能目标】 能新建网站项目,注： 本课内容参考教材 单元二 任务2.1,任务陈述,任务构思与目标：根据需求新建择网科技公司电子商务网站项目SelectOKShop，创建一个网页，作为测试页，并为网页设置背景图片，并运行，结果如下图所示： 图 程序运行结果,任
2、务陈述,任务设计：创建一个Web网站项目，命名为SelectOKShop，添加放置网站图片的文件夹“image”，引入已经存在的图片，添加一个测试网页，设置网页的背景并输出“Hello World!”字符串，最终运行。,网页基础知识,C/S（Client/Server）结构 即客户机/服务器结构，是要在客户端安装程序才能运行的。 比如我们用的交流工具-腾讯QQ就是C/S结构软件，我们作为用户使用的计算机是Client，腾讯公司的服务器是Server。,网页基础知识,B/S（Browser/Server）结构 即浏览器/服务器结构。它是随着Internet技术的兴起，对C/S结构的一种变化或者改
3、进的结构。在这种结构下，用户工作界面是通过WWW浏览器来实现，极少部分事务逻辑在前端（Browser）实现，但是主要事务逻辑在服务器端（Server）实现。这样就大大简化了客户端计算机载荷，减轻了系统维护与升级的成本和工作量，降低了用户的总体成本。 总之，B/S就是不用客户端，直接用IE等浏览器类的工具进行浏览，比如我们跟这个网站，我们作为用户使用的计算机是Browser ，microsoft就是Server ；ASP.NET就是用来开发B/S结构的软件,网页基础知识,什么是网页 网页是读者上网浏览时看到的页面，它通过浏览器呈现在电脑上。用户只需在浏览器的地址栏中输入一个网站地址，如“，则下面
4、出现的这个页面就是我们常说的“网页“。用户通过这个地址来访问网站，网站可以包含多个相关的网页。图2-2是百度网站的一个网页，也是百度网站的主页。,网页基础知识,静态网页 网页分为静态网页和动态网页。 在网站设计中，纯粹HTML格式的网页通常被称为“静态网页”，也就是以.htm、.html、.shtml、.xml等为后缀。 如果要制作简单的静态网页，只需要学习HTML语言，这是一门非常简单的语言，主要通过标签来完成网页的基本设置。下面的代码是一个比较完整的HMTL结构：,网页基础知识, 详见【实例1】,网页基础知识,动态网页是指在用户浏览网页的时候，可以通过相关的用户交互来动态改变网页内容甚至版
5、式的一种网页。动态网页包括静态部分和动态部分，静态部分依然由HTML语言组成，而动态部分则由JavaScript和VBScript组成。因为VBScript只能用在IE浏览器上，JavaScript却更为通用，可以在任意浏览器上使用。下面是添加了JavaScript代码的动态网页代码，若要在网页中添加JavaScript代码，则必须添加“script“标记，而且需要使用“language“属性指明脚本使用的语言。详见实例2,网页基础知识,除了脚本语言可以完成动态网页的制作外，还有很多种服务器端开发语言，如ASP、JSP、ASP.NET等。这些服务器端语言，可以实现与数据库的交互，可以反馈数据给
6、浏览器，还可以实现用户与服务器的完整交互。 我们现在要学习的就是ASP.NET，确切地说，它不是一门语言，而是一门网页开发技术。ASP.NST的底层语言是C#语言。学习本课程应该具备C#程序设计的知识。,网页基础知识,动态网页的特点 动态网页以数据库技术为基础，可以大大降低网站维护的工作量； 采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等等； 动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页；,网页基础知识,动态网站原理 动态网站一般是由浏览器发送请求给服务器，服务器接收到请求后根据请求进行处理，最后将
7、处理结果返回给客户端显示，如下图所示。,ASP.NET网站基础知识,ASP.NET是Microsoft公司推出的新一代Web应用开发技术，是一种建立因为其提供了一系列网站开发所需要的组件，开发人员只需轻松拖曳就可以完成界面的设计和实现，所以被称为动态页面开发利器。 现已发展到ASP.NET4.0版本。,任务实施-新建网站项目,运行开发环境。 新建网站。 向网站添加网页。 网添加站文件夹，并引入文件。 设置网页背景。 建立后台程序文件。 运行网站项目,网站文件,新建ASP.NET网站生成的文件说明 Default.aspx：这就是默认的页面了，相当于网站首页。其节点下有两个选项。我们双击打开De
8、fault.aspx文件(其实创建项目的时候它是默认打开的)。看它的界面，比较眼熟吧！与Dreamweaver差不多，也分为设计、拆分、源代码三个视图模式。 Default.aspx.cs：让用户编辑的，专门存放事件处理程序和用户声明的方法。 Default.aspx.designer.cs：存放页面服务器控件设计信息 Web.config：存放对整个站点的配置信息。,网站文件,新建ASP.NET网站生成的文件说明 Project：项目，主要是构建一些业务比较复杂的程序,如管理系统等。 Website：网站，就是构建一些简单的网站开发等。 Solution：解决方案， 你的项目和网站可以放到解
9、决方案中.一个方案下.可以有几个项目。 Properties：其下存放的是整个项目的属性文件。 引用：该目录是管理整个项目所需要的命名空间。 App_Data：该目录存放了一些系统要用到的、但不想让用户直接访问的资源(比如数据库文件)。,网站文件,认识Web.config文件 Web.config文件是一个XML文本文件，它用来储存 ASP.NET Web 应用程序的配置信息（如最常用的设置ASP.NET Web 应用程序的身份验证方式），它可以出现在应用程序的每一个目录中。当你新建一个Web应用程序后，默认情况下会在根目录自动创建一个默认的 Web.config文件，包括默认的配置设置，所有
10、的子目录都继承它的配置设置。Web.config文件的具体应用将在后续章节进行讲解,ASP.NET页面,前台文件 其实就是网页的界面设计，一般用于呈现各种网页布局，后台文件用来处理用户与服务器的各种交互，可以处理非常复杂的功能，如读取数据、保存用户的操作等。 1前台文件 打开“Test.aspx”文件。 2后台文件 打开“Test.aspx.cs“文件,ASP.NET页面,ASP.NET网页代码模型 （1）单文件页模型 在单文件页中，标记、服务器元素以及事件处理代码全都位于同一个.aspx文件中。 如【实例2-3】 void Button1_Click(Object sender, Event
11、Args e) Label1.Text = “Clicked at “ + DateTime.Now.ToString(); Single-File Page Model ,ASP.NET页面,ASP.NET网页代码模型 void Button1_Click(Object sender, EventArgs e) Label1.Text = “Clicked at “ + DateTime.Now.ToString(); Single-File Page Model ,ASP.NET页面,ASP.NET网页代码模型 代码隐藏页模型 在代码隐藏模型中，页的标记和服务器元素（包括控件声明）位于.aspx文件中，而你的页代码则位于单独的代码文件中。 如果你正在处理名为SamplePage的页，则对应的标记位于SamplePage.aspx文件中，而代码位于SamplePage.aspx.cs (C#) 、SamplePage.aspx.vb (Visual Basic)等文件中。 aspx文件在 Page指令中包含一个指向代码隐藏分部类的Inherits属性,项目实训,项目实训 【实训目的】 1.掌握网站创建的方法。 2.掌握网页创建和编辑网页的方法。 【实训内容】 1. 新建一个个人网站。 2.在网站中添加一个Web页，输出个人信息，具体包括姓名、性别、邮箱账号、生日等信息。,
