第讲_网页制作基础.ppt

* 图1-18 设定是否要使用服务器端的技术 * 图1-19 设定在开发期间如何操作文件 * 图1-20 设定计算机与服务器的连接方式 * 图1-21 选择“高级”方式定义网站 * 图1-22 选择本地文件夹 * 图1-23 网站管理窗口 * 图1-24 为网站新增加一个文件 * 图1-25 定义网站主页 * 1.6 创 建 文 档 在Dreamweaver中可以通过3种方式创建文档：创建新的空白文档、创建以模板为基础的文档和打开并编辑已经存在的文档。 * 1.6.1 创建新的空白文档 刚才我们已经为网站加入了一个HTML文件，并命名为index.htm，实际上这就已经创建了一个新的空白文档。 * 图1-26 创建新文档 * 图1-27 同时打开两个文档窗口 * 图1-28 切换多个文档 * 图1-29 打开HTML面板 * 1.6.2 在已有文件的基础上创建文档 除了创建空白的文档窗口之外，在Dreamweaver中还可以直接打开已经存在的HTML文件（无论它是用什么工具建立的），这样就可以在现有文档的基础上编辑它。打开现有文件的方法是选择“文件”菜单的“打开”命令，再在“打开”对话框中选择要打开的文件。 * 除此之外，Dreamweaver还使用模板机制。这种模板机制在技术上是很有特色的。在Dreamweaver中可以把制作好的一个页面另存为模板，再使用这个模板来生成新的文档，并且可以设定模板中的一部分为可编辑区域，从而实现了将内容从设计方案中分离出来。 * 同时，如果修改了模板，Dreamweaver可以自动把所有使用该模板创建的文档进行相应的修改，这对于网页设计师来说真是梦寐以求的功能。 * 1.6.3 设置页面属性 创建文档后还需要对它进行设置，设定一些影响整个网页的参数。选择“修改”菜单中的“页面属性”命令，会出现“页面属性”对话框，如图1-30所示。 * 图1-30 设定页面属性 * 1.7 实践与练习：创建新文档 本练习的内容是创建一个新的页面文档，并插入一些基本的元素。这些元素的详细操作方法，在后续章节中还会深入介绍，这里只是一个预习。本例最终效果如图1-31所示。 * 图1-31 预览效果 * 图1-32 创建新文档 * 图1-33 显示“设计”视图 * 图1-34 直接输入文字 * 图1-35 打开“图像”列表 * 图1-36 选择图片 * 图1-37 辅助功能提示框 * 图1-38 插入图片 * 图1-39 修改标题名称 * 图1-40 预览效果 * 小 结 通过本讲的学习，同学们可以了解到，网页设计和开发是一个综合性相当强的工作，即需要有美工人员能进行视觉方面的设计，同时也需要程序开发人员进行功能开发。因此需要设计师对各个方面的技术和知识有所掌握，才能从容应付可能遇到的各种问题。 * 此外，本讲还介绍了“站点”的基本概念，并讲解了建立本地站点的操作方法，进而在建立站点的基础上，介绍了创建网页文档的方法。在此基础上，就可以向创建好的网页中添加各种丰富多彩的网页元素了，这将在后面章节开始逐一介绍。 * 【例1-1】 最简单的HTML文件 html head title这是测试文件/title /head body HTML 文件的内容就写在这里... ... /body /html * 图1-6 用Windows的“记事本”编辑源文件 * 图1-7 Windows“记事本”中HTML文件的保存 * 图1-8 打开浏览器的窗口后的效果 * 注意这个文件中有以下4对标签。 1．HTML标签 “html”标签放在HTML文件的开头，告诉浏览器，这个文件是HTML文件。而在文件的结尾，是“/html”结束标签。 * 2．文件头标签 文件头标签是“head”和“/head”，一般放在“html”标签的后面，用来标明文件的题目或定义部分。 head内的meta标签: 例如: ＜meta http-equiv=content-Type content=text/html; charset=gb2312＞ * 3．文件标题标签 文件标题标签为“title”和“/title”。这对标签用来设定文件的标题。浏览器通常都会将文件标题显示在浏览器窗口的左上角，因此这个标题很有用。 * 4．