46
网网网网网网网网网网网网网网网网网网网网CS3 CS3 —— —— Dreamweaver Dreamweaver

网页设计核心软件教程( CS3 版) —— Dreamweaver

  • Upload
    lindsay

  • View
    175

  • Download
    0

Embed Size (px)

DESCRIPTION

网页设计核心软件教程( CS3 版) —— Dreamweaver. 第 18 章 网站制作基本知识. 18.1 网站中的基本概念. 18.1.1 网站的分类 18.1.2 网页的分类. 18.1.1 网站的分类. 门户网站 个人网站 专业网站 职能网站 搜索引擎. 18.1.2 网页的分类. 按位置分类 首页 内页 按表现形式分类 静态网页 动态网页. 18.2 网页制作注意事项. 18.2.1 网页制作的一般步骤 18.2.2 网页制作的原则. 18.2.1 网页制作的一般步骤. 确定网站主题 收集、整理资料 - PowerPoint PPT Presentation

Citation preview

Page 1: 网页设计核心软件教程( CS3 版) —— Dreamweaver

网页设计核心软件教程(网页设计核心软件教程( CS3CS3 版)版)—— —— DreamweaverDreamweaver

Page 2: 网页设计核心软件教程( CS3 版) —— Dreamweaver

第 18 章 网站制作基本知识

Page 3: 网页设计核心软件教程( CS3 版) —— Dreamweaver

18.1网站中的基本概念• 18.1.1 网站的分类• 18.1.2 网页的分类

Page 4: 网页设计核心软件教程( CS3 版) —— Dreamweaver

18.1.1 网站的分类• 门户网站• 个人网站• 专业网站• 职能网站• 搜索引擎

Page 5: 网页设计核心软件教程( CS3 版) —— Dreamweaver

18.1.2 网页的分类• 按位置分类

– 首页– 内页

• 按表现形式分类– 静态网页– 动态网页

Page 6: 网页设计核心软件教程( CS3 版) —— Dreamweaver

18.2 网页制作注意事项• 18.2.1 网页制作的一般步骤• 18.2.2 网页制作的原则

Page 7: 网页设计核心软件教程( CS3 版) —— Dreamweaver

• 确定网站主题• 收集、整理资料• 规划、创建站点• 制作网页• 站点测试• 网页发布• 站点的更新与维护

18.2.1 网页制作的一般步骤

Page 8: 网页设计核心软件教程( CS3 版) —— Dreamweaver

18.2.2 网页制作的原则• 整体规划• 站名要有创意• 主题要突出• 网页浏览的通用性• 动画不能过多• 导航要鲜明• 页面元素的优化• 定期更新

Page 9: 网页设计核心软件教程( CS3 版) —— Dreamweaver

18.3 HTML基础• 18.3.1 HTML 语言结构• 18.3.2 常用 HTML 标签

Page 10: 网页设计核心软件教程( CS3 版) —— Dreamweaver

18.3.1 HTML语言结构•<html>•<head>•<title>文档标题 </title> ……•</head>•<body>•……•</body>•</html>

Page 11: 网页设计核心软件教程( CS3 版) —— Dreamweaver

18.3.1 HTML语言结构• 使用 HTML 标签要注意:

– 标签不区分大小写。– 标签名与“ <”“>” 之间不能有空格。– HTML 文档中的三个主要标签是 html 、 head 和 body ,

<html> 和 </html> 标签表示 HTML 文档的开始和结束;<head> 和 </head> 标签之间的部分是文件头部分,文件头中除了文档标题之外的信息都是在浏览器窗口不可见的;

– <body> 和 </body> 标签之间为文件体部分,在浏览器中要显示的内容以及显示内容的格式都应当放在其中。

Page 12: 网页设计核心软件教程( CS3 版) —— Dreamweaver

18.3.2 常用 HTML标签标签类型 标签名称 说明

非正文标签文件头标签 <head></head>

标题标签<title></title>

头元素<meta> 单独出现

文件体标签 <body></body>

正文标签

