1 / 30

第 1 章 网站设计概论

第 1 章 网站设计概论. 要求：. 主要内容 一、 网站基本知识 二、 网站设计 三、 网站的开发流程 四、 常用网站开发工具 本章习题. 一、网站基本知识. 网站及其组成 网站的文件及资源 网站的工作机制. 1 、网站及其组成. 网站 就是由网页、图象、声音、动画及数据库等各种服务器资源构成的集合体。 网站的组成部分： 硬件组成： 连接到网络上的 计算机服务器。 在服务器上运行的 网络操作系统、 Web 服务器、应用程序服务器软件等。 各种 信息服务的文件资源 ，如网页文件、图象文件、声音文件等。

keely-graham
Download Presentation

第 1 章 网站设计概论

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第1章 网站设计概论

  2. 要求： 主要内容 一、网站基本知识 二、网站设计 三、网站的开发流程 四、常用网站开发工具 本章习题

  3. 一、网站基本知识 • 网站及其组成 • 网站的文件及资源 • 网站的工作机制

  4. 1、网站及其组成 • 网站就是由网页、图象、声音、动画及数据库等各种服务器资源构成的集合体。 • 网站的组成部分： • 硬件组成：连接到网络上的计算机服务器。 • 在服务器上运行的网络操作系统、Web服务器、应用程序服务器软件等。 • 各种信息服务的文件资源，如网页文件、图象文件、声音文件等。 • 对网站进行管理和维护的网站管理人员和开发人员等。

  5. 2、网站文件及资源 • 资源： • 静态网页：最基本的网站提供内容，由HTML语言描述，包括文本、表格、图象及其它内容，每个用户访问时内容均相同。静态网页只要放在网站服务器的文件夹中授权用户访问即可。 • 动态网页：网页内容随不同用户、不同的访问需求而发生变化，网页中不仅包含HTML代码，同时包含在Web服务器端执行的脚本程序代码。通过脚本程序代码进行计算。网页能够访问服务器端的数据资源。并将结果返回给用户。

  6. 图象文件：如图象、动画，.gif、jpg、bmp、tif类文件等，可以作为网页中的插图、网页的背景图片，极大改善了网页的显示效果。图象文件：如图象、动画，.gif、jpg、bmp、tif类文件等，可以作为网页中的插图、网页的背景图片，极大改善了网页的显示效果。 • 数据库：当网站要通过动态网页提供各种 服务时，通常要利用数据库来保存数据并提供数据服务。例如电子商务、BBS等。 • 其它文件：声音、动画、流媒体资源等，可嵌入到网页或以超级链接方式下载到用户端执行。如 swf、wma、rm、avi等。

  7. 3、网站的工作机制 • 当用户浏览器通过网络向网站发出请求时，网站的Web服务器会根据浏览器请求的页面是静态、动态网页而采取不同的处理机制。 • 静态网页的处理机制：网站的Web服务器只是简单地将页面发送到请求的浏览器。 • 动态网页的处理机制：Web服务器将控制权转交给应用程序服务器，应用程序服务器解释执行网页中包含的服务器端脚本代码，并根据脚本代码的要求访问数据库等服务器端资源，最后将计算结果 转变为标准的HTML文件代码，由Web服务器将文件发送到浏览器。

  8. 二、网站设计 • 网站的定位 • 站点风格 • 网站的CI形象 • 网站的栏目和版块 • 网站目录和链接结构

  9. 1、网站的定位 • 一个网站要有明确的目标定位，只有定位准确、目标鲜明，才可能作出切实可行的计划，按部就班地进行设计。 • 网站的目标定位可体现在三个方面： • 题材和内容：应紧扣主题，并突出个性和特色。定位要准确，内容要精，不能过于宽泛，更不能包罗万象，漫无边际。 • 网站域名 • 网站名称：申请好记的域名和命名一个别致的网站名称对网站的形象和宣传推广有很大影响。如：搜狐、新浪、网易、263等。

  10. 2、网站的风格 • 风格指的是站点的整体形象给浏览者的综合感受，包括版面布局、浏览方式、交互性和文字等诸多因素。 • 网站风格要体现自己的特色，独树一帜。 • 通过网站的某一点，如文字、色彩、技术等，能让浏览者明确分辨出此部分就是网站所独有的。 • 注意： • 风格建立在有价值的内容之上。网站有风格而无内容，是不行的，必须保证内容的质量和价值性； • 清楚自己希望战点留给浏览者的印象。

  11. 3、网站的CI形象 • CI(corporate identity)：通过视觉来统一企业的形象。包括：标志、色彩、字体和标语。 • 网站的CI形象设计包括： • 设计网站的标志(logo)：logo是一个网站的特色和内涵的集中体现，必须设计并制作网站的标志。标志的设计、创意来自该网站的名称和内容，让浏览者一看到标志就联想到这个网站。 • 设计网站的标准色彩： • 不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。 • 标准色彩是指能体现网站形象和延伸内涵的色彩，主要用于标志、标题、主菜单和主色块。 • 适合于网页标准色：蓝色、黄/橙色、黑/灰/白等

  12. 设计网站标准字体：是指用于标志、标题和主菜单的特有字体。设计网站标准字体：是指用于标志、标题和主菜单的特有字体。 • 设计网站宣传标语：最好用一句话甚至是一个词来高度概括

  13. 4、网站的栏目和版块 • 制作网页前，一定要先规划好网站，确定合理的栏目和版块。栏目实质上是一个突出显示网站主题的大纲索引。 • 设计网站的栏目时应考虑以下内容： • 紧扣网站的主题 一般做法是将网站主题按一定的方法分类并将其作为网站的主栏目，且主题栏目个数在总数上要占绝对优势。 • 设计一个最近更新或网站指南栏目 若主页未安排版面放置最新更新内容信息，需设置一个“最新更新”栏目，若主页层次较多，又无站内搜索引擎，则应设置一个“站点指南”栏目 • 设定一个可以双向交流的栏目 设定论坛、留言簿或邮件列表等，让浏览者留下信息或建议等。 • 版块的概念比栏目大，每一个版块都有自己的栏目。设置版块时，注意各版块要相对独立，相互关联，且版块的内容要围绕站点的主题。

  14. 5、网站的目录和链接结构 • 网站目录是指建立网站时创建的目录，站点上的所有网页及相关资源都分门别类、有序地存放在目录中。 • 目录结构好坏对浏览者没有太大影响，但对站点本身的上传维护，内容扩充和移植有重要影响。

  15. 建议： • 不要将所有文件都存放在根目录下，会造成文件管理混乱，上传速度慢等。应尽量减少根目录下的文件数； • 按栏目内容建立子目录： • 子目录的建立应基于主菜单栏目；需要经常更新的栏目，可建立独立的子目录，相关性强，不需经常更新的栏目，可合并放在一个统一的子目录下。 • 所有程序文件应放在特定目录下 • 所有需要下载的文件最好放在一个目录下 • 在每个主目录下都建立 images 目录 • 目录的层次不要太深，一般不超过三层；

  16. 三、网站的开发流程 网站的开发人员（由一个集体来完成） • 主导网站开发的单位和客户 • 项目负责人 • 美术动画设计人员 • 程序设计师 • 维护人员 网站开发的流程 • 定义站点 • 建立网站结构 • 设计和制作主页 • 其它页面制作 • 测试页面 • 发布和维护

  17. 1、定义站点 • 明确建立网站的目的，确定网站提供的内容，及搜集网站资料。 • 建立网站目的很多，如销售产品、树立形象、提供信息或游戏娱乐等。目的一定要明确，否则会影响到以后的设计。 • 确定建立网站的目的：需要参与网站设计的各单位及成员一起构思，讨论，取得共识后确保开发过程不会发生争议，能够有效地进行网站建设。

  18. 确定网站内容：网站内容必须按照网站目的来选择且不能有内容越多越好的思想。应该有所侧重，与网站主题有关的内容选择相对多一点。确定网站内容：网站内容必须按照网站目的来选择且不能有内容越多越好的思想。应该有所侧重，与网站主题有关的内容选择相对多一点。 • 进行资料的搜集：主要指文本、图片、动画及背景音乐等。设计企业网站时，一般由客户提供大部分资料，然后对资料进行整理和筛选。

  19. 2、建立网站结构 • 规划出网站的外观及工作方式； • 第一步就是建立网站结构流程图，图中应包括网站的所有关键页面及与其它网页的关系，技术要点和主要的链接也应在其中。 • 建立结构时，可先绘制网站结构的草图，将所希望的网页内容全部加入进去，然后与其它开发人员一起研究讨论， • 最后确定网站结构图 • 注意事项：网页的浏览线路是否流畅，是否能够引导浏览者正确地浏览等

  20. 3、设计和制作主页 • 对于一个网站来说，主页是至关重要。 • 主页制作要先绘制一张草图，图中应包括网站标志、广告条、菜单栏、友情链接等基本部件，且根据部件重要性合理布置。 • 主页内容一般是比较概括性文字，只是起一个引导性作用，文字不应太多。 • 制作主页时不要使用太多或容量太大的图片和动画。太大将影响传输速度。

  21. 4、其它页面制作： 其它页面没有主页复杂，但方法相同。需要注意的问题： • 和主页保持相同的风格 • 要有返回主页的链接 • 目录结构不要超过三层

  22. 5、测试页面 • 主要包括网页的测试及网站的验证与调试； • 测试网页： • 兼容性测试：检查浏览器版本的兼容性 • 链接测试：检查链接是否有效和正确 • 实地测试：将网页上传到Web服务器，测试链接，下载速度等。

  23. 网站的验证与测试： • 尽最大努力找出网站的所有错误。 • 注意网站的可浏览性，在不同浏览器中浏览的效果有所差异。最好在几个不同的浏览器及不同版本中浏览测试。

  24. 6、发布和维护 • 网站在服务器上发布-----上传网站 常用软件： • CuteFTP • Flash FXP • Leap FTP • WS_FTP等 • 发布网站以后，还需要对网站做定期维护，如内容更新和版面扩展等。

  25. 四、常用网站开发工具 • FrontPage：Microsoft公司，最新版本2003 • 优点：易学易用，图形化界面，和Word相似 • 缺点：生成代码过大 • 主要功能： • 允许客户使用图片库组件 • 类似PowerPoint的图形工具 • 通过浏览器远程管理一个SharePoint团队站点 • 使用分析报告追踪访客如何访问并使用网站 • 增强的发布功能 • 改进的查找和替换 • 使用数据库向导，用户可在网页上显示数据库内容。

  26. Dreamweaver MX: Macromedia • 特点： • 最佳的制作效率 • 网站管理 • 控制能力：提供代码视图、设计视图与代码/设计视图切换，并包含HomeSite等HTML代码编辑器 • 梦幻模板和XML • 浏览器适应性 • Web应用程序开发能力

  27. 本章习题 1、网站就是由_______和图象、声音、动画及数据库等各种服务器资源构成的集合体。 2、_______指的是站点的整体形象给浏览者的综合感受。 A、风格 B、布局 C、CI形象 D、栏目 3、静态网页和动态网页的工作机制。 4、网站的CI形象设计内容 5、网站的开发流程。

  28. 第1章 结束

More Related