1、实验 5.3 网页设计基础 0实验 5.3 网页设计基础【实验目的】（1）理解 HTML 标记语言的作用 （2）掌握最基本的 HTML 元素的使用（3）学习在“解决方案资源管理器”中设计、组织网页的方法【实验环境】计算机硬件：Intel(R) Core(TM)2 Duo CPU P8600 2.40GHz 790MHz，RAM 2.98GB计算机软件：Windows XP Professional SP3/ Windows 7，Visual Studio 2005【知识要点】 1. HTML 标记语言 HTML（HyperText Markup Language，超文本标记语言）是表示网页的一
2、种规范，它通过标记符定义了网页内容的显示效果。标记符（也称标签）用尖括号括起来，大多数都是成对出现的，包括开始标记符和结束标记符，如和。开始标记符和结束标记符再加上它们之间所包含的内容，就构成了一个 HTML 元素。许多标记符还包括一些属性，以便对标记符作用的内容进行更详细的控制。HTML 文件是以 HTML 语言表示内容的文本文件，以.htm 或.html 为扩展名。以下是一个最基本的 HTML 文档示例：Hello.htmlHello World! Hello World! 图 5-3-1 最基本的 HTML 文档示例这是一个基本功能测试页面。 其中：和是 Web 页的开始和结束标记；和为
3、首部标记，提供 Web 页的特定信息。可在此设置标题、定义样式、插入脚本；和用于设置文档标题，显示在标题栏；和为正文标记，其内容显示在浏览器中；为一级标题标记。实验 5.3 网页设计基础 1以上 HTML 文档显示效果如图 5-3-1。2最常用的 HTML 元素介绍1）标题HTML 文档的文本内容主要由标题和段落元素表示。标题元素用标签定义，其中最大，最小。例 1：标题.html测试字号大小标题 1标题 2标题 3标题 4 标题 5标题 6显示效果见图 5-3-2。 2）段落文档的段落用标签定义，当需要结束一行，但又不想开始新段落时，使用标签。标签不需要结束标签，它出现在哪里，就在哪里换行。很
4、多页面设计者更倾向于不使用段落标签，而直接将内容放在标签之间，用强制换行来形成段落。例 2：段落.html测试段落这是第一段。这是第二段， 这里有一个换行符。分段不一定非要用p， 实验 5.3 网页设计基础 2用br换行符也行。 其中：“”和“”是两个特殊字符实体，分别代表小于号和大于号，显示效果见图 5-3-3。3）超链接HTML 使用标签来创建一个连接到其他文件的链接，称为超链(Hyper Link)。超链可以指向网络上的任何资源。创建一个超链的语法为：显示的超链名其中 href 属性用来指定连接到的地址，在开始标签和结束标签中间的部分将作为超链显示在页面上。例 3：超链接.html测试超
5、链接图 5-3-4 “超链接”示例微软主页 显示效果见图 5-3-4。4）HTML 框架在页面中使用框架（即创建框架集网页）可以将页面窗口划分为不同的区域，在这些区域中可以同时显示多个 HTML 文档中的内容。在框架集网页中不包含任何可显示的内容，而只是包含如何组织各个框架的信息和框架中的初始页面信息。除了基本的 html、head 标记外，主要包括框架集标记符（必需有结束标记符）和框架标记符（没有结束标记符）frameset 元素中可以包含多个 frame，还可以再嵌套地包含内部 frameset 元素。frameset 和 frame 中可以指明 name、ID、rows 、cols 、s
6、rc 等属性，frame 还可以作为超链的目标。例 4：框架.html测试框架实验 5.3 网页设计基础 3显示效果见图 5-3-5。图 5-3-5 “框架”示例例 4 中，外层的将整个页面分为上下两栏，上面的栏中显示“标题.html”中的内容，占全页 20%的高度；下面的栏占全页 80%的高度，其中嵌套了另一个。该又分为左右两栏，左边的栏中显示“段落.html”中的内容，占全页 25%的宽度；右边的栏中显示“标题.html”中的内容，占全页 75%的宽度。5）HTML 表格HTML 表格由标签定义。每个表格被划分为多个行(使用标记符)，每行又被划分为多个数据单元格(使用标签)。文档内容放在
7、td 元素中，这些内容可以是文本、图像等几乎所有的 HTML 元素，还可以是嵌套的表格和 ASP.NET 控件（VS 2005 环境下） 。表格是网站建设中应用非常广泛的一个元素，除了显示需要表格化的内容外，还经常用它来规划网页的布局。用表格规划网页布局与使用框架不同。使用框架需要将内容放在多个 HTML 文档中；而使用表格，所有的内容都在同一个文档中。因此，当内容需要变化时，一般使用框架；如果不需要变化，一般使用表格。例 5：表格.html测试表格图 5-3-6 “表格”示例第 1 行,第 1 列第 1 行,第 2 列 第 1 行,第 3 列实验 5.3 网页设计基础 4第 2 行,第 1
8、列合并的单元格 显示效果见图 5-3-6。例 5 创建了一个两行多列的表格，第一行由三个单元格组成，第二行由两个单元格组成，其中第二个单元格是由两个列合并生成的，通过设置属性 colspan=“2“来实现；设置 align=“center“使得单元格中的数据能居中显示。6）HTML 图像 使用标记符可以在 HTML 文档中显示图像，还可以使用图像作为页面或表格等元素的背景，或用图像作为超链接。例 6：图像.html测试图像图 5-3-7 “图像”示例显示效果见图 5-3-7。7）HTML 中的注释使用注释标签可以在 HTML 文档中插入注释，注释会被浏览器忽略。使用注释对复杂代码加以说明是一个
9、好的编程习惯。例 7：【实验内容】1. 制作“管理员登录页”2. 制作“管理员主页”【实验步骤】实验 5.3 网页设计基础 51. 制作“管理员登录页”本实验将制作如图 5-3-8 所示的“网上多媒体音乐商店”管理员后台登录页面AdminLogin.aspx。要求用户输入帐户名 Admin 和密码 123，然后单击“登录”按钮，如果输入项为空或输入错误，则在密码框下方显示“账户名或密码不能为空！”或“账户名或密码错，请重新输入！”的提示信息；如果输入正确，进入管理员主页AdminIndex.aspx。图 5-3-8 “网上音乐商店”管理员后台登录页面1）启动Visual Studio 2005
10、集成开发环境单击“开始”|“所有程序”|Microsoft Visual Studio 2005|Microsoft Visual Studio 2005，启动 Visual Studio 集成开发环境。 2）创建网站在系统主菜单中选择“文件”|“新建”|“网站” ，打开“新建网站”对话框。在“新建网站”对话框中，选择“ASP.NET网站”模板，使用“文件系统”位置选项和Visual C#语言，本实验项目取名为“实验5.3.1” ，存放在“实验5.3”文件夹下，单击“确定”按钮。当新建一个网站(项目)时，VS 2005会自动为其创建一个解决方案，并显示在解决方案资源管理器中(一般情况下，解决方
11、案资源管理器在集成开发环境的右侧)。所谓解决方案，就是将与一项开发任务相关的多个项目组织在一起。解决方案中可以包含多个项目，项目中又可以包含多个文件夹和文件项。新创建的网站项目仅包括ASP.NET保留文件夹App_Data和一个默认网页Default.aspx。3）删除Default.aspx页在“解决方案资源管理器”中，选中Default.aspx项，按键盘上的删除键即可。4）新建“管理员登录页”AdminLogin.aspx（1）在“解决方案资源管理器”中选中项目路径“D:实验5.3.1” ，单击右键，在弹出的快捷菜单中选择“添加新项” （见图5-3-9） ，弹出“添加新项”对话框。实验
12、5.3 网页设计基础 6图 5-3-9 快捷菜单 5-3-10 “添加新项”对话框（2）在“添加新项”对话框中选择“Web 窗体” ， “名称”栏中填入AdminLogin.aspx，选中“将代码放在单独的文件中”复选框，按“添加”按钮（见图 5-3-10） 。5）了解网页的编辑方法Visual Studio 下网页的编辑有两种视图， “设计”视图和“源”视图。在设计视图下，系统显示的是所见即所得的网页效果预览；在源视图下，系统显示的是网页的源代码（见图 5-3-11） 。这两种状态下都可以设计和布局网页。图 5-3-11 网页的“源代码”视图新创建的Web页面代码的第1行为一个Page指令，
13、该指令定义网页一级属性。例如，在上述代码中，通过Page指令指定了4个网页级的属性，其中： Language属性指明了默认的编程语言； AutoEventWireup属性指明控件的事件是否自动匹配； CodeFile属性指明了隐藏代码文件的文件名； Inherits属性指明本页面编译后的类名称，该类在源代码文件中实现。!DOCTYPE指令用于指定文档类型定义(Document Type Definition, DTD)。 上述代码的主体部分是 HTML 内容标签，其含义与一般的 HTML 文档相同。ASP.NET 2.0推荐将文档内容（包括动态和静态内容）放在嵌套的和标签之内，便于引发页面回送
14、和控制页面的布局和格式。6）为页面添加标题和背景图片（1）给“源”视图的标签添加文字内容：实验 5.3 网页设计基础 7管理员登录页（2）在“解决方案资源管理器”中选中项目路径“D:实验 5.3.1”，单击右键，在弹出的快捷菜单中选择“新建文件夹” ，给项目创建 Images 文件夹，拷入loginBack.gif、loginBottom.gif、loginButton.gif 和 loginTop.gif 等图片文件；（3）给“源”视图的标签 添加 background 属性：在以上代码的书写过程中，随时有“智能感知”提示输入的选项，这样既避免了错误，也大大提高了设计效率。也可以选择在“设计
15、”视图中利用“属性”等窗口进行交互的设置（见图 5-3-12） 。图 5-3-12 网页的“设计”视图 图 5-3-13 “选择项目项”对话框在“属性”窗口中，选择 DOCUMENT,点击 Background 属性后的省略号按钮，显示图5-3-13“选择项目项”对话框。选择 loginBack.gif 后按“确定” 。在同一个属性窗口中也可以设置 title 属性值：管理员登录页。7）布局“管理员登录”页面图5-3-14 布局“管理员登录”页面2. 制作“管理员主页”本实验将制作如图 5-3-15 所示的“网上音乐商店”管理员主页 AdminIndex.aspx。实验 5.3 网页设计基础
16、8在实验 5.3.1 的基础上，本实验利用 HTML 框架完成管理员主页的结构设计，框架内的具体内容，将在后续实验中完善。图5-3-15 “网上音乐商店”管理员主页1）启动Visual Studio 2005集成开发环境2）创建网站在系统主菜单中选择“文件”|“新建”|“网站” ，打开“新建网站”对话框。在“新建网站”对话框中，选择“ASP.NET网站”模板，使用“文件系统”位置选项和Visual C#语言，本实验项目取名为“实验5.3.2” ，存放在“实验5.3”文件夹下。3）删除Default.aspx页，将实验5.3.1中的Images文件夹、AdminLogin.aspx和AdminL
17、ogin.aspx.cs复制到“实验5.3.2”项目文件夹中；在Images文件夹中添加banner.gif图片。4）新建管理员主页AdminIndex.aspx及相关的Logo.aspx、Left.aspx和Main.aspx页方法同实验5.3.1的“新建管理员登录页”AdminLogin.aspx。5）利用HTML框架布局管理员主页为了显示出图5-3-16中的效果，在AdminIndex.aspx的“源”视图中，加入以下代码：管理员主页说明：表示该框架集将页面分为上下两部分，上半部分框架实验 5.3 网页设计基础 9高度为75像素，剩余高度归下半部分框架；下半部分框架又嵌套了另一个框架集，
18、它将这部分页面分为的左右两部分，左半部分宽度为180像素，其余宽度归右半部分框架。rows属性和cols属性分别可以构造出横向分隔框架和纵向分隔框架，它们的取值包括三种类型，一是直接指定像素数，二是指定百分数，三是使用n*（其中n是1的整数）指定相对大小。指定属性值时，值之间用“，”号分隔并且不能有空格，根据值的个数和设置可以确定框架数目和位置。src属性值指定框架中要显示的页面；指定noresize不允许页面显示时，通过鼠标改变框架的大小。图5-3-16 利用HTML框架布局管理员主页6）布局Logo.aspx页Logo.aspx是AdminIndex.aspx顶部框架中的内容，除了显示页面
19、标题图片外，还显示了时钟和当前管理员信息，另外有一个返回AdminLogin.aspx页面的超链接“注销” 。依旧采用HTML表格来布局页面，与实验5.3.1不同的是，这里我们尝试用创建表格的向导来建表。（1）在Logo.aspx“设计”视图中，单击菜单栏“布局”|“插入表” ，显示图5-3-17对话框。图5-3-17 “插入表”对话框（2）设置2行2列表，按“确定”后， “设计”视图显示一2行2列的表格。选中表格实验 5.3 网页设计基础 10第1列的前2行，单击右键，在弹出的快捷菜单中选择“合并单元格” （图5-3-18） 。图5-3-18 快捷菜单 图5-3-19 “嵌套表”结构（3）将
20、光标定位到表格的合并单元格中，同上方法插入一嵌套的2行1列表格；将光标定位到表格的第2行第2列中，同上方法插入一嵌套的1行3列表格，效果如图5-3-19。（4）在属性窗口中设置DOCUMENT的Style属性的“边框” （图5-3-20） 。图5-3-20 “属性”窗口（5）在属性窗口中设置外层TABLE的Style属性的“背景”和“位置” （图5-3-21、图5-3-22） 。实验 5.3 网页设计基础 11图5-3-21 设置“背景” 图5-3-22 设置“位置”（6）为表格单元格添加控件手工方式调整好表格单元格大小，从工具箱“标准”控件组中将两个标签控件Label分别拖入左侧内嵌表格的第
21、1行（日期）和第2行（管理员）中，将一个超链接控件HyperLink拖入右侧内嵌表格的第3列（注销）中。（7）设置控件属性将光标定位到要修改属性的控件上，在相应的属性窗口中设置属性，如：将日期提示标签控件的ID设为labelDate、Text设为“今天是：”、Font-Size设为13px、ForeColor设为White；将管理员标签控件的ID设为labelAdmin、Text设为“当前的管理员是：”、Font-Size设为13px、ForeColor设为White；“注销”超链接控件HyperLink的ID设为hyperlinkLogout 、NavigateUrl设为AdminLogin
22、.aspx、 Target设为_top、Font-Size设为14px。效果如图5-3-23所示。图5-3-23 LOGO效果图7）编写Page_Load()事件代码/在 日期提示标签控件中显示星期string week;week = DateTime.Today.DayOfWeek.ToString();switch (week)case “Sunday“:week = “ 星期日“; break;case “Monday“:week = “ 星期一“; break;实验 5.3 网页设计基础 12case “Saturday“:week = “ 星期六“; break;default:we
23、ek = DateTime.Today.DayOfWeek.ToString(); break;labelDate.Text = labelDate.Text + DateTime.Now.ToLongDateString() + week;labelAdmin.Text = labelAdmin.Text+Session“AdminName“.ToString();这段代码在实验5.2.1中已有详述。8）查看结果右击“解决方案资源管理器”的 AdminLogin.aspx 项,在弹出的快捷菜单中选择“在浏览器中查看” ，显示图 5-3-8 界面。输入账户名 Admin，密码 123，单击“登录”按钮，调用“管理员主页”AdminIndex.aspx，显示图 5-3-15 界面。
