《网页设计与制作实例教程》第3章（李东亚）ppt课件（全）.pptVIP

清华大学出版社 《网页设计与制作实例教程》 第3章 高等学校计算机应用规划教材 2022-4-26 主编 方其桂 内容提要 第2章 微课选题与设计 Dreamweaver是一款常用的网页设计软件，将网页制作、网站开发 站点管理集于一身，具有易学、易用的特点，用户无需手写代码，即使是初学者也可以轻松地创建各种动态效果，快速制作极具表现力的网页。 本章从Dreamweaver CS6的操作界面入手，主要介绍了站点的创建与管理、网页的新建与属性设置、外部参数设置等基础知识。 教学目录 Dreamweaver工作环境 站点的创建与管理 Dreamweaver基本操作 01 02 03 第2章 微课选题与设计 3.1 Dreamweaver工作环境 教学内容 3.1.1 使用界面 Dreamweaver CS6的使用界面主要包括菜单栏、插入栏、文档工具栏、文档窗口、状态栏、属性面板和功能面板等。 第3章 初识网页制作软件 3.1 Dreamweaver工作环境 教学内容 3.1.2 自定义工作界面 在网站制作过程中，往往需要变换工作界面的布局，使用者可以通过移动面板或面板组来创建新的工作界面。单击标题栏上的“设计器”按钮，可以选择任意一种预设的工作界面。 第3章 初识网页制作软件 1．显示/隐藏面板 使用F4键，可以显示或隐藏包括“属性”在内的所有面板。“窗口”菜单可以打开所有的面板，面板名称前有标记的，表示该面板已打开。 2．移动面板 拖动面板标签或是拖动面板组的标题栏，可以移动面板或面板组。移动时，可以看到蓝色显示的区域，表示可以在该区域内移动和放置。如果拖动到的区域不是放置区域，则被移动的面板或面板组将在窗口中浮动 。 3．关闭面板 单击面板或面板组的按钮，可以在打开的菜单中选择“关闭”或“关闭标签组”命令 3.1 Dreamweaver工作环境 教学内容 3.1.3 视图模式 Dreamweaver CS6的视图模式，可以通过文档工具栏上的按钮进行切换，默认为“设计”视图。 第3章 初识网页制作软件 1．代码视图 用于编辑HTML、JavaScript等代码的手工编码环境。对于代码使用熟练的操作者，可以直接在此视图中输入代码，实现网页的编辑制作。 3.1 Dreamweaver工作环境 教学内容 3.1.3 视图模式 Dreamweaver CS6的视图模式，可以通过文档工具栏上的按钮进行切换，默认为“设计”视图。 第3章 初识网页制作软件 2．拆分视图 文档窗口分为左右部分，分别显示“代码”和“设计”两个视图，适合初学者对比查看。 3.1 Dreamweaver工作环境 教学内容 3.1.3 视图模式 Dreamweaver CS6的视图模式，可以通过文档工具栏上的按钮进行切换，默认为“设计”视图。 第3章 初识网页制作软件 3．设计视图 用于可视化页面布局、内容编辑和应用程序开发的编辑环境。视图中显示的文档形式，与浏览器中查看的页面内容基本一致，甚至可以在编辑时显示动态内容。使用者即使没有任何HTML语言基础，也可以轻松实现网页的编辑制作。 3.1 Dreamweaver工作环境 教学内容 3.1.3 视图模式 Dreamweaver CS6的视图模式，可以通过文档工具栏上的按钮进行切换，默认为“设计”视图。 第3章 初识网页制作软件 4．实时视图 在Dreamweaver工作区内，实时查看网页的外观，预览网页效果，但不能对网页进行编辑。切换到“实时视图”后，“设计视图”被冻结，使用者只能通过“代码视图”编辑网页。 3.2 站点的创建与管理 教学内容 3.2.1 站点的规划 创建站点之前，应当对站点的目标、结构、内容、导航机制、风格等内容进行合理的规划。有效的规划设计，会为后期站点的制作和管理带来便捷，避免盲目设计。 第3章 初识网页制作软件 3.站点内容的规划 站点内容的规划，既方便网站的设计，又能使网站用户便捷的获取信息。 1.明确站点目标 站点目标要根据网站主题来确定。 2.站点结构的规划 以文件夹的形式组织文件，可以使站点具有清晰的结构，易于后期的维护和管理。 4.站点的导航机制 导航可以是标题文字，也可是图像。 5.站点风格的规划 站点风格是页面整体形象和风格，必须贴合网站的主题和内容，能凸显网站主旨。 3.2 站点的创建与管理 教学内容 3.2.2 站点的创建 Dreamweaver CS6的站点包括本地站点和远程站点，可以实现文件的上传和下载，以及本地站点和远程站点的同步更新。 第3章 初识网页制作软件 实例1 创建本地站点 在F盘创建“我的练习”站点，并保