《《Web程序设计（第二版）》-郝兴伟-电子教案 04》由会员分享，可在线阅读，更多相关《《Web程序设计（第二版）》-郝兴伟-电子教案 04（40页珍藏版）》请在金锄头文库上搜索。
1、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应用 = 传统的计算
2、机软件系统 软件系统分析、设计和开发相关的方法和模式进行 生命周期法 原型法 MVC设计模式,MVC设计模式,在Web开发中，模型视图控制器（Model-View-Controller，MVC）设计模式是一种比较流行的设计模式。 MVC设计模式 Xerox PARC在20世纪80年代为编程语言Smalltalk80发明的一种软件设计模式 核心思想是在系统开发中把商业逻辑，界面显示和数据进行分离，强制性的使应用程序的输入、处理和输出分开，分成相对独立而又能协同工作的3个组成部分：模型（Model）、视图（View）、控制器（Controller），它们各自处理自己的任务。 模型，表示企业数据和业
3、务规则，在MVC的三个部件中，模型拥有最多的处理任务，实现具体的业务逻辑、状态管理的功能。 视图，是用户看到并与之交互的界面，通常实现数据的输入和输出功能。 控制器，控制整个业务流程，实现View层跟Model层的协同工作。控制器接受用户的输入并调用模型和视图去完成用户的需求。,网页功能进行分类,根据MVC设计模式，可以将网页功能进行分类 用于输入输出的页面（视图）； 服务端脚本程序页面（模型），这类页面不在浏览器中显示，主要是负责数据的查询、存储等； 导航页面，类似MVC中的控制器，也类似于传统程序中的菜单，实现页面之间的调用和导航，典型的导航页面就是站点首页。,将网页按照MVC设计模式进行
4、分类可以更好的规划一个Web站点，保证站点的可扩展性、灵活性和可维护性，这也是所有的软件设计模式所追求的目标。,网页内容与表现形式,网页内容 网站标志，导航，菜单，图片按钮，表单样式，表格数据文字表现，新闻，公告，讨论区，blogs，友情链接，广告条，版权信息等。 表现形式 文本、图片、动画等不同的媒体形式来展示，以产生更好的用户体验,页面布局设计,网页布局设计方法 页面布局的草图 加工 定稿 影响因素 页面尺寸，页面尺寸和显示器大小及分辨率有关系 整体造型 政府网页 商业站点 游戏场景 时尚站点 页头 页脚 菜单 超链接,常见页面布局-1,基于栏目的页面布 大部分的门户网站首页即采用基于栏目
5、的页面布局形式，例如，sina，yahoo，163，265上网导航等 优点，基于栏目的页面布局主要应用于一些商业网站的首页。为吸引用户，增加用户访问量，从商业运营的目的出发，网站的内容很多，分成了不同的超链接区域（版块）。为节省屏幕空间，在栏目内往往还使用标签，以组织更多的内容。,常见页面布局-2,整幅效果型布局 页面采用大幅图片或Flash动画，在底部加一“登录”按钮，通常用于站点首页。 特点，页面美观，可以较好的展示企业形象。 缺点，登录速度较慢。,常见页面布局-3,“口”型页面布局 页面一般上下各有一个广告条，左面是主菜单，右面放友情链接等，中间是主要内容，这种页面布局也经常用于一些站点
6、的首页设计。 优点，充分利用版面，信息量大。 缺点，页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计。,常见页面布局-4,“工”型结构布局 所谓“工”型结构布局，是指将页面分成上、中、下三个部分，页面顶部为横条网站标志+广告条，下面是版权等信息，中间为主要内容，又分为左右两个部分，左面为主菜单，右面显示内容的页面布局形式。 优点 “工”型页面布局是网页设计中用的最广泛的一种布局方式，这种布局的优点是页面结构清晰，主次分明。 缺点 规矩呆板，如果细节和色彩上搭配不好，很难让人留下印象，不适宜做前卫的和个性化强的站点。,常见页面布局-5,自顶向下层次结构布局 将页面自顶向下分成几个平行的区
7、域，顶部是页头，接下来的区域分别放置超链接块，最下面的区域显示具体的文章正文内容。一些文章页面或注册页面等经常采用这种类型的页面布局。,常见页面布局-6,自由式结构布局 页面结构布局打破了传统的页头、页尾、菜单、栏目、超链接区域等布局模式，把页面设计成一张极具创意的广告作品 特点 自由式结构布局的优点是页面靓丽、现代、轻松、节奏明快，很容易让访问者驻足欣赏。 缺点，下载速度缓慢，文字信息量少，信息的逻辑表达能力弱，浏览者不易直奔主题，信息查找麻烦。 应用 自由式结构布局一般用在时尚类站点上，如时装、化妆品等以崇尚现代、美感为主题的站点，专业性的商务站点不宜采用。,页面视觉设计,页面视觉 视觉设
8、计是指利用视觉符号来传递各种信息的设计，其应用的范畴很广，可以包括工业产品设计，广告设计，新媒体设计，服饰设计等等。 页面视觉设计分成图形、字体和色彩几个方面 色彩设计 不同功能的网站，其颜色的主色调设计也不相同。 其次是颜色的搭配 。 图形的应用 用于信息反馈 增加趣味性 文字的字体 大号字 空白，提高页面的易读性和易用性 ，空白可以分离出重要信息，使眼睛得到休息，并给人以冷静和有秩序的感觉。,页面效果设计,效果设计 效果设计就是利用Photoshop等图形图像处理工具，按照页面的布局设计，来设计页面的完整图片 然后对图片进行切图，为下面的页面html代码编写准备images。,4.2 使用
9、Front Page制作网页,Front Page的功能 网站的新建与维护 网页制作 网页编辑 设置标记属性 定义和使用样式 Frame框架和IFrame框架,Front Page的功能,Front Page的功能 网站的新建与维护 网页制作 FrontPage主界面 设计模式 拆分模式 代码模式 预览模式,网站的新建与维护,站点管理 创建、删除、打开、发布站点。 站点的文件和文件夹进行操作 站点进行安全性管理 新建网站 创建一个Web站点，本质上就是建立一个主目录，然后在主目录下创建子目录和网页文件。 任意的一个物理目录，都可以作为站点打开,新建站点,操作步骤 执行“文件”菜单中的“新建”命
10、令，显示“新建”任务窗格， 在“新建网站”区域，点击其中的任何一个超链接，都打开“网站模版”对话框 单击“个人站点”，在指定新网站位置文本框中，输入一个文件夹名，该文件夹即为站点主目录，单击“确定”按钮。先导则自动创建一个站点主目录，并根据模版，创建相应的子文件夹和网页文件，,新建网页,在“文件”菜单中，执行“打开网站”命令，选择要打开的网站主目录。 在“文件”菜单中，执行“新建”命令，在客户区右侧显示“新建”任务窗格。 在网站文件夹列表中，单击要新建网页的文件夹。 在“新建”任务窗格中，单击“空白网页”超链接，将新建一个空白网页。单击“其他网页模版”，则打开“网页模版”对话框，显示Front
11、Page提供的默认模版,4.3 网页编辑,输入文本内容 插入图片 建立超链接或书签 图像地图 插入表格 插入表单,输入文本内容,输入文本内容 格式化 生成HTML代码,插入图片,插入图片 将插入点定位到要插入图片的地方（本例定位到文字的开始） 选择菜单“插入”、“图片”、“来自文件”，打开“图片”对话框。 设置图片属性。设置图片由于图片的高度和文字不一致，接下来应该设置图片的环绕方式。 右单击图片，在快捷菜单中，执行“图片属性”命令，打开图片属性对话框，设置图片环绕样式。 格式化 生成HTML代码,建立超链接或书签,标记超链接 选定超链接的文本或图片 单击工具栏上的“超链接”按钮 定义书签 在
12、网页中选定文字，然后在“插入”菜单中，执行“书签”命令，打开“书签”对话框 在“书签”对话框中，显示书签名称和网页中已经定义的书签列表，输入书签名，然后单击“确定”按钮,建立图像地图,在“插入”菜单中，指向“图片”，执行“来自文件”命令，插入一幅图片 单击图片，则在FrontPage窗口的底部显示图片工具栏。 定义书签 在网页中选定文字，然后在“插入”菜单中，执行“书签”命令，打开“书签”对话框 在“书签”对话框中，显示书签名称和网页中已经定义的书签列表，输入书签名，然后单击“确定”按钮,建立图像地图（Cont.）,图像地图,图像地图HTML代码,HTML代码 ,插入表格,在网页中插入表格，选
13、择菜单“表格”，指向“插入”，打开“插入表格”对话框 表格编辑，插入到网页上的表格，可以进行一系列的编辑操作 设置表格属性 在表格上右单击 表格属性 单元格属性 生成HTML代码,插入表单,在“插入”菜单中，指向“表单”，执行“表单”，插入一个表单，然后依次执行要插入的控件（表单元素）命令，以便在表单中插入需要的表单元素。 调整表单布局。表单一般和表格联合使用，通过表格设置表单布局。 在“拆分”或“代码”视图中，手工调整代码。 设置表单属性，在表单上右单击，在快捷菜单中，执行“表单属性”命令 设置表单域属性，在表单域上右单击，在快捷菜单中，执行“表单域属性”命令 生成HTML代码,4.4 设置
14、标记属性,IntelliSense技术 是指当用户编辑到一个对象时，系统能动态的显示当前对象的方法、属性名列表，从而保证用户输入的正确性，或从中选择输入 。,使用行为面板,标记事件属性，行为 标记中的事件属性对应的事件，又称为行为，即用户对所标记对象的操作行为 。 行为函数 要设置标记的行为，首先选择“设计”视图，在“格式”中，执行“行为”命令，打开“行为”任务面板。 单击“插入”，在下拉列表中，可以选择一个行为。则在下面的事件列表中，显示行为对应的默认事件。 如果需要修改行为对应的事件，可以点击事件，则显示当前对象的可选事件列表，选择一个事件作为当前行为的激活事件即可。,4.5 定义样式,执
15、行“格式”菜单中的“样式”菜单命令，打开“样式”对话框 在左下侧列表中，可以选择“用户自定义样式”或者“HTML标记” 修改html标记默认样式 新建用户样式类 在文档的内部生成类似如下的代码,新建样式表文件,在“新建”任务窗格中，点击“其他网页模版”超链接，打开“网页模版”对话框，选择“样式表”选项卡，然后选择一个样式表模板，从而建立一个样式表文件。 通过执行“格式”菜单中的“样式”菜单命令来编辑样式即可。 使用样式表文件 在“格式”菜单中，执行“样式表链接”命令，打开“连接样式表”对话框，选择一个.css文件，例如mystyles1.css， 则在该网页的内增加下述语句： ,4.6 Fra
16、me框架,新建框架网页 在 “文件”菜单中，执行“新建”命令，打开“新建”任务窗格， 在新建网页区域，单击“其他网页模版”超链接，打开“网页模板”对话框 选择“框架网页”选项卡,Frame框架设属性设置,拆分与删除框架 改变框架窗格的大小 设置框架属性,Frame框架举例,定义样式表文件 a font-size:11pt; color:#0000FF; text-decoration:none; a:hover color:#FF0000; font-weight:bold; text-decoration:none; a:visited color: #0000FF; text-decoration: none; ,使用浮动框架IFrame,浮动框架IFrame 是一种特殊的框架，它允许在浏览器窗口中嵌套子窗口，在其中显示子页的内容。 ,Part B,网页设计与制作 The End,
