网页设计与网站建设_02网页设计基础知识全解

《网页设计与网站建设》第2章网络与网页设计基础知识Internet基础2.12.2网页设计与制作工具2.3HTML语言2.4使用UltraEdit软件编写网页2.5网页设计中的色彩应用本章主要介绍了在开始网页设计之前需要了解的网络知识，如：网络基本理论、网页色彩的应用、网页设计与制作工具、HTML语言等。【本章学习目的】通过学习，读者能够：1.了解Internet发展历程和Internet所提供的网络服务2.了解网站访问的基本原理，以及域名和IP的关系3.赏析设计精美的网页，掌握网页的色彩应用4.初步了解网页设计与制作工具5.掌握HTML语言2.1Internet基础2.1.1Internet的概述Internet是相互连接的网络集合。是由成千上万个网络、上亿台计算机通过特定的网络协议相互连接而成的全球计算机网络，是提供信息资源查询和信息资源共享的全球最大的信息资源平台。网络协议是网络中的设备进行通信时共同遵循的一套规则，即以何种方法获得所需的信息。国内internet发展现状：据中国互联网络信息中心（CNNIC）发布的第33次《中国互联网络发展状况统计报告》显示：截至2013年12月，中国网民规模达6.18亿，互联网普及率为45.8%。其中，手机网民规模达5亿，继续保持稳定增长。。2.1.2(WorldWideWeb)简称为Web或万维网，客户端只要通过“浏览器”（Browser）就可以非常方便地访问internet上的服务器端，迅速地获得所需的信息。如图所示：internet浏览器WEB服务器客户端HTTP网络协议2.1.3网页与网站构建的基本单位是网页。网页中包含所谓的“超链接”，通过已经定义好的关键字或图形，只要用鼠标轻轻一点，就可以自动跳转到相应的其它文件，获得相应的信息，从而实现网页之间的链接，从而构成了的纵横交织的网状结构。通过超链接连接起来的一系列逻辑上可以视为一个整体的页面，则叫做网站。网站的概念是相对的，大的如新浪、搜狐等大的门户网站，页面非常多，可能分布于多台服务器上；小的如一些个人网站，可能只有几个页面，仅在某台WEB服务器的占据很小的空间。一个站点的起始页面通常被称为“主页”，主页是一个网站的开始，因此主页的好坏决定了这个网站的访问情况，一般主页的名称是固定的index.htm、index.html或是default.htm等。2.1.4域名与IP地址在Internet上的每台网络设备都要有一个唯一的地址才能被访问到，这个地址就是IP地址。目前IP协议有：IPV4和IPV6,下面以IPV4为例。IP地址是由32bits的二进制数值构成，分成4组，转化为十进制用点分隔，比如：202.100.4.11。IP地址的结构是：“网络地址+主机地址”A类地址的范围为：1.0.0.0—126.255.255.255B类地址的范围为：128.0.0.0-191.255.255.255C类地址的范围为：12.0.0.0-223.255.255.25501238162431012381624310123816243110网络号主机号0网络号主机号110网络号主机号ABC（1）特殊的IP地址：127.0.0.1-----回路测试地址;服务器（2）公有IP地址和私有IP地址:私有IP地址是留用的内部私用IP地址：A类：10.0.0.0-10.255.255.255B类：172.16.0.0-172.31.255.255C类：192.168.0.0-192.168.255.255IPV6的相关知识请查阅有关网络技术方面的参考书籍•IP地址跟域名的关系•域名的分类根域ComnetorgjpcntwSinaebayalibaba域名结构图IbmhpyahooComedunet按组织机构划分按国家和地区划分域名域名机构附注：全称Com商业机构CommercialorganizationEdu教育机构EducationalinstitutionGov政府部门governmentInt国际性机构InternationalorganizationMil军队militaryNet网络机构NetworkingorganizationOrg非盈利机构Non-profitorganization表1.1按组织分类的顶级域名表1.2按地理区域分类的项级域名域名国家附注：全称cn中国Chinaca加拿大Canadajp日本Japankr韩国Korearu俄罗斯Russiatw台湾Taiwanhk香港HongKong域名的书写格式为：叶节点名.二级域名.顶级域名例如：，：web服务器名，sohu：企业名称，com：顶级域名。＊布置思考题：请查阅ICP服务商网站，还有哪些常用的域名？2.2网页设计中的色彩应用2.2.1色彩的应用色彩使宇宙万物充满情感，生机勃勃。色彩作为一种最普遍的审美形式，存在于人们日常生活的各个方面，人们的衣、食、住、行、用均与色彩发生着密切的关系。（1）色彩的冷暖红、橙、黄等颜色使人联想到阳光、烈火，故称为“暖色”；绿、青、蓝等颜色与黑夜、寒冷相连，故称为“冷色”。（2）色彩的轻重各种色彩给人的轻重感不同，从色彩得到的重量感，是质感与色感的复合感觉。浅色密度小，给人质量轻的感觉；深色密度大，给人分量重的感觉。（3）色彩的前进与后退如果等距离地观察两种颜色，可以给人不同的远近感。暖色比冷色更富有前进的特性。两色之间，亮度偏高的色彩呈前进性，饱和度偏高的色彩也呈前进性。（4）色彩的艳丽与素雅如果是单色，饱和度越高，则色彩越艳丽。饱和度越低，则色彩越素雅。除了饱和度，亮度也有一定的关系。不论什么颜色，亮度高时，即使饱和度低也给人艳丽的感觉。2.2网页设计中的色彩应用2.2.2配色方案的应用实例红色让人联想到玫瑰、喜庆、兴奋；白色联想到纯洁、干净、简洁；紫色象征着女性化、高雅、浪漫；蓝色象征高科技、稳重、理智；橙色代表了欢快、甜美、收获；绿色代表了充满青春的活力、舒适、希望等。当然不是说某种色彩一定代表了什么含义。在特定的场合下，同种色彩可以代表不同的含义。红色色系蓝色色系2.3网页制作工具大多数网页的制作都是通过“所见即所得”的编辑工具完成的“所见即所得”，素材的创作和加工需要通过图形和动画设计工具来完成。2.3.1网页编辑工具网页编辑工具主要分为标记型和所见即所得型。标记型工具常用的是notepad(记事本)、Ultraedit等。所见即所得型的编辑软件主要有：微软的Frontpage和Dreamweaver。其中Frontpage继承了OFFICE系列软件的界面通用、操作简单的特点，十分适合初学者使用。但与Adobe公司的Dreamweaver相比，在HTML源代码的精确性、实用性以及对各种新技术的支持上都略逊一筹，因此我们这里主要介绍的网页编辑工具是Dreamweaver。2.3.2图形和图像处理工具目前常用的图形和图像处理工具主要：Photoshop及Fireworks。Photoshop的功能十分强大，是目前最为广泛的专业图形图像处理软件之一，它捆绑了ImageReady，能够实现各种专业化的图像处理、动画的制作等。Fireworks是由MacorMedia公司出品的首选WEB图形图像处理软件。它的独特之处在于其能够优化处理大图片、切割图片、为图片加入特殊效果、制作网页的动态行为等，可以生成FireworksHTML，直接导入到网页中，使用非常方便。2.3.3动画制作工具Flash是目前网页制作中最为出色的动画制作软件，它是一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。Flash所使用的图形是压缩的矢量图形，采用了网络流式媒体技术，突破了网络带宽的限制，可以边下载边播放，这样避免用户长时间的等待，设计者可以随心所欲地设计出高品质的动画，Flash已经慢慢成为网页动画的标准，成为一种新兴的技术发展方向。PhotoshopCS5的工作界面2.4HTML语言网页的本质是超文本标记语言HTML，超文本使网页之间具有跳转能力，使浏览者可以选择阅读路径。使用HTML编写的WEB页面称之为HTML文件，这种文件一般以“.html”或者“.htm”为扩展名，可以使用记事本、Altraedit标记型软件编辑，也可使用Dreamweaver、Frontpage等所见即所得类网页制作工具来快速创建HTML文件。HTML文件通常分为头部和主体两部分，头部（HEAD）包含了编写页面的说明信息，如页面的类型、使用的字符集以及页面的标题等，这部分内容不会显示在网页中；主体（BODY）则包含希望表达的信息，可以是正文、图像、指向另一个WEB页面的超链接等。2.4.1HTML语法格式HTML文件的所有控制语句称为标签，标签在一对尖括号之间，格式如下：标签HTML语言元素/标签1）标签分为成对标签和非成对标签，比如：title、table、font等属于成对标签，而br、hr等属于非成对标签，标签忽略大小写，书写格式非常灵活。2）可使用标签的属性来进一步限定标签，一个标签可以有多个属性项，各属性项的次序不限定，各属性项间用空格来进行分隔。例如：imgsrc=images/girl.gifwidth=100height=873）HTML中使用的注释语句为!—注释内容--，注释内容可插入文本中任何位置，注释内容不会显示在网页中。2.4.2常见的HTML标签1）HTML…/HTML标识HTML文件的开始与结束。中间是一些HTML语言的元素。它允许网络浏览器把文件内容确认为HTML文件。2）HEAD…/HEAD头部标签，其中的信息不会出现在网页中。但其中包含了许多网页的属性信息，例如网页的题目、关键词、说明、网页类型和语言内码等。（1）title…title标题标签，网页的标题将会显示在浏览器的标题栏上。（2）meta…meta标签，包括了MIME字符集信息、网页关键字、网页说明信息等，这些信息有助于网站的推广。3）BODY和/BODY主体标签，它是文档的主干，包含了文档的内容。可以通过多种途径来表现这些内容。例如，对于可视浏览器，可以把主体想象成一张画布，在画布上出现文字、图像、颜色和图案等。（1）P…/P段落标签，中间是一段文字的内容，可以设置其属性来对文字进行排版。（2）FONT…/FONT字体标签，可通过设置其属性来美化字体。（3）Hn…/Hn标题标签，设置一段文本为标题，有特定的格式，标题分为1-6级。（4）IMG图像标签，设置网页中图像的来源、尺寸、对齐方式和说明等。（5）A…/A超链接标签，设置超链接的链接目标和名字等。（6）table…/table表格标签，通过表格可以对网页中的其它元素进行排版。构成表格标签的基本标签有：caption…/caption表格标题标签，定义表格的标题tr…/tr表格的行标签，定义表格中的一行td…/td定义表格行中的一个单元格th.../th表头的单元格标签，定义表格内的表头单元格2.5使用UltraEdit软件编写网页任何文本编辑器都可以编写HTML。比如Notepad（记事本）、Ultraedit等，但保存的时候必须保存为.html或.htm格式。有一些文本编辑器专门提供网页制作及程序设计等许多有用的功能，支持HTML、CSS、PHP、ASP、Perl、C/C++、Java、JavaScript、VBScript等多种语法的着色显示。例如：EmEditor、EditPlus、UltraEdit。UltraEdit如图所示。本章小结本章主要介绍了网页设计基础知识：1．网络基础知识（1）internet的起源与发展、国内internet的发展现状（2）的概念，的访问方式及网络