第3章HTML与页面设计.ppt
第3章 HTML与页面设计,参考网站：http:/www.blabla.cn/html_tutorials/all_index.html 含有示例演示环境，HTML 在线编辑器，用来在线测试各种示例的运行结果,本章要点及学时安排,学会使用HTML的常用标记 学会在HTML页面中建立和调整表格 熟练使用HTML的超链接和图片 熟悉HTML页面的框架 理解HTML和ASP.NET的关系 理解“初步设计学生管理信息系统用户界面”的含义 -学时安排,-本章要点,本章授课学时为1-2学时 练习和上机学时为1-2学时,教学内容,HTML简介 HTML网页的段落与文字 在HTML网页中使用超链接 在HTML网页中使用图片 在HTML网页中使用表格 在HTML网页中设定框架 在HTML网页中建立表单 HTML和ASP.NET 设计学生管理信息系统用户主页面,3.1 HTML简介,HTML是一种描述性语言,由文本和标记组合而成，后缀名是.htm或.html 【例3-1】第一个HTML文件,a） 双击html文件显示结果 b） 在浏览器中输入地址显示结果,3.2 HTML网页的段落与文字,网页中常用的几种与段落和文字有关的基本标记及其属性 注释 标题 换行和段落和 水平分割线 和,【例3-2】使用画一条水平分隔线，运行结果如图：,3.3 在HTML网页中使用超链接,超链接：代表一个链接点，将当前位置的文本或图片连接到其他的页面、文本或图像。 主要语法 : 在和之间，是超链接要显示的文字或图片 如： 用本窗口打开网易 用本窗口打开同一文件夹下的test.html页面 ,3.3 在HTML网页中使用超链接,网页内部进行跳转，其基本格式是： 第二部分 第一部分内容 第二部分实际内容 这样当点击“第二部分”这个超链接后，就会自动转到“第二部分实际内容”这个地方来。,3.4 在HTML网页中使用图片,将图片插入HTML网页 指定图片区域设定超链接,3.4.1 将图片插入HTML网页,使用标记可以在网页中插入图片 主要语法： alt：当鼠标放在图片上时，显示的小段提示文字，一般用于说明此图片的标题或主要内容。当图像文件无法在网页中显示时，在图像的位置也会显示alt所设置的文字。 width和height :在默认情况下，如果改变其中一个值，则另一个值也会等比例进行调整，除非同时设置两个属性。,3.4.2 指定图片区域设定超链接,1.图片超链接 主要格式： ,2.图片的热区链接 除了对整幅图像设置超链接外，还可以将图像划分为若干区域，叫做“热区”，每个区域可设置不同的超链接。 包含热区的图像可以称为“映射图像” ，需要使用标记的usemap属性，定义图像的映射图像名，语法格式为： 在图像中定义各个热区以及超链接，主要语法为： ,其中标记有两个重要属性： shape属性，用来定义热区形状。 coords属性，用来定义矩形、圆形或多边形区域的坐标。,【例3-4】图片热区链接，显示效果如下：,如果鼠标移动到图片“？”附近的矩形区域，光标会变成小手的形状，单击则打开help.html页面。,3.5 在HTML网页中使用表格,建立一个HTML网页表格 设定表格行 在表格中加入单元格及其内容,3.5 在HTML网页中使用表格,在网页中使用和标记来创建表格： 在表格中横的称为行（row），用和表示， 每一行又可以分为很多列（column）或单元格（cell），用和表示。,语法如下： 单元格内的文字 单元格内的文字 单元格内的文字 单元格内的文字 ,3.5.1 建立一个HTML网页表格,标记常用语法格式为： ,3.5.1 建立一个HTML网页表格,其中各属性的意义如下： align：表格在上一层容器控件中的对齐方式。有center、left、right三个值，其中left是默认对齐方式。 bgcolor：设置表格的背景色，默认是上级容器的背景色。 border：表格线的宽度，单位是像素，默认值是1。 bordercolor：设置表格线的颜色。如果没有包含border属性，或者border属性值是0，则忽略此属性值。 height：表格的高度，以像素或页面高度的百分比为单位。但如果表格内容大于设置的高度，则表格会自动扩张，以便容纳所要显示的内容。 width：表格的宽度，以像素或页面宽度的百分比为单位。但如果表格内容大于设置的宽度，则表格会自动扩张，以便容纳所要显示的内容。 cellpadding：单元格内部所显示的内容和表格线的距离，单位是像素。 cellspacing：表格线的间隔，单位是像素或百分比。,3.5.2 设定表格行,要设置表格各行的属性，需要使用标记的各个属性。 标记及其属性的常用语法格式为： ,标记的一些和不同的属性的意义如下： align：文本在单元格中的水平对齐方式。有center、left、justify、right四个值，其中left是默认对齐方式，justify是指在单元格中合理调整内容，以恰当显示。 valign：文本在单元格中的垂直对齐方式。有baseline、top、middle、bottom四个值，默认值是middle，即垂直居中对齐。baseline是指单元格中内容以基线（baseline）为准，垂直对齐，它类似于bottom（底端对齐）。,3.5.2 设定表格行,3.5.3 在表格中加入单元格及其内容,标记的常用语法格式为： 标记的一些和或不同的属性的意义如下： colspan：该单元格在水平方向上跨的列数，默认为1。 rowspan：该单元格在垂直方向上跨的行数，默认为1。colspan和rowspan是为制作复杂表格准备的。,3.5.3 在表格中加入单元格及其内容,【例3-5】设置表格行、列。显示结果如图所示：,3.6 在HTML网页中设定框架,框架（frame）最主要的功能是用来分割页面窗口，使每个“小窗口”能显示不同的HTML文件。 框架的基本结构 浮动框架,3.6.1 框架的基本结构,使用框架结构，可以在一个浏览器窗口中装载多个HTML文件，即每个网页占据一个框架。而多个框架可以同时显示在一个浏览器窗口中，共同组成一个最大的框架。 1.框架的基本语法 ,框架基本语法的说明 外层标记是和，用来定义主文档中有几个框架、并且各个框架是如何排列的，定义的方法是使用cols属性或rows属性。使用标记时，这两个属性必须至少选择一个。 所有的框架按照rows和cols的值从左到右、然后从上到下排列。 标记放在和之间，用来定义某一个具体的框架。标记具有src和name属性，这两个属性一般都需要赋值。src是此框架要显示的HTML文件名（包括路径），name是此框架的名字。,2.框架的嵌套 在外层框架的定义中，再插入、定义框架，取代某一个外层框架的定义，这就是框架的嵌套。 【例3-6】使用嵌套框架,显示结果如下:,当单击左边框架中的超链接“学校概况”时，就会在右边框架中显示文件Example3-6a.html的内容。,3.6.2 浮动框架,浮动框架是一种比较特殊的框架，它是在浏览器窗口中嵌套子窗口，也就是整个页面并不是框架页面，但是却包含一个框架窗口。主要语法为： 【例3-7】使用浮动框架, 采用浮动框架在页面开辟一个窗口,3.7 在HTML网页中建立表单,不同于编写纯静态网页的HTML语法,表单是用来和用户交互的，用户可以改变表单中的内容，使网页具备与用户交互的功能。 使用标记来定义表单，其基本语法结构如下： ,3.7 在HTML网页中建立表单,表单中常用控件有：文本框，复选框和单选框，按钮等，这些控件的基本格式： type属性定义了控件的类型，不同的type值代表不同的控件 。表单中的常用的控件包括文本框text/textarea/password、 单选按钮radio和复选框checkbox、下拉列表框select、按钮button等,3.7.1 文本框,文本框控件用于输入文本，分单行文本框、多行文本框和密码框。 (1) 单行文本框 (2) 多行文本框 (3) 密码框 注意:密码框是单行文本框的特殊形式，所有密码框中的文本都显示为星号或黑色圆点。,3.7.2 单选按钮和复选框,单选按钮（radiobutton）用来让用户在一组选项中进行唯一选择，复选框（checkbox）则用于在一组选项中进行多项选择。 单选按钮 语法为 type=radio：说明该按钮是单选按钮 name：定义单选按钮的名称，同一组单选按钮应具有相同的名称； value：当用户选择该按钮后，传送到程序中的值 . checked：表示该按钮初始就处于被选中状态。一组单选按钮中最多只能有一个设置为checked。,(2) 复选框 语法为： type = checkbox：说明该控件是一个复选框； name：同一页面中，不同的复选框应有不同的名称； value：当用户选择该复选框后，传送到程序中的值； checked：表示该复选框初始就处于被选中状态。,3.7.3 下拉列表框,下拉列表框用于列举一组可供选择的内容，点击按钮可显示所有选项，用户选择其中的一个选项。 语法如下： 显示内容1 显示内容2 显示内容n “选项值”是提交表单时的值，是供程序内部使用的。程序通过检测该菜单的value值，可以知道用户选择了哪一项，而选项显示的内容才是真正显示给用户的。selected表示某选项在初始情况下处于选中状态，一个下拉菜单中只能有一个项默认被选中。,3.7.4 按钮,三种类型：普通按钮（button）、提交（submit）按钮和重置（reset）按钮 (1)普通按钮 (2)提交按钮和重置按钮 value:显示给用户的文字 name:在程序内部的名称,【例3-8】使用提交和重置按钮 （单击“提交”按钮，将出现Example3-8a.html提交页面。单击“重置”按钮，将清空对“姓名”的输入和“喜欢的运动”的选择。）,3.8 HTML和ASP.NET,HTML和ASP.NET区别如下： (1) 从起源上来说，HTML是由Berners-Lee开发的，自1989年发展起来不断发展的超文本标识语言；而ASP.NET则是由微软公司于1998年在IIS5.0和ASP4.0的基础上推出的。 (2) 从用途上来说，HTML是用于Web页面的布局和内容显示，可以将需要的控件放在指定的位置，习惯的说法就是用来设计应用程序用户界面；ASP.NET不是ASP的简单升级，而是Microsoft推出的新一代Active Server Pages，是微软发展的新的体系结.NET的一部分，其中全新的技术架构会让每个程序员的编程生活变得更简单。,3.8 HTML和ASP.NET,HTML和ASP.NET的联系如下： (1)在Web应用程序开发过程中，先使用HTML初步设计用户界面，然后再用ASP.NET中用C#语言编程实现页面的业务功能，并在HTML中嵌入用JavaScript、VBScript和C#编写的脚本。 (2)Microsoft的ASP.NET集成开发工具内置了HTML标记，可以在ASP.NET Web页面的编码过程中可以直接访问和处理HTML标记。换句话说，ASP.NET包含了HTML的内容。 (3)ASP.NET将服务器端得到的数据用HTML标记显示出来。 (4)总的说来，HTML和ASP.NET是相互配合的，前者是后者的基础，后者是前者的进一步应用和扩展。,3.9 设计学生管理信息系统用户主页面,本教程使用Dreamweaver8.0作为用户界面初步设计的工具，它是当前最流行的HTML页面编辑器，在本教程第2章给出了Dreamweaver8.0安装过程。 设计主体框架页面 设计添加学生信息页面,3.9.1 设计主体框架页面,案例系统的应用程序主页面是由四部分组成的一个框架页面，被称之为“主体框架页面”，其顶部用于显示Logo信息和用户登录信息，左部用于显示用户操作的菜单，底部用于显示版权和联系方式等信息，剩余的中间部分用于显示不同操作菜单对应的Web页面。 各个部分制作完成后放入这个框架，得到的页面效果如下页图所示：,3.9.2 设计添加学生信息页面,“添加学生信息页面”名称是teaAddStuInfo02.html，用于教务人员进行添加学生的基本信息操作的Web页面。在IE浏览器中显示该页面的效果如图所示：,
