当前位置:首页 >> IT/计算机 >> 信息技术应用基础(Windows XP环境)课件-第11章 网页制作

信息技术应用基础(Windows XP环境)课件-第11章 网页制作


第11章 网页制作 章

目录
? ? ? ? ? ? ? ? ? ? 11.1 网页与网站 11.2 FrontPage 2002的基础知识 的基础知识 11.3 制作一张简单的网页 11.4 建立一个完整的网站 11.5 在网页中插入基本元素 11.6 在网页中添加其它元素 11.7 框架网页的使用 11.8 利用 利用Dreamweaver制作网页 制作网页 11.9 利用 利用HTML源代码制作网页 源代码制作网页 11.10 发布站点

11.1 网页与网站
? 上网时,大家看到的每一个页面都称为一张“网 上网时,大家看到的每一个页面都称为一张“ 一张网页其实就是一个文本文件, 页”。一张网页其实就是一个文本文件,一般采 语言来编写, 用HTML语言来编写,后缀名通常为“.htm”或 语言来编写 后缀名通常为“ 或 “.html”等。 等 ? 网站就是一系列网页文件和其它相关文件的集合, 网站就是一系列网页文件和其它相关文件的集合, 这些网页和文件通常存储在一个总文件夹内, 这些网页和文件通常存储在一个总文件夹内,在 文件夹内部再把网页和其它文件按照网页之间的 逻辑关系分门别类的存储在各个子文件夹内,以 逻辑关系分门别类的存储在各个子文件夹内, 便于整个网站的组织和管理。 便于整个网站的组织和管理。

11.2 FrontPage 2002 简介

11.3 制作一张简单的网页
? 11.3.1 准备工作 ? 11.3.2 制作一张简单的网页 ? 11.3.3 浏览自己制作的网页

11.3.1 准备工作
? 新建一个文件夹用来储存网站的网页文件 和所有相关文件
– 在“我的文档”文件夹下新建一个名为“My Webs”的文件夹作为网站的根目录 – 在根目录下创建一个名为“images”的文件夹 用来储存网站中用到的图片、动画、声音等文 件。

? 在制作网页的过程中,如果用到了网站根 在制作网页的过程中, 目录以外的其它文件, 目录以外的其它文件,最好事先将其复制 文件夹之下, 到“My Webs”文件夹之下,以免出错。 文件夹之下 以免出错。

11.3.2 制作一张简单的网页
? 启动 启动FrontPage时,会自动创建一张新网 时 页“New_Page_1.htm” ? 单击【新建】按钮也可新建网页 单击【新建】 ? 单击【保存】按钮即可保存文件 单击【保存】

11.3.3 浏览自己制作的网页
? 三种浏览自己制作的网页的方法: 三种浏览自己制作的网页的方法:
– 单击【预览】按钮可以预览实际效果; – 选择【文件】→【用浏览器预览】命令, – 在资源管理器或我的电脑中找到该网页文件, 双击该文件即可用浏览器打开网页。

11.4 建立一个完整的网站
? 11.4.1 新建一个站点 ? 11.4.2 站点的管理

11.4.1 新建一个站点

? 选择【文件】→【新建】→【网页或站点】菜单 选择【文件】 【新建】 【网页或站点】 命令

11.4.2 站点的管理
? 利用文件夹列表进行站点管理
– 新建网页 – 新建文件夹 – 关闭站点 – 打开站点

11.5 在网页中插入基本元素
? ? ? ? ? ? ? 11.5.1 在网页中添加文字 11.5.2 在网页中添加图片 11.5.3 在网页中添加超链接 11.5.4 在网页中使用表格 11.5.5 在网页中添加背景图片 11.5.6 在网页中添加背景音乐 11.5.7 应用模板和主题

11.5.1 在网页中添加文字
? 同Word中基本类似 中基本类似 ? 可以直接利用键盘输入各种文本 ? 可以利用格式工具栏和字体、段落对话框 可以利用格式工具栏和字体、 来进行文本的格式设置

11.5.2 在网页中添加图片
? 同Word中操作类似 中操作类似 ? 设置环绕方式等格式 ? 插入来自根目录之外的图片

11.5.3 在网页中添加超链接
? 1. 链接到另一个网页 ? 2. 链接到一个网址 ? 3. 链接到电子邮箱

11.5.4 在网页中使用表格
? 1.插入表格 .
– 选择【表格】→【插入】→【表格】菜单命令

? 2.对表格的操作 .
– 合并单元格 – 拆分单元格

? 3.表格的设置 .
– 设置表格属性 – 设置单元格属性

11.5.5 在网页中添加背景图片

? 选择【格式】→【背景】菜单命令 选择【格式】 【背景】

11.5.6 在网页中添加背景音乐

11.5.7 应用模板和主题
? 1. 网页模板
– 选择【视图】→【任务窗格】菜单命令 – 在任务窗格中选择【网页模板】命令

? 2. 站点模板
– 选择【视图】→【任务窗格】菜单命令 – 在任务窗格中选择【Web站点模板】命令

