创建样式表续.ppt

Written by Lushaoming 第4讲 ASP.NET 2.0基础 本讲目的： VWD中页面的创建、编辑以及样式表的使用 数据源控件SqlDataSouce以及数据访问控件 GridView、DataList和FormView的使用 网站的导航 主题和皮肤 网站中的成员管理 4.1 创建Web页面 4.1.1 创建一个网站和一个页面 新建文件系统类型的网站 创建Web页面 运行页面 4.1.2 增加控件并实现对控件编程 在页面中增加控件 设置控件属性 实现对按钮控件的编程 运行页面 4.1.1 创建一个网站和一个页面 1. 新建文件系统类型的网站 4.1.1 创建一个网站和一个页面 （续） 创建Web页面 4.1.1 创建一个网站和一个页面 （续） 运行页面：在Web页面中输入“欢迎使用VWD” ，按下“CTRL+F5” 运行 4.1.2 增加控件并实现对控件编程 在页面中增加控件 4.1.2 增加控件并实现对控件编（续） 设置控件属性 4.1.2 增加控件并实现对控件编（续） 对按钮控件编程：在FirstWebPage.aspx页面的设计视图中，用鼠标双击按钮控件，VWD将会在与FirstWebPage.aspx页面相关联的代码文件FirstWebPage.aspx.cs中自动产生一个处理按钮单击事件的一个语句模板： 4.1.2 增加控件并实现对控件编（续） 对按钮控件编程： 4.1.2 增加控件并实现对控件编（续） 运行页面 ： 4.2 在VWD中实现Web页面编辑 4.2.1 在设计视图中编辑页面 修改默认视图 格式化文本 创建链接 4.2.2 在代码视图中编辑HTML 4.2.3 各种HTML元素间的导航 通过文档大纲导航 通过标签导航器导航 修改默认视图 单击菜单“Tools”中的“Options”命令，出现如图2-21所示的对话框，在第一行的“Start Pages in”项目下，选择“Design View”，然后单击按钮“OK”即可完成将默认视图修改为设计视图。 格式化文本 用鼠标选择页面文字，然后单击鼠标右键，在出现的快捷菜单中选择“Style”命令出现的图 “Style Builder”对话框中，可以设置该文字的字体（Font）、背景（Background）、文本（Text）、位置（Position）、布局(Layout)等各种属性，可以基本满足实际应用中的各种需求，这里为简单起见，我们选择字体的颜色为蓝色（Blue），然后单击“OK”按钮。 创建链接 选择需要创建链接的文字，然后单击菜单“Format”中的“Convert to Hyperlink”命令，在出现的超级链接对话框键入正确的地址即可。 4.2.2 在代码视图中编辑HTML 4.2.3 各种HTML元素间的导航 1. 通过文档大纲导航 文档大纲（Document Outline）主要用于显示整个页面的文档组成结构。 单击菜单“View”中的“Document Outline”命令，可以在“Document Outline”窗口中显示FirstWebPage.aspx页面的文档组成结构 4.2.3 各种HTML元素间的导航 （续） 2. 通过标签导航器导航 标签导航器（Tag navigator）用于显示当前选择的标签信息以及该标签所处在的层次结构。标签导航器在代码视图窗口的底部，位于“Design”和“Source”选项卡的右边，如图所示。 4.3 在VWD中使用样式表 4.3.1创建一个网站和一个页面 4.3.2 创建和使用样式表 4.3.1创建一个网站和一个页面 4.3.2 创建和使用样式表 1. 创建样式表 用鼠标右键“Solution Explorer”窗口中的StyleSheet项目，在出现的快捷菜单中选择“Add New Item”命令，在项目模板中选择第一行第七列的“Style Sheet”模板 1. 创建样式表 （续） 单击“Add”按钮，“Style Sheet”模板就会为我们新建一个空白的样式表，在“Solution Explorer”窗口中双击这个样式表文件light.css，在打开的样式表文件中，将鼠标插入到body样式开始的大括号“{”与结束的大括号“}”之间，然后单击菜单“Styles”中的“Build Style”命令，就会出现构造器。 在样式构造器中，将字体的颜色设置为蓝色，将背景色设置为黄色后，单击“OK”按钮，即可建立一个样式。 1. 创建样式表 （续） 再次将鼠标插入到body样式结束的大括号“}”之后，单击菜单“Styles”中的“Add Style Rule”命令，就会出现如图所示的新建样式规则对话