网页制作(1)PPT

《网页制作(1)PPT》由会员分享，可在线阅读，更多相关《网页制作(1)PPT（67页珍藏版）》请在金锄头文库上搜索。

1、1,网页制作,2,相关知识 （一）HTML文件的概念 HTML（Hyper Text Markup Languafe），即超文本标记语言，它通过多种标准化的标记符号（Tag）对网页内容进行标注，对页面内容进行标注，对页面超媒体内容的输出格式以及各内容部分之间逻辑上的组织关系等进行描述和指定。 （二）HTML文件的特点 HTML是Web页面的基础。使用HTML描述的网页文件称之为HTML页面或者HTML文件，这种文件以“.html”或者“.htm”为扩展名，它是一种纯文本文件，可以使用记事本、写字板等文本编辑器来进行编辑，也可以使用FrontPage、DreamWeaver等网页制作工具来快速创

2、建HTML文件。 （三）HTML文件的结构 HTML文件均以标记符开始，以标记符结束。和标记符之间的内容用于描述页面的头部信息，例如页面标题、关键词等信息。在和标记符之间的内容即为页面的主体内容。HTML文件的整体结构如图所示。,3,常见的标记有文本、图片、超链接、动画、音乐、表格、表单等,4,标记及其属性,HTML标记的格式为：内容 标记属性的语法是： 标记只是规定这是什么信息，如文本、图片、表格等，但是如何控制这些信息，就需要相关的属性值来表示。 各属性之间无先后次序，属性也可省略（即取默认值） 例如单标记表示在文档当前位置画一条水平线（horizontal line），一般是从窗口中当前

3、行的最左端一直画到最右端。,5,（一）建立HTML文件 操作步骤如下： （1）单击“开始”按钮，选择“程序” “附件” “记事本”，并打开“记事本”窗口。,6,（2）在记事本中，输入如图所示的HTML语句。 （3）执行“文件” “保存”命令，将文件保存为1-1.htm。 （4）在浏览器中打开所建立的HTML文件。 说明：除了记事本之外，还可以使用写字板来编辑html. （二）常用的HTML标记设置 操作步骤如下： （1）在文本文件编辑器中编写HTML文件（可参考下面的示例编写）。,7,（2）保存HTML文件。 （3）在浏览器中预览所编辑的HTML文件效果。 1.标题标记 示例1标题标记，在记事

4、本中输入以下HTML语句，保存后浏 览效果，如图所示。 我的花店 欢迎你访问我的花店! 欢迎你访问我的花店! 欢迎你访问我的花店! 欢迎你访问我的花店! 欢迎你访问我的花店! 欢迎你访问我的花店! 欢迎你访问我的花店! ,8,说明： 标记符用于定义段落标题的大小级数。最大的标题级数是 ，最小的标题级数是。使用标记符的align属性可控制文字的对齐方式，属性值可以是left(左对齐)，center(居中对齐)，或者right(右对齐)。 2. 段落标记符 示例2段落标记符，输入HTML语句如下，保存后的浏览效果 如图所示。 我的花店 我的花店! 欢迎您访问我的花店 花可以传情,可表达思念之情,亲

5、情,感恩的心情,衷 心的祝福! 祝愿进入我的花店的朋友天天有好心情! ,9,说明： 标记符用于划分段落，控制文本的位置。 是成对标记符，用于定义内容从新的一行开始，并与上段之间的一个空行，其align属性定义新开始的一行内容在页面中的对齐位置，属性值可以是left(左对齐)，center(居中对齐)，或者right(右对齐)。,10,3. 换行标记 示例3换行标记，将示例2中相应段落中的段落标记替换为换行标记，HTML语句如下，保存后的浏览效果如图所示。注意段落标记和换行标记预览效果的不同。 我的花店 ,11,我的花店! 欢迎您访问我的花店 花可以传情,可表达思念之情,亲情,感恩的心情,衷心的

