[it计算机]visualstudioc网页制作完全手册

[it计算机]visualstudioc网页制作完全手册内容摘要：

9 图 页面中 引用 CSS 文件 查看 CSS 样式作用结果 点击 “ 设计 ” ， 进入设计页面后即可看到 布局结果。 注意：此处为了结果的美观，对 DIV 对象的 Height 定义了值， 以后在各个板块中加入了其它对象后，要考虑删除 Height 的值，或修改 Height 的值。 如未定义 Height 的值，则 DIV 容器的 Height 会自动胀大，这很常用。 图 布局最终的效果 网页上加载图片 或 flash 图片或 flash 对网站 的美工程度有极重要的作用，离开了图片或 flash，网站就会单调无味，没有生机。 1 点击拖动此文件 2拖动文件至此位置， CSS文件只能放在此处 20 准备图片及 flash 文件 1． 在网站所在的文件夹 之 中新建一个名为 Images 的文件夹， 再 在其中复制一些图片及 flash 文件。 图 复制到网站中的图 形 文件 2． 打开 “ 解决方案资源管理器 ” ，点击 “ 刷新 ” 图标，即可 看到 Images 的文件夹 及其 中 刚才加入的图片文件 图 刷新看到新加入的图 形 文件 加载图片 1． 加入图片控件，设置其宽高属性。 可加入多个图片控件 在 bodyright 层中 从“工具箱”中 拖入一个 Image 图像控件（自动命名为 Image1）， 再打开其属性窗口，设置其 Height 为 100px， Width 为 100%。 注意： 100%表示占容器的比例， Image1 图像控件的容器为 bodyright 层（ DIV）， Image1 对象的 Width为 100%是指 bodyright 层有多宽， Image1 就有多宽。 21 图 在页面上加入图形显示控件 2． 进入 Image1 属性窗口，找到 ImageUrl 属性 （图片路径） ， 点击 ，弹出选择图像框 图 图形显示控件加载图片文件 3． 点击 images 文件夹，从中选择所要的图像文件，点“确定”。 22 图 图形显示控件加载图片文件 4．最简单的图片加载方法是，在网页处于设计视图时，将选中的图片文件直接拖到网页之中，然后用鼠标调整大小。 注意：此操作使用为工具箱内 HTML 项中的 img对象。 加载 flash文件 加载方法有多种，但最常用的是使用下列代码进行加载。 1. 点击 中的源 进入 HTML代码页中， 在 logodiv层中输入下列代码。 div class=divAll div class=headdiv div class=logodiv object classid=clsid:D27CDB6EAE6D11cf96B8444553540000 codebase= style=width: 1010px。 height: 100px。 param name=movie value=../images/ / param name=WMODE value=Transparent / %embed src=../images/ width=1010px height=100px /embed% /object /div div class=menudiv /div /div 注意： 这 是 格 式 代 码 ， 不 能 改 动。 看 清 value=../images/ 及 embed src=../images/的值是一样的。 Width及 height可以调整 ，但也要一致。 注意：有时 embed 可以不用， flash 文件同样会显示。 但考虑兼容性不同浏览器及版本，一般保留embed。 小结 1．母版页是网站中非常重要的页面，可以决定整个网站或一类页面的一致性，必须掌握。 2． CSS 样式可减小网站 布局和 美化的工作量，在网站布局及美化中至关重要，必须学会，深入了解。 3． Flash，图片，音乐等是网站之中不缺少的元件，如何使用应该掌握。 第 3 章 栏目页操作 栏目是一个新闻网站的基础 ， 所有新闻最终都归类到相应的栏目之中。 栏目名应该是动态的可以随时增加或修改调整的。 甚至各栏目在网站中排布的位置也是可调整的。 这样的新闻网站才具有适应性。 栏目页的主要功能是对栏目进行以下操作：增加栏目 项 ，修改栏目名，删除栏目 项 ，变动栏目 项 所在位置。 建立栏目文件夹 及栏目管理页 不同功能的操作放在不同的文件夹中，非常 有 利于网站的权限管理。 分离的权限管理可以使得网站权限清晰，层次分明，同时减少权限管理的工作量。 建立栏目 及新闻 文件夹 在“解决方案资源管理器”的 F:\WebNews 中右击，再点新 建文件夹，分别建立 LMIO 和 NEWIO 文件夹，用于存放栏目操作页和新闻操作页 ，如图。 建立不同文件夹的目地是方便进行“ 权限管理 ”。 23 图 建立栏目文件夹和新闻文件夹 新 建栏目管理页 为统一网站样式布局，此页是建立在母版页的基础之上，由母版页决定了 其 基本的布局格式。 这是本网站 建立的 第一个页面 ，步骤非常详细，之后的网页新建 过程 就会略过。 1． 在 LMIO 文件夹上右击，点 击 “添加新项”。 如图。 图 新建栏目操作页 2． 选中“ WEB 窗体”，在名称栏中改名为 “ ”， 勾选中“选择母版页”， 点“添加”。 如图 24 图 新建有母版页的栏目操作页 3． 选择母版页，点“确定”。 如图 图 选 中 母版页 4． 在 页的 HTML 代码 页 中改 Title=无标题页 ，如 图。 为 Title=栏目操作 ，如 图， 此为网页的标题名。 要养成修改 页 面标题的好习惯。 图 修改前的代码 图 修改以后的代码 栏目页设计制作 准备 点 页的 “设 计”进 入 设计 视图 ， 点图标 打开工具箱。 图 左边为存放所有 控件 对象的工具箱，右边为设计视图。 工具箱中的 控件 对象要加入到网页中才能发挥作用。 页面中加入 工具箱 对象的方法有多种，可以 在工具箱中 用 鼠标 点住 控件 对象 将其 拖入 到页面 ， 也 可以直接 在工具箱中 鼠标 双击要加入的 控件 对象 到光标所在点。 25 图 工具箱中 控件 对象 加入页面 操作 栏目页 中 GridView 对象操作 加入 GridView1 对象 显示表格数据是软件开发中的一个 基本 任务。 提供了许多工具来在网格中显示表格数据 ，GridView 控件 是其中最常用的一种 ，功能非常强大。 通过使用 GridView 控件，可以显示、编辑和删除多种不同的数据源中的数据。 要做 好 网站必须学精 GridView 的使用。 使用 GridView 可以执行以下操作：  通过数据源控件自动绑定和显示数据。  通过数据源控件对数据进行选择、排序、分页、编辑和删除。 还可以通过执行以下操作来自定义 GridView 控件的外观和行为：  指定自定义列和样式。  利用模板创建自定义用户界面 (UI) 元素。  通过处理事件将自己的代码添加到 GridView 控件的功能 中。 进入 的设计视图， 在 DIV 框中点一下，让光标进入之中（目地是将以后加入的对象放入此DIV 层中），然后双击 “工具箱”中的 GridView，将其 加入 到网页中成 GridView1 对象 （此举为加入网格，用于显示数据库中的数据）。 如 图 为加入网页后 GridView1 对象 的初始状态。 图 GridView 对象 GriaView1的 任务 GriaView是专门用于显示及操作表格数据的对象。 要让 GriaView显示 及操作 数据，就必须将 GriaView和数据库中的表或抽 取数据的 SQL 命令进行绑定。 “ GriaView 任务 ”就是进行数据绑定的工具。 如 图。 1．启动 GriaView 任务 26 将鼠标的箭头移入 GriaView1 对象之中，并点击 GriaView1 对象右上角的 ，出现 GriaView 任务。 图 GridView1 对象的任务 2． 新建 GriaView1 对象 的 数据源 点 “ 选择数据源 ” 的下拉按钮，点“新建数据源”，再点“数据库”，点“确定”。 如图。 图 数据源的 ID 值 注意：此处对数据源没有重新取名，使用得是系统提供的默认名 SqlDataSource1。 以后要养成改名的好习惯，因为取一个见名识意的名字能让以后的维护工作少走弯路。 配置 GriaView1 对象的 数据源 1. 点下拉框，选中 数据库，点“下一步”， 如图。 27 图 选择网站中的数据库连接 注意：第一次进行数据连接时会出现 数据库名，以后不 会 出现。 如果 数据库名 没有出现， 最简单可靠的方法是 将 VS 系统关掉，重新再打开，即可 ， 还 否则是未建数据库。 2. 改 ConnectionString 为 Conn，如 图。 点“下一步”。 图 修改连 接字串名 注意：以 后本网站对数据库的联接就使用 Conn，再也不会出现 了。 GriaView1对象 数据源中表 配置 1. 选中“指定来自表或视图的列”，在名称下拉框中选中“栏目”表，并如下勾选栏目表的列（自动生成 SQL 代码： SELECT [lmid], [栏目名 ], [说明 ], [排序 ] FROM [栏目 ]）。 图 指定在页面上显示的字段。 勾选中的字段会在页面中显示表中的数据记录，未勾选的则不会。 图 栏目表 数据 要 显示 的列 —勾选 2. 点“ ORDER BY（ R）” ， 此为对从数据库栏目表中选择出来的数据进行排序，在排序方式中，选中 排序 （ 排序列 ） ，即使用栏目号进行从小到大的排序。 自动生成 SQL 代码： SELECT [lmid], [栏目 ], [说明 ], [排序 ] FROM [栏目 ] ORDER BY [排序 ]，如 图。 点“确定” ，回到上一页。 28 图 配置数据 记录 的排序 数据源中生成 SQL 代码 在 “高级 SQL 生成选项 ” 框 ，勾中“生成 INSERT、 UPDATE 和 DELETE”（此时会自动 在页面中 生成 SQL 的插入、更新和删除 等 命令代码）， 如图。 点“确定”。 回到上一页，点“下一步”，再点“完成”。 要对数据进行操作就必须 在页面 生成 INSERT、 UPDATE 和 DELETE 代码。 以后用存贮过程代替。 图 勾选生成 INSERT、 UPDATE 和 DELETE，生成 SQL 操作 代码 注意：不能勾选 “使用开放式并发 ”项 ，这是高级用法，等水平较高时再去掌握。 GriaView 对象的列操作 编辑 GriaView1 对象中列 将鼠标的箭头移入 GriaView1 对象之中，点击 GriaView1 对象右上角的 ，出现 GriaView 任务， 勾中“启用编辑”，“启用删除”项 ， 再去 点 击“编辑列”。 如图 29 图 操作 GriaView1 对象的命令按钮列 调整 GriaView1 中用于显示的列 1． 选中 CommandField列，点 ，将其移到最下面， 如图。 图 调整 GriaView1 中显示列的顺序 2． 删除“ lmid”列 ，如图。 再 点“确定”。 Lmid 为栏目编号，由系统生成，用户管不到，所以不要显示出来。 30 图 删除 GriaView1 中不想显示的列 GriaView对象的属性设置 将鼠标的箭头移入 GriaView1 对象之中，右击鼠标，在菜单中点击“属性”， 打开属性窗口， 在属性窗中找到“ Width”，输入 96%作为 GriaView1 对象的宽度。 如图 图 设置 GriaView1 对象的宽度 栏目页中 FormView 对象 FormView 控件用于一次显示数据源中的一个记录。 在使用 FormView 控件时，可创建模板来显示和编辑绑定值。 这些模板包含用于定义窗体的外观和功能的控件、绑定表达式和格式设置。 FormView 控件通常与 GridView 控件一起用于主控 /详细信息方案。 FormView 控件通常用于更新和插入新记录。 该控件通常用于主 /从方案，在此方案中，主控件的选定记录决定要在 FormView 控件中显示的记录。 FormView 控件依赖于数据源控件的功能执行诸如更新、插入和删除记录的任务。 即使 FormView 控件的数据源 有 多条记录，该控件一次也仅显示一条数据记录。 FormView 是数据录入操作的好帮手。 31 加入 FormView1 对象 FormView1 对象 在此 只是 用于一个数据行的新增操作， 即用于一个栏目项的 新。