标题字体标签 <hx></hx 如 h1 、 h2 等段落标签 <p></p> 可成对出现,也可单独出现

换行标签 <br 单独出现水平线标签 <hr> 单独出现

Page 13: 网页设计核心软件教程( CS3 版) —— Dreamweaver

18.3.2 常用 HTML标签标签类型 标签名称 说明

正文标签

字符格式化标签<font></font>

黑体文本 <b></b>斜体文本 <i></i>带下划线文本 <u></u>

图像标签 <img> 单独出现超链接标签 <a></a>

表格标签 <table></table>

表格标题 <caption></caption>表格行标签 <tr></tr>行名或列名标签<th></th>单元格标签 <td></td>

Page 14: 网页设计核心软件教程( CS3 版) —— Dreamweaver

18.3.2 常用 HTML标签标签类型 标签名称 说明

其他标签 表单标签 <form></form>

框架标签 <frameset></frameset>

样式标签 <style></style>

层标签 <div></div>

Page 15: 网页设计核心软件教程( CS3 版) —— Dreamweaver

18.4 实例分析• 本实例中将使用 Dreamweaver 制作一个《网页设计与制作》的静态课程学习网站,该网站为一个专业网站,通过该实例的制作,既溶入网页设计与制作的思想与理念,又将 Dreamweaver 软件应用的各个知识点串联起来,使读者融会贯通,从而快速入门。

Page 16: 网页设计核心软件教程( CS3 版) —— Dreamweaver

第 19 章 网站的规划与创建

Page 17: 网页设计核心软件教程( CS3 版) —— Dreamweaver

19.1 网站的规划• 19.1.1 网站的整体规划• 19.1.2 网页的整体规划• 19.1.3 设计首页效果• 19.1.4 确定实现方式

Page 18: 网页设计核心软件教程( CS3 版) —— Dreamweaver

19.2 网站的创建• 19.2.1 创建站点• 19.2.3 站点的修改和编辑• 19.2.4 创建文件及文件夹• 19.2.5 网页的预览• 19.2.6 载入跟踪图像

Page 19: 网页设计核心软件教程( CS3 版) —— Dreamweaver

第 20 章 表格与框架

Page 20: 网页设计核心软件教程( CS3 版) —— Dreamweaver

20.1 表格排版• 20.1.1 表格的基本概念• 20.1.2 top.html 文件的表格排版• 20.1.3 main.html 文件的表格排版• 20.1.4 introduction.html 文件的表格排版• 20.1.5 表格排版的扩展视图

Page 21: 网页设计核心软件教程( CS3 版) —— Dreamweaver

20.2 框架结构• 20.2.1 框架的基本概念• 20.1.2 框架及框架集的创建• 20.2.3 创建实例中的框架集• 20.2.4 浮动框架的应用

Page 22: 网页设计核心软件教程( CS3 版) —— Dreamweaver

第 21 章 充实网页内容

Page 23: 网页设计核心软件教程( CS3 版) —— Dreamweaver

21.1 在 index.html文件中插入文件头内容• 21.1.1 插入标题• 21.1.2 插入关键字• 21.1.3 插入说明信息• 21.1.4 插入其他 meta 信息• 21.1.5 插入刷新信息• 21.1.6 注意事项

Page 24: 网页设计核心软件教程( CS3 版) —— Dreamweaver

21.2 充实 top.html文件的内容• 21.2.1 插入文本• 21.2.2 插入图像• 21.2.3 插入鼠标经过图像• 21.2.4 插入 Flash• 21.2.5 插入“ Flash 按钮 / 文本”• 21.2.6 插入导航条• 21.2.7 图像的热点链接• 21.2.8 插入日期• 21.2.9 超级链接

Page 25: 网页设计核心软件教程( CS3 版) —— Dreamweaver

21.3 充实main.html文件的内容• 21.3.1 插入特殊符号• 21.3.2 电子邮件链接• 21.3.3 锚点链接

Page 26: 网页设计核心软件教程( CS3 版) —— Dreamweaver

