大学计算机基础》第9章网页设计与制作

《大学计算机基础》第9章网页设计与制作》由会员分享，可在线阅读，更多相关《大学计算机基础》第9章网页设计与制作（70页珍藏版）》请在金锄头文库上搜索。

1、1,教学课件,北京航空航天大学,大学计算机基础,2,第9章 网页设计与制作,9.1 网站的建设与规划,9.2 使用FrontPage 2003制作网站,9.3 网站的发布和管理,3,本章重点,网页基本知识 网站建设的基本过程 常用的网页制作工具 使用FrontPage 2003建立网站 使用FrontPage 2003 编辑网页 级联样式表CSS 网页布局的方法 应用表单实现网页交互的方法 网站的发布与管理,4,9.1 网站的建设与规划,9.1.1 网页基本知识 9.1.2 HTML语言简介 9.1.3 常用的网页制作工具,5,9.1.1 网页基本知识,WWW(World Wide Web )

2、 WWW是Internet上多媒体信息查询的工具。WEB由互相链接在一起的网页构成，这些网页是由普通文本、超文本Hypertext，以及图表、图片等构成。 URL（Uniform Resource Locator） URL（统一资源定位器）是指向网络服务器中某个资源的地址，用字符串来表示。其中包括协议、主机域名（或IP地址）、文件名等等。 超级链接（Hyperlink） 超级链接是包含在网页中指向其他网页的指针。 超文本 包含超链接的文本称为超文本。有时图像或图像的某部分也可以包含超链接。,6,网页基本知识,超媒体 当超文本网页中包含声音、动画、视频等其它媒体时，网页被称为是超媒体的。浏览器一

3、般通过外挂的帮助程序来显示这些超媒体信息。 浏览器 用户通过称为浏览器的软件来观看网页，浏览器取回所请求的网页，解释其中所含的文本和格式命令，并正确的显示出来。 网页与网站 网页由超文本标记语言（HTML，HyperText Markup Language）写成，网页之间通过超链接相互组织成为反映某个主题的网站。,7,Web 工作模式,第一步：WEB浏览器向一个特定的服务器发送WEB页面请求 。 第二步：在每个WEB服务器上有一个服务进程在TCP的80端口上监听由浏览器发来的建立连接请求；在连接建立之后，寻找所请求的WEB页面，并将所请求的网页传送给浏览器。浏览器和服务器之间进行信息传输使用超

4、文本传输协议HTTP协议。 第三步：WEB浏览器接收到所请求的网页，并按照预定的格式显示出来。,8,网站建设的基本过程,申请域名 有一个人们容易记住的域名，可以方便用户访问网站。域名是独一无二的，需要向网络信息中心申请。 建立服务器主机 服务器主机应该能够提供7*24小时不间断联网服务，根据企业或个人的资金、网络维护能力等不同可以选择不同的服务方式。 自己建立服务器主机 大的企业、学校、政府部门等，有专门的技术人员维护。 主机托管模式 将服务器主机交给专门的网络运营部门管理。 虚拟主机模式 租用网络运营商服务器主机的部分存储空间。 设计网站 设计网站首先要确定网站的主题，围绕主题就可以确定网站

5、的内容和网页的风格。确定了主题和风格后就需要组织文字、图片、声音等网页素材制作网页。 制作网页 网页是用HTML语言写出来的文档，是纯文本文档。,9,网页设计,确定网站主题 主题确定网站主要传播哪些内容和提供哪些服务。 确定网页风格(选择视觉外观) 网页风格决定了网页的表现形式，决定于网站的主题和内容，以达到内容和形式的统一。 设计有效的页面布局 合理的网页布局可以使浏览者更加方便地浏览网页。 组织素材 确定了主题和风格后就需要组织文字、图片、声音等网页素材来表现主题。 制作网页 将各种网页素材组织到网页中,10,网页设计遵循的一般原则,主题鲜明 一個主题鲜明、內容丰富具有特色的网站，通常要比

