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