第二章网页设计.

陕西工业职业技术学院《网页设计与制作》李海平2010年8月31日星期二2.1课前导读2.2课堂教学2.2.1HTML基础2.2.2HTML入门——简单标记的认识与使用2.2.3段落和文字标记2.2.4建立超级链接2.2.5加入图片2.3上机练习2.4课后作业2.1课前导读1.什么是HTML2.HTML的作用3.HTML的编辑环境4.专用的网页编辑器1.什么是HTMLHTML是HyperTextMarkupLanguage（超文本标记语言）的缩写，它是构成Web页面（Page）的主要工具，是用来表示网上信息的符号标记语言。HTML是一种用于网页制作的排版语言，是Web最基本的构成元素。HTML并非一种编程语言。用HTML标记文档或给文档添加标记，使文档可在上发布。用HTML准备的文档包含引用图形和格式标记。用Web浏览器可以查看这些HTML文档。用HTML的语法规则建立的文档可以运行在不同操作系统的平台上。因此，HTML文档属于纯文本文件（它能用任意的文本编写器书写）。2.HTML的作用HTML语言作为一种网页编辑语言，易学易懂，能制作出精美的网页效果，其作用如下：①格式化文本。如设置标题、字体、字号、颜色；设置文本的段落、对齐方式等。②建立超链接。通过超链接检索在线的信息，只需用鼠标单击，就可以到达任何一处。③创建列表。把信息用一种易读的方式表现出来。④插入图像。使网页图文并茂，还可以设置图像的各种属性，如大小、边框、布局等。⑤建立表格。表格为浏览者提供了快速找到需要信息的显示方式，还可以用表格来设定整个网页的布局。⑥加入多媒体。可以在网页中加入音频、视频、动画，还能设定播放的时间和次数。⑦交互式窗体、计数器等。为获取远程服务而设计窗体，可用于检索信息、定购产品等。HTML是最基本的网页制作语言，其他的专用网页编辑器（如FrontPage，Dreamweaver等）都是以HTML为基础的。3.HTML的编辑环境HTML的编辑环境很简单，任何一台计算机都可以编辑网页。但要看到用户自己设计的网页效果，就需要安装一个浏览器，如InternetExplorer，NetscapeNavigator等。因此，只要计算机能运行某个浏览器，就具备了网页制作的硬件环境。HTML要求的软件环境更为简单，任何文本编辑器都可以用来制作网页，包括记事本、写字板、Word、WPS等编辑程序。不过在保存时，一定要用纯文本方式存盘。HTML文件的设计制作与一般程序设计语言之间最大的不同在于，HTML具有跨平台的处理能力。也就是说，只要有适当的浏览器，不管使用何种操作系统，都能阅读制作的HTML文件。4.专用的网页编辑器HTML作为最基本的网页编辑语言，能实现制作网页的各种效果。但是，它毕竟是一种代码，得记住一些标记。因此，为了使设计网页更加简单方便，有些公司和人员就设计了专用的网页编辑器。专用的网页编辑器主要分为3大类。①完全的所见即所得工具：所谓所见即所得，就是在编辑网页时看到的效果，与使用浏览器时看到的效果基本一致。如果希望建立一个美观而又不复杂的站点，这种工具非常适合，可以很轻松地制作想要的效果，但是必须按照这些软件的要求来设计。典型的工具有Drumbeat、NetobjectFusion。②纯粹的HTML代码编辑工具：用纯粹的HTML代码编辑工具，用户可以对页面进行完全的控制。使用这些工具时，直接编辑原始的HTML代码，在对页面进行加工时，不会破坏原有的代码。当然，这并不是说用户得从头到尾编写每一种效果的HTML源代码。因为这些工具通常带有许多辅助工具，可以帮助用户创建表格、表单，以及其他复杂的结构，并对创建的页面进行预览。这些工具最大的不足是必须会HTML语言。当然，要想成为一个好的网页制作人员，HTML还是应当掌握的。这类工具中典型的有HomeSite、HotDogProfessional、HTMLedPro、WebEditPro。③混合型工具：介于上面两种工具之间，混合型工具在所见即所得的工作环境下可以完成主要的工作，同时也能切换到一个文本编辑器，对HTML源代码进行直接地调整。像所见即所得的工具一样，混合型的创作工具通常也不能完全控制HTML页的代码。但MacromediaDreamweaver在对已有的HTML页进行编辑时，会严格保持原有代码的格式。典型的混合型工具还有AdobePageMill、FrontPage、CutePage、QuickSite等。FrontPage是较好的所见即所得的网页编辑工具，也是常用的网页编辑器。它对一个Web站点有很强的控制能力，可以统一Web站点内页面的外观和风格。它的Web管理功能也很强大，用户可以通过图形的方式观察和调整站点的结构。Dreamweaver的最佳特性就是它的“往返式（Roundtrip）HTML”编辑能力，这种特性使图形编辑工具和代码编辑工具输出同样的HTML代码。Dreamweaver是图形化HTML编辑工具中惟一不干扰原有HTML代码的工具，所以用Dreamweaver编辑后，仍然可以转回到原来的代码中用编辑工具进行修改。用其他工具修改后，Dreamweaver能自动更新相应的页面。它能很方便地产生动画，嵌入JavaApplet、ActiveX控件，以及Netscape插件，并对用户的动作作出反应。此外，Dreamweaver在InternetExplorer和NetscapeNavigator两种浏览器之间的兼容性问题上处理得也很好。2.2课堂教学2.2.1HTML基础2.2.2HTML入门——简单标记的认识与使用2.2.3段落和文字标记2.2.4建立超级链接2.2.5加入图片2.2.1HTML基础1.HTML文件的组成2.标记3.标记的属性4.HTML文件的基本结构HTML文件是一种纯文本文件，可以通过浏览器读取HTML文件，并用浏览器内含的语法分析器来解读各种特殊标记。1.HTML文件的组成一个HTML文件可由下列3部分组成。①标记：是HTML的基本元素，可以说一个HTML文件大部分都是由字符信息加上一些标记呈现出来的。也就是说，只要在HTML文件中适当的位置上加上所需标记，就可依照各标记所代表的意义实现各种特殊的功效。基本的标记可分为两种：单一标记（只要一个标记就能完成所要表示的功能）和成对标记（需要两个标记组合才能完成所需功能）②文字与图形资料：是指要提供给浏览信息的人阅读的内容。显示的图形一般都以独立文件的形式存在，如果要显示图形（图形文件要用其他程序建立），就必须用特殊的标记指向图形文件。③统一资源定位器URL（UniformResourceLocator）：是上文件的参照格式，浏览者在浏览器的地址处输入URL格式的内容，就可获取所指主机的主页。2.标记HTML文件由标记和被标记的内容组成。标记（tag）能产生所需的各种效果。就像一个排版程序，它将网页的内容排成理想的效果。这些标记名称大都为相应的英文单词首字母或缩写，如P表示Paragraph（段落）、IMG为Image（图像）的缩写，很好记忆。各种标记的效果差别很大，但总的表示形式却大同小异，大多数成对出现，格式为：标记受标记影响的内容/标记说明：①每个标记都用“”（小于号）和“”（大于号）围住，如P，Table，以表示这是HTML代码而非普通文本。注意，“”与标记名之间不能留有空格或其它字符。②在标记名前加上符号“/”便是其结束标记，表示这种标记内容的结束，如/FONT。标记也有不用/标记结尾的，称之为单标记。③标记字母大小写皆可，没有限制。对同一段要标记的内容，可以用多个标记来共同作用，产生一定的效果。此时，各个标记间的顺序也是任意的。3.标记的属性标记只是规定这是什么信息，或是文本，或是图片，但怎样显示或控制这些信息，就需要在标记后面加上相关的属性来表示，每个标记有一系列的属性。标记要通过属性来制作出各种效果。格式为：标记属性1=属性值属性2=属性值…受影响的内容/标记例如字体标记FONT，有属性size和color等。属性size表示文字的大小，属性color表示文字的颜色。表示为：FONTsize=3color=red属性示例/FONT需要注意的是：①并不是所有的标记都有属性，如换行标记就没有。②根据需要可以用该标记的所有属性，也可以只用需要的几个属性，在使用时，属性之间没有顺序。多个属性之间用空格隔开。属性和标记一样，都不区分大小写。但为了阅读方便，本书用大写字母表示标记，小写字母表示属性。4.HTML文件的基本结构HTML文件是一种纯文本格式的文件，HTML文件包括头部（head）和主体（body）。文件的基本结构为：HTMLHEADTITLE网页的标题/TITLE/HEADBODY网页的内容/BODY/HTML说明：①HTML文件以HTML开头，以/HTML结尾。②HEAD…/HEAD：表示这是网页的头部，用来说明文件命名和与文件本身的相关信息。可以包括网页的标题部分：TITLE…/TITLE。③BODY…/BODY：表示网页的主体即正文部分。④HTML语言并不要求在书写时缩进，但为了程序的易读性，建议网页设计制作者使标记的首尾对齐，内部的内容向右缩进几格。【例2-1】简单的HTML文件。HTMLHEADTITLE简单的HTML文件/TITLE/HEADBODY最简单的网页/BODY/HTML图2-1例2-1的显示效果2.2.2HTML入门1.HTML文档标记HTML…/HTML2.HTML文件头标记HEAD…/HEAD3.HTML文件标题标记TITLE…/TITLE4.HTML文件主体标记BODY…/BODY5.注释标记1.HTML文档标记HTML…/HTMLHTML文档标记的格式为：HTMLHTML文档的内容/HTMLHTML文档的标记。HTML处于文档的最前面，表示HTML文档的开始，即浏览器从HTML开始解释，直到遇到/HTML为止。每个HTML文件均以HTML开始，以/HTML结束。2.HTML文件头标记HEAD…/HEADHEAD是英文“头”的意思，习惯上将HTML文档分为文件头和文件主体两个部分。文件主体是在Web浏览器窗口的用户区显示的内容，而文件头则用来规定该文档的标题（浏览器标题栏中的内容）和文档的一些属性。HTML文件头标记的格式为：HEAD头部的内容/HEAD说明：HTML文件的头部在文件标记HTML之后，在开始标记HTML和结束标记/HTML间定义。其内容可以是标题名，文本文件地址、创作信息等网页信息说明。对应于相应的标记，有标题标记TITLE…/TITLE等。HEAD标记在HTML文件中不是必须的，如果没有，浏览器也会照常解读文件。3.HTML文件标题标记TITLE…/TITLEHTML文件标题标记的格式为：TITLE标题名/TITLE设定HTML文件标题的标记。在文件头部定义的标题内容不在浏览器窗口中显示，而是在浏览器的标题栏中显示。尽管头部定义的信息很多，但能在浏览器标题栏中显示的信息只有标题。4.HTML文件主体标记BODY…/BODYHTML文件主体标记的格式为：BODY文件主体/BODY说明：①主体位于头部之后，以BODY为开始标记，/BODY为结束标记。它定义了网页上显示的主要内容与显示格式，是整个网页的核心，网页中要真正显示的内容都包含在本标记中。②BODY有很多属性，这些属性用于设定网页的总体风格，可以定义页面的背景图像、背景颜色、文字颜色、超文本链接的颜色。其中常用的属性见表2-1。表2-1BODY标记的属性值说明background设置网页的背景图像。Bgcolor设置网页的背景色。Text设置文本的颜色