371编号205网页设计与制作(2009)

《371编号205网页设计与制作(2009)》由会员分享，可在线阅读，更多相关《371编号205网页设计与制作(2009)（79页珍藏版）》请在金锄头文库上搜索。

1、1,单位：计算机教学实验中心 办公室：新主楼F114 82317623 13683649570 主讲课程：大学计算机基础 全校 计算机基础操作 计算机学院 计算机网络实验及设计 计算机学院 计算机网络通讯实验 计算机学院,教师-焦福菊,计算机学院教学实验中心,2,网页设计与制作,WWW基本知识 网站的建设与规划 使用FrontPage 2003制作网站 网站的发布和管理,3,本章重点,WWW基本知识 网站建设的基本过程 常用的网页制作工具 网页编辑 级联样式表CSS 网页布局的方法 应用表单实现网页交互的方法 网站的发布与管理,作业要求,作业参考,4,主题1 WWW基本知识,WWW(World

2、 Wide Web ) WWW是Internet上多媒体信息查询的工具。WEB由互相链接的网页构成，这些网页由普通文本、超文本Hypertext，以及图表、图片等等构成。 URL（Uniform Resource Locator） URL（统一资源定位符）是指向网络服务器中某个资源的地址，用字符串来表示。其中包括协议、主机域名（或IP地址）、端口号、文件名等等。 http:/219.224.160.131:8080/dxjsj/ ftp:/219.224.160.131/,5,主题1 WWW基本知识,超级链接（Hyperlink） 超级链接是包含在网页中指向其他网页的指针。 超文本 包含超链接

3、的文本称为超文本。图像或图像的某部分也可以包含超链接。 超媒体 当网页中包含声音、动画、视频等其它媒体时，网页被称为是超媒体的。浏览器一般通过外挂的帮助程序来显示这些超媒体信息。,6,主题1 WWW基本知识,服务器 WWW服务器用来放置网页，始终循环等待客户端的服务请求，并把网页作为回答发送给客户端。 浏览器 用户通过浏览器来观看网页。浏览器发出服务请求，得到网页后，解释其中所含的网页内容和格式命令，并正确的显示出来。 网页与网站 网页由超文本标记语言（HTML，HyperText Markup Language）写成，网页之间通过超链接相互组织成为反映某一个或某几个主题的网站。,7,网页,主

4、页,网页,网页,Web 工作模式,HTTP协议,HTTP协议,browser,Web server,browser,8,Web 工作模式,第一步：WEB浏览器向一个特定的服务器发送WEB页面请求 。 第二步：在每个WEB服务器上有一个服务进程在TCP的80端口上监听由浏览器发来的建立连接请求；在连接建立之后，寻找所请求的WEB页面，并将所请求的网页传送给浏览器。浏览器和服务器之间进行信息传输使用超文本传输协议HTTP协议。 第三步：WEB浏览器接收到所请求的网页，并按照预定的格式显示出来。,9,主题2 HTML语言简介,HTML是一种简单的标记语言，它主要用于描述Web文档的结构。HTML代码

5、描述超文本文档的格式。格式由浏览器解释和执行。,标记的一般格式为： 对象 对象 例如：我的主页 简介,10,主题2 HTML语言简介,例： 我的第一个主页 这是一个简单的例子 北航 ,超文本文档的结构,文档头部定义网页的属性；文档体定义显示的文档内容和格式,11,主题3 网站建设的基本过程,申请域名 有一个人们容易记住的域名，可以方便用户访问网站。域名是独一无二的，需要向网络信息中心申请。 建立服务器主机 服务器主机应该能够提供7*24小时不间断联网服务，根据企业或个人的资金、网络维护能力等不同可以选择不同的服务方式。 自己建立服务器主机 大的企业、学校、政府部门等，有专门的技术人员维护。 主

6、机托管模式 将服务器主机交给专门的网络运营部门管理。 虚拟主机模式 租用网络运营商服务器主机的部分存储空间。,12,主题3 网站建设的基本过程,设计网站 设计网站首先要确定网站的主题，围绕主题就可以确定网站的内容和网页的风格。确定了主题和风格后就需要组织文字、图片、声音等网页素材制作网页。 制作网页 网页是用HTML语言写出来的纯文本文档。 网站的维护与更新 制作好网页以后需要将网页及素材等文件复制到服务器中，并及时更新网页的内容。,13,主题4 网页设计,确定网站主题 主题确定网站主要传播哪些内容和提供哪些服务。 确定网页风格(选择视觉外观) 网页风格决定了网页的表现形式，决定于网站的主题和

7、内容，以达到内容和形式的统一。 如：活泼欢快、严肃庄重、朴素简洁、典雅大方、充满神秘感等等风格。,14,主题4 网页设计,设计有效的页面布局 合理的网页布局可以使浏览者更加方便地浏览网页。要适合人们的阅读习惯，将重要的东西放在浏览者第一眼就能看到的地方。 组织素材 确定了主题和风格后就需要组织文字、图片、声音等网页素材来表现主题。 制作网页 将各种网页素材组织到网页中。,15,网页设计遵循的一般原则,主题鲜明 一個主题鲜明、內容丰富具有特色的网站，通常要比什么都有的大杂烩式的网站更加吸引人。 形式与內容统一 网页的排版、布局、色彩、图像的运用要与网页中欲向网友传达的有效信息相统一。 风格要统一

8、 风格的选用要尽量突出自己的个性，让浏览者有一个独特的印象。,16,网页设计遵循的一般原则,栏目设计要合理 倘若內容较多，栏目设计要合理、清晰，让浏览者容易找到所需的信息。 导航清晰易懂 一个清晰、容易理解的导航栏，可以使新手快速了解到网站的结构，便于转到其他的页面。 时常更新內容 经常更新网页内容，给网友提供最新的信息，才能使网站更有吸引力。,17,网页设计遵循的一般原则,若要网站能够吸引人： 第一内容要不断更新 第二多媒体素材的合理使用,18,利用制作工具,编写HTML源代码,使用记事本等字处理软件直接编写代码，保存为.htm或.html的纯文本文件,使用所见即所得的可视化工具软件。如：f

