网页设计基础―html

网页设计基础—html部分主讲：周益卫什么是htmlHTML（HyperTextMark-upLanguage）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。HTML简介HTML可用于：•控制页面和内容的外观•发布和检索联机文档•创建联机表单•插入诸如音频剪辑和视频剪辑等对象HTML文档示例HTMLHEADTITLE学习HTML/TITLE/HEADBODYBGCOLOR=“LAVENDER”H1欢迎来到HTML世界/H1/BODY/HTMLHTML代码浏览器处理代码并进行显示编辑器和浏览器HTMLHEADTITLE学习HTML/TITLE/HEADBODYBGCOLOR=“LAVENDER”H1欢迎来到HTML世界/H1/BODY/HTMLHTML代码在编辑器中编写HTML代码浏览器显示HTML文档/页面编辑器2-2需要在编辑器中键入源代码示例：DreamWeaverMacromediaDreamweaver是一种专业的HTML编辑器，用于设计、编码、开发网站、网页和强大的Web应用程序。HTML文档结构HTMLHEADTITLE学习HTML/TITLE/HEADBODY/H1欢迎来到HTML世界/H1/BODY/HTMLHTML网页头部部分主体部分HTML…/HTML标签标记HTML文档的开始和结束这部分包括标题和其他说明信息。包括在HEAD…/HEAD标签内这部分包含文本、图像和链接。它包括在BODY…/BODY标签内HTMLHEADTITLE学习HTML/TITLE/HEADBODYBGCOLOR=lavenderH1欢迎来到HTML世界/H1/BODY/HTMLHTML标签2-2BODYBGCOLOR=“green”标签标识BODY元素属性提供有关元素的附加信息值分配给属性的内容META标签2-1META标签是一个特殊的HTML标签，提供有关网页的信息，如作者姓名、公司名称和联系信息等许多搜索引擎都使用META标签信息例如，要将GrahamBrowne指定为作者，则使用以下META标签：METAname=“作者content=GrahamBrowneMETA标签2-2http-equiv属性可用来代替META标签中的name属性METAhttp-equiv=expirescontent=Wed,26Feb1997GMT表示有效期：格林尼治标准时间2005年9月12日，星期一14:25:27属性值：具体的过期时间属性名称：网页过期METAhttp-equiv=refreshcontent=“2表示每隔2秒，自动刷新网页演示：自动刷新的例子HTML基本元素标题段落换行符预先格式化字符格式化水平线字体图像特殊字符超级链接标题HTMLHEADTITLE动物世界/TITLE/HEADBODYH1从大自然获得灵感/H1H2从大自然获得灵感/H2H3从大自然获得灵感/H3H4从大自然获得灵感/H4H5从大自然获得灵感/H5H6从大自然获得灵感/H6/BODY/HTMLH1到H6标签用于指定不同级别的标题段落标签HTMLHEADTITLE诗词学习/TITLE/HEADBODYP我是第一段/PP我是第二段/PPalign=left左对齐显示PPalign=center居中显示PPalign=right右对齐显示P/BODY/HTMLP/PP…/P标签用于标记段落换行符(新的标准应当写br/只要在文本中放入BR/标签，就会强制换行HTMLHEADTITLE诗词学习/TITLE/HEADBODYBR我是第一行BR我是第二行P我是第一段/PP我是第二段/P/BODY/HTMLBRPre标签HTMLHEADTITLE诗词学习/TITLE/HEADBODYH1静夜思/H1PRE床前明月光疑是地上霜举头望明月低头思故乡/PRE/BODYHTMLPRE标签用于显示具有预先定义格式的文本（如HTML文档中所示）格式化文本2-1(在css中改)使用属性检查器中的字体类型、字体大小、字体颜色等设置可以格式化文本字体大小字体类型字体颜色演示：格式化文本的步骤格式化文本2-2在网页中，段落用于组织内容，一个段落就是一个文本块。Dreamweaver提供了三种基本段落样式：段落、标题和预先格式化的。使用属性检查器中的“格式”选项可应用这些样式。HTMLHEADTITLE学习HTML/TITLE/HEADBODYPB这很有趣/BBRBRI足球是最令人喜爱的运动之一。/IBRBRU信息技术是发展的关键。/UBRBR水的分子式是HSUB2/SUBO。BRBR3SUP2/SUP等于9。BRBR/P/BODY/HTML字符格式化标签此标签用于对文本应用各种格式，如粗体、斜体、下划线、下标、上标等使用水平线HTMLHEADTITLE动物世界/TITLE/HEADBODYH3老虎的夜间视觉/H3HRnoshadesize=5align=centerwidth=50%HRsize=15align=leftwidth=80%HRP老虎的夜视能力优于人类的夜视能力五倍以上/BODY/HTMLHR标签属性alignWidthSizeNoshadeHR标签用于在页面上绘制水平线使用字体和属性HTMLHEADTITLE动物世界/TITLE/HEADBODYH1了解有关动物的更多信息/H1PFONTSIZE=5COLOR=BLUEFACE=Arial斑马的特性/FONTP没有任何两匹斑马FONTCOLOR=REDSIZE=3的斑纹是完全一样的，/FONT因此每匹斑马都是独一无二的/BODY/HTMLFONTSIZE=5COLOR=BLUEFACE=Arial可以按名称或十六进制值指定颜色可以为字体指定的大小范围为从1到7可以指定一列字体，各字体间用逗号分隔。浏览器以最先找到的字体显示文本FONT元素及其相关属性（如SIZE、COLOR和FACE）可用于控制网页上文本的显示插入特殊字符2-1某些字符在HTML中具有特殊意义，如小于号()定义HTML标签的开始字符实体用于在HTML文档中插入特殊字符，如版权号，注册商标等插入特殊字符需要用HTML字符实体®©空格；插入特殊字符2-2特殊字符字符实体大于号()>小于号()<引号(“)"®®©©&号&创建超级链接HTMLHEADTITLE了解鸟类/TITLE/HEADBODYH1会弹琴的狗狗/H1AHREF=dog.htm单击此处查看/A/BODY/HTML链接到同一文档的某个部分2-1锚记标签用于使用户“跳”到文档的某个部分HTML的NAME属性用于创建锚标记为达到这种跳转效果，请在HREF参数中使用该标记ANAME=“marker”主题名称/AAHREF=“#marker”主题名称/A链接到同一文档的各个部分2-2...BODYAHREF=#Lion狮子/ABRAHREF=#Zebra斑马/ABRAHREF=#Cheetah印度豹/ABRANAME=Lion狮子/AP狮子的吼声从八公里之外就能听到！雄狮（很容易从鬃毛识别出雌雄）的重量达250公斤。而雌狮则要轻得多，只有180公斤。BRANAME=Zebra斑马/AP没有任何两匹斑马的斑纹完全一样，因此每匹斑马都是独一无二的。斑马也称为黑白条纹相间的马......演示:锚链接例子链接到其他文档的特定位置…P让我们深入了解一些动物BRAHREF=AnimalDetails.htm#Lion狮子/ABRAHREF=AnimalDetails.htm#Zebra斑马/ABRAHREF=AnimalDetails.htm#Zebra印度豹/A…Animals.htm…ANAME=Lion狮子/AP狮子的吼声从八公里之外就能听到！雄狮（很容易从鬃毛识别出雌雄）的重量达250公斤。而雌狮则要轻得多，只有180公斤。…Animaldetails.htm电子邮件链接用户可从网页发送电子邮件HTMLHEADTITLE海豚/TITLE/HEADBODYH3充分交流，密切配合/H3BRP据说，海豚的交流模式几乎与人类的一样复杂！BRBRAHREF=mailto:[e-mail]请将您的疑问发送至DavidFernandez/A/BODY/HTML插入并格式化图像演示：插入图像的步骤属性检查器中将显示图像的属性。可以将图像链接到另一个文件，给图像增加边框，为图像输入替代文本等。IMG标签用于在HTML文档中插入图像。IMG标签的两个常用属性是SRC和ALIGN。SRC属性用于指定要插入的图像位置。ALIGN属性用于指定图像相对于文本的对齐方式。插入图像2-1插入图像2-2HTMLHEADTITLE动物世界/TITLE/HEADH1FONTSIZE=3COLOR=FORESTGREENB让我们看看这些可爱的动物/B/FONT/H1BODYPIMGALIGN=BOTTOMSRC=Animal.jpg底部对齐/PPIMGALIGN=TOPSRC=Animal.jpg顶部对齐/PPIMGALIGN=MIDDLESRC=Animal.jpg居中对齐/P/BODY/HTML图像热点演示：制作图像热点的步骤模板2-1在大多数情况下，一个站点的网页内容不同，但它们的界面是相同的如果界面相同，则可以创建模板模板2-2应用模板后模板示例创建模板2-1可以通过使用现有文档或空白的新模板创建模板。要将现有文档另存为模板，请选择“文件”“另存为模板”。要新建空白模板，请使用“资源”面板或“新建文档”对话框。演示：创建模板的步骤创建模板2-2然后，向模板添加可编辑区域。右击选中的区域，然后选择“模板”“新建可编辑区域”。应用模板使用“资源”面板将模板应用到网页活动网页应用于网页的模板演示：应用模板的步骤课堂重点Dreamweaver是一个HTML集成开发环境HTML文档的格式HTML的常用标签链接的路径分为三种：绝对路径文档相对路径站点根目录相对路径目前我们使用的html版本目前我们使用的是xhtml1.0版本。他和html4.0版本相比它要求属性必须包含引号，所有元素必须是封闭的。xhtml1.0页面可以作为html文档。而xhtml1.1则是作为xml发送给浏览器的。这就意味着，即使xtml1.1出现一个错误。Web浏览器都不会显示