《网页设计入门篇》PPT课件.ppt

网页设计师应用教程 第1章网页设计基础 什么叫做Internet Internet是全球范围内的 开放的 由众多网络互连而成的计算机网络 也称为因特网 Internet就是互联网 是用于连接各个计算机平台的网络 Internet本身可以提供多种网络服务 Web服务就是其中的一种 HTML是用来制作网页的计算机语言 使用该语言可以制作用于浏览的网页或网站 Internet提供的网络服务 在Internet里有许多用来提供服务的服务器 这些服务器提供的服务大致可以分为以下几种 Web服务 使用http超文本传输协议http Ftp服务 文件传输协议ftp E mail服务 mailto 后面可以直接输入E mail地址 不需要 mailto Telnet服务 使用Telnet协议远程登录服务器 不需要 telnet NNTP服务 NNTP网络新闻传输协议news Gopher服务 信息查访服务gopher 什么是Web服务 从广义上来讲 Web是WorldWideWeb的简称 也可以称为 W3 或 WWW Web服务只是Internet中的一个服务 只是这个服务太广了 以至于很多人都把Web看成是Internet了 Web使用的是HTTP即超文本传输协议 使用该协议可以将文档的不同部分或不同文档之间用链接建立起联系 但信息可以用交互的方式进行搜索 什么是网页 网页是用html语言编写的一种文件 将这种文件放在Web服务器上可以让互连网上的其它用户浏览 网页也是通过HTTP协议来传递给浏览者的 其中网页的表现形式很丰富 可以是文字也可以是图片 甚至可以将一些多媒体文件如音频 视频等插入到网页里 网站是网页的集合 多个网页可以共同组成一个网站 网站的第一个网页称为首页 HTML HyperTextMark uplanguage 是超文本标记语言 是用来编写网页的语言 虽然目前由许多种用来编写交互性网站的语言 如asp jsp php 等 但是归根结底用这些语言编写出来的程序也是生成一个标准的HTML网页也传递给浏览者观看 什么是html 在一个网站中 网页与网页之间并不是独立的 它们之间通过超级链接建立起联系 其中超级链接不仅仅可以指向网页 同样也可以指向文本 图片 音频 视频或其他类型的文件 什么是超级链接 1 网页类 静态网页和动态网页2 图片类 网页中传输常见的图片格式有jpg gif二种格式 gif图片是Web中使用最多的一种图片格式 最多支持256种颜色 并且可以支持透明底色 动画和交互功能 jpg图片的压缩率很高 一般用于不包含大色块的图像 它可以支持1600万种颜色 在Web中 可以传输各种格式的文件 大致可以分为以下几类 3 音频类 音频类文件常见的文件扩展名有 mid MIDI文件 wav WAV文件 mp2或者 mp3常见的声音流文件 可以一边下载 一边播放 RealNetworks公司的声音流文件 其扩展名有 ra ram rpm rae 还有Microsoft公司自己开发的声音流文件 wma 4 视频类 视频文件一般有AVI文件 MPG文件和视频流文件等 扩展名为 avi mpg常见的视频流文件有QuickTime格式的文件 扩展名为 qt或 mov RealPlay格式文件 扩展名为 rm ram Microsoft公司开发的WMV和ASF文件 扩展名为 wma asf 等5 下载类 常见的文件压缩格式有ZIP和RAR二种文件格式 在使用浏览器上网时 一般都会在浏览器中输入网址 通过这个网址来打开相应的网页 这个网址就是URL 严格来说URL UniformResourceLocator 就是 统一资源定位器 简单来讲就是网址 什么是URL URL与现实生活中的地址类似 也是由几部分构成的 这几部分为 协议 域名或ip 虚拟路径和文件名四部分构成的 如这个网址 表示名为 ibucm 的商业公司的主机名为 www 的计算机提供基于http的Web服务 http 59 151 5 212 61135145202hao123的IP地址 URL的组成部分 其中第一部分是 http 这代表该网页使用的是http协议 在internet中可以使用多种协议 http是其中的一种 如果使用的是Ftp 则URL的第一部分就会是 ftp 第二部分是 这表示该URl的地址是 其中 com 是顶级域名 代表该网站是属于商业网站 ibucm 代表网站的提供者 www 代表主机名 注 URL的域名部分不区分大小写 同样域名也可以用IP地址来替换 即用圆点分开的4组数字 称为ip地址 常见的域名类型 在Internet内部 如果要访问一台计算机里的内容 只有通过ip地址才能找到这台计算机 当用户在浏览器里输入一个带域名的URL时 浏览器将会先发送一个消息给DNS服务器 域名服务器 DNS服务器负责将域名转化为对应的IP地址 再通过IP地址找到Web服务器 然后从Web服务器里取得相应网页 并返回到客户端浏览器上 IP地址的工作机制 注 一般来说 使用ip地址访问网页要比使用域名访问网页的速度稍快一点 在Web里 每一个网页或文件的地址都是唯一的 一个URL只能指向一个网页或文件 但是同一个网页却可以同时拥有多个URL URL中的端口 在Internet里可以提供多项服务 如Web服务 Ftp服务等 为了节省资源 通常都会把Web服务与Ftp服务架设在一台计算机里 当一个用户向这台计算机请求Web服务 而另一台计算机却向这台计算机请求Ftp服务时 计算机就可以通过不同的端口来区分不同的服务 什么是端口 端口是计算机与外界通信的接口 一个IP地址最多可以拥有65536个端口 通常Web服务使用的是80或8080端口 而Ftp服务使用的是21端口 计算机会监听所有的端口 当某个端口接收到请求 就会把请求递给该端口对应的应用程序或服务 应用程序或服务接收到请求后进行处理 再把处理结果从该端口传递给请求服务的计算机 服务器与客户端当用户在浏览网页时 实际上是由个人的计算机向存放网页的计算机发出一个请求 对方的计算机在收到请求后 将所需要的内容发送回来 相对的本地计算机称为客户计算机 对方计算机被称为服务器 浏览器 Browser 是指在用户计算机上安装的 用来显示指定Internet文件的程序 网站 空间 服务器 互联网商品 摊位 商场 商业街 网页设计构思 1 网页的主题 也就是网页的题材 常的题材有 科技 自然 生活 娱乐 体育 影视 旅游 文学 游戏等 原则 小而精 选择自己比较感兴趣 了解多的题材 2 网页的命名 1 名称要合理 合法 易记 2 名称要体现网页的主题 凝练 概括性强 3 网页的字数要控制在6个字以内 如 雅虎 搜狐 网易 4 名称要有一定的内涵 能给浏览者更多的冲击力和想象力 3 网页的标志 网站标志 logo 是站点内容和特色的体现 简称站标 一般放在主页和链接页上 如同商品的品牌一样 4 色彩搭配 适合网页标准色的颜色有蓝色 黄橙色 黑 灰 白3大系 比较成功的配色有 IBM的深蓝色 肯德基的红色条和Windows视窗标志上的红蓝黄绿色块 微软Microsoft网页采用了蓝 橙 白色搭配 5 字体 同标准色一样 标准字体一般用于标志 标题和主菜单的特有字体 默认的网页字体为宋体 一 网页的布局在网页布局过程中 应该遵循的原则有 对称平衡 异常平衡及对比 凝视和空白等 一般来说 网页的布局有下面几种常见的结构 型结构布局T型布局 三 型布局 网页的布局 网页布局大致可分为 国 字型 例如 CCTV网站 拐角型 例如 TCSZ网站 例 左右框架型 例如 雅虎网站 上下框架型 上下分为两页的框架 综合框架型 例如 新浪网 搜狐网 封面型 一般由标题和图片构成 Flash型 功能强大 信息丰富 视觉及听觉效果强大的相当于多媒体 变化型 即上面几种类型的结合与变化 二 站点规划与设计流程图层1 决定站点目标 确定它将提供什么样的服务 2 选择目标群众3 为兼容的浏览器创建站点4 组织站点结构5 创建设计图6 设计导航图7 计划和收集资源 1 5网页制作的基本步骤1 5 1整体规划进行网站的整体规划也就是组织网站的内容和设计其结构 网页制作者在明确网页制作的目的及要包括的内容之后 接下来就应该对网站进行规划 以确保文件内容条理清楚 结构合理 这样不仅可以很好地体现设计者的意图 也将使网站可维护性与可扩展性增强 层状结构层状结构 如图1 8所示 类似于目录系统的树型结构 由网站文件的主页开始 依次划分为一级标题 二级标题等等 逐级细化 直至提供给浏览者具体信息 default htmlindex htmlhomepage主页的命名 线性结构线性结构 如图1 9所示 类似于数据结构中的线性表 用于组织本身的线性顺序形式存在的信息 可以引导浏览者按部就班地浏览整个网站文件 这种结构一般都用在意义是平行的页面上 通常情况下 网站文件的结构是层状结构和线性结构相结合的 这样可以充分利用两种结构各自的特点 使网站文件既具有条理性 规范性 又可同时满足设计者和浏览者的要求 Web结构Web结构 如图1 10所示 类似于Internet的组成结构 各网页之间形成网状连接 允许用户随意浏览 主页 页面1 页面2 页面3 页面4 页面5 页面7 页面8 一级标题 二级标题 图1 10Web结构 页面6 三 主页的基本制作流程1 指定网页标题2 采集网页内容3 准备网页图片4 设定网页框架5 设定网页背景6 创建其他页面元素 四 网站的后期工作1 测试网站2 申请站点域名3 上传站点内容4 管理网站5 宣传自己的网站 宣传自己的网站