第六章 网页设计基础

第六章网页设计基础人民邮电出版社主编贾昌传计算机应用基础6.1网页制作基础知识6.1网页制作基础知识6.2HTML简介6.3AdobeDreamweaverCS4基础6.1网页制作基础知识6.1.1基本概念1、，即WorldWideWeb，中文译作万维网，是为解决网络中的信息传递问题而建立的，在诞生之前，网络中的信息传递大多采用E-mail、FTP、Archie和Gopher来实现，这些传递方式采用的协议大多无法兼容，难以实现互联网中信息的有效检索。由于这些限制，开发一种能够独立于各种平台并方便用户获取信息的技术手段，已经成为互联网发展过程中的迫切需要。1984年，欧洲量子物理实验室（CERN）为了使分散在欧洲各国的物理学家能够通过网络合作，分享各自实验室的研究成果，委托蒂姆·伯纳斯·李利用超文本技术开发了一个网络应用软件，这就是浏览器的雏形。在此基础上，又开发出了超文本标记语言（HTML）和超文本传输协议（HTTP），用户可以远程利用浏览器软件进入服务器进行信息查询等操作，这标志着万维网的诞生。随后，万维网联盟（W3C）成立，迅速在世界范围内开始推广，现已成为互联网中最重要的应用之一。2、网页与网站所谓网站，是指在互联网中提供多种服务的信息平台，由域名和站点空间构成。网站可以提供网页服务、数据传输服务、邮件服务和数据库服务等多种服务内容，其中网页服务是指根据一定的规则，在互联网上进行特定内容展示的网页集合。网页通常由文本、图像、音视频文件、脚本程序等元素构成，网页需要通过浏览器进行阅读，通常使用超文本标记语言（HTML）作为网页的标准代码。HTML可以创建包含图像、声音、动画的格式化文本，即网页文件。在HTML的基础上，还诞生了一种衍生语言XML（可扩展标记语言），可以实现自定义标记，具有良好的扩展性，已成为新一代的网页标准规范。3、域名互联网中的计算机采用的身份标识是IP地址，但由于IP地址完全由数字构成，不便于记忆，为了解决这个问题，人们按照一定的规则对互联网中的计算机定义了字符形式的地址标记，这就是域名。在网络中，域名通常与IP地址是一一对应的。按照互联网中的组织模式，域名系统最早提出了六大分类，即.com（商业组织）、.edu（教育机构）、.gov（政府部门）、.mil（军事机构）、.net（网络相关组织）、.org（非营利性组织），并没有考虑到跨国家的范围。随着互联网在国际范围内的进一步发展，后期增设了以国家或地区为界限的域名系统，如.cn（中国）、.jp（日本）、.uk（英国）、.hk（香港）等等。6.1.2静态网页与动态网页1、静态网页静态网页并不是指网页中的元素静止，而是指纯粹的HTML格式的网页，它相对于动态网页而言，不包含后台数据库，不含程序，不可交互。网页的制作人员制作的页面就是用户最终浏览的页面，不会发生任何改动。静态网页较难进行更新，一般适用于展示型内容。静态网页执行过程静态网页响应、动态网页与静态网页一样，动态网页同样与动画、字幕等视觉上的运动效果没有关系。动态网页可以是纯文字的页面，也可以包含动画等运动效果，这都是内容的表现形式，无论页面的内容是否具有运动效果，只有采用了动态网页技术生成的页面才被称为动态网页。从浏览者的角度来看，动态页面与静态页面在浏览器中展示出的各种信息并没有太大不同，但从工作原理来看，两者存在着本质的差别。静态网页仅由HTML语言构成，而动态网页采用动态网页语言进行编写，如ASP、JSP、PHP等。动态网页支持数据库技术并可以实现浏览器端与服务器端的交互功能，能够为用户提供种类更多、功能更强的服务。动态网页执行过程静态网页数据库应用程序服务器动态网页查询记录集数据库驱动程序6.1.3网站运行方式1、实体主机由网站的所有者自行购买主机，建立独立的服务器，并自行维护的方式。2、主机托管网站所有者自行购买服务器主机，并将其放置在互联网服务供应商（ISP）所设立的机房，每月支付必要费用，由ISP代为管理维护，而客户从远端连线服务器进行操作的服务方式。3、虚拟主机虚拟主机是使用特殊的软硬件技术，把真实的物理服务器主机分割成多个的逻辑存储单元，即虚拟主机，虚拟主机没有物理实体，但是都能像真实的物理主机一样在网络上工作，具有单独的域名、IP地址(或共享的IP地址)以及完整的Internet服务器功能，网站所有者只需要租用这样一个虚拟单元就可以实现站点发布。在这三类方法中，这种方式成本最低、开销最小，广泛被个人用户所采用。6.2HTML简介HTML（HyperTextMark-upLanguage，超文本标记语言）是目前网络中应用最广泛的语言，也是构成网页文档的主要语言。它与常见的编程语言不同，是一种描述性的标记语言，用于描述超文本中内容的显示方式。HTML在文本文件的基础上，增加了一系列标记，用来描述颜色、字体、字号等信息，同时可以将声音、图像、动画插入页面中形成丰富多彩的网页文件，这也是它得到广泛普及的重要原因。6.2.1HTML基本语法HTML语法的基本形式为：标记内容/标记。其中的标记通常成对出现，有开始标记就有结束标记，结束标记的形式是开始标记加上斜杠“/”，一般来说，结束标记与开始标记配合使用，但在某些情况下也可以省略。6.2.2使用HTML创建简单网页平时我们所见到的大多数网页文件都是利用HTML生成的，所以网页文件又被称为HTML文件。从本质上来看，HTML文件仍然是文本文件，只是扩展名变成了“.htm”或“.html”，所以使用任何的文本编辑工具都可以创建、修改HTML文件。在这里我们以最基本的文本编辑软件——记事本为例，来创建第一个网页文件。6.2.3HTML文件结构1、html标记2、head标记3、title标记4、body标记6.2.4HTML网页实例例6.1设置背景色、体会标题样式的使用htmlheadtitle例1.1设置背景色、体会标题样式的使用/title/headbodybgcolor=red以下为标题样式：h1标题一/h1h2标题二/h2h3标题三/h3h4标题四/h4h5标题五/h5h6标题六/h6/body/html例6.2设置文字颜色htmlheadtitle例1.2设置文字颜色/title/headbodyfontcolor=purple紫色文字/font/body/html例6.3设置加粗、倾斜，设置背景图htmlheadtitle例1.3设置加粗、倾斜，设置背景图/title/headbodybackground=bg.jpgfontcolor=bluebi此处文字为蓝色粗斜体/i/b/font/body/html例6.4插入图片htmlheadtitle例1.4插入图片/title/headbodyimgsrc=pic.jpg在网页中插入图片，让网页丰富多彩！/body/html6.2.5查看网页源文件大多数浏览器都提供直接查看HTML代码的方法，这里以IE浏览器为例，选择菜单栏中的“查看”菜单项下的“源文件”命令即可看到该网页的源文件。6.3AdobeDreamweaver基础Dreamweaver是美国Adobe公司开发的集网页制作和站点管理于一身的所见即所得网页编辑器，它是针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的符合规范的网页。6.3.1认识DreamweaverCS4工作界面中各部分的功能如下所述：1、文档工作区是工作界面的主要区域，在窗口中部，它是进行网页编辑创作的主要区域，编排的结果与网页在浏览器中的效果近似，但仍有部分差异，这就是可视化设计工具的重要特性“所见即所得”。2、“插入”工具栏位于界面上方，主要作用在于插入各种对象，单击标签可以切换不同类型的插入对象，默认为“常用”栏，包括超级链接、图像、表格等。3、属性栏当选中某对象时，属性栏会实时显示相关信息和参数，并可以对其进行修改设置，其中的内容会随着选择对象的不同而变化。4、面板组针对其他不同的控制对象，还有诸如CSS样式、行为、框架等面板，它们都在面板组中集中显示，根据所面向的对象的不同发挥着特殊作用。6.3.2使用Dreamweaver创建简单网页1、添加文本2、插入图片3、创建超链接6.3.3创建站点1、定义站点2、添加文件和文件夹6.3.4页面布局网页布局主要采用两种方式：表格和CSS（层叠样式表）。其中，使用表格进行页面布局操作简单，易于实现，很受初学者欢迎，本书也采用这种方式进行页面的布局工作。利用表格布局的原理是，将整个网页看做一个大的表格，每个网页元素都放置在独立的单元格中，单元格的数量和大小可以根据网页内容进行调整。表格布局的步骤1、插入表格2、调整表格3、插入内容4、调整单元格、设置边框本章结束，谢谢！