网页设计课程介绍.ppt

第一章 网页设计课程介绍,主讲教师：史琳琳 网络工程系,课程要求,课程安排 学时：48 课时 课程性质：考核科目 期末考试：50% 平时考核：50%,100分,课堂讲解,聊聊什么是网页和网站 网页的分类 网站财富人生 网页中的常用术语 网页设计的相关知识 网站鉴赏,1.聊聊什么是网页和网站,什么是网页 什么是网站,一、什么是网页,是由语言编写的，通过IE浏览器编译后供用户获取信息的页面，它又称为Web页，其中可包含文字、图像、表格、动画和超级链接等各种网页元素。,网页中的常见元素,从浏览者的角度看，网页中无非就是一些文字、图像、动画等。但从专业的角度来讲，网页中通常包含站标、导航条、广告条、标题栏和按钮等功能元素，如下图所示。,站标,广告条,标题栏,按钮,导航条,1站标,站标也叫Logo，是网站的标志，其作用是使人看见它就能够联想到企业。 Logo一般采用带有企业特色和思想的图案，或是与企业相关的字符或符号及其变形，当然也有很多是图文组合。,2导航条,是链接到网站内主要页面的超链接组合，它可以引导浏览者轻松找到网站中的各个页面。设计导航条时，应注意以下几点：,如果网站内容不多，可根据网站风格尝试灵活摆放，也可以使用图片或Flash动画等，如下图所示。,如果网站栏目很多，可以将导航条分为多排放置在Logo的下方或右侧。为便于观看，可为各排设置不同的底色，如下图所示。,3广告条,广告条又称Banner，其功能是宣传网站或替其他企业做广告。在Banner制作过程中有几点需要注意。,Banner可以是静态的，也可以是动态的。 Banner的体积不宜过大，尽量使用GIF格式图片与动画或Flash动画。 Banner中的文字不要太多。 Banner中图片的颜色不要太多，尤其是GIF格式的图片或动画，要避免出现颜色的渐变和光晕效果,4标题栏,此处的标题栏不是指整个网页的标题栏，而是网页内部各版块的标题栏，是各版块内容的概括。 标题栏可以是文字加不同颜色的背景，也可以是图片。,标题栏,5按钮,网页中的按钮被点击之后，网页会实现相应的操作，比如页面跳转，或数据的传输等。,设计按钮时，有以下几点需要注意。,要保证按钮与页面的协调。 如果按钮上有字则尽量使用单色或渐变色背景。 当页面上有多个按钮时，应分清主次。,什么是网站,网站就是一个或多个网页的集合。从广义上讲，网站就是当网页发布到Internet上以后，能通过浏览器在Internet上访问的页面 。 门户网站 职能网站 专业网站 个人网站,二、网页的分类,按所处位置分类 按表现形式分类,按所处位置分类,主页和子页两类。,按表现形式分类,静态网页和动态网页。,静态网页是相对于动态网页而言，是指没有后台数据库、不含程序和不可交互的网页。,动态网站可以实现 交互功能，如用户 注册、信息发布、 产品展示、订单管 理等等 。,网站的财富人生,初中生的网络神话,hao123,个人简介 李兴平，1979年出生于 广东兴宁县，父母均为 当地农民，兴平初中毕 业后即返家谋生。2005 年前第一次出远门，地 点是深圳。,1999年，网络在中国逐渐普及，兴宁县也开始有了网吧。这时，开始迷上了上网的李兴平在当地网吧找了一份网吧管理员的工作。 因为要帮人攒电脑赚钱，他需要用网络查询配件报价之类的信息，他发觉在网上找资料非常困难，当时的中文网站不仅内容不够丰富，数量有限，而且要把那些用英文字母表示的网址一个个记下来，并不是一件容易的事情。于是，他想到一个解决办法，设计了一个个人网页，把他认为好的网站搜集在一起，并和它们建立链接。当下次上网时，他就很方便地直接进入这些常用的网站。,网吧管理员的身份让李兴平天天泡在网上，泡在那些打游戏、聊天、上网的网民中。很快，他发现来网吧的很多人都不知道如何上网，上网后又不知道去哪里找到所需要的内容。当时的上网费很贵，时间与金钱却往往在茫然不知所措中奢侈地流失。 他设计的简陋的个人主页开始发挥神奇的功效。他开始有意识地去做网站地址搜集分类工作，爱琢磨的他想到要做一个“网址大全”式的东西。半年后，李兴平的个人主页开始有了Hao123的雏形，他当时给它的名字就是“网址大全”。他把当时中国排名前5000位的站点进行分门别类，按用途组合在一起。随后他开始做一些点击广告以及网站联盟等，随着流量增大，网站的固定广告业务随之而来。,2000年中期，Hao123网站以基本成型，开始靠点击广告来赚钱。虽然网络泡沫的破灭导致很多网站突然死亡，但Hao123对网络寒潮体味并不深。“最初的一笔广告费大概是几百元吧，后来每月收入有1000元，逐步到四五千元，在2001天地达到了几万元，到2003年、2004年，每个月的收入稳定在80万元左右。”,亚马逊的商业帝国,北京时间1月30日消息，亚马逊今天发布了2008财年第四 季度财报。报告显示，亚马逊第四季度净利润2.25亿美元 ，较去年同期的2.07亿美元增长9%；净销售额67.0亿美元 ，较去年同期的56.7亿美元增长18%。,亚马逊公司创始人和总裁杰 夫贝佐斯37岁。这位古巴移民 的后裔凭借超人的胆识和敏锐 的目光，在短短3年时间里，从 无到有，使亚马逊公司成为世 界最大的网上书店。公司股票 上市一年多就增长20倍，市场 总值超过拥有1000余家分店的 美国最大的庞诺书店的8倍。 而他本人也成为比尔.盖茨式 的美国新一代超级富豪，身 价数十亿美元，创造了又 一个“美国神话”。,亚马逊的崛起是出典型的喜剧。剧中的主角、亚马逊的创办人贝佐斯创办亚马逊以前还是萧氏企业的一名经理人。在一天上网浏览时，偶然发现网络使用人数每个月以2300%的速度在成长。吃惊之余，他花了两个月的时间研究了网络销售业的潜力与远景，于是他作了个决定：辞掉现有工作，和他的妻子开着老式雪佛莱，跑到西部打算创立网络零售业。,拟出了20种认为适合于虚拟商场销售的商品，包括图书、音乐制品、杂志、PC机和软件等。他最后选择了图书。这里有三个原因： 一是因为美国每年出版的图书有将近130万种，而音乐制品大约只有30万种。 二是美国音乐市场已经由6家大的录制公司控制，而图书市场还没有形成垄断，即使是老牌图书连锁店的市场占有率也只有12%，而且每年图书行业的营业额能够达到250 亿美元；全球的书籍更是多达300多万种，书籍零售有820亿美元的市场。,三是读书是很多人的爱好，在国外，有80%的人说读书是他们的业余爱好之一。因此，最后他选择了书籍作为网络销售的突破口，公司地点选择了西雅图，因为那里是书籍发行商英格姆的大本营。 1995年8月，亚马逊卖出了第一本书。最初一段时间，他亲自运至邮局寄出。,网络技术使亚马逊一类的新型公司迅速膨胀。得到用户认可的亚马逊公司已成为网络空间里最大的商店，拥有450万名顾客，1998年销售额从前一年的148亿美元增加到54亿美元。,1997年5月，公司刚上市的股票每股仅值9美元，而到1998年11月，在网络公司股票市场低迷的情况下，该公司的股票却一度涨至每股209美元，增长了23倍。而这些都发生在亚马逊每年亏损数百万美元，且预计直到2001年都不能赢利的情况下。这是因为，人们相信网络市场的潜力无限，更相信亚马逊公司已先一步在网络市场中占有一席之地。杰夫贝佐斯被称为电子商务之父。,四、网页中的常用术语,www 浏览器 URL FTP IP地址 域名 超级链接 HTML,www,万维网是World Wide Web的中文简称，也称为3W网，它的本质是一种基于超级文本技术的交互式信息浏览检索工具，是Internet提供的应用最普及、功能最丰富、使用方法最简便的信息服务，用户可通过它在Internet上浏览、编辑、传递超文本格式的文件（即.html格式文件）。,浏览器,浏览器是用于阅读网页中信息的一种软件工具，就像使用电脑必须有操作系统一样。 Internet Explorer（IE） Netscape Navigator（NE） 腾讯TT浏览器 等,URL,URL（Uniform Resource Locator）统一资源定位符 主要是用来指定协议（如HTTP或FTP）以及对象、文档、万维网网页或其他目标在Internet的位置和存取方式。 通信协议 主机名 所要访问的网页路径及名称,FTP,FTP（File Transfer Protocol） 文件传输协议是一种广泛使用的文件传输协议，是快速、高效和可靠的信息传输方法。 FTP是基于客户/服务器模型的TCP/IP的应用，所以只要在客户端和服务器之间建立了TCP/IP连接，无论两台电脑的位置远近、连接方式的异同以及使用的操作系统的异同，都能通过FTP协议进行文件的传输。,IP地址,IP地址用来标识连接到Internet上电脑的指定编号，每一个IP地址对应一台电脑，这与用电话号码标识电话网络中的电话相同。 电脑识别的IP地址由32位二进制数值组成，电脑上以十进制数值来显示，一组数值分为4部分，每一部分均不能大于255，中间用“.”分隔，如9。,域名,域名就是常说的网址，它也具有惟一性，如百度的网址、网易的网址等就是一个域名，域名由汉语拼音或英文字符加上数字表示，在访问网络时，域名将通过域名服务器转换成IP地址，这种转换是在后台完成的。,超级链接,是网页中最常用的元素之一，网页就是通过无数的超级链接才能组成一个网站。 超级链接可以链接到网站内部页面、对象，也可以链接到其他网站，大大方便了用户在各个页面对象之间实现跳转。,HTML,HTML（Hyper Text Markup Language） 超级文本标记语言是一种用户与电脑之间进行交流的文本技术，使用超文本文档的简单标记语言。 所谓超文本，是因为它可以加入图片、声音、动画、视频等多媒体内容，并且可以从一个文档跳转到另一个文档，以及与世界各地主机的文件相连接。 扩展名一般为“*.htm”或“*.html”。,五、网页设计的相关知识,设计网页的原则 网页设计的一般步骤 网页制作的常用工具,设计网页的原则,整体规划 鲜明的主题 善用