网页设计与制作 课件 （向隅） 项目1、2 网页制作基础知识、认识网页中常用的元素_第1页
网页设计与制作 课件 （向隅） 项目1、2 网页制作基础知识、认识网页中常用的元素_第2页
网页设计与制作 课件 （向隅） 项目1、2 网页制作基础知识、认识网页中常用的元素_第3页
网页设计与制作 课件 （向隅） 项目1、2 网页制作基础知识、认识网页中常用的元素_第4页
网页设计与制作 课件 （向隅） 项目1、2 网页制作基础知识、认识网页中常用的元素_第5页
已阅读5页，还剩66页未读， 继续免费阅读

下载本文档

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

文档简介

任务1-1认识Web

任务1-2认识网页制作

任务1-3学习网页设计常用工具

任务1-4安装Web服务器任务1-1认识Web1.认识网页网页是网站中用于承载信息的页面，主要由文字、图像和超链接等元素构成。除这些元素外，网页中还可以包含音频、视频以及Flash等。在浏览器窗口中任一空白处单击鼠标右键，从弹出的快捷菜单中选择“查看页面源代码”菜单命令，可显示当前窗口网页的源代码，如图1-2所示。网页有静态网页和动态网页之分。1)静态网页在网站中，没有数据交互而仅为纯粹的HTML格式的网页通常称为静态网页。静态网页是标准的HTML文件，其扩展名为.html或.htm，网页中可以包含文本、图像、声音、Flash动画、客户端脚本和ActiveX控件及Java小程序等。静态网页是网站建设的基础，早期的网站一般都是由静态网页制作的。静态网页的工作原理如图1-3所示。静态网页的特点如下：(1)网页内容不会发生变化，除非网页设计者更改了网页的内容；(2)不能实现与浏览网页的用户之间的交互；(3)信息流是单向的，即从服务器到浏览器，服务器不能根据用户的选择调整向用户返回内容。2)动态网页动态网页是利用基本的HTML语法规范与Java、VB、VC、CGI、ASP、PHP、JSP、ISAPI等高级程序设计语言及数据库编程等多种技术，实现对网站内容和风格的高效、动态显示和交互式的管理。动态网页文件以asp、aspx、jsp、php等为后缀，能与后台数据库进行交互，由后台数据库提供实时数据更新和数据查询服务。动态网页的工作原理如图1-4所示。动态网页的特点如下：(1)动态网页以数据库技术为基础，可以大大减少网站维护的工作量；(2)采用动态网页技术的网站可以实现更多的功能，如订单管理、注册等；(3)动态网页并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。2.与网页相关的专业术语1) InternetInternet(因特网)是全球最大、连接能力最强，由遍布全世界的众多大大小小的网络相互连接组成的计算机网络，是由美国的ARPANET发展起来的。Internet将全球范围内的网站连接在一起，形成一个资源十分丰富的信息库。在人们的工作、生活和社会活动中，Internet起着越来越重要的作用。2) WWWWWW(WorldWideWeb，万维网)又称环球信息网、环球网、全球浏览系统等。WWW是一种基于超文本的、方便用户在Internet上搜索和浏览信息的信息服务系统，它通过超链接把世界各地不同Internet节点上的相关信息有机地组织在一起，用户只需发出检索要求，它就能自动地进行定位并找到相应的检索信息。WWW是Internet上最受欢迎、最为流行的信息检索工具，它能把各种类型的信息(文本、图像、声音和影像等)集成起来供用户查询。3) URL在Internet上，每一个信息资源都有唯一的地址，该地址叫统一资源定位(UniformResourceLocator，URL)。URL由资源类型、主机域名、资源文件路径和资源文件名4部分组成，其格式为“资源类型://主机域名/资源文件路径/资源文件名”。只要知道资源的URL，就能够对其进行访问，如。4) DNS在Internet上，每一台主机都有一个唯一的IP地址，IP地址是数字的，不便记忆，因此就用一串字符替代数字记忆。域名与IP地址之间是一一对应的。将好记的域名转换成IP的过程称为域名解析。DNS(DomainNameSystem，域名系统)就是进行域名解析的系统，图1-5所示是域名系统的原理。5) HTTPHTTP(HypertextTransferProtocol，超文本传输协议)是一种网络通信规划，其详细规定了浏览器和WWW服务器之间互相通信的方式。HTTP是非常可靠的协议，它具有强大的自检能力，可以保证用户请示的文件到达客户端时是准确无误的。6) Web网页也叫Web页，就是Web站点上的文档。网页是构成网站的基本元素，是承载各种网站应用的平台。每个网页都有唯一的URL地址，通过该地址可以找到相应的网页。网页是用一种叫HTML的语言书写的文件，它是文本文件，由浏览器翻译(渲染)。3. Web标准Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。不同的浏览器对同一段代码有不同的解析，导致页面显示效果不一致，因此开发者常常需要为多版本的网页开发而艰苦工作。1) Web标准的优点Web标准的主要优点如下：(1)提高页面浏览速度。(2)使网站更易于维护。(3)降低网站流量费用。(4)更容易被搜寻引擎搜索。(5)内容能被更广泛的设备访问。(6)让Web的发展前景更广阔。2) Web标准的构成Web标准由结构标准、表现标准和行为标准三部分组成。(1)结构标准。结构标准用于对网页元素进行整理和分类，主要包括XML和XHTML两个部分。(2)表现标准。表现标准用于设置网页元素的版式、颜色、大小等外观样式，主要是指CSS。(3)行为标准。行为标准是指网页模型的定义及交互的编写，主要包括DOM和ECMAScript两个部分。任务1-2认识网页制作1. HTML简介HTML(HyperTextMarkupLanguage，超文本标记语言)是一种用于基本网页格式标记的语言，它主要是通过HTML标记对网页中的文本、图像、声音等内容进行描述。只要是遵守这种格式编写的代码，就可以被浏览器正常解析并显示。HTML包含了许多功能标签，且易学易懂，使用这些标签能够制作出精美的网页效果。其主要功能如下：(1)表示文档结构(html、head、title、body)。(2)格式化文本(font、hn、p、br、b、i、u、sup、sub)。(3)创建列表(ul、ol、li)。(4)建立表格(table、caption、tr、th、td)。(5)制作表单(form、input、select、option)。(6)建立链接(a)。2. HTML的发展史HTML语言发展至今，经历了6个版本，这个过程中新增了许多HTML标记，同时也淘汰了一些标记。其具体发展历程如下：(1)超文本标记语言(第一版)：1993年6月作为互联网工程工作小组(IETF)工作草案发布。(2) HTML2.0：1995年11月作为RFC1866发布，在RFC2854于2000年6月发布之后被宣布过时。(3) HTML3.2：1997年1月14日，W3C推荐标准。(4) HTML4.0：1997年12月18日，W3C推荐标准。(5) HTML4.01：1999年12月24日，W3C推荐标准。(6) HTML5：2008年1月22日公布第一份正式草案，2014年10月底定稿。3.CSS简介CSS(CascadingStyleSheets，层叠样式表)主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图像的外形(宽度和高度、边框样式、边距等)以及版面的布局等外观显示样式。CSS可以用来改变页面的位置和布局及显示颜色等效果。CSS常用于控制HTML标签的颜色、间距、位置和字体等效果。CSS示例代码格式如下：1) CSS的优势相对于传统的table网页布局，采用CSS布局有下述3个显著优势：(1)表现和内容相分离。CSS布局将设计部分剥离出来放在一个独立样式文件中，HTML文件只存放网页结构文本信息。这样的页面对搜索引擎更加友好。(2)提高页面浏览速度。对于同一个页面视觉效果，采用CSS布局的页面容量要比table编码的页面文件容量小得多，浏览器不必编译大量冗长的标签。(3)易于维护和改版。采用CSS布局，只要简单地修改几个CSS文件就可以重新设计整个网站的页面。2)常见的CSS样式常见的CSS样式有3种，分别是内联样式、内嵌样式和链入样式。(1)内联样式。内联样式是指将CSS样式写入HTML标签内部，该种写法只能控制当前标签的样式效果。具体示例代码如下：(2)内嵌样式。内嵌样式是将CSS样式单独放入<head>标签中，通常使用<style>标签来标识样式效果。具体示例代码如下：(3)链入样式。链入样式是指将CSS样式单独放到一个文件中，然后在页面代码中引用该文件，这样就可以将HTML代码与CSS代码分离，使页面变得简洁、代码编写变得灵活。具体示例代码如下：4. JavaScript简介JavaScript是一种基于对象和事件驱动的脚本语言，通过JavaScript可以将静态页面转变成支持用户交互并响应相应事件的动态页面。在网站建设中，JavaScript用于为页面添加动态效果。JavaScript是一种轻量级的编程语言，由布兰登·艾奇发明并于1995年出现在NetScap中。JavaScript的基本语法与C语言类似，但运行过程中不需要单独编译，而是进行逐行解释，运行快。JavaScript具有跨平台的特性，与操作环境无关，只依赖于浏览器本身，即只要浏览器支持JavaScript就能正确执行。5.浏览器简介IE、火狐和谷歌是目前互联网的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和Opera浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。浏览器最重要或者说最核心的部分是“RenderingEngine”，可译为“渲染引擎”，一般人们习惯称之为“浏览器内核”，负责对网页语法的解释并渲染网页。因此，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。按照内核的种类，可将常见的浏览器分为以下4类：(1) Trident内核。Trident的代表产品为InternetExplorer(IE),又称为IE内核或MSHTML内核。Trident是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器包括IE、傲游、世界之窗浏览器、Avant、腾讯TT、360浏览器、搜狗浏览器等。(2) Gecko内核。Gecko是一套开放源代码的、用C++编写的网页排版引擎。Gecko是最流行的排版引擎之一，仅次于Trident。使用Gecko的最著名浏览器有Firefox、Mozilla、Netscape6～Netscape9。Gecko是Netscape(网景)公司早期自主研发的浏览器内核，其优点是功能强大、丰富，可以支持很多复杂网页和浏览器接口，但是会消耗很多资源。MozillaFirefox、MozillaSeaMonkey、Waterfox(Firefox的64位开源版)、Iceweasel、Epiphany(早期版本)、Flock(早期版本)等均使用Gecko内核。(3) WebKit内核。WebKit是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于MacOS系统。WebKit的优点是源码结构清晰、渲染速度极快；缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。其主要代表作品有Safari和Google的Chrome浏览器。(4) Presto内核。Presto是由OperaSoftware开发的浏览器排版引擎，供Opera7.0及以上版本使用。它取代了旧版Opera4～Opera6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版。Presto的代表作品有OperaPresto。由于Presto是商业引擎，使用Presto内核的浏览器除Opera以外，只剩下NDSBrowser、WiiInternetChannel、Nokia770网络浏览器等，这在很大程度上限制了Presto的发展。任务1-3学习网页设计常用工具1.认识DreamweaverCC界面执行“开始”→“所有程序”→“AdobeDreamweaverCC”菜单命令，即可启动DreamweaverCC。DreamweaverCC的起始页工作界面如图1-7所示。2. DreamweaverCC界面的基本组成DreamweaverCC界面是MDI(多文档)形式，即将所有的文档窗口及面板都集合到主窗口中。在DreamweaverCC的起始页中选择一个新建项目类型如“HTML”，就会进入新建“HTML”文档窗口，此窗口即为DreamweaverCC的主界面，如图1-8所示。DreamweaverCC主界面主要由7个部分组成，分别是菜单栏、文档工具栏、文档窗口、“插入”及“文件”面板、标签选择器、属性面板及面板组。1)菜单栏DreamweaverCC菜单栏由各种菜单命令构成，包括“文件”“编辑”“查看”“插入”“修改”“格式”“命令”“站点”“窗口”和“帮助”10个菜单项，如图1-9所示。2)文档工具栏文档工具栏提供了各种文档视图窗口，如代码、拆分、设计实时视图，标题还提供了各种查看选项和一些常用操作，如图1-10所示。下面介绍几个常用的功能按钮：(1)代码：显示“代码”视图。单击“代码”按钮，文档窗口只显示“代码”。(2)拆分：显示“代码”和“拆分”视图。单击“拆分”按钮，文档窗口拆分成两个部分：左边为“代码”视图，右边为“设计”视图，且两个视图中间用一条间隔线分开。拖动间隔线可以改变两者所占屏幕的比例。(3)设计：显示“设计”视图。单击“设计”按钮，文档窗口只显示“设计”视图。(4)实时视图：提供页面在浏览器中的非可编辑的、逼真的外观呈现。(5)标题：输入的内容作为网页标题。3)文档窗口文档窗口是Dreamweaver最常用到的区域之一，此处会显示所有打开的文档。单击文档工具栏里的“代码”“拆分”“设计”3个选择按钮可变换区域的显示状态。图1-11所示为“拆分”窗口，左边为“代码”窗口，右边为“设计”窗口。4)“插入”及“文件”面板单击面板组中的“文件”面板，显示站点中的文件和文件夹，如图1-12所示。5)标签选择器在文档窗口底部的状态栏中，显示环绕当前选定内容标签的层次结构，单击该层次结构中的任何标签，可以选择该标签及网页中对应的内容。在标签选择器栏还可以设置网页的显示比例，如图1-13所示。6)属性面板属性面板主要用于设置和查看文档窗口中所选中元素的属性。在DreamweaverCC中允许用户在属性面板中直接对元素的属性进行修改。属性面板比较灵活，选中的对象不同，属性面板中的内容也随之改变。图1-14、图1-15、图1-16分别是“文档”属性面板、“表格”属性面板和“图像”属性面板。7)面板组DreamweaverCC包括多个面板，这些面板都有不同的功能，将它们叠加在一起便形成了面板组，如图1-17所示。3. Dreamweaver初始化设置1)设置工作区布局打开DreamweaverCC工具界面，选择菜单栏中的“窗口”→“工作区布局”→“经典”选项。2)添加必备面板设置为“经典”模式后，需要调出常用的3个面板，分别为“插入”菜单、“文件”面板、“属性”面板。这些面板均可通过“窗口”菜单打开，如图1-19所示。3)设置新建文档选择“编辑”→“首选参数”选项(或按“Ctrl+U”组合键)，即可打开“首选参数”对话框，如图1-20所示。选中左侧“分类”中的“新建文档”选项，右侧就会出现对应的设置。4)设置代码提示DreamweaverCC拥有强大的代码提示功能，可以提高书写代码的速度。在“首选参数”对话框中可设置代码提示，选择“代码提示”菜单，然后选中“结束标签”选项中的第二项“键入起始标签‘>’后(D)”，单击“确定”按钮即可完成设置，如图1-21所示。5)浏览器设置DreamweaverCC可以关联浏览器，对编辑的网站页面进行预览。在“首选参数”对话框左侧区域选择“在浏览器中预览”选项，在右侧区域单击“确定”按钮，即可打开“添加浏览器”对话框。设置步骤如下：(1)在“名称”文本框中输入“火狐”，“应用程序”文本框中输入其程序名(包括路径)，或单击其后的“浏览”按钮选择应用程序名，如图1-23所示。(2)单击“确定”按钮，打开浏览器的快捷方式，如图1-24所示。4.创建站点创建一个名称为“手机报价”的站点，保存在文件夹“sgbj”中。创建步骤如下：1)创建所需的文件夹在本地硬盘D盘中创建名为“sgbj”的文件夹。在文件夹“sgbj”中创建子文件夹“images”。2)创建站点“手机报价”(1)在DreamweaverCC的主界面中选择“站点”→“新建站点”菜单命令，打开站点设置对话框。(2)在“站点名称”文本框中输入要创建的网站名称“手机报价”；在“本地站点文件夹”文本框中输入网站文档保存的路径“D:\sgbj”，也可以通过其后的按钮选择网站文档保存位置，如图1-26所示。(3)单击“高级设置”按钮展开下拉菜单，选择“本地信息”命令。在“默认图像文件夹”文本框中输入网站的图像保存位置“D:\sgbj\images”，或通过其后的按钮选择网站图像保存位置，如图1-27所示。单击“保存”按钮，完成站点设置。5.管理站点在DreamweaverCC选择窗口中选择“站点”菜单下的“管理站点”命令，即可打开“管理站点”对话框，如图1-28所示。用户可以完成如下任务：(1)单击

