• / 61
  • 下载费用:20 金币  

《网页设计》——网页基础知识

关 键 词:
网页设计基础知识 网页设计基础 网页设计 网页设计基础知识 网页基础知识 网页设计 网页的基本知识 网页基础知识 网页设计基础知识
资源描述:
江西师范大学网页设计课程组 网页设计 江西师范大学网页设计课程组 1.11.1网页概述网页概述 1.2 1.2 网页制作工具简介网页制作工具简介 1.31.3 HTML HTML基础基础 1.41.4 实践技能训练实践技能训练 第第1 1章章 网页基础知识网页基础知识 江西师范大学网页设计课程组 1.1.11.1.1什么是网页什么是网页 WebWeb直译过来就是直译过来就是““网网””,可以理解为通过超级连接将各,可以理解为通过超级连接将各 种文档连接起来的一个大规模的信息集合。种文档连接起来的一个大规模的信息集合。 网页(网页(WebWeb页)实际上就是页)实际上就是HTMLHTML文件,是一种可以在文件,是一种可以在WWWWWW 网上传输,并能被浏览器认识和翻译成页面的文件。网上传输,并能被浏览器认识和翻译成页面的文件。 WWWWWW是是 ““World wide web”World wide web”的缩写;的缩写;HTMLHTML则是则是““HyperTextHyperText Markup Language”Markup Language”的缩写,意为的缩写,意为““超文本标记语言超文本标记语言””,它是,它是 一种规范,一种标准。超文本就是指页面可以包含图片、链一种规范,一种标准。超文本就是指页面可以包含图片、链 接、音乐等非文字的元素。接、音乐等非文字的元素。 制作网页所需要的硬件和软件:制作网页所需要的硬件和软件: 硬件:计算机主频最好的硬件:计算机主频最好的PⅡPⅡ以上,内存最好在以上,内存最好在128MB128MB以上,以上, 必须有足够大的空间来存放网页素材。必须有足够大的空间来存放网页素材。 软件:软件:Dreamweaver 8.0Dreamweaver 8.0是目前制作网页的最新版本,是目前制作网页的最新版本, FrontpageFrontpage也是一个不错的产品。处理网页图像和文字可以选也是一个不错的产品。处理网页图像和文字可以选 择择FireworksFireworks,若要制作网页动画,可以选择,若要制作网页动画,可以选择 FlashFlash。。 1.1 1.1 网页概述网页概述 江西师范大学网页设计课程组 1.1.2 1.1.2 网页中的基本元素网页中的基本元素 网页包括的主要元素有:网页包括的主要元素有: 文本、图像、动画、声音、视频、表格、表单文本、图像、动画、声音、视频、表格、表单 等。等。 1.1 1.1 网页概述网页概述 江西师范大学网页设计课程组 1.1.2 1.1.2 网页中的基本元素网页中的基本元素 1.1.文本文本 文本是人类最重要的信息载体和交流的工具,网页的主文本是人类最重要的信息载体和交流的工具,网页的主 体一般以文本为主。在制作网页时,可以根据需要设置文本体一般以文本为主。在制作网页时,可以根据需要设置文本 的字体、字号、颜色以及所需要的其他格式。的字体、字号、颜色以及所需要的其他格式。 文本在网页中的主要功能是显示信息和超级链接,文本文本在网页中的主要功能是显示信息和超级链接,文本 通过文字的具体内容与不同的格式来显示信息的重要内容,通过文字的具体内容与不同的格式来显示信息的重要内容, 这是文本的直接功能。此外,文本作为一个对象,往往又是这是文本的直接功能。此外,文本作为一个对象,往往又是 超级链接的触发体,通过文本表达的链接目标指向相关内容超级链接的触发体,通过文本表达的链接目标指向相关内容 。。 2.2.图像图像 图像在网页中可以起到提供信息、展示作品、美化网页图像在网页中可以起到提供信息、展示作品、美化网页 以及体现风格等效果。图像可以用作标题、网站标志、网页以及体现风格等效果。图像可以用作标题、网站标志、网页 背景、链接按纽、导航条、网页主图等,网页中使用图像的背景、链接按纽、导航条、网页主图等,网页中使用图像的 格式主要有:格式主要有:GIFGIF、、JPEGJPEG、、PNGPNG等格式。等格式。 1.1 1.1 网页概述网页概述 江西师范大学网页设计课程组 1.1.2 1.1.2 网页中的基本元素网页中的基本元素 ---图像 ⑴⑴GIFGIF图像。图像。GIF(graphicsGIF(graphics interchange format) interchange format)由由 CompuCompu-Serve-Serve公司公司19871987年年6 6月制订。月制订。GIFGIF通常对于卡通、通常对于卡通、 图像、图像、LogoLogo、以及带有透明区域的图像、动化很有作用。、以及带有透明区域的图像、动化很有作用。 GIFGIF文件格式的扩展名是文件格式的扩展名是“ “.gif”gif”. ⑵⑵JPEGJPEG图像。图像。JPEGJPEG((joint photographic experts joint photographic experts group group 联合照片专家组)是一种特别为照片图像设计的图片联合照片专家组)是一种特别为照片图像设计的图片 压缩处理格式。压缩处理格式。JPEGJPEG文件采用先进的压缩算法,可以保持较文件采用先进的压缩算法,可以保持较 好的图像保真度和较高的压缩比。好的图像保真度和较高的压缩比。JPEGJPEG文件格式的扩展名为文件格式的扩展名为 “ “.jpg”jpg”. ⑶⑶ PNGPNG图像。图像。PNGPNG((portable network graphicportable network graphic)即可移)即可移 植网络图形。植网络图形。PNGPNG图像是专门针对图像是专门针对WebWeb开发的一种无损压缩开发的一种无损压缩 图像,它的压缩比要大大超过许多传统的图像无损压缩算法图像,它的压缩比要大大超过许多传统的图像无损压缩算法 ,同时还支持透明背景和动态效果。,同时还支持透明背景和动态效果。PNGPNG文件格式的扩展名文件格式的扩展名 是是“ “. .pngpng” ” 1.1 1.1 网页概述网页概述 江西师范大学网页设计课程组 1.1.2 1.1.2 网页中的基本元素网页中的基本元素 3.3.动画动画 动画实质上就是动态的图像。在网页中使用动画可以有动画实质上就是动态的图像。在网页中使用动画可以有 效地吸引浏览者的注意。由于活动的对象比静止的对象更具效地吸引浏览者的注意。由于活动的对象比静止的对象更具 有吸引力,因而,网页上通常有大量的动画。网页中使用较有吸引力,因而,网页上通常有大量的动画。网页中使用较 多的动画是多的动画是GIFGIF动画和动画和FlashFlash动画。动画。 4.4.声音声音 声音是多媒体网页的一个重要组成部分。用于网络声音声音是多媒体网页的一个重要组成部分。用于网络声音 文件格式非常多,常用的是文件格式非常多,常用的是MIDIMIDI、、MAVMAV、、MP3MP3和和AIFAIF等。等。 一般来讲,不要使用声音文件作为网页的背景音乐,那样会一般来讲,不要使用声音文件作为网页的背景音乐,那样会 影响网页的下载速度。可以在网页中添加一个链接来打开声影响网页的下载速度。可以在网页中添加一个链接来打开声 音文件作为背景音乐,让播放音乐变得可以控制。音文件作为背景音乐,让播放音乐变得可以控制。 浏览器的不同,处理声音文件的方式也会有很大的差异浏览器的不同,处理声音文件的方式也会有很大的差异 和不一致的地方,最好将声音文件添加到和不一致的地方,最好将声音文件添加到FlashFlash影片中,然后影片中,然后 嵌入嵌入SWFSWF文件以改善一致性。文件以改善一致性。 1.1 1.1 网页概述网页概述 江西师范大学网页设计课程组 1.1.2 1.1.2 网页中的基本元素网页中的基本元素 ⒌⒌视频视频 在网页中视频文件格式也非常多,常见的有在网页中视频文件格式也非常多,常见的有 RealPlayerRealPlayer、、MPEGMPEG、、AVIAVI和和DivXDivX、、flashflash等。等。 ⒍⒍表格表格 表格是一种用来控制网页中页面布局的有效方式。为了表格是一种用来控制网页中页面布局的有效方式。为了 达到理想的视觉效果,通常都不显示边框,我们所看到的网达到理想的视觉效果,通常都不显示边框,我们所看到的网 页如果具有横竖分明的风格,一般都是用表格来辅助布局的页如果具有横竖分明的风格,一般都是用表格来辅助布局的 。。 许多设计人员使用表格对网页进行布局。许多设计人员使用表格对网页进行布局。DreamweaverDreamweaver 提供两种方式来查看和操作表格:标准视图和布局视图。在提供两种方式来查看和操作表格:标准视图和布局视图。在 标准视图中,表格显示为行和列的网格,而布局视图允许创标准视图中,表格显示为行和列的网格,而布局视图允许创 建者在将表格用做基础结构的同时在网页上绘制、移动方框建者在将表格用做基础结构的同时在网页上绘制、移动方框 以及调整方框的大小。以及调整方框的大小。 1.1 1.1 网页概述网页概述 江西师范大学网页设计课程组 1.1.2 1.1.2 网页中的基本元素网页中的基本元素 ⒎⒎表单表单 表单是一种特殊的网页元素。表单的主要用途是:收集表单是一种特殊的网页元素。表单的主要用途是:收集 联系信息、接受用户要求、获得反馈意见、设置访问者签名联系信息、接受用户要求、获得反馈意见、设置访问者签名 、让浏览者输入关键字去搜索相关网页、让浏览者注册会员、让浏览者输入关键字去搜索相关网页、让浏览者注册会员 或以会员身份登录。登录的用户名、密码、搜索引擎等都是或以会员身份登录。登录的用户名、密码、搜索引擎等都是 表单。表单。 表单由不同功能的表单元素组成,最简单的表单也要包表单由不同功能的表单元素组成,最简单的表单也要包 含一个输入区域和一个提交按钮。站点浏览者填写表单的方含一个输入区域和一个提交按钮。站点浏览者填写表单的方 式通常是输入文本、选中单选按钮和复选框,以及从下拉列式通常是输入文本、选中单选按钮和复选框,以及从下拉列 表框中选择选项。根据表单功能和处理方式的不同,通常可表框中选择选项。根据表单功能和处理方式的不同,通常可 以将表单分为用户反馈表单、流言簿表单、搜索表单和用户以将表单分为用户反馈表单、流言簿表单、搜索表单和用户 注册表单等类型。注册表单等类型。 1.1 1.1 网页概述网页概述 江西师范大学网页设计课程组 1.1.31.1.3网页的类型:网页的类型: 有有3 3种不同的类型:基本网页、动态网页和模板网页。种不同的类型:基本网页、动态网页和模板网页。 1.1.基本网页基本网页 基本网页又称静态网页,是相对动态网页而言的。工作原基本网页又称静态网页,是相对动态网页而言的。工作原 理如下。理如下。 客户端请求客户端请求 服务器服务器 接受响应接受响应 客户端浏览器客户端浏览器 网页网页 1.1 1.1 网页概述网页概述 江西师范大学网页设计课程组 ⒉⒉动态网页动态网页 动态网页中除了基本网页中的元素外,还包括一些程序动态网页中除了基本网页中的元素外,还包括一些程序 ,这些应用程序需要浏览器与服务器之间发生交互行为,,这些应用程序需要浏览器与服务器之间发生交互行为, 而且应用程序的执行需要应用程序服务器才能完成。而且应用程序的执行需要应用程序服务器才能完成。 应用程序服务器的作用是读取动态网页上的代码,根据应用程序服务器的作用是读取动态网页上的代码,根据 代码中的指令完成网页,然后将代码从网页上去掉,所得代码中的指令完成网页,然后将代码从网页上去掉,所得 的结果将是一个静态网页;应用程序服务器将该网页传送的结果将是一个静态网页;应用程序服务器将该网页传送 回网页服务器,网页服务器将网页发送到浏览器,浏览器回网页服务器,网页服务器将网页发送到浏览器,浏览器 得到的仍然是一个纯得到的仍然是一个纯HTMLHTML的静态网页。的静态网页。 动态网页是经过人与服务器对话的结果。如图网页上的动态网页是经过人与服务器对话的结果。如图网页上的 登录、注册、网上购物等都属于此类网站。登录、注册、网上购物等都属于此类网站。 1.1 1.1 网页概述网页概述 江西师范大学网页设计课程组 动态网页有两种:一种是普通动态网页,它不包含数据库;一种是包含数据库的动态网页有两种:一种是普通动态网页,它不包含数据库;一种是包含数据库的 动态网页。动态网页。 ⑴⑴普通动态网页,其工作的过程如图所示普通动态网页,其工作的过程如图所示 1.1 1.1 网页概述网页概述 江西师范大学网页设计课程组 ⑵⑵. .包含数据库的动态网页,如包含数据库的动态网页,如AccessAccess、、SQLSQL、、MYSQLMYSQL等,等, 其工作过程如图所示:其工作过程如图所示: 1.1 1.1 网页概述网页概述 江西师范大学网页设计课程组 1.1 1.1 网页概述网页概述 3.模板网页 模板是提供一个标准页面,它的模式固定,例如页 面布局、字体排列等固定不变,只需要改变页面的内容, 这有助于读者成批地建立页面风格相同的页面,从而使网 站风格得到统一。模板能够带给你对网页功能和布局更为 完整的概念,并且模板文件能够让你更容易的浏览页面代 码。 江西师范大学网页设计课程组 1.2 1.2 网页制作工具简介网页制作工具简介 1.2.11.2.1网页编辑工具网页编辑工具 1.FrontPage 2.Dreamweaver 江西师范大学网页设计课程组 1.2 1.2 网页制作工具简介网页制作工具简介 1.2.21.2.2网页动画制作软件网页动画制作软件 Flash也是Macromedia公司推出的产品。Flash8.0可 以更好的为网页设计师和开发人员服务,帮助他们提高工 作效率,创造丰富的、极具诱惑力个感染力的动画作品。 Flash的主要功能是制作动画,这种动画不能是纯粹的 动画,还应该具有交互的特点,制作出来的作品应该达到 令人目眩的感觉。 Flash8.0兼容了以前的版本,凡是以前使用过Flash5.0 、Flash MX以及Flash MX 2004的用户都可以立即上手, 应用起来更方便、更快捷。Flash8.0的功能得到了极大的 扩展,用它可以创造完整的动态站点,从内容显示到数据 库的连通,以及视频的调整,给用户带来的惊喜是空前的 。 凭借Flash8.0的开发环境及新的服务器技术优势,网 页的开发者可以通过它建立新一带的网络动画,带来更具 视觉震撼力的Web产品。 江西师范大学网页设计课程组 1.2 1.2 网页制作工具简介网页制作工具简介 1.2.31.2.3网络图像处理软件网络图像处理软件 Fireworks是Macromedia公司专门为网页设计的Web 图形工具软件,它可以用最少的步骤生成最小但质量很高 的JPEG和GIF图像,这些图像可以直接用于网页上。 Fireworks是Web图形工具的首选软件。 Photoshop是由Adobe公司出品的著名的图形图像处 理软件。它能够实现各种专业化的图像处理,是专门图像 创作的首选软件。 江西师范大学网页设计课程组 1.3 HTML1.3 HTML基础基础------概念概念 HTML则是“HyperText Markup Language超 文本标记语言”的缩写,它是构成Web页面的主 要工具,是用来表示网上信息的符号标记语言。 在Internet上,如果要想全球范围内发布信息 ,需要一个能够被广泛理解的语言,也就是说所 有的计算机都能够理解的用语出版的“母语”。 WWW (World wide web)所使用的出版语 言就是HTML语言。 通过HTML,将所需要表达的信息按某种规则 HTML文件,通过专用的浏览器来识别,并将这 些HTML“翻译”成可以识别的信息,就是我们所 见到的网页。 江西师范大学网页设计课程组 1.3 HTML1.3 HTML基础基础------功能功能 HTML的功能如下: ⒈出版在线的文档,其中包含了标题、文本、表格 、列表以及照片等内容。 ⒉通过超链接检索在线的信息。 ⒊为获取远程服务而设计表单,可用于检索信息、 订购产品。 ⒋在文档中直接包含了电子表格、视频剪辑、声音 剪辑以及其他的一些功能。 江西师范大学网页设计课程组 1.3 HTML1.3 HTML基础基础 1.3.1 HTML1.3.1 HTML语言结构的基本标志语言结构的基本标志 ⒈文档标志 。标志用于HTML文档的最前面 ,用来标识HTML文档的开始。而标志恰恰相反 ,它放在HTML文档的最后边,又来标识HTML文档的结束 ,两个标志必须成对使用。 ⒉文件头标志 。和构成HTML文档的开 头部分,在此标志之间可以使用、 等标志对。标志对之 间的内容是不会在浏览器的框内显示出来。两个标志必须 成对使用。 江西师范大学网页设计课程组 1.3 HTML1.3 HTML基础基础 1.3.1 HTML1.3.1 HTML语言结构的基本标志语言结构的基本标志 ⒊文件主体标志 . 是HTML文档的主体部分 ,在此标志对之间可以包含、、 、等众多标志。它们所定义的文本、图像等将 会在浏览器的框内显示出来。两个标志必须成对使用。 标志中还可以有如表1-1所示的属性。 属性用途示例 设置背景颜色红 色背景 设置文本颜色 蓝色文本 设置链接颜色链接 为蓝色 设置已经使用的链 接的颜色 江西师范大学网页设计课程组 1.3 HTML1.3 HTML基础基础 1.3.1 HTML1.3.1 HTML语言结构的基本标志语言结构的基本标志 ⒋文件标题标志 。使用过浏览器的人可能都会注意到浏览器窗口最上边 的蓝色部分显示的文本信息,那些信息一般是网页的“主题”。要将网 页的主题显示到浏览器的顶部其实很简单,只要在标 志对之间加如显示的文本即可。 注意:标志对只能放在标志对之 间。 下面是一个综合的例子,说明了HTML文档中最基本标志的使用。 显示在浏览器最上边蓝色条中的文本 红色背景、蓝色的文本 江西师范大学网页设计课程组 1.3 HTML1.3 HTML基础基础 1.3.21.3.2页面格式标志页面格式标志 ⒈段落标志 ⑴. 标志对是用来创建一个段落,在此标志对之间加入 的文本将按照段落的格式显示在浏览器上。另外,标 志还可以使用align属性,它用来说明对齐方式,语法是 。align可以是Left (左对齐)、 Center(居中)和 Right(右对齐)三个值中间的一个。 如:表示标志对中的文本使用居中 对齐方式。 ⑵. 标志队有来对文本进行预处理操作。 江西师范大学网页设计课程组 1.3 HTML1.3 HTML基础基础 1.3.21.3.2页面格式标志页面格式标志 2.换行标志 是一个很简单的标志,它没有结束标志,因为 它是用来创建一个回车换行的。在的使用上面还有 一定的技巧,如果把加在标志对的外边,将 创建一个很大的回车换行,即前面和后面的文本的行 与行之间的距离很大,若放在的里面,则前 面和后面的文本行与行之间的距离比较小. 江西师范大学网页设计课程组 1.3 HTML1.3 HTML基础基础 1.3.21.3.2页面格式标志页面格式标志 3.列表标志 ⑴ 、、 用来创建一个普通的列表,用来创建列表中的上层项目 ,用来创建列表中最下层项目, 和都必须 放在标志对之间。 下面是一个创建普通列表的例子 一个普通的列表 中国城市 北京 上海 广州 美国城市 华盛顿 芝加哥dd 纽约 江西师范大学网页设计课程组 1.3 HTML1.3 HTML基础基础 1.3.21.3.2页面格式标志页面格式标志 3.列表标志 ⑵、、 标志对用来创建一个表有数字的列表;标志对用来创建一 个标有圆点的列表;标志对只能在或标志对 之间使用,此标志对用来创建一个列表项,若放在之间 则每个列表项加上一个数字,若放在之间则每个列表项 加上一个圆点。 中国城市 北京 上海 广州 美国城市 华盛顿 芝加哥 纽约 江西师范大学网页设计课程组 1.3 HTML1.3 HTML基础基础 1.3.21.3.2页面格式标志页面格式标志 ⑶ 标志对用来排版大块HTML段落,也用于格式 化表,此标志对的用法与标志对非常相似,同 样有align对齐方式属性。 ⒋标题格式标志 HTML语言提供了一系列对文本中的标题进行操作的标志对 :…,一共有6对标题的标志对 。是最大的标题,而则是最小的 标题,也就是说标志中h后面的数字越大标题文本就越小 。如果HTML文档需要输出标题文本,就可以使用这6对标 题中的任何一对。 江西师范大学网页设计课程组 1.3 HTML1.3 HTML基础基础 1.3.31.3.3文本标志文本标志 1.黑体字、斜体字、下划线标志对 用来使文本以黑体字的形式输出。 用来使文本以斜体字的形式输出。 用来使文本以下加一划线的形式输出。 2.文字字型标志 文字字型标志还有、、 、。这些标志对的用法 和上面讲的一样,差别只是输出文本是字体不一样而已。 用来输出打字机风格字体的文本。 用来输出引用方式的字体,通常是斜体。 用来输出需要强调的文本(通常是斜体加黑体 )。 则用来输出加重文本(通常是斜体加黑 体)。 江西师范大学网页设计课程组 1.3 HTML1.3 HTML基础基础 1.3.31.3.3文本标志文本标志 3.文字大小、字体、颜色标志 是一对很有用的标志对,它可以对输出文本 的字体大小、颜色进行随意地改变,这些改变主要是通过 对它的两个属性size和color的控制来实现的。Size属性用 来改变字体的大小,它可以取值:-N、N和+N;而color 属性则用来改变文本的颜色。颜色的取值可以是基本标志 中讲过的十六进制RGB颜色码或HTML语言给定的颜色常 量名。 江西师范大学网页设计课程组 1.3 HTML1.3 HTML基础基础 1.3.31.3.3文本标志文本标志 ⒋文本标志的综合应用 文本标志的综合示例 最大的标题 使用h3的标题 最大的标题 黑体字文本 斜体字文本 下加一划线文本 打字机风格的文本 引用方式的文本 强调文本 加重文本 size取值“+1“color取值为红色时的文 本 江西师范大学网页设计课程组 1.3 HTML1.3 HTML基础基础 1.3.4 1.3.4 图像标志图像标志 ⒈图像属性赋值标志 标志并不是真正地将图像加入到HTML文档中,而是将标志对的 SRC属性赋值。这个值是图像文件的文件名,包括路径,这个路径可以是相 对路径,也可以是网址。实际上就是通过路径将图形文件嵌入到文档中。 所谓相对路径是指所要链接或嵌入到当前HTML文档的文件与当前文件的 相对位置所形成的路径。 通常有如下情况: ⑴.假如HTML文件与图形文件(假设文件名为logo.gif)在同一个目录下 ,则可以将代码写成。 ⑵.假如图形文件放在当前的HTML文档所在的目录的一个子目录(子目录 名假设是images)下,则代码应该为。 ⑶.假设图形文件放在当前的HTML文档所在的目录的上层目录(目录名假 设是home)下,则相对路径就必须是准网址了。即用“/”表示网站,然后在 后面紧跟文件在网站中的路径。假设home是网站下的一个目录,则代码应为 ,若home是网站下的目录king下面的一个子 目录,则代码应该为了。 江西师范大学网页设计课程组 1.3 HTML1.3 HTML基础基础 1.3.4 1.3.4 图像标志图像标志 必须强调,src属性在标志中是必须赋值的,是标志中不可缺 少的一部分。除此之外,标志还有alt 、align、 border、 width和height属性: alt属于是当鼠标移动到图像上时显示的文本。 align是图形的对齐方式。 border属性是图形的边框,可以取大于或者等于0的整数,默认单位 是像素。 width和height属性是图形的宽和高,默认单位是像素。 ⒉水平线标志 标志是在HTML文档中假如一条水平线,它可以直接使用,具有size 、color、width 和noshade属性。 size是设置水平的厚度。 width是设置水平线的宽度、默认单位为像素。 noshade属性不需要赋值,而是直接加入标志即可使用,它是用来假 如一条没有阴影的水平线(不假如此属性,水平线将有阴影)。 江西师范大学网页设计课程组 1.3 HTML1.3 HTML基础基础 1.3.51.3.5表格标志表格标志 ⒈创建表格标志 标志对用来创建一个表格,下表所示的是属性。 属性用途 设置表格的背景色 设置边框的宽度,若不设置宽度默认值为0 设置边框的颜色 设置边框明亮部分的颜色(当border的只 大于等于1才有用) 设置边框昏暗部分的颜色(当border的只 大于等于1才有用) 设置表格的单元格之间的空间大小 设置表格的单元格边框与其内部内容之间 空间大小 设置表格的宽度,单位用绝对像素值或总 宽度的百分比 江西师范大学网页设计课程组 1.3 HTML1.3 HTML基础基础 1.3.51.3.5表格标志表格标志 ⒉行、单元格和表格头标志 ⑴.、 标志对用来创建表格的每一行。此标志对 只能放在标志对之间使用,而在此标 志对之间加入文本是无用的,因为之间只能 紧跟标志对才是有效的语法。 标志对用来创建表格中每一行中的每一 个单元格,此标志对只有放在标志对之间才 识有效的,输入的文本也只有放在标志对之 间才有效(即才能被显示出来)。 江西师范大学网页设计课程组 1.3 HTML1.3 HTML基础基础 、和标志对 之间的关系 标志含义 最外层,创建一个表格 创建一行 要输出的文本只能放在此 处 要输出的文本只能放在此 处 要输出的文本只能放在此 处 创建一个单元个(这里总共创建 了三个单元格) 行末尾 最外层 江西师范大学网页设计课程组 1.3 HTML1.3 HTML基础基础 1.3.51.3.5表格标志表格标志 此外,还有align和 valign属性, align是水平对齐方式,取值为left(左对齐)、center( 居中对齐)、right(右对齐)。 valign是垂直对齐方式,取值为top(靠顶端对齐)、 middle(居中间对齐)、bottom(靠底部对齐)。 具有width、colspan、rowspan和nowrap属性。 width是单元格的宽度,单位用绝对像素值或总宽度的 百分比。 colspan设置一个表格单元格跨占的列数(缺省值为1) 。 rowspan设置一个表格单元格跨占的行数(缺省值为1) 。 nowrap禁止对表格单元格内的内容自动断行。 ⑵ 标志对用来设置表格头,文字通常是黑体、居 中。 江西师范大学网页设计课程组 1.3 HTML1.3 HTML基础基础 1.3.51.3.5表格标志表格标志 ⑵ 标志对用来设置表格头,文字通常是黑体、居 中。 江西师范大学网页设计课程组 1.3 HTML1.3 HTML基础基础 1.3.51.3.5表格标志表格标志 ⒊表格标志的综合应用 表格标志的综合示例 意大利 英格兰 西班牙 AC米兰 拂罗伦莎 曼联 纽卡斯尔 巴塞罗那 皇家社会 江西师范大学网页设计课程组 1.3 HTML1.3 HTML基础基础 1.3.51.3.5表格标志表格标志 尤文图斯 桑普多利亚 利物普 阿申纳 皇家马德里 拉奇奥 国际米兰 切尔西 米德尔斯堡 马德里竞技 江西师范大学网页设计课程组 江西师范大学网页设计课程组 1.3 HTML1.3 HTML基础基础 1.3.61.3.6链接标志链接标志 1.创建连接页面标志 创建页面的标志对的href属性无论如何是不可缺少的,标志对之间 假如需要链接的文本和图像(链接图像即加入标志 )。Href的值可以是网址或相对路径,也可以mailto:形式。 对于第一种情况,语法为,这样就可以创建一 个超文本链接了,例如: 这是我的网站 对于第二种情况,语法为 ,这就创 建了一个自动发送电子邮件的连接,mailto:后边紧跟着要自动发送 的电子邮件的地址(即E-mail地址),例如: 这是我的电子邮箱(E- mail) 江西师范大学网页设计课程组 1.3 HTML1.3 HTML基础基础 1.3.7 1.3.7 标志帧标志帧 帧可以用来向浏览器窗口中装载多个HTML文件。也就是说每个HTML文件 占据一个帧,而多个帧可以同时显示在同一浏览器窗口中,它们组成了一个 最大的帧,也就是一个包含多个HTML文档的HTML文件(我们称它为主文 档)。帧通常的使用方法是在一个帧中放置目录(即可以供选择的链接), 然后将HTML文件显示在另一个帧中。 ⒈帧属性标志 标志对放在帧的主文档的标 志对的外边,也可以嵌套在其他帧的文档中,并且可以嵌套使用。此标志对 用来定义主文档中有几个帧并且各个帧是如何排列的。它具有rows和cols属 性,使用标志时这两个属性至少必须选择一个,否则浏览器窗 口只显示第一个定义的帧,剩下的一概不管, 标志对也就没有祈祷任何作用了。 rows是用来规定主文档中各个帧的行定位,而cols用来规定主文档中的各个 帧 的列定位。这两个属性的取值可以是百分数、绝对像素值或者“*”,其中 “*”代表那些未被说明的空间,如果同一个属性中出现多个“*”则将剩下的未 被说明的空间平均分配。同时,所有的帧按照rows和cols的值从左到右,然 后从上到下排列, 江西师范大学网页设计课程组 1.3 HTML1.3 HTML基础基础 1.3.7 1.3.7 标志帧标志帧 示例说明 总共有三个按列排列的帧,每个帧 占整个浏览器窗口是1/3 总共有三个按行排列的帧,第一个 帧占整个浏览器窗口的40%,剩下的 空间平均分配给另外两个帧 总共有六个帧,先是在第一行中从 左到右排列三个帧,然后在第二行 中从做到右再排列三个帧,即两行 三列,所占空间依据rows和cols属性 的值,其中200的单位是像素 江西师范大学网页设计课程组 1.3 HTML1.3 HTML基础基础 1.3.7 1.3.7 标志帧标志帧 ⒉⒉帧内容标志帧内容标志 ⑴⑴ 标志放在标志放在之间,用来定义某一个具体的之间,用来定义某一个具体的 帧。帧。标志具有标志具有srcsrc、、namename、、scrollingscrolling和和noresizenoresize属性,其中属性,其中srcsrc 和和namename属性都是必须赋值的。属性都是必须赋值的。 srcsrc是此帧的源是此帧的源HTMLHTML文件名(包括网络路径、相对路径或网址),浏览器文件名(包括网络路径、相对路径或网址),浏览器 将会在此帧中显示将会在此帧中显示srcsrc指定的指定的HTMLHTML文件。文件。 namename是此帧的名字,这个名字是用来供超文本链接标志是此帧的名字,这个名字是用来供超文本链接标志target=““中的中的targettarget属性,用来指定链接的属性,用来指定链接的HTMLHTML文件将显示在哪一个文件将显示在哪一个 帧中。例如定义一个帧,名字是帧中。例如定义一个帧,名字是main,main,在帧中显示的在帧中显示的HTMLHTML文件名是文件名是jc.htmjc.htm ,则代码为:,则代码为:“ name=“main“。当有一个链接,。当有一个链接, 在单击了这个链接后,文件在单击了这个链接后,文件new.htmnew.htm将要显示在名为将要显示在名为mainmain的帧中,则代码的帧中,则代码 为为“ target=“main“需要链接的文本需要链接的文本。这样一。这样一 来,就可以在一个帧中建立网站的目录,加入一系列链接,当单击链接以后来,就可以在一个帧中建立网站的目录,加入一系列链接,当单击链接以后 在另一帧中显示被链接的在另一帧中显示被链接的HTMLHTML文件。文件。 scrollingscrolling用来指定是否显示滚动轴,取值可以是用来指定是否显示滚动轴,取值可以是“ “yes”yes”(显示)、(显示)、“ “no”no”(( 不显示)、不显示)、“ “auto”auto”(若需要则会自动显示,不需要则自动不显示)。(若需要则会自动显示,不需要则自动不显示)。 noresizenoresize属性值直接加入标志中就可以使用,不需要赋值,它用来禁止属性值直接加入标志中就可以使用,不需要赋值,它用来禁止 用户调整一个帧的大小。用户调整一个帧的大小。 江西师范大学网页设计课程组 1.3 HTML1.3 HTML基础基础 1.3.7 1.3.7 标志帧标志帧 ⑵⑵. 标志对也是放在标志对也是放在标志标志 对之间,用来在那些不支持帧的浏览器中显示文本或图像信息。对之间,用来在那些不支持帧的浏览器中显示文本或图像信息。 ⒊⒊帧标志的综合应用帧标志的综合应用 下面是一个有关帧的综合应用的例子。下面是一个有关帧的综合应用的例子。 主文档主文档 :: 帧标志综合示例帧标志综合示例 “ scrolling=“no“ name=“Left“ “ scrolling=“auto“ name=“Main“ 对不起对不起, ,您的浏览器不支持您的浏览器不支持“ “帧帧“!“! 江西师范大学网页设计课程组 1.3 HTML1.3 HTML基础基础 1.3.7 1.3.7 标志帧标志帧 目录页目录页 meun.htmmeun.htm: : 目录目录 目录目录 “ target=“Main“链接到第一页链接到第一页 =“page2.htm“ target=“Main“链接到第二页链接到第二页 第一页第一页 pagel.htmpagel.htm 第一页第一页 这是第一页这是第一页!! 第二页第二页 page2.htmpage2.htm 第二页第二页 这是第二页这是第二页!! 江西师范大学网页设计课程组 江西师范大学网页设计课程组 1.3 HTML1.3 HTML基础基础 1.3.8 1.3.8 表单标志表单标志 ⒈⒈创建表单标志创建表单标志 标志对用来创建一个表单,也就是定义表单的开始标志对用来创建一个表单,也就是定义表单的开始 和结束位置,在标志对之间的一切都属于表单内容。和结束位置,在标志对之间的一切都属于表单内容。标志还标志还 有有actionaction、、methodmethod和和tergetterget属性。属性。 actionaction的值是处理程序的程序名(包含绝对路径和相对路径),如:的值是处理程序的程序名(包含绝对路径和相对路径),如: “当用户提当用户提 交表单时,服务器将执行网址交表单时,服务器将执行网址http://http://myhome.commyhome.com/ /上的名为上的名为 counter.cgicounter.cgi的的CGICGI程序。程序。 methodmethod属性用来定义处理程序从表单中获得信息的方式,可以取属性用来定义处理程序从表单中获得信息的方式,可以取GETGET 和和POSTPOST中间的任何一个。中间的任何一个。GETGET方式是处理程序从当前方式是处理程序从当前HTMLHTML文档中文档中 获取数据,然而这种方式传送的数据量是有所限制的,一般限制在获取数据,然而这种方式传送的数据量是有所限制的,一般限制在 1KB1KB以下。以下。POSTPOST方式与方式与GETGET方式正好相反,它是当前的方式正好相反,它是当前的HTMLHTML文档文档 把数据传送给处理程序,传送的数据量要比使用把数据传送给处理程序,传送的数据量要比使用GETGET方式大得多。方式大得多。 tergetterget属性用来指定目标窗口或目标帧。属性用来指定目标窗口或目标帧。 江西师范大学网页设计课程组 1.3 HTML1.3 HTML基础基础 1.3.8 1.3.8 表单标志表单标志 ⒉⒉定义输入区标志定义输入区标志 标志标志 用来定义一个用户输用来定义一个用户输 入区,用户可以在其入区,用户可以在其 中输
展开阅读全文
  麦档网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
0条评论

还可以输入200字符

暂无评论,赶快抢占沙发吧。

关于本文
本文标题:《网页设计》——网页基础知识
链接地址:https://www.maidoc.com/p-15673773.html

当前资源信息

co****he

编号: 20180821120523828870

类型: 共享资源

格式: PPT

大小: 850.01KB

上传时间: 2019-11-06

关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服 - 联系我们

[email protected] 2018-2020 maidoc.com版权所有  文库上传用户QQ群:3303921 

麦档网为“文档C2C模式”,即用户上传的文档所得金币直接给(下载)用户,本站只是中间服务平台,本站所有文档下载所得的金币归上传人(含作者)所有。
备案号:蜀ICP备17040478号-3  
川公网安备:51019002001290号 

本站提供办公文档学习资料考试资料文档下载


收起
展开