网页设计与制作 课件全套 （向隅）项目1-6 网页制作基础知识- 使用表单_第1页
网页设计与制作 课件全套 （向隅）项目1-6 网页制作基础知识- 使用表单_第2页
网页设计与制作 课件全套 （向隅）项目1-6 网页制作基础知识- 使用表单_第3页
网页设计与制作 课件全套 （向隅）项目1-6 网页制作基础知识- 使用表单_第4页
网页设计与制作 课件全套 （向隅）项目1-6 网页制作基础知识- 使用表单_第5页
已阅读5页，还剩161页未读， 继续免费阅读

下载本文档

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

文档简介

任务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属性分别调整图像的垂直边距和水平边距。6)图像的对齐属性align图文混排是网页中常见的排版方式，默认情况下图文按上下关系。要实现图文混排，可使用对齐属性align。align的取值分别为left(左对齐)和right(右对齐)。任务2-4使用列表标签列表的主要用途是简单明了地罗列各项内容之间的层次关系，为访问者阅读网页提供方便。HTML为用户提供了无序列表、有序列表和定义列表3种形式。1.无序列表无序列表是网页中最常用的列表，其各个列表项之间没有顺序级别之分，通常是并列的。定义无序列表的基本语法格式如下：其中：(1) <ul></ul>标签用于定义无序列表。(2)每对<ul></ul>中至少应包含一对<li></li>。(3) <ul>和<li>都拥有type属性，用于指定列表项目符号。无序列表的type属性值如表2-6所示。不赞成使用无序列表的type属性，一般通过CSS样式属性替代。<li>与</li>之间相当于一个容器，可以容纳所有的元素。但是<ul></ul>中只能嵌套<li></li>，不允许直接在<ul></ul>标签中输入文字。2.有序列表有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列。网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。定义有序列表的基本语法格式如下：其中：(1) <ol></ol>标签用于定义有序列表。(2) <li></li>标签用于描述具体的列表项。(3)每对<ol></ol>中至少应包含一对<li></li>。有序列表中，除了type属性之外，还可以为<ol>定义start属性、为<li>定义value属性。有序列表的相关属性如表2-7所示。注意：(1)各浏览器对有序列表的type和value属性的解析不同。(2)不赞成使用<ol>、<li>的type、start和value属性，一般通过CSS样式属性替代。3.定义列表定义列表用于对术语或名词进行解释和描述。与无序和有序列表不同，定义列表的列表项前没有任何项目符号。下面介绍列表的嵌套应用。在使用列表时，列表项中也有可能包含若干子列表项。这种在列表项中定义子列表项的方法被称为列表的嵌套。列表嵌套的方法十分简单，我们只需将子列表嵌套在上一级列表项中即可。下面给出一个有序列表嵌套一个无序列表的格式。任务2-5使用超链接标签1.超链接在HTML中创建超链接非常简单，只需用<a></a>标签环绕需要被链接的对象即可。其语法格式如下：<ahref="跳转目标"target="目标窗口的弹出方式">文本或图像</a>其中：(1) href：用于指定链接目标的URL地址，当为<a>标签应用href属性时，它就具有了超链接的功能。(2) target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，意为在原窗口中打开，_blank为在新窗口中打开。需要注意的是：(1)暂时没有确定链接目标时，通常将<a>标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。(2)不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。(3)当给图像添加超链接时，图像会自动加上边框，通常需要清除超链接图像的边框。2.锚点链接在网页内容较多时，浏览器为用户浏览内容的方便，在其窗口自动添加滚动条供用户使用。但为了提高信息的检索速度，HTML语言提供了一种特殊的链接——锚点链接。通过创建锚点链接，用户能够直接跳到指定位置的内容。创建锚点链接分为两步：(1)使用“<ahref="#id名">链接文本</a>”创建链接文本。(2)使用相应的id名标注跳转目标的位置。任务3-1认识表格

任务3-2设置表格和单元格的属性