按钮，可删除当前选中的站点。(2)单击

按钮，可编辑当前选中的站点。(3)单击

按钮，可复制当前选定的站点。(4)单击

按钮，可导出选中的站点。(5)单击“导入站点”命令，可导入站点。(6)单击“新建站点”命令，可创建站点。6.创建主页在“手机报价”站点中创建一个主页，主页名为default.html。内容为“这是我的第一个网页”。创建步骤如下：(1)启动DreamweaverCC。(2)选择“站点”菜单下的“新建站点”命令，设置站点文件夹指向“D:\sjbj”，然后单击“保存”按钮。(3)单击“新建”列中的“HTML”选项，进入网页编辑窗口，切换到设计选项，如图1-29所示。(4)在设计窗口中输入“这是我的第一个网页”，按“Ctrl+S”键保存，输入文件名“defult.html”。(5)运行代码。任务1-4安装Web服务器Web服务器除了用来存储和管理用户可访问的网站信息外，还负责管理并控制安装在其上的站点和组件信息。目前，相应的Web服务器软件是针对某一种操作系统进行优化的，有的甚至只能运行在某一种操作系统上，在选择Web服务器软件时必须与操作系统平台一起考虑。1. Web服务器软件的主要性能在选择Web服务器软件时，通常应考虑7个方面的性能。1)响应能力Web服务器的响应能力主要是指Web服务器对客户端浏览器请求的响应速度。响应速度越快，意味着Web服务器对用户单击的响应也越快，也就是说单位时间内可支持的用户访问量也就越大。2)与其他服务器的集成能力Web服务器除了向用户提供Web信息外，通常还承担着与DNS服务器、FTP服务器、E-mail服务器、数据库服务器等其他各种服务器的协同工作。客户端只需通过浏览器这种统一的界面来访问其他所有网站服务器中的信息即可。3)支持Web应用开发的能力开发Web程序，离不开Web服务器的支持。服务器软件支持Web应用程序开发的能力和难易程度是必须考虑的重要性能。4)管理能力Web服务器软件的管理能力主要表现在对客户端用户的管理能力以及对其自身的管理能力和方便程度，同时体现在是否能够通过Web进行远程网络管理等。5)与硬件平台和操作系统的协调能力在选择Web服务器软件时，要考虑Web服务器软件与操作系统平台、Web应用开发软件和一些中间件协同工作的能力。6)稳定性与可靠性Web服务器运行的稳定性与工作的可靠性除了有硬件的因素外，还必须考虑Web服务器软件的因素，如服务器出现软件故障的概率和排除故障的措施、速度和难易程度等。任何不稳定或不可靠因素都将对网站的声誉和效益产生严重的负面影响。7)安全性能在不考虑硬件和人为因素的情况下，Web服务器的安全性在很大程度上与其Web服务器软件有关，主要应从两个方面进行考虑：一是Web服务器中的机密信息是否会被泄露和如何防止泄露；二是是否有防止黑客攻击的相应策略。2.常用的Web服务器软件目前应用比较广泛的Web服务器软件有Microsoft(微软)公司的IIS和Apache等。1) IISIIS(InternetInformationServices，互联网信息服务)是由Microsoft公司提供的基于运行MicrosoftWindows的互联网基本服务，是在WindowsNTServer上建立Internet服务器的基本组件。它与WindowsNTServer完全集成，允许使用WindowsNTServer内置的安全性以及NTFS文件系统建立强大灵活的Internet/Intranet站点。IIS是一种Web服务组件，其中包括Web服务器、FTP(FileTransferProtocol，文件传输协议)服务器、NNTP(NetworkNewsTransferProtocol，网络新闻传输协议)服务器和SMTP(SimpleMailTransferProtocol，简单邮件传输协议)服务器，分别用于网页浏览、文件传输、新闻服务和邮件发送等方面，它使得在网络(包括互联网和局域网)上发布信息成了一件很容易的事。2) ApacheApacheHTTP