6、祝福! 祝愿进入我的花店的朋友天天有好心情! ,说明：标记符用于定义从新的一行显示，它不产生一个空行，但连续多个标记可以产生多个空行的效果。 标记符是非成对标记符。,12,标记及其属性,无格式，插哪儿哪儿产生一个换行 注意：不能插入标识中！只能插入标识间,13,注释标记的格式为： 注释并不局限于一行，长度不受限制。结束标记与开始标记可以不在一行上。 2 强制换行和不换行标记、. 要用HTML的标记来强制换行、分段。放在一行的末尾，可以使后面的文字、图片、表格等显示于下一行，而又不会在行与行之间留下空行，即强制文本换行。强制换行标记的格式为： 文字 不换行标记可令文字不能因太长使浏览器无法显示而

7、换行，它对住址、数学公式、一行数字等尤其有用。其格式为： 文字 ,段落标记 1 注释标记,14,设定文字、图像、表格的摆放位置。当在许多段落中设置对齐方式时，常使用标记。定位标记的格式为： 文本、图像或表格 其中属性align用来设置文本块、一段文字或标题在网页上的对齐方式：left、center和right。缺省时默认为left。,段落标记 定位标记 与.类似,大区域段,15,两边缩进标记 . 滚动 电子商务交易模式,16,在页面中插入一条水平标尺线，可以使不同功能的文字分隔开，看起来整齐、明了。当浏览器解释到HTML文档中的标记时，会在此处换行，并加入一条水平线段。线段的样式由标记的参数决

8、定。 水平线标记的格式为： size设定线条粗细，以像素为单位，默认为2。 width设定线段长度，可以是绝对值（以像素为单位）或相对值（相对于当前窗口的百分比）。 color设定线条色彩，默认为黑色。可以采用色彩的名称。色彩可以用相应英文单词或以“#”引导的一个十六进制数代码来表示。,段落标记 水平线标记（horizontal line）,17,（二） 标记的设置 字体标记，设置示例2中相应段落的字体，HTML语句如下，保存后浏览效果，如图所示。 我的花店 我的花店!花店 欢迎您访问我的花店 花可以传情,可表达思念之情,亲情,感恩的心情,衷心的祝福! 祝愿进入我的花店的朋友天天有好心情! ,

9、18,标记用来定义文字的字体、大小和颜色，是成对标记符。主要属性有： （1）face属性：定义文字所使用的字体，如face=“隶书”。 （2）size属性：定义文字的大小，属性值为17，也可以使用相对大小来设置，如size=“+5”、 size=“-5”。 （3）color属性。定义文字的颜色，可以使用颜色的英文名称来表示颜色，如： color=“red”；也可使用16进制的RGB代码来表示颜色， color=“#FF0000”，在使用16进制的RGB代码来表示颜色时，需在颜色代码前加“#”。 此外，字体标记符还包括粗体标记符、斜体标记符等。,19,4.列表标记 示例4项目列表标记，HTML语

10、句如下，保存后的浏览效果如图。 花语 花语 各种花所代表的含义如下： 玫瑰：纯洁的爱 剑兰：用心坚固 百合：百年好和 满天星：爱怜 菊花：吉祥 康及馨：亲情思念,20,郁金香：爱的表白 紫罗兰：永恒之美 勿忘我：爱到永远 ,列表标记包括“项目列表”标记、“编号列表”标记。和标记都是成对标记。在标记之间还可以使用标记来设定项目内容，其type属性可以显示不同形状的项目符号。,21,无序列表中每一个表项的前面是项目符号（如、等符号）。建立无序列表使用标记和表项标记。格式为： 第一个列表项 第二个列表项 值得注意的是，标记是单标记。即一个表项的开始，就是前一个表项的结束。 type指定每个表项左端的

