网页设计第5讲创建站点课件

课程导入,接下来将要迈出制作网页的第一步了。无论是网页制作的新手，还是专业的网页设计师，都要从构建站点开始。,教学目标,（1）掌握“文件”面板的使用方法 （2）掌握使用Dreamweaver8定义本地站点的方法 （3）掌握站点的管理方法,站点效果展示,本章所创建的实例网站“长沙世界之窗”的站点结构效果如图所示。,Dreamweaver的本地站点就是本地计算机上的一个文件夹。定义本地站点就是在本地计算机中创建一个文件夹，然后将所有与制作网页相关的文件都放在该文件夹中，以便进行网站的制作和管理。 Dreamweaver的一些功能，如模板、库项目等只有在站点内才可以使用。 由于网站需放在Internet上的Web服务器才能供其他用户浏览，通常将存储于Internet服务器上的站点称为远程站点。,规划站点的目录结构,一个网站中包含有多个网页文件、图形文件等，如果将所有文件都存储在一个目录中，当站点的规模较大时，管理起来就很不方便。 通常的做法是： (1)先将网站中的各种信息资源进行整理、分类，然后在硬盘上建立一个网站文件夹（即网站根文件夹）,(2)再根据需要在根文件夹中建立若干子文件夹，以存储不同类型的文件或不同内容的文件。网站的主页应放在根文件夹中。主页文件名一般用index.htm命名。 (3)规范化的命名 文件和文件夹名最好使用字母，可以包含数字和下划线。应避免使用中文，中文名可能导致浏览错误或访问失败。 文件名应容易理解，最好做到见名思义。如英文名称、汉语拼音等。,文件面板主要有三个方面的功能： （1）管理本地站点，包括建立文件夹和文件，对文件夹和文件进行重命名等操作，也可以管理本地站点的结构； （2）管理远程站点，包括文件上传、文件更新等； （3）可以连接网络应用服务器，预览动态网页。,认识文件面板,创建本地站点,演示 “长沙世界之窗”网站的创建步骤。 操作步骤： 1）利用Windows的资源管理器在硬盘上新建一个站点根文件夹，再根据需要在根文件夹中建立若干子文件夹，以存储不同类型的文件。 2）执行菜单“窗口/文件”，打开“文件”面板。 3）执行菜单“站点/管理站点”，打开管理站点对话框，单击“新建”按钮打开定义站点对话框，输入内容。,管理站点,1切换站点 2编辑站点 3复制站点 4删除站点 5创建文件夹和文件 6移动和复制文件 7重命名文件夹或文件 8删除文件夹或文件,使用“资源”面板,1打开资源面板 使用“资源面板”之前必须先创建一个站点。然后选择菜单【窗口】【资源】命令，将会打开“资源面板”，资源面板与文件面板在同一个面板组中。,2将资源加入收藏列表 在“资源面板”的上方，有两个单选按钮：“站点”、“收藏”。如果选择“站点”表示以资源列表方式显示站点中的所有资源；如果选择“收藏”，则以“收藏”资源列表方法进行显示。,3向文档中添加资源 （1）将光标定位于想要加入资源的位置。 （2）打开“资源面板”，选择资源的种类图标按钮。 （3）选择“站点”或者“收藏”单选按钮，然后在列表中选择所要的资源。 （4）从“资源面板”中拖动资源到选中的对象或者单击“资源面板”左下角的 按钮，这样资源就被应用到文档中。,1新建网页文档 单击Dreamweaver 8主窗口的菜单【文件】【新建】，打开“新建文档”对话框，在该对话框中，先单击“常规”选项卡，然后在“类别”列表中选择“基本页”，在“基本页”列表中单击选择“HTML”选项，然后单击【创建】按钮即可创建一个网页文档。,网页文档的基本操作,2保存网页文档 保存网页文档的方法主要有： 方法一：单击“标准工具栏”中的【保存】按钮 或者【全部保存】按钮 。 方法二：单击Dreamweaver 8主窗口的菜单【文件】【保存】或者【保存全部】。,3打开网页文档 单击Dreamweaver 主窗口的菜单【文件】【打开】，会弹出“打开”对话框。 在Dreamweaver主窗口中单击菜单【文件】，鼠标指针指向【打开最近的文件】菜单项，弹出的菜单项的可以打开最近编辑过的网页文档。, 课堂实践 ,1操作任务 利用本章所学习的知识，完成以下操作： （1）创建一个命名为“课堂实践”的本地网站，该网站的所有文件存储在本机上E盘的“ClassroomPractise”文件夹中。 （2）在“文件面板”的站点根目录下创建一个文件夹“00创建站点”。,（3）在文件夹“00创建站点”中创建三个子文件夹“image”、“music”和“text”。 （4）在文件夹“00创建站点”中创建一个命名为“00.html”的网页文档。 （5）将所需的图像文件和音乐文件分别复制到“image”和“music”文件夹中。,2效果展示 所创建的“课堂实践”站点，以及该站点中的文件夹和文件。,图3-18 课堂实践网站的站点结构,3制作要点提示 （1）文件夹“ClassroomPractise”必须在Windows操作系统的资源管理器中创建。 （2）其他子文件夹可以直接利用Dreamweaver的“文件”面板创建。 （3）拷贝图像文件和音乐文件也是在Windows操作系统的资源管理器中完成。, 课外拓展实践 ,1利用“站点定义”对话框中的“高级”选项卡中的“本地信息”创建一个学校网站，该网站命名为“广东纺院网站 ”，保存在文件夹“MyCollege”中。 2在所创建的站点根目录下创建如图所示的多个子文件夹。, 本章小结 ,本章重点学习了如何创建站点和管理站点，同时也分析了网页文档的基本操作和“资源”面板、“文件”面板的使用方法。这些操作都是最基本的操作，熟练掌握将会有助于以后网页的制作。,第4章 页面的整体控制,本章主要学习如何设置网页的整体页面属性。,课程引导,（1）了解Dreamweaver 8的参数设置方法 （2）掌握页面属性的设置方法 （3）掌握设置文件头内容的方法 （4）学习辅助工具的使用,知识技能目标,站点效果展示,网页01.html的页面属性整体设置效果如图所示。,图4-1 网页01.html的页面整体设置效果,（1）在站点“长沙世界之窗”根目录下创建一个文件夹“01页面控制”，在该文件夹中创建一个命名为“01.html”的网页文档。 （2）设置“首选参数”，具体设置要求见4.1节。 （3）设置网页“01.html”的外观属性、链接属性、标题属性、标题/编码属性，且在浏览器中浏览网页的设置效果。具体设置要求见4.2节。 （4）为网页“01.html”插入关键字和说明。,本章操作任务,4.1 参数设置,设置“首选参数”之前先在站点“长沙世界之窗”根目录下创建一个文件夹“01页面控制”，在该文件夹中创建一个命名为“01.html”的网页文档。,在Dreamweaver 8主窗口中，单击菜单【编辑】【首选参数】或者使用快捷键“Ctrl+U”，即可打开“首选参数”对话框。,1打开“首选参数”对话框,“首选参数”对话框左边的“分类”列表中列出了20种不同的类别，选择一种类别后，该类别中所有可用的选项将会显示在对话框的右边参数设置区域。,2参数设置方法,（1）设置常规属性 显示起始页。 允许多个连续的空格 使用CSS而不是HTML标签,3参数设置举例,（2）设置站点属性“总是显示本地文件于右”。 打开“首选参数”对话框后，在该对话框的左边的“分类”列表中选择“站点”选项，然后在“总是显示”列表项中选择“本地文件”和“右”即可。,（3）设置复制/粘贴属性：使用“编辑粘贴”从其他应用程序粘贴到设计视图时，复制“带结构的文本及全部格式”。,（4）设置代码提示属性： 启用代码提示,4.2 设置页面属性,页面属性可以控制网页的标题、背景色、背景图和文本颜色等，主要对页面外观进行整体上的控制。,1打开“页面属性”对话框,在Dreamweaver 8主窗口中，单击菜单【修改】【页面属性】或者在“属性面板”中单击【页面属性】按钮都可以打开“页面属性”对话框。,2设置外观属性,对网页“01.html”外观属性的设置要求如下： （1）“页面字体”设置为“宋体”，“大小”设置为“14px”。 （2）“背景颜色”设置为“#CCFFFF”。 （3）“左边距”和“右边距”设置为“80px”。,下面根据属性设置要求完成网页“01.html”外观属性的设置。 （1）打开“页面属性”对话框。 （2）左边“分类”列表中选择“外观”。 （3）从“页面字体”下拉列表框中选择“宋体”作为页面中的默认文本字体。,（4）在“背景颜色”文本框中可以设置网页的背景颜色 一般情况下，背景颜色都设置成白色，如果不设置背景颜色，常用的浏览器也会默认网页的背景颜色为白色。为了增强网页背景效果，可以对背景颜色进行设置。,（5）设置左边距和右边距 在“左边距”文本框中可以设置网页左边空白的宽度，在“右边距”文本框中可以设置网页右边空白的宽.,（6）设置背景图像 在“页面属性”对话框中也可以设置网页的“背景图像”，其方法是：在“背景图像”文本框中输入网页背景图像的路径和名称。,（7）单击【确定】按钮或者【应用】按钮，完成外观属性的设置。 （8）保存网页的属性设置。,3设置链接属性,“链接”选项主要对页面的超链接文本的字体、颜色等进行设置。 对网页“01.html”链接属性的设置要求如下： （1）网页中超链接文本默认状态下的字体设置为“楷体”、字体大小设置为14px。 （2）网页中超链接文本的颜色设置为“blue”，访问过的超链接颜色设置为“purple”。,（3）网页中已激活的超链接文本颜色设置为“navy”。 （4）变换图像链接颜色设置为“aqua”（即当鼠标指针移动到网页中超链接文字上方时超链接的颜色为“aqua”），下划线样式设置为“仅在变换图像时显示下划线”。,下面根据属性设置要求完成网页“01.html”链接属性的设置。 （1）打开“页面属性”对话框。 （2）左边“分类”列表中选择“链接”。 （3）在“链接字体”列表框中选择“楷体”，如果字体下拉列表框中没有列出所需的字体，可以单击最后一项“编辑字体列表”，添加所需的字体。,（4）在“大小”列表框中选择“14”，单位默认为“像素(px)”。 （5）在“链接颜色”文本框中输入“blue”。 （6）在“已访问链接”文本框中输入“purple”。 （7）在“活动链接”文本框中输入“navy”。,（8）在“变换图像链接”文本框中输入“aqua”。 （9）在“下划线样式”列表框中选择“仅在变换图像时显示下划线”。 （10）单击【确定】按钮或者【应用】按钮，完成链接属性的设置。 （11）保存网页的属性设置。,“标题”选项用于设置网页中各级标题的字体、大小等属性。 对网页“01.html”标题属性的设置要求如下： （1）设置网页中标题的字体为“黑体”。 （2）设置标题1的大小为“24px”，颜色为“black”。,4设置标题属性,“标题”选项用于设置网页中各级标题的字体、大小等属性。 对网页“01.html”标题属性的设置要求如下： （1）设置网页中标题的字体为“黑体”。 （2）设置标题1的大小为“24px”，颜色为“black”。,（3）在“标题1”的“大小”列表框中选择“24”，单位默认为“像素(px)”，颜色文本框中输入“black”。 （5）单击【确定】按钮或者【应用】按钮，完成标题属性的设置。 （6）保存网页的属性设置。,“标题/编码”选项用于设置网页的标题和文字编码等属性。 对网页“01.html”标题/编码属性的设置要求如下： （1）网页的标题设置为“长沙世界之窗”。 （2）文档类型设置为“HTML 4.0 Transitional”，编码设置为“简体中文(GB2312)”。,5设置标题/编码属性,下面根据属性设置要求完成网页“01.html”标题/编码属性的设置。 （1）打开“页面属性”对话框，左边“分类”列表中选择“标题/编码”。 （2）在“标题”文本框中输入“长沙世界之窗”。 （3）在“文档类型”列表框中选择“HTML 4.0 Transitional”。,（4）在“编码”列表框中选择“简体中文(GB2312)”，将网页的文字编码设置成中文。 （5）单击【确定】按钮或者【应用】按钮，完成“标题/编码”属性的设置。 （6）保存网页的属性设置。,4.3 设置文件头内容,对网页“01.html”文件头内容的设置要求如下： （1）设置网页“01.html”的文字编码为“简体中文”。 （2）为网页“01.html”插入关键字“长沙”、“旅游”、“世界之窗”。 下面根据文件头内容的设置要求完成网页“01.html”文件头内容属性的设置。如果网页处于关闭状态，先打开网页“01.html”。,4.3.1 在设计视图中显示“文件头内容”的工具栏,在Dreamweaver 8主窗口中，单击菜单【查看】【文件头内容】，这样文件头内容工具栏便会出现在设计视图的上部。,4.3.2 设置文件头内容的方法,设置Meta的步骤如下： （1）“插入”工具栏切换到“HTML”类型，然后在“文件头”下拉菜单中单击【META】按钮。打开“META”对话框，接下来在该对话框中进行参数设置。 （2）该对话框中的属性设置完成后，单击【确定】按钮。,1设置META,插入关键字的步骤如下： “插入”工具栏切换到“HTML”类型，然后在“文件头”下拉菜单中单击【关键字】按钮，打开“关键字”对话框，在该对话框中输入关键字“长沙，旅游，世界之窗”即可。,2插入关键字,许多搜索引擎可以读取描述Meta标记的内容，插入说明的方法与插入关键字相似，在“HTML”插入工具栏的“文件头”下拉菜单中单击【说明】按钮，弹出“说明”对话框，在该对话框中输入对页面的说明信息即可。,3插入说明,“链接”可以定义当前网页和本地站点中另一个网页之间的关系，让其他网页提供给当前网页文件相关的资源和信息。,4设置链接,4.4 辅助工具的使用,使用标尺、网格、辅助线,标尺 网格 辅助线 使用缩放和平移, 课堂实践 ,1操作要求,打开“学生课堂实践”站点文件夹“01页面控制”下的网页文档“01.html”，完成以下各项的操作。,（1）首选参数的设置要求 设置启动Dreamweaver 8时显示起始页；设置站点属性“总是显示本地文件于左”；创建网页文档时，设置默认文档为“HTML”文档，设置默认扩展名为“.html”；设置“复制/粘贴”属性：使用“编辑粘贴”从其他应用程序粘贴到设计视图时，复制“带结构的文本”，不清理Word段落间距。,（2）页面属性的设置要求 外观属性的设置 “页面字体”采用“默认字体”，“大小”采用“12px”；“背景图像”选用image文件夹下的“bj01.jpg”；“左边距”和“右边距”设置为“100px”，“上边距”和“下边距”设置为“20px”。,链接属性的设置要求 网页中超链接文本默认状态下的字体设置为“宋体”，字体大小设置为14px；网页中超链接文本的颜色设置为“blue”，访问过的超链接的颜色设置为“olive”；当鼠标指针移动到网页中超链接文字上方时超链接的颜色设置为“maroon”，下划线样式设置为“变换图像时隐藏下划线”；网页中已激活的超链接文本颜色设置为“fuchsia”。,标题属性的设置要求 设置网页中标题的字体为“隶书”，标题1的大小为“18px”，颜色为“aqua”。 “标题/编码”属性的设置要求 网页的标题设置为“湘江谷”；文档类型设置为“HTML 4.0 Transitional”，编码设置为“简体中文(GB2312)”。,（1）参数设置在“首选参数”对话框中进行，单击菜单【编辑】【首选参数】或者使用快捷键“Ctrl+U”，即可打开“首选参数”对话框。,2制作要点提示,（2）页面属性设置在“页面属性”对话框中进行，单击菜单【修改】【页面属性】或者在“属性面板”中单击【页面属性】按钮都可以打开“页面属性”对话框。, 本章小结 ,本章主要讲解了如何设置首选参数，如何设置页面属性，如何设置文件头内容，辅助工具如何使用。这些设置都是从外观上对页面进行有效控制，方便网页的制作和浏览。页面整体控制的方法，除了设置常规的背景颜色、背景图片等属性之外，Dreamweaver 8还有辅助线、缩放等常用且必备的功能，掌握好这些基本工具的使用，有助于我们更好的制作网页。, 课外拓展实践 ,1在“广东纺院网站 ”站点的文件夹 “01页面控制”中创建一个网页文档，命名为“01.html”。 2对网页01.html设置首选参数、设置页面属性、设置文件头内容。（参考41页的课堂实践进行设置）,教你写字,下面是赠送的PPT模板不需要朋友可以下载后编辑删除！谢谢！,感恩 父母,天冷时，是他们给你送来温暖,有时，他们会对我们发火,感恩父母 感谢