第5讲网页制作基础.ppt

《大学计算机信息科技教程（第二版）》——第5章 网页制作基础 * 5.2.4 打开、保存和预览网页 预览网页 标准工具栏 “在浏览器中预览”按钮 F12键 作业 参见elearning网站 《大学计算机信息科技教程（第二版）》——第5章 网页制作基础 * 《大学计算机信息科技教程（第二版）》——第5章 网页制作基础 第5章 网页制作基础 《大学计算机信息科技教程（第二版）》——第5章 网页制作基础 * 主要内容 概述 设计站点 编辑网页 页面布局 建立超链接 使用CSS样式 层、行为和时间轴 模板 管理和发布站点 《大学计算机信息科技教程（第二版）》——第5章 网页制作基础 * 5.1 概述 站点 具有相关主题的网页有机地整合在一起，集中进行管理，构成一个整体，这就是站点。 超文本标记语言HTML 站点中的每个网页的内容都要使用一种标准的语言来描述，这就是超文本标记语言HTML。 常用的网页制作软件 Microsoft Office中的FrontPage Macromedia公司的Dreamweaver 《大学计算机信息科技教程（第二版）》——第5章 网页制作基础 * 5.1 概述 Dreamweaver概述 HTML简介 《大学计算机信息科技教程（第二版）》——第5章 网页制作基础 * 5.1.1 Dreamweaver简述 Macromedia Dreamweaver 8 美国Micromedia公司开发 集网页制作和网站管理于一体 《大学计算机信息科技教程（第二版）》——第5章 网页制作基础 * 5.1.1 Dreamweaver简述 启动 选择“开始”/“所有程序”/“Micromedia”/“Micromedia Dreamweaver 8”选项， Dreamweaver有两种工作区布局模式：设计器和编码器第一次运行显示 《大学计算机信息科技教程（第二版）》——第5章 网页制作基础 * 5.1.1 Dreamweaver简述 启动Dreamweaver后，显示起始页。在起始页中可以打开最近使用过的网页，快速地创建新的网页。 《大学计算机信息科技教程（第二版）》——第5章 网页制作基础 * 5.1.1 Dreamweaver简述 打开或者创建网页后的操作界面 “插入”工具栏★ “标准”工具栏 “文档”工具栏 文档窗口 面板组★ 属性检查器★ 通过菜单 查看工具栏XXX 来显示或隐藏某个工具栏，通过菜单 窗口XXX 来显示或隐藏某个面板组或属性面板。 《大学计算机信息科技教程（第二版）》——第5章 网页制作基础 * 5.1.2 HTML简介 HTML(HyperText Mackup Language 超文本 标记 语言) 制作超文本文档的简单标记语言 只是提供一些语法标记给浏览器，由浏览器解释生成相应的页面。 由格式标签和资源引用构成。 标签来设置引用内容的格式，标签分头标签和尾标签，用“”和“”括起来，与被标注的内容区分开来。 《大学计算机信息科技教程（第二版）》——第5章 网页制作基础 * 5.1.2 HTML简介 文件的开始 文件的结束 头部 文件体 网页标题 段落 图片 Rwjgxltj.html 《大学计算机信息科技教程（第二版）》——第5章 网页制作基础 * 5.1.2 HTML简介 html和/html标签标志了文件的开始和结束， 分成两部分： 第一部分叫作头部 以head和/head标签标志开始和结束 其中title和/title标签用于定义网页的标题 第二部分是文件体 以body和/body标签标志开始和结束 包含对浏览器中显示的内容的具体描述 p和/p标签标志一个段落，之间的文本将显示在浏览器中； font和/font标签控制文本的字体、大小、颜色等； div和/div标签用于排版段落的格式； img标签用于插入图片，没有结束标签，通常后面带有属性，表示图片文件的存储路径、对齐、以及大小。 《大学计算机信息科技教程（第二版）》——第5章 网页制作基础 * html head title ……. /title /head body p ……. /p font和/font div和/div img /body /html table tr td ……. / td / tr / table ① ② 《大学计算机信息科技教程（第二版）》——第5章 网页制作基础 * 5.2 设计站点 网站设计 定义本地站点 管理站点资源（使用文件面板） 新建（快捷菜单：新建文件、新建文件夹） 移动、复制（拖曳、C