大学计算机基础-网页设计与制作

教学课件教学课件 北京航空航天北京航空航天大学大学 大学计算机基础大学计算机基础 1 第第9 9章章 网页设计与制作网页设计与制作 9.1 9.1 网站的建设与规划网站的建设与规划 9.2 9.2 使用使用FrontPage 2003FrontPage 2003制作网站制作网站 9.3 9.3 网站的发布和管理网站的发布和管理 2 本章重点本章重点 n网站建设的基本过程及常用的 网页制作工具 n使用FrontPage 2003建立网 站和编辑网页 n级联样式表CSS n网页布局的方法 n应用表单实现网页交互的方法 3 9.1 网站的建设与规划 u9.1.1 网页基本知识 u9.1.2 HTML语言简介 u9.1.3 常用的网页制作工 具 4 9.1.1 网页基本知识 nWWW(World Wide Web ) WWW是Internet上多媒体信息查询的工具。WEB由互相链接在一起的 网页构成，这些网页是由普通文本、超文本Hypertext，以及图表、图 片等构成。 nURL（Uniform Resource Locator） URL（统一资源定位器）是指向网络服务器中某个资源的地址，用 字符串来表示。其中包括协议、主机域名（或IP地址）、文件名等等。 n超级链接（Hyperlink） 超级链接是包含在网页中指向其他网页的指针。 n超文本 包含超链接的文本称为超文本。有时图像或图像的某部分也可以包 含超链接。 5 网页基本知识 n超媒体 当超文本网页中包含声音、动画、视频等其它媒体时，网页被称为 是超媒体的。浏览器一般通过外挂的帮助程序来显示这些超媒体信息。 n浏览器 用户通过称为浏览器的软件来观看网页，浏览器取回所请求的网页 ，解释其中所含的文本和格式命令，并正确的显示出来。 n网页与网站 网页由超文本标记语言（HTML，HyperText Markup Language）写 成，网页之间通过超链接相互组织成为反映某个主题的网站。 6 Web 工作模式 HTTPHTTP协议协议 用用HTMLHTML编写编写 http request http response http request http response HTTPHTTP协协 议议 用开发工具编写用开发工具编写 如如FrontPageFrontPage 浏览器浏览器 Web server HomepageHomepage 主页主页 网页网页 网页网页 7 Web 工作模式 n第一步：WEB浏览器向一个特定的服务器发 送WEB页面请求 。 n第二步：在每个WEB服务器上有一个服务进 程在TCP的80端口上监听由浏览器发来的建立 连接请求；在连接建立之后，寻找所请求的 WEB页面，并将所请求的网页传送给浏览器。 浏览器和服务器之间进行信息传输使用超文本传 输协议HTTP协议。 n第三步：WEB浏览器接收到所请求的网页， 并按照预定的格式显示出来。 8 网站建设的基本过程 n申请域名 有一个人们容易记住的域名，可以方便用户访问网站。域名是独一无二的 ，需要向网络信息中心申请。 n建立服务器主机 服务器主机应该能够提供7*24小时不间断联网服务，根据企业或个人的资 金、网络维护能力等不同可以选择不同的服务方式。 Ø自己建立服务器主机 大的企业、学校、政府部门等，有专门的技 术人员维护。 Ø主机托管模式 将服务器主机交给专门的网络运营部门管理。 Ø虚拟主机模式 租用网络运营商服务器主机的部分存储空间。 n设计网站 设计网站首先要确定网站的主题，围绕主题就可以确定网站的内容和网页 的风格。确定了主题和风格后就需要组织文字、图片、声音等网页素材制作网 页。 n制作网页 网页是用HTML语言写出来的文档，是纯文本文档。 9 网页设计 n确定网站主题 主题确定网站主要传播哪些内容和提供哪些服务。 n确定网页风格(选择视觉外观) 网页风格决定了网页的表现形式，决定于网站的主 题和内容，以达到内容和形式的统一。 n设计有效的页面布局 合理的网页布局可以使浏览者更加方便地浏览网页 。 n组织素材 确定了主题和风格后就需要组织文字、图片、声音 等网页素材来表现主题。 n制作网页 将各种网页素材组织到网页中 10 网页设计遵循的一般原则 n主题鲜明 一個主题鲜明、內容丰富具有特色的网站，通常要比什么都 有的大杂烩式的网站更加吸引人。 n形式与內容统一 网页的排版、布局、色彩、图形的运用要与网页中欲向网友 传达的有效信息相统一。 n风格要统一 风格的选用要尽量突出自己的个性，让浏览者有一个独特的 印象。 n栏目设计要合理 倘若內容较多，栏目设计要合理、清晰，让浏览者容易找到 所需的信息。 n导航清晰易懂 一个清晰、容易理解的导航栏，可以使新手快速了解到网站 的结构，便于转到其他的页面。 n时常更新內容 经常更新网页内容，给网友提供最新的信息，才能使网站更 有吸引力。 11 利用制作工具 编写HTML源代码 使用记事本等字处理软 件直接编写代码，保存 为.htm或.html的纯文本 文件 使用所见即所得的可 视化工具软件。 网页制作 网页文档中包含了网页元素及其显示格式，制作网页就 是将网页元素按照风格所确定的显示格式写成HTML文档。 12 9.1.2 HTML语言简介 HTML是一种简单的标记语言，它主要用 于描述Web文档的结构，HTML代码描述超 文本文档的格式。格式由浏览器解释和执行 。 Ø标记的一般格式为： 对象 对象 例如：我的主页 简介 13 超文本文档的结构 例： 我的第一个主页 这是一个简单的例子 文 档 头 部 文 档 体 文档头部定义网页的属性 文档体定义显示的文档内容和格 式14 图像的使用 n网页上的图像用标记表示，src属性是必须的， 其值说明图像的位置。 例如： n使用图像要考虑网络传输速度，大的图像文件需要相对 长的网络传输时间。 n不同格式的图像文件压缩比不同，图像质量也不同，文 件大小也不同。 n一般静态图像使用jpg格式，动态图像使用gif格式。 15 9.1.3 常用网页制作工具 vv 网页编写软件网页编写软件 FrontpageFrontpage 、D Dreamwaverreamwaver vv 图形图形/ /图像处理软件图像处理软件 PhotoshopPhotoshop、FireworksFireworks vv 网页动画制作软件网页动画制作软件 FlashFlash vv 常用网页脚本语言常用网页脚本语言 JavascriptJavascript 、VbscriptVbscript vv Java appletJava applet小程序小程序 vv 动态网页开发工具动态网页开发工具 AspAsp、JspJsp、PhpPhp 原来制作网页不是很难啊！原来制作网页不是很难啊！ 可是想做好也不简单！可是想做好也不简单！ 16 9.2 使用FrontPage 2003制作网站 u9.2.1 建立网站 u9.2.2 编辑网页 u9.2.3 编排网页格式 u9.2.4 使用图像 u9.2.5 保持网站的一致性外观 u9.2.6 网页的布局 u9.2.7 网页的动态效果 u9.2.8 应用表单实现交互功能 17 FrontPage 2003界面 设计网页 自动生成的 HTML语句 预览网页效果 基本内容区 文本 图像 表格 背景声音 超级链接 文 件 夹 列 表 18 9.2.1 建立网站 FrontPage 2003的网站管理功能强大 ，建立网站后，其中的文件被统一管理。 n使用模板建立网站 FrontPage 2003提供了多种网页模板和 网站模板，用户可以很方便地建立自己的 网站。 n自己设计网站 可以先建立一个空白网站或只有一个网 页的网站，然后在网站中添加其他网页的 方法自己设计。 19 使用模板 模板中预定义了网站的大致内容和布局，并使用某一种 主题创建风格一致的网页。主题包含了采用某种配色方案的 统一设计元素，包括字体、图形、背景、导航栏、水平线及 其他网页元素。 20 自己设计网页 如果从一个空白的网页开始设计，需要进行 以下一项或多项操作： n使用框架、表格布局或绝对定位工具来精确定位网页上 的文本和图形。 n添加文本、图形、网页横幅、表格、表单、超链接等网 页元素。 n添加Flash内容、视频、声音或GIF动画等动态元素。 n添加可以变化的内容或功能，如字幕、计数器、时间戳 、网页过渡、交互式按钮以及使用动态HTML（DHTML） 的表现方式。 n应用样式或使用样式表来设置文本格式。 n使用颜色或图像来设置网页背景。 21 向网站中添加网页 22 FrontPage 2003的视图 n设计、拆分、代码和浏览等网页视图 。 n文件夹、远程网站、报表、导航、超链接和任务等网站 视图 。 23 网页视图 n 网页编辑的视图，负责网站内个别网页的编辑，它提供 了4种显示方式。 网页设计视图 拆分视图 代码视图 预览视图 24 网站视图 以不同的视角来设计和观察网站并方便进行管理。 文件夹视图 导航视图 超链接视图 报表视图 25 9.2.2 编辑网页 n插入网页元素 网页元素包括文本、图形、声音、视频、动画， 常用的网页元素还有水平线、书签、日期、艺术字 、自选图形等等。 n设置网页属性 包括网页保存位置、标题、背景音乐/颜色/图 案、默认显示格式、语言、边距等等。 n建立超链接 超链接可以是文本，也可以是图像或图像的一部 分。 26 设置网页属性 使用背景音乐使用背景音乐 背景颜色或图形背景颜色或图形 通过网页属性的常规标签通过网页属性的常规标签 ，可以制定网页的标题。也，可以制定网页的标题。也 可以给网页加上背景音乐，可以给网页加上背景音乐， 并指定音乐播放次数。并指定音乐播放次数。 通过网页属性的背景通过网页属性的背景 标签，可以设置网页的标签，可以设置网页的 背景颜色或将图像作为背景颜色或将图像作为 网页的背景。网页的背景。 27 常用的网页元素 换行符用于将网页中的一段文本断开 并且是分开的两个部分保持在同一个段 落中。 换行符换行符 符号和注释符号和注释 特殊符号和注释。注释是网页制作者在 网页中的附加文字说明，只在Frontpage 中编辑时作者和合作者才看到。 水平线用来把网页分成几个部分. 水平线水平线 日期和时间日期和时间 在网页中插入上次编辑此页的日期，也 可以插入上次自动更新此页的日期。这 些日期和时间是动态变化的。 插入书签插入书签 书签用于为文档中的某个位置或所选文 本命名，以便快速定位和用于超链接的 锚点。 28 建立超链接 n 超链接的实现方法：将某个文本串或某幅图像和其他网 页的地址（URL）联系在一起。 我的童年时代我的童年时代 29 超链接到不同目标 n插入书签 n链接到同一文档中的某个位置 链接文本 n链接到同一主机的另一文档 链 接文本 n链接到网络中的另一个主机 链接文本 n链接到一个电子邮件地址 链接文本 n链接到一个普通的文档 如：会议通知 30 9.2.3 编排网页格式 vv设置字符格式设置字符格式 vv设置段落格式设置段落格式 vv创建列表创建列表 vv设置边框和阴影设置边框和阴影 vv级联样式单级联样式单 vv网页的特殊效果网页的特殊效果 vv主题的使用主题的使用 31 在 FrontPage 中，可以像使用word的方式来设置文本格式，如 更改字体、大小、样式、颜色、段落间距和文本的垂直位置，以及添 加诸如下划线的效果。 段落的格式化方法与word类似。 设置文本格式设置文本格式 段落的格式化段落的格式化 文本及段落的格式化 项目符号和编号是组织数据的工具，它 可以使数据层次分明、重点突出。 使用项目符号和编号使用项目符号和编号 32 级联样式表CSS Frontpage提供样式功能，用于对网页进行排版。为了 将样式应用到站点的其他网页中，使网站的风格统一，需要 创建级联样式单，定义应用到网页或网页元素的样式。样式 单可以设