Post on 09-Feb-2016
description
网页设计核心软件教程(网页设计核心软件教程( CS3CS3 版)版)—— —— DreamweaverDreamweaver
第 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 网页制作的一般步骤
18.2.2 网页制作的原则• 整体规划• 站名要有创意• 主题要突出• 网页浏览的通用性• 动画不能过多• 导航要鲜明• 页面元素的优化• 定期更新
18.3 HTML基础• 18.3.1 HTML 语言结构• 18.3.2 常用 HTML 标签
18.3.1 HTML语言结构•<html>•<head>•<title>文档标题 </title> ……•</head>•<body>•……•</body>•</html>
18.3.1 HTML语言结构• 使用 HTML 标签要注意:
– 标签不区分大小写。– 标签名与“ <”“>” 之间不能有空格。– HTML 文档中的三个主要标签是 html 、 head 和 body ,
<html> 和 </html> 标签表示 HTML 文档的开始和结束;<head> 和 </head> 标签之间的部分是文件头部分,文件头中除了文档标题之外的信息都是在浏览器窗口不可见的;
– <body> 和 </body> 标签之间为文件体部分,在浏览器中要显示的内容以及显示内容的格式都应当放在其中。
18.3.2 常用 HTML标签标签类型 标签名称 说明
非正文标签文件头标签 <head></head>
标题标签<title></title>
头元素<meta> 单独出现
文件体标签 <body></body>
正文标签
标题字体标签 <hx></hx 如 h1 、 h2 等段落标签 <p></p> 可成对出现,也可单独出现
换行标签 <br 单独出现水平线标签 <hr> 单独出现
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>
18.3.2 常用 HTML标签标签类型 标签名称 说明
其他标签 表单标签 <form></form>
框架标签 <frameset></frameset>
样式标签 <style></style>
层标签 <div></div>
18.4 实例分析• 本实例中将使用 Dreamweaver 制作一个《网页设计与制作》的静态课程学习网站,该网站为一个专业网站,通过该实例的制作,既溶入网页设计与制作的思想与理念,又将 Dreamweaver 软件应用的各个知识点串联起来,使读者融会贯通,从而快速入门。
第 19 章 网站的规划与创建
19.1 网站的规划• 19.1.1 网站的整体规划• 19.1.2 网页的整体规划• 19.1.3 设计首页效果• 19.1.4 确定实现方式
19.2 网站的创建• 19.2.1 创建站点• 19.2.3 站点的修改和编辑• 19.2.4 创建文件及文件夹• 19.2.5 网页的预览• 19.2.6 载入跟踪图像
第 20 章 表格与框架
20.1 表格排版• 20.1.1 表格的基本概念• 20.1.2 top.html 文件的表格排版• 20.1.3 main.html 文件的表格排版• 20.1.4 introduction.html 文件的表格排版• 20.1.5 表格排版的扩展视图
20.2 框架结构• 20.2.1 框架的基本概念• 20.1.2 框架及框架集的创建• 20.2.3 创建实例中的框架集• 20.2.4 浮动框架的应用
第 21 章 充实网页内容
21.1 在 index.html文件中插入文件头内容• 21.1.1 插入标题• 21.1.2 插入关键字• 21.1.3 插入说明信息• 21.1.4 插入其他 meta 信息• 21.1.5 插入刷新信息• 21.1.6 注意事项
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 超级链接
21.3 充实main.html文件的内容• 21.3.1 插入特殊符号• 21.3.2 电子邮件链接• 21.3.3 锚点链接
21.4 充实 introduction.html文件的内容• 21.4.1 插入水平线• 21.4.2 图文混排• 21.4.3 插入 Flash 元素
第 22 章 层叠样式表
22.1 CSS的基本概念• 22.1.1 CSS 面板• 22.1.2 CSS 文件类型• 22.1.3 CSS 类型
22.2 CSS的应用• 22.2.1 创建外部 CSS 文件• 22.2.2 类样式的应用• 22.2.3 标签样式的应用• 22.2.4 高级样式的应用• 22.2.5 附加外部 CSS 文件
第 23 章 层与行为
23.1 层• 23.1.1 层的基本操作• 23.1.2 层的简单应用• 23.1.3 层标签与 CSS 样式的结合
23.2 行为• 23.2.1 行为的基本概念• 23.2.2 行为的应用
第 24 章 模版与库项目
24.1 模版• 24.1.1 模版的创建• 24.1.2 模版的应用• 24.1.3 模版的更新
24.2 库项目• 24.2.1 库项目的创建• 24.2.2 库项目的应用• 24.2.3 库项目的更新
第 25 章 表单
25.1 表单
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 标签
25.3 表单的应用
25.4 表单的客户端验证<script LANGUAGE="javascript"> function check() { if (document.Fform1.usertextfield.value == "") { alert("请填写您的姓名! "); document.Fform1.usertextfield.focus(); return (false); } document.Fform1.submit() } </script>
25.4 表单的客户端验证在 <form>标签中添加代码:onSubmit="return check() "
25.5 Spry组件• 25.5.1 Spry组件简介• 25.5.2 Spay组件应用实例
第 26 章 站点的发布
26.1 站点的整理• 26.1.1 在网页上添加链接• 26.1.2 修改站点基本定义• 26.1.3 站点的导入与导出
26.2 站点的本地测试• 26.2.1 兼容性测试• 26.2.2 可访问性测试• 26.2.3 设置下载速度
26.3 站点的发布• 26.3.1 配置远程信息• 26.3.2 站点的上传