6、什么都有的大杂烩式的网站更加吸引人。 形式与內容统一 网页的排版、布局、色彩、图形的运用要与网页中欲向网友传达的有效信息相统一。 风格要统一 风格的选用要尽量突出自己的个性，让浏览者有一个独特的印象。 栏目设计要合理 倘若內容较多，栏目设计要合理、清晰，让浏览者容易找到所需的信息。 导航清晰易懂 一个清晰、容易理解的导航栏，可以使新手快速了解到网站的结构，便于转到其他的页面。 时常更新內容 经常更新网页内容，给网友提供最新的信息，才能使网站更有吸引力。,11,利用制作工具,编写HTML源代码,使用记事本等字处理软件直接编写代码，保存为.htm或.html的纯文本文件,使用所见即所得的可视化工具

7、软件。,网页制作,网页文档中包含了网页元素及其显示格式，制作网页就是将网页元素按照风格所确定的显示格式写成HTML文档。,12,9.1.2 HTML语言简介,HTML是一种简单的标记语言，它主要用于描述Web文档的结构，HTML代码描述超文本文档的格式。格式由浏览器解释和执行。 标记的一般格式为： 对象 对象 例如：我的主页 简介,13,超文本文档的结构,例： 我的第一个主页 这是一个简单的例子 ,文档头部,文档体,文档头部定义网页的属性 文档体定义显示的文档内容和格式,14,图像的使用,网页上的图像用标记表示，src属性是必须的，其值说明图像的位置。 例如： 使用图像要考虑网络传输速度，大的

8、图像文件需要相对长的网络传输时间。 不同格式的图像文件压缩比不同，图像质量也不同，文件大小也不同。 一般静态图像使用jpg格式，动态图像使用gif格式。,15,9.1.3 常用网页制作工具,网页编写软件 Frontpage 、Dreamwaver 图形/图像处理软件 Photoshop、Fireworks 网页动画制作软件 Flash 常用网页脚本语言 Javascript 、Vbscript Java applet小程序 动态网页开发工具 Asp、Jsp、Php,原来制作网页不是很难啊！ 可是想做好也不简单！,16,9.2 使用FrontPage 2003制作网站,9.2.1 建立网站 9.

9、2.2 编辑网页 9.2.3 编排网页格式 9.2.4 使用图像 9.2.5 保持网站的一致性外观 9.2.6 网页的布局 9.2.7 网页的动态效果 9.2.8 应用表单实现交互功能,17,FrontPage 2003界面,设计网页,自动生成的HTML语句,预览网页效果,文件夹列表,18,9.2.1 建立网站,FrontPage 2003的网站管理功能强大，建立网站后，其中的文件被统一管理。 使用模板建立网站 FrontPage 2003提供了多种网页模板和网站模板，用户可以很方便地建立自己的网站。 自己设计网站 可以先建立一个空白网站或只有一个网页的网站，然后在网站中添加其他网页的方法自己

10、设计。,19,使用模板,模板中预定义了网站的大致内容和布局，并使用某一种主题创建风格一致的网页。主题包含了采用某种配色方案的统一设计元素，包括字体、图形、背景、导航栏、水平线及其他网页元素。,20,自己设计网页,如果从一个空白的网页开始设计，需要进行以下一项或多项操作： 使用框架、表格布局或绝对定位工具来精确定位网页上的文本和图形。 添加文本、图形、网页横幅、表格、表单、超链接等网页元素。 添加Flash内容、视频、声音或GIF动画等动态元素。 添加可以变化的内容或功能，如字幕、计数器、时间戳、网页过渡、交互式按钮以及使用动态HTML（DHTML）的表现方式。 应用样式或使用样式表来设置文本格

