《Web程序设计（第二版）》课件04

第1章Web程序设计基础第2章Web程序及运行环境第3章标记语言HTML规范

第4章网页设计与制作第5章客户端编程第6章服务端编程目录第4章

网页设计与制作4.1网页设计基础4.2使用FrontPage4.3网页编辑4.4设置标记属性4.5定义和使用样式4.6Frame框架和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中的控制器，也类似于传统程序中的菜单，实现页面之间的调用和导航，典型的导航页面就是站点首页。将网页按照MVC设计模式进行分类可以更好的规划一个Web站点，保证站点的可扩展性、灵活性和可维护性，这也是所有的软件设计模式所追求的目标。网页内容与表现形式网页内容网站标志，导航，菜单，图片按钮，表单样式，表格数据文字表现，新闻，公告，讨论区，blogs，友情链接，广告条，版权信息等。表现形式文本、图片、动画等不同的媒体形式来展示，以产生更好的用户体验页面布局设计网页布局设计方法页面布局的草图加工定稿影响因素页面尺寸，页面尺寸和显示器大小及分辨率有关系整体造型政府网页商业站点游戏场景时尚站点页头页脚菜单超链接常见页面布局-1基于栏目的页面布大部分的门户网站首页即采用基于栏目的页面布局形式，例如，sina，yahoo，163，265上网导航等优点，基于栏目的页面布局主要应用于一些商业网站的首页。为吸引用户，增加用户访问量，从商业运营的目的出发，网站的内容很多，分成了不同的超链接区域（版块）。为节省屏幕空间，在栏目内往往还使用标签，以组织更多的内容。常见页面布局-2整幅效果型布局页面采用大幅图片或Flash动画，在底部加一“登录”按钮，通常用于站点首页。特点，页面美观，可以较好的展示企业形象。缺点，登录速度较慢。常见页面布局-3“口”型页面布局页面一般上下各有一个广告条，左面是主菜单，右面放友情链接等，中间是主要内容，这种页面布局也经常用于一些站点的首页设计。优点，充分利用版面，信息量大。缺点，页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计。常见页面布局-4“工”型结构布局所谓“工”型结构布局，是指将页面分成上、中、下三个部分，页面顶部为横条网站标志+广告条，下面是版权等信息，中间为主要内容，又分为左右两个部分，左面为主菜单，右面显示内容的页面布局形式。优点“工”型页面布局是网页设计中用的最广泛的一种布局方式，这种布局的优点是页面结构清晰，主次分明。缺点规矩呆板，如果细节和色彩上搭配不好，很难让人留下印象，不适宜做前卫的和个性化强的站点。常见页面布局-5自顶向下层次结构布局将页面自顶向下分成几个平行的区域，顶部是页头，接下来的区域分别放置超链接块，最下面的区域显示具体的文章正文内容。一些文章页面或注册页面等经常采用这种类型的页面布局。常见页面布局-6自由式结构布局页面结构布局打破了传统的页头、页尾、菜单、栏目、超链接区域等布局模式，把页面设计成一张极具创意的广告作品特点自由式结构布局的优点是页面靓丽、现代、轻松、节奏明快，很容易让访问者驻足欣赏。缺点，下载速度缓慢，文字信息量少，信息的逻辑表达能力弱，浏览者不易直奔主题，信息查找麻烦。应用自由式结构布局一般用在时尚类站点上，如时装、化妆品等以崇尚现代、美感为主题的站点，专业性的商务站点不宜采用。页面视觉设计页面视觉视觉设计是指利用视觉符号来传递各种信息的设计，其应用的范畴很广，可以包括工业产品设计，广告设计，新媒体设计，服饰设计等等。页面视觉设计分成图形、字体和色彩几个方面色彩设计不同功能的网站，其颜色的主色调设计也不相同。其次是颜色的搭配。图形的应用用于信息反馈增加趣味性文字的字体大号字空白，提高页面的易读性和易用性，空白可以分离出重要信息，使眼睛得到休息，并给人以冷静和有秩序的感觉。页面效果设计效果设计效果设计就是利用Photoshop等图形图像处理工具，按照页面的布局设计，来设计页面的完整图片然后对图片进行切图，为下面的页面html代码编写准备images。4.2使用FrontPage制作网页FrontPage的功能网站的新建与维护网页制作网页编辑设置标记属性定义和使用样式Frame框架和IFrame框架FrontPage的功能FrontPage的功能网站的新建与维护网页制作FrontPage主界面设计模式拆分模式代码模式预览模式网站的新建与维护站点管理创建、删除、打开、发布站点。站点的文件和文件夹进行操作站点进行安全性管理新建网站创建一个Web站点，本质上就是建立一个主目录，然后在主目录下创建子目录和网页文件。任意的一个物理目录，都可以作为站点打开新建站点操作步骤执行“文件”菜单中的“新建…”命令，显示“新建”任务窗格，在“新建网站”区域，点击其中的任何一个超链接，都打开“网站模版”对话框单击“个人站点”，在指定新网站位置文本框中，输入一个文件夹名，该文件夹即为站点主目录，单击“确定”按钮。先导则自动创建一个站点主目录，并根据模版，创建相应的子文件夹和网页文件，新建网页在“文件”菜单中，执行“打开网站…”命令，选择要打开的网站主目录。在“文件”菜单中，执行“新建…”命令，在客户区右侧显示“新建”任务窗格。在网站文件夹列表中，单击要新建网页的文件夹。在“新建”任务窗格中，单击“空白网页”超链接，将新建一个空白网页。单击“其他网页模版”，则打开“网页模版”对话框，显示FrontPage提供的默认模版4.3网页编辑输入文本内容插入图片建立超链接或书签图像地图插入表格插入表单输入文本内容输入文本内容格式化生成HTML代码插入图片插入图片将插入点定位到要插入图片的地方（本例定位到文字的开始）选择菜单“插入”、“图片”、“来自文件”，打开“图片”对话框。设置图片属性。设置图片由于图片的高度和文字不一致，接下来应该设置图片的环绕方式。右单击图片，在快捷菜单中，执行“图片属性”命令，打开图片属性对话框，设置图片环绕样式。格式化生成HTML代码建立超链接或书签标记超链接选定超链接的文本或图片单击工具栏上的“超链接”按钮定义书签在网页中选定文字，然后在“插入”菜单中，执行“书签…”命令，打开“书签”对话框在“书签”对话框中，显示书签名称和网页中已经定义的书签列表，输入书签名，然后单击“确定”按钮建立图像地图在“插入”菜单中，指向“图片”，执行“来自文件…”命令，插入一幅图片单击图片，则在FrontPage窗口的底部显示图片工具栏。定义书签在网页中选定文字，然后在“插入”菜单中，执行“书签…”命令，打开“书签”对话框在“书签”对话框中，显示书签名称和网页中已经定义的书签列表，输入书签名，然后单击“确定”按钮建立图像地图（Cont.）图像地图图像地图HTML代码HTML代码<mapname="FPMap0"><areahref="city/beijing.htm"shape="circle"coords="286,100,17"><areahref="city/jinan.htm"shape="polygon"coords="279,129,295,111,323,122,305,136,287,145"></map><imgborder="0"src="chinamap.gif"width="433"height="270"usemap="#FPMap0">插入表格在网页中插入表格，选择菜单“表格”，指向“插入”，打开“插入表格”对话框表格编辑，插入到网页上的表格，可以进行一系列的编辑操作设置表格属性在表格上右单击表格属性单元格属性生成HTML代码插入表单在“插入”菜单中，指向“表单”，执行“表单”，插入一个表单，然后依次执行要插入的控件（表单元素）命令，以便在表单中插入需要的表单元素。调整表单布局。表单一般和表格联合使用，通过表格设置表单布局。在“拆分”或“代码”视图中，手工调整代码。设置表单属性，在表单上右单击，在快捷菜单中，执行“表单属性…”命令设置表单域属性，在表单域上右单击，在快捷菜单中，执行“表单域属性…”命令生成HTML代码4.4设置标记属性IntelliSense技术是指当用户编辑到一个对象时，系统能动态的显示当前对象的方法、属性名列表，从而保证用户输入的正确性，或从中选择输入。使用行为面板标记事件属性，行为标记中的事件属性对应的事件，又称为行为，即用户对所标记对象的操作行为。行为函数要设置标记的行为，首先选择“设计”视图，在“格式”中，执行“行为…”命令，打开“行为”任务面板。单击“插入”，在下拉列表中，可以选择一个行为。则在下面的事件列表中，显示行为对应的默认事件。如果需要修改行为对应的事件，可以点击事件，则显示当前对象的可选事件列表，选择一个事件作为当前行为的激活事件即可。4.5定义样式执行“格式”菜单中的“样式…”菜单命令，打开“样式”对话框在左下侧列表中，可以选择“用户自定义样式”或者“HTML标记”修改html标记默认样式新建用户样式类在文档的<head>..</head>内部生成类似如下的代码新建样式表文件在“新建”任务窗格中，点击“其他网页模版”超链接，打开“网页模版”对话框，选择“样式表”选项卡，然后选择一个样式表模板，从而建立一个样式表文件。通过执行“格式”菜单中的“样式…”菜单命令来编辑样式即可。使用样式表文件在“格式”菜单中，执行“样式表链接…”命令，打开“连接样式表”对话框，选择一个.css文件，例如mystyles1.css，则在该网页的<head>…</head>内增加下述语句：<linkrel="stylesheet"type="text/css"href="mystyles1.css">4.6Frame框架新建框架网页在“文件”菜单中，执行“新建”命令，打开“新建”任务窗格，在新建网页区域，单击“其他网页模版”超链接，打开“网页模板”对话框选择“框架网页”选项卡Frame框架设属性设置拆分与删除框架改变框架窗格的大小设置框架属性Frame框架举例定义样式表文件a{font-size:11pt;color:#0000FF;text-decoration:none;}a:hover{color:#FF0000;font-weight:bold