Server(简称Apache)是Apache软件基金会的一个开放源码的网页服务器，可以在大多数计算机操作系统中运行，其多平台和安全性被广泛使用，是最流行的Web服务器端软件之一。它快速、可靠并且可通过简单的API(ApplicationProgrammingInterface，应用程序库接口)扩展，将Perl/Python等解释器编译到服务器中。

Apache

HTTP服务器是一个模块化的服务器，源于NCSAhttpd服务器，经过多次改进，成为世界使用排名第一的Web服务器软件。Apache可以运行在几乎所有广泛使用的计算机平台上。3)其他Web服务器软件除了以上两种广为应用的Web服务器软件之外，还有一些各有特点的优秀Web服务器软件，如Netscape公司的EnterpriseServer、Novell公司的NetWareWebServer、Oracle公司的WebServer和IBM公司的WebSphere等。3. Web站点的设置和管理Web站点的设置是在“Internet信息服务(IIS)管理器”中完成的。(1)打开“管理工具”窗口，如图1-38所示。(2)双击“Internet信息服务(IIS)管理器”选项，打开“Internet信息服务(IIS)管理器”窗口。在左窗格中展开节点，如图1-39所示。(3)鼠标右击左窗格中的“网站”节点，从弹出的快捷菜单中选择“添加网站”命令，打开“添加网站”对话框。在“网站名称”文本框中输入“网页设计与制作”，在“物理路径”文本框中输入“B:\wysj”，在“IP地址”下拉列表中选择IP地址“00”，如图1-40所示。(4)单击“确定”按钮，关闭“添加网站”对话框。(5)在“Internet信息服务(IIS)管理器”窗口的左窗格展开“网站”节点，并单击“网页设计与制作”节点，进入“网页设计与制作主页”窗口，如图1-41所示。(6)双击“默认文档”图标，打开“添加默认文档”对话框，在“名称”框中输入默认文档名称。(7)单击“确定”按钮，返回“默认文档”对话框。若默认文档不是处于第1个，则可以将其调至第1个，如图1-43所示。(8)在浏览器的地址栏中输入地址“”并回车，显示如图1-44所示的效果。任务2-1认识HTML标签

