单元1网页设计与制作综述









 




案例宏观展示引入
随着互联网的发展和普及，越来越多的企业与个人建立了网站，将互联网技术应用到生产、经营和娱乐等活动中。互联网已经深入千家万户，影响着各个领域，不断地改变着人们的生活方式。
互联网的各种应用都基于网站，网站是由各种网页组成的，网页可用于传递信息。网页是浏览器与网站开发人员沟通交流的窗口。淘宝网站和电子科技大学网站的主页，也是网站的首页，是网站中一个主要的网页，如图11所示。科学合理的网页设计可以使浏览者耳目一新，印象深刻。




图11网站主页





图11(续)


本单元主要介绍网页制作基础知识，让大家对网站和网页有整体的认识，为以后学习网页制作奠定基础。
学习任务
了解Internet基础知识。
掌握网页和网站的基本概念。
熟悉网页的基本组成元素。
理解网页设计的概念。
了解网站建设的基本流程。
初步认识Adobe Dreamweaver CS6网页制作工具。
学会创建、打开、编辑和关闭一个网页文档。
对网页设计与制作有整体的认识。

任务1.1认识Internet 






(1) 掌握万维网的概念。
(2) 认识浏览器。
(3) 理解IP地址及其配置。
(4) 了解域名系统和URL。

Internet译为因特网，也称为互联网，是指通过TCP/IP协议将世界各地的网络连接起来实现资源共享，并提供各种应用服务的全球性计算机网络。它是当今世界上最大、最流行的计算机网络，是信息社会的基础，是全球最大、最有影响的计算机信息资源网，在人类社会的各个领域中发挥重大的作用。
任务1.1.1认识万维网和浏览器
万维网(world wide Web，WWW)是Internet的主要部分，也可以简称为Web、3W等，它是基于“超文本”的信息查询和信息发布的系统。Web就是以Internet上众多的Web服务器所发布的相互链接的文档为基础组成的一个庞大的信息网，它不仅可以提供文本信息，还可以提供声音、图形、图像以及动画等多媒体信息，为用户提供了图形化的信息传播界面——网页。
超文本传输协议(hypertext transfer protocol,HTTP)是一种网络上传输数据的协议，专门用于传输万维网中的信息资源。
浏览器是指可以显示网页服务器或者文件系统的超文本标记语言(hyper text markup language，HTML)文件内容，并让用户与这些文件交互的一种软件。通过浏览器，可以快捷地浏览Internet上的信息资源。目前，使用人数较多的浏览器是Microsoft公司的IE(Internet Explorer)浏览器，计算机中安装了Windows操作系统都会捆绑安装IE浏览器。IE浏览器可以搜索、查看和下载Internet上的各种信息资源。另外，还有很多浏览器也非常优秀，可供用户安装使用，如谷歌浏览器(Google Chrome)、火狐(Firefox)浏览器、腾讯浏览器、Opera浏览器、360安全浏览器以及搜狗浏览器等。本书使用的是谷歌浏览器。




请谈谈你对万维网的认识，它有哪些特点？
任务1.1.2认识IP地址和Internet域名
与Internet相连的任何一台计算机(称为主机)都有唯一的一个网络地址，简称为IP(Internet protocol)地址。在Internet中，域名通过域名系统(domain name system，DNS)解析为IP地址，为站点访问浏览提供方便，也便于用户记忆站点。
1. IP地址
IP地址由32位二进制数组成。IP地址是在Internet网络中为每一台主机分配的唯一标识。例如，某台主机的IP地址是00001010 01000001 01010111 11011100，但是这样的IP地址很难记忆，为了便于阅读理解，通常把32位二进制数分成4个字节段，每个字节段8位，用小数点将它们隔开，把每一个字节段数都转换成相应的十进制数，称为点分十进制数。例如，上述主机的IP地址用点分十进制数表示为10.65.87.220。
IP地址通常分为A类、B类、C类、D类和E类。常用的IP地址有A类IP地址、B类IP地址和C类IP地址。D类和E类分别用于组播通信的地址和科学研究。IP地址是两级层次结构，包括网络地址和主机地址，如图12所示。



图12常用IP地址


其中，A类IP地址范围为1000~126255255255； B类IP地址范围为128255255255~191255255255； C类IP地址范围为192255255255~223255255255。
提示： 
(1) IP地址由32位二进制数组成，在Internet范围内必须合法而且是唯一的。
(2) IP地址的理论范围：  0.0.0.0~255.255.255.255。




请正确配置计算机IP地址。
2. 域名系统
由于IP地址是数字标识，使用时难以记忆，因此在IP地址的基础上又发展出一种符号化的地址方案，来代替数字型的IP地址。每一个符号化的地址都与特定的IP地址对应，这样网络上的资源访问起来就容易得多了。这个与网络上的数字型IP地址相对应的字符型地址，就称为域名。例如，承德石油高等专科学校域名为cdpc.edu.cn，Web服务器的IP地址210.31.208.1对应的域名为www.cdpc.edu.cn。 
因特网采用了层次树状结构的命名方法。任何一个连接到因特网上的主机或路由器，都有一个唯一的层次结构的名字，即域名。域名的结构由标号序列组成，各标号分别代表不同级别的域名，各标号之间用点隔开。



