实验教程_第5章网页设计与制作基础.ppt

1、第11章 网页设计与制作基础,网页和网站的基本概念 HTML语言的特点和常用标志的使用 使用FrontPage和Deamweaver建立网站并制作简单网页的方法,本章主要内容,掌握网页和网站的基本概念 了解HTML语言的特点和常用标志的使用 掌握使用FrontPage和Deamweaver建立网站并制作简单网页的方法,本章学习目标,网页的基本概念 用FrontPage制作网页 HTML标注语言简介 Dreamweaver工具简介,本章章节,什麽是网页?,网页的作用 Internet传递信息的一种方式 传递的信息多种多样（多种媒体） 文本 图片 声音 数字电影 等等,网页的基本概念,什麽是网页?

2、,网页的本质 是保存在磁盘中的纯文本文件,网页的基本概念,可以用记事本打开进行浏览和编辑,什麽是网页?,文件内容是用特殊的语言书写的代码 最基本的代码是用HTML语言书写的 记录页面要显示哪些内容、样式、布局 在基本的HTML代码中可嵌入用JavaScript、VBScript、PHP等语言书写的程序 实现特殊的效果功能 网页文件的扩展名可以是.htm、.html、.asp、.jsp、.php等,网页的基本概念,漂亮的页面,网页文件：幕后英雄,浏览器,+资源（页面上要显示的图片、声音、动画、流媒体等非纯文本文件）,网页的基本概念,网页的浏览过程,URL （统一资源定位器）,网页的基本概念,网页

3、的浏览过程,浏览静态网页,网页的基本概念,客户端,服务器端,送出URL请求到服务器,传回html文件,Internet,JavaScript JavaApplet,网页的浏览过程,浏览动态网页,网页的基本概念,客户端,服务器端,送出URL请求到服务器,传回html文件,Internet,CGI ASP,JavaScript JavaApplet,网页的分类,根据页面内容可将网页分为首页、主页、专栏网页、内容网页和功能网页 首页：访问网站时首先看到的页面，是网站开场页,网页的基本概念,只具有欢迎访问者的作用,网页的分类,根据页面内容可将网页分为首页、主页、专栏网页、内容网页和功能网页 主页：设有

4、网站导航向访问者传递引导和欢迎信息,网页的基本概念,是网页的链接中心,大多数网站的首页与主页通常合并为一个页面，这种情况下主页和首页指的是同一个网页,网页的分类,根据页面内容可将网页分为首页、主页、专栏网页、内容网页和功能网页 专栏网页：主页和内容网页的中转站,网页的基本概念,用于内容的细化和进一步归类,网页的分类,根据页面内容可将网页分为首页、主页、专栏网页、内容网页和功能网页 内容网页：传达具体信息的页面，是网站链接的终点,网页的基本概念,网页的分类,根据页面内容可将网页分为首页、主页、专栏网页、内容网页和功能网页 功能网页：专门用于信息反馈的服务性网页,网页的基本概念,网站,各种网页通过

5、超级链接的形式组成的一个逻辑整体。,网页的基本概念,网站主页,专栏网页1,专栏网页2,专栏网页3,功能网页1,功能网页2,内容网页21,内容网页22,内容网页23,网站结构草图，只体现了各网页的层次关系。网页的链接关系要复杂得多。,网站,一个网站就是一个文件夹-根目录 用来存放在内容上有较强内在联系的网页文件和资源文件 文件按原则有组织存放 网站的存放 制作阶段本地主机 发布到WWW服务器远程主机 WWW服务,网页的基本概念,网页制作方法,编写代码 HTML+ CSS、 JavaScript/VbScript等 使用网页制作工具 Dreamweaver 、Fireworks 和Flash 三剑

6、客 微软的word、frontpage 网景的Netscape Navigator Gold等软件制作网页,网页的基本概念,返回,基本过程,创建一个简单的网站 编辑网页 发布站点,用FrontPage制作网页,返回,HTML语言特点,标志对： 单个标志：,HTML标注语言简介,Html文档框架, ,头,体, 等, 等等,HTML的常用标志,基本标志 基本标志示例 显示在浏览器最上边蓝色条中的文本 黄色背景、蓝色文本 ,HTML标注语言简介,HTML的常用标志,格式标志 格式标志示例,HTML标注语言简介, 一个普通列表 中国城市 北京 上海 广州 美国城市 华盛顿 芝加哥 纽约 ,HTML的常

7、用标志,文本标志 ,HTML标注语言简介,HTML的常用标志,图像标志 src属性 alt属性 align属性 border属性 width属性 height属性,HTML标注语言简介,HTML的常用标志,表格标志 ,HTML标注语言简介,注意边框、间距、填充属性的含义,边框,间距,填充,HTML的常用标志,超链接标志 ,HTML标注语言简介,链接载体,链接目标,其它网页,其它网站,锚点,E-mail,其它文件,文本,图像,轮替图像,图像热区,链接组成,HTML的常用标志,其它标志 帧标志、 表单标志、 其它标志、等,HTML标注语言简介,返回,Dreamweaver的界面,Dreamweav

8、er工具简介,Dreamweaver的基本操作,Dreamweaver工具简介,创建本地站点 将资源添加到您的站点 创建并保存页面文件 设置页面标题 编辑网页,返回,1、什麽是网页？什麽是网站？对网页分类。 2、HTML语言的特点是什麽？有哪些常用标志？ 3、以你的兴趣爱好为主题，或你的专业介绍为主题， 利用FrontPage或Deamweaver制作一个个人主页及 几页相关的网页。,本章习题与思考,实验一：使用FrontPage 目的： 掌握使用FrontPage创建网站的方法 内容： 参照11.2节的介绍，尝试FrontPage的各种操作； 仿照11.2节的介绍制作一个学校站点。,本章实验,实验二:基本HTML文件的编辑 目的: 掌握使用“记事本”编辑HTML的基本操作；掌握使用 IE测试HTML文件的操作；掌握HEAD、TITLE、 BODY等标志符的使用。 内容： 编写11.3节中出现的HTML源文件； 编写一个能显示背景图案的网页源文件； 编写