网页设计与制作项目实训教程 教学课件 ppt 作者 严加琼 曾金发 项目3
<p>项目3 站点的创建与管理,项目描述,知识储备,实践向导,能力拓展,退 出,项目小结,3.1 项目描述,在自己动手制作网页之前，应该熟悉网站和网页相关的知识，了解制作网页、处理图形图像、制作动画的专业工具，重点了解和熟悉Dreamweaver CS5的工作环境，从而为以后制作网页打下良好的基础。,3.2 知识储备,3.2.1 站点的创建 1.认识站点面板 站点面板即“文件”面板，包含在“文件”面板组中，默认情况下位于浮动面板停靠区，如果该区域无文件面板，可执行菜单“窗口”“文件”命令（或按F8键）即可将其打开。,2.站点的规划,通常在规划站点结构时，需要注意以下几点： （1）文档分类保存。先为站点在本地硬盘上创建一个根文件夹，在此文件夹中，分别建立诸如图像文件夹、网页文件夹等其他子文件夹。 （2）合理的命名文件名。给文件命名时，尽量避免使用中文文件名，有些服务器不能对中文文件名提供很好的支持。文件夹和文件的名称最好要有具体的含义。,3.创建本地站点,进入Dreamweaver CS5的工作界面，选择菜单“站点”“新建站点”选项，系统弹出“站点设置对象”对话框，然后输入“站点名称”，选择“本地站点文件夹”所在的位置，在“站点设置对象”对话框中，单击“保存”按钮。,3.2.2 站点的基本编辑,1.编辑站点 如果对站点进行编辑，可以在“管理站点”对话框中，选择要编辑的站点，然后单击“编辑”按钮，则将重新打开“站点定义”对话框，用户根据需要逐步修改站点的属性。 2.复制站点 复制站点省去了重复建立多个结构相同的站点的操作，这样可以提高工作效率，可以让这些站点保持一定的相似性。 3.删除站点 如果站点已经没有用了，可以将其删除，但这个删除只是从Dreamweaver CS5的站点管理器中删除，网站的文件仍保存在硬盘原来的位置上，并没有被删除。 4. 导入站点 使用导入功能可以将现有的网站直接导入到Dreamweaver中进行编辑和修改。 5. 导出站点 Dreamweaver可以将网站导出为XML文件，然后将其导回Dreamweaver，方便在各计算机和产品版本之间移动网站，或者与其他用户共享。,3.2.3 管理站点文档,1.创建站点目录 在站点根目录上单击鼠标右键，在弹出的快捷菜单中选择“新建文件夹”命令，如图3-5所示，它以反白显示，提醒更换名称，输入文件夹名称，按回车键即可完成文件夹的创建。 图3-5 “文件”面板快捷菜单,2. 网页文档的管理,（1）新建网页文档 方法一：启动Dreamweaver CS5后，会出现一个选择界面，它包括“打开最近的项目”、“新建”、“主要功能”等可选项，在该界面中选择“新建”列表中的“HTML”选项，便可以直接创建一个HTML网页文档。 方法二：单击Dreamweaver CS5主窗口的菜单“文件”“新建”，打开 “新建文档”对话框，然后在页面类型中选择“HTML”，然后单击“创建”按钮即可创建一个空白网页文档,（2）保存网页文档 保存网页文档的方法主要有以下三种。 方法一：单击Dreamweaver CS5主窗口的菜单“文件”“保存”或者“保存全部”。 方法二：按“Ctrl+S”组合键。 方法三：单击标准工具栏中的“保存”按钮或者“全部保存”按钮。,（3）打开网页文档 打开网页文档，单击Dreamweaver CS5主窗口的菜单“文件”“打开”，弹出“打开”对话框，在该对话框中可以打开多种类型的文档，如HTML、XML文档等。,（4）关闭网页文档 单击菜单“文件”“关闭”或者“全部关闭”，即可关闭网页文档。如果页面尚未保存，则会弹出一个对话框，确认是否保存。,3.2.4 设置网页基本属性,1.视图 Dreamweaver CS5提供的视图方式有以下几种： （1）代码视图：一个用于编写和编辑HTML、JavaScript、服务器语言代码（如：PHP或ColdFusion标记语言(CFML)）以及任何其他类型代码的手工编码环境。 （2）拆分视图：是代码视图的一种拆分版本，使用户可以同时对文档的不同部分进行代码编辑。 （3）设计视图：一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在此视图中，Dreamweaver显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到的内容。 （4）实时代码视图：它显示浏览器用于执行该页面的实际代码，当在“实时”视图中与该页面进行交互时，它可以动态变化。“实时代码”视图不可编辑。 (5) 实时视图：类似于“设计”视图，但可以更逼真地显示文档在浏览器中的表示形式，并使用户能够像在浏览器中那样与文档进行交互。“实时”视图不可编辑。但是可以在“代码”视图中进行编辑，然后刷新“实时”视图来查看所做的更改。,2.设置网页标题 添加网页标题的方法有多种，在这里介绍3种方法，具体如下： 方法一：在Dreamweaver CS5工具栏标题框中直接输入新标题。 方法二：执行菜单中的“修改”“页面属性”命令，弹出“页面属性”对话框，选择“分类”中的“标题”选项，在“标题”文本框中输入相应的标题文字，然后单击“确定”按钮。 方法三：单击文档中的“代码”视图按钮，然后在和标签之间输入标题内容。,3.设置网页背景,网页背景包括背景颜色和背景图像 。 （1）执行菜单中的“修改”“页面属性”命令，或者直接单击“属性”面板上的“页面属性”按钮，或将光标定位到文档空白处单击鼠标右键，在弹出的快捷菜单中选择“页面属性”命令，弹出“页面属性”对话框。 （2）在“页面属性”对话框中，选择“分类”中的“外观（CSS）”选项，设置“背景颜色”或“背景图像”。单击“确定”按钮 。 （3）对于选择背景颜色来说，直接在“页面属性”对话框中选择“背景颜色”选项即可 。,4.设置页边距,页边距可以在文档的“页面属性”对话框中设置。 （1）打开菜单中的“修改”“页面属性”命令，弹出“页面属性”对话框。 （2）在“页面属性”对话框中，选择“分类”中的“外观”选项，根据需要设定“上边距”、“下边距”、“左边距”、“右边距”。,5.定义默认的文本颜色、字体和大小,文本颜色、字体和大小的设置都是在“页面属性”对话框中设置完成。 （1）单击“属性”面板中的“页面属性”按钮，弹出“页面属性”对话框。 （2）在“分类”列表框“外观（CSS）”选项中，分别选择“文本颜色”、“页面字体”和“大小”选项，即可将网页的默认文本颜色、字体和大小改变。,6.在浏览器中浏览网页,可以在浏览器中浏览设置的效果，其方法有以下三种： 方法一：按“F12”键。 方法二：单击菜单“文件”“在浏览器中预览”“Iexplore”。 方法三：单击“文档”工具栏中“在浏览器中预览/调试”按钮，在弹出的快捷菜单中单击“预览在Iexplore”。,3.3 实践向导,任务3-1 创建一个实例网站“我的个人站点”的站点结构如图3-1所示，在站点中创建一个本地根文件夹“Website”，然后在“Website”文件夹中分别创建flash、images、music、vedio、web等子文件夹，创建一个Index.html空白网页。,3.4 能力拓展,创建一个名为“信工系党员电脑维护部”的站点，该网站所有文件存储在本地计算机E盘中“Web”文件夹中；在“文件”面板的站点根目录下创建一个文件夹“DW CS5”，在该文件夹中创建3个子文件夹“PHOTO”、“TEXT”、“WEB”，创建一个INDEX.HTML的网页文档；将所有的图像文件复制到“PHOTO”文件夹中。,3.5 项目小结,本项目主要介绍了站点的创建、站点的规划、创建本地站点、站点的基本编辑、管理站点文档、设置网页基本属性。对于制作一个完整的网站，建立站点的基本操作非常重要。,</p>