图13中国建设银行域名



主机名.....四级域名.三级域名.二级域名.顶级域名




例如，中国建设银行的域名组成如图13所示。
对于用户来说，使用域名比直接使用IP地址方便多了，但对于Internet内部数据传输来说，使用的还是IP地址，而不是域名。要想把域名转换为IP地址，就需要通过域名系统来解析。域名服务器实际上就是装有域名系统的主机，在其上面存有该组织所有上网计算机的域名及其对应的IP地址。当某个应用程序需要将域名翻译成IP地址时，这个应用程序就与域名服务器建立连接，将域名发送给域名服务器，域名服务器把解析的IP地址反馈给应用程序，应用程序就可以访问网络信息资源。
提示： 
申请到的域名在Internet范围内必须是唯一的，通过域名服务器把域名解析为IP地址的过程，称为域名解析。
任务1.1.3认识统一资源定位器
客户机与Web服务器的交互是通过HTTP来完成的，用户想要浏览服务器上的某一信息资源时，就是通过统一资源定位器(uniform resource locator，URL)来唯一指定的。URL是一个指定因特网或内联网服务器中目标位置的格式化字符串，与在计算机中根据指明的路径查找文件类似。它既可指向本地计算机硬盘上的某个文件，也可指向Internet上的某一个网页。也就是说，通过URL可访问Internet上任何一台主机或者主机上的文件和文件夹。
URL一般格式如下：  


<URL的访问方法>://<主机域名或IP地址>［:<端口号>］［/<路径>］［/<文档>］




其中，URL的访问方法指的是访问使用的协议，可以是HTTP、FTP等； 端口号，每种访问协议都有默认的端口号，通常省略。例如，通常访问网页文件采用的HTTP，默认端口号是80； 路径是文档在主机上的相对存储位置，一般用来表示主机上的一个目录或文件地址，是由零或多个“/”符号隔开的字符串， 文档是具体的网页文件，主机默认文档可以省略，否则，不可省略。例如： http://www.cdpc.edu.cn/index.html，其中index.html为默认文档，也称为主页(home page)。




请举例说明URL。
任务1.2认识网页和网站





(1) 认识和赏析网页布局。
(2) 理解网页的基本组成元素。
(3) 认识和赏析网站。
随着网络的快速发展，互联网上的网站越来越多。学习网页制作应先了解网页的基本概念，学好这些知识是制作出漂亮、美观的网页的前提，为以后的学习打好基础。
任务1.2.1网页的定义和分类的认识
上网时浏览的一个个页面就是网页(web page)，网页又称为Web页。图像、文字、超链接等是构成网页的基本元素，是Internet展示信息的一种形式。如图14所示为中关村在线网站的首页，承载着丰富的信息资源，通过浏览器的解析，内容才能被漂亮地展示出来。对于网站设计、制作者来说，Web网页是一系列技术的复合总称，包括网站的前台布局、后台程序、美工和数据开发等。



图14中关村在线网站的首页


1. 网页按位置分类
按网页在网站中的位置可将其分为主页和内页。
主页是指网站的主要导航页面，一般是进入网站时打开的第一个页面，也称为首页，通常首页的文件名为index.html或者default.html。
内页是指与主页相链接的页面，也就是网站的内部页面。
提示： 
一些网站的首页并非主页，其作用只是欢迎访问者或者引导访问者进入主页，所以首页并不一定就是主页。
2. 网页按表现形式分类
按网页的表现形式可将其分为静态网页和动态网页。
静态网页是指用HTML语言编写的网页，其制作方法简单易学，但缺乏灵活性，网页文件后缀名一般为.htm或html。
动态网页使用ASP(active server page，动态服务器页面)、PHP(Hypertext preprocessor，超文本预处理器)、JSP(Java server pages， Java服务器页面)和ASP.NET等程序生成，可以与浏览者进行交互，也称交互式网页，如收集浏览者填写的表单信息(用户名和密码等)，其制作较静态网页复杂。
注意： 
静态网页和动态网页不是以网页中是否包含动态元素来区分的，而是针对客户端与服务器端是否发生交互行为而言的。不发生交互的是静态网页，发生交互的是动态网页。




请打开你喜欢的网页，赏析网页的同时，分析网页是否为主页，它属于静态网页还是动态网页。
任务1.2.2认识网页的基本组成元素
虽然网页的外在表现形式多种多样，但组成网页的基本元素大体是相同的，一般包括文本、图像、超链接、动画、表单、多媒体等元素，如图15所示。




图15网页的基本组成元素

