第章网页制作基础知识PPT课件.ppt

1 陈荣军制作isschen 61787345 中山大学南方学院 数字媒体艺术设计 教研组 网页设计 2 第1篇网页设计与编辑 第1章网页设计与制作基础第2章Dreamweaver基础第3章网页中的文本第4章网页元素定位第5章网页中的多媒体对象第6章模板与库第7章动态网页特效第8章动态网站 3 第1章网页设计与制作基础 1 1网络基础1 2网站建设流程 4 1 1网络基础1 1 1网络与网页 Internet服务 www服务 网页浏览服务 电子邮件服务 网上传呼 ICQ传呼 文件传输 在线聊天 网上购物 网络炒股 联网游戏 虚拟空间等图1 1 5 1 1 1网络与网页 浏览器 是获取www服务的基础 它的基本功能就是显示网页 统一资源定位符URL UniformResourceLocator 图1 2 6 1 1 1网络与网页 图1 1在MicrosoftInternetExplorer浏览器中浏览网页 7 1 1 2HTML语言与XHTML语言 主页 HomePage首页 是整个网站的起始点和汇总点 是用户开始浏览网站的入口 HTML HyperTextMarkupLanguage 即超文本标记语言 是用于在网络上发布信息的符号语言 XHTML ExtensibleHyperTextMarkupLanguage 为可扩展超文本标记语言 HTML是纯文本文件 ASCII码文件 可以用任何文本编辑器编辑 如记事本 扩展名为htm 或html 8 1 1 2HTML语言与XHTML语言 HTML的基本格式 双标签受影响的内容单标签 不需要成对标记 表示换行 9 1 1 2HTML语言与XHTML语言 例1 2 在Dreamweaver8环境下制作例1 1的界面 分析系统生成的XHTML代码 欢迎 10 1 1 2HTML语言与XHTML语言 热烈欢迎新同学2007年9月1日HTML与XHTML区别XHTML的主体部分比HTML简洁得多页面的首部有不同的文档类型说明 XHTML的标记和属性名称只能用小写 而HTML代码不区分大小写 XHTML代码所有的属性值都要用引号引起来 而HTML代码不要求 XHTML代码的单标签 如 等都要在后面加 斜杠前加空格 来结束 如 而HTML代码只需写单标签本身 11 1 1 3网络基本概念 一 局域网局域网的全称是局部区域网络 LocalAreaNetwork 缩写为LAN 是指在同一地点上经由网络连在一起的一组计算机 它是计算机网络中复杂程度相对比较低的结构 局域网是目前应用最广泛的一类网络 通常它具有如下特征 1 从地理范围上来说 局域网的覆盖面积比较小 范围通常不超过几十公里 一个房间内2台以上计算机连在一起即可组成一个小型局域网 2 从速度上来说 局域网中信息的传输速率比较高 其范围自1Mbps到10Mbps 甚至可达到100Mbps 3 从管理上来说 局域网的经营权和管理权属于某个特定的单位 12 局域网案例 13 1 1 3网络基本概念 二 广域网广域网 WideAreaNetwork 缩写为WAN 是由两个以上的局域网构成 局域网之间的连接可以穿越很远的距离 最广为人知的WAN就是Internet 它由全球成千上万的LAN和WAN组成 14 1 1 3网络基本概念 三 InternetInternet是全世界最大的计算机网络 这个网络是由分布在世界各地的数万个小的计算机网络通过TCP IP协议互连 组成了巨大的计算机网络 其中的每个小的网络中又分别连接了数量不等的计算机 意味着全世界采用该协议的计算机都能相互通信 15 Internet 16 1 1 3网络基本概念 四 WWWWWW的全称为WorldWideWeb 又称万维网 它是基于Internet提供的一种界面友好的信息服务 用于检索和阅读连接到Internet服务器上的有关内容 该服务利用超文本 Hypertext 超媒体 Hypermedia 等技术 允许用户通过浏览器 如微软的IE 网景的Netscape 检索远程计算机上的文本 图形 声音以及视频文件 17 1 1 3网络基本概念 五 IP地址IP地址相当于Internet上的门牌号码 Internet上的每一个节点都被分配有一个唯一的IP地址以便互相区分和相互联系 IP地址由4个8位二进制数组成 但以十进制数显示 如 192 168 0 1 Internet中的IP地址是唯一不变的 但在Internet之下的局域网IP地址可以自己分配 正如一个单位无权决定自己在所属城市的街道名称和门牌号 但可以自主决定本单位内部的各个办公室编号一样 18 19 1 1 3网络基本概念 六 URLURL 英文为UniformResourceLocator 意思是 统一资源定位器 资源 Resource 是指在网络上所能获取的文字 图像 声音和动画等资料 这些资料实际上都是以各种不同格式的 文件 File 类型存在的 分散在各地的计算机主机中 而 定位器 Locator 就是要指出这些资料的位置 如就是一个典型的URL地址 对于前面所说的地址 它分为两部分 第一个部分 http 表示要访问的文件的类型 http 表示访问的是超文本类型 第二部分是 表示主机的名字 表明要访问的文件存放在名为www的服务器里 该服务器登记在域名之下 20 1 1 3网络基本概念 七 协议1 HTTP协议HTTP HypertextTransferProtocol 超文本传输协议 它用来在Interne上传送WWW数据 它可以保证计算机正确快速地传输超文本文档 使浏览器更加高效 例如 我们要浏览搜狐网站 利用HTTP协议 在浏览器的地址栏中输入该站点的URL地址 就可以进入搜狐网站了 21 1 1 3网络基本概念 2 FTP协议FTP FileTransferProtocol 文件传输协议 是一个标准协议 是在计算机和网络之间交换文件的最简单的方法 FTP通常用于向服务器上传和下载文件 如将网页从本地硬盘上传到服务器上供人使用等 使用FTP可以利用网页浏览器 也可以使用由第三方提供的图形界面的FTP软件 如CuteFTP 来操作 删除 重命名 移动和复制 服务器上的文件 中山大学学院FTP ftp 10 10 240 28 22 1 1 3网络基本概念 八 域名域名是Internet上的一个服务器或一个网络系统的名字 如就是一个域名 域名用于识别和定位Internet上的计算机 与该计算机的互联网协议IP地址相对应 根据国际互联网域名体系的划分 我国的顶级域名是 CN 在此基础之上 又进一步划分出了两类次一级的域名层次 即类别域名和行政区划域名 类别域名是依照申请机构的性质划分出来的域名 具体包括 AC 科研机构COM 工 商 金融等企业EDU 教育机构GOV 政府部门NET 互联网络 接入网络的信息中心 NIC 和运行中心 NOC ORG 各种非盈利性的组织如 中山大学的域名就是类别域名 23 1 1 3网络基本概念 行政区划域名是按照中国的各个行政区划划分而成的 包括 行政区域名 34个 适用于我国的各省 自治区 直辖市 例如北京是 bj 浙江是 zj等等 具体来说 如就是位于浙江省的浙北信息港的域名 24 1 1 3网络基本概念 九 HTMLHTML HypertextMarkedLanguage 即超文本标记语言 是一种用来制作超文本文档的简单标记语言 HTTP 超文本传输协议 规定了浏览器在运行HTML文档时所遵循的规则和进行的操作 使用HTML语言描述的文件 需要通过WWW浏览器显示出效果 25 1 1 3网络基本概念 十 JavaScriptJavaScript是一种基于对象 事件驱动 客户端浏览器 并具有安全性能的脚本语言 它是通过嵌入或调入在标准的HTML语言中使用的 可以使有规律地重复的HTML文段简化 减少下载时间 JavaScript运行中不允许对网络文档进行修改和删除 安全性好 它具有跨平台性 无论何种平台 只要浏览器支持JavaScript就可正确执行 网页中有许多动画效果就是由JavaScript语言编写的 26 1 1 3网络基本概念 十一 动态网页无论网页是否具有动态效果 采用动态网页技术生成的网页都称为动态网页 现在流行的动态网页技术主要有ASP ASP NET JSP PHP等 动态网页是与静态网页相对应的 也就是说 网页URL的后缀不是 htm html shtml xml等静态网页的常见形式 而是以 asp jsp php perl cgi等形式为后缀 并且在动态网页网址中有一个符号 典型的动态网页URL如以下格式 27 1 1 4网页设计相关软件 一 网页编辑软件Dreamweaver是MacromediaStudio的一部分 MacromediaStudio是包括Flash Fireworks Contribute和FlashPaper的集成套件 Dreamweaver8欢迎界面 28 二 图形图像软件1 AdobePhotoshop和ImageReadyPhotoshop是数字专业图像编辑领域内使用最普及的软件 它提供高效的图像编辑 处理以及文件处理功能 与其他软件的兼容性强 支持各种主流图像格式 AdobePhotoshopCS2软件 29 2 FireworksFireworks是专业的网页图片编辑工具 它与Dreamweaver软件的融合度很高 可以制作专门针对网页优化的各种元素或效果 如导航条 切片 GIF动画等 30 3 CorelDRAWCorelDRAW也是一款专业的矢量绘图软件 功能丰富 接口开放性好 自带许多工具 可以将位图图像转换为矢量图形 其最新的版本在图片编辑方面增加了许多新的特性 新的学习工具 在插画和页面布局方面也进行了加强 31 4 AdobeIllustratorAdobeIllustrator是一个矢量绘图软件 在MicrosoftWindows平台和AppleMacintosh平台上都能良好地运行 通过它我们可以创建复杂的艺术作品 技术图解 用于打印的图形和页面设计图样 多媒体以及Web Illustrator有强大的图形处理功能 提供了广泛的强大绘图和着色工具 支持所有主要的图形图像格式 AdobeIllustratorCS2软件 32 三 网页动画软件 1 FLASHFLASH是一款功能强大的动画制作软件 利用它 我们能制作出具有一流动画效果的FLASH影片 FLASH8欢迎界面 33 2 KoolMovesFlashEditor KoolMoves是一个网站动画制作软件 它能够制作Flash电影以及其他与动画相关的素材 该软件还能够制作动画GIF 制作文字特效 导入矢量剪贴画 附加WAV音频文件 为文字按钮和帧增加动作等 34 3 GIFMovieGear GIFMovieGear是一款GIF动画制作软件 几乎所有制作GIF动画所需的编辑功能它都有 无须再用其他的图形软件辅助 它可以处理背景透明化 而且操作简便 通过最佳化处理压缩图片的容量 其次 它除了可以把做好的图片存成GIF的动画图外 还可支持PSD JPEG AVI BMP GIF与AVI格式输出 35 四 文件传输软件 除Dreamweaver自带的上传下载功能外 我们还可以使用更为方便的FTP软件来进行文件传输 目前常用的FTP软件有 CuteFTP LeapFTP FlashFXP等 36 1 2网站的设计流程 网站设计是一个系统的软件应用工程 工作内容千头万绪 涉及到项目管理 页面设计 程序设计 网站测试 资料收集 文档编辑等方面工作 它需要不同的人员分工合作才能完成 只有建立和实施规范的网站设计流程 有效整合各方面的工作内容 才能高效有序地开展网站设计工作 最终顺利地实现网站开发的目标 37 1 2 1分析阶段 一 客户需求分析这是网站设计的前期基础 网站设计人员必须对客户的要求和目标有明确的了解 并在需要时帮助客户找出潜在的 真正的需求 客户需求分析内容应包括 说什么 和 对谁说 两个方面 38 二 制定网站的策划方案在掌握客户的需求后 网站设计人员应根据实际情况制定一个网站策划方案 许多客户也会要求提供该方案 网站的策划方案主要解决 做什么 的问题 39 网站策划方案的制定包括以下几个部分 1 前言 说明网站策划方案的目标与任务 2 背景分析 包括客户现状分析 同类网站分析 目标对象分析等 3 目标分析与网站定位 对网站设计的最终目标进行分析和确定 并据此进行网站主题 风格和内容的定位 4 网站建设内容与结构 包括网站栏目与版块的分布 网站的功能 网站的数据库 网站页面链接结构 网站的用户友好界面等 5 技术说明 对网站的开发平台 运行平台和相关技术进行分析说明 6 建设进度表 合理分工 确定可监控的网站开发进度 7 后期支持 包括网站的后期技术支持与维护 效果评估以及网站建成后的宣传推广 8 费用明细表 详细列出各项事宜所需要费用的清单 预算出网站建设的总投资额度 40 三 资料收集与编辑资料收集与编辑工作包括图片的收集 拍摄与制作 音 视频的收集与制作 文字资料的编辑等 从这一阶段到最后的后期维护阶段 主要是网站设计 怎么做 的问题 41 1 网站的定位 网站的定位是网站策划中的最重要部分 它决定了一个网站的主题 风格和内容 对建立网站的整体形象起着指导性的作用 网站的定位要明确想要对谁传达什么样的信息 即根据目标对象多元化和差别化的特点 找出某一特定群体的潜在需求 有针对性地传达相关的信息 1 2 2设计阶段 42 一 主题定位网站的主题就是网站所要表达的中心思想和意念 它与题材不一样 43 www li 44 二 风格定位风格是指网站的整体视觉形象给浏览者的综合感受 45 三 内容定位内容定位是指在主题确立的前提下 确定网站的具体内容和结构 内容定位首先要设计网站的主要栏目及其分级 内容定位还包括网页之间的组织设计 它的组织原则就是使浏览者能够以最快捷的方式找到需要的信息 www li 46 1 2 2设计阶段 2 网络技术 网络上的运行速度 浏览器脚本兼容性 会影响某些网页效果不能正常显示 页面对屏幕分辨率的适应 网页页面的大小应尽量适应流行屏幕的分辨率 随着显示器分辨率的提高 网页设计标准也会提高 网页是否需要交互操作 在网页中加入JavaScript脚本 或在服务器端提供CGI ASP或PHP支持 安装插件 如果网页中使用了flash动画 Shockwave媒体对象 Real视频等 需要相应的插件 应考虑用户获取插件的途径 47 1 2 2设计阶段 3 规划站点结构及导航方式规划网站目录结构目录名及文件名不能过长 也不能用中文 文件名中可以包含数字或下划线 但不能含 减号 例如可以写chap 1 htm但不能写chap 1 htm 主页的文件名应为index htm或Default htm 系统默认的主页名称 主页文件放在站点根目录下 其余文件均应归类到相应的子目录下 48 1 2 2设计阶段 例1 3 规划 家畜生产学 教学网站的目录结构 养猪生产 养禽生产 养牛生产 养羊生产4个模块 可以建立目录结构如右图 49 1 2 2设计阶段 设计站点导航导航设计的原则是 通过最少的点击次数达到目的地 整个网络的导航风格应该一致 否则浏览者会误解为已离开本网站