11、符号类型，可为disc（实心圆点）、circle（空心圆点）、square（方块），也可自己设置图片。,列表 1 无序列表标记.,22,使用标记可以建立有序列表，表项的标记仍为。格式为： 表项1 表项2 有序列表整个表项与上下段文本之间各有一行空白；列表项目向右缩进并左对齐；各表项前带顺序号。 列表嵌套把主页分为多个层次，例如书的目录，给人以很强的层次感。有序列表和无序列表不仅可以自身嵌套，而且彼此可互相嵌套。,列表 2 有序列表标记.,23, 花语 花语 各种花所代表的含义如下： 玫瑰：纯洁的爱 剑兰：用心坚固 百合：百年好和 满天星：爱怜 菊花：吉祥 康及馨：亲情思念,24,郁金香：爱的表

12、白 紫罗兰：永恒之美 勿忘我：爱到永远 ,25,（三）链接标记的设置 示例5链接标记，输入如下所示的HTML语句，保存后的浏览效果如图所示。 花语 花节 友情链接 与我联系 ,26,HTML是通过标记符来实际超链接的，它是成对标记符，主要属性有： （1）href。链接文件的地址。 （2）target。链接目标的位置。 1.指向电子邮件的链接 与我联系 2.指向站点内文件的链接 花节 3.指向其他网站文件的链接 友情链接,27,锚点（anchor）标记由定义，它在网页上建立超文本链接。通过单击一个词、句或图片，可从此处转到另一个链接资源（目标资源），这个目标资源有惟一的地址（URL）。具有以上特

13、点的词、句或图片就称为热点。 标记的格式为： 热点 href属性为超文本引用，它的值为一个URL，是目标资源的有效地址。如果要创建一个不链接到其他位置的空超链接，可用“#”代替URL，即 热点 。 target属性设定链接被单击后结果所要开始窗口的方式。可选值为：_blank，_parent，_self，_top。,超链接 1 锚点标记.,28,a标记有 4 种窗口打开方法： blank 浏览器总在一个新打开、未命名的窗口中载入目标文档。 self 这个目标的值对所有没有指定目标的 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标

14、题 标签中的 target 属性一起使用。 parent 这个目标使得文档载入父窗口或者包含超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 self 等效。 top 这个目标使得文档载入包含这个超链接的窗口，用 top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。,29,1. 链接到同一目录内的网页文件 链接到同一目录内的网页文件的格式为： 热点文本 2. 链接到下一级目录中的网页文件 链接到下一级目录中网页文件的格式为： 热点文本 3. 链接到上一级目录中的网页文件 链接到上一级目录中网页文件的格式为： 热点文本 其中“. . /表示退到上一级目录中

15、。 4. 链接到同级目录中的网页文件 链接到同级目录中网页文件的格式为： 热点文本 ,超链接 2 指向其他页面的链接,30, 花语 友情链接与我联系 ,31,要在当前页面内实现超链接，需要定义两个标记：一个为超链接标记，另一个为书签标记。超链接标记的格式为： 热点文本 书签就是用标记对该文本作一个记号。格式为： 目标文本附近的字符串 如果要建立指向其他页面某处的文本，格式为： 热点文本 要在跳转到的位置处加上链接标记： 文字串 如果链接指向其他文件的某一部分，格式为： 热点文本 ,超链接 3 指向本页中的链接,32, 目录： 电商定义 构成要素 关联对象 存在价值 移动电商 第二人生 ,33,

16、电商定义 电子商务是利用微电脑技术和网络通讯技术进行的商务活动。各国政府、学者、企业界人士根据自己所处的地位和对电子商务参与的角度和程度的不同，给出了许多不同的定义。但是，电子商务不等同于商务电子化。 构成要素 关联对象 存在价值 移动电商 第二人生 ,34,如果链接到的文件不是HTML文件，则该文件将作为下载文件，其格式为： 热点文本 5 指向电子邮件的链接 单击指向电子邮件的链接，将打开缺省的电子邮件程序，如FoxMail、Outlook Express，并自动填写邮件地址。指向电子邮件链接的格式为： 热点文本 例如，E-mail地址是，建立如下链接： 免费电话:80012345678 信箱:,超链接 4 指向下载文件的链接,35, 网页制