任务2-2使用文本控制标签

任务2-3使用图像标签

任务2-4使用列表标签

任务2-5使用超链接标签任务2-1认识HTML标签1.认识HTML文件的基本结构HTML文件的语法结构十分简单，其基本结构如下：从上面给出的HTML结构可以看出，HTML文档包括以下3个主要标记：(1)文档标记<html>…</html>：标示HTML文档的开头和结尾。它是一个根标记，告知浏览器其自身是一个HTML文档。(2)头部标记<head>…</head>：用来定义整个文档的属性和文档的标题，这部分的标题信息在浏览器的窗口中显示出来，可以包括标题(<title>)、头元素(<meta>)、代码(<script>)等。(3)主体标记<body>…</body>：<body>与</body>之间的部分，是文档的主要部分，在浏览器中显示的内容和显示内容的格式标记都放在这里，如文字、图像、动画、表格等。在编写HTML代码时，必须遵守以下规范：(1)所有标记都必须有一个相应的结束标记。(2)所有标记和属性的名称都必须小写。(3)所有标记都必须合理嵌套。(4)所有属性值必须用双引号括起来。(5)把<、>和&等符号用编码表示。(6)所有属性都要赋一个值。(7)注释标记<!--注释内容-->2.认识标签在HTML页面中，带有“<>”符号的元素被称为HTML标签，如上面<body>、<title>都是HTML标签，也称HTML标记或HTML元素，本书称为标签。1)标签的分类根据标签组成的特点，HTML标签可分为双标签和单标签两类。(1)双标签。双标签由开始和结束两个标签组成，其基本语法格式如下：<标签名>内容</标签名>(2)单标签。单标签是指用一个标签符号就能完整地描述某个功能的标签。其基本语法格式如下：<标签名/>2)标签的关系一个网页中会存在多种标签，各标签之间具有一定的关系。根据标签的位置，标签的关系主要有嵌套关系和并列关系两种。图2-1所示是HTML的结构，其中就包含了这两种关系。(1)嵌套关系。嵌套关系就是平常所说的包含关系，即在一个双标签里包含其他的标签。(2)并列关系。并列关系也称兄弟关系，就是两个标签处于同一级别，并且没有包含关系。3)注释HTML中有两种注释方法：(1) <!--注释内容-->：常用于注释一段内容。(2) <!注释内容>：常用于说明标签里的内容。注释内容只为阅读者提供阅读代码的方便，在浏览器窗口中不显示。通常，标签包括以下5种：(1)声明文档类型标签。!doctype声明位于HTML文档的最前面，在<html>标签之前，用于告知浏览器文档使用哪种HTML或XHTML规范。(2) html标签。html标签用于表示HTML文件的开始与结束。Web页面所有内容都位于这两个标签之间。(3) head标签。<head>标签又称首部标签符，位于Web页的开头。Head标签用于描述HTML文档本身的信息，如网页标题、关键字等，但不包括Web页的任何实际内容。除了网页标题在浏览器的标题栏显示外，其他一般不会显示在浏览器中。(4) title标签。<title>标签用来说明网页的主题或用途，显示在浏览器的标题栏。(5) meta标签。meta标签不显示在页面中，一般用来定义页面信息、关键字、刷新等。meta不需设置结束标记。通常使用<metacharset="utf-8">格式，表示meta标签定义网页中所使用的字符集为utf-8。任务2-2使用文本控制标签1.页面格式化标签1)标题标签HTML提供了6个等级的标题标签，即<h1>、<h2>、<h3>、<h4>、<h5>和<h6>，从<h1>到<h6>标题的重要性依次递减。其格式如下：<hn>标题文本</hn>n取1～6间的值。若想让标题文字呈对齐(左对齐、居中对齐、右对齐)方式，可在标签里设置align属性来实现，其格式如下：<hnalign="对齐方式">标题文本</hn>说明：“对齐方式”的取值如下：(1) left：设置标题文字左对齐(默认值)。(2) right：设置标题文字右对齐。(3) center：设置标题文字居中对齐。2)段落标签在网页中使用<p>标签来定义段落。<p>标签是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。<p>标签的格式如下：<palign="对齐方式">段落文本</p>3)水平线标签在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过<hr/>标签来定义。<hr/>是一个单标签，其定义格式如下：<hr属性="属性值"/><hr/>常用的属性如表2-1所示。4)换行标签在Word中，按“Enter”键可以将一段文字换行显示，但在网页中，如果想要将某段文本强制换行显示，就需要使用换行标签<br/>。在Dw设计窗口，可按“shift+Enter”键换行。2.文本样式标签文本样式标签<font>用来控制网页中文本的效果(如字体、字号和颜色等)，让网页中的文字样式变得更加丰富。文本样式标签的基本语法格式如下：<font属性="属性值">文本内容</font><font>标签中常用的属性如表2-2所示。3.文本格式化标签网页中经常需要为文字设置粗体、斜体或下画线等一些特殊的文本效果，此时可以使用HTML提供的文本格式化标签实现文字的特殊显示。常用的文本格式化标签如表2-3所示。4.文本语义标签在HTML中，文本语义标签有很多，这里列举mark和cite标签，并简要介绍其应用。1) mark标签mark标签的主要功能是在文本中让某些字符高亮显示，该元素的用法与em标签和strong标签有相似之处，但mark标签在突出显示样式时更随意、灵活。2) cite标签cite标签可以创建一个引用，用于对文档引用参考文献的说明，一旦在文档中使用了该标签，被标注的文档内容将以斜体的样式展示在页面中，以区别于段落中的其他字符。5.特殊字符标签网页中有些字符是不能直接输入的，为此HTML为这些字符提供了专门的替代代码，如表2-4所示。任务2-3使用图像标签1.认识常见的图像格式网页中通常使用以下几种文件格式。1) JPEG文件格式JPEG(JointPhotographicExpertsGroup)图像格式常用于全彩图像，在Web中常见。它是将原始的图像压缩后的格式，其压缩比较大，在图像打开时自动解压缩。JPEG格式支持CMYK、RGB和灰度颜色模式，但不支持Alpha通道。与GIF格式不同，JPEG保留RGB图像中的所有颜色信息，只是有选择地扔掉数据来压缩文件大小。2) GIF文件格式GIF(GraphicsInterchangeFormat)图像格式是一种图像交换格式，仅支持256色，常用于Web图像。GIF又细分为两种格式即87a和89a，其中89a可存储动画和透明背景效果。3) PNG文件格式PNG(PortableNetworkGraphics)图像格式使用的是无丢失压缩方式，支持24位图像，能生成透明的背景，是网络上的一种新生文件格式。它的最大特点是将JPEG和GIF两种格式的优点很好地结合在一起使用。4) TIFF文件格式TIFF(Tagged-imageFileFormat)是扫描仪常用的格式，支持跨平台的软件应用。TIFF文档的文件最大可达4 GB。TIFF格式支持具有Alpha通道的CMYK、RGB、Lab、索引颜色和灰度图像，并支持无Alpha通道的位图模式图像。5) SWF文件格式SWF(ShockWaveFlash)文件格式是基于矢量图像的文件格式，它用于创建适合Web的可缩放的小型图像。因为文件格式基于矢量，所以在任何分辨率下图像都可以保持图像品质，特别适用于动画帧的创建。6) SVG文件格式SVG(ScalableVectorGraphics)是将图像描述为形状、路径、文本和滤镜效果的矢量格式。生成的文件很紧凑，在Web上可以设计激动人心的、高分辨率的Web图像页面，甚至在资源十分有限的手持设备中都可提供高品质的图像。2.图像的路径若网页中有图像，则浏览器在渲染时需要知道图像的位置即图像的路径。如果不知道路径，就不能够正确显示图像。因此，在网页中插入图像，就需要采用“路径”的方式来指定图像文件的位置。通过设置“路径”来帮助浏览器找到图像文件。路径有绝对路径和相对路径。1)绝对路径绝对路径一般是指带有盘符的路径，或完整的网络地址。2)相对路径相对路径不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。相对路径的设置通常有以下3种形式：(1)图像文件和html文件位于同一文件夹。只需输入图像文件的名称即可。(2)图像文件位于HTML文件的下一级文件夹。输入文件夹名和文件名，之间用“/”隔开。(3)图像文件位于HTML文件的上一级文件夹。在文件名之前加入“../”，如果是上两级，则需要使用“../../”，以此类推。3.图像标签<img/>在网页中使用<img>标签显示图像。图像标签的基本语法格式如下：<imgsrc="图像URL"/><img/>标签的属性如表2-5所示。下面介绍<img>标签的属性。1)图像的替换文本属性alt当页面中的图像无法正常显示时，我们可以使用alt属性告知用户原因。2)鼠标悬停在图像上时显示的内容属性title<img/>标签的title属性用来设置当鼠标悬停在图像上时显示文本信息。3)图像的宽度width和高度height属性通过width和height属性可以设置图像的宽度和高度。若只设一个属性，则另一个按等比缩放。如果不设置图像的width和height属性，则图像按照原始尺寸显示。4)图像的边框属性border默认情况下图像是没有边框的，可以使用border属性为图像加边框，犹如给真实的画装裱。5)图像的边距属性vspace和hspaceHTML中通过vspace和hspace属性分别调整图像的

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

最新文档

评论

0/150

提交评论