9、rontpage、dreamwaver,主题5 网页制作,网页文档中包含了网页元素及其显示格式，制作网页就是将网页元素按照风格所确定的显示格式写成HTML文档。,19,常用网页制作工具,网页编写软件 Frontpage 、Dreamwaver 图形/图像处理软件 Photoshop、Fireworks 网页动画制作软件 Flash,制作静态网页不是很难！,20,想知道浏览你网页的网友有什么意见或建议？ 想知道对你网站提供的内容感兴趣的是什么人？ 想知道客户有哪些服务需求？ 想知道客户对产品有什么意见？ ,动态交互网页编程,要使网站具有交互功能，就需要在网页中 加入实现动态交互的程序代码。 这就

10、是基于WEB的应用程序开发！,示例1,示例2,示例3,21,动态交互网页编程,常用网页脚本语言 Javascript 、VBScript Java applet小程序 动态网页开发工具 Asp、Jsp、Php 其它CGI程序,22,主题6 FrontPage 2003,网站的建立与管理 编辑网页 网页的格式与CSS级联样式表 使用图像 网页的布局 网页的动态效果 应用表单实现交互网页 保持网站一致性外观的方法,23,FrontPage 2003界面,设计网页,自动生成的HTML语句,预览网页效果,文件夹列表,24,建立网站的方法,使用模板建立网站 FrontPage 2003提供了多种网页模板

11、和网站模板，用户可以很方便地建立自己的网站。 自己设计网站 可以先建立一个空白网站或只有一个网页的网站，然后在网站中添加其他网页的方法自己设计。,25,使用模板,模板中预定义了网站的大致内容和布局，并使用某一种主题创建风格一致的网页。主题包含了采用某种配色方案的统一设计元素，包括字体、图形、背景、导航栏、水平线及其他网页元素。,26,自己设计网站,如果从一个空白的网页开始设计，需要进行以下一项或多项操作： 使用框架、表格布局或绝对定位工具来精确定位网页上的文本和图像。 使用颜色或图像来设置网页背景。 应用样式或使用样式表来设置文本格式。 添加文本、图像、网页横幅、表格、表单、超链接等网页元素。

12、 添加Flash内容、视频、声音或GIF动画等动态元素。 如果需要，加入程序代码使网页具有交互功能。,27,向网站中添加网页,28,网站视图,以不同的视角来设计和观察网站并方便进行管理。,文件夹视图,导航视图,超链接视图,报表视图,29,网页视图,网页编辑的视图，负责网站内个别网页的编辑，它提供了4种显示方式。,网页设计视图,拆分视图,代码视图,预览视图,30,主题7 编辑网页,设置网页属性 包括网页保存位置、标题、背景音乐/颜色/图案、默认显示格式、语言、边距等等。 插入网页元素 网页元素包括文本、图形、声音、视频、动画，常用的网页元素还有水平线、书签、日期、艺术字、自选图形等等。 建立超链

13、接 超链接可以是文本，也可以是图像或图像的一部分。,31,设置网页属性,使用背景音乐,背景颜色或图形,通过网页属性的常规标签，可以制定网页的标题。也可以给网页加上背景音乐，并指定音乐播放次数。,通过网页属性的背景标签，可以设置网页的背景颜色或将图像作为网页的背景。,32,常用的网页元素,33,建立超链接,超链接的实现方法：将某个文本串或某幅图像和其他网页的地址（URL）联系在一起。 超文本 例：我的童年 联系人,34,超链接到不同目标,插入书签 链接到同一文档中的某个位置 链接文本 链接到同一主机的另一文档 链接文本 链接到Internet资源 链接文本 链接到一个电子邮件地址 链接文本 链接

14、到一个普通的文档 会议通知,35,主题8 编排网页格式,设置字符格式 设置段落格式 创建列表 设置边框和阴影 级联样式表 主题的使用,36,级联样式表CSS,级联样式表使网页的内容与外观分别定义，方便网站外观的统一和更新。样式表可以设定： 改变文本行间距，字间距和字符间距 设置元素的左右上下边距 设置元素的缩进 改变元素中文本的字体大小、格式和其他属性 设置元素边框，并指定边框的大小和各种属性 设置元素的背景颜色和背景图案,37,应用样式表的方法,嵌入样式表 样式表的定义内容 内联样式表 例1：单个元素应用样式 This is the red text 例2： 用标记符定义一个HTML文档块，

15、对多个元素应用样式表 css example This is a paragragh.It will look green in the browser ,38,应用样式表的方法,外联样式表 ,39,创建样式表,基本格式 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的字符大小*/,40,创建样式表

16、,41,主题8 使用图像,GIF JPEG PNG （图形交换格式）（联合图像专家组）（可移植网络图形） 可用颜色数 16777216 16777216 16777216 每幅图像的颜色 256 1677721616777216 压缩 无损 有损 无损 透明 单色 否 Alpha通道 半透明 否 否 Alpha通道 动画 是 否 否,FrontPage允许用户在网页中插入多种不同类型的图片对象，显示效果可以有动态和静态两种。常用图片文件格式如下表所列。考虑到网页下载速度问题，一般静态图片使用jpg格式，动态图片使用gif格式。,42,图片的插入,HTML并不能包含图像，它只是包含图像文件的名称和相应的格式代码。 例：,图片的插入 直接拖拽来改变图片的大小 使用图片属性对话框来设置 图片的替代文字、