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

清华大学出版社《网页设计与制作实例教程》第3章高等学校计算机应用规划教材

2024/9/26主编方其桂初识网页制作软件内容提要第2章

微课选题与设计Dreamweaver是一款常用的网页设计软件，将网页制作、网站开发站点管理集于一身，具有易学、易用的特点，用户无需手写代码，即使是初学者也可以轻松地创建各种动态效果，快速制作极具表现力的网页。本章从DreamweaverCS6的操作界面入手，主要介绍了站点的创建与管理、网页的新建与属性设置、外部参数设置等基础知识。教学目录Dreamweaver工作环境站点的创建与管理Dreamweaver基本操作010203第2章

微课选题与设计3.1

Dreamweaver工作环境教学内容3.1.1使用界面DreamweaverCS6的使用界面主要包括菜单栏、插入栏、文档工具栏、文档窗口、状态栏、属性面板和功能面板等。第3章

初识网页制作软件3.1

Dreamweaver工作环境教学内容3.1.2自定义工作界面在网站制作过程中，往往需要变换工作界面的布局，使用者可以通过移动面板或面板组来创建新的工作界面。单击标题栏上的“设计器”按钮，可以选择任意一种预设的工作界面。第3章

初识网页制作软件1．显示/隐藏面板使用F4键，可以显示或隐藏包括“属性”在内的所有面板。“窗口”菜单可以打开所有的面板，面板名称前有标记的，表示该面板已打开。2．移动面板拖动面板标签或是拖动面板组的标题栏，可以移动面板或面板组。移动时，可以看到蓝色显示的区域，表示可以在该区域内移动和放置。如果拖动到的区域不是放置区域，则被移动的面板或面板组将在窗口中浮动。3．关闭面板单击面板或面板组的按钮，可以在打开的菜单中选择“关闭”或“关闭标签组”命令3.1

Dreamweaver工作环境教学内容3.1.3视图模式DreamweaverCS6的视图模式，可以通过文档工具栏上的按钮进行切换，默认为“设计”视图。第3章

初识网页制作软件1．代码视图用于编辑HTML、JavaScript等代码的手工编码环境。对于代码使用熟练的操作者，可以直接在此视图中输入代码，实现网页的编辑制作。3.1

Dreamweaver工作环境教学内容3.1.3视图模式DreamweaverCS6的视图模式，可以通过文档工具栏上的按钮进行切换，默认为“设计”视图。第3章

初识网页制作软件2．拆分视图文档窗口分为左右部分，分别显示“代码”和“设计”两个视图，适合初学者对比查看。3.1

Dreamweaver工作环境教学内容3.1.3视图模式DreamweaverCS6的视图模式，可以通过文档工具栏上的按钮进行切换，默认为“设计”视图。第3章

初识网页制作软件3．设计视图用于可视化页面布局、内容编辑和应用程序开发的编辑环境。视图中显示的文档形式，与浏览器中查看的页面内容基本一致，甚至可以在编辑时显示动态内容。使用者即使没有任何HTML语言基础，也可以轻松实现网页的编辑制作。3.1

Dreamweaver工作环境教学内容3.1.3视图模式DreamweaverCS6的视图模式，可以通过文档工具栏上的按钮进行切换，默认为“设计”视图。第3章

初识网页制作软件4．实时视图在Dreamweaver工作区内，实时查看网页的外观，预览网页效果，但不能对网页进行编辑。切换到“实时视图”后，“设计视图”被冻结，使用者只能通过“代码视图”编辑网页。3.2

站点的创建与管理教学内容3.2.1站点的规划创建站点之前，应当对站点的目标、结构、内容、导航机制、风格等内容进行合理的规划。有效的规划设计，会为后期站点的制作和管理带来便捷，避免盲目设计。第3章

初识网页制作软件3.站点内容的规划站点内容的规划，既方便网站的设计，又能使网站用户便捷的获取信息。1.明确站点目标站点目标要根据网站主题来确定。2.站点结构的规划以文件夹的形式组织文件，可以使站点具有清晰的结构，易于后期的维护和管理。4.站点的导航机制导航可以是标题文字，也可是图像。5.站点风格的规划站点风格是页面整体形象和风格，必须贴合网站的主题和内容，能凸显网站主旨。3.2

站点的创建与管理教学内容3.2.2站点的创建DreamweaverCS6的站点包括本地站点和远程站点，可以实现文件的上传和下载，以及本地站点和远程站点的同步更新。第3章