? 3. 应用主题
– 选择【格式】→【主题】菜单命令

11.6 在网页中添加其它元素
? ? ? ? ? ? 11.6.1 插入滚动字幕 11.6.2 插入悬停按钮 11.6.3 插入视频 11.6.4 使用图像映射 11.6.5 应用网页过渡 11.6.6 应用动态 应用动态HTML效果 效果

11.6.1 插入滚动字幕

? 选择【插入】→【Web组件】菜单命令 选择【插入】 【 组件】 组件 ? 在“组件类型”中选择动态效果,并在右侧效果列表中选 组件类型”中选择动态效果, 字幕” 择“字幕”效果

11.6.2 插入悬停按钮

? 选择【插入】→【Web组件】菜单命令 选择【插入】 【 组件】 组件 ? 在“组件类型”中选择动态效果,并在右侧效果 组件类型”中选择动态效果, 列表中选择“悬停按钮” 列表中选择“悬停按钮”效果

11.6.3 插入视频
? 选择【插入】→【图片】→【视频】菜单 选择【插入】 【图片】 【视频】 命令

11.6.4 使用图像映射
? 利用图象映射可以为一张图片的不同部分 加上不同的“热点”区域, 加上不同的“热点”区域,为每个热点加 上不同的超链接, 上不同的超链接,从而使得在网页上点击 相应热点即可链接到相应区域 ? 步骤: 步骤:
– 选择热点绘制工具 – 绘制热点 – 设置超链接

11.6.5 应用网页过渡

? 选择【格式】→【网页过渡】菜单命令 选择【格式】 【网页过渡】

11.6.6 应用动态 应用动态HTML效果 效果

? 选择【格式】→【动态 选择【格式】 【动态HTML效果】菜单命令 效果】 效果

11.7 框架网页的使用
? 11.7.1 新建框架网页 ? 11.7.2 保存框架网页 ? 11.7.3 框架网页中的超链接

11.7.1 新建框架网页
? 选择【视图】→【任务窗格】菜单命令 选择【视图】 【任务窗格】 ? 在任务窗格中选择【网页模板】命令 在任务窗格中选择【网页模板】 ? 在对话框中选择合适的框架网页类型即可

11.7.2 保存框架网页
? 选择【文件】→【保存】命令 选择【文件】 【保存】 ? 按照对话框所提示的步骤将框架网页的各 个部分逐个保存

11.7.3 框架网页中的超链接
? 在框架网页中设置超 链接的步骤同一般超 链接的设置相同 ? 唯一有区别的是在 编辑超链接” “编辑超链接”对话 框中要单击【 框中要单击【目标框 按钮, 架】按钮,在“目标 框架”对话框中设置 框架” 链接的目标框架。 链接的目标框架。

11.8 利用 Dreamweaver制作网页 制作网页
? ? ? ? 11.8.1 Dreamweaver窗口组成 窗口组成 11.8.2 一个简单的例子 11.8.3 插入 插入flash影片 影片 11.8.4 层的概念

11.8.1 Dreamweaver 窗口组成

11.8.2 一个简单的例子
? 1. 定义站点
– 选择【Site】→【Define Sites】菜单命令

? 2. 制作简单的网页
– 添加文字 – 插入图片 – 添加超链接 – 插入表格

11.8.3 插入 插入flash影片 影片
? 单击“对象面板”的【Insert Flash】按钮 单击“对象面板” 】 即可

11.8.4 层的概念
? 层类似于 层类似于Word中的矩形文本框,可以定位 中的矩形文本框, 中的矩形文本框 在网页中的任何位置, 在网页中的任何位置,可以重叠在表格的 上方, 上方,从而营造出奇妙的效果 ? 单击 “对象面板”的【Draw Layer】按钮, 对象面板” 】按钮, 在网页中欲绘制层的左上角处单击鼠标并 拖动鼠标至层的右下角,放开鼠标, 拖动鼠标至层的右下角,放开鼠标,即可 绘制出一个矩形的层。 绘制出一个矩形的层。 ? 层中可以插入文字、图片、动画、视频等 层中可以插入文字、图片、动画、 多种对象

11.9 利用 利用HTML源代码制作网页 源代码制作网页
? ? ? ? ? 11.9.1 HTML简介 简介 11.9.2 HTML的开发工具 的开发工具 11.9.3 一张简单的 一张简单的HTML网页 网页 11.9.4 HTML中的基本语法 中的基本语法 11.9.5 HTML中的基本标记 中的基本标记

11.9.1 HTML简介 简介
? 网页上所传输的网页大多采用 网页上所传输的网页大多采用HTML语言来 语言来 编写 ? HTML的全名是“Hyper Text Markup 的全名是“ 的全名是 Language”,即“超文本标记语言”,是 超文本标记语言” , 用特殊标记来描述文档结构和表现形式的 一种语言。 一种语言。

