Web程序设计(第二版)-04.pptVIP

计算机网络原理、技术及应用 Web 程 序 设 计 目 录 第 1 章 Web程序设计基础 第 2 章 Web程序及运行环境 第 3 章 标记语言HTML规范 第 4 章 网页设计与制作 第 5 章 客户端编程 第 6 章 服务端编程 第 4 章 网页设计与制作 4.1 网页设计基础 4.2 使用Front Page 4.3 网页编辑 4.4 设置标记属性 4.5 定义和使用样式 4.6 Frame框架和IFrame框 4.1 网页设计基础 页面功能与内容设计 页面布局设计 页面视觉设计 页面效果设计 页面功能与内容设计 Web应用（网站） 主目录，首页 子目录、网页文件及各类其他文件 数据库 Web应用 == 传统的计算机软件系统 软件系统分析、设计和开发相关的方法和模式进行 生命周期法 原型法 MVC设计模式 MVC设计模式 在Web开发中，模型－视图－控制器（Model-View-Controller，MVC）设计模式是一种比较流行的设计模式。 MVC设计模式 Xerox　PARC在20世纪80年代为编程语言Smalltalk－80发明的一种软件设计模式 核心思想是在系统开发中把商业逻辑，界面显示和数据进行分离，强制性的使应用程序的输入、处理和输出分开，分成相对独立而又能协同工作的3个组成部分：模型（Model）、视图（View）、控制器（Controller），它们各自处理自己的任务。 模型，表示企业数据和业务规则，在MVC的三个部件中，模型拥有最多的处理任务，实现具体的业务逻辑、状态管理的功能。 视图，是用户看到并与之交互的界面，通常实现数据的输入和输出功能。 控制器，控制整个业务流程，实现View层跟Model层的协同工作。控制器接受用户的输入并调用模型和视图去完成用户的需求。 网页功能进行分类 根据MVC设计模式，可以将网页功能进行分类 用于输入输出的页面（视图）； 服务端脚本程序页面（模型），这类页面不在浏览器中显示，主要是负责数据的查询、存储等； 导航页面，类似MVC中的控制器，也类似于传统程序中的菜单，实现页面之间的调用和导航，典型的导航页面就是站点首页。 网页内容与表现形式 网页内容 网站标志，导航，菜单，图片按钮，表单样式，表格数据文字表现，新闻，公告，讨论区，blogs，友情链接，广告条，版权信息等。 表现形式 文本、图片、动画等不同的媒体形式来展示，以产生更好的用户体验 页面布局设计 网页布局设计方法 页面布局的草图 加工 定稿 影响因素 页面尺寸，页面尺寸和显示器大小及分辨率有关系 整体造型 政府网页 商业站点 游戏场景 时尚站点 页头 页脚 菜单 超链接 常见页面布局-1 基于栏目的页面布 大部分的门户网站首页即采用基于栏目的页面布局形式，例如，sina，yahoo，163，265上网导航等 优点，基于栏目的页面布局主要应用于一些商业网站的首页。为吸引用户，增加用户访问量，从商业运营的目的出发，网站的内容很多，分成了不同的超链接区域（版块）。为节省屏幕空间，在栏目内往往还使用标签，以组织更多的内容。 常见页面布局-2 整幅效果型布局 页面采用大幅图片或Flash动画，在底部加一“登录”按钮，通常用于站点首页。 特点，页面美观，可以较好的展示企业形象。 缺点，登录速度较慢。 常见页面布局-3 “口”型页面布局 页面一般上下各有一个广告条，左面是主菜单，右面放友情链接等，中间是主要内容，这种页面布局也经常用于一些站点的首页设计。 优点，充分利用版面，信息量大。 缺点，页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计。 常见页面布局-4 “工”型结构布局 所谓“工”型结构布局，是指将页面分成上、中、下三个部分，页面顶部为横条网站标志+广告条，下面是版权等信息，中间为主要内容，又分为左右两个部分，左面为主菜单，右面显示内容的页面布局形式。 优点 “工”型页面布局是网页设计中用的最广泛的一种布局方式，这种布局的优点是页面结构清晰，主次分明。 缺点 规矩呆板，如果细节和色彩上搭配不好，很难让人留下印象，不适宜做前卫的和个性化强的站点。 常见页面布局-5 自顶向下层次结构布局 将页面自顶向下分成几个平行的区域，顶部是页头，接下来的区域分别放置超链接块，最下面的区域显示具体的文章正文内容。一些文章页面或注册页面等经常采用这种类型的页面布局。 常见页面布局-6 自由式结构布局 页面结构布局打破了传统的页头、页尾、菜单、栏目、超链接区域等布局模式，把页面设计成一张极具创意的广告作品 特点 自由式结构布局的优点是页面靓丽、现代、轻松、节奏明快，很容易让访问者驻足欣赏。 缺点，下载速度缓慢，文字信息量少，信息的逻辑表达能力弱，浏览者不易直奔