CH2 创建站点

单击此处编辑母版标题样式,*,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,通过本章学习，应该掌握以下内容：,规划站点结构的方法,Dreamweaver,的基本操作,Dreamweaver,创建站点的方法,站点的基本操作,网页的整体控制,第2章 创建站点,1,2.1,规划站点结构,1按照文件的类型进行规划,按照文件的类型规划，就是将不同类型的文件分别存放在不同的文件夹下。,2按照网页主题进行规划,按照网页主题，对站点结构规划，可以使网站条理更清晰，便于日后更好地管理站点。,2,下面是建立目录结构的一些建议：,（1）不要将所有文件都存放在根目录下，会造成文件管理混乱,（3）按栏目内容建立子目录,（2）在每个主栏目目录下都建立独立的images目录,（4）目录的层次不要太深,（5）不要使用过长的目录,（6）不要使用中文目录,3,Dreamweaver是Macromedia公司的出品的一款“所见即所得”的网页编辑工具。与FrontPage不同，Dreamweaver采用的是Mac机浮动面版的设计风格，对于初学者来说可能会感到不适应。一旦习惯了其操作方式后，就会发现Dreamweaver的直观性与高效性是FrontPage所无法比拟的。,2.2,利用Dreamweaver 创建站点,2.2.1 Dreamweaver 简介,4,1Dreamweaver 的界面,菜单栏,工具栏,文档窗口,浮动面板,站点面板,属性面板,浮动,面板组,插入面板,5,（1）菜单栏,菜单栏提供了所有的菜单命令，是提供软件最完整功能的方式。,（2）工具栏,工具栏提供了常用命令的快捷启动方式，例如可以使用工具栏中的“标题”框方便地设置网页的标题。,（3）插入面板,插入面板是,Dreamweaver,中新添的部件，其实就是,Dreamweaver 4,中的对象面板，在其中包含一些用于创建不同类型对象的按钮。,6,（4）浮动面板,浮动面板是一种方便操作的界面方式，使用者可以随时获得特定功能。,（5）文档窗口,文档窗口是显示用户所编辑文档的地方，显示结果与文档在浏览器中显示的结果基本相同。,（6）属性面板,属性面板上显示的是被选取对象或文本的各种属性，在属性面板上还可以检查和编辑当前选定页面元素的属性。,7,2Dreamweaver的视图,单击工具栏上的视图切换按钮 ，即显示设计视图；使用工具栏中的按钮 ，则可以很方便地切换到代码视图，以便查看当前编辑网页的HTML源代码；如果需要同时查看代码视图和设计视图，可以单击工具栏上的显示代码和设计按钮 ，此时Dreamweaver将同时在窗口中显示代码视图和设计视图。,8,2.2.2 定义站点,在Dreamweaver 的编辑窗口,，选择“窗口”|“站点”菜单，即可打开站点面板，,如图所示,。,在站点面板中，用户可以选择菜单“站点”|“新建站点”命令创建新站点，也可以使用“站点”|“编辑站点”命令编辑已有的站点。,1站点面板,9,在Dreamweaver MX中创建站点的方法有两种:,（,1,）通过站点定义向导创建站点,在编辑窗口或站点面板选择命令菜单“站点”,|,“新建站点”选项，弹出“站点定义”对话框,1,，,选择“基本”选项卡，然后,按照提示进行选项设置.,2创建站点,（2）直接定义站点,在编辑窗口或站点面板选择命令菜单“站点”,|,“新建站点”选项，弹出“站点定义”对话框,1,，,选择“高级”选项卡，然后,按照提示进行选项设置.,10,如果要打开站点，可执行如下操作之一：,（,1,）选择菜单栏“站点”,|,“站点文件”命令，即可在站点面板中打开当前编辑文件所在的本地站点，同时在文档窗口中可以进行该站点文档的编辑操作。,（,2,）在站点面板中打开工具栏的“站点”下拉列表框，选择需要打开的站点，文件窗口中即会显示该站点文件夹和文件信息。,2.2.3 站点的基本操作,1打开站点,11,若要复制当前站点，可以使用文档窗口或站点面板中“站点”菜单的“编辑站点”命令，打开“编辑站点”对话框。选中要复制的站点名称，单击“复制”按钮即可对当前站点进行复制操作。,执行复制站点操作后，系统会自动复制一个所选择的站点，并且会为复制的站点加上一个“拷贝”字样的站点名称。,2复制站点,12,如果要更改当前站点设置，比如对站点进行修改站点名称、设置参数选项等编辑操作，可以利用上面的方法打开“编辑站点”对话框，选中一个站点后单击“编辑”按钮，即可打开该“站点定义为”对话框，选择“高级”选项卡进行站点编辑。,3编辑站点,13,在Dreamweaver 中删除一个站点非常容易，在弹出的“编辑站点”对话框中，单击“删除”按钮就可以删除选中的站点。,4删除站点,注意：,此删除操作并未真正删除站点文件夹和其中的内容，而只是无法再用Dreamweaver管理该文件夹而已。如果需要再次用Dreamweaver管理该文件夹，只要用新建站点的方式再次将该文件夹指定为站点根目录即可。,14,（,1,）申请域名和主页空间,网站的发布首先要考虑的是以什么样的域名发布，发布在什么地方，即要申请域名和主页空间。,（,2,）设置浏览器的兼容性,为了避免在不同类型和版本的浏览器中出现某些元素不能正常显示的现象，在站点发布前必须设置浏览器的兼容性。,5发布站点,15,（,3,）测试站点,在将站点上传到服务器并宣布已经可供浏览之前，最好先在本地计算机上对其进行一下测试，因为在站点或者网页中可能会存在许多问题。,站点的测试主要包括：查看超链接、验证超链接、修复超链接、更新超链接及测试网络连接等。,（,4,）测试网络连接,如果在访问或打开一个服务器上的站点时遇到一些问题，则可以通过测试网络连接来检查主机名称、本地主机、,IP,地址、,TCP/IP,协议等设置。,16,（,5,）在本地计算机上发布站点,测试完站点后，如果觉得把站点发布到服务器上的时机还不成熟，那么可以先在本地机上发布以测试效果。,（,6,）在服务器上发布站点,在本地计算机上设置完浏览器的兼容性、测试完站点后，就可以在服务器上正式发布精心制作的站点了。,发布站点的方法有很多种，例如FTP上传或各大站点提供的文件管理器等。,17,Dreamweaver,的站点面板,返 回,18,2.3 Dreamweaver 进行页面控制,2.3.1 参数设置,设置“首选参数”之前先在站点“长沙世界之窗”根目录下创建一个文件夹“01页面控制”，在该文件夹中创建一个命名为“01.html”的网页文档。,19,1打开“首选参数”对话框,在Dreamweaver 8主窗口中，单击菜单【编辑】【首选参数】或者使用快捷键“Ctrl+U”，即可打开“首选参数”对话框,。,2参数设置方法,“首选参数”对话框左边的“分类”列表中列出了20种不同的类别，选择一种类后，该类别中所有可用的选项将会显示在对话框的右边参数设置区域。,20,3参数设置举例,（1）设置启动Dreamweaver 8时不再显示起始页。,打开“首选参数”对话框后，在该对话框的左边的“分类”列表中选择“常规”选项，在右边“文档选项”的“显示起始页”复选框中单击，取消复选框中的选中标记，然后单击【确定】按钮。,21,（2）设置站点属性“总是显示本地文件于右”。,打开“首选参数”对话框后，在该对话框的左边的“分类”列表中选择“站点”选项，然后在“总是显示”列表项中选择“本地文件”和“右”即可。,22,（3）创建网页文档时，设置默认文档为“HTML”文档，设置默认扩展名为“.html”。,打开 “首选参数”对话框后，在该对话框的左边的“分类”列表中选择“新建文档”选项，然后在右边设置“默认文档”为“HTML”，设置“默认扩展名”为“.html”即可。,（4）设置“复制/粘贴”属性：使用“编辑粘贴”从其他应用程序粘贴到设计视图时，复制“带结构的文本及全部格式”。,23,2.3.2设置页面属性,1打开“页面属性”对话框,在Dreamweaver 8主窗口中，单击菜单【修改】【页面属性】,或者在“属性面板”中单击【页面属性】按钮都可以打开“页面属性”对话框。,24,2设置外观属性,如对网页“01.html”外观属性的设置要求如下：,（1）“页面字体”设置为“宋体”，“大小”设置为“14px”。,（2）“背景颜色”设置为“#CCFFFF”。,（3）“左边距”和“右边距”设置为“80px”。,25,3设置链接属性,“链接”选项主要对页面的超链接文本的字体、颜色等进行设置。,如对网页“01.html”链接属性的设置要求如下：,（1）网页中超链接文本默认状态下的字体设置为“楷体”、字体大小设置为14px。,（2）网页中超链接文本的颜色设置为“blue”，访问过的超链接颜色设置为“purple”。,（3）网页中已激活的超链接文本颜色设置为“navy”。,（4）变换图像链接颜色设置为“aqua”（即当鼠标指针移动到网页中超链接文字上方时超链接的颜色为“aqua”），下划线样式设置为“仅在变换图像时显示下划线”。,26,4设置标题属性,“标题”选项用于设置网页中各级标题的字体、大小等属性。,如对网页“01.html”标题属性的设置要求如下,：,（1）设置网页中标题的字体为“黑体”。,（2）设置标题1的大小为“24px”，颜色为“black”。,27,5设置标题/编码属性,“标题/编码”选项用于设置网页的标题和文字编码等属性。,如对网页“01.html”标题/编码属性的设置要求如下：,（1）网页的标题设置为“长沙世界之窗”。,（2）文档类型设置为“HTML 4.0 Transitional”，编码设置为“简体中文(GB2312)”。,28,2.3.3设置文件头内容,1在设计视图中显示“文件头内容”的工具栏,在Dreamweaver 8主窗口中，单击菜单【查看】【文件头内容】，这样文件头内容工具栏便会出现在设计视图的上部。,29,2设置文件头内容的方法,1.设置META,（1）“插入”工具栏切换到“HTML”类型，然后在“文件头”下拉菜单中单击【META】按钮。打开“META”对话框，接下来在该对话框中进行参数设置。,（2）该对话框中的属性设置完成后，单击【确定】按钮。,2.插入关键字,“插入”工具栏切换到“HTML”类型，然后在“文件头”下拉菜单击【关键字】按钮，打开“关键字”对话框。在该对话框中输入关键字如“长沙，旅游，世界之窗”,30,3插入说明,许多搜索引擎可以读取描述Meta标记的内容，插入说明的方法与插入关键字相似，在“HTML”插入工具栏的“文件头”下拉菜单中单击【说明】按钮，弹出“说明”对话框在该对话框中输入对页面的说明信息即可。,4设置链接,“链接”可以定义当前网页和本地站点中另一个网页之间的关系，让其他网页提供给当前网页文件相关的资源和信息。,31,课堂实践 （一）,1操作任务,利用本章所学习的知识，完成以下操作：,（1）创建一个命名为“课堂实践”的静态网站，该网站的所有文件存储在本机上E盘的“ClassroomPractise”文件夹中。,（2）在“文件面板”的站点根目录下创建一个文件夹“00创建站点”。,（3）在文件夹“00创建站点”中创建三个子文件夹“image”、“music”和“text”。,（4）在文件夹“00创建站点”中创建一个命名为“00.html”的网页文档。,（5）将所需的图像文件和音乐文件分别复制到“image”和“music”文件夹中。,32,2效果展示,所创建的“课堂实践”站点，以及该站点中的文件夹和文件。,33,3制作要点提示,（1）文件夹“ClassroomPractise”必须在Windows操作系统的资源管理器中创建。,（2）其他子文件夹直接利用Dreamweaver 8的“文件”面板创建。,（3）拷贝图像文件和音乐文件也是在Windows操作系统的资源管理器中完成。,34,课堂实践 （二）,1操作要求,打开“课堂实践”站点文件夹“01页面控制”下的网页文档。,“01.html”，然后完成以下各项的操作。,（1）首选参数的设置要求,设置启动Dreamweaver 8时显示起始页；设置站点属性“总是显示本地文件于左”；创建网页文档时，设置默认文档为“HTML”文档，设置默认扩展名为“.html”；设置“复制/粘贴”属性：使用“编辑粘贴”从其他应用程序粘贴到设计视图时，复制“带结构的文本”，不清理Word段落间距。,35,（2）页面属性的设置要求,外观属性的设置,“页面字体”采用“默认字体”；,“大小”采用“12px”；,“背景图像”选用image文件夹下的“bj01.jpg”；,“左边距”和“右边距”设置为“100px”；,“上边距”和“下边距”设置为“20px”。,36,（3）链接属性的设置要求,网页中超链接文本默认状态下的字体设置为“宋体”，字体大小设置为14px；网页中超链接文本的颜色设置为“blue”，访问过的超链接的颜色设置为“olive”；当鼠标指针移动到网页中超链接文字上方时超链接的颜色设置为“maroon”，下划线样式设置为“变换图像时隐藏下划线”；网页中已激活的超链接文本颜色设置“fuchsia”。,37,（4）,标题属性的设置要求,设置网页中标题的字体为“隶书”，标题1的大小为“18px”，颜色为“aqua”。,（5）“标题/编码”属性的设置要求,网页的标题设置为“湘江谷”；文档类型设置为“HTML 4.0 Transitional”，编码设置为“简体中文(GB2312)”。,38,2制作要点提示,（1）参数设置在“首选参数”对话框中进行，单击菜单【编辑】【首选参数】或者使用快捷键“Ctrl+U”，即可打开“首选参数”对话框。,（2）页面属性设置在“页面属性”对话框中进行，单击菜单【修改】【页面属性】或在“属性面板”中单击【页面属性】按钮都可以打开“页面属性”对话框。,39,E N D,40,