第5章-网页制作基础.ppt

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