1.3.2 新建网页文件与文件夹(课件）-高二《网页设计与制作》同步教学（中国人民大学出版社）

1.3.2 新建网页文件与文件夹 文件面板是管理整个网站的重要工具，它可以让人们马上看到整个网站的结构，也可以看到整个网站的文件内容，快速地管理网站。在文件面板新建网页和文件夹比较方便、简单。 1.新建网页文件与文件夹的操作步骤： （1）移动鼠标在文件面板中选择站点根文件夹后，单击鼠标右键，再从弹出的快捷菜单中选择“新建文件” 或“新建文件夹” 命令。 （2）出现新建的网页文件或文件夹后，输入文件名或文件夹名称并按下回车键。 1.3.3打开网页文件 在Dreamweaver中有多种打开网页的方法。 方法1：启动Dreamweaver后，移动鼠标在“打开最近项目”的文件列表中选择“打开”选项。 方法2：移动鼠标到菜单栏选择“文件”，弹出菜单后，从菜单中选择“打开”命令。 方法3：打开文件面板后，移动鼠标选择要打开的文件，双击即可打开所选择的文件。 另一种打开文件编辑的方法是在文件夹窗口（我的电脑）中的网页文件上单击鼠标右键，再从弹出的快捷菜单中选择“使用Dreamweaver CS4编辑”命令，也可以打开网页编辑。 1.3.4保存网页文件 网页不是一下子就可以做好的，做到一半时，可以先将文件保存起来，以后再随时加载修改。 具体保存方法如下： 1、在菜单栏中选择【文件】→【保存】命令。 2、出现“另存为”对话框后，从“保存在”下拉列表框中选择磁盘驱动器编号与文件夹名称，接着在文件名栏中输入文件名称，然后选择 按钮。 1.3.5网页版面布局 在制作网页的过程中，若是遇到较复杂的画面，可以使用编辑辅助工具， 如标尺（Rulers） 、网格线（Grid） 等，以提高制作网页的效率。 1．标尺 执行【查看】菜单→【标尺】→【显示】命令。 在编辑区上出现的刻度就是标尺（如图所示），它可以作为摆放对象位置的依据。 上方的刻度称为水平标尺（X轴），左边的刻度称为垂直标尺（Y轴），而原点(0,0)则是在网页的左上角，X轴若向左移动为负数，Y轴则是向上移动为负数。 2．网格线 网格线主要的作用是能够更方便地排列图形位置，有了网格线就可以很快地看到对象与对象之间的间距，而这些网格线在实际浏览时是看不到的。 执行【查看】菜单→【网格设置…】→【显示网格】命令。 选择显示网格线功能后，编辑区就会出现淡绿色的网格线。 网格线 若是在“网格设置…”子菜单中选择“靠齐到网格”命令，则在拖动对象时，对象就会自动吸附并对齐在网格线上。 提示:改动网格设置只要移动鼠标到菜单栏依次选择【查看】→【网格设置…】→【网格设置】，就可以修改成想要的样式了。 1.4 项目实训 1.4.1 项目一 1.实训题目 熟悉Dreamweaver CS4工作界面与操作环境。 （菜单栏、工具栏、面板、鼠标、键盘操作技巧等。） 2.实训目的 熟练掌握Dreamweaver CS4的环境操作，为后面各章节打下基础。 1.4.2 项目二 1.实训题目 请建立一个站点名称为“阳光梦想”的网站，并在 F：盘中建立一个站点根文件夹ygmx，并新建一个网页index.html和一个子文件夹images，index.html网页标题为阳光梦想，背景色设置为#99FFCC（CSS外观为#9FC）。 2.实训目的 掌握一个新的网站的架构，以及在站点中新建网页文件与文件夹的方法与技巧，初步学习对网页页面属性的设置。 3.实训案例效果 1.5本章小结 本章介绍了网页设计的基础。讲解了网页的相关概念，Dreamweaver CS4的安装和启动；重点讲解了Dreamweaver CS4的操作环境和创建一个新网站的方法与技巧。通过本章的学习和上机实训的练习读者可以快速地熟悉Dreamweaver的工作界面和操作流程，熟练地架构好一个新的网站。 $$