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

第11章 网页设计与制作基础 什麽是网页? 网页的作用 Internet传递信息的一种方式 传递的信息多种多样（多种媒体） 文本 图片 声音 数字电影 等等 什麽是网页? 网页的本质 是保存在磁盘中的纯文本文件 什麽是网页? 文件内容是用特殊的语言书写的代码 最基本的代码是用HTML语言书写的 记录页面要显示哪些内容、样式、布局 在基本的HTML代码中可嵌入用JavaScript、VBScript、PHP等语言书写的程序 实现特殊的效果功能 网页文件的扩展名可以是.htm、.html、.asp、.jsp、.php等 网页的浏览过程 URL （统一资源定位器） 网页的浏览过程 浏览静态网页 网页的浏览过程 浏览动态网页 网页的分类 根据页面内容可将网页分为首页、主页、专栏网页、内容网页和功能网页 首页：访问网站时首先看到的页面，是网站开场页 网页的分类 根据页面内容可将网页分为首页、主页、专栏网页、内容网页和功能网页 主页：设有网站导航向访问者传递引导和欢迎信息 网页的分类 根据页面内容可将网页分为首页、主页、专栏网页、内容网页和功能网页 专栏网页：主页和内容网页的中转站 网页的分类 根据页面内容可将网页分为首页、主页、专栏网页、内容网页和功能网页 内容网页：传达具体信息的页面，是网站链接的终点 网页的分类 网站 各种网页通过超级链接的形式组成的一个逻辑整体。 网站 一个网站就是一个文件夹根目录 用来存放在内容上有较强内在联系的网页文件和资源文件 文件按原则有组织存放 网站的存放 制作阶段—本地主机 发布到WWW服务器—远程主机 WWW服务 网页制作方法 编写代码 HTML+ CSS、 JavaScript/VbScript等 使用网页制作工具 Dreamweaver 、Fireworks 和Flash 三剑客 微软的word、frontpage 网景的Netscape Navigator Gold等软件制作网页 基本过程 创建一个简单的网站 编辑网页 发布站点 HTML语言特点 标志对：标志名/标志名 单个标志：标志名 HTML的常用标志 基本标志 html/html head/head body/body title/title 基本标志示例 html head title显示在浏览器最上边蓝色条中的文本/title /head body bgcolor=“yellow text=blue p黄色背景、蓝色文本/p /body /html HTML的常用标志 格式标志 p/p br blockquote/blockquote dl/dldt/dtdd/dd ol/olul/ulli/li div/div 格式标志示例 HTML的常用标志 文本标志 pre/pre h1/h1……h6/h6 b/bi/iu/u tt/ttcite/citeem/em strong/strong font/font HTML的常用标志 图像标志 img src属性 alt属性 align属性 border属性 width属性 height属性 HTML的常用标志 表格标志 table/table tr/trtd/td th/th HTML的常用标志 超链接标志 a href=/a a name=/a HTML的常用标志 其它标志 帧标志frameset/frameset、frame、noframes/noframes 表单标志form/form、input type=、select/select、option、textarea/textarea 其它标志meta、style/style、script/script、address/address、marquee/marquee等 Dreamweaver的界面 Dreamweaver的基本操作 图11.40 Dreamweaver工具简介 创建本地站点 将资源添加到您的站点 创建并保存页面文件 设置页面标题 编辑网页 返回 1、什麽是网页？什麽是网站？对网页分类。 2、HTML语言的特点是什麽？有哪些常用标志？ 3、以你的兴趣爱好为主题，或你的专业介绍为主题， 利用FrontPage或Deamweaver制作一个个人主页及 几页相关的网页。 本章习题与思考 实验一：使用FrontPage 目的： 掌握使用FrontPage创建网站的方法 内容： 参照11.2节的介绍，尝试FrontPage的各种操作； 仿照11.2节的介绍制作一个学校站点。 本章实验 * * 网页和网站的基本概念 HTML语言的特点和常用标志的使用 使用FrontPage和Deamweaver建立网站并制作