项目1

为网页设计作准备项目1知识要点了解网页的基础知识1了解网页设计与布局的基本方法2认识HTML语言31.1网页展示：在记事本中创建“生日贺卡”网页1.1网页展示：在记事本中创建“生日贺卡”网页在“记事本”编辑工具中，编写HTML（HyperTextMark-upLanguage，超文本标记语言）代码，制作“祝生日快乐”网页，效果如图所示。“祝生日快乐”网页效果1.2网页制作1.2网页制作1.2.1启动记事本并编辑HTML代码步骤1在Windows桌面的任务栏上，单击【开始】︱【程序】︱【附件】︱【记事本】命令项，打开记事本。步骤2在记事本中输入HTML代码，如图所示。输入HTML代码1.2.2保存文件并预览网页1.2.2保存文件并预览网页步骤1执行【文件】︱【保存】菜单命令，将文件存储在路径：D:﹨素材﹨ch下，文件名为：index.html，如图所示。保存文件1.2.2保存文件并预览网页步骤2单击“保存”按钮，在D:﹨素材﹨ch中可以看到已保存的文本文件及网页文件，如图所示。显示保存的html文件1.2.2保存文件并预览网页步骤3鼠标指向文件：index.html，按下右键，在快捷菜单中单击“开始”选项，网页预览效果如图所示。打开网页1.3知识链接1.3知识链接Internet是一个集各个领域内各种信息资源为一体的信息资源网。它是一个庞大的、实用的、可共享的、全球性的信息源。Internet上有着大量的不同种类、不同性质的信息资料库，如学术信息、科技成果、产品数据、图书馆书刊目录、文学作品、新闻、天气预报，以及各种各样不同专题的电子论坛等。网络上存放信息和提供服务的地方就是网站，一个成功的网站离不开内容丰富、绚丽多彩的一张张网页。学习网页制作的相关基础知识，是一个成功的网页设计和制作者的第一步。1.3.1网页基础知识1.3.1网页基础知识1．Web标准简介网页的标准——Web标准。Web是基于Internet的分布式信息系统，它没有中央控制或管理，是由遍布全球的不同计算机上的大量文档集合而成的，每天都有成千上万的网页增加到Web的信息海洋中。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。1.3.1网页基础知识在一个网页中，同样可以分为若干的组成部分，包括各级标题、正文段落、各种列表结构等，这就构成了一个网页的“结构”。每种组成部分的字号、字体和颜色等属性就构成了它的“表现”。网页和传统媒体不同的一点是，它是可以随时变化的，而且可以和读者互动，如何变化以及如何互动，就称为它的“行为”。因此，概况来说，“结构”决定了网页“是什么”，“表现”决定了网页看起来是“什么样子”，而“行为”决定了网页“做什么”。“结构”、“表现”和“行为”分别对应于三种常用的技术，即(X)HTML、CSS和JavaScript。也就说，(X)HTML决定了网页的结构和内容，CSS设定了网页的表现样式，JavaScript控制了网页的行为。1.3.1网页基础知识“结构”、“表现”和“行为”的关系如图所示。“结构”、“表现”和“行为”的关系1.3.1网页基础知识2．Internet“Inter”意即交互，“net”意即网络，Internet称为国际互联网络。Internet的功能主要有以下几个方面：信息的获取与发布（）。电子邮件（E-Mail）。网上交际（BBS、新闻组、即时通讯、网络电话等）。电子商务与网上办公。Internet的其他应用（远程教育、远程医疗、远程登录、文件传输、游戏娱乐等）。1.3.1网页基础知识3．的缩写（简称Web），中文名称被称为“互联网”或者万维网。（蒂姆·伯纳斯·李）在欧洲量子物理实验室的时候开始使用的。互联网是在Internet上运行的，覆盖全球的多媒体信息系统，并且提供了在Internet上的一种非常有效的浏览、检索及信息查询的方式。用户可以通过网页中的超链接在各个网页之间转换，甚至可以在服务器之间回传信息互动交流，即为“网上冲浪”。1.3.1网页基础知识4．IP地址连接网络的计算机都有类似于电话号码的地址，通常称之为IP地址。接入互联网的计算机必须有一个全球唯一的IP地址，IP地址可以看做计算机入网的“身份证号”，也用于网络通讯时准确的定位和标志计算机。每个IP地址用四个字节表示，例如某单位的Web服务器的地址210.35.24.11，每个字节用十进制表达，用点隔开，每个数字范围是介于0到255之间的。IP地址从网络规模上区分，可以分为A、B、C三大类。1.3.1网页基础知识A类地址格式：A类地址的网络ID仅用一个字节（第1位必须是0）表示，因此全球仅有128个此类地址，此类地址的网络主机数量可以达到约16777214台，此类地址目前基本在美国使用,如图所示。网络ID(第1个字节)主机ID(第2、3、4个字节)A类地址格式1.3.1网页基础知识B类地址格式：B类地址的网络ID用两个字节（第1、2位必须是10）表示，因此全球有16384个此类地址，此类地址的网络主机数量约可达65534台,如图所示。网络ID(第1、2个字节)主机ID(第3、4个字节)B类地址格式1.3.1网页基础知识C类地址格式：C类地址的网络ID用三个字节（第1、2、3位必须是110）表示，因此全球有419万个此类地址，此类地址的网络主机数量可达254台，此类地址基本被分配在世界各地使用，如图所示。网络ID(第1、2、3个字节)主机ID(第4个字节)C类地址格式1.3.1网页基础知识5．URL统一资源定位符URL是Uniform/UniversalResourceLocator的缩写，也被称为网页地址，是Internet上标准的资源的地址（Address）。超文本链接制作的网页间的跳转都使用URL来定位，以保证链接可以正确跳转到目标网页。1.3.1网页基础知识6．域名域名是Internet上某一台计算机或计算机组的名称，通过服务器把主机的域名和IP地址对应起来，就比较容易通过域名访问网上的主机了。域名系统采用类似倒过来的“树”形式进行管理，网络中的电脑通过访问域名服务器查找到该主机的IP地址，方可访问该主机，如图所示。根（root）cn（中国）ca（加拿大）uk（英国）……govcomnetorg上述没有特指国家的是美国国内的顶级域名gov（政府）com（商业）org（组织）edu（教育）pku（北大）tingshua（清华）网络域名的结构图1.3.1网页基础知识7．Browser浏览器Browser是应用于互联网的客户端浏览程序。用于向互联网上的服务器发送各种请求，并对从服务器发来的超文本信息和各种多媒体数据格式进行解释、显示和播放。常见的浏览器包括InternetExplorer、Opera、Firefox、Maxthon等。1.3.1网页基础知识8．FTPFTP（FileTransferProtocold）文件传送协议，通过该协议，在Internet上可以完成两台计算机之间的文件传输。从远程服务器获取文件至自己的计算机，称为“下载”文件；将文件从自己的计算机传送至远程服务器，称之为“上传”文件。1.3.1网页基础知识9．服务器服务器是专指某些高性能计算机，具有固定IP地址，能够通过网络，对外提供服务和信息，用户通过服务器才能获得丰富的网络共享资源。服务器可以分为Web服务器、E-mail服务器、FTP服务器等等。也可以只用一台计算机来同时实现Web服务器、E-mail服务器、FTP服务器等服务器的功能。相对于普通PC来说，在稳定性、安全性、性能等方面都要求更高。通常服务器的硬件配置都比较高。1.3.2网页的设计与布局1.3.2网页的设计与布局1．认识网页与网站网页（WebPage）实际上是一个文件，网页通过网址（URL）来识别与存取，在浏览器中输入一个网址后，浏览器显示出来的就是一个网页。1.3.2网页的设计与布局网站（WebSite）是网页的集合，一个网站可以有一个或多个网页构成，当浏览者登录一个网站后，浏览器显示的第一个页面称为首页（HomePage），如图所示的是新浪（sina）网的首页。新浪网首页1.3.2网页的设计与布局按照网页的表现形式可将网页分为静态和动态网页。静态网页：HTML格式的网页通常被称为“静态网页”，静态网页没有数据库的支持，制作方法简单易学，但缺乏灵活性。动态网页：动态网页一般以数据库技术为基础，使用ASP.NET、PHP和JAVA等程序生成，制作方法比HTML语言稍难。采用动态网页技术可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等等。1.3.2网页的设计与布局静态网页和动态网页不是以网页中是否包含动态元素区分的，而是针对客户端与服务器端是否发生交互而言，不发生交互的是静态网页，发生交互的是动态网页。从网站浏览者的角度来看，无论是动态网页还是静态网页，都可以展示基本的文字和图片信息，但从网站开发、管理、维护的角度来看就有很大的差别。1.3.2网页的设计与布局静态网页每个网页都有一个固定的URL，网页内容一经发布到网站服务器上，无论是否有用户访问，都将保存在服务器上，即每个网页都是一个独立的文件；动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。动态网站也可以采用静动结合的原则，适合采用动态网页的地方用动态网页，如果必要使用静态网页，则可以考虑用静态网页的方法来实现，在同一个网站上，动态网页内容和静态网页内容同时存在也是很常见的事情。1.3.2网页的设计与布局2．网页主题网页主题是网站需要表现的主要内容，在确定网页主题时要尽量简单，一目了然，但是网页的特色不可缺乏。在目标明确的基础上，完成网站的构思和创意即总体设计方案。对网站的整体风格和特色作出定位，规划网站的组织结构，如图所示是一个运动主题的网页。运动主题的网页1.3.2网页的设计与布局一个网站首先主题要鲜明，不要求网站内容包罗万象，但是必须要找到与主题息息相关的内容，做出特色，这样才能给用户留下深刻的印象。为了做到主题鲜明突出，要点明确，按照用户的需求，以简单明确的语言和画面体现站点的主题。如图所示是一个音乐主题的网页音乐主题的网页1.3.2网页的设计与布局3．网站命名和标志网站的命名是重中之重，网站名称与其说是一个商标，不如说是一个企业精神的缩略语，是一个网站拥有的永久性精神财富。网站命名要在网站定位准确和清晰的前提下进行，一定要突出主题，这是企业网站给客户和浏览者的第一印象。1.3.2网页的设计与布局网站标志（LOGO）代表了公司或企业的图形形象，其作用至关重要，一个好的LOGO不仅能醒目的展示企业形象，更能在众多的网站中脱颖而出。如图所示为一些成功网站的著名LOGO。LOGO展示1.3.2网页的设计与布局网站标志应具备的基本成分包括：（1）符合国际标准。LOGO的国际标准规范。为了便于Internet上信息的传播，一个统一的国际标准是需要的。实际上已经有了这样的一整套标准。（2）精美、独特。（3）与网站的整体风格相融。（4）能够体现网站的类型、内容和风格。（5）在最小的空间尽可能的表达出整个网站、公司的创意和精神等。1.3.2网页的设计与布局4．网页的色彩色彩作为视觉信息，具有强烈的知觉力、辨别力、象征力和冲击力。色彩无时无刻不在影响着人们的生活，不同的颜色有着不同的含义，给人各种丰富的感觉和联想，如下所述。红色：热情、奔放、喜悦、庄严蓝色：天空、清爽、神秘、知性绿色：植物、生命、生机紫色：浪漫、富贵黄色：高贵、富有、灿烂、活泼黑色：严肃、夜晚、沉着灰色：庄重、沉稳白色：纯洁、简单、洁净1.3.2网页的设计与布局色彩是网页设计的要素之一，在网页中最持久的元素就是色彩，失去了色彩，人们会失去浏览和娱乐的快乐心情。色彩的搭配没有明确的限制，可以基于色相和色调配色，也可以基于情感配色，可以运用重点突出、和