11、式。 使用颜色或图像来设置网页背景。,21,向网站中添加网页,22,FrontPage 2003的视图,设计、拆分、代码和浏览等网页视图 。 文件夹、远程网站、报表、导航、超链接和任务等网站视图 。,23,网页视图,网页编辑的视图，负责网站内个别网页的编辑，它提供了4种显示方式。,网页设计视图,拆分视图,代码视图,预览视图,24,网站视图,以不同的视角来设计和观察网站并方便进行管理。,文件夹视图,导航视图,超链接视图,报表视图,25,9.2.2 编辑网页,插入网页元素 网页元素包括文本、图形、声音、视频、动画，常用的网页元素还有水平线、书签、日期、艺术字、自选图形等等。 设置网页属性 包括网页

12、保存位置、标题、背景音乐/颜色/图案、默认显示格式、语言、边距等等。 建立超链接 超链接可以是文本，也可以是图像或图像的一部分。,注意:超链接不同目标的位置属性。,26,设置网页属性,使用背景音乐,背景颜色或图形,通过网页属性的常规标签，可以制定网页的标题。也可以给网页加上背景音乐，并指定音乐播放次数。,通过网页属性的背景标签，可以设置网页的背景颜色或将图像作为网页的背景。,27,常用的网页元素,28,建立超链接,超链接的实现方法：将某个文本串或某幅图像和其他网页的地址（URL）联系在一起。 我的童年时代 ,29,超链接到不同目标,插入书签 链接到同一文档中的某个位置 链接文本 链接到同一主机

13、的另一文档 链接文本 链接到网络中的另一个主机 链接文本 链接到一个电子邮件地址 链接文本 链接到一个普通的文档 如：会议通知,30,9.2.3 编排网页格式,设置字符格式 设置段落格式 创建列表 设置边框和阴影 级联样式单 网页的特殊效果 主题的使用,31,在 FrontPage 中，可以像使用word的方式来设置文本格式，如更改字体、大小、样式、颜色、段落间距和文本的垂直位置，以及添加诸如下划线的效果。,段落的格式化方法与word类似。,设置文本格式,段落的格式化,文本及段落的格式化,项目符号和编号是组织数据的工具，它可以使数据层次分明、重点突出。,使用项目符号和编号,32,级联样式表CS

14、S,Frontpage提供样式功能，用于对网页进行排版。为了将样式应用到站点的其他网页中，使网站的风格统一，需要创建级联样式单，定义应用到网页或网页元素的样式。样式单可以设定： 改变文本行间距，字间距和字符间距 设置元素的左右上下边距 设置元素的缩进 改变元素中文本的字体大小、格式和其他属性 设置元素边框，并指定边框的大小和各种属性 设置元素的背景颜色和背景图案,这是保持站点外观统一的好方法哦！,33,在HTML文档中应用样式表的方法,链接到样式单文件 嵌入样式单 风格单的定义内容 内联样式单 This is the red text 用标记符定义一个HTML文档块的样式单 css examp

15、le This is a paragragh.It will look green in the browser ,34,创建样式表,基本格式 h1color:red;font-size:12pt;text-line:center 标记符的组合定义 H2,P,LIcolor:blue 在样式表中加注释 H1color:blue;font-size:18 /*定义标题1字符的大小 bodymargin-left:1cm /*定义页面左边界*/ h2font-size:15 /*定义标题2的字符大小*/,35,9.2.4 使用图像,GIF JPEG PNG （图形交换格式）（联合图像专家组）（可移

16、植网络图形） 可用颜色数 16777216 16777216 16777216 每幅图像的颜色 256 16777216 16777216 压缩 无损 有损 无损 透明 单色 否 Alpha通道 半透明 否 否 Alpha通道 动画 是 否 否,FrontPage允许用户在网页中插入多种不同类型的图片对象，显示效果可以有动态和静态两种。常用图片文件格式如下表所列。考虑到网页下载速度问题，一般静态图片使用jpg格式，动态图片使用gif格式。,36,图片的插入,HTML并不能包含图像，它只是包含图像文件的名称和相应的格式代码。 ,图片的插入 直接拖拽来改变图片的大小 使用图片属性对话框来设置 图片的替代文字、图片边框 使用图片工具栏编辑图片,37,图片文件的来源,当前站点中的图片 来自磁盘上文件的图片