任务3-1认识表格1.表格的基本构成表格是网页设计制作中不可缺少的元素，它可以将各类网页元素有序地显示在页面上。表格由3个基本部件构成：(1)行：水平空间。(2)列：垂直空间。(3)单元格：行列相交处的空间。整张表格的边缘成为边框，单元格中的内容和边框之间的距离称为单元格边距(CellPad)，单元格和单元格之间的距离称为单元格间距(CellSpace)，如图3-1所示。2.创建和选择表格1)创建表格插入表格的位置必须是从一个新行开始，且表格独占一行。Dw中创建表格的步骤如下：(1)将光标置于要插入表格的位置，选择“插入”菜单中的“表格”选项或在“插入”面板的“常用”选项卡中单击“表格”按钮，打开“表格”对话框，根据需求设置表格初始属性，如图3-2所示。(2)单击“确定”按钮即可将表格插入页面，可输入表格内容，文字、图片。表格建立好后就可以向表格内添加元素了，如图像、文字和表格等，方法如同在Word文档中操作一样，添加文本，表格会随着增多而自动增高。在单元格中添加图像时，如果单元格的尺寸小于图像的尺寸，单元格会自动增高或增宽。在单元格中插入表格时，单元格中的表格叫作内嵌式表格。内嵌式表格中的单元格可以再拆分成多行或多列，并且可以无限制地插入，不过内嵌的表格越多，浏览器下载时间越长，所以内嵌表格最好不要超过三层。2)选取表格对表格进行编辑前，需要先选择表格。选择整个表格的方法：将鼠标光标移动到表格的任意边框上，当光标变成双向箭头形状时，单击鼠标左键，即可选择整个表格，如图3-4所示。3)选取行或列在选择表格时，可以通过鼠标直接选择表格的某一行或某一列，也可以同时选择多行或多列。(1)选择表格的一行。移动光标到表格的某一行左边框处，当鼠标光标变成向右的黑箭头时，单击鼠标即可选择该行，如图3-5所示。(2)选择表格的一列。移动光标到表格的某一列上边框处，当鼠标光标变成向下的黑箭头时，单击鼠标即可选择该列，如图3-6所示。若要选择多行或多列，可以配合“Ctrl”键和“Shift”键使用。4)选取单元格在选取单元格时，可以选择单个单元格，也可以选择一个单元格、单元格区域或不相邻的多个单元格。当某个单元格被选时，该单元格周围会出现黑色边框。单击表格中的某个单元格，按住鼠标左键从当前单元格上方开始向要连续选择单元格的方向拖动鼠标选择单元格，释放鼠标后，完成某个区域的单元格选取，如图3-7所示。在选择单元格前按住“Ctrl”键，然后单击需要选择的单元格，最后释放“Ctrl”键可选择多个不相邻的单元格，如图3-8所示。任务3-2设置表格和单元格的属性创建表格后，需要对表格元素进行一系列的操作，最常用的就是设置它的属性。1.设置表格属性在网页中加入表格后，可以对表格的布局、样式等进行详细的设置，以使表格中的布局可以精确地达到要求。选定整个表格后，属性面板会变成表格属性面板，从选项中设置各个参数，如图3-9所示。2.设置单元格属性选定单元格后，属性面板会变成单元格属性面板，如图3-10所示。任务4-1认识CSS

任务4-2创建和使用CSS样式

任务4-3设置CSS样式属性