1. 文本
文本和图像是网页中最基本的元素，是网页信息的主要载体，它们在网页中起着非常重要的作用。其他元素如超级链接等都是基于这两种基本元素而创建的。
文本在网络上的传输速度较快，用户可以很方便地浏览和下载文本信息，故其成为网页主要的信息载体。网页中文本的样式多变，风格不一，吸引浏览者的网页通常都具有美观的文本样式。文本的样式可通过设置网页文本的属性而改变，在后面的章节将详细介绍这方面的知识。
2. 图像
图像比文本更具有生动性和直观性，它可以传递文本不能传载的一些信息。网站标识Logo、背景等都是图像。
3. 超链接
超链接(hyperlink)是指超文本内由一个文件至另一个文件的链接，能起到将不同页面链接起来的功能，可以是同一站点页面之间的链接，也可以是与其他网站页面之间的链接。超链接有文本链接和图像链接等。在浏览网页时单击超链接就能跳转到与之相关的页面。
超文本(hypertext)是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。超文本的基本特征就是可以超链接文档。
提示： 
将光标移至超级链接处时会变成。
4. 动画
为吸引浏览者的眼球，网页中通常会设计一些动画效果，常见的有GIF图像动画和Flash动画。对于某些技术含量较高的页面，可以使用CSS、JavaScript和HTML实现动画效果。
5. 表单
表单通常用来收集浏览器中输入的信息，然后将这些信息发送到服务器端，实现网页交互功能。
6. 音频和视频
根据实际需要，网页中还会添加一些音频和视频来丰富页面效果，常见的音频格式有MP3，视频格式有MP4、FLV等。




请打开你喜欢的网页，赏析网页的同时，分析网页中的基本组成元素。
任务1.2.3认识网站
网站是指在Internet上根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合，网站中的各个网页通常由超级链接关联起来，形成一个主题鲜明、风格一致的Web站点。网站中的网页结构性较强，组织比较严密，通常都有一个主页，包括网站Logo、Banner(横幅广告)和导航栏等内容。目前，各级政府、公司和单位基本上都拥有自己的网站，利用网站进行信息发布和宣传等。
按网站内容可将网站分为四种类型： 门户网站、个人网站、专业网站和职能网站。
1. 门户网站
这类网站是一种综合性网站，涉及文学、音乐、影视、体育、新闻和娱乐等领域，具有论坛、搜索等功能。国内较著名的门户网站有搜狐(http://www.sohu.com)、网易(http://www.163.com)等。
2. 个人网站
个人网站的个性化较强，是以个人名义开发创建的网站，其内容、样式、风格等都是非常有个性的。
3. 专业网站
专业网站具有很强的专业性，通常只涉及某一个领域。如榕树下网站(http://www.rongshuxia.com)是一个专业文学网站。
4. 职能网站
职能网站具有专门的功能，如政府职能网站等。目前逐渐兴起的电子商务网站也属于这类网站，较有名的电子商务网站有阿里巴巴(http://china.alibaba.com)和当当网(http://www.dangdang.com)等。



请打开你喜欢的网站，赏析网页的同时，查看网站风格和网站标志(Logo)，体会网站和网页之间的关系。
任务1.2.4Web服务器和Web浏览器
Web服务器的主要功能是提供网上信息浏览服务。Web服务器可以解析HTTP协议，当Web服务器接收到一个HTTP请求时，会返回一个HTTP响应，这样客户端就可以从服务器上获取网页(HTML)，包括CSS、JS、音频、视频等资源。
Web浏览器简称浏览器，是网页运行的平台。一个制作好的网页文件必须使用浏览器打开，才能看到网页所呈现的效果。基于某些因素，不同的浏览器对同一个CSS样式的解析有所不同。这就导致同样的网页在不同的浏览器下的显示效果可能不同。因此制作网页时，需要保证该网页兼容主流浏览器。对于一般的网站，只需兼容IE浏览器、火狐浏览器和谷歌浏览器就可以满足绝大多数用户的需求。




下载常见的浏览器，浏览网页效果，并体会浏览器的兼容性。
任务1.3认识网页制作常用工具





本书采用Notepad++作为网页制作工具，在熟悉Notepad++和HBuilder（X）特点的基础上，了解其他常用的网页制作工具。 

1. 初识Dreamweaver
Adobe Dreamweaver简称DW，中文名称“梦想编织者”，是美国MACROMEDIA公司开发的集网页制作和网站管理于一身的所见即所得网页编辑器。DW是第一套针对专业网页设计师特别开发的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和浏览器限制的动感网页。目前，推出的最新版本为Dreamweaver CS6。它支持代码、拆分、设计、实时视图等多种方式创作、编写和修改网页，无须编写任何代码就能快捷创建Web页面。实时视图和多屏幕预览面板可呈现出HTML5代码。其成熟的代码编辑工具更适合Web开发高级人员创作。Dreamweaver CS6版本使用了自适应网格版面创建网页，在发布前使用多屏幕预览审阅设计，可以大大提高工作效率。
2. 初识Notepad++
Notepad++是Windows操作系统下的一套文本编辑器，有完整的中文化接口及支持多国语言编写的功能。Notepad++的功能比 Windows 中的 Notepad(记事本)强大，除了