网页制作模块一FAQ网站首页制作优秀PPT_第1页
网页制作模块一FAQ网站首页制作优秀PPT_第2页
网页制作模块一FAQ网站首页制作优秀PPT_第3页
网页制作模块一FAQ网站首页制作优秀PPT_第4页
网页制作模块一FAQ网站首页制作优秀PPT_第5页
已阅读5页，还剩37页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

项目二

FAQ网站首页制作本章要求知识目标能力目标工作任务一二三一、知识目标（一〕项目目标能够熟练地运用XHTML语言设计与制作网页。（二〕教学目标（1〕熟悉XHTML文档基本结构，了解XHTML代码规范。（2〕掌握文档头、文档标题、文档主体标记的意义。（3〕熟悉设置网页背景、文字的颜色、表格的背景、边框颜色，掌握颜色的书写规范。（4〕熟悉掌握常用文本控制标记。（5〕熟悉超链接标记，能链接到电子邮件，熟悉同一个网页中的锚连接方法。（6〕熟练掌握表格简单排版方法和高级排版技巧。（7〕能书写代码产生下拉列表控件、单选按钮控件、复选框控件、文本框控件、命令按钮控件等，并熟知他们的一般属性。（8〕熟悉框架标记<frameset>和<frame>，区分rows和cols的用法，熟练掌握target的用法，能进行框架间的链接。标题会使浏览者带来方便的原因有三：一是标题概括了网页的内容，能使浏览者迅速了解网页；<inputtype=“checkbox”name=“shirt”value=”medium”checked>（7〕能书写代码产生下拉列表控件、单选按钮控件、复选框控件、文本框控件、命令按钮控件等，并熟知他们的一般属性。以上情况可以使用等号或者空格替换内部的虚线：必须改写为：超文本标记语言HTML：年制定了HTML4.org/TR/xhtml1/DTD/xhtml1-transitional.在文档头部定义的标题内容显示在浏览器标题栏中。<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.在HTML中，你可以不需要个属性值加引号，但是在XHTML中，它们必须被加引号。年制定了HTML4.住上面说的“表现层的标识、属性〞是指那些纯粹用来控制表现的tag，例如用于排版的表格、背景颜色和字体大小标记等。理论依据——声明文档类型：org//xhtml">二、能力目标培养学生收集、处理信息，预备、加工素材的能力1理解绝对路径和相对路径的概念2能进行图文混排3具备编写表单的能力4培养学生制作简单静态网页的能力5三、工作任务分别使用表格和框架制作如图所示效果的网页。四、预备知识标记语言简介：目前常用的计算机标记语言有SGML、HTML、XML、VRML、WML和XHTML等。在HTML标记家族中，按其发展的时间顺序分别是SGML、HTML、XML和XHTML。四、预备知识标记语言简介：计算机标记语言是指在普通的文本中加入一些具有特定含义的标记，以对文本的内容进行标记和说明的一种文本表示方法。标记后的文档，通过专用的程序解释后，实现人们希望的结果。标记语言中的控制标记与被标记的文本一起组成电子文件，通过特定软件对于这个电子文件的解读来对标记的意义进行特定的处理。值得注意的是，标记语言与编程语言是不同的，编程语言描述对问题求解的逻辑关系和执行过程，而标记语言只是按照一定的规则在文本文档中添加标记，主要是用来制作电子文件。四、预备知识标准通用标记语言SGML：1969年，IBM公司开发了通用标记语言GML〔GeneralizedMarkupLanguage），1978年，在GML基础上制定了SGML的第一份草案，1986年SGML成为国际标准ISO8879。SGML允许使用者根据数据结构与形态的需求定义出自己的文件格式DTD(DocumentTypeDefinition)，不同领域中的文件，其包含的数据项目与形态差异性可能很大，但只要分别定义出各自的DTD，就可以被各类文件建立时所引用与遵循，以保证同一类的文件都有相似的文件结构。SGML的应用通常是以大型企业、大量数据维护或者复杂特殊的行业为主。SGML有高稳定性和完整性的优点，其复杂性和费用也很高。四、预备知识超文本标记语言HTML：1993年制定了HTML1.0版，年制定了HTML2.0版，年制定了HTML3.2版，年制定了HTML4.0版，年制定了HTML4.01版。近年来HTML几乎不再改版了，主要原因是HTML已发展到相对成熟的阶段，HTML已不能再满足互联网应用不断新增的需求，此时，W3C只好寻找另外的解决途径。HTML的最大的优点就是使用简单，也因为HTML过于简单，无法调整或提升功能来满足新的需求，昔日的最大优势，已随着互联网的发展逐渐变成HTML最大的缺点，取而代之的将是XHTML。四、预备知识超文本标记语言HTML：WWW万维网发展非常迅猛的原因之一就是所有的网页都是以同一格式编写的，这种格式或编写的语言就是HTML〔HypertextMarkupLanguage），即超文本标记语言。HTML通过标记描述将在网页上显示的信息〔如文字、图像、声音和动画等各种资源），标记后的HTML文件通过浏览器解释HTML代码，将信息展示给浏览者。随着HTML的广泛应用，要求HTML标准化，W3C〔WorldWideWebConsortium，全球信息网协会，主要负责有关互联网应用各类标准的制定）四、预备知识可扩展标记语言XML：SGML太复杂，无法在Web上普及使用，而HTML又太简单，无法满足Web上的应用，XML就是为了解决这些问题被制定出来的。文件数据经过XML标记后，形成的XML文件能够在互联网中很容易地被传递、交换和使用。XML〔ExtensibleMarkupLanguage，可扩展标记语言〕是W3C组织于年发布的标准，其目的是定义一种互联网上交换数据的标准。XML去掉了SGML的语法定义部分，简化了DTD部分，增加了部分互联网的特殊成分。四、预备知识可扩展标记语言XML：同时，XML并非要取代HTML，因为XML与HTML被赋予不同的作用，HTML着重在如何描述将文件数据显示在浏览器中，而XML则着重在如何将文件数据以结构化的方式来表示，它们的应用范围是不完全相同的。XML的功能与HTML的功能部分重叠，就网页显示功能来说，HTML要比XML强，但就文件的应用范围来说，XML比HTML强大得多，所有短期来说，两者是可以共存的，并且HTML已取得先机占据了整个网页设计领域，XML并不需要取代HTML，但就长期来说，XML的发展实力是不容忽视的。四、预备知识可扩展超文本标记语言XHTML：XHTML〔ExtensibleHyperTextMarkupLanguage，可扩展超文本标记语言〕的XHTML1.0规范于2000年通过了W3C的审核与推荐。XHTML是以HTML4为范本，依照XML的语法规范重新对HTML作一些规范的制定，来产生新的标记语言XHTML，W3C的最终目的是要以XHTML取代HTML。作为一种语言，它的内容既符合XML，也能被HTML4用户代理程序识别。四、预备知识可扩展超文本标记语言XHTML：HTML引用的三种DTD是使用SGML的语法规范来制定的，而在XHTML中也引用了这3种DTD，只不过将这三种DTD以XML语法规范重新制定，所以XHTML是一种使用XML规范制定的标记语言。XHTML因为有标准严谨的结构，可以很容易被不同浏览平台软件的设计者接受，所以XHTML文件自然能被许多不同的浏览平台所解读，这也是XHTML会成为新一代标记语言的最大基础。四、预备知识XHTML文档基本结构：XHTML文档是由字符数据与控制标记符组成的，是一个文本文件，它由浏览器来解释XHTML文档中控制标记的意义，并按照控制标记的功能把文本数据显示在浏览器中。一个XHTML文档包含控制标记与其它文字数据，控制标记用来控制其它文字在浏览器中的显示方式。在XHTML文档中，可以将其分为DTD声明区和HTML数据区，HTML数据区又可以划分为文档头和文档体两部分。四、预备知识XHTML文档基本结构：XHTML文档是一种纯文本格式的文件，XHTML文档由被标记的内容和笔记组成，XHTML文档的基本结构为：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="//xhtml"><head><meta-equiv="Content-Type"content="text/html;charset=utf-8"/><title>网页标题</title></head><body>网页内容</body></html>四、预备知识XHTML标记及其属性：XHTML文档由标记和被标记的内容组成。标记tag能产生所需的各种效果。这些标记名称大都为相应的英文单词首字母或者缩写，如“p〞在XHTML中表示段落〔paragraph）、img表示图像〔image〕等。各种标记的效果差别很大，但表示形式却大同小异，一般都成对出现。基本格式为;<标志属性1=“属性值1”属性2=“属性值2”…>被标记的内容</标志>例如：网页标题标记<title>表示为：<title>FAQ网页设计</title>有少量的标记并不成对出现〔也称为单标记），他们的基本格式为：<标志属性1=“属性值1”属性2=“属性值2”…/>例如：插入水平线标记<hr>表示为;<hralign=”left”size=”4”width=”50%”color=”red”/>四、预备知识XHTML标记及其属性：标记规定被标记的内容是什么信息〔或是文本，或是图片等），但怎样显示或控制这些信息，就需要在标记的后面加上相关的属性，每个标记有一系列的属性，多个属性之间用空格隔开，标记要通过属性来制作各种效果。每个标记都要用“<”和“>”围住，如<p>、<title>等，用以表示这是XHTML代码而非普通文本。值得注意的是“<”和“>”与标记名之间不能留有空格或者其它字符。对同一段要标记的内容，可以用多个标记来共同作用，以产生需要的效果，各个标记之间的顺序是任意的，但标记与标记之间只能是嵌套不能交叉。少量标记没有属性，如换行标记<br/>。绝大多数标记都有多个属性，根据需要可以使用该标记的所有属性，也可以只用需要的几个属性。标记中没有设置的属性，都取其默认值，。同一个标记中的多个属性之间是没有顺序的。四、预备知识XHTML代码规范：在编写XHTML代码时，必须遵循以下规范。（1〕所有的标记都必须要有一个相应的结束标记。以前在HTML中，你可以打开许多标签，如<p>和<li>不一定写对应的</p>和</li>来关闭他们，但在XHTML中这是不合法的。XHTML要求有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个“/”来关闭它，“/>”前必须加一个空格〔如下所示的<br/>，而不是<br/>）。例如：<br/><imgheigh=”80”src=”images/logo01.gif”/>四、预备知识XHTML代码规范：（2〕所有的标记的名称和属性的名字都必须使用小写。与HTML不一样，XHTML对大小写是敏感的，<title>和<TITLE>是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。例如：网页体标记必须写成<body>而非<BODY>。大小写夹杂写也是不被认可的，甚至Dreamweaver中自动生成的属性名字onMouseOver也必须改写成onmouseover。四、预备知识XHTML代码规范：（3〕所有的标记都必须合理嵌套。因为XHTML要求有严谨的结构，因此所有的嵌套都必须按顺序一层一层对称嵌套，以前我们这样写的代码：<p><b></p></b>必须改写为：<p><b></b></p>四、预备知识XHTML代码规范：（4〕所有的属性必须使用引号“”括起来。在HTML中，你可以不需要个属性值加引号，但是在XHTML中，它们必须被加引号。例如：<imgsrc=01.jpgheight=80>必须修改为：<imgsrc=”01.jpg”height=”80”>四、预备知识XHTML代码规范：（5〕把所有“<”、“>”和“&”等特殊符号用编码表示。当小于号（<）不是标签的一部分时，必须被编码为<；当大于号（>）不是标签的一部分时，必须被编码为>；当于号（&）不是标签的一部分时，必须被编码为&；尽管头部定义的信息很多，但能在浏览器标题栏中显示的信息只有标题。XHTML文档包括头部〔head〕和主体〔body〕两部分。（2〕所有的标记的名称和属性的名字都必须使用小写。因为在HTML文件中所有的控制标记都是以HTML为跟控制标记，所以在DTD的声明中，element-name必须是html。<!DOCTYPEelement-nameDTD-typeDTD-nameDTD-url>同时，XML并非要取代HTML，因为XML与HTML被赋予不同的作用，HTML着重在如何描述将文件数据显示在浏览器中，而XML则着重在如何将文件数据以结构化的方式来表示，它们的应用范围是不完全相同的。例如：网页标题标记<title>表示为：<title>FAQ网页设计</title>DOCTYPE：表示开始声明DTD。（6〕接着输入XHTML文档头标记和文档标题标记，源代码如下：对同一段要标记的内容，可以用多个标记来共同作用，以产生需要的效果，各个标记之间的顺序是任意的，但标记与标记之间只能是嵌套不能交叉。<meta-equiv=”content-language”content=”gb2312”/>（3〕双击打开你新建的空白网页。XHTML文档包括头部〔head〕和主体〔body〕两部分。<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.<htmlxmlns="<title>FAQ网页设计</title>在XHTML中标记是用来表示结构的，而不是用来实现表现形式，标准Web的目的是最终实现数据和表现相分离。因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。四、预备知识XHTML代码规范：（6〕给所有的属性赋一个值。XHTML要求所有的属性必须有一个值，没有值的就重复本身。例如：<inputtype=“checkbox”name=“shirt”value=”medium”checked>必须修改为：<inputtype=”checkbox”name=”shirt”value=”medium”checked=”checked”>四、预备知识XHTML代码规范：（7〕不用在注释内容中使用“--”。“--”只能发生在XHTML注释的开头和结束，也就是说，在内容中他们不在有效。例如下面的代码是无效的；<!--这里是注释---------这里是注释-->以上情况可以使用等号或者空格替换内部的虚线：<!--这里是注释=======这里是注释-->以上这些规范，有的看上去比较奇怪，但这一切都是为了使我们的代码有一个统一、唯一的标准，便于以后的数据再利用。五、我的第一个网页知识目标：一二三四熟悉XHTML文档基本结构了解XHTML代码规范掌握文档头、文档标题、文档主体标记的意义知识目标五、我的第一个网页工作任务：书写XHTML源代码，产生如图所示的网页效果：五、我的第一个网页操作流程：（1〕翻开“我的电脑”，打开某磁盘如D盘，在空白处单击右键，选择“新建|文本文档”。（2〕对自己刚新建的文档重命名为自己的学号，将扩展名修改为.htm。（3〕双击打开你新建的空白网页。（4〕单击“查看”|“源文件”，输入DOCTYPE声明。如下：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">下一页五、我的第一个网页理论依据——声明文档类型：XHTML文档基本结构中第一行成为DOCTYPE声明〔DocumentType，文档类型），用来说明该XHTML或HTML文档使用的版本。要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分。XHTML确定了一个正确的DOCTYPE，标识和CSS才会生效。DOCTYPE声明必须放在每个XHTML文档的顶部，位于所有代码和标识之前。其标准格式如下：<!DOCTYPEelement-nameDTD-typeDTD-nameDTD-url>格式说明如下：五、我的第一个网页理论依据——声明文档类型：！DOCTYPE：表示开始声明DTD。提示：DOCTYPE必须为大写字母。element-name：指定DTD的根元素名称。因为在HTML文件中所有的控制标记都是以HTML为跟控制标记，所以在DTD的声明中，element-name必须是html。DTD-type：指定DTD是属于公用的或是私人制定的，可以设为PUBLIC〔表示该DTD是标准公用的〕或者设为SYSTEM〔表示是私人制定的）。五、我的第一个网页理论依据——声明文档类型：DTD-name：指定DTD的文件名称。其中的DTD叫文档类型定义，里面包含了文档的规则，浏览器根据设计者定义的DTD来解释页面的标识，并展现出来。DTD-url：指出DTD文件所在的URL。当浏览器解读HTML文件时，在需要时就通过指定的下载DTD。>：表示结束DTD声明。五、我的第一个网页理论依据——声明文档类型：网页设计者应该选择什么样的DOCTYPE？理想情况当然是严格的DTD，但对于大多数刚接触Web标准的设计师来说，过渡的DTD〔XHTML1.0Transitional〕是目前最理想的选择。因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。住上面说的“表现层的标识、属性〞是指那些纯粹用来控制表现的tag，例如用于排版的表格、背景颜色和字体大小标记等。在XHTML中标记是用来表示结构的，而不是用来实现表现形式，标准Web的目的是最终实现数据和表现相分离。前往五、我的第一个网页操作流程：（5〕输入XHTML文档根标记，并声明如下的命名空间。<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="//xhtml"></html>五、我的第一个网页操作流程：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="<title>FAQ网页设计</title>//xhtml"><head><meta-equiv="Content-Type"content="text/html;charset=gb2312"/></head></html>（6〕接着输入XHTML文档头标记和文档标题标记，源代码如下：五、我的第一个网页操作流程：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="//xhtml"><head><meta-equiv="Content-Type"content="text/html;charset=gb2312"/><title>FAQ网页设计</title></head><body>欢迎光临虎翼网客户帮助中心</body></html>（7〕接着添加如下所示的文档主体标记。下一页五、我的第一个网页理论依据——XHTML文档根标记与声明命名空间：<html>表示XHTML文档的开始，</html>表示XHTML文档的结束，也称为根标记。Xmlns是XHTMLnamespace

人人文库> 全部分类> 专业文献 > 工业制造

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论