任务4-4认识CSS选择器任务4-1认识CSSCSS非常灵活，既可以嵌入在HTML文档中，也可以是一个单独的外部文件，如果是独立的文件，则必须以.css为后缀名。1. CSS的优势(1)内容和样式分离，使网页设计更加明了、简洁。(2)弥补HTML对标签属性控制的不足。(3)可精确控制网页布局。(4)可提高网页效率，增强易用性和扩展性。(5)增强网页特效，提升用户体验。2. CSS的核心基础1) CSS样式规则使用CSS对网页进行修饰，首先要了解CSS样式规则。CSS样式语法格式如下：选择器{属性1:属性值1;属性2:属性值2;…;属性n:属性值n}其中，选择器可以是标签选择器、id选择器、类选择器和伪类选择器。选择器严格区分大小写，属性和属性值不区分大小写。属性和属性值以键值对的形式出现。2)引入CSS样式表使用CSS修饰网页，需要在HTML文档中引入CSS样式表，CSS提供了4种引入方式，分别是行内式、内嵌式、外链式和导入式。(1)行内式。行内式也被称为内嵌样式，是通过标签的style属性来设置标签的样式，其基本语法格式如下：<标签名style="属性1:属性值1;属性2:属性值2;...;属性n:属性值n">内容</标签名>上述语法中，style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。(2)内嵌式。内嵌样式是将CSS代码集中写在HTML文档的<head>头部标记中，并且用<style>标签定义。其基本语法格式如下：在上述语法中，<style>标签一般位于<head>标签中的<title>标签之后。(3)外链式。外链式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link/>标签将外部样式文件链接到HTML文档中。其语法格式如下：其中：① href：定义所链接外部样式表文件URL。② type：定义所链接文档的类型。③ rel：定义当前文档与被链接文档之间的关系。(4)导入式。导入式与外链式相同，都是针对外部样式表文件的，但它使用的是@import语句。其基本语法格式如下：该语法中，style样式标签内还可以存放其他的内嵌样式，但@import语句需要位于其他内嵌样式的上面。大多数网站都是采用外链式引入外部样式表，主要原因是它们的加载方式不同。当一个页面被加载时，外链式的样式会被同时加载，而导入式的样式需要等到页面全部下载完后才被加载，这样会造成不好的用户体验。3) CSS基础选择器要想将CSS样式应用于特定的HTML标签，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则被称为选择器。CSS中的基础选择器有标签选择器、类选择器、id选择器和通配符选择器。(1)标签选择器。标签选择器是指HTML标签名称作为选择器，其基本的语法规则如下：标签名{属性1:属性值1;属性2:属性值2;…;属性n:属性值n}所有的HTML标签名都可以作为标签选择器。标签选择器的最大优点是能快速为页面中同类型的标签统一样式，其缺点是不能设计差异化的样式。(2)类选择器。类选择器使用“.”(英文点号)进行标识，后面紧跟类名，而类名是与标签名不同的一串字符。其基本语法格式如下：.类名{属性1:属性值1;属性2:属性值2;…;属性n:属性值n}在HTML中，类名为class的属性值，大多数HTML元素都可以定义class属性。类选择器的优点是可以为元素对象定义单独的样式。注意：①类名的第一个字符不能使用数字，且严格区分大小写。②一般类名采用小写英文字符。(3) id选择器。id选择器使用“#”进行标识，后面紧跟id名，其id名不能为标签字符串。id选择器的语法格式如下：#id标签{属性1:属性值1;属性2:属性值2;…;属性n:属性值n}在HTML中，id名即为id的属性值，大多数HTML元素都可以定义id属性，元素的id名是唯一的，只能对应于文档中某一个具体的元素。(4)通配符选择器。通配符选择器用“*”号表示，它是所有选择器中使用范围最广的，能匹配页面中所有的元素，其基本语法格式如下：*{属性1:属性值1;属性2:属性值2;…;属性n:属性值n}任务4-2创建和使用CSS样式1.“CSS设计器”面板在DreamweaverCC中，可以通过“CSS设计器”面板来创建样式。CSS设计器是一个集成面板，支持可视化创建CSS文件、规则、集合属性以及媒体查询，如图4-3所示。1)源“源”组中列出了所有与文档有关的CSS样式表。在这个组中，可以创建CSS样式并将其附加到文档中，如图4-4所示。2) @媒体“@媒体”组用于列出“源”组中选中的规则的全部媒体查询，媒体查询可以向不同设备提供不同的样式。3)选择器“选择器”组用于列出“源”组中选择的规则的全部选择器，如果没有选择CSS样式或媒体查询，则此组将显示文档中的所有选择器，如图4-5所示。4)属性“属性”组可为指定的选择器设置属性，主要有布局、文本、边框、背景及其他属性，如图4-6所示。2.创建CSS样式选择器CSS样式选择器中包括标签选择器、类选择器和id选择器。1)标签选择器标签选择器是现有的HTML标签(或称标记)。用CSS控制这些标签，会改变标签的默认样式。其语法格式如下：标签名称{属性:属性值1;属性:属性值2;…}创建标签选择器的具体操作方法如下：(1)完成网页的内容架构。(2)单击“CSS设计器”面板中“源”组右侧的“+”按钮，在弹出的菜单中选择“创建新的CSS文件”，弹出“创建新的CSS文件”对话框。(3)在弹出的对话框中，在“文件/URL(F):”文本框中输入想要使用的CSS文件名，并可通过

