1 网站设计概念.ppt

第1章网站设计概论 要求 主要内容导论一 网站基本知识二 网站设计三 网站的开发流程四 常用网站开发工具本章习题 导论0 1Internet简介0 2IP地址0 3通信协议0 4通信协议0 5Internet提供的服务类型 0 1Internet简介 什么是Internet Internet inter 互联 net 网络 Internet就是网络的网络 将世界上多种多样的各个计算机网络联成一个整体 中国的互联网发展迅速 骨干网 Cernet ChinaNet 中国教育科研网页 0 2IP地址 IP地址用于在互联网上区分开各个主机 示例 1100101011001100010100000000001对应于 202 204 80 1对应于 域名系统 DNS DomainNameSystem 实现域名与IP地址的一一对应域名实例 WWW tsinghua WWW 为用户提供服务的主机类型bit 学校名 北京理工大学 edu 代表教育科研网cn 代表中国 域名分类 常用国家和地区域代码 用ping命令获取IP地址 0 3通信协议 通信协议的概念 所有的需要互通信息的设备都采用的数据通信标准 类似于不同国家的人要交流时讲述同一种语言 常用的通信协议 传输控制协议 网际协议 TCP IP 简单邮件传输协议 SMTP 和邮局协议 POP 文件传输协议 FTP 超文本传输协议 HTTP Windows中与通信协议相关的设置 TCP IP协议 在Outlook设置邮件协议 0 4Web服务器 Web服务器是用于提供Web服务的计算机 需要区分本地计算机与Web服务器 数据链路 本地计算机与Web服务器间相互交换信息的路径数据包 在数据链路上传播的数据基本单元 0 5Internet提供的服务类型 网络信息浏览 Internet提供的服务类型 电子邮件 文件传输服务 Internet提供的服务类型 在线论坛 Internet提供的服务类型 Internet提供的服务类型 搜索引擎 Internet提供的服务类型 艺术欣赏 Internet提供的服务类型 专业公司产品 Internet提供的服务类型 各种领域专业网站 Internet提供的服务类型 网上银行 小结 重点内容 1 IP地址与域名的关系2 通信协议的概念与常见的通信协议3 Web服务器与本地计算机之间的关系课后练习 1 学会设置本机IP地址与电子邮件软件的POP3和SMTP服务器参数设置2 上网了解各种网上服务 一 网站基本知识 网站及其组成网站的文件及资源网站的工作机制 1 网站及其组成 网站就是由网页 图象 声音 动画及数据库等各种服务器资源构成的集合体 网站的组成部分 硬件组成 连接到网络上的计算机服务器 在服务器上运行的网络操作系统 Web服务器 应用程序服务器软件等 各种信息服务的文件资源 如网页文件 图象文件 声音文件等 对网站进行管理和维护的网站管理人员和开发人员等 2 网站文件及资源 资源 静态网页 最基本的网站提供内容 由HTML语言描述 包括文本 表格 图象及其它内容 每个用户访问时内容均相同 静态网页只要放在网站服务器的文件夹中授权用户访问即可 动态网页 网页内容随不同用户 不同的访问需求而发生变化 网页中不仅包含HTML代码 同时包含在Web服务器端执行的脚本程序代码 通过脚本程序代码进行计算 网页能够访问服务器端的数据资源 并将结果返回给用户 图象文件 如图象 动画 gif jpg bmp tif类文件等 可以作为网页中的插图 网页的背景图片 极大改善了网页的显示效果 数据库 当网站要通过动态网页提供各种服务时 通常要利用数据库来保存数据并提供数据服务 例如电子商务 BBS等 其它文件 声音 动画 流媒体资源等 可嵌入到网页或以超级链接方式下载到用户端执行 如swf wma rm avi等 3 网站的工作机制 当用户浏览器通过网络向网站发出请求时 网站的Web服务器会根据浏览器请求的页面是静态 动态网页而采取不同的处理机制 静态网页的处理机制 网站的Web服务器只是简单地将页面发送到请求的浏览器 动态网页的处理机制 Web服务器将控制权转交给应用程序服务器 应用程序服务器解释执行网页中包含的服务器端脚本代码 并根据脚本代码的要求访问数据库等服务器端资源 最后将计算结果转变为标准的HTML文件代码 由Web服务器将文件发送到浏览器 二 网站设计 网站的定位站点风格网站的CI形象网站的栏目和版块网站目录和链接结构 1 网站的定位 一个网站要有明确的目标定位 只有定位准确 目标鲜明 才可能作出切实可行的计划 按部就班地进行设计 网站的目标定位可体现在三个方面 题材和内容 应紧扣主题 并突出个性和特色 定位要准确 内容要精 不能过于宽泛 更不能包罗万象 漫无边际 网站域名网站名称 申请好记的域名和命名一个别致的网站名称对网站的形象和宣传推广有很大影响 如 搜狐 新浪 网易 263等 统一资源定位符URL URL UniformResourceLocator 统一资源定位符 用于在Internet中指定信息位置进行WWW浏览时在浏览器的地址栏中输入的地址就是URL的一种形式 协议名 文件路径 文件名称 指向某个网站的主页 指向某个网站的指定网页 超链接 利用超链接可以实现在文档间或文档中的跳转 链接路径 绝对路径 http 10 1 0 63 ASPWeb index asp相对路径在线论坛基于根目录的路径回到主页面 2 网站的风格 风格指的是站点的整体形象给浏览者的综合感受 包括版面布局 浏览方式 交互性和文字等诸多因素 网站风格要体现自己的特色 独树一帜 通过网站的某一点 如文字 色彩 技术等 能让浏览者明确分辨出此部分就是网站所独有的 注意 风格建立在有价值的内容之上 网站有风格而无内容 是不行的 必须保证内容的质量和价值性 清楚自己希望战点留给浏览者的印象 3 网站的CI形象 CI corporateidentity 通过视觉来统一企业的形象 包括 标志 色彩 字体和标语 网站的CI形象设计包括 设计网站的标志 logo logo是一个网站的特色和内涵的集中体现 必须设计并制作网站的标志 标志的设计 创意来自该网站的名称和内容 让浏览者一看到标志就联想到这个网站 设计网站的标准色彩 不同的色彩搭配产生不同的效果 并可能影响到访问者的情绪 标准色彩是指能体现网站形象和延伸内涵的色彩 主要用于标志 标题 主菜单和主色块 适合于网页标准色 蓝色 黄 橙色 黑 灰 白等 设计网站标准字体 是指用于标志 标题和主菜单的特有字体 设计网站宣传标语 最好用一句话甚至是一个词来高度概括 4 网站的栏目和版块 制作网页前 一定要先规划好网站 确定合理的栏目和版块 栏目实质上是一个突出显示网站主题的大纲索引 设计网站的栏目时应考虑以下内容 紧扣网站的主题一般做法是将网站主题按一定的方法分类并将其作为网站的主栏目 且主题栏目个数在总数上要占绝对优势 设计一个最近更新或网站指南栏目若主页未安排版面放置最新更新内容信息 需设置一个 最新更新 栏目 若主页层次较多 又无站内搜索引擎 则应设置一个 站点指南 栏目设定一个可以双向交流的栏目设定论坛 留言簿或邮件列表等 让浏览者留下信息或建议等 版块的概念比栏目大 每一个版块都有自己的栏目 设置版块时 注意各版块要相对独立 相互关联 且版块的内容要围绕站点的主题 5 网站的目录和链接结构 网站目录是指建立网站时创建的目录 站点上的所有网页及相关资源都分门别类 有序地存放在目录中 目录结构好坏对浏览者没有太大影响 但对站点本身的上传维护 内容扩充和移植有重要影响 COMWeb网站结构 建议 不要将所有文件都存放在根目录下 会造成文件管理混乱 上传速度慢等 应尽量减少根目录下的文件数 按栏目内容建立子目录 子目录的建立应基于主菜单栏目 需要经常更新的栏目 可建立独立的子目录 相关性强 不需经常更新的栏目 可合并放在一个统一的子目录下 所有程序文件应放在特定目录下所有需要下载的文件最好放在一个目录下在每个主目录下都建立images目录目录的层次不要太深 一般不超过三层 三 网站的开发流程 网站的开发人员 由一个集体来完成 主导网站开发的单位和客户项目负责人美术动画设计人员程序设计师维护人员网站开发的流程定义站点建立网站结构设计和制作主页其它页面制作测试页面发布和维护 1 定义站点 明确建立网站的目的 确定网站提供的内容 及搜集网站资料 建立网站目的很多 如销售产品 树立形象 提供信息或游戏娱乐等 目的一定要明确 否则会影响到以后的设计 确定建立网站的目的 需要参与网站设计的各单位及成员一起构思 讨论 取得共识后确保开发过程不会发生争议 能够有效地进行网站建设 确定网站内容 网站内容必须按照网站目的来选择且不能有内容越多越好的思想 应该有所侧重 与网站主题有关的内容选择相对多一点 进行资料的搜集 主要指文本 图片 动画及背景音乐等 设计企业网站时 一般由客户提供大部分资料 然后对资料进行整理和筛选 2 建立网站结构 规划出网站的外观及工作方式 第一步就是建立网站结构流程图 图中应包括网站的所有关键页面及与其它网页的关系 技术要点和主要的链接也应在其中 建立结构时 可先绘制网站结构的草图 将所希望的网页内容全部加入进去 然后与其它开发人员一起研究讨论 最后确定网站结构图注意事项 网页的浏览线路是否流畅 是否能够引导浏览者正确地浏览等 3 设计和制作主页 对于一个网站来说 主页是至关重要 主页制作要先绘制一张草图 图中应包括网站标志 广告条 菜单栏 友情链接等基本部件 且根据部件重要性合理布置 主页内容一般是比较概括性文字 只是起一个引导性作用 文字不应太多 制作主页时不要使用太多或容量太大的图片和动画 太大将影响传输速度 4 其它页面制作 其它页面没有主页复杂 但方法相同 需要注意的问题 和主页保持相同的风格要有返回主页的链接目录结构不要超过三层 5 测试页面 主要包括网页的测试及网站的验证与调试 测试网页 兼容性测试 检查浏览器版本的兼容性链接测试 检查链接是否有效和正确实地测试 将网页上传到Web服务器 测试链接 下载速度等 网站的验证与测试 尽最大努力找出网站的所有错误 注意网站的可浏览性 在不同浏览器中浏览的效果有所差异 最好在几个不同的浏览器及不同版本中浏览测试 6 发布和维护 网站在服务器上发布 上传网站常用软件 CuteFTPFlashFXPLeapFTPWS FTP等发布网站以后 还需要对网站做定期维护 如内容更新和版面扩展等 四 常用网站开发工具 FrontPage Microsoft公司 最新版本2003优点 易学易用 图形化界面 和Word相似缺点 生成代码过大主要功能 允许客户使用图片库组件类似PowerPoint的图形工具通过浏览器远程管理一个SharePoint团队站点使用分析报告追踪访客如何访问并使用网站增强的发布功能改进的查找和替换使用数据库向导 用户可在网页上显示数据库内容 DreamweaverMX Macromedia特点 最佳的制作效率网站管理控制能力 提供代码视图 设计视图与代码 设计视图切换 并包含HomeSite等HTML代码编辑器梦幻模板和XML浏览