初识网页制作软件实例1创建本地站点在F盘创建“我的练习”站点，并保存。1.本地站点的创建本地站点是计算机中用来存放网站文件的场所。创建本地站点之前，应在本地磁盘建立一个网站文件夹，用来存放站点的所有文件，如F:\myweb。3.2

站点的创建与管理教学内容3.2.2站点的创建DreamweaverCS6的站点包括本地站点和远程站点，可以实现文件的上传和下载，以及本地站点和远程站点的同步更新。第3章

初识网页制作软件实例2创建远程站点使用FTP连接远程服务器，创建“我的练习”站点的远程站点。2.远程站点的创建通过设置远程站点，可以实现本地站点与远程站点的关联，从而进行文件的上传和下载，管理远程服务器上的文件。使用者可以通过FTP、SFTP、本地/网络等多种方式建立远程站点。3.2

站点的创建与管理教学内容3.2.3站点的管理DreamweaverCS6可以将本地站点和远程站点统一管理，同步更新，便捷的管理站点中的文件。本地站点和远程站点内的文件管理，操作方法相同。第3章

初识网页制作软件实例3站点文件管理在“我的练习”站点内新建“index.html”文件和“book”文件夹，并在“book”文件夹内新建“work.html”文件。1.本地站点的管理管理本地站点分为站点文件管理和站点管理两部分。文件管理包括新建网页和文件夹、移动和复制文件、删除和重命名文件。站点管理包括新建和删除站点、编辑站点等。实例4站点管理复制和编辑“我的练习”站点，并将复制后的站点删除。3.2

站点的创建与管理教学内容3.2.3站点的管理DreamweaverCS6可以将本地站点和远程站点统一管理，同步更新，便捷的管理站点中的文件。本地站点和远程站点内的文件管理，操作方法相同。第3章

初识网页制作软件实例5管理远程站点将“我的练习”站点与远程站点连接，尝试在两个站点间上传和下载文件。2.远程站点的管理当本地站点与服务器连接后，就可以对远程站点进行各项管理操作，如文件的上传与下载、新建与复制等。3.3

Dreamweaver基本操作教学内容3.3.1新建网页新建网页一般有两种方式，一种是创建空白HTML网页，另一种是使用模版创建带有格式的网页。第3章

初识网页制作软件实例6新建空白网页在“我的练习”站点中，新建空白网页“novel.html”，并保存在book文件夹内。3.3

Dreamweaver基本操作教学内容3.3.2网页预览及参数设置网页制作过程中，需要经常在浏览器中查看页面效果，以便进行修改和完善。由于目前广泛使用的浏览器众多，使用者想在多种浏览器中测试效果，就需要进行预览设置。第3章

初识网页制作软件实例7设置预览参数并预览网页添加2345浏览器为新的浏览器，预览“我的练习”站点中的“index.html”页面。3.3

Dreamweaver基本操作教学内容3.3.3设置页面属性网页的基本属性包括网页标题、背景颜色和图像、文本格式和超链接格式等，正确的设置页面属性可以更好的完成网页的制作。第3章

初识网页制作软件实例8设置页面属性为“index.html”网页设置标题“我的主页”，再设置背景、文本及超链接的颜色。3.4

小结和习题教学内容3.4.1本章小结DreamweaverCS6是一款所见即所得的软件，操作简单，易学好用，集网页制作与网站管理功能与一身，可以制作跨平台、跨浏览器限制的各种网页。DreamweaverCS6可与Flash、Photoshop等多种设计软件完美搭配，在Dreamweaver界面内即可使用这些软件进行编辑。本章主要介绍了DreamweaverCS6软件基本功能，具体包括以下主要内容：DreamweaverCS6工作环境：主要介绍了开始页、工作界面、自定义工作界面和软件的基本视图模式。站点的创建与管理：主要介绍了站点的规划、本地站点和远程站点的创建与管理。DreamweaverCS6基本操作：主要介绍了新建空白网页、网页的预览、网页参数设置以及页面属性的设置等。第3章

初识网页制作软件3.4

小结和习题教学内容3.4.2本章练习

一、选择题第3章

初识网页制作软件1．不属于功能菜单的是（）。A.格式B.文件C.视图D.站点2．预览网页制作效果的快捷键是（）。A.F4B.F2C.F12D.F53．管理远程站点必须将（）与（）连接。A.本地站点与远程站点B.本地站点与远程服务器C.远程站点与远程服务器D.本地站点与网络3.4

小结和习题教学内容3.4.2本章练习

二、填空题第3章

初识网页制作软件1．文档窗口中可以实现

、

和

视图之间的切换。2．