网页设计第一章2ppt课件.ppt

第一章 第1章网页设计基础知识 21世纪是一个信息时代 网页作为Internet信息传递的重要载体在人们的生活和工作中起作越来越重要的作用 其重要性也日趋突出 自己制作网页已成为越来越多人的一种兴趣和爱好 网页制作现已发展成为一种新兴职业 本章先初步介绍网络的基础知识 然后详细介绍网页及其制作的有关概念和网站建设的入门知识 1 1网络基础知识 计算机网络是把分布在不同地理区域的计算机系统通过专用的外部设备和通信线路连接起来 在网络软件的支持下 实现网络上的数据通信和资源共享的系统 计算机网络是计算机技术与通信技术结合的产物 它克服了单台计算机应用的局限性 极大地延伸了单机的使用功能 它的产生使得计算机的应用发生了深刻变化 1 1 1网络知识简介 1 计算机网络的优点 使分散的数据资源 软件资源和硬件资源共享 利用率大大提高 降低使用成本 使一些地理上分散的组织机构能够进行集中的管理和处理 从而达到资源分散 管理集中的效果 同一个任务由多台计算机共同处理 使系统的可靠性得以提高 将任务分散到不同计算机去处理 从而提高计算机的利用率 远程通信功能使分布在不同地区的计算机通过网络快速地传递各种信息 能支持文字 图片 数字和语音等各种形式信息的收集 传输和加工 通过网络为社会的各行各业提供各种及时 准确和详尽的信息 2 计算机网络的分类 计算机网络按连接区域划分局域网城域网广域网 计算机网络按拓扑结构划分可分为总线型星型环型树型网状结构 1 1 2Internet Internet又称为互联网 因特网或网际网 它是世界上最大的计算机互联网络 由分布在世界各地的广域网 局域网及单机按照一定的通信协议组成的国际计算机网络 是一个建立在计算机网络之上的全球队性的 开放性的计算机超大网络 如图1 2所示 通过Internet网络能够与千里之外的用户相互发送邮件 共同完成一项工作 共同娱乐 Internet的连接方法和服务 Internet连接方法有拨号上网方式DDN方式ISDN方式ADSL方式和无线上网方式 Internet提供的服务主要有WWWE mail网络电话电子商务 Telnet 新闻讨论组 1 1 3TCP TP协议 协议是经大家商量的 可以通过互联网相互通信为目的的一个约定 如果没有网络协议 计算机就无法通信 无法互联 网络协议有许多 TCP IP协议是最出名的 最为人们熟知的网络协议 TCP IP其实是一系列协议的总称 最重要的TCP IP协议有 应用层的FTP TFTP HTTP SMTP POP3 SNMP DNS和TELNET等协议 传输层的TCP UDP等协议 网络层的IP ARP RAAP DHCP ICMP RIP IGRP和OSPF等协议 TCP IP的工作原理 TCP IP的工作原理可归纳如下 若要把数据通过网络传送到目的地 则首先把数据分解成为遵循TCP协议的小数据包再遵循IP协议把这些数据包传送到目的地 当收到数据后 再由TCP协议检查这些数据包 TCP IP分工协作 再加上其他协议就能够完成数据的传输工作 HTTP协议 HTTP是一个客户端和服务器端请求和应答的标准 TCP 客户端是终端用户 服务器端是网站 通过使用Web浏览器或者其它的工具 客户端发出一个到服务器上指定端口的HTTP请求 默认端口为80 该客户端称为用户代理 useragent 应答的服务器上存储着HTML文件和图像的资源 称为源服务器 originserver 在用户代理和源服务器中间还存在多个中间层 比如代理 网关 或者隧道 tunnels HTTP协议 通常 由HTTP客户端发起一个请求 建立一个到服务器指定端口的TCP连接 HTTP服务器则在那个端口监听客户端发送过来的请求 一旦收到请求 服务器向客户端发回一个状态行和响应的消息 消息的消息体可能是请求的文件 错误消息或者其它一些信息 通过HTTP或者HTTPS协议请求的资源由统一资源定位器 UniformResourceIdentifiersURLs 来标识 1 1 4IP地址 IPAddress 为了区分Internet上的千百万台主机 系统给每台主机都分配了一个专门的地址 称为IP地址 通过IP地址就可以访问到每一台主机 IP地址由4个0 255的十进制数字组成 数字之间用英文的句号分开 例如 某一台主机的IP地址为 211 152 65 112 InternetIP地址由NIC InternetNetworkInformationCenter 统一负责全球地址的规划 管理 同时由InterNIC APNIC和RIPE三大网络信息中心具体负责美国及其它地区的IP地址分配 我国申请IP地址要通过设在日本东京大学的APNIC总部 固定IP地址和动态IP地址 为了充分利用网络资源 IP地址又分为固定IP地址和动态IP地址两种 固定IP地址是长期固定分配给一台计算机使用的IP地址 一般是特殊的服务器才拥有固定IP地址 由于IP地址资源非常短缺 通过电话拨号上网或普通宽带上网用户一般不具备固定IP地址 而是由Internet服务商 ISP 临时的动态分配一个IP地址 故该类用户得到的是一个动态IP地址 动态IP一般都不需要去了解动态IP地址 执行过程由计算机系统自动完成 公有地址和私有地址 公有地址和私有地址两类以注册否来划分 公有地址 Publicaddress 由InternetNetworkInformationCenter因特网信息中心 InterNIC 负责 这些IP地址分配给已注册 并向InterNIC提出申请的组织机构 通过它直接访问因特网 私有地址 Privateaddress 属于非注册地址 专门为组织机构内部使用 留用的内部私有地址有 A类10 0 0 0 10 255 255 255 B类172 16 0 0 172 31 255 255 C类192 168 0 0 192 168 255 255 子网掩码 SubnetMask 为了能有效地提高IP地址的利用率 通过取出IP地址中的 主机号 的高位部分作为子网号 从通常的 网络号 界限中扩展或压缩子网掩码 用来创建一定数目的某类IP地址的子网 创建的子网数越多 在每个子网上的可用主机地址的数目也就会相应减少 子网掩码可用来标识两个IP地址是否同属于一个子网 它也是一组32位长的二进制数值 其每一位上的数值代表不同含义 为 1 则代表该位是网络位 若为 0 则代表该位是主机位 和IP地址一样 同样使用 点式十进制 来表示子网掩码 如 255 255 0 0 域名 由于IP地址是数字标识 使用时难以记忆和书写 因此在IP地址的基础上又发展出一种符号化的地址方案 来代替数字型的IP地址 每一个符号化的地址都与特定的IP地址对应 这样网络上的资源访问起来就容易得多 这个与网络上的数字型IP地址相对应的字符型地址 就被称为域名 域名由前缀 主体和后缀等几个部分构成 比如域名 baidu 是这个域名的主体 com 则是该域名的后缀 代表是一个com国际域名 前面的www 是域名下名为www的主机名 近年来 一些国家也纷纷开发使用采用本民族语言构成域名 如德语 法语等 我国也开始使用中文域名 但在今后相当长的时期内 以英语为基础的域名仍然是主流 常用的国际域名 COM Commercialorganizations 工 商 金融等企业EDU Educationalinstitutions教育机构GOV Governmentalentities政府部门Mil Military 军事机构NET Networkoperationsandservicecenters 互联网络 接入网络的信息中心 NIC 和运行中心 NOC ORG Otherorganizations 各种非盈利性的组织 统一资源定位器 URL 在浏览器的地址栏里输入的网站地址叫做统一资源定位器 UniformResourceLocatorURL 主要功能是定位信息 即所谓的网址 URL是唯一在Internet上表示计算机的位置 目录与文件的命令协议 就像每家每户都有一个门牌地址一样 每个网页也都有一个Internet地址 当在浏览器的地址框中输入一个URL或是单击一个超级链接时 URL就确定了要浏览的地址 浏览器通过超文本传输协议 HTTP 将Web服务器上站点的网页代码提取出来 并翻译成漂亮的网页 URL的组成格式 例如 http 其含义如下 http 代表超文本传输协议 通知服务器显示Web页 可缺省 www 代表一个Web 万维网 服务器 M 这是装有网页的服务器的域名 或站点服务器的名称 China 为该服务器上的子目录 即文件夹 Index htm index htm是文件夹中的一个HTML文件 网页 URL实例 news telnet 1 2网页网站基础知识 1 2 1网页 WebPage 网页就是通过浏览器在Internet上看到的页面 用户在Internet上看到的网页 实际上是存放在世界某个角落的某一台计算机中 当该台计算机与互联网相连后 网页经由统一资源定位器 URL 来识别与存取 当用户在浏览器输入资源定位器内容后 网页文件会迅速被搜索到 并传送到用户的计算机 然后再通过浏览器解释网页内容 最后展示在用户的眼前 网页文件 网页文件是一个ASCII码的纯文本文件 通过记事本编辑器就可看到网页的实际内容 其通过各式各样的标记对页面上的文字 图片 表格和声音等元素进行描述 通过浏览器对这些标记进行解释才能生成页面信息画面 在源文件里是看不到任何图片的 网页文件中存放的只是图片的链接位置 图片文件与网页文件是互相独立存放的 甚至可以不在同一台计算机上 早期的网页均属于静态网页 用户浏览时只能被动地接受网页内容 现在在浏览过程中用户可以添加动态内容 即实现了动态网页 形成了全新的媒体形式 1 静态网页 静态网页是指不应用程序而直接或间接制作成html的网页 这种网页的内容是固定的 修改和更新都必须要通过专用的网页制作工具 比如Dreamweaver 静态网页的网址形式通常以htm html shtml xml等为后后缀 在网站设计中 早期的网站一般都是由静态网页制作的 在HTML格式的网页上 也可以出现各种动态的效果 如 GIF格式的动画 Flash 滚动字母等 这些 动态效果 只是视觉上的 与动态网页是不同的概念 静态网页的特点 静态网页中每个网页都有一个固定的URL 且网页URL以htm html shtml等常见形式为后缀 不含有 网页内容一经发布到网站服务器上 无论是否有用户访问 每个静态网页的内容都是保存在网站服务器上的 也就是说 静态网页是实实在在保存在服务器上的文件 每个网页都是一个独立的文件 静态网页的内容相对稳定 因此容易被搜索引擎检索 静态网页的特点 静态网页没有数据库的支持 在网站制作和维护方面工作量较大 因此当网站信息量很大时完全依靠静态网页制作方式比较困难 静态网页的交互性交叉 在功能方面有较大的限制 用户可通过后缀名和是否能与服务器发生交互行为来判断是否属于静态网页 静态网页更新相对起来比较麻烦 适用于一般更新较少的展示型网站 2 动态网页 动态网页是指使用网页脚本语言将网站内容动态存储到数据库 用户访问网站是通过读取数据库来动态生成网页的方法 网站上主要是一些框架基础 网页的内容大都存储在数据库中 网页脚本语言有php asp 等 动态网页与网页上的各种动画 滚动字幕等视觉上的 动态效果 没有直接关系 动态网页可以是纯文字内容的 也可以是包含各种动画内容 这些都只是网页具体内容的表现形式 无论网页是否具有动态效果 采用动态网站技术生成的网页都称为动态网页 动态网页 动态网页技术具有 交互性 自动更新 和 因时因人而变 的特性 动态网页的 交互性 即指网页会根据用户的要求和选择而动态改变 响应 将浏览器作为客户端界面 这将是今后WEB发展的大势所趋 动态网页的 自动更新 即指无须手动更新 HTML文档便会自动生成新的页面 可以大大节省工作量 动态网页的 因时因人而变 即指当不同的时间 不同的人访问同一网址时会产生不同的页面 动态网页使用语言和特点 动态网页使用语言 HTML ASP或HTML PHP或HTML JSP等 是以 asp jsp php perl cgi等形式为后缀 并且在动态网页网址中有一个标志性的符号 动态网页的特点 动态网页以数据库技术为基础 可以大大降低网站维护的工作量 采用动态网页技术的网站可以实现更多的功能 如用户注册 用户登录 在线调查 用户管理 订单管理等等 动态网页的特点 动态网页实际上并不是独立存在于服务器上的网页文件 只有当用户请求时服务器才返回一个完整的网页 动态网页中的 对搜索引擎检索存在一定的问题 搜索引擎一般不可能从一个网站的数据库中访问全部网页 或者出于技术方面的考虑 搜索蜘蛛不去抓取网址中 后面的内容 因此采用动态网页的网站在进行搜索引擎推广时需要做一定的技术处理才能适应搜索引擎的要求 静态网页与动态网页的区别 程序是否在服务器端运行 是判断静态网页与动态网页的重要标志 在服务器端运行的程序 网页和组件属于动态网页 它们会随不同客户 不同时间 返回不同的网页 例如 ASP PHP JSP ASP net CGI等 运行于客户端的程序 网页 插件和组件属于静态网页 例如 html页 Flash JavaScript VBScript等等 它们是永远不变的 从网站浏览者的角度来看 无论是动态网页还是静态网页 都可以展示基本的文字和图片信息 但从网站开发 管理 维护的角度来看就有很大的差别 下面分几个方面说说动态网站与静态网站的区别 从功能方面来看 动态网站可以实现静态网站所实现不了的功能 比方说 聊天室 论坛 音乐播放 浏览器 搜索等 而静态的网站则实现不了 静态网站 如用 rontpage或 reamweaver开发出来的网站 其源代码是完全公开的 任何浏览者都可以非常轻松地得到其源代码 也就是说 自己设计出来的东西很容易被别人盗用 动态网站 如 ASP开发出来的网站 虽然浏览者也可以看到其源代码 但是那已经是转换过以后的代码 想盗用源代码那是不可能的 因为它的源代码已经放在服务器上了 客户端是看不到的 从对数据的利用上来看 动态网站可以直接地使用数据库 并通过数据库直接操作数据源 而静态网站不可以使用 静态网站只能使用表格来死板地实现动态网站数据库表中少有的一部分数据的显示 不能操作 动态网站是放到服务器上的 要看到其源程序或者对其进行直接的修改都须在服务器上进行 因此保密性能比较优越 静态网站实现不了信息的保密功能 动态网站可以实现远程数据的调用 而静态网站连本地数据都不可以用 更谈不上远程数据了 从本质上来看 动态网站的开发语言是编程语言 比方说ASP用Vbscript或Javascript开发 而静态的网站只能够用HTML开发标记语言开发 它只是一种标记语言 不能实现程序的功能 动态网站本身就是一个系统 一个可以实现程序几乎所有功能的系统 而静态网站则不是 它只能实现文本以及图片等的平面性的展现 动态网站可以实现程序的高效快速性能 而普通静态网站没有高效快速可言 网站采用动态网页还是静态网页主要取决于网站的功能需求和网站内容的多少 若果网站功能比较简单 内容更新量不是很大 采用纯静态网页的方式会更简单 反之一般要采用动态网页技术来实现 网页的制作语言 HTML 是一种超文本标记语言 是HyperTextMarkupLanguage缩写 该语言主要利用标记用描述网页字体 大小 颜色及页面布局 XML 是一种定义语言 定义各种标识来描述信息中的各种元素 然后用分析程序来处理 最后得到显示效果 ASP 是ActiveServerPages 动态服务器主页 的缩写 主要用于网络数据库的查询与管理 其编辑语言为VBScript或JavaScript等脚本语言 JSP JSP与ASP非常相似 JSP使用的编程语言是是Java 网页的制作语言 CGI CGI是CommonGatewayInterface 公共网关接口CGI 的缩写 是一种编程标准 规定了Web服务器调用其它可执行程序 CGI程序 的接口协议标准 PHP 是HypertextPreprocessor 超文本预处理器 的缩写 其优势在于运行效率比一般的CGI程序要高 而且是完全免费的 VRML 是VirtualRealityModelingLanguage 虚拟实境描述模型语言 的缩写 是描述三维的物体及其连结的网页格式 1 2 2网页中常见元素 文本和图像 是构成网页的最基本主要元素 可以简单的理解为文字是网页的内容 图片是网页的美观效果 网页可以只由文本或图像构成 对设置了颜色 大小 字体和样式的文本再与图像相结合 制作出来的网页就更精彩 超级链接 通过鼠标单击可以直接转向目标连接 包括文本连接和图像连接 动画 在网页中使用动画元素可以使网页更生动 常见的网页动画包括两种 一种是GIF动画 另一种是Flash动画 1 2 2网页中常见元素 视频和音频 都是通过在网页中插入音 视频插件来实现的 最流行的音频 视频格式是MediaPlay和Real 两种格式都使用了压缩算法和流媒体进行传送 表单 互动特性是互联网的最大特点 表单是实现互动特性的最常用的元素 应用表单可以收集浏览者信息并与其进行交互 1 2 3网站 WebSite 网站是指存放在网络服务器上的完整信息的集合体 它包含一个或多个网页 这些网页按照一定的组织结构 以链接等方式连接在一起 形成一个整体 描述一组完整的信息 集合规则取决于该网站的定位及网页组织结构 网站也称为站点 网站按内容进行分类 可分为门户网站 垂直网站 地方网站 网站按使用对象可分为信息发布 电子报刊 个人主页 网上购物 专题介绍和实用信息服务等方面 主页 进入某网站后的开始画面 即是该网站的主页 HomePage 也就是说 主页是一个网站的门面 要想设计出一个优秀的网站 就必须有一个 要让浏览者想不看都难 的主页 其必须引人入胜 能吸引每一个浏览者的注意力 引发浏览者的好奇心 能让浏览者产生一种深入探索网站的冲动 优秀的主页是一个好的网站必须具备的第一要素 1 2 4HTML语言 超文本标记语言HTML HyperTextMakeupLanguage 在WWW中用来描述超媒体文本的格式和内容 是编写超媒体文本的语言 也是网页编写语言 文本是指文字 字母 数字和符号等可见字符的有序组合 又称为普通文本 超文本是一种电子文档 是一种新的文件形式 是自然语言文本与计算机交互 转移和动态显示等能力的结合 超文本系统允许用户任意构造链接 通过超级链接 Hyperlink 来实现 其中的文字可以具有链接到其它文档的超文本链接 允许从当前阅读文本直接切换到超文本链接所指向的对象 标签和HTML文档 在制作超文本文件时需要用到的一些标签 就是采用了一系列的指令符号来控制输出的效果 这些指令符号用 来表示 用 括起来的句子就是标签标记格式 是用来分割和标记文本的元素 以形成文本的布局 文字的格式及五彩缤纷的画面 用HTML编写的超文本文档称为HTML文档 独立于各种操作系统平台 如 UNIX WINDOWS等 使用HTML语言描述的文件 需要通过WWW浏览器显示出效果 HTML的基本结构 超文本文档分文档头和文档体两部分 在文档头里 对这个文档进行了一些必要的定义 文档体中才是要显示的各种文档信息 头部信息文档主体 正文部分 一个最基本的超文本文档的源代码 一个简单的HTML示例欢迎光临我的主页这是我第一次做主页 1 2 5网站服务器工作基本原理 网站服务器上的文件和数据库最终能成为客户所看到的页面的过程包括三个问题 网站的数据如何变成页面数据 由网站程序解决 如何根据用户请求将指定的数据体送达客户端 由Internet解决 客户端如何将页面数据显示为页面 即图形界面上的文本 图像 图形集合的显示 由浏览器解决 1 2 6网页设计制作常用的工具软件 1 MicrosoftFrontPage2 网页制作三剑客DreamweaverFlashFireworks33 Photoshop 1 2 7网页设计制作流程 网页设计是一个感性思考与理性分析相结合的复杂过程 网页设计中最重要的东西 并非在软件应用上 而是在对网页设计理解以及设计制作水平上 在于自身美感以及对页面把握上 1 网页设计的内容归纳起来包含设计的任务 设计的实现 色彩的运用 造型的组合 设计的原则和网页的优化等6个方面 可以将站点分为以下三类 第一类是资讯类站点 像新浪 网易 搜狐等门户网站 这类站点将为访问者提供大量的信息 而且访问量较大 因此需注意页面的分割 结构的合理 页面的优化 界面的亲和等问题 第二类是资讯和形象相结合的网站 像一些较大的公司 国内的高校等 这类网站在设计上要求较高 既要保证资讯类网站的上述要求 同时又要突出企业 单位的形象 第三类则是形象类网站 比如一些中小型的公司或单位 这类网站一般较小 有的则有几页 需要实现的功能也较为简单 网页设计的主要任务是突出企业形象 这类网站对设计者的美工水平要求较高 设计的实现 第一部分为站点规划及草图绘制 这一部分可以在纸上完成 设计首页的第一步是设计版面布局 将网页看作传统报刊杂志来编辑 这里面有文字 图像乃至动画 以最适合的方式将媒体信息排放在页面的不同位置 第二部分为网页制作 通常用的软件是Dreamweaver Fireworks Flash以及Adobe的Photoshop软件 接下来就是将设计蓝图变为现实 最终集成一般是在Dreamweaver里完成 色彩的运用 色彩是美丽而丰富的 它能唤起人类的心灵感知 一般来说 红色是火的颜色 热情 奔放 也是血的颜色 可以象征生命 黄色是明度最高的颜色 显得华丽 高贵 明快 绿色是大自然草木的颜色 意味着纯自然和生长 象征安宁和平与安全 如绿色食品 紫色是高贵的象征 有庄重感 白色能给人以纯洁与清白的感觉 表示和平与圣洁 色彩代表了不同的情感 有着不同的象征含义 这些象征含义是人们思想交流当中的一个复杂问题 它因人的年龄 地域 时代 民族 阶层 经济地区 工作能力 教育水平 风俗习惯 宗教信仰 生活环境 性别差异而