网页制作(1)ppt课件

web创作，1，相关知识(a)通过HTML文件中的概念HyperTextMarkupLanguafe(HTML)(即多个标准化标记符号(Tag)标注web页内容，标注页面内容，页面超媒体内容的输出格式以及每个内容部分(b) HTML文件的特征HTML是网页的基础。HTML中描述的web文件称为HTML页面或HTML文件，扩展名为.HTML 或.htm”纯文本文件，可以使用记事本、写字板等文本编辑器进行编辑，也可以使用FrontPage和DreamWeaver等web创作工具快速创建html文件。(c) HTML文件的所有结构HTML文件都以标签开始，以标签结束。和标志之间的内容用于说明页面的头部信息，如页面标题、关键字等。和标志之间的内容是页面的正文内容。HTML文件的整体结构如图所示。2、常规标签包含文本、图片、超链接、动画、音乐、表格、表单等；3、标签及其属性和HTML标签的格式如下：标记只规定此信息是什么(文本、图片、表格等)，但需要有关如何控制此信息的属性值。属性之间没有排序，属性也可以省略(即默认值)。例如，单个标签在文档的当前位置绘制水平线(horizontalline)。通常从窗口当前行的最左端到最右端进行绘制。4、(a)创建HTML文件的过程如下：(1)单击“开始”按钮，然后选择“程序”“附件”“记事本”，然后打开“记事本”窗口。5，(2)在记事本中，输入HTML语句，如图所示。(3)执行档案储存指令，将档案储存成1-1.htm。(4)在浏览器中打开创建的HTML文件。说明：除了记事本外，还可以使用写字板编辑HTML。(2)设置HTML标签的常规操作步骤如下：(1)在文本文件编辑器中创建html文件(可以参考以下示例创建)。6，(2)保存HTML文件。(3)在浏览器中预览编辑的HTML文件的效果。1.标题标签示例1在记事本中输入以下HTML语句以保存标题标签，然后浏览效果，如图所示：欢迎来到我的花店！欢迎来到我的花店！欢迎来到我的花店！欢迎来到我的花店！欢迎来到我的花店！欢迎来到我的花店！欢迎来到我的花店！7，说明：标记用于定义段落标题的大小系列。最大的标题系列是，最小的标题系列是。使用标签的align属性控制文字的对齐方式。属性值可以是left(左对齐)、center(居中对齐)或right(右对齐)。2.段落标记示例2段落标记，输入HTML语句以显示保存的浏览效果，如下所示：我的花店我的花店！欢迎光临我的花店花，我可以表达我的爱，思念，亲情，感谢的心，真心的祝福！希望进入花店的朋友每天都有好心情！8，备注：标记用于分割段落和控制文本的位置。是一对标志，其内容从新行开始，并定义页面中新行的对齐位置，属性值可以是left(左对齐)、center(居中对齐)或right(右对齐)。9、3。换行符示例3换行符将示例2中该段落中的段落标记替换为以下存储的浏览效果：换行符。段落标记和换行符预览的效果不同。我的花店，10，我的花店！欢迎光临我的花店花，表达爱意，表达思念，亲情，感激之情，真心祝福！希望进入花店的朋友每天都有好心情！说明：标志用于定义新行的显示，不会生成空行，但是多个连续标记可以生成多个空行的效果。旗标是不配对的旗标。，11，标记及其属性，无格式，插入时换行注意：不能插入到标识符中！只能在标识符之间插入、12、和注释标记。注释不限于单行，长度不限。结束标记和开始标记可以不在一行中。2强制换行和不换行标记，换行到HTML，分段。放在行末，可以强制文本换行，而不会在行与行之间留下空行。强制断行标记可以防止字符换行，从而防止浏览器太长而导致字符换行，对于地址、数学公式、数字行等尤其有用。格式为文字、段落标记1注释标记、13，用于设置文字、图像和表的放置位置。设定许多段落的对齐方式时.经常使用标记。定位符使用属性align(文本、图像或表格之一)指定文本块、字符段或标题与网页对齐(left、center和right)。默认值为left。段落标记占位符.类似于，大区域段，14，两端缩进标记。滚动电子商务事务处理模式，第15页，在页面上插入水平标尺线，以便区分不同功能的文本，清晰可见。如果浏览器解释为HTML文档中的标记，则会换行并添加水平线段。线段的样式由标记的参数确定。水平线标记的格式如下：size设置线宽(以像素为单位)，默认值为2。Width设定线段的长度。可以是绝对值(以像素为单位)或相对值(相对于当前窗口的百分比)。Color设定线的颜色，预设为黑色。可以使用颜色名称。颜色可以用相应的英语单词或用“#”引导的十六进制代码来表示。段落标记水平线标记(horizontalline)，16，(2)标记的设置字体标记，示例2中该段落的字体设置，HTML语句表示保存后的浏览效果，如下所示：我的花店我的花店！欢迎光临花店内的花店。可以传达心意，表达思念之情，亲情，感恩之心，真心祝福！希望进入花店的朋友每天都有好心情！17，标记用于定义字符的字体、大小和颜色的标志对。主要属性包括：(1)face属性：定义文字使用的字体，例如face= yes 。(2)size属性：定义属性值为1到7的文字的大小，或者可以使用相对大小进行设定，例如size=5 ，size=-5 。(3)颜色特性。使用颜色的英文名称定义可以表示颜色的文字的颜色，例如color= red也可以使用十六进制RGB代码表示颜色。color=# ff0000 ，使用十六进制RGB代码表示颜色时，颜色代码前面带有“#”。字体标志还包含.粗体旗标、斜体标志等。18，4。列表标记示例4项列表标记，HTML语句表示存储的导航效果，如下所示：花语花语各种花所代表的意义如下。玫瑰：纯洁的爱情gladiolan:百年好，万日成：爱莲化：吉祥强制之神：爱情思，19，郁金香：爱的告白紫罗兰：永远不要忘记：直到永远，列表标记包含项目列表标记，编号列表标记。和标记都是标记对。也可以在标记之间使用标记来设置项目的内容，并且其type属性可以显示不同形状的项目符号。20，无序列表中的每个表项目前面都有项目符号(例如、等)。使用无序列表构建标记和表格项目标记。格式如下：第一个列表项第二个列表项.值得注意的是，标记是单个标记。也就是说，表格项目的开始是上一个表格项目的结束。Type指定每个表项目左端的符号类型，可以为磁盘(实心点)、circle(空心点)、square(长方体)或手动设置地物。列表1未排序列表标记.可以使用、21、标记创建有序列表。表格项目的标签仍为。格式如下：表格项目1表格项目2.已排序列表整个表项目和上下段文本之间的一行为空。向右缩进列表项目并向左对齐。每个表格项目前面都有序号。目录嵌套将主页分为像书目录一样的多个层次，给人强烈的层次感。有序列表和无序列表不仅可以自身嵌套，还可以相互嵌套。列表2排序列表标记.22，花的各种各样的花代表的意思是：玫瑰：纯洁的爱剑兰：意图坚固的百合：百年好和天星：爱怜悯雏菊：吉兆康泽神话：爱，23，郁金香：爱的告白紫罗兰：永恒的美：不要忘记爱，24花语花节友情链接与我联系，25，HTML实际上通过标记链接到超链接。标签配对，主要属性如下：(1)href。链接文件的地址。(2)target。链接目标的位置。1.电子邮件的链接联系人2。站点内文件的链接花部分3。指向其它站点文件的链接友谊链接、26、锚(anchor)标签由定义，用于在网页上建立超文本链接。单击单词、句子或图片可跳转到具有唯一地址(URL)的其他链接资源(目标资源)。具有上述特性的单词、句子或图片称为热点。标记是超文本引用，其href热点属性为目标资源的有效地址，URL值为。如果创建未链接到其它位置的空超链接，则可以使用“#”代替URL，热点。Target属性设置单击链接后结果启动窗口的方式。可选值为_blank、_parent、_self、_top。超链接1锚点标记.27、a标记有四种打开窗口的方法。blank浏览器总是将目标文档加载到新打开的未命名窗口中。Self目标值是所有未指定目标的标签的默认目标，可以在同一框架或窗口中将目标文档作为源文档加载和显示。除非将此目标与文档标题标记的target属性一起使用，否则此目标是多馀的，是多馀的。使用Parent时，文档将导入具有父窗口或超链接引用的框架的框架集。如果此引用位于窗口或顶层框架中，则与目标self相同。Top允许文档加载包含此超链接的窗口。使用top会清除所有嵌入的框架，并将文档加载到整个浏览器窗口中。28，1。链接到同一目录中的web文件链接到同一目录中的web文件的格式如下：热点文本2 .链接到下一级别目录的web文件与下一级别目录中的web文件的链接格式如下：热点文本3 .链接到上一标高目录的web文件链接到上一标高目录中的web文件的格式如下：热点文本此处./表示回滚到上一级目录。4.连接到同级目录的web文件将链接到同级目录中的web文件。热点文本、超链接2指向其他页面的链接、29、华语友情链接与我联系、30、要在当前页面内实现超链接，必须定义两个标记。一个是超链接标记，另一个是书签标记。超链接标签格式是热点文本书签将文本显示为标签的格式。格式如下：如果要设置跳转到目标文本附近的字符串其他页面的文本，格式为：在热点文本将移动到的位置处指定链接标签。如果文本字符串链接指向其他文件的一部分，则格式为：热点文本，超链接3指向页面上的链接。31、目录：值移动电气公司的第二人生，32、电气公司定义电子商务是利用微机技术和网络通信技术的业务活动，构成了电气公司定义要素关联对象。各国政府、学者、经济界人士根据自己所处的位置和参与电子商务的时间点和程度，做出了多种定义。但是，电子商务并不等同于商业电子化。构成项目链接对象的价值载体第二人生，33，如果链接的文件不是HTML文件，则该文件将用作下载文件。指向热点文本5电子邮件的链接单击电子邮件的链接将打开默认电子邮件程序(如FoxMail和OutlookExpress)，并自动填充邮件地址。电子邮件链接采用热点文本格式(例如，电子邮件地址为goodlook，链接设置：免费电话336012345678邮箱：goodlook，超链接4文件下载的链接，34，将路径添加到网页上的其他目录，35注意：此格式是在不关闭当前窗口的情况下打开新窗口，36，(4)对绝对和相对地址文件的引用可以使用绝对或相对地址。1.绝对地址直接确定链接文件在哪个服务器的网站上，主要用于链接其他网站的网页。例如友情链接2。相对地址表示为相对于当前web页所在位置的链接文件，通常用于链接当前站点的其他web页(例如，花节，37，操作摘要，1，点开始)，程序、附件，记事本2，在记事本中用英语输入字符3，使用中文输入法在标识中插入字符4，文件，点开始)因为直接告诉浏览器这是主页文件！注意：default.htm也可以！38，1。将背景颜色格式设置为。颜色值”可以是颜色的英文名称或相应的十六进制值。2.使用图片作为背景标签的background属性可以在网页上放置背景图片。Background值是图片文件名，存储文件的路径可以是相对路径，也可以是绝对路径。插图文件可以是GIF格式或JPEG、JPG格式的文件。在浏览器中，背景图片复制到原始大小，重复填充整个网页。可以使用图1网页的背景、39、图片显示将图片添加到网页。您也可以使用插图标签来设定插图的替代文字、大小、配置等属性。插图标记的格式如下：如果未设定插图的大小，插图会以其本身的大小显示。您可以使用标签的width和height属性来设定插图的大小。Width和height属性的属性值需要像素数，百分比也需要。图2图片标签(单个徽标)、40、文本-如果未设置图片轨道，则图片在页面上为空。标签的属性可让文字环绕图片。使用此标签设置文本环绕后，在出现下一个设置标签之前，它一直有效。要取消文本绕排，请使用标记，随后的文本将不再围绕图。格式如下：其中，clear的值可以是left(关闭放置在图左侧的文本)、right(关闭放置在图右侧的文本)或all(关闭放置在图左侧、右侧的文本)。图2图标记、41、图也可以用作热点，单击图将跳转到链接的文本或其他文件。格式如下：例如，图