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

《《网页设计与制作实例教程》第3章(李东亚)ppt课件(全).ppt》由会员分享，可在线阅读，更多相关《《网页设计与制作实例教程》第3章(李东亚)ppt课件(全).ppt（21页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、清华大学出版社 网页设计与制作实例教程第3章高等学校计算机应用规划教材 2023/2/4主编 方其桂内容提要第2章 微课选题与设计 Dreamweaver是一款常用的网页设计软件，将网页制是一款常用的网页设计软件，将网页制作、网站开发作、网站开发 站点管理集于一身，具有易学、易用的特点，用户站点管理集于一身，具有易学、易用的特点，用户无需手写代码，即使是初学者也可以轻松地创建各种动态效果，无需手写代码，即使是初学者也可以轻松地创建各种动态效果，快速制作极具表现力的网页。快速制作极具表现力的网页。本章从本章从Dreamweaver CS6的操作界面入手，主要介绍的操作界面入手，主要介绍了站点的创

2、建与管理、网页的新建与属性设置、外部参数设置等了站点的创建与管理、网页的新建与属性设置、外部参数设置等基础知识。基础知识。教学目录DreamweaverDreamweaver工作环境工作环境站点的创建与管理站点的创建与管理DreamweaverDreamweaver基本操作基本操作010203第2章 微课选题与设计3.1 Dreamweaver工作环境教学内容3.1.1 3.1.1 使用界面使用界面Dreamweaver CS6的使用界面主要包括菜单栏、插入栏、文档工具的使用界面主要包括菜单栏、插入栏、文档工具栏、文档窗口、状态栏、属性面板和功能面板等。栏、文档窗口、状态栏、属性面板和功能面板

3、等。第3章 初识网页制作软件3.1 Dreamweaver工作环境教学内容3.1.2 3.1.2 自定义工作界面自定义工作界面在网站制作过程中，往往需要变换工作界面的布局，使用者可以通过在网站制作过程中，往往需要变换工作界面的布局，使用者可以通过移动面板或面板组来创建新的工作界面。单击标题栏上的移动面板或面板组来创建新的工作界面。单击标题栏上的“设计器设计器”按钮，按钮，可以选择任意一种预设的工作界面。可以选择任意一种预设的工作界面。第3章 初识网页制作软件1显示/隐藏面板使用F4键，可以显示或隐藏包括“属性”在内的所有面板。“窗口”菜单可以打开所有的面板，面板名称前有标记的，表示该面板已打开

4、。2移动面板拖动面板标签或是拖动面板组的标题栏，可以移动面板或面板组。移动时，可以看到蓝色显示的区域，表示可以在该区域内移动和放置。如果拖动到的区域不是放置区域，则被移动的面板或面板组将在窗口中浮动。3关闭面板单击面板或面板组的按钮，可以在打开的菜单中选择“关闭”或“关闭标签组”命令 3.1 Dreamweaver工作环境教学内容3.1.3 3.1.3 视图模式视图模式Dreamweaver CS6的视图模式，可以通过文档工具栏上的按钮进行的视图模式，可以通过文档工具栏上的按钮进行切换，默认为切换，默认为“设计设计”视图。视图。第3章 初识网页制作软件1代码视图用于编辑HTML、JavaScr

5、ipt等代码的手工编码环境。对于代码使用熟练的操作者，可以直接在此视图中输入代码，实现网页的编辑制作。3.1 Dreamweaver工作环境教学内容3.1.3 3.1.3 视图模式视图模式Dreamweaver CS6的视图模式，可以通过文档工具栏上的按钮进行的视图模式，可以通过文档工具栏上的按钮进行切换，默认为切换，默认为“设计设计”视图。视图。第3章 初识网页制作软件2拆分视图文档窗口分为左右部分，分别显示“代码”和“设计”两个视图，适合初学者对比查看。3.1 Dreamweaver工作环境教学内容3.1.3 3.1.3 视图模式视图模式Dreamweaver CS6的视图模式，可以通过文

6、档工具栏上的按钮进行的视图模式，可以通过文档工具栏上的按钮进行切换，默认为切换，默认为“设计设计”视图。视图。第3章 初识网页制作软件3设计视图用于可视化页面布局、内容编辑和应用程序开发的编辑环境。视图中显示的文档形式，与浏览器中查看的页面内容基本一致，甚至可以在编辑时显示动态内容。使用者即使没有任何HTML语言基础，也可以轻松实现网页的编辑制作。3.1 Dreamweaver工作环境教学内容3.1.3 3.1.3 视图模式视图模式Dreamweaver CS6的视图模式，可以通过文档工具栏上的按钮进行的视图模式，可以通过文档工具栏上的按钮进行切换，默认为切换，默认为“设计设计”视图。视图。第