11.9.2 HTML的开发工具 的开发工具
? HTML文档其实是一种纯文本文件,可以用 文档其实是一种纯文本文件, 文档其实是一种纯文本文件 任何文本编辑器来编写, 任何文本编辑器来编写,只需要在保存时 将其后缀命名为.htm或.html即可。 即可。 将其后缀命名为 或 即可 ? FrontPage ? Dreamweaver ? 记事本 ? EditPlus ? UltraEdit

11.9.3 一张简单的 一张简单的HTML网页 网页

11.9.4 HTML中的基本语法 中的基本语法
? 一般 一般HTML文档都由 文档都由<HTML>标记开始,到 标记开始, 文档都由 标记开始 </HTML>标记结束,分为文档头 标记结束, 标记结束 分为文档头<Head>和 和 文档主体<Body>两大部分。 两大部分。 文档主体 两大部分 ? 标记在使用的时候必须用尖括号“<>”括起 标记在使用的时候必须用尖括号“ 括起 ? 为了明确网页中某个元素的功能,在标记 为了明确网页中某个元素的功能, 中会加入描述元素的某种特性的参数及相 关的语法,这称为“标记属性” 关的语法,这称为“标记属性”。

11.9.5 HTML中的基本标记 中的基本标记
? ? ? ? ? ? ? ? ? <html>和</html>标记 和 标记 <head>和</head>标记 和 标记 <body>和</body>标记 和 标记 <title>和</title>标记 <title>和</title>标记 <p>标记 标记 <br>标记 标记 < bgsound >标记 标记 <font>和</font>标记 和 标记 <img>标记 标记

11.10 发布站点
? 11.10.1 为什么要发布站点 ? 11.10.2 发布站点的几种方式

11.10.1 为什么要发布站点
? 发布站点就是将网站中所有的文件及文件 夹复制到网络服务器上的过程。 夹复制到网络服务器上的过程。 ? 这样其它人才能访问你所制作的网站。 这样其它人才能访问你所制作的网站。

11.10.2 发布站点的几种方式
? ? ? ? 1.Ftp上传 . 上传 2.利用 .利用FrontPage的发布功能上传 的发布功能上传 3.利用 .利用www服务器提供的在线上传功能 服务器提供的在线上传功能 4.将自己的计算机当作服务器 .

谢谢! 谢谢!


赞助商链接
更多相关文档:

《信息技术应用》(Windows XP平台)课程考核说明

搜 试试 7 帮助 全部 DOC PPT TXT PDF XLS ...《信息技术应用》是中央广播电视大学“一村一名大学...Windows XP 操作系统基本使用方法 考试范围: Windows...

计算机应用基础(Windows XP+Office 2003)第2版 周南岳

计算机应用基础(Windows XP+Office 2003)第2版 周南岳_中职中专_职业教育_教育专区。计算机应用基础(Windows XP+Office 2003)第2版 周南岳主编习题参考答案。...

《计算机应用基础(Windows XP + Office 2007)》电子教...

《计算机应用基础(Windows XP + Office 2007)》电子...然后在制作以江南水乡为主题的演示文稿 2、在自主性...协作性环境下,学会自主探究,学会与人协作; 情感态度...

WindowsXP操作系统基础知识

WindowsXP操作系统基础知识_电脑基础知识_IT/计算机_...PPT POWERPOINT 软件产生的文件类型 WMV 视频文件,...(5)在 WindowsXP 中卸载应用程序的途径有使用【...

大学信息技术应用基础-作业二

浙江广播电视大学 各专业 “大学信息技术应用基础”课程作业(二)第 3 章 Windows XP 操作系统使用一、单选题 1.在 Windows XP 资源管理器中,假设已经选定文件或...

计算机应用基础教案 Windows XP版

计算机应用基础教案 Windows XP版_教学计划_教学研究...第七章 课程内容 计算机基础知识 操作系统的使用 因...在网络上上传、下载或 转换视频以及网页制作等实际...

计算机应用基础(主编 周南岳)2.3 管理与应用Windows XP

多媒体 PPT_ 计算机应用基础(Windows XP+Office 2003) (主编 周南岳)了解控制面板的功能; 使用控制面板配置系统; 使用操作系统中自带的常用程序; 安装和使用打印机...

信息技术基础

信息技术基础一、单选题 1、在 Windows XP 环境中...A、视频 二、填空题 1、制作网页基本过程可分为...的应用 和发展;第六次信息革命是以计算机网络技术为...

《计算机与信息技术应用基础》教学进度表_图文

《计算机与信息技术应用基础》教学进度表_教学计划_...第 3 章 中文 Windows XP 操作系统: 3.6 Windows...(未完部分) 4.3 演示文稿制作软件 PowerPoint 2003 ...

计算机应用基础教案_Windows_XP版_图文

计算机应用基础教案_Windows_XP版_理学_高等教育_...在这样一个系统内,人是得到何种类 型的信息,每种...在网络上上传、下载或 转换视频以及网页制作等实际...

更多相关标签:
网站地图

文档资料共享网 nexoncn.com copyright ©right 2010-2020。
文档资料共享网内容来自网络,如有侵犯请联系客服。email:zhit325@126.com