网页制作培训班课件.ppt
合集下载
网页制作(详细版)ppt课件
WWW信息发布模式：
• WWW信息发布：采用客户端/服务器（Client / Server）模式。WWW服务器程序运行在WWW服务 器上，用于发布存放在WWW服务器中的网页；
下一页
WWW客户端程序运行在用户计算机上的网页浏览
1. 网站设计的基本知识
HTTP协议 • 超文本传输协议HTTP（Hyper Text Transfer Protocol）是 WWW服务所使用的信息传输协议，即访问Internet上的 Web页面所用协议。 • 打开Internet上某一网页：HTTP://<WWW服务器的域名 或ip地址>/<目录路径>/<文件名> 如：/wlzx/index.htm 或者：http://210.40.64.7/wlzx/index.htm
第八章 网页制作
本章内容
8.1 网站规划与设计 8.2 Dreamweaver MX基础知识 8.3 在网页中添加对象 8.4 在网页中使用行为和层 8.5 在网页中使用模板 8.6 网站制作实例
8.1 网站规划与设计
8.1.1 概述 8.1.2 网站设计 8.1.3 内容搜集与组织
home
8.1.1 概述
home
2. 网站结构设计
(1) 确定栏目和版块
• 突出特点 • 设置最近更新、网站指南和交互栏目
(2) 确定网站的目录结构
• 将所有的文件都放在站点根目录下的相应目录中。
• 按栏目内容建立子目录。每个主要的目录下都建立独 立的“images”目录。
• 不要使用中文作为目录或文件的名字，命名的名称不
能过长，应简单明了。
下一页
2. 网站结构设计
(3) 确定网站的链接结构
• WWW信息发布：采用客户端/服务器（Client / Server）模式。WWW服务器程序运行在WWW服务 器上，用于发布存放在WWW服务器中的网页；
下一页
WWW客户端程序运行在用户计算机上的网页浏览
1. 网站设计的基本知识
HTTP协议 • 超文本传输协议HTTP（Hyper Text Transfer Protocol）是 WWW服务所使用的信息传输协议，即访问Internet上的 Web页面所用协议。 • 打开Internet上某一网页：HTTP://<WWW服务器的域名 或ip地址>/<目录路径>/<文件名> 如：/wlzx/index.htm 或者：http://210.40.64.7/wlzx/index.htm
第八章 网页制作
本章内容
8.1 网站规划与设计 8.2 Dreamweaver MX基础知识 8.3 在网页中添加对象 8.4 在网页中使用行为和层 8.5 在网页中使用模板 8.6 网站制作实例
8.1 网站规划与设计
8.1.1 概述 8.1.2 网站设计 8.1.3 内容搜集与组织
home
8.1.1 概述
home
2. 网站结构设计
(1) 确定栏目和版块
• 突出特点 • 设置最近更新、网站指南和交互栏目
(2) 确定网站的目录结构
• 将所有的文件都放在站点根目录下的相应目录中。
• 按栏目内容建立子目录。每个主要的目录下都建立独 立的“images”目录。
• 不要使用中文作为目录或文件的名字，命名的名称不
能过长，应简单明了。
下一页
2. 网站结构设计
(3) 确定网站的链接结构
《网页设计基础》PPT课件
1.4 建立网站的基本流程
图1-2所示的是一个网站的完整制作流程.
确定主题策划与准备来自收集资料与素材规划网站结构
图
-
1
设计网页版式
2
确定网站结构
网
站
制作阶段
制作网页元素
的
制
插入元件与排版
作 流
上传网站
程
后期工作
维护与更新
1.4.1 确定主题
网站的主题也就是网站的题材, 是网站设计首先遇到的问题.
〔2〕利用Fireworks修改图像非常方便.
〔3〕Fireworks无需借助其他工具就可 以完成将一个图像转化为网页元素的全过程.
〔4〕Fireworks具有文件导出功能.
1.3.2 Flash
Flash是Macromedia公司开发 的用于矢量图形编辑和动画创作的 专业软件,它是一种交互式动画设 计工具,用它可以将音乐、声效、 动画以及富有新意的界面融合在一 起,以制作出高品质的网页动态效 果.
网站的定位要小,内容要精.
网站的题材最好选自己擅长或 者喜爱的内容.
网站名称,是网站设计的一部 分,而且是一个关键的要素,和现实 生活中一样,网站名称是否正气、
1.4.2 搜集资料 1.4.3 网站的整体规划
进行网站的整体规划也就是组 织网站的内容并设计其结构. 1.4.4 网页设计与制作
1．静态网页的设计与制 作
Dreamweaver是 Macromedia公司推出的一款大 众化的网页制作软件,它具有可 视化编辑界面,用户不必编写复 杂的HTML源代码就可以生成跨 平台、跨浏览器的网页,不仅适 合于专业网页编辑人员的需要, 同时也容易被业余网页制作人员 所掌握.
1.2.3 FrontPage
【精品课件】网页制作的基本知识PPT共21页
61、奢侈是舒适的，否则就不是奢侈 。——CocoCha nel 62、少而好学，如日出之阳；壮而好学 ，如日 中之光 ；志而 好学， 如炳烛 之光。 ——刘 向 63、三军可夺帅也，匹夫不可夺志也。 ——孔 丘 64、人生就是学校。在那里，与其说好 的教师 是幸福 ，不如 说好的 教师是 不幸。 ——海 贝尔 65、接受挑战，就可以享受胜利的喜悦 。——杰纳勒 尔·乔治·S·巴顿
谢谢！
பைடு நூலகம்
【精品课件】网页制作的基本知识
11、获得的成功越大，就越令人高兴 。野心 是使人 勤奋的 原因， 节制使 人枯萎 。 12、不问收获，只问耕耘。如同种树 ，先有 根茎， 再有枝 叶，尔 后花实 ，好好 劳动， 不要想 太多， 那样只 会使人 胆孝懒 惰，因 为不实 践，甚 至不接 触社会 ，难道 你是野 人。(名 言网) 13、不怕，不悔(虽然只有四个字，但 常看常 新。 14、我在心里默默地为每一个人祝福 。我爱 自己， 我用清 洁与节 制来珍 惜我的 身体， 我用智 慧和知 识充实 我的头 脑。 15、这世上的一切都借希望而完成。 农夫不 会播下 一粒玉 米，如 果他不 曾希望 它长成 种籽； 单身汉 不会娶 妻，如 果他不 曾希望 有小孩 ；商人 或手艺 人不会 工作， 如果他 不曾希 望因此 而有收 益。-- 马钉路 德。
网页设计与制作培训课件
如何选择Web服务器？
动态网站设计主要三种技术路线： ● Microsoft Windows2000／9x／XP+ASP-IIS+MS
SQLServer／Access （包括 .net） ● Windows／Linux +JSP +Tomcat／+MSSQLServer／
Access／MySQL ● Linux+PHP+Apache+MySQL
优点： 1 、 跨 平 台 。 JSP 拥 有 Java 编 程 语 言
“一次编写，各处运行”的特点。 2、稳定性和安全性。 3、在大型商务应用中，被广泛采用。
缺点： 执行效率相对低一些。
网页中数据库
网页数据库是什么意思？什么情况下需要运用到 数据库？数据库有哪些种类？
• 网页数据库是存放网站系统数据的地方。 • 当用户网站有程序模块，并且需要通过程序作数据操作工作
• 域名便于记忆，在IP地址发生变化的情况下，通 过改变解析对应关系，域名仍可保持不变。
简单理解，俗称网址。
.cn ---中国 .com-用于企业 .edu--用于教育机构 .gov 政府部门 .net 网络信息中心 .org 非盈利组织
• 注册域名需要遵循先申请先注册原则。域 名管理中心是中国互联网络信息中心。
无数个网站和网页的集合 由 “统一资源定位符” （URL）标识 通过点击链接来获得资源 通过超文本传输协议传送给使用者
浏览器
• 通过浏览器，用户可以在浩瀚的Internet海洋 中漫游，搜索和浏览自己感兴趣的信息。
IE
火狐 谷歌 网景 遨游
360
传展示产品 ，狭义
服务
无时空 限制
营运
网页设计与制作基础培训课件
2010年8月
网页设计与制作基础
安徽师范大学
WWW服务采用了客户／服务器工作模式
۞ 在该模式中，信息资源以页面（也称网页或Web页） 的形式存储在Web服务器中；用户查询信息时执行 一个客户端的应用程序，简称客户程序（Cient） 或称为浏览器（Browser）程序。
超文本（Hypertext）数据结构
计算机网络分为以下3类：
۞ 局域网（Local Area Network，LAN） ۞ 城域网（Metropolitan Area Network，MAN） ۞ 广域网（Wide Area Network，WAN）
计算机网络的应用
۞ (1)信息的获取与发布 ۞ (3)网上交际 ۞ (5)网络电话 ۞ (7)远程登录 ۞ (9)电子公告板
IE 浏览器
۞ 是客户端的浏览器软件具有Internet地址(Web地址) 和文件路径导航能力，它向Web服务器发出请求， 从Web 服务器上搜索需要的信息、浏览Web 网页、 查看源文件、收发电子邮件，上传网页等。
2010年8月
网页设计与制作基础
安徽师范大学
1.1.2 计算机网络分类、功能和应用
۞ 静 态 网 页 是 一 个 html 或 htm 文 件 ， 服 务 器 传 送 HTML代码的文件，不加处理直接下载到客户端的 浏览器，再由浏览器解释为可见的对象呈现给浏览 者。运行在客户端的页面是已经事先做好并存放在 服务器中的网页。
۞ 静态网页的缺点：呆板、缺乏交互性等
2010年8月
网页设计与制作基础
۞ 是一种用计算机来实现连接相关文档的结构，该连 接以高亮单词或图象形式嵌入在文档的文字之中。 当被激活时，便立即检索连接的文档并显示出来， 在被连接的文档中又可以嵌套别的连接，如此多重 嵌套，以至无穷。
网页设计与制作基础
安徽师范大学
WWW服务采用了客户／服务器工作模式
۞ 在该模式中，信息资源以页面（也称网页或Web页） 的形式存储在Web服务器中；用户查询信息时执行 一个客户端的应用程序，简称客户程序（Cient） 或称为浏览器（Browser）程序。
超文本（Hypertext）数据结构
计算机网络分为以下3类：
۞ 局域网（Local Area Network，LAN） ۞ 城域网（Metropolitan Area Network，MAN） ۞ 广域网（Wide Area Network，WAN）
计算机网络的应用
۞ (1)信息的获取与发布 ۞ (3)网上交际 ۞ (5)网络电话 ۞ (7)远程登录 ۞ (9)电子公告板
IE 浏览器
۞ 是客户端的浏览器软件具有Internet地址(Web地址) 和文件路径导航能力，它向Web服务器发出请求， 从Web 服务器上搜索需要的信息、浏览Web 网页、 查看源文件、收发电子邮件，上传网页等。
2010年8月
网页设计与制作基础
安徽师范大学
1.1.2 计算机网络分类、功能和应用
۞ 静 态 网 页 是 一 个 html 或 htm 文 件 ， 服 务 器 传 送 HTML代码的文件，不加处理直接下载到客户端的 浏览器，再由浏览器解释为可见的对象呈现给浏览 者。运行在客户端的页面是已经事先做好并存放在 服务器中的网页。
۞ 静态网页的缺点：呆板、缺乏交互性等
2010年8月
网页设计与制作基础
۞ 是一种用计算机来实现连接相关文档的结构，该连 接以高亮单词或图象形式嵌入在文档的文字之中。 当被激活时，便立即检索连接的文档并显示出来， 在被连接的文档中又可以嵌套别的连接，如此多重 嵌套，以至无穷。
网页制作教程-PPT课件
菜单栏 插入栏
2. 网页的类型
• 动态网页 是在发送到浏览器之 前由应用程序服务器 自定义的网页。动态 网页要在经过服务器 的修改后才被发送到 请求它的浏览器。网 页发生更改的特性便 是称其为动态的原因。
“文档”工具栏
面板组
“文档”窗口 状态栏 “属性”面板
动态网页的工作流程 11
11
子任务1
3. 组成页面的元素
可以通过“文件”->“在浏览器中预览”->iexplore运 行。 直接单击“F12”运行。 点击“文档”工具栏中的快捷按钮运行。
27
27
小结与作业
bvtc
静态网页与动态网页 Html基本概念 网页设计与制作的基本流程 Dreamweaver CS3工作界面 如何创建本地站点并进行管理 对页面属性进行设置 代码文件头“title”标记的设置 如何运行网页文件 上机实验1
bvtc
网页的基本操作与站点管理
不要将所有文件都放在根目录下，这样做会使文件管理混乱，上 传速度慢。 按栏目内容建立子目录。 次要栏目视情况而定。对于需要经常更新的栏目可以建立独立的 子目录。而一些相关性强，不需要经常更新的栏目，可以合并放 在一个统一的目录下。 所有程序一般都放在特定目录中，所有需要下载的内容也最好放 在一个子目录下。 在每个主目录下都建立独立的images目录，。为每一个栏目建 立一个独立的images目录是最方便管理的。而根目录下的 images目录只是用来放首页和一些次要栏目的图片。 注意：目录的层次不要太深，不要使用中文目录，不要使用过长 的目录名，目录要做到“见名之义”等。
二、网站的制作期:使用Dreamweaver制作首页及分页。 三、网站的后期维护:测试网站,申请域名,上传网站内容及管理。
2. 网页的类型
• 动态网页 是在发送到浏览器之 前由应用程序服务器 自定义的网页。动态 网页要在经过服务器 的修改后才被发送到 请求它的浏览器。网 页发生更改的特性便 是称其为动态的原因。
“文档”工具栏
面板组
“文档”窗口 状态栏 “属性”面板
动态网页的工作流程 11
11
子任务1
3. 组成页面的元素
可以通过“文件”->“在浏览器中预览”->iexplore运 行。 直接单击“F12”运行。 点击“文档”工具栏中的快捷按钮运行。
27
27
小结与作业
bvtc
静态网页与动态网页 Html基本概念 网页设计与制作的基本流程 Dreamweaver CS3工作界面 如何创建本地站点并进行管理 对页面属性进行设置 代码文件头“title”标记的设置 如何运行网页文件 上机实验1
bvtc
网页的基本操作与站点管理
不要将所有文件都放在根目录下，这样做会使文件管理混乱，上 传速度慢。 按栏目内容建立子目录。 次要栏目视情况而定。对于需要经常更新的栏目可以建立独立的 子目录。而一些相关性强，不需要经常更新的栏目，可以合并放 在一个统一的目录下。 所有程序一般都放在特定目录中，所有需要下载的内容也最好放 在一个子目录下。 在每个主目录下都建立独立的images目录，。为每一个栏目建 立一个独立的images目录是最方便管理的。而根目录下的 images目录只是用来放首页和一些次要栏目的图片。 注意：目录的层次不要太深，不要使用中文目录，不要使用过长 的目录名，目录要做到“见名之义”等。
二、网站的制作期:使用Dreamweaver制作首页及分页。 三、网站的后期维护:测试网站,申请域名,上传网站内容及管理。
网页制作ppt课件
面向21世纪高职高专计算机系列规划教材
1.4 网站与网页的基本知识
网页设计基础 网站设计基础 网站开发流程
面向21世纪高职高专计算机系列规划教材
“网页”就是指通过浏览器在WWW上看到的 页面，网页的英文名为Web Page，我们通常所说 的主页（home page）是指网站的第一个网页， 通常名称为index。 网页设计的基本要求有：页面版式和布局、 网页的色彩、网页的文字、网页中的表格等。
面向21世纪高职高专计算机系列规划教材
网站是网页的集合，是网页的组织形式。 在网站的设计过程中要注意以下几点：网站 的目标、网站的风格、网站的CI形象（Corporate Identity）、网站的栏目和版块、网站目录和链接 结构等。
面向21世纪高职高专计算机系列规划教材
一个完整的网站开发流程如下： 定义站点 建立网站结构 首页的设计和制作 其他页面的制作 测试 发布和维护
网 页 制 作
徐晓明 蔡向东 方蓓 主编 副主编
网页制作
第1章 第2章 第3章 第4章 第5章 第6章 第7章 第8章 第9章 第10章 第11章 第12章 初识Dreamweaver MX Photoshop 7.0和Flash MX的基本操作 创建网页的基本对象 样式表 使用框架 层与时间轴 插入媒体 行为 表单 库与模板 测试并发布网站 使用Dreamweaver MX创建一个讨论区
4.2 层叠样式表
层叠样式表简述 编辑CSS样式
面向21世纪高职高专计算机系列规划教材
CSS样式分类 使用CSS样式的方式 “CSS样式”面板 创建CSS样式 附加外部CSS样式表
面向21世纪高职高专计算机系列规划教材
1.4 网站与网页的基本知识
网页设计基础 网站设计基础 网站开发流程
面向21世纪高职高专计算机系列规划教材
“网页”就是指通过浏览器在WWW上看到的 页面，网页的英文名为Web Page，我们通常所说 的主页（home page）是指网站的第一个网页， 通常名称为index。 网页设计的基本要求有：页面版式和布局、 网页的色彩、网页的文字、网页中的表格等。
面向21世纪高职高专计算机系列规划教材
网站是网页的集合，是网页的组织形式。 在网站的设计过程中要注意以下几点：网站 的目标、网站的风格、网站的CI形象（Corporate Identity）、网站的栏目和版块、网站目录和链接 结构等。
面向21世纪高职高专计算机系列规划教材
一个完整的网站开发流程如下： 定义站点 建立网站结构 首页的设计和制作 其他页面的制作 测试 发布和维护
网 页 制 作
徐晓明 蔡向东 方蓓 主编 副主编
网页制作
第1章 第2章 第3章 第4章 第5章 第6章 第7章 第8章 第9章 第10章 第11章 第12章 初识Dreamweaver MX Photoshop 7.0和Flash MX的基本操作 创建网页的基本对象 样式表 使用框架 层与时间轴 插入媒体 行为 表单 库与模板 测试并发布网站 使用Dreamweaver MX创建一个讨论区
4.2 层叠样式表
层叠样式表简述 编辑CSS样式
面向21世纪高职高专计算机系列规划教材
CSS样式分类 使用CSS样式的方式 “CSS样式”面板 创建CSS样式 附加外部CSS样式表
面向21世纪高职高专计算机系列规划教材
网页制作网页制作基础45页PPT
谢谢！Байду номын сангаас
45
网页制作网页制作基础
21、静念园林好，人间良可辞。 22、步步寻往迹，有处特依依。 23、望云惭高鸟，临木愧游鱼。 24、结庐在人境，而无车马喧；问君 何能尔 ？心远 地自偏 。 25、人生归有道，衣食固其端。
▪
26、要使整个人生都过得舒适、愉快，这是不可能的，因为人类必须具备一种能应付逆境的态度。——卢梭
▪
27、只有把抱怨环境的心情，化为上进的力量，才是成功的保证。——罗曼·罗兰
▪
28、知之者不如好之者，好之者不如乐之者。——孔子
▪
29、勇猛、大胆和坚定的决心能够抵得上武器的精良。——达·芬奇
▪
30、意志是一个强壮的盲人，倚靠在明眼的跛子肩上。——叔本华
网页制作教程-PPT课件
bvtc
模块
HTML语言基础 插入文本、图像 表格规划与布局 多媒体与超链接 框架、层 CSS样式与行为 模板与库
技能培养
素质提高
分析问题的能力 解决问题的能力
掌握HTML语言等
制作网页的基础知 识，能利用 Dreamweaver制作出 精美的静态网站。 为后继的动态网站 建设课程打下良好 基础。
机械工业出版社出版的高职高专教材
《Dreamweaver CS3网页设计案例教程》
1、本教材适合高职高专的网页设计与规划教学；
2、教材采用模块化教学、目标任务驱动、案例操作步骤、
知识点详解四层结构引导学生完成网页设计的每一环节。
（三）教参
1、《网页设计与制作》人民邮电出版社 2、 网络资源
4
课程内容
No Image
19
子任务1
一、网站的规划期
bvtc
初识网页与网页设计软件
1. 定位主题（题材和内容、网站名称等） 2. 资料搜集（文字信息、图像、动画、音频视频等） 3. 结构设计（设计网站的栏目及目录结构。注意不要将所有的文件都存 放在根目录下；要按栏目内容建立子目录；要在每个主目录下都建立独 立的图片目录；目录的层次不要太深。） 4. 形象设计（网站风格、标志、颜色、标准字体等） 5. 确定版面布局，设计首页及各分页
初识网页与网页设计软件
• 文本——网页中信息的主要表达方式。 • 图像——常用的有三种格式：GIF、JPEG和PNG。 • 动画——常见的包括两种：GIF动画、Flash动画。
• 视频和音频——种类很多，例如：AVI、RM、mp3等。
• 超级链接——是在一个网站中的各网页之间进行跳转的 媒介。
• 导航栏——用于引导访问者浏览站点。
模块
HTML语言基础 插入文本、图像 表格规划与布局 多媒体与超链接 框架、层 CSS样式与行为 模板与库
技能培养
素质提高
分析问题的能力 解决问题的能力
掌握HTML语言等
制作网页的基础知 识，能利用 Dreamweaver制作出 精美的静态网站。 为后继的动态网站 建设课程打下良好 基础。
机械工业出版社出版的高职高专教材
《Dreamweaver CS3网页设计案例教程》
1、本教材适合高职高专的网页设计与规划教学；
2、教材采用模块化教学、目标任务驱动、案例操作步骤、
知识点详解四层结构引导学生完成网页设计的每一环节。
（三）教参
1、《网页设计与制作》人民邮电出版社 2、 网络资源
4
课程内容
No Image
19
子任务1
一、网站的规划期
bvtc
初识网页与网页设计软件
1. 定位主题（题材和内容、网站名称等） 2. 资料搜集（文字信息、图像、动画、音频视频等） 3. 结构设计（设计网站的栏目及目录结构。注意不要将所有的文件都存 放在根目录下；要按栏目内容建立子目录；要在每个主目录下都建立独 立的图片目录；目录的层次不要太深。） 4. 形象设计（网站风格、标志、颜色、标准字体等） 5. 确定版面布局，设计首页及各分页
初识网页与网页设计软件
• 文本——网页中信息的主要表达方式。 • 图像——常用的有三种格式：GIF、JPEG和PNG。 • 动画——常见的包括两种：GIF动画、Flash动画。
• 视频和音频——种类很多，例如：AVI、RM、mp3等。
• 超级链接——是在一个网站中的各网页之间进行跳转的 媒介。
• 导航栏——用于引导访问者浏览站点。
《网页制作实训报告》PPT课件
</ul>
</div>
h
16
典型页面Css核心代码：
body {
background-repeat: no-repeat; background-color: #FFFFFF; padding: 0; margin: 0; } a{ outline: none; } p{ padding: 0; margin: 0; }
z-index: 10000; margin: -16px -16px; color: #fff; text-indent: -9999em; overflow: hidden; background: url(../Img/indeximg/ajax-loader.gif) no-repeat left top; width: 31px;
1代码验证html和css2兼容性测试3可用性测试系统效果预览图div我们用了大量的div基本每个网页都有div运用能使整个网页的布局得到很好的控制但这个div一定要用到该用的地方因为一点误差就会导致在预览的时候可能就会不协调不是之前设计的那样可能在编辑的时候你设计很好但预览的时候网页就崩溃了
智能手机操作与应用导引网站
• 第四小组 • 移设1213
h
1
网站项目概况：
• 为了以下目的安排这次实训： • 掌握网站开发从规划到构建、维护的方法； • 精通Dreanmweaver制作静态网页的方法，掌握一定的动态网页设计方法； • 具有HTML语言编程的能力和CSS+DIV的运用能力 • 对网站涉及的主要内容进行文字的提炼、压缩和再加工以适合用户快速扫读的要求； • 掌握按钮、图片等修饰、再加工的方法；（利用“美图秀秀”PHOTOSHOP等工具进
/></li> <li> <img class="cubeRandom" src="../Img/index-img/slider2.jpg"
</div>
h
16
典型页面Css核心代码：
body {
background-repeat: no-repeat; background-color: #FFFFFF; padding: 0; margin: 0; } a{ outline: none; } p{ padding: 0; margin: 0; }
z-index: 10000; margin: -16px -16px; color: #fff; text-indent: -9999em; overflow: hidden; background: url(../Img/indeximg/ajax-loader.gif) no-repeat left top; width: 31px;
1代码验证html和css2兼容性测试3可用性测试系统效果预览图div我们用了大量的div基本每个网页都有div运用能使整个网页的布局得到很好的控制但这个div一定要用到该用的地方因为一点误差就会导致在预览的时候可能就会不协调不是之前设计的那样可能在编辑的时候你设计很好但预览的时候网页就崩溃了
智能手机操作与应用导引网站
• 第四小组 • 移设1213
h
1
网站项目概况：
• 为了以下目的安排这次实训： • 掌握网站开发从规划到构建、维护的方法； • 精通Dreanmweaver制作静态网页的方法，掌握一定的动态网页设计方法； • 具有HTML语言编程的能力和CSS+DIV的运用能力 • 对网站涉及的主要内容进行文字的提炼、压缩和再加工以适合用户快速扫读的要求； • 掌握按钮、图片等修饰、再加工的方法；（利用“美图秀秀”PHOTOSHOP等工具进
/></li> <li> <img class="cubeRandom" src="../Img/index-img/slider2.jpg"
网页制作技术PPT课件
3.文本与段落的格式设置
可以在“属性”面板中设置 可以用CSS样式设置
网页制作技术
4.项目符号和编号的插入
利用“属性面板”中“项目列表”按钮建立列表 的符号； 利用“属性面板”中“编号列表”按钮建立列表 的编号； 利用“文本凸出”和“文本缩进”按钮改变列表 的层次。 利用“列表项目”按钮可改变符号或编号的样式。
网页制作技术
二、文本的处理 1.文本的输入 网页中的文本可以直接输入； 也可以将现成的文本文件内容复制过来； 还可利用“文件/导入”命令，选择相应类 型的文件进行导入。
网页制作技术
2.文本的编辑
文本的编辑不外乎插入、删除、修改，个别文字 的插入、删除、修改与Word的处理相同。而利 用“编辑/查找和替换”命令，除了对当前文档 外，还可以对站点中的其它文档进行统一的修改
网页制作技术
2.直接编写HTML格式文件 HTML（Hyper Text Markup Language， 超文本标记语言）是一种用来制作超文本文 档的简单标记语言 用HTML编写的超文本文档称为HTML文档， 它能独立于各种操作系统平台（如UNIX， Windows等）。
网页制作技术
生成一个HTML文档主要有以下三种途径：
网页制作技术
2.电子邮件超链接的建立
选中需要创建超链接的文本或图像后，在“属 性”面板中的“链接”文本框中输入“mailto:邮箱 地址”，如mailto:jiaocai@即可。
网页制作技术
3.热点超链接的建立
如果希望同一幅图片上的不同区域能链接到 不同的目标，则在插入图片后，利用“属性”面 板中热点工具，在所插入的图片上绘制热点区域， 然后选中热点区域，并在属性面板中输入链接目 标即可。
第7章 网页制作技术
可以在“属性”面板中设置 可以用CSS样式设置
网页制作技术
4.项目符号和编号的插入
利用“属性面板”中“项目列表”按钮建立列表 的符号； 利用“属性面板”中“编号列表”按钮建立列表 的编号； 利用“文本凸出”和“文本缩进”按钮改变列表 的层次。 利用“列表项目”按钮可改变符号或编号的样式。
网页制作技术
二、文本的处理 1.文本的输入 网页中的文本可以直接输入； 也可以将现成的文本文件内容复制过来； 还可利用“文件/导入”命令，选择相应类 型的文件进行导入。
网页制作技术
2.文本的编辑
文本的编辑不外乎插入、删除、修改，个别文字 的插入、删除、修改与Word的处理相同。而利 用“编辑/查找和替换”命令，除了对当前文档 外，还可以对站点中的其它文档进行统一的修改
网页制作技术
2.直接编写HTML格式文件 HTML（Hyper Text Markup Language， 超文本标记语言）是一种用来制作超文本文 档的简单标记语言 用HTML编写的超文本文档称为HTML文档， 它能独立于各种操作系统平台（如UNIX， Windows等）。
网页制作技术
生成一个HTML文档主要有以下三种途径：
网页制作技术
2.电子邮件超链接的建立
选中需要创建超链接的文本或图像后，在“属 性”面板中的“链接”文本框中输入“mailto:邮箱 地址”，如mailto:jiaocai@即可。
网页制作技术
3.热点超链接的建立
如果希望同一幅图片上的不同区域能链接到 不同的目标，则在插入图片后，利用“属性”面 板中热点工具，在所插入的图片上绘制热点区域， 然后选中热点区域，并在属性面板中输入链接目 标即可。
第7章 网页制作技术
网页制作项目实训教程课件
2-1
2-1
2-1
2-2
2-2
2-2
3-1
3-1
3-1
A
B
3-1
属性 margin-left margin-right margin-top margin-bottom
语法规则 margin-left:5px; margin-right:10px; margin-top:20px; margin-bottom:15px;
属性值 visible hidden scroll auto
说明 默认值。内容不会被修剪，会呈现在盒子之外 内容会被修剪，并且其余内容是不可见的 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
3-2
4-1
4-1
4-1
属性值 repeat no-repeat repeat-x repeat-y
… <p>花篮的花儿香 <br/>听我来唱一唱 唱一唱</p> <p>来到了南泥湾 <br/>南泥湾好地方 好地方</p> …
2-1
2-2
2-2
符号名称
< > & ©
说明 表示空格 表示 < 符号 表示 > 符号 表示 & 符号 表示版权 © 符号
2-2
3-1
3-1
<body> <h4>无序列表</h4> <ul> <li>桔子</li> <li>香蕉</li> <li>苹果</li> </ul>
相关主题