7、3章 初识网页制作软件4实时视图在Dreamweaver工作区内，实时查看网页的外观，预览网页效果，但不能对网页进行编辑。切换到“实时视图”后，“设计视图”被冻结，使用者只能通过“代码视图”编辑网页。3.2 站点的创建与管理教学内容3.2.1 3.2.1 站点的规划站点的规划创建站点之前，应当对站点的目标、结构、内容、导航机制、风格等创建站点之前，应当对站点的目标、结构、内容、导航机制、风格等内容进行合理的规划。有效的规划设计，会为后期站点的制作和管理带来内容进行合理的规划。有效的规划设计，会为后期站点的制作和管理带来便捷，避免盲目设计。便捷，避免盲目设计。第3章 初识网页制作软件3.站点内容

8、的规划站点内容的规划，既方便网站的设计，又能使网站用户便捷的获取信息。1.明确站点目标站点目标要根据网站主题来确定。2.站点结构的规划 以文件夹的形式组织文件，可以使站点具有清晰的结构，易于后期的维护和管理。4.站点的导航机制导航可以是标题文字，也可是图像。5.站点风格的规划站点风格是页面整体形象和风格，必须贴合网站的主题和内容，能凸显网站主旨。3.2 站点的创建与管理教学内容3.2.2 3.2.2 站点的创建站点的创建Dreamweaver CS6的站点包括本地站点和远程站点，可以实现文件的站点包括本地站点和远程站点，可以实现文件的上传和下载，以及本地站点和远程站点的同步更新。的上传和下载，

9、以及本地站点和远程站点的同步更新。第3章 初识网页制作软件实例1 创建本地站点在F盘创建“我的练习”站点，并保存。1.本地站点的创建 本地站点是计算机中用来存放网站文件的场所。创建本地站点之前，应在本地磁盘建立一个网站文件夹，用来存放站点的所有文件，如F:myweb。3.2 站点的创建与管理教学内容3.2.2 3.2.2 站点的创建站点的创建Dreamweaver CS6的站点包括本地站点和远程站点，可以实现文件的站点包括本地站点和远程站点，可以实现文件的上传和下载，以及本地站点和远程站点的同步更新。的上传和下载，以及本地站点和远程站点的同步更新。第3章 初识网页制作软件实例2 创建远程站点使

10、用FTP连接远程服务器，创建“我的练习”站点的远程站点。2.远程站点的创建 通过设置远程站点，可以实现本地站点与远程站点的关联，从而进行文件的上传和下载，管理远程服务器上的文件。使用者可以通过FTP、SFTP、本地/网络等多种方式建立远程站点。3.2 站点的创建与管理教学内容3.2.3 3.2.3 站点的管理站点的管理Dreamweaver CS6可以将本地站点和远程站点统一管理，同步更新，可以将本地站点和远程站点统一管理，同步更新，便捷的管理站点中的文件。本地站点和远程站点内的文件管理，操作方法相便捷的管理站点中的文件。本地站点和远程站点内的文件管理，操作方法相同。同。第3章 初识网页制作软

11、件实例3 站点文件管理在“我的练习”站点内新建“index.html”文件和“book”文件夹，并在“book”文件夹内新建“work.html”文件。1.本地站点的管理 管理本地站点分为站点文件管理和站点管理两部分。文件管理包括新建网页和文件夹、移动和复制文件、删除和重命名文件。站点管理包括新建和删除站点、编辑站点等。实例4 站点管理复制和编辑“我的练习”站点，并将复制后的站点删除。3.2 站点的创建与管理教学内容3.2.3 3.2.3 站点的管理站点的管理Dreamweaver CS6可以将本地站点和远程站点统一管理，同步更新，可以将本地站点和远程站点统一管理，同步更新，便捷的管理站点中的

