第1章网页设计与实训教程.ppt

* 进入【站点定义】对话框后，定义本地站点的方法有下列两种： （1）利用【基本】选项卡的站点定义向导。 （2）利用【高级】选项卡，这种方法比较直观快速。 * 下面详细介绍一下利用【基本】选项卡，根据站点定义向导提示定义本地站点的步骤： (1)进入【站点定义】对话框后，选择【基本】选项卡（如图所示）； * (2)设置站点名称为“好可工作室”，在站点的URL文本框中输入网站的域名或IP地址，如果要创建本地站点，则此处可以留空。单击【下一步】按钮。 (3)弹出的对话框中询问是否使用服务器技术，如图所示。由于建立的是静态网站，选择“否，我不想使用服务器技术”单选按钮，单击【下一步】按钮。 * * (4)在下一步对话框中，选择“编辑我的计算机上的本地副本，完成后再上传到服务器”单选 按钮。可以单击 按钮设置站点的本地根文件夹的位置，若根文件夹没预先建立好，可此时新建。如图所示。选择设置好后，单击【下一步】按钮。 * * (5)在下一步对话框中，显示选择远程服务器连接方式的界面。在“您如何连接到远程服务器”下拉列表框中选择“无”选项，如图所示。单击【下一步】按钮。 * (6)此时，出现确认信息界面，显示前面已经设置完成的内容，单击【完成】按钮，如图所示。 * (7)返回到【管理站点】对话框，如图所示。单击【完成】按钮，本地站点创建完成，在【文件】面板中的【本地视图】窗口中会显示该站点的名称和根文件夹。 * 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.实