网页设计基本概念ppt课件.ppt

2020年4月20日星期一 网页设计基本概念 1 第1讲网页设计基本概念 引言Internet与WWW网页制作涉及的一些重要概念网页的内容网页的类型网页制作的编程语言与编辑工具设计Web站点的一般步骤 2020年4月20日星期一 网页设计基本概念 2 1 1引言无论是在Internet上创建Web站点和发布主页 还是在Intranet上张贴文本和图形文件 都需要涉及设计Web站点和制作网页 本讲将首先介绍如下一些基本问题 Internet与WWW 网页制作涉及的一些重要概念 网页制作的编程语言与编辑工具 设计Web站点的一般步骤 2020年4月20日星期一 网页设计基本概念 3 1 2Internet与WWW20世纪60年代末 美国人开展计算机网络互联研究 拉开了计算机网络研究的序幕 20世纪80年代以来 随着计算机技术的发展和完善 全世界越来越多的计算机采用各种通信媒体连接起来 组成了一个超级的 网络 这就是人们所称的 Internet 2020年4月20日星期一 网页设计基本概念 4 Internet是世界上最大的互联网络 实际上它是把全世界各个地方已有的各种网络 例如计算机网 数据通信网以及公用电话交换网等互联起来 组成一个跨越国界范围的庞大的互联网 因此 也称为 网络的网络 参见图1 1 2020年4月20日星期一 网页设计基本概念 5 图1 1Internet的用户视图及内部具体结构 2020年4月20日星期一 网页设计基本概念 6 一 对Internet的理解1 从网络互联的角度来看Internet利用成千上万个具有特殊功能的专用计算机 称为路由器或网关 通过各种通信线路 把分散在各地的网络在物理上连接起来 2 从网络通信的角度来看Internet是一个用TCP IP TransmissionControlProtocol InternetProtocol 协议把各个国家 各个部门 各种机构的内部网络连接起来的超级数据通信网 2020年4月20日星期一 网页设计基本概念 7 3 从提供信息资源的角度来看Internet是一个集各个部门 各个领域内各种信息资源为一体的超级资源网 4 从网络管理的角度来看Internet是一个不受政府或某个组织管理和控制的 包括成千上万相互协作的组织和网络的集合体 2020年4月20日星期一 网页设计基本概念 8 二 Internet的特点1 TCP IP协议是Internet的核心2 Internet实现了与公用电话交换网的互联3 Internet是一个用户自己的网络 2020年4月20日星期一 网页设计基本概念 9 三 对WWW的理解WWW WorldWideWeb 可以译为 环球网 万维网 全国科学技术名词审定委员会推荐使用的译名为 万维网 1984年提出了一种WWW所依存的超文本 hypertext 数据结构 1989年发展成为一种新型的信息传播与处理技术 1991年CERN向世界公布了WWW技术 2020年4月20日星期一 网页设计基本概念 10 WWW是一种分布式多媒体超文本系统 所谓 超文本 是指它的信息组织形式不是简单地按顺序排列 而是由指针连接的复杂的网状交叉索引方式 WWW的出现对Internet的发展起了巨大的推动作用 作出了重大的贡献 WWW本身是多种技术组合的产物 它可以不依赖于Internet的存在而运行 而WWW与Internet相结合 更使Internet如虎添翼 为Internet的进一步普及铺平了道路 2020年4月20日星期一 网页设计基本概念 11 四 WWW的运行机制WWW的运行机制是使用客户机 服务器模式 当用户查询信息时 便执行一个客户机程序 并输入一个统一资源定位地址 uniformresourcelocation URL 客户机程序也被称为 浏览器 browser 程序 随后 浏览器程序将成为一个客户 该程序将负责对用户的直接服务 2020年4月20日星期一 网页设计基本概念 12 它将用户的要求转换成一个或多个标准的信息查询请求 通过Internet发送给远方提供信息的服务器 而服务器则执行一个服务器程序 Web的客户机程序与服务器程序之间通过超文本传输协议 hypertexttransferprotocol HTTP 进行通信 如图1 2所示 2020年4月20日星期一 网页设计基本概念 13 图1 2WWW的客户机 服务器模式 2020年4月20日星期一 网页设计基本概念 14 HTTP提供的功能包括实现Web客户机与服务器的连接 发出带文件名的访问请求 接收文件以及关闭连接等 为了使客户机程序能找到位于整个Internet范围内的某种信息资源 WWW系统使用统一的URL 客户机程序就是凭借输入的URL找到相应的服务器并与之建立联系和获得信息的 服务器提供的信息一般是用超文本标记语言 hypertextmarkuplanguage HTML 写成的信息文件 2020年4月20日星期一 网页设计基本概念 15 由于HTML是一种统一的标准语言 所以 不管服务器程序如何不同 或者服务器所在站点的计算机操作系统存在多大差别 用HTML文件提供的信息最终总能为客户机程序所理解和显示 2020年4月20日星期一 网页设计基本概念 16 在实际运行中 当服务器接到客户机的信息查询请求之后 便完成相应的操作 将查出的结果通过Internet全部传送到客户机的计算机内存中 客户机再将服务器送来的结果转化为一定的显示格式 通过友好的图形界面 例如 Windows 展示给用户 这一过程用户是感觉不出来的 WWW是一种图形化的Internet服务 它的资源极其丰富 2020年4月20日星期一 网页设计基本概念 17 1 3网页制作涉及的一些重要概念制作网页的目的 一般说来是为了将其发布到网 局域网或者Internet 上 这就涉及到建立Web站点 并将站点发布到某一个WWW的Web服务器上 另外 网页制作好以后 需要用浏览器进行浏览 在浏览网页时 第一个页面通常称为主页 2020年4月20日星期一 网页设计基本概念 18 一 Web服务器在WWW中 Web是由成千上万台彼此可以通信的计算机组成的全球网络 其中 提供信息的每一台计算机均称为Web服务器 又称为主机 人们利用统一资源定位地址 URL 的标准格式 提供万维网中Web服务器的网址 如果使用超文本传输协议 HTTP 来提供万维网信息资源空间站点地址的话 则该地址的格式为 http 2020年4月20日星期一 网页设计基本概念 19 例如 中国互联网络信息中心 在万维网中的站点地址是 如果用户在MicrosoftInternetExplorer或者NetscapeNavigator浏览器 地址 处输入该地址 便可以浏览到该站点主页的信息 参见图1 3 2020年4月20日星期一 网页设计基本概念 20 图1 3中国互联网络信息中心的主页面 用域名登录 2020年4月20日星期一 网页设计基本概念 21 其中 是 中国互联网络信息中心 的域名 在该域名前面加上 WWW 仅表明该站点是Web服务器 并非用它来帮助确定其位置 所以 当我们寻找 中国互联网络信息中心 在万维网中的站点地址时 输入 与输入 是等价的 2020年4月20日星期一 网页设计基本概念 22 域名实质上是主机名字的一种标识 它与IP地址是一一对应的 例如 域名 的IP地址是 159 226 1 19 IP地址具有32位二进制数字 为了便于用户记忆 人们发明了利用域名代替IP地址的直接使用 因此 输入用IP地址表示的站点地址 http 159 226 1 19 与输入用域名表示的站点地址 其效果是相同的 如图1 4所示 2020年4月20日星期一 网页设计基本概念 23 图1 4中国互联网络信息中心的主页面 用IP地址登录 2020年4月20日星期一 网页设计基本概念 24 URL UniversalResourceLocator 全球资源定位法 URL所代表的正是Web服务器的网址 2020年4月20日星期一 网页设计基本概念 25 表1 2URL所链接的服务 2020年4月20日星期一 网页设计基本概念 26 二 Web浏览器在WWW中 Web浏览器是使其得以正常进行工作的关键组成部分之一 Web浏览器也是人们通过个人计算机浏览Internet时必需的工具软件 它在读取Web服务器上的HTML文件的同时 必须与组成万维网的成千上万台Web服务器中的一台进行通信联系 2020年4月20日星期一 网页设计基本概念 27 当我们的计算机与上述主机联系成功以后 该主机便会负责查找到我们所要的文件 并将其传回到我们的计算机上 另外 还会将在 index htm 文件中所包含的一些相关的图像也传回来 而Web浏览器就将传回来的所有信息显示在计算机屏幕上 2020年4月20日星期一 网页设计基本概念 28 目前 Web浏览器的主要开发公司是微软 Microsoft 和网景 Netscape 他们开发的两种主流浏览器MicrosoftInternetExplorer 简称IE 和NetscapeNavigator Communicator 在可视化方面的差别甚微 但对一些特殊技术的支持却有很大差异 例如 对Java和ActiveX等 另外 虽然上述两种浏览器都支持HTML 但NetscapeNavigator Communicator对HTML代码的解释要比IE严格得多 2020年4月20日星期一 网页设计基本概念 29 三 Web网页用浏览器从网上看到的信息统称为网页 一般来说 人们利用浏览器与Internet上某一个Web服务器连接成功以后 在浏览器上首先显示的文档就是该Web服务器的起始页 称为 主页 其他的页面就是网页 2020年4月20日星期一 网页设计基本概念 30 图1 5 中国互联网络发展状况统计 的页面 2020年4月20日星期一 网页设计基本概念 31 Web服务器的最主要特征之一就是它具有使一个HTML文件链接到另一个HTML文件的能力 这种能力称为 超链接 另外 Web服务器具有的这种超链接能力 还可以使位于世界不同地方的任何两台Web服务器中的信息连接起来 什么是超链接 一种与其它文件的链接 当用户点击后 所链接的信息就能显示出来 2020年4月20日星期一 网页设计基本概念 32 一般来说 Web页面的元素有文本 列表 图像 超链接 书签 音频 视频 表格 表单和框架等 其中 表格 表单和框架属于复合元素 它们本身可以包含多种基本元素 这些五彩缤纷和千姿百态的Web网页是如何制作出来的 制作好网页以后又如何将它发布到Internet上 这些正是本课所要阐述的主题 2020年4月20日星期一 网页设计基本概念 33 1 4网页的内容请思考一下网页包含什么样的内容 2020年4月20日星期一 网页设计基本概念 34 1 5静态网页和动态网页静态网页是指不应用程序而直接或间接制作成html的网页 这种网页的内容是固定的 修改和更新都必须要通过专用的网页制作工具 比如Dreamweaver Frontpage等 而且只要修改了网页中的一个字符或一个图片都要重新上传一次覆盖原来的页面 2020年4月20日星期一 网页设计基本概念 35 动态网页是指使用网页脚本语言 比如php asp jsp等 通过脚本将网站内容动态存储到数据库 用户访问网站是通过读取数据库来动态生成网页的方法 网站上主要是一些框架基础 网页的内容大都存储在数据库中 当然可以利用一定的技术使动态网页内容生成静态网页 这样有利于网站的优化 方便搜索引擎搜索 静态网页和动态网页最大的区别 就是网页是固定内容还是可在线更新内容 2020年4月20日星期一 网页设计基本概念 36 动态网页的实现 2020年4月20日星期一 网页设计基本概念 37 静态网页的实现 2020年4月20日星期一 网页设计基本概念 38 五 从事网页设计所需要的软 硬件硬件 一台配备64MB内存的Pentium计算机就够了 最多是再加上调制解调器 好将设计完毕的网页上传至Internet 网页编辑软件 网页编辑软件可以分成两种 一种是类似记事本 另一种则是可视化 Dreamweaver 网页编辑程序 2020年4月20日星期一 网页设计基本概念 39 图像动画处理软件 常见的影像处理软件有AdobePhotoShop MacromediaFlash Director CorelDraw UleadPhotoImpact AppleQuickTimeVR QuickDraw3D等 浏览器软件 目前常见的浏览器有NetscapeCommunicator及MicrosoftInternetExplorer网页空间 用来存放网页的存储空间 位于提供相关服务的网络服务器上 2020年4月20日星期一 网页设计基本概念 40 1 4网页制作的编程语言与编辑工具在1991年 当WWW刚刚问世的时候 Web网页就已经存在了 当时一些从事WWW研究的人士组织起来 制定了一些标准 由于有了这些标准 才使得全世界范围内的计算机可以相互交流信息 其中 一个十分重要的标准就是超文本标记语言 HTML HTML作为制作Web页面的编程语言 完全控制着文本和图像的显示方式 2020年4月20日星期一 网页设计基本概念 41 一 HTML HTML是 HyperTextMarkupLanguage 的缩写 中文翻译为 超文本标记语言 二 XML XML是 ExtensibleMarkupLanguage 的缩写 中文翻译为 可扩展标记语言 2020年4月20日星期一 网页设计基本概念 42 三 浏览器端的Script 描述语句 Script是一段嵌在HTML原始代码内的小程度 2020年4月20日星期一 网页设计基本概念 43 四 服务器端的Script 描述语言 目前常见的服务器端Script有ASP程序和CGI程度两种 ASP是 ActiveServerPages 的缩写 中文翻译为 动态服务器网页 CGI是 CommonGatewayInterface 缩写 中文翻译为 通用网关接口 2020年4月20日星期一 网页设计基本概念 44 五 DreamweaverMxDreamweaverMX是WEB站点开发的中心环节 完全用户自定义控制可以迅速完成页面以及站点的设计 Javascript行为库以及可视化编辑环境大量减少了代码的编写 同时亦保证了其专业性和兼容性 通过Dreamweaver与其它群组产品的配合使用以及众多第三方支持可轻松完成动态发布个电子商务网站的构建 到目前为止 全世界范围超过60 的专业网页设计师都在使用Dreamweaver 2020年4月20日星期一 网页设计基本概念 45 六 MicrosoftFrontPage2000 2002 xp 使用Frontpage2000创立主页 你能真正体会到 功能强大 简单易用 的含义 页面制作由Frontpage中的Editor完成 其工作窗口由3个标签页组成 分别是WYSIWYG 所见即所得 的编辑页 HTML代码编辑页 预览页 站点管理功能由Explorer完成 是2000的优势所在 预置了50种主题 Themes 便于设计者创立页面风格一致的站点 本站点也是用FP2000制作的 极力向你推荐的工具 2020年4月20日星期一 网页设计基本概念 46 1 5网站建立的一般流程 一般来说 网页制作可分为三个阶段 1 前期工作准备阶段 在此阶段主要完成以下几个方面的工作 拟定网页主题 搜集相关资料 规划网页内容 绘制结构草图 2 中期制作阶段 在此阶段主要利用各种网页制作工具 开始制作网页 并不断地进行上传与测试 直到最后制作完毕 3 后期维护阶段 网页制作完成后 可进行发布和推广应用 根据需要 对网页进行更新与维护 2020年4月20日星期一 网页设计基本概念 47 介绍的主要内容 一 Web网站设计规划 二 总体设计方案主题鲜明 三 网站的栏目板块及网站结构 四 网站草图与网页布局 五 设计导航结构及链接结构 六 收集网站所需资料 七 创建高浏览器兼容的站点 八 网站测试 2020年4月20日星期一 网页设计基本概念 48 一 Web网站设计规划 创建Web网站的第一步是设计规划 在制作之前对网站进行规划是非常重要的 要明确设计网站的目的和用户需求 从而做出切实可行的设计计划 根据消费者的需求 市场的状况 企业自身的情况等进行综合分析 以 消费者 为中心 而不是以 美术 为中心进行设计规划 2020年4月20日星期一 网页设计基本概念 49 在设计规划时我们应考虑 1 建站的目的是什么 2 为谁提供服务和产品 3 能提供什么样的产品和服务 4 网站的目的消费者和访问者的特点是什么 5 产品和服务适合什么样的表现方式 风格 2020年4月20日星期一 网页设计基本概念 50 二 总体设计方案主题鲜明 1 定位网站和主题 Web网站主页应具备得基本成分 页头 准确无误地标识你的网站和企业标志 E mail地址 用来接收用户垂询 联系信息 比如普通邮件地址或电话 版权信息 声明版权所有者等 2020年4月20日星期一 网页设计基本概念 51 2 定位网站CI形象 所谓CI CorporateIdentity 是借用的广告界术语 意思是通过视觉来统一企业的形象 一个杰出的网站 和实体公司一样 也需要整体的形象包装和设计 准确的 有创意的CI设计 对网站的宣传推广有事半功倍的效果 设计网站的标志 logo 设计网站的标准色彩 设计网站的标准字体 设计网站的宣传标语 2020年4月20日星期一 网页设计基本概念 52 1 设计网站的标志 logo logo是你网站特色和内涵的集中体现 标志可以是中文 英文字母 可以是符号 图案 还可以是动物或者人物等等 标志的设计创意来自你网站的名称和内容 2020年4月20日星期一 网页设计基本概念 53 标志的设计创意来源 网站有代表性的人物 动物 花草 可以作为设计的蓝本 加以卡通化和艺术化 例如迪斯尼的米老鼠 搜狐的卡通狐狸 鲨威体坛的篮球鲨鱼 专业性的网站 可以以本专业有代表性的物品作为标志 比如中国银行的铜板标志 奔驰汽车的方向盘标志 最常用和最简单的方式是用自己网站的英文名称作标志 采用不同的字体 字母的变形 字母的组合可以很容易制作好自己的标志 2020年4月20日星期一 网页设计基本概念 54 现实生活中的Logo 2020年4月20日星期一 网页设计基本概念 55 2 设计网站的标准色彩 标准色彩 是指能体现网站形象和延伸内涵的色彩 例如 IBM的深蓝色 肯德基的红色条形 Windows视窗标志上的红蓝黄绿色块 都使我们觉得很贴切 很和谐 标准色彩要用于网站的标志 标题 主菜单和主色块 给人以整体统一的感觉 一般来说 一个网站的标准色彩不超过3种 太多则让人眼花缭乱 通常适于网页标准色的颜色有 蓝色 黄 橙色 黑 灰 白色三大系列色 2020年4月20日星期一 网页设计基本概念 56 3 设计网站的标准字体 标准字体是指用于标志 标题 主菜单的特有字体 一般我们网页默认的字体是宋体 为了体现网站的 与众不同 和特有风格 可以根据自己网站所表达的内涵 选择更贴切的字体 需要说明的是 使用非默认字体只能用图片的形式 因为很可能浏览者的PC机里没有安装你的特别字体 那么你的辛苦设计制作便会付之东流 2020年4月20日星期一 网页设计基本概念 57 4 设计网站的宣传标语 网站的宣传标语也可以说是网站的精神 网站的目标 可用一句话甚至一个词来高度概括 它类似于现实生活中的广告金句 2020年4月20日星期一 网页设计基本概念 58 三 网站的栏目版块及网站结构 你是否能将最好的 最吸引人的内容放在最突出的位置以吸引更多的网友浏览网站 在制定栏目的时候 要仔细考虑 合理安排 网站的栏目 网站和版块 网站的目录结构 其他 2020年4月20日星期一 网页设计基本概念 59 1 网站的栏目 栏目的实质是一个网站的大纲索引 索引应该将网站的主体明确显示出来 一般的网站栏目安排要注意以下几方面 1 记住一定要紧扣你的主题即将你的主题按一定的方法分类并将它们作为网站的主题栏目 2 设立一个最近更新或网站指南栏目 3 设立一个可以双向交流的栏目 4 设立一个下载或常见问题回答栏目 2020年4月20日星期一 网页设计基本概念 60 2 网站和版块 版块比栏目的概念要大一些 每个版块都有自己的栏目 关于版块方面 主要是门户网站等较大ICP需要考虑的问题 设计时应注意 1 各版块要有相对独立性 2 各版块要相互关联 3 版块的内容要围绕网站主题 2020年4月20日星期一 网页设计基本概念 61 3 网站的目录结构 网站的目录是指你建立网站时创建的目录 目录结构的好坏 对浏览者来说并没有什么太大的感觉 但是对于网站本身的上传维护 内容及未来的扩充和移植有着重要的影响 组织好网站的结构会便于以后的管理和维护工作 2020年4月20日星期一 网页设计基本概念 62 常用的方法在本地计算机上创建一个专门放置网站所有文件的文件夹 然后在该文件夹中制作和编辑Web页 当发布网站时 你就可以复制该文件夹到Web服务器上 以便让更多的人可以访问到你的网站 将你的网站内容以目录结构组织起来以方便维护和导航 将相关的文件放置在同一个文件夹里 2020年4月20日星期一 网页设计基本概念 63 需要注意的是 1 不要将所有文件都存放在根目录下 所有文件都存放在根目录下 会造成文件管理混乱从而影响工作效率 另外还会影响上传速度 2 按栏目内容建立子目录 子目录首先按主菜单栏目建立 对于次要栏目 需要经常更新的栏目可以建立独立的子目录 而不需要经常更新的栏目 可以合并放在一个统一目录下 所有程序一般都存放在特定目录下 所有需要下载的内容也最好放在一个目录下 3 在每个主目录下都建立独立的images目录为每个主目录建立一个独立的images目录是最利于管理的 根目录下的images目录放首页和一些次要栏目的图片 目录的层次不要太深 为了维护方便 建议不要超过3层 2020年4月20日星期一 网页设计基本概念 64 4 其他注意方面 不要使用中文目录名 使用中文目录名可能对网址的正确显示造成困难 不要使用过长的目录名 太长的目录名不便于记忆 尽量使用意义明确的目录名 你可以用Flash Dhtml Javascript来建立目录名 也可以用1 2 3来建立目录名 但是哪一个更明确 更便于记忆和管理呢 显然是前者 2020年4月20日星期一 网页设计基本概念 65 四 网站草图与网页布局 一般是在纸上绘制出网站的布局和大致外观 也可在特定的软件中 如Freehand和Fireworks 精确地绘制草图 当具体制作网站内容时 将一切参考网站草图进行 DreamweaverMX提供了重复使用页面布局的简便方法 即制作网站时使用模板 使用模板技术不但可以提高网页制作的效率 而且当我们决定修改整个网页布局时 仅需更改模板即可 网站草图 网页布局 2020年4月20日星期一 网页设计基本概念 66 五 设计导航结构及链接结构 Web网站设计中 导航结构的设计一直是网页设计者比较关心的问题 导航栏对整个网站内容有提纲的作用 同时 一些广告和网站更新通知也经常放置在导航栏中 导航栏往往需要随时改变 2020年4月20日星期一 网页设计基本概念 67 1 导航结构的设计 导航栏一定要清晰 醒目 通常导航栏要在 第一屏 能显示出来 横向放置的导航栏要优于纵向的导航栏 下面这些方法会非常有用 1 当前位置 在每一页的顶部提示当前所在页所处的位置 以便让浏览者知道身在何处 并可轻松地返回到上一层页面 2 搜索和索引 在网站中添加搜索和索引功能 可以让浏览者快速查找到所需要的内容 3 反馈信息 提供电子邮件地址或电话等信息 以便让浏览者能联系到网站的网管人员 遇到任何问题都可以快速得到反映并解决 2020年4月20日星期一 网页设计基本概念 68 2 链接结构 网站的链接结构是指页面之间相互链接的拓扑结构 它建立在目录结构基础之上 但可以跨越目录 每个页面都是一个固定点 链接则是在两个固定点之间的连线 一个点可以和一个点链接 也可以和多个点链接 这些点并不是分布在一个平面上 而是存在于一个立体的空间中 我们研究网站的链接结构的目的在于用最少的链接 使得浏览最有效率 2020年4月20日星期一 网页设计基本概念 69 链接结构的两种基本方式 树状链接结构 一对一 首页链接指向一级页面 一级页面链接指向二级页面 立体结构看起来就像蒲公英 浏览时 一级级进入 一级级退出 优点是条理清晰 访问者明确知道自己在什么位置 不会迷路 缺点是浏览效率低 一个栏目下的子页面到另一个栏目下的子页面 必须绕经首页 星状链接结构 一对多 每个页面相互之间都建立有链接 立体结构像东方明珠电视塔上的钢球 优点是浏览方便 随时可以到达自己喜欢的页面 缺点是链接太多 容易使浏览者迷路 搞不清自己在什么位置 看了多少内容 2020年4月20日星期一 网页设计基本概念 70 六 收集网站所需资料 网站最忌讳多而杂 在搜集资料时不要追求内容多而全 而应追求精 专 新 包括图像 文本及多媒体 F