12、文件。本地站点和远程站点内的文件管理，操作方法相便捷的管理站点中的文件。本地站点和远程站点内的文件管理，操作方法相同。同。第3章 初识网页制作软件实例5 管理远程站点将“我的练习”站点与远程站点连接，尝试在两个站点间上传和下载文件。2.远程站点的管理 当本地站点与服务器连接后，就可以对远程站点进行各项管理操作，如文件的上传与下载、新建与复制等。3.3 Dreamweaver基本操作教学内容3.3.1 3.3.1 新建网页新建网页新建网页一般有两种方式，一种是创建空白新建网页一般有两种方式，一种是创建空白HTML网页，另一种是使用网页，另一种是使用模版创建带有格式的网页。模版创建带有格式的网页。

13、第3章 初识网页制作软件实例6 新建空白网页在“我的练习”站点中，新建空白网页“novel.html”，并保存在book文件夹内。3.3 Dreamweaver基本操作教学内容3.3.2 3.3.2 网页预览及参数设置网页预览及参数设置网页制作过程中，需要经常在浏览器中查看页面效果，以便进行修改和网页制作过程中，需要经常在浏览器中查看页面效果，以便进行修改和完善。由于目前广泛使用的浏览器众多，使用者想在多种浏览器中测试效果，完善。由于目前广泛使用的浏览器众多，使用者想在多种浏览器中测试效果，就需要进行预览设置。就需要进行预览设置。第3章 初识网页制作软件实例7 设置预览参数并预览网页添加234

14、5浏览器为新的浏览器，预览“我的练习”站点中的“index.html”页面。3.3 Dreamweaver基本操作教学内容3.3.3 3.3.3 设置页面属性设置页面属性网页的基本属性包括网页标题、背景颜色和图像、文本格式和超链接格网页的基本属性包括网页标题、背景颜色和图像、文本格式和超链接格式等，正确的设置页面属性可以更好的完成网页的制作。式等，正确的设置页面属性可以更好的完成网页的制作。第3章 初识网页制作软件实例8 设置页面属性为“index.html”网页设置标题“我的主页”，再设置背景、文本及超链接的颜色。3.4 小结和习题教学内容3.4.1 3.4.1 本章小结本章小结 Dream

15、weaver CS6是一款所见即所得的软件，操作简单，易学好是一款所见即所得的软件，操作简单，易学好用，集网页制作与网站管理功能与一身，可以制作跨平台、跨浏览器限制的用，集网页制作与网站管理功能与一身，可以制作跨平台、跨浏览器限制的各种网页。各种网页。Dreamweaver CS6可与可与Flash、Photoshop等多种设计软件完美等多种设计软件完美搭配，在搭配，在Dreamweaver界面内即可使用这些软件进行编辑。本章主要介绍了界面内即可使用这些软件进行编辑。本章主要介绍了Dreamweaver CS6软件基本功能，具体包括以下主要内容：软件基本功能，具体包括以下主要内容：Dreamw

16、eaver CS6工作环境：主要介绍了开始页、工作界面、自工作环境：主要介绍了开始页、工作界面、自定义工作界面和软件的基本视图模式。定义工作界面和软件的基本视图模式。站点的创建与管理：主要介绍了站点的规划、本地站点和远程站点的创站点的创建与管理：主要介绍了站点的规划、本地站点和远程站点的创建与管理。建与管理。Dreamweaver CS6基本操作：主要介绍了新建空白网页、网页的基本操作：主要介绍了新建空白网页、网页的预览、网页参数设置以及页面属性的设置等。预览、网页参数设置以及页面属性的设置等。第3章 初识网页制作软件3.4 小结和习题教学内容3.4.2 3.4.2 本章练习本章练习 一、选择

17、题一、选择题 第3章 初识网页制作软件1不属于功能菜单的是（）。A.格式 B.文件 C.视图 D.站点2预览网页制作效果的快捷键是（）。A.F4 B.F2 C.F12 D.F53管理远程站点必须将（）与（）连接。A.本地站点与远程站点 B.本地站点与远程服务器 C.远程站点与远程服务器 D.本地站点与网络3.4 小结和习题教学内容3.4.2 3.4.2 本章练习本章练习 二、填空题二、填空题 第3章 初识网页制作软件1文档窗口中可以实现 、和 视图之间的切换。2常用的功能面板有 、和 等。3设置网页超链接，可以通过 对话框完成。三、操作题三、操作题 1熟练掌握Dreamweaver CS6工作界面各部分的主要功能。2规划个人网站的目录结构。3根据规划，创建个人站点，并新建主页文件。清华大学出版社 网页设计与制作实例教程高等学校计算机应用规划教材 谢谢使用！联系信箱：