《ASP.NET语言程序设计案例教程教学课件作者沈大林等第1章节》由会员分享，可在线阅读，更多相关《ASP.NET语言程序设计案例教程教学课件作者沈大林等第1章节（55页珍藏版）》请在金锄头文库上搜索。
1、目录,第1章 网页设计基础 1.1【案例1】招生简章 HTML网页设计的基本概念 HTML文件结构 标题格式 文字布局 字体格式 字符实体 1.2【案例2】院校简介 网页中的图像 图像的访问路径 1.3【案例3】网页模板 表格设计基础,目录, 表格标题的设置 表格大小、边框与间距的设置/ 表格中跨行、跨列单元格 的设置 表格的对齐方式 表格颜色与背景 表格与布局 1.4【案例4】商品列表 有序列表 无序列表 自定义列表 1.5【案例5】“学生咨询”导航 文件间的链接 网页内的链接,目录, 在指定窗口中打开链接 电子邮件链接 “咨询台”网页的设计 1.6【案例6】滚动通知 滚动字幕标签 默认字幕
2、滚动方式 设置滚动的方向 设置滚动的速度 多行文本的滚动字幕 图像的滚动 滚动字幕中的超链接,程序源码,1.1【案例1】招生简章 1.2【案例2】院校简介 1.3【案例3】网页模板 1.4【案例4】商品列表 1.5【案例5】“学生咨询”导航 1.6【案例6】滚动通知,1.1 【案例1】招生简章,案例效果 本案例将显示一个招生简章网页，在浏览器中显示效果如图1-1-1所示。 在本案例的实现过程中，将学习网页结构、文字布局、字体格式等内容。 设计过程（见书）,图1-1-1 招生简章,1.1 【案例1】招生简章,相关知识 1HTML网页设计的基本概念 HTML（HyperText Markup La
3、nguage，超文本标记语言）是一种用来制作超文本文档的简单标记语言。HTML文档是由HTML标记组成的文本文件，它能独立于各种操作系统平台（如Linux，Windows等）进行浏览。自1990年以来HTML就一直被用做WWW（World Wide Web，万维网）的信息表示语言，用于描述网页的格式设计和它与WWW上其他网页和文件的链接信息。使用HTML语言描述的文件，需要通过网页浏览器显示出效果。 HTML是一切网页实现的基础，在网络中浏览的网页都是一个个的HTML文件，这些网页中可以包含有文字、图片、动画和声音，还可以从当前文件跳转到另一个文件，与网络中世界各地主机上的文件相连接，故称为超
4、文本文件。 一个HTML文件包含了一些特殊的标记来告诉浏览器应该如何显示文本、图像以及网页的背景，被称为HTML标签。例如，第0章中所见过的、等。 HTML不是像C/C+、Visual Basic、Java之类的程序语言，它只是标记语言，基本上只要明白了各种HTML标签的用法就可以说是学懂了HTML，HTML的格式非常简单，只是由文字及标签组合而成。表1-1-1列出了一些常用的HTML标签。,1.1 【案例1】招生简章,表1-1-1 常用的HTML语言标签,1.1 【案例1】招生简章,下面是学习HTML标签的几点说明。 （1）任何HTML标签都是由“”号所括住，标签名称不区分大小写。例如：、和
5、表示相同的意思。W3C（World Wide Web Consortium，万维网联盟）在HTML4建议中提倡使用小写标签。 （2）多数标签是成对出现的，一对标签的前面一个是起始标签，第二个是结束标签，在起始和结束标签之间的文本是元素内容。在起始标签的标签名称前加上符号“/”便是结束标签，例如，与、与。成对出现的标签可以嵌套使用，例如： ASP.NET教程 上面的标签将“ASP.NET教程”用红色粗体文字显示。在嵌套时标签不要交叉，因为这会导致源文件的可读性差，且易出错。 （3）少数标签单独出现，没有配对的结束标签。例如： ASP.NET案例教程中国铁道出版社 上面语句中，标签是插入一个空行，
6、在这里实际上是换行，即将“ASP.NET案例教程”和“中国铁道出版社”分成两行显示。 （4）部分标签可以拥有属性，属性能够为页面上的HTML元素提供附加信息，属性只可加于起始标签中。属性通常由属性名和值成对出现，格式如下： name=“value“,1.1 【案例1】招生简章,其中name为属性名称，value为所设置的属性值。例如： 标签定义了HTML页面的主体元素，它的bgcolor属性可以告诉浏览器，网页页面的背景颜色，上面标记的意思是网页页面的背景色是蓝色。 属性值通常被包含在双引号中，也可以使用单引号。在某些情况下（如属性值本身包含引号时），使用单引号是很有必要的。 （5）为了与其他
7、标签相区别，HTML中规定了专门的标签来作为注释标签，注释标签用来在HTML源文件中插入注释，注释在显示时会被浏览器忽略，是不可见的。注释标签以“”结束，如下所示： （6）很多标签都具有颜色属性，HTML中的颜色可以有两种表示方法：十六进制的RGB格式和在HTML中定义的颜色名称。RGB格式的表示方式为“#RRGGBB”，其中R、G、B为0F的十六进制数，分别表示红、绿、蓝三种颜色的深度，从00至FF颜色逐渐加深，00为无色透明，FF为纯色。HTML中定义的颜色名称是一些常用颜色的英文单词，如red、black、green、blue、yellow等。例如： ASP.NET案例教程 ASP.NE
8、T案例教程 上面的两行代码均将“ASP.NET案例教程”显示为蓝色文字。,1.1 【案例1】招生简章,2HTML文件结构 HTML的文件结构相当简单，其主体结构主要由以下3对标签构成： 标签用以告知浏览器从这里开始是HTML文件，让浏览器认出并正确处理此 HTML文件，整个HTML文件处于标记与之间。 HTML文档通常分两部分，位于和标签之间的部分称为HTML文件头，位于至标签之间的部分称为正文。文件头部分用以记录与网页相关的重要信息，例如标题、字符集等，通常文件头部分都不会显示在浏览器中，只有正文部分会被显示出来。 一般HTML文档格式如下： 文件头信息 在浏览器中显示的HTML文档的正文
9、,1.1 【案例1】招生简章,HTML文档中，第一个标签是。这个标签告诉浏览器这是HTML文档的开始。HTML文档的最后一个标签是，这个标签告诉浏览器这是HTML文档的终止。在和标签之间的文本是文件头信息。在浏览器窗口中，文件头信息是不被显示的。HTML文件头部分可以使用一些专用的标签来记载信息，常用文件头标签有和 在和标签之间的文本是正文，会显示在浏览器中。标签之间包含的是浏览器中所显示的页面内容，作为对页面的设置，标签有一些附带的属性用于设置页面的背景颜色、正文文字颜色、链接文字颜色和页面背景图像等，后面将逐一介绍这些属性。 （1）设置文档标题 标签用于指定文档标题，使用格式如下： 文档标
10、题 在和标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。 （2）设置网页关键字 标签是记录有关当前页面的信息（如字符编码、作者、版权信息或关键字）的head元素，该标签也可以用来向服务器提供信息，比如，页面的失效日期、刷新间隔等。为了完成这些功能，标签提供了两种属性：name和http-equiv。,1.1 【案例1】招生简章,name主要用于描述网页，以便于搜索引擎对网页进行查找、分类，目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页进行分类。这其中最重要的是description（用于网页在搜索引擎上的描述）和keywords（定义搜索引擎用来分类的关键词)，从应用
11、角度来看，应该给网站中的每一页都插入这两个name属性值。例如： 其中，“ASP.NET案例教程”为所设置的当前网页的关键字。在文件头加上这样的定义后，搜索引擎就能够让用户根据这些关键字查找到网页，了解网页内容。 也可以不使用description和keywords来让搜索引擎进行检索，而使用 robots来替代。 robots的使用如下所示： 设置为all时文件将被检索，并且页上链接可以被查询；设置为none则表示文件不被检索，而且不查询页上的链接；设置为index时文件将被检索；设置为follow时则可以查询页上的链接；设置为noindex时文件不检索，但可被查询链接；设置为nofollo
12、w则表示文件不被检索，但可查询页上的链接。 此外，还可以使用Author，告诉搜索引擎当前站点的设计者姓名，例如： 上面标签将告诉搜索引擎当前站点的设计者是赵明。,1.1 【案例1】招生简章,（3）设置网页字符集 http-equiv相当于http文件头的作用，可以直接影响网页的传输。常用方式如下： 上面的标签用于描述网页使用的字符集，浏览器根据此项，就可以选择正确的编码字符集，而不需要用户在浏览器里选择。常用中文字符集有GB2312、BIG5和UTF-8，GB2312是简体中文编码，而BIG5则是繁体中文编码，UTF-8是UNICODE的一种变长字符编码，用16个字节编码UNICODE字符，
13、它允许 Web 浏览器在同一HTML 页面上显示不同的字符集（如简体中文、英文、韩文等），对网页的国际化支持更好。 （4）设置网页刷新时间 上面标签用于刷新浏览器中的网页，在这行标签中，浏览器将在60秒后，自动转到网页new.htm。可以利用这个功能，制作一个网站标志性封面页，在若干时间后，自动让用户转到指定页面。如果省略上面标签中的url项，浏览器将刷新当前页。这样就可以实现网页的定时刷新功能。,1.1 【案例1】招生简章,（5）强制浏览最新网页 强制性调用服务器中网页的最新版本。浏览器为了节约网络访问时间，在本地硬盘上都缓存了一个网页的临时文件。在下一次调用网页时，直接显示硬盘上的文件，而
14、不是网页上的。如果想让用户每次都看到最新的网页，就需要加上这个标签。 （6）设置网页背景颜色和图像 标签的bgcolor属性用于设置页面背景颜色，例如： 上面的标签将页面背景设置为黄色。 background属性用于设置背景图像，例如： 上面的标签将站点中images目录下的bg.jpg图像文件设置为网页背景图像。在设置网页背景图像时应该注意，由于图像文件一般都比较大，网上传输较慢，最好是选择较小的图片文件。同时，背景图像不宜太复杂，以免影响正文的显示效果。,1.1 【案例1】招生简章,（7）设置正文文字颜色和链接文字颜色 标签的text属性用于设置页面正文文字颜色，link属性用于设置链接文
15、字颜色，alink属性用于设置激活的链接颜色，vlink属性用于设置访问过的链接文字颜色。例如： 上面的标签设置网页正文文字为黑色，链接文字为蓝色，激活的链接文字为红色，已访问过的链接文字为黄色。 （8）指定文档边距（仅适用于IE浏览器） 标签的topmargin、bottommargin、leftmargin、rightmargin属性可用于指定文档距浏览器上、下、左、右的空白距离，单位为像素。marginwidth和marginheight属性可用于指定边距宽度和边距高度。例如： 上面的标签指定了网页文档距离浏览器上、下、左、右边距为10像素。 （9）缺省、和标签的网页 还有一些特殊的网页
16、，例如，将要包含在其他页面中的网页，由于要包含到其他页面，因此设计时网页中不能有、和标签，以免与包含它的目标网页内容发生冲突，出现多个、或标签。这种没有、和标签的网页，在浏览器中浏览时，通常会将其解释为部分的正文内容。,1.1 【案例1】招生简章,3标题格式 HTML中，标题格式由标签定义。定义了最大的标题格式，定义了最小的标题格式。此外，在显示时，每行标题后还会自动添加一行空白。例如： 标题格式 标题1 标题2 标题3 标题4 标题5 标题6 上面网页在浏览时效果如图1-1-2所示。,图1-1-2 标题格式,1.1 【案例1】招生简章,4文字布局 HTML中，与文字布局相关的标签有段落、换行、预格式化、水平线和对齐方式等。 （1）段落与换行 在HTML网页设计时，不能像文本编辑那样使用回车键来进行换行，这样的换行在显示时是无效的。例如： 失败的段落排版 南乡子 登京口北固亭有怀 何处望神州？满眼风光北固楼。 千古兴亡多少事？ 悠悠！不尽长江滚
