《大学计算机基础》-网页设计与制作.ppt

教学课件教学课件 北京航空航天北京航空航天大学大学 大学计算机基础大学计算机基础 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 中编辑时作者和合作者才看到。 水平线用来把网页分成几个部分. 水平线水平线hr 日期和时间日期和时间 在网页中插入上次编辑此页的日期，也 可以插入上次自动更新此页的日期。这 些日期和时间是动态变化的。 插入书签插入书签 书签用于为文档中的某个位置或所选文 本命名，以便快速定位和用于超链接的 锚点。 28 建立超链接 n 超链接的实现方法：将某个文本串或某幅图像和其他网 页的地址（URL）联系在一起。 html”我的童年时代我的童年时代A html” A 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提供样式功能，用于对网页进行排版。为了 将样式应用到站点的其他网页中，使网站的风格统一，需要 创建级联样式单，定义应用到网页或网页元素的样式。样式 单可以设定： n改变文本行间距，字间距和字符间距 n设置元素的左右上下边距 n设置元素的缩进 n改变元素中文本的字体大小、格式和其他属性 n设置元素边框，并指定边框的大小和各种属性 n设置元素的背景颜色和背景图案 这是保 持站点 外观统 一的好 方法！ 33 在HTML文档中应用样式表的方法 n链接到样式单文件 n嵌入样式单 风格单的定义内容 n内联样式单 This is the red text 用标记符定义一个HTML文档块的样式单 css example This is a paragragh.It will look green in the browser 34 创建样式表 n基本格式 h1color:red;font-size:12pt;text-line:center n标记符的组合定义 H2,P,LIcolor:blue n在样式表中加注释 H1color:blue;font-size:18 n/*定义标题1字符的大小 bodymargin-left:1cm n/*定义页面左边界*/ h2font-size:15 n/*定义标题2的字符大小*/ 35 9.2.4 使用图像 GIF JPEG PNGGIF JPEG PNG （图形交换格式）（联合图像专家组）（可移植网络图形） 可用颜色数可用颜色数 16777216 16777216 16777216 每幅图像的颜色每幅图像的颜色 256 1677721616777216 压缩压缩 无损 有损 无损 透明透明 单色 否 Alpha通道 半透明半透明 否 否 Alpha通道 动画动画 是 否 否 FrontPage允许用户在网页中插入多种不同类型的图片 对象，显示效果可以有动态和静态两种。常用图片文件格 式如下表所列。考虑到网页下载速度问题，一般静 态图片使用jpg格式，动态图片使用gif格式。 36 图片的插入 HTML并不能包含图像，它只是包含图像文件的名 称和相应的格式代码。 ” 图片的插入 直接拖拽来改变图片的大小 使用图片属性对话框来设置 图片的替代文字、图片边框 使用图片工具栏编辑图片 37 图片文件的来源 当前站点中的图片 来自磁盘上文件的图片 插入其他网页中的图片 插入扫描图片 插入剪贴画 插入视频 38 图片的基本操作 改变图片大小 将图片转换成GIF、JPEG或PNG格式 指定图片的低分辨率版本 指定代替图片的显示文字 设置图片的边框属性 编辑图片 在图片上添加文本 图片的定位 保存图片对象 39 图片的特殊效果 n创建图片的缩略图 n图片的翻转和旋转 n图片的亮度和对比度 n剪裁图片 n设置图片的透明色 n图片的颜色冲蚀 n图片的黑白模式 n添加凸凹边框效果 n重新取样图片 40 图像映射 图像映射就是包含超链接的图像。通过单击图像或图片 的某个部分，链接到相应内容。创建图像映射的最常用方法 就是在图片上放入热点。热点是一个不可见的区域，单击后 可以将站点访问者带到用户定义的URL中。 vv设置图片的默认超链接设置图片的默认超链接 vv创建热点创建热点 vv创建文本热点创建文本热点 vv编辑热点编辑热点 创建热点41 9.2.5 保持网站的一致性外观 42 主题 主题主题是一组可应用在网页上的设计元素和颜色方案，其中包括字体 、图形、背景、导航栏、水平线和其他网页元素。类似于powerpoint中 的模板。在站点或网页中应用某个主题后，可以影响到网页外观的多个 方面： v颜色：主题使用颜色方案设置正文、标题、超链接、网页横幅文本、导 航览标签、表格边框以及网页背景的颜色。 v图形: 主题使用图形作为网页元素，用户可以使用普通或动态图形集。 v样式: 主题使用本身指定的样式作为文本或标题的样式。 43 应用主题 单击右侧选择 主题窗格中的主题 就可以应用选中的 主题。 44 修改主题 修改主题 的颜色 修改主题的样式 修改主题 的图形 45 共享边框 n共享边框是站点上一个或多个网页共享的区域。 n共享边框可以出现在一个网页的顶端（类似于网页页眉）、底端（ 类似于网页页脚）、左边或右边的区域。在共享边框中只需修改一 次内容，就可以将相同的内容放入多个网页中。 46 应用共享边框 n设置共享边框后，用户 可以添加如下内容： 网页横幅 公司徽标 导航栏 版权注意事项 站点上一次修改 或更新的日期和时间 47 链接栏 链接栏是一组文本或按钮超链接，通过它们浏览者可以 到达站点中的某一个网页。放到共享边框中以后，每个页面 都会有同样的链接信息。 链 接 栏 48 使用链接栏 n典型的链接栏具有指向站点主页和主要上层网页的按钮。当我们在 网页中添加一个链接栏时，FrontPage 将根据导航视图下设置的导航 结构自动生成超链接，当然也可以自定义链接栏。 链接栏属性 49 9.2.6 网页的布局 表格在网页制作中的作用已经超越了传统意义上的存放 数据，表格已成为组织数据、排列网页元素空间位置最为 灵活的方法。 表格和框架是网页布局的常用工具。 文字、图形、视频 框架也是一种常用的网页布局方法，它将浏览器窗口 划分为功能独立的多个区域，每个框架显示一个网页 内容，并且通过框架中的超链接可以更改显示在另一 个框架中的网页文件。 50 两种常用布局方法 表格框架 51 布局表格 n布局表格和单元格共同表示用户可添加到网页的水平与 垂直区域，这些区域可以为内容提供复杂的可视结构。 n我们可以选择预定义的布局表格模板，也可以创建自己 的布局表格。 52 设置布局表格和单元格的属性 n调整表格的大小 n对选中单元格的高度、宽度、背景颜色、边框、边距等 项进行相应的设置。 n添加圆角图片、设置阴影来修饰网页。 53 框架布局 n 框架是一种将浏览器窗口划分为功能独立的多个区域的 常用方法。框架集定义每个框架的大小、位置、名称和初始 网页，普通网页提供每个框架（子窗口）的内容。一个框架 的超链接可以更改显示在另一个框架中的网页。 n框架集是一种特殊的网页，该网页定义了整体的框架布 局，但不提供实际内容。 54 框架的创建和保存 新建框架网页 框架组成 在框架中加入网页 边框、滚动条、网页 1）建立新网页 2）指定已经存在的网页 保存框架页 【文件】| 【另存为】 【文件】| 新建| 【网页】 ， 选择“框架网页”标签 55 框架属性设置 框架/框架属性 网页名称 初始网页 框架大小 边距 滚动条 框架的可调整性 间距 30%70%80% 20% 相对大小：1和4 相对大小：3和7 56 框架之间的超链接 在框架网页中，单击某框架内网页上的超链接时，被超 链接所指定的网页通常在另一个框架中打开，这个框架称为 目标框架。 n命名: n链接: 点击这里跳到main框架 57 嵌入式框架 在网 页的内部 也可以插 入框架来 显示单独 的网页。 58 使用层来定位元素 n层是一个可以应用CSS来进行绝对定位的工具。 n利用层的绝对定位功能，也可以实现网页的布 局。 59 9.2.7 网页的动态效果 n网页元素的动态效果 可以将动态 HTML (DHTML) 的动画效果应用到网页上 的任何相关组件; 例如文本、段落、图片、按钮和字幕等等 ，并将这些效果链接到单击鼠标、鼠标悬停和加载网页等事 件上。 n网页过渡的动态效果 网页过渡指进入网页或离开网页等触发事件发生时，网 页从当前屏幕刷新到新的屏幕采取什么样的过渡效果。触发 事件包括进入网页、离开网页、进入网站、离开网站等。 60 网页元素的动态效果 n利用“DHTML”效果工具栏可以在网页的任何组件元素 中添加动态效果，并将这些动态效果链接到鼠标的单击、双 击、悬停或加载网页等事件上。 当鼠标指向图 片时，会更换另一 张图片。 DHTML动态效果工具栏 61 网页的过渡效果 n网页过渡指进入网页或离开网页等触发事件发生时，网 页从当前屏幕刷新到新的屏幕采取什么样的过渡效果。这就 像幻灯片切换过程的过渡效果一样。 62 每个网页可以包含一 个或多个表单，每个表 单占据网页中的一个特 定区域。 表单中必须有一个元 素作为“提交”按钮。 9.2.8 创建交互式网页 n收集站点访问者对站点的反馈意见（意见、浏览、订单等等）。 n网页中插入表单来收集访问者信息，利用表单我们还可以创建讨论 组。 创建表单 插入表单域 讨论组的应用 插入网页的高级内容 63 创建表单 n创建表单页面 n单行文本框 text n密码框 password n多行文本框 textarea n下拉列表框 select n复选框 checkbox n单选按钮 radio n按钮 button n表单的提交 submit n 要掌握收集什么样的信息 使用哪个表单域更合适！ 64 表单的处理 一个表单必须有一个提交按钮。单 击提交按钮后，表单的结果l可以送 到一个文件、电子邮件地址、数据 库、表单处理程序以及自定义（ ISAPI、CGI、ASP等）表单处理程 序。 65 9.3 网站的发布和管理 n发布一个站点就是要将站点上的