按钮选择样式文件保存位置。此时会在“文档”窗口添加名为“style.css”选项卡，在“源代码”中添加链接<linkhref="CSS/style.css"rel="stylesheet"type="text/css">，如图4-8所示。(4)选择新建的“style.css”，在“选择器”组中单击右侧的“+”按钮添加选择器，选择器会自动添加当前光标所在位置的HTML标签，如图4-9所示。用户也可以自行修改需要使用的HTML标签。(5)在“属性”组中单击“Text(文本)”栏，为网页的正文添加所需要的样式，如图4-10所示，对h2标签选择器添加了“font-family”“text-decoration”等属性，分别设置了文字的字体、样式。对p标签选择器添加了“font-family”“font-size”和“text-indent”等属性，分别设置了文字的字体、字体大小和样式，如图4-11所示。(6)单击“文档”窗口的“style.css”选项卡，可以看到h2标签和p标签的CSS样式代码，如图4-12所示。(7)保存网页HTML文件和CSS样式文件，在浏览器中预览页面，即可查看整个网页的字体类型等发生改变。2)类选择器当希望某一个或某几个元素的外观与网页上的其他相关标签有所不同时，设计者就可以使用类选择器。类选择器可以应用到网页中任意的元素上，还能更精确地控制网页中的某一元素。很多时候在CSS中看到名称前以“.”开头，这个英文句点开关就表示CSS的类样式，类是可以被多次调用的。创建类选择器的具体操作方法如下：(1)与创建标签选择器相同，在创建类选择器之前，需要先设计网页内容，并在“CSS选择器”面板中创建或选择“源”组中对应的CSS文件。(2)在“选择器”组中单击“+”按钮添加选择器，在显示的文本框中输入“.one”文本，如图4-14所示。(3)在“属性”组中单击“文本”栏，为网页的正文添加所需要的样式，如图4-15所示，添加了“color”“font-weight”和“font-size”，设置了文字的颜色、字体粗细和字体大小。(4)在“文档”窗口选中想要应用该类的网页内容，右击鼠标，从弹出的菜单中选择“CSS样式”“one”菜单命令。(5)保存网页HTML文件和CSS样式文件，在浏览器中预览页面，即可查看整个网页的字体类型等发生改变。3) id选择器创建id选择器的具体操作方法如下：(1)与创建标签选择器、类选择器相同，在创建id选择器之前，需要先设计网页内容，并在“CSS选择器”面板中创建或选择“源”组中对应的CSS文件。(2)在“选择器”组中单击“+”按钮添加选择器，在显示的文本框中输入“#two”文本，如图4-17所示。(3)在“属性”组中单击“布局”栏和“文本”栏，为网页的正文添加所需要的样式，如图4-18所示，添加了“color”和“float”，设置了文字的颜色和文字的位置。(4)在“文档”窗口选中想要应用该类的网页内容，右击鼠标，从弹出的菜单中选择“CSS样式”“.one”菜单命令。(5)保存网页HTML文件和CSS样式文件，在浏览器中预览页面，即可查看整个网页的字体类型等发生改变。任务4-3设置CSS样式属性创建CSS样式表的过程，就是对各种CSS属性的设置过程，因此了解和掌握属性设置非常重要。在DreamweaverCC中，为了方便初学者学习CSS样式属性，提供了可视化操作，那就是“CSS设计器”面板上的属性组，该组中可以设置“布局”“文本”“边框”“背景”“其他”5种类型的属性。DreamweaverCC实现CSS属性设置功能是完全可视化的，无须编写代码。1.设置布局样式在“属性”组的“布局”栏中，可以设置页面元素在页面上的放置位置。在应用填充与边距设置时，将设置应用于元素的各条边上，同时可以应用定位来确定元素在页面上的相关位置，如图4-19为CSS面板的“布局”栏。定义样式设置可以控制页面上的元素布局。常用的属性如下：(1)“width”(宽度)和“height”(高度)：设置元素的尺寸大小，默认值为auto，可以使用px、cm等单位确定具体的宽度和高度。(2)“margin”(边界)：设置对象的外边距。(3)“padding”(填充)：设置对象的内容距四边的距离，即内边距，定义元素内容和边框之间的空间大小。(4)“float”(浮动)：移动元素并将其放置在页面边缘的左侧或右侧，其他环绕移动的元素则保持正常。该属性是实现div+CSS布局的关键。(5)“clear”(清除)：定义元素的哪一边不允许有层。如果层出现在被清除的那一边，则(设置了清除属性的)元素将移动到层的下面。“margin”和“padding”很重要，它们与盒模型有关系。2.设置文本样式在网页设计过程中，文本的CSS样式是使用最频繁的。在“属性”组的“文本”栏中，可以通过定义CSS样式来对文本样式进行设置，如图4-20所示。3.设置边框样式在“属性”组的“边框”栏中，能够设置网页标签4个边框的各种属性。“边框”分为样式(style)、宽度(width)、颜色(color)等，图4-21为CSS面板的“边框”栏。4.设置背景样式合理使用“背景”样式设置网页背景可以使网页更加美观。一般来说，背景颜色或背景图像颜色深时，文字颜色应该偏浅；背景颜色或背景图像颜色浅时，文字颜色应该偏深。这样设置的目的是容易阅读，如图4-22所示。常用的背景样式属性如下：1)背景图(1)“background-color”(背景颜色)：默认值为transparent，表示背景颜色为透明，也可以用RGB颜色值、十六进制颜色值和颜色名称作为属性值。(2)“background-image”(背景图)：设置要用的背景图像，需要指定背景图的路径。(3)“background-position”(背景位置)：设置背景图像的位置。(4)“background-repeat”(重复方式)：设置背景图像是否平铺，其值有repeat(默认值，表示纵向和横向平铺)、no-repeat(不平铺)、repeat-x(仅横向平铺)、repeat-y(仅纵向平铺)。(5)“background-attachment”(滚动方式)：设置背景图像是否固定或随着页面的其余部分滚动，取值scroll(默认值，随内容滚动)和fixed(固定不滚动)。2)相框阴影(1)“box-shadow”(相框阴影)：为相框添加一个或多个阴影。(2)“h-shadow”(水平阴影)：设置水平阴影。(3)“v-shadow”(垂直阴影)：设置垂直阴影。(4)“blur”(模糊)：设置模糊的距离。(5)“spread”(扩展)：改变阴影的尺寸。(6)“color”(阴影的颜色)：设置阴影的颜色。(7)“inset”(向内)：将外部阴影改为内部阴影。5.设置其他样式“属性”组的“其他”栏，主要是对列表样式表进行设置，它可以设置出非常丰富的列表样式，如图4-23所示。任务4-4认识CSS选择器1.关系选择器关系选择器可以更精确地控制元素样式。CSS中的关系选择器主要包括子元素选择器和兄弟选择器，其中子元素选择器由符号“>”连接，兄弟选择器由符号“+”和“~”连接。1)子元素选择器子元素选择器主要用来选择某个元素的第一级子元素，即只能选择作为某元素子元素的元素。其格式如下：标签>标签1{}标签1为标签的子元素，标签包含标签1。2)兄弟选择器兄弟选择器是用来选择与某元素位于同一个父元素之中，且位于该元素之后的兄弟元素。兄弟元素选择器分为相邻兄弟选择器和普通兄弟选择器两种。(1)相邻兄弟选择器。相邻近兄弟选择器使用“+”来连接前后两个选择器。选择器中的两个元素有同一个父元素，且第2个元素必须紧跟第1个元素。(2)普通兄弟选择器。普通兄弟选择器使用“~”来连接前后两个选择器。选择器中的两个元素有同一个父亲且第2个元素不必紧跟第1个元素。2.结构化伪类选择器结构化伪类选择器允许开发者根据文档结构来指定元素的样式。CSS3中增加了许多新的结构化伪类选择器，方便网页设计者精准地控制元素样式。常用的结构化伪类选择器有以下6类。1) :root选择器:root选择器用于匹配文档根标签，在HTML中，根标签始终是html标签，即使用“:root选择器”定义的样式，对所有页面标签有效。对于不需要该样式的标签，可以单独设置样式进行覆盖。2) :not选择器如果对某个结构标签使用样式，而又想排除这个结构标签下面的子结构标签，让它不使用这个样式，则可以使用:not选择器。3) :only-child选择器:only-child选择器用于匹配属于某父标签的唯一子标签的标签，也就是说，如果某个父标签仅有一个子标签，则使用“:only-child选择器”可以选择这个子标签。4) :first-child选择器和:last-child选择器:first-child选择器和:last-child选择器分别用于为父标签中的第一个或者最后一个子标签设置样式。5) :nth-child(n)和:nth-last-child(n)选择器使用:first-child选择器和:last-child选择器可以选择某个父元素中第一个或最后一个子元素，但是如果用户想要选择第2个或倒数第2个子元素，这两个选择器就不起作用了。为此，CSS3引入了:nth-child(n)和:nth-last-child(n)选择器，它们是:first-child选择器和:last-child选择器的扩展。6) :nth-of-type(n)和:nth-last-of-type(n)选择器:nth-of-type(n)和:nth-last-of-type(n)选择器用于匹配属于父元素的特定类型的第n个子元素和倒数第n个子元素。3.伪元素选择器所谓伪元素选择器，是针对CSS中已经定义好的伪元素使用的选择器。CSS中常用的伪元素选择器有  :before选择器和 :after选择器。1) :before选择器:before选择器用于在被选元素的内容前面插入内容，必须配合content属性来指定要插入的具体内容。其格式为：2) :after选择器:after选择器用于在某个元素之后插入一些内容，使用方法与:before选择器相同。任务5-1布局概述

