网页设计ppt课件.ppt

第第1 1章章 网站设计概论网站设计概论 1 要求 要求 主要内容主要内容 一 一 网站基本知识网站基本知识 二 二 网站设计网站设计 三 三 网站的开发流程网站的开发流程 四 四 常用网站开发工具常用网站开发工具 本章习题本章习题 2 一 网站基本知识一 网站基本知识 1 1 网站及其组成网站及其组成 2 2 网站的文件及资源网站的文件及资源 3 3 网站的工作机制网站的工作机制 3 1 1 网站及其组成 网站及其组成 网站网站就是由网页 图象 声音 动画及数据库等各种服务就是由网页 图象 声音 动画及数据库等各种服务 器资源构成的集合体 器资源构成的集合体 网站的组成部分 网站的组成部分 硬件组成 硬件组成 连接到网络上的连接到网络上的计算机服务器 计算机服务器 在服务器上运行的在服务器上运行的网络操作系统 网络操作系统 WebWeb服务器 应用服务器 应用 程序服务器软件等 程序服务器软件等 各种各种信息服务的文件资源信息服务的文件资源 如网页文件 图象文件 如网页文件 图象文件 声音文件等 声音文件等 对网站进行管理和维护的对网站进行管理和维护的网站管理人员和开发人员网站管理人员和开发人员等等 4 2 2 网站文件及资源 网站文件及资源 资源 资源 静态网页 静态网页 最基本的网站提供内容 由最基本的网站提供内容 由HTMLHTML语言描语言描 述 包括文本 表格 图象及其它内容 每个用户访述 包括文本 表格 图象及其它内容 每个用户访 问时内容均相同 静态网页只要放在网站服务器的文问时内容均相同 静态网页只要放在网站服务器的文 件夹中授权用户访问即可 件夹中授权用户访问即可 动态网页 动态网页 网页内容随不同用户 不同的访问需求而网页内容随不同用户 不同的访问需求而 发生变化 网页中不仅包含发生变化 网页中不仅包含HTMLHTML代码 同时包含在代码 同时包含在 WebWeb服务器端执行的脚本程序代码 通过脚本程序代服务器端执行的脚本程序代码 通过脚本程序代 码进行计算 网页能够访问服务器端的数据资源 并码进行计算 网页能够访问服务器端的数据资源 并 将结果返回给用户 将结果返回给用户 5 图象文件 图象文件 如图象 动画 如图象 动画 gif gif jpgjpg bmpbmp tiftif类文件类文件 等 可以作为网页中的插图 网页的背景图片 极大等 可以作为网页中的插图 网页的背景图片 极大 改善了网页的显示效果 改善了网页的显示效果 数据库 数据库 当网站要通过动态网页提供各种当网站要通过动态网页提供各种 服务时 通服务时 通 常要利用数据库来保存数据并提供数据服务 例如电常要利用数据库来保存数据并提供数据服务 例如电 子商务 子商务 BBSBBS等 等 其它文件 其它文件 声音 动画 流媒体资源等 可嵌入到网声音 动画 流媒体资源等 可嵌入到网 页或以超级链接方式下载到用户端执行 如页或以超级链接方式下载到用户端执行 如 swfswf wmawma rmrm aviavi等 等 6 3 3 网站的工作机制 网站的工作机制 当用户浏览器通过网络向网站发出请求时 网站的当用户浏览器通过网络向网站发出请求时 网站的WebWeb服服 务器会根据浏览器请求的页面是静态 动态网页而采取不务器会根据浏览器请求的页面是静态 动态网页而采取不 同的处理机制 同的处理机制 静态网页的处理机制 静态网页的处理机制 网站的网站的WebWeb服务器只是简单地将页服务器只是简单地将页 面发送到请求的浏览器 面发送到请求的浏览器 动态网页的处理机制 动态网页的处理机制 WebWeb服务器将控制权转交给应用程服务器将控制权转交给应用程 序服务器 应用程序服务器解释执行网页中包含的服务器序服务器 应用程序服务器解释执行网页中包含的服务器 端脚本代码 并根据脚本代码的要求访问数据库等服务器端脚本代码 并根据脚本代码的要求访问数据库等服务器 端资源 最后将计算结果端资源 最后将计算结果 转变为标准的转变为标准的HTMLHTML文件代码文件代码 由 由WebWeb服务器将文件发送到浏览器 服务器将文件发送到浏览器 7 8 9 二 网站设计二 网站设计 1 1 网站的定位网站的定位 2 2 站点风格站点风格 3 3 网站的网站的CICI形象形象 4 4 网站的栏目和版块网站的栏目和版块 5 5 网站目录和链接结构网站目录和链接结构 10 1 1 网站的定位 网站的定位 一个网站要有一个网站要有明确的目标定位明确的目标定位 只有定位准确 目标鲜明 只有定位准确 目标鲜明 才可能作出切实可行的计划 按部就班地进行设计 才可能作出切实可行的计划 按部就班地进行设计 网站的目标定位可体现在三个方面 网站的目标定位可体现在三个方面 题材和内容题材和内容 应紧扣主题 并突出个性和特色 定位 应紧扣主题 并突出个性和特色 定位 要准确 内容要精 不能过于宽泛 更不能包罗万象要准确 内容要精 不能过于宽泛 更不能包罗万象 漫无边际 漫无边际 网站域名网站域名 网站名称网站名称 申请好记的域名和命名一个别致的网站名 申请好记的域名和命名一个别致的网站名 称对网站的形象和宣传推广有很大影响 如 搜狐 称对网站的形象和宣传推广有很大影响 如 搜狐 新浪 网易 新浪 网易 263263等 等 11 2 2 网站的风格 网站的风格 风格风格指的是站点的整体形象给浏览者的综合感受 包括版指的是站点的整体形象给浏览者的综合感受 包括版 面布局 浏览方式 交互性和文字等诸多因素 面布局 浏览方式 交互性和文字等诸多因素 网站风格要体现自己的特色 独树一帜 网站风格要体现自己的特色 独树一帜 通过网站的某一点 如文字 色彩 技术等 能让浏览者通过网站的某一点 如文字 色彩 技术等 能让浏览者 明确分辨出此部分就是网站所独有的 明确分辨出此部分就是网站所独有的 注意 注意 风格建立在有价值的内容之上 网站有风格而无内容风格建立在有价值的内容之上 网站有风格而无内容 是不行的 必须保证内容的质量和价值性 是不行的 必须保证内容的质量和价值性 清楚自己希望战点留给浏览者的印象 清楚自己希望战点留给浏览者的印象 12 3 3 网站的 网站的CICI形象形象 CI CI corporate identity corporate identity 通过视觉来统一企业的形象 包 通过视觉来统一企业的形象 包 括 标志 色彩 字体和标语 括 标志 色彩 字体和标语 网站的网站的CICI形象设计包括形象设计包括 设计网站的标志设计网站的标志 logo logo logologo是一个网站的特色和内涵的集中是一个网站的特色和内涵的集中 体现 必须设计并制作网站的标志 标志的设计 创意来自该网体现 必须设计并制作网站的标志 标志的设计 创意来自该网 站的名称和内容 让浏览者一看到标志就联想到这个网站 站的名称和内容 让浏览者一看到标志就联想到这个网站 设计网站的标准色彩设计网站的标准色彩 不同的色彩搭配产生不同的效果 并可能影响到访问者的情绪不同的色彩搭配产生不同的效果 并可能影响到访问者的情绪 标准色彩是指能体现网站形象和延伸内涵的色彩 主要用于标标准色彩是指能体现网站形象和延伸内涵的色彩 主要用于标 志 标题 主菜单和主色块 志 标题 主菜单和主色块 适合于网页标准色 蓝色 黄适合于网页标准色 蓝色 黄 橙色 黑橙色 黑 灰灰 白等白等 13 设计网站标准字体 设计网站标准字体 是指用于标志 标题和主菜单的特有字是指用于标志 标题和主菜单的特有字 体 体 设计网站宣传标语 设计网站宣传标语 最好用一句话甚至是一个词来高度概括最好用一句话甚至是一个词来高度概括 14 4 4 网站的栏目和版块 网站的栏目和版块 制作网页前 一定要先规划好网站 确定合理的制作网页前 一定要先规划好网站 确定合理的栏目和版块栏目和版块 栏目栏目实质上是实质上是 一个突出显示网站主题的大纲索引 一个突出显示网站主题的大纲索引 设计网站的栏目时应考虑以下内容 设计网站的栏目时应考虑以下内容 紧扣网站的主题紧扣网站的主题 一般做法是将网站主题按一定的方法分类并将其作为网站的主栏目 一般做法是将网站主题按一定的方法分类并将其作为网站的主栏目 且主题栏目个数在总数上要占绝对优势 且主题栏目个数在总数上要占绝对优势 设计一个最近更新或网站指南栏目设计一个最近更新或网站指南栏目 若主页未安排版面放置最新更新内容信息 需设置一个若主页未安排版面放置最新更新内容信息 需设置一个 最新更新最新更新 栏栏 目 若主页层次较多 又无站内搜索引擎 则应设置一个目 若主页层次较多 又无站内搜索引擎 则应设置一个 站点指南站点指南 栏栏 目目 设定一个可以双向交流的栏目设定一个可以双向交流的栏目 设定论坛 留言簿或邮件列表等 让浏览者留下信息或建议等 设定论坛 留言簿或邮件列表等 让浏览者留下信息或建议等 版块版块的概念比栏目大 每一个版块都有自己的栏目 设置版块时 注意各版的概念比栏目大 每一个版块都有自己的栏目 设置版块时 注意各版 块要相对独立 相互关联 且版块的内容要围绕站点的主题 块要相对独立 相互关联 且版块的内容要围绕站点的主题 15 5 5 网站的目录和链接结构 网站的目录和链接结构 网站目录网站目录是指建立网站时创建的目录 站点上的所有网页是指建立网站时创建的目录 站点上的所有网页 及相关资源都分门别类 有序地存放在目录中 及相关资源都分门别类 有序地存放在目录中 目录结构好坏对浏览者没有太大影响 但对站点本身的上目录结构好坏对浏览者没有太大影响 但对站点本身的上 传维护 内容扩充和移植有重要影响 传维护 内容扩充和移植有重要影响 16 建议 建议 不要将所有文件都存放在根目录下不要将所有文件都存放在根目录下 会造成文件管理混乱 上传 会造成文件管理混乱 上传 速度慢等 应尽量减少根目录下的文件数 速度慢等 应尽量减少根目录下的文件数 按栏目内容建立子目录按栏目内容建立子目录 子目录的建立应基于主菜单栏目 需要经常更新的栏目 可建子目录的建立应基于主菜单栏目 需要经常更新的栏目 可建 立独立的子目录 相关性强 不需经常更新的栏目 可合并放立独立的子目录 相关性强 不需经常更新的栏目 可合并放 在一个统一的子目录下 在一个统一的子目录下 所有程序文件应放在特定目录下所有程序文件应放在特定目录下 所有需要下载的文件最好放在一个目录下所有需要下载的文件最好放在一个目录下 在每个主目录下都建立在每个主目录下都建立 images images 目录目录 目录的层次不要太深 目录的层次不要太深 一般不超过三层 一般不超过三层 17 三 网站的开发流程三 网站的开发流程 网站的开发人员网站的开发人员 由一个集体来完成 由一个集体来完成 主导网站开发的单位和客户主导网站开发的单位和客户 项目负责人项目负责人 美术动画设计人员美术动画设计人员 程序设计师程序设计师 维护人员维护人员 网站开发的流程网站开发的流程 1 1 定义站点定义站点 2 2 建立网站结构建立网站结构 3 3 设计和制作主页设计和制作主页 4 4 其它页面制作其它页面制作 5 5 测试页面测试页面 6 6 发布和维护发布和维护 18 1 1 定义站点 定义站点 明确明确建立网站的建立网站的目的目的 确定确定网站提供的网站提供的内容内容 及 及搜集搜集网站网站 资料资料 建立网站目的很多 如销售产品 树立形象 提供信息或建立网站目的很多 如销售产品 树立形象 提供信息或 游戏娱乐等 游戏娱乐等 目的一定要明确目的一定要明确 否则会影响到以后的设计 否则会影响到以后的设计 确定建立网站的目的 确定建立网站的目的 需要参与网站设计的各单位及成员需要参与网站设计的各单位及成员 一起构思 讨论 取得共识一起构思 讨论 取得共识后确保开发过程不会发生争议后确保开发过程不会发生争议 能够有效地进行网站建设 能够有效地进行网站建设 19 确定网站内容 确定网站内容 网站内容必须按照