标记语言与网页制作2.pptVIP

计算机网络原理、技术及应用 大学计算机基础 目 录 第 1 章 计算机基础知识 第 2 章 操作系统 第 3 章 办公自动化软件 第 4 章 多媒体技术及其应用 第 5 章 计算机网络基础 第 6 章 互联网及其应用 第 7 章 标记语言与网页制作 第 8 章 国民经济与社会信息化 第 7 章 标记语言与网页制作 Part B 网页设计与制作 网页设计基础 页面功能与内容设计 页面布局设计 页面视觉设计 使用Front Page 7.2 网页设计基础 页面功能与内容设计 系统设计方法学 MVC设计模式 页面功能分类 页面布局设计 页面视觉设计 系统设计方法学 生命周期法（5个阶段） 系统分析 系统设计 系统开发 系统测试 运行与维护 原型法 MVC设计模式 模型（Model），实现具体的业务逻辑、状态管理的功能。被模型返回的数据是中立的，就是说模型与数据格式无关，这样一个模型能为多个视图提供数据。 视图（View），是用户看到并与之交互的界面，通常实现数据的输入和输出功能。 控制器（Controller），控制器控制整个业务流程，实现View层跟Model层的协同工作。控制器接受用户的输入并调用模型和视图去完成用户的需求。 网页功能分类 网页功能分类 用于输入输出的页面（视图）； 服务端脚本程序页面（模型），这类页面不在浏览器中显示，主要是负责数据的查询、存储等； 导航页面，类似MVC中的控制器，也类似于传统程序中的菜单，实现页面之间的调用和导航，典型的导航页面就是站点首页。 页面内容 网站标志，导航，菜单，图片按钮，表单样式，表格数据文字表现，新闻，公告，讨论区，blogs，友情链接，广告条，版权信息等。 对网页内容的表现形式，应根据内容和用户特点，选用文本、图片、动画等不同的媒体形式来展示，以产生更好的用户体验。 页面布局设计 网页布局设计方法 页面尺寸 整体造型 页头 页脚 菜单 超链接 常见的网页布局 基于栏目的页面布局 整幅效果型布局 “口”型页面布局 “工”型结构布局 自顶向下层次结构布局 自由式结构布局 页面视觉设计 什么是视觉设计？ 视觉设计是指利用视觉符号来传递各种信息的设计。 Web中的视觉设计要素 图形 字体 色彩 颜色搭配 明快的颜色 常用颜色 绿色，但是深蓝、橙色和粉红色也十分人气。浓重的主色调表明了幽默的态度，也有助于人们迅速注意到页面上的重要元素。 主流web2.0网站配色参考方案 例子 7.3 使用Front Page 2003 FrontPage的功能 网站管理与维护 网页制作 使用FrontPage进行网页制作 新建网页 网页编辑 定义和使用样式 框架网页 FrontPage2003主窗口 主界面 新建网站 执行“文件”菜单中的“新建…”命令，显示“新建”任务窗格，在“新建网站”区域，点击其中的任何一个超链接，都打开“网站模版”对话框 本地网站维护 在FrontPage中，执行“文件”菜单中的“打开网站…”命令，打开“打开网站”对话框 执行“视图”菜单中的“文件夹列表”命令，显示网站文件夹结构。接下来就可以对站点进行各种各样的维护和管理操作了 远程网站维护（1） 维护方式 终端服务与远程桌面 远程管理(HTML) FTP服务 站点远程维护（Web服务扩展） Web服务器端设置 在安装的IIS组件中，选择安装“Front Page 2002 Server Extensions” 在安装的IIS组件中，选择安装“万维网服务”组件，选择其中的“WebDAV发布” 在IIS控制台中，启用Web服务扩展中的相应服务 在IIS控制台中，查看站点属性，显示“Server 2002 Extensions”选项卡。然后，在站点上右单击，指向“所有任务”，执行“配置Server 2002 Extensions”命令。 远程网站维护（2） 当对Web服务器和相应的站点进行上述的一系列设置后，用户就可以对服务器进行远程管理（Web接口为http://网址：6859/） 利用FrontPage对站点进行远程维护了。在网站视图下，单击“远程网站”选项卡，然后单击窗口中的“远程网站属性…”，打开“远程网站属性”对话框 新建网页 要新建一个网页，通常经过以下几个步骤： 在“文件”菜单中，执行“打开网站…”命令，选择要打开的网站主目录。因为每一个网页都是网站的一部分，因此，新建网页前，首先应打开网页隶属的网站。 在“文件”菜单中，执行“新建…”命令，在客户区右侧显示“新建”任务窗格。 在“新建”任务窗格中，单击“空白网页”超链接，将新建一个空白网页。 网页编辑 包括： 输入文本内容 插入图片 建立超链接或书签 定义书签 文本超链接