网页设计第9章ppt课件

2020/4/29,1,网页设计三合一教程,主讲教师,第9章用HTML编写网页,主讲教师,本章要点,HTML语言概述HTML语言的基本结构用HTML代码编写网页上的基本元素表格以及表格相关的代码编写方法用手写代码制作复杂框架结构的页面HTML语言的常用标识,9.1初识HTML,1HTML语言简介2HTML文件基本架构,1HTML语言简介,HTML超文本标识语言HTML是一种建立网页文件的语言，通过对各种标记式的指令、元素、属性、对象等的定义，将影像、声音、图片、文字等连接显示出来。HTML标记由所括住的指令，主要分为单标记指令、双标记指令（由和所构成)。,1HTML语言简介,HTML语言的三种形式，非封闭的类型。很少用，最常用的如换行标记。对象，封闭类型。大多数标记都是封闭类型的。封闭类型的标记都是成对出现。对象，封闭类型的扩展形式，后面的各种属性参数可以进一步设置对象在某方面的内容。说明几乎所有的HTML代码都是由上面三种形式组合而成的，标记之间可以相互嵌套，形成更为复杂的语法。,1HTML语言简介,HTML文件组成一个完整的HTML文件由head和body两部分组成。head部分包含标题、网页语言等基本信息，还可包含作者信息、网页关键字、网页说明等；body部分其中的内容是网页显示的主要内容，由表格、图片、表单等各种对象组成。,1HTML语言简介,说明一可以使用任何文本编辑器打开、浏览、编辑HTML代码，最简单的是Windows自带的记事本。说明二HTML文件编辑完成后以.htm或.html为文件后缀保存，可由浏览器打开显示。说明三习惯上一个网站的首页名称通常为index.htm或index.html。,2HTML文件基本架构,HTML文件的基本架构：文件开始文件头开始.标题区文件头结束文本区开始.文本区内容文本区结束文件结束,网页的头部,网页的主体内容,HTML文件标识,9.2HTML的简单应用,1编写第一个网页2注意事项,1编写第一个网页,使用记事本编写第一个网页，步骤如下：选择【开始】/【所有程序】/【附件】/【记事本】”命令，打开记事本程序。在记事本中输入HTML代码。保存文件，在保存类型中选择【所有文件】，在编码中选择ANSI，文件名设为“myfirst.htm”。关闭记事本，回到存盘的文件夹，双击myfirst.htm文件，在InternertExplore浏览器中浏览页面。,第一个网页的代码及页面效果,初识HTML语言我的第一个HTML文件,2注意事项,“”是任何标记的开始和结束。标记与标记之间可以嵌套。在源代码中不区分大小写。任何换行和空格在源代码里面不起作用。HTML标记中可以放置各种属性。可以在源代码中添加注释，注释以“”结束。,9.3添加各种网页元素,9.3.1向页面中添加文字9.3.2设置页面中的标题9.3.3设置页面的背景颜色和背景图片9.3.4在页面中插入图片9.3.5设置文字和图片链接9.3.6给网页加上声音,9.3.1向页面中添加文字,（1）将需要添加的文字输入到与标识之间。（2）是“原样显示文本”的标识。（3）称为行中断标识。标识后面的内容另起一行显示。（4）段落标识分别放在段首和段尾。比多一行空行，也就是空一行，再另起一行显示文本内容。,9.3.1向页面中添加文字,（5）是字体标识，对标识中的文本字体起控制作用，有“size”和“color两个属性：“size”表示字体的大小。“color表示字体的颜色。（6）在文字前后加上标识，可以使文字加粗显示。为粗体显示标识；为斜体显示标识；为带下划线显示标识。（7）与是居中显示标识。,应用上述标识后的完整程序,西红柿名称西红柿性味味酸甘、性微寒。归经入心、肺、胃经。作用润肺生津、和胃止渴。用于暑热烦渴、咽干、恶心欲吐、厌食、大便秘结、小便黄赤等。成分含大量维生素C、A、B1、B2、及磷、铁、钙等，还含有较多的苹果酸、柠檬酸等有机酸。现代医学研究证实，它有抗衰老、降压、褪色素的作用。,9.3.2设置页面中的标题,在标识中输入网页的标题文字，并进行相应的设置。说明在Dreamweaver中输入的标题文字实际就是被解析到了标识中。,9.3.3设置页面的背景颜色和背景图片,通过bgcolor属性可设置页面的背景颜色。例如：输入“bgcolor=red”或者“bgcolor=blue”，页面的背景就能按照输入显示成红色或者蓝色。通过background属性可设置页面的背景图片。例如：将光盘的“tomato.gif”图片文件复制到用户站点文件夹下的“img1”目录中，进行如下设置：background=img/1/tomato.gif,设置网页背景图片应用举例,源文件,页面效果,9.3.4在页面中插入图片,在标识之后，文字之前的位置输入代码,源文件,页面效果,9.3.4在页面中插入图片,说明“img”表示插入一张图片；“src”属性的值是图片文件的路径；“src=img/1/tomato1.jpg”表示插入的是与本文件在同目录下的“img1tomato1.jpg”文件；“alt”后面是图片的说明文字，在浏览器中当鼠标移到图片上时会显示出图片的说明文字；“width”和“height”是图片的宽度和高度信息，单位是像素。,（3）“align”是图片的位置属性，在标识中加入“align=left”代码可使图片移到行的最左面，文字移到与图片同一行。将“align”的值设为“right”可使图片出现在行的最右侧。,源文件,页面效果,9.3.5设置文字和图片链接,1设置文字链接2设置图片链接,1设置文字链接,在HTML语言中，超级链接的标识是链接文字。,源文件,页面效果,1设置文字链接,设置一个“Target=_blank”属性，可使链接文件在一个新弹出的窗口中打开。,2设置图片链接,在HTML语言中，超级链接的标识是链接图片。,2设置图片链接,通过“border”属性可以设置超级链接图片周围的边框。例如：设置“border=0”可以去掉图片链接的边框。,2设置图片链接,添加“Target=_blank”可使链接的图片在新窗口中打开。,9.3.6给网页加上声音,将音乐文件“music.mid”复制站点文件夹的相应目录下。在与之间任何位置加入代码“”。,9.4表格的使用,9.4.1插入表格9.4.2合并单元格9.4.3拆分单元格,9.4.1插入表格,9.4.2合并单元格,列合并,9.4.2合并单元格,行合并,9.4.3拆分单元格,找到单元格的标识，在里面插入如下所示的一个2行1列表格的代码。,9.5框架结构页面的制作,9.5.1基本结构9.5.2框架的各种属性9.5.3框架结构之间的链接,9.5.1基本结构,框架结构,9.5.1基本结构,在框架中再分框架,9.5.2框架的各种属性,（1）在尖括号中加上“noresize”这个属性可以使浏览者无法改变边框的大小。（2）在标识的尖括号中加上“frameborder=0”，可以隐藏这个框架中各个分框架的边框线（3）改变边框的粗细，需要先将“frameborder”属性设为“yes”，再设置一个“border”属性，将它的数值设为具体宽度数值即可。（4）在标识的尖括号中加“bordercolor”属性，可以改变边框线的颜色。,9.5.3框架结构之间的链接,HTML的代码一般形式：“链接文字或图片”说明在框架结构的页面中做超级链接，和普通页面中的超级链接类似，只是框架结构页面的超级链接可以在同一屏幕上的其他框架中打开，这时“target”属性的值要设为目标框架的“name”属性的值。,9.6其他HTML标记一览,1Web页面结构纲要2链接标识3列表标识4格式化标识5段落类标识6位置类标记7表格类标识8表单类标识,1Web页面结构纲要,页面标题网页主体内容,2链接标识,外部链接链接文本锚点链接链接文本电子邮件链接文本,3列表标识,（1）编号列表第一项第二项,（2）符合列表第一个符号第二个符号,4格式化标识,粗体：要显示为粗体的文本斜体：要显示为斜体的文本下划线：要显示为带下划线的文本预格式化：定义好的文本上标字：要显示为上标的文本下标字：要显示为下标的文本,5段落类标识,新段落：水平线：换行符：,6位置类标记,居中显示要居中显示的文本居左显示要居左显示的文本居右显示要居右显示的文本,7表格类标识,（1）基本表格标识第一个单元格中的内容第二个单元格中的内容,（2）表格中的位置标识水平对齐内容垂直对齐内容,8表单类标识,表单标识：插入单行文本输入栏：插入多行文本输入栏：插入密码输入栏：插入单选按钮：插入复选框：,8表单类标识,插入下拉列表框：ab插入文件选择框：插入提交按钮：插入清除按钮：,9.7使用Dreamweaver编写HTML代码,9.7.1Dreamweaver中的HTML源码编辑窗口9.7.2使用代码窗口的快捷菜单9.7.3代码片断面板,9.7.1Dreamweaver中的HTML源码编辑窗口,Dreamweaver8有两种源代码编辑窗口的显示方式。单击【代码】按钮，则在整个窗体显示代码窗口；单击【拆分】按钮，就会使窗体分为上下两个界面，上部是代码窗口，下部是设计窗口。启动Dreamweaver8后，单击编辑状态切换按钮，即可启动源代码的编辑窗口，如图所示。,9.7.2使用代码窗口的快捷菜单,1快捷菜单2显示行号3自动换行,1快捷菜单,在HTML源代码编辑器的窗口中，单击鼠标右键，可以打开一个快捷菜单。该菜单允许用户进行文本的复制、粘贴、剪切以及查找、替换等操作，如图所示。,2显示行号,在HTML源代码编辑器窗口中，单击【视图选项】按钮，在下拉列表中选中【行数】命令，则在源代码检视器窗口中对每个HTML语句自动显示行号，以便于定位。,3自动换行,问题的引出在HTML源代码编辑器窗口中进行代码编辑时，常常会出现一行代码过长而不得不通过横向滚动才能完全看到的情况，非常麻烦。解决方法这时可以单击【视图选项】按钮，在下拉列表中选中【自动换行】命令，激活窗口的自动换行特性。这时，如果一行代码过长，则会自动在窗口的边缘回行。,9.7.3代码片断面板,1用代码片断面板插入代码片断2创建自己的代码片断3编辑和删除代码片段,1用代码片断面板插入代码片断,打开如图所示的代码片断面板。面板中可以存储HTML，JavaScript，CFML，ASP，JSP的代码片断。选择希望插入的代码片断，单击面板上的【插入】按钮，即可将代码片断插入至页面。,2创建自己的代码片断,（1）在该面板中单击【新建代码片段文件夹】按钮，创建一个名为user的文件夹，然后单击面板下方的【新建