L20-《网络信息制作与发布》Web标准化布局1导论.pptx

《网络信息制作与发布》 第六章 Web标准化布局 浙江广播电视大学 徐斌立 导 言 本章主要介绍网页设计的设计特点。网页设计与传统的平面设计在视觉传达上有很多的 相似点，但在技术实现方面又有很大的区别。网页设计是传统的平面设计的视觉传达效果运 用和网络技术实现的有机结合。和传统的媒体一样，网页也要求有一定的艺术感染力。 学习本章不仅可以学到网页设计相关的色彩、版式和文字设计原理，以及文字在设计中的 运用，还能够通过色彩的运用、素材的调整和整体页面的版式布局来学习网页的设计要素。 学习目标 认知目标 了解动态源码与静态源码对网页的影响 了解(X)HTML语言知识的基本内容 理解CSS样式表的基本概念与作用 了解DIV、盒子的基本概念 理解网页布局设计的原则 学习目标 技能目标 初步应用(X)HTML语言完成页面制作 初步学会使用CSS样式表 初步应用Dreamweaver工具与WEB标准化布局的技术 6.1 网页中的其他源代码 网站源码，我们可以把它理解成源代码。我们看到的网页，其实是由一大堆的源代码组成的，通过我们的IE浏览器（或服务器）翻译成我们所看到的样子。 网站代码也分为两种：一种是动态页面，如ASP、PHP、JSP、.NET、CGI等这些网站的源代码是在服务端执行的。 另一种是静态页面，如纯HTML页，其代码是在客户端执行的。 6.2 在Dreamweaver中的HTML编辑 演示：熟悉Dreamweaver源代码编辑窗口 显示源代码行号与自动换行功能 6.3 (X)HTML语言基础 (X)HTML语言的语法规则 一个完整的(X) HTML文件由标题、段落、列表、表格、单词即嵌入的各种对象所组成。这些逻辑上统一的对象我们称为“element”标签，HTML使用“tag”（标签）来分割并描述这些标签。实际上整个(X) HTML文件就是由元素与标签组成的。 6.3 (X)HTML语言基础 (X)HTML的文件规格沿用sgml的格式，采用“”与“ ”作为分割字符，起始标 签的一般形式如下： tagname attrname = attrvalue 标签名 属性 值 table width=“100%” 6.3 (X)HTML语言基础 单标签和双标签 在(X) HTML语言中，标签分为两种类型，分别是单标签和双标签。 单标签： 标签 属性=“值” / img src=“picture.gif” / 双标签： 由“始标签”和“尾标签”两部分构成， 必须成对使用， 标签 属性=“值” 内容/标签 div lang=no Hi!/div 6.3 (X)HTML语言基础 区分大小写 (X)HTML对大小写是敏感的，在(X)HTML文档中，使用相同字母大写和小写定义的标签是不同的。例如，H和h表示的是不同的标签。 正确嵌套所有标签 在(X)HTML中，标签进行嵌套时，必须按照打开标签的顺序进行关闭。 正确嵌套标签的代码：ul li内容 /li /ul 错误嵌套标签的代码：ul li内容 /ul /li 6.3 (X)HTML语言基础 标签必须要封闭 在(X) HTML中，所有的页面标签都要有相应的结束标签。 例如body对应的结束 标签是/body 其中独立的标签（如br等）也必须要结束。方法是在标签的右尖括 号前加入一个“/”来结束标签，例如，br/就是br结束后的写法。如果标签中还有属性，则“/”出现在所有属性的后面。 img src=“picture.gif” / 6.3 (X)HTML语言基础 属性值必须加上双引号 (X)HTML中所有的属性值，包括数值，都必须加上双引号。示例代码如下： img src=“picture.gif” / 6.3 (X)HTML语言基础 明确所有属性的值 (X) HTML中规定每一个属性都必须有一个值,没有值的属性也必须用自己的名称作为值。 input checked=checked / 6.3 (X)HTML语言基础 总结XHTML 相对 HTML 的几大区别: XHTML 要求正确嵌套 XHTML 所有元素必须关闭 XHTML 区分大小写 XHTML 属性值要用双引号 XHTML 用 id 属性代替 name 属性 XHTML 特殊字符必须用编码表示 （如 必须用 amp;替代） 谢谢您的专心听课！