1、第1章 网页设计与制作基础,2,知识技能要点,互联网、Web浏览器 网页的类型 网页设计的基本流程,3,1.1 互联网技术,随着InternetIntranet的不断普及和发展，越来越多的公司、企业和个人正在开始建设自己的Web站点、编写Web网页，以一种新的方式向外界发布信息，供人们去浏览、阅读和应用。因此，网页制作已经受到越来越多的专业人员的重视。,4,网页,网页是指通过Internet向全球提供信息的一些文档文件，包括个人信息、商业、娱乐等内容。,5,6,7,网页是在浏览因特网时看到的一个个的画面； 文字、图片和动画等 网站则是指存放在网络服务器上的完整信息的集合体，它包含一个或多个网页
2、，这些页以超链接方式连接在一起，形成一个整体，描述一组完整的信息。 首页(主页):构成网站的第一页,8,网页是利用超文本标记语言HTML(HyperText Markup Languge)编写的，存放在InternetIntranet上的Web服务器中，供访问者使用浏览器来阅读。 利用HTML语言编写出来的网页又称为超文本，即网页中包含有文本、图形、声音、图像和超链接(HyperLink)等多媒体信息。 通常我们看到的网页，都是以 htm 或 html 后缀结尾的文件，称 HTML 文件。,9,第26次中国互联网发展状况统计报告(2010.7.15),2006.12-2010.6中国网站规模变
3、化,10,1.1.2 互联网的应用技术,现在的网络资源及各种业务、应用日趋丰富。电子政务、远程教育、远程医疗、移动短信、在线数字内容等网上各类业务日新月异，电子商务交易额快速增长，信息交流更加便捷高效。,11,Internet 提供的服务： WWW服务（网上冲浪） 电子邮件服务（Email） 网上传呼（OICQ、QQ） 文件传输（FTP） BBS ,12,万维网（WWW）,WWW 是 World Wide Web （环球信息网）的缩写,简称为 Web，中文名字为“万维网”。通过万维网，人们可以使用很简单的方法，就可以很迅速方便地取得丰富的信息资料。 是当前Internet上最受欢迎、最为流行、
4、最新的信息检索服务系统。,13,蒂姆伯纳斯-李（Tim Berners-Lee）于 1990年创建了 World Wide Web (WWW)。 Web 最初的构想和研发的目的是为了满足在世界各个大学、不同研究所工作的科学家信息共享的需求。 WWW 的基本概念是把所有个人计算机、计算机网络和超文本整合成一个功效强大并且易于使用的全球信息系统。,14,“互联网之父”,15,1.2 浏览器,16,浏览器,浏览器是获取WWW服务的基础，它的基本功能就是对网页进行显示，目前使用最广泛的浏览器是微软公司推出的Internet Explorer浏览器， 还有火狐浏览器Firefox等等。,17,18,浏览
5、器之战,19,1.2.3 网页制作工具,1. 记事本,20,步骤如下：,单击“开始”按钮，选择“程序/附件/记事本”。 在“记事本”的窗口中输入HTML代码。 输入代码结束后，选择“文件”菜单中的“保存”或“另存为”命令，则弹出图1-1所示的另存为对话框。 在“文件名”框中键入Web页的名称，注意文件名必须以.html或.htm为扩展名。如果需要，应在“保存在”列表框中定位到特定的目录。 单击“保存”按钮，即创建了一个Web页。见图1-2。 进入到你的文件架，单击，进行测试，你的HTML的网页就完成了。,21,“另存为”对话框,22,单击ie图标，进行测试,23,例：网站制作 文本内容 ,24
6、,运行效果如图,25,26,一个典型的HTML文本的基本结构形式如下：, 网页标题网页的主要内容,文件头,文件主体,28,HTML标签，（HTML Tag）都是由一对“”括起来的，成对出现。表示标记的开始和结束，例如()HTML语言正是通过这些标签来设置网页的结构、网页元素的位置和类别，网页元素的显示效果等。,29,标记符属性,属性是用来描述对象特征的特性。例如，一个人的身高、体重就是人这个对象的属性。 在HTML中，所有的属性都放置在开始标记符里，多个属性之间用空格分开。 如：,30,关于颜色,颜色值是一个关键字或一个RGB格式的数字。 aqua，black， blue，fuchsia, g
7、ray，green， lime，maroon，navy，olive， purple，red，silver，teal，white，yellow,31,在 HTML 中对于颜色的定义可以用6位十六进制数。 电脑屏幕的色彩是由rgb（红、绿、蓝）三种色光所合成的，通过调整这三个基色就可以调配出其它的颜色。 每2位数代表一种颜色的浓度，三种颜色的顺序为红、绿、蓝，00代表颜色浓度最小，FF代表颜色浓度最大。 #000000代表纯黑、#FFFFFF代表纯白、,32,d,图中所示是部分颜色的RGB代码:,例：为页面设置背景色：,33,2. 网页编辑器,用FrontPage或者Dreamweaver工具Fr
8、ontPage和Dreamweaver是最著名的网页编辑工具。FrontPage是微软的Office中的一件组件，是入门时很容易掌握的工具。,34,2. 网页编辑器,Dreamweaver是Macromedia公司出品的网页三剑客其中的一个软件，是专业网页制作软件。,35,Dreamweaver,36,美化网页的基本工具,Photoshop Photoshop是由Adobe公司开发的图形处理软件，它是目前公认的PC机上最好的通用平面美术设计软件，它功能完善、性能稳定、使用方便，所以在几乎所有的广告、出版、软件公司，Photoshop都是首选的平面制作工具。,37,Fireworks Firew
9、orks是由Macromedia公司开发的图形处理工具。 第一套专门为制作网页图形而设计的软件，同时也是专业的网页图形设计及制作的解决方案。,38,Flash Flash是美国Macromedia公司开发 Flash 是交互式矢量图和 Web 动画的标准。使用 Flash 可创作出既漂亮又可改变尺寸的导航界面以及其它奇特的效果。它易学、易用，可以做出有很多动画的网站。,39,40,1.2.4 网页的基本构成元素,一个构思奇妙、制作精美的网页会使整个网站形象地位得到提高。网页制作是一个可简单、可复杂的过程。制作一个优秀的网页不仅需要有艺术的修养，懂得必要的网络语言，还要对图形图像、音频、视频制作
10、，传输技术等有很深刻的理解。,41,设计页面时经常使用的一些元素：,文字 图形 菜单按钮、链接、表单、数据交换. 背景 表格 颜色 多媒体元素 页面布局,42,1.文字（标题、字号、字型.）,文字是网页发布信息所用的主要形式。在网页中可以通过字体、颜色、底纹、边框等来设置文本的属性。,43,1.文字（标题、字号、字型.）,在网页制作中，文字都可以很方便地设置成各种字体和大小，文字不要太大，也不要使用过多的字体，中文文字使用宋体，9像素或者12像素左右即可，因为过大的字在显示器显示时，线条不够平滑。另外，颜色也不要使用太多，以免让人看起来眼花缭乱。 Web本身对文本和字体的格式化能力并不强，在W
11、eb页面中，可以指定文本尺寸、如果需要使用某种特殊字体，可以把这些字画在图片上，然后将图片插入到页面中。,44,45,2.图形,图形（网页上经常使用的图片格式：Jpg、Gif.），可以使用Photoshop、Firework等图像处理工具制作完成。,46,GIF在颜色数很少(256)的情况下，产生的文件很小。 JPG最主要的优点是能支持上百万种颜色，从而可以用来表现照片 PNG 可移值网络图形。Macromedia公司的Fireworks的默认存盘格式就是PNG。它集合了GIF和JPG格式的优点。,47,3.交互功能,交互功能（菜单按钮、链接、表单、数据交换.），帮助浏览者在Web内导航。,4
12、8,4.多媒体元素,多媒体元素：包括声音、动画、视频片断、背景音乐等。例如，动画可以使用flash等工具制作完成。,49,1.3 网站的设计、建设,50,1.3.2 网站类型的划分,网站有很多种类型，如门户型网站、电子商务网站、个人网站等等。如果依据传达信息内容的特点来进行类型的划分，可以分为以下6种形式：,51,1. 信息查询类：,像新浪、网易、搜狐等门户网站。这类站点将为访问者提供大量的信息，而且访问量较大。,52,2. 大众媒体类：,具代表性的就属各大门户网站的新闻版块，传统媒体在网络空间的拓展报刊杂志的电子版。,53,3. 宣传窗口类：,宣传窗口类型的网页具有内容专一，形式多样的特点。
13、尤其是企业的网页，具有企业形象传达的作用，可以看作CI设计的延伸。 个人网站也成为这种类型的重要组成部分，因此格外受到重视。,54,4. 电子商务类：,电子商务的出现使单向的信息传送变成了双向的交互服务，从真正意义上实现了网络的交互性。,55,5. 交流平台类：,各种论坛、BBS、聊天室,56,6. 网络社区类：,即虚拟网上生活。从网上交流发展到网络社区，网络已成为人们生活、存在的新空间，在网络社区可以充分的消遣、放松，获得深入交往并享有充分自由的理想场所。,57,1.3.3 网站设计的基本流程,1、整体规划例如，网站主题、风格、页面元素、逻辑结构等。2、资料收集例如，收集与主题相关的文字图片
14、资料，一些优秀的页面风格，下载一些你喜欢的交互页面，开放的源代码等。,58,如：,59,60,如：,61,1.3.3 网站设计的基本流程,3、页面设计根据事先规划的结构，利用平面图片的形式设计你想要的最终效果。,62,4、网页测试 5、网页上传 6、网站推广与维护,63,1.4.1 Web站点主页的基本成分,页面标题（说明网站的性质与内容） 网站标识 LOGO都是被精心设计的, Logo 的作用很多，最重要的就是表达网站的理念、便于人们识别，广泛用于站点的连接、宣传等。一个绝妙的Logo不但会使首页蓦然生辉，而且会成为整个网站的形象大使。 页眉（用来放置最希望浏览者看到的内容） 导航栏（栏目索
15、引） 内容 页脚（联系方式、版权信息等）,64,d,站标,导航栏,标题,65,d,页脚信息区,66,d,67,1.4.2 版式布局,整体布局合理化、有序化、整体化 字体的大小、型号、字间距、行间距，以及配色等表现功能。 网页的版式设计有创造性、艺术性 将文字、图形图像、色彩、动画、视频图像等网页的传达要素，根据特定的内容和主题，在网页所限定的范围中，运用造型元素和形式原理进行视觉的关联与配置，从而将设计意图以视觉形式表现出来。,68,69,70,用表格排版，,71,72,73,由于人们习惯于将视线从左到右、从上到下移动，因而视区中的不同位置注目程度不同。,74,网页中最常见的构图布局,75,h
16、ttp:/ silicon graphics,inc http:/ http:/ 素材精品屋 http:/ http:/ 遐思素材屋 http:/www.zzi.cc/index1.htm,88,推荐学习网站之网页特效,网页特效集 http:/ http:/ 七色风网页特效 http:/ http:/ http:/ http:/ 网页设计师联盟 http:/ 万维网、浏览器 网页制作工具（包括网页制作语言HTML） 网页中的基本元素 网页中颜色的定义 网站建设流程 网页版式布局,91,1.5 练习题课本P15,1.接入Internet的计算机必须共同遵守（） A.CPI/IP协议 B.PCT/IP协议 C.PTC/IP协议 D.TCP/IP协议 2.万维网的网址以http为前导，表示遵从（）协议 A.纯文本 B.超文本传输 C.TCP/IP协议 D.POP协议 3.URL的组成格式为（） A.资源类型、存放资源的主机域名和资源文件名 B.资源类型、资源文件名和存放资源的主机域名 C.主机域名、资源类型、资源文件名 D.资源文件名、主机域名和资源类型 4.URL的使用是（） A.定位主机的地址 B.定位资源的地址 C.域名与IP地址的转换 D.表示电子邮件的地址 5.使用记事本，用HTML语言编写如下图所示效果的页面。,92,网页标题,
