网页制作与HTML语言基本结构.ppt

2019/6/5,1,网页制作与HTML语言基本结构,网页制作概述 Dreamweaver概览 使用Dreamweaver制作实例网站的主页框架 HTML语言基本结构,2019/6/5,2,静态网页与动态网页,静态网页：,所谓“静态”，指的就是站点的页面内容是“固定不变”的。,动态网页：,浏览器端和服务器端可以互动，也就是服务器端可以实时处理浏览器端的请求，然后将处理结果（动态生成的网页）响应给浏览器端。,2019/6/5,3,网页的基本元素,文字：网页上传达信息的主体 图像：视觉印象比文字强烈，可以用来制作标题、背景、主图和链接按钮等 超链接：一个网页和另一个目的地（网页、图片、文件、程序）的连接点，可以分为文本超链接和图像超链接,2019/6/5,4,什么是HTML,HTML是（Hyper Text Markup Language，超文本标记语言）的缩写，使用各种不同的标记符号来分别标识和设定不同的网页元素。 每一个网页元素通常由开始标记（start tag）、结束标记（end tag），以及夹在这两个标记中的内容所组成。 HTML语言内容丰富，从功能上大体可分为：文本设置、列表建立、文本属性制定、超链接、图片和多媒体插入、对象、表格、表单的操作，以及框架的建立。,2019/6/5,5,包括HEAD、TITLE、BODY三部分，下面是基本结构： 标题部分 正文部分 ,Html.htm,HTML文档基本结构,2019/6/5,6,1HTML文档标记 格式：标志文件开始和结尾的标记。 2HTML文件头标记 格式：用于包含文件的基本信息。 3HTML文件主体标记 格式：文件主体标记。 注意：与为独立的两个部分，不能互相嵌套。,HTML文档基本标记,2019/6/5,7,标记中的基本内容： 1标题 2信息:在服务器和客户之间传达隐含信息。可以用来定义页面主题，设定页面格式，标注内容提要和关键字，设置页面刷新等等。,HTML文档基本标记,2019/6/5,8,META标签分两大部分： HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME)。 HTTP-EQUIV回应给浏览器一些有用的信息，帮助正确和精确地显示网页内容。 1、(显示字符集的设定) 2、 (设置网页刷新时间）,2019/6/5,9,NAME变量 1、Keywords (关键字) 用法： 2、Description (简介) 用法：,2019/6/5,10, 淘宝网 - 淘！我喜欢 ,2019/6/5,11,设置的属性 1属性 background -背景图片 Bgcolor“RRGGBB” - 背景色彩 text - 非可链接文字的色彩 举例： ,Body.htm,HTML文档基本标记,2019/6/5,12,设置的属性 2属性 link - 可链接文字的色彩，默认为蓝色 alink - 正被点击的可链接文字的色彩 vlink - 已经点击(访问)过的可链接文字的色彩 ，通常为紫色,Leftmargin -页面左边的空白 topmargin -页面上方的空白,Body_link.htm,HTML文档基本标记,2019/6/5,13,段落格式化 1标题标记 格式：，设置各种大小不同标题的标记。 标题文字 alignstyle=left,right,center 2分段标记 格式：设置段落标记。 文字 3换行标记 格式：文字 ,h.htm, p.htm, Br.htm,HTML常用标记,2019/6/5,14,段落标记 4预定格式标记 格式：在浏览器中浏览时，按照文档中预先排好的形式显示内容。 5注释标记 格式：注释标记。,HTML常用标记,zhushi.htm,pre.htm,2019/6/5,15,6、横线标记 #=象素值，默认值为2 #=象素值或百分数 #=left, right RRGGBB,HTML常用标记,hr.htm,2019/6/5,16,7、这是置中 8、要缩排的文字,qita.htm,HTML常用标记,duanluo.htm,2019/6/5,17,文字格式标记 1字体设置标记 功能：设置字体格式标记。 标记提供了几种属性： size：设置文字的大小。 face：设置字体。 color：设置文字的颜色。 格式：文字,Font.htm,HTML常用标记,2019/6/5,18,fontstyle.htm,2019/6/5,19,2特殊字符标记 字符“”用字符串“ 除号 ÷.,ziti.htm,2019/6/5,20,1.无序列表 格式： 功能：建立无序列表。,列表标记,2019/6/5,21,2有序列表 格式： 功能：建立有序列表。,列表标记,2019/6/5,22,3自定义列表 格式： 注意：根据文档的具体要求，列表可以嵌套使用。,List.htm,列表标记,liebiao.htm,2019/6/5,23,图像在网页设计中是必不可少的，所以应掌握在网页中操作图像的方法。 格式： 功能：在网页中加入图像。,插入图像,2019/6/5,24,Image.htm,插入图像,2019/6/5,25,:可以滚动的标签。 基本格式：要滚动的对象,Marquee.html,属性：,2019/6/5,26,超级链接格式：,Href.htm,name,插入一个锚点,mail.htm,2019/6/5,27,表格标记,建立表格 创建表格是规划页面最常用的方法。 格式： 功能：创建表格进行页面设计。 在浏览器中显示时，表格的整体外观由标记的属性决定 。,2019/6/5,28,表格基本格式, . ,Tablebase.htm,biaogezonghe.htm,2019/6/5,29,标签属性,Table.htm,2019/6/5,30,属性,2019/6/5,31,属性,Trtd.htm,2019/6/5,32,特殊效果表格,Tables.htm,2019/6/5,33,框架标记,2019/6/5,34,框架标记,框架结构的文件格式 ,2019/6/5,35,框架标记,框架标记的使用 格式：,Frame.html,2019/6/5,36,框架标记,FRAME标记,2019/6/5,37,框架结构,Iframe标签的使用 格式：,Frame.html,基本使用方法： ,2019/6/5,38,表单标记,标签：用于在网页中为浏览者提供一个输入信息的界面，主要用于采集和提交用户输入的信息,以便Web应用程序和Web数据库获取这些信息。,2019/6/5,39,标签的属性,1、name:设置表单的名称 2、method:提交表单的方法 Get , Post 3、action=“” 设定此表单的处理程序。 如设定 action“*.asp”,2019/6/5,40,表单标记,FORM中常用的标记 1输入域标记 #=如下类型 1）text类型 2）password类型 3）radio类型 4）checkbox类型 5）submit类型 6）reset类型 7）hidden类型 8) File 9) Image 10) button,Input.htm,2019/6/5,41,在标签中必须要设置的属性如下： 其中：name用来标识此标签名称 value则是此提交到服务器