21.4 充实 introduction.html文件的内容• 21.4.1 插入水平线• 21.4.2 图文混排• 21.4.3 插入 Flash 元素

Page 27: 网页设计核心软件教程( CS3 版) —— Dreamweaver

第 22 章 层叠样式表

Page 28: 网页设计核心软件教程( CS3 版) —— Dreamweaver

22.1 CSS的基本概念• 22.1.1 CSS 面板• 22.1.2 CSS 文件类型• 22.1.3 CSS 类型

Page 29: 网页设计核心软件教程( CS3 版) —— Dreamweaver

22.2 CSS的应用• 22.2.1 创建外部 CSS 文件• 22.2.2 类样式的应用• 22.2.3 标签样式的应用• 22.2.4 高级样式的应用• 22.2.5 附加外部 CSS 文件

Page 30: 网页设计核心软件教程( CS3 版) —— Dreamweaver

第 23 章 层与行为

Page 31: 网页设计核心软件教程( CS3 版) —— Dreamweaver

23.1 层• 23.1.1 层的基本操作• 23.1.2 层的简单应用• 23.1.3 层标签与 CSS 样式的结合

Page 32: 网页设计核心软件教程( CS3 版) —— Dreamweaver

23.2 行为• 23.2.1 行为的基本概念• 23.2.2 行为的应用

Page 33: 网页设计核心软件教程( CS3 版) —— Dreamweaver

第 24 章 模版与库项目

Page 34: 网页设计核心软件教程( CS3 版) —— Dreamweaver

24.1 模版• 24.1.1 模版的创建• 24.1.2 模版的应用• 24.1.3 模版的更新

Page 35: 网页设计核心软件教程( CS3 版) —— Dreamweaver

24.2 库项目• 24.2.1 库项目的创建• 24.2.2 库项目的应用• 24.2.3 库项目的更新

Page 36: 网页设计核心软件教程( CS3 版) —— Dreamweaver

第 25 章 表单

Page 37: 网页设计核心软件教程( CS3 版) —— Dreamweaver

25.1 表单

Page 38: 网页设计核心软件教程( CS3 版) —— Dreamweaver

25.2 表单对象• 25.2.1 文本框 25.2.2 文本域• 25.2.3 隐藏域 25.2.4 复选框• 25.2.5 单选按钮 25.2.6 单选按钮组• 25.2.7 列表 /菜单 25.2.8 跳转菜单• 25.2.9 图像域 25.2.10 文件域• 25.2.11 按钮 25.2.12 标签

Page 39: 网页设计核心软件教程( CS3 版) —— Dreamweaver

25.3 表单的应用

Page 40: 网页设计核心软件教程( CS3 版) —— Dreamweaver

25.4 表单的客户端验证<script LANGUAGE="javascript"> function check() { if (document.Fform1.usertextfield.value == "") { alert("请填写您的姓名! "); document.Fform1.usertextfield.focus(); return (false); } document.Fform1.submit() } </script>

Page 41: 网页设计核心软件教程( CS3 版) —— Dreamweaver

25.4 表单的客户端验证在 <form>标签中添加代码:onSubmit="return check() "

Page 42: 网页设计核心软件教程( CS3 版) —— Dreamweaver

25.5 Spry组件• 25.5.1 Spry组件简介• 25.5.2 Spay组件应用实例

Page 43: 网页设计核心软件教程( CS3 版) —— Dreamweaver

第 26 章 站点的发布

Page 44: 网页设计核心软件教程( CS3 版) —— Dreamweaver

26.1 站点的整理• 26.1.1 在网页上添加链接• 26.1.2 修改站点基本定义• 26.1.3 站点的导入与导出

Page 45: 网页设计核心软件教程( CS3 版) —— Dreamweaver

26.2 站点的本地测试• 26.2.1 兼容性测试• 26.2.2 可访问性测试• 26.2.3 设置下载速度

Page 46: 网页设计核心软件教程( CS3 版) —— Dreamweaver

26.3 站点的发布• 26.3.1 配置远程信息• 26.3.2 站点的上传