任务5-2布局常用属性

任务5-3布局类型任务5-1布局概述网页布局是指网页上的各种元素，如文字、图片、视频、按钮等的展示和组织方式。网页布局的目的是使页面的内容更易于理解和浏览，同时增强网站的视觉吸引力。div + CSS是Web的一种标准，也是一种网页的布局方法。div + CSS布局是采用<div>标签配合CSS实现对网页标签定位的一种布局方法。此种定位方式不同于传统的表格(table)布局定位方式，它可真正实现网页内容与表现相分离的效果。这里div为division的缩写，意思为划分，也可以称为层或区块。通过合理的网页布局设计，可以让页面内容更加有序、整洁，并且使用户更容易找到自己需要的信息。div + CSS布局的主要优点如下：(1)网页和表现内容分离，便于站点重构页面。(2)结构清晰，对搜索引擎更加友好。(3)便于Web项目开发分工协作。1. div标签<div>标签常用于对块进行标记，以便通过样式表来对<div>标签标记块进行格式化。<div>标签可以把文档分割为独立的、不同的部分。如果用id或class来标记<div>标签，那么该标签的作用会变得更加明显。1) <div>标签的基本语法<div>标签的基本语法格式如下： <div

id="id选择符">文字或图像</div>或 <divclass="类选择符">文字或图像</div>2) <div>标签的常用属性<div>标签的常用属性如下：(1) position属性：表示层的定位方式。(2) left和top属性：定义层的位置，与之并列的还有right和bottom属性，这4个属性用来设置层的位置。(3) width和height属性：定义层的宽度和高度。(4) float属性：定义层的浮动方式。(5) clear属性：定义清除属性，表示层是否允许在某个元素的周围有浮动元素，即是否去掉某个位置的浮动元素。(6) z-index属性：设置区域的上下层关系，相当于三维空间的z坐标，z-index属性值越大，其位置就越高。表5-1为<div>标签的属性及说明。2. span标签<span>标签与<div>标签一样也是一个容器元素，被广泛运用在网页制作中。<span>标签用来组合文档中的行内元素。<span>元素是一个内联元素，它包围的元素不会自动换行。<span>标签没有固定的格式表现，当对它应用样式时，它才会产生视觉上的变化。<span>标签的基本语法如下：<span

id="指定样式名称">文本</span>3.使用div+CSS布局的流程为了提高网页制作的效率，布局时通常要遵循一定的布局流程，使用div+CSS布局的具体流程如下：(1)确定页面的版心宽度。版心是指浏览器内显示内容的有效面积，显示内容在浏览器窗口中一般是居中显示的。浏览器显示内容的最大面积是由显示器的分辨率决定的。目前显示器的分辨率大多在1024 × 768px(像素)以上，可设置版心宽度1000px。在设计网站时应尽量适配主流的屏幕分辨率。常见网页的宽度值为960px、980px、1000px和1200px等。(2)分析页面中的模块。在运用CSS布局之前，首先要对页面有一个整体的规划，用笔画出页面的草图，页面中包括的模块及模块间的关系。(3)控制网页的各个模块。当分析完页面的布局后，就可以运用盒子模型的原理，通过div + CSS布局来控制网页的各个模块了。初学者在制作网页时，一定要养成分析页面布局的习惯，这样可以提高网页制作的效率。任务5-2布局常用属性div + CSS布局通常有3种方式，分别是静态布局、浮动布局和定位布局。1.静态布局静态布局，其特点是将网页中各种布局标签按照其在HTML代码中的顺序从上而下依次显示。块级元素生成的是一个矩形框，它按照在文档中出现的位置正常定位显示，没有偏移量。在静态布局的网页中，用户无须设置网页各种布局标签的边距属性。例如，一个典型的HTML文档，其<body>标签中的内容通常由头部(header)、导航栏(nav)、内容(content)和页尾(footer)4个部分组成，使用<div>标签建立这4个部分所在的层，代码如下：<divclass="header1">网页的头部标签，通常包括网页的Logo、Banner和搜索框等</div><divclass="nav1">网页的导航条标签，完成站点导航的超链接。</div><divclass="content1">网页的内容标签，主要包括网站的各种版块栏目</div><divclass="footer1">网页的页尾标签，主要包含网页的版权信息及友好链接等内容</div>4个部分及<body>的样式代码如下：静态布局的显示效果如图5-6所示。静态布局的优点是结构简单，与各浏览器兼容性好，缺点是无法实现左右分栏的样式效果。2.浮动布局浮动布局的作用是，定义网页布局标签脱离网页的流动布局结构后显示的方向。在网页设计中，浮动布局可应用于多个方面，如实现文本环绕图像或实现浮动的块状标签布局。它是目前最主要的布局方法。为元素设置浮动，可以使页面元素变得整齐有序。1)认识浮动浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程。定义浮动的基本语法格式如下：选择器{float:属性值;}float常用的属性值有3个，如表5-2所示。2)清除浮动运用clear属性清除浮动。其基本语法格式为：选择器{clear:属性值;}clear的常用属性值有3个，如表5-3所示。运用clear属性只能清除元素左右两侧浮动的影响。然而在制作网页时，经常会遇到一些特殊的浮动影响。3.定位布局在CSS中，使用定位属性可以实现网页中元素的精确定位。元素的定位属性主要包括定位模式和边偏移两部分。1)定位模式position属性用于定义元素的定位模式，其基本语法格式如下：选择器{position:属性值；

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

温馨提示

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

最新文档

评论

0/150

提交评论