《Dreamweaver网页制作第一单元PPT参考课件》由会员分享，可在线阅读，更多相关《Dreamweaver网页制作第一单元PPT参考课件（51页珍藏版）》请在金锄头文库上搜索。
1、目录目录上一页上一页下一页下一页退出退出Dreamweaver网页制作网页制作第一单元第一单元 创建个人网站创建个人网站主 编：王树平副主编：杜大志 李光宇 目录目录上一页上一页下一页下一页退出退出任务描述：任务描述：本单元将通过一个个人网站的创建，学习网站从规划到建立的流程，自己动手，打造属于自己的站点。任务完成后如下图所示：第一单元 创建个人网站目录目录上一页上一页下一页下一页退出退出第一单元第一单元 创建个人网站创建个人网站任务一 规划个人网站任务二 创建站点 任务三 管理站点 任务四 创建网站目录结构 任务五 使用代码创建网页 目录目录上一页上一页下一页下一页退出退出任务一任务一 规划
2、个人网站规划个人网站 任务描述：任务描述：了解网站的主题和规划流程，规划一个个人网站。 任务分析：任务分析：制作一个个人网站之前需要进行系统的规划，包括网站主题的确定、栏目板块的划分及建立相应的目录结构、选择合适的开发工具软件。第一单元 创建个人网站目录目录上一页上一页下一页下一页退出退出 自己动手：自己动手： 1定位网站的主题和名称。 常见的网页主题有哪些？网站主题的选择需要注意什么？ 2规划网站的栏目与目录结构。设计网站目录结构需要注意哪些问题？任务一 规划个人网站目录目录上一页上一页下一页下一页退出退出 3选择网页制作软件 其他常见网页编辑软件： 微软的Frontpage：Microso
3、ft Office办公软件成员之一，被誉为最易于使用、功能强大的网页制作编辑入门工具。 Netscape编辑器：Netscape Communicator和Netscape Navigator随带的网页制作软件，是一款简单的面向初学者的网页制作入门工具。 CuteHTML：美国GlobalSCAPE开发的网页制作软件。 HotDogPro4.54：美国软件公司Sausage推出的网页制作软件，使用方便、功能十分强大，具有动画制作功能。现在的最新版为“HotDog Professional 7”。 Dreamweaver 8：一款集网站管理与网页制作于一身的“所见即所得”的网页制作软件任务一 规
4、划个人网站目录目录上一页上一页下一页下一页退出退出 任务总结：任务总结： 通过完成以上任务，学习了个人网站的规划方法。任务一 规划个人网站目录目录上一页上一页下一页下一页退出退出 举一反三：举一反三： 1通过互联网浏览网站，总结所浏览网站的主题类型，至少找出企业宣传、软件下载、求职招聘、专业论坛、流行时尚、互动聊天和在线销售类型的网站各一个，记录它们的网站名称填入表JYFS1-1中。 A.启发思路： 根据表格内的提示，使用搜索引擎查找相关类型的网站。 B.分组完成任务。任务一 规划个人网站目录目录上一页上一页下一页下一页退出退出 2相同主题类型的网站所包含的栏目不一定完全相同，搜索并浏览网络上
5、的个人网站，看一看它们都包含哪些栏目并进行汇总。 A.启发思路： 不同的人制作的个人网站栏目划分会有很大的区别，不同的年龄段，不同的工作职业，不同的兴趣爱好有不同的栏目划分。在搜索过程中注意考虑这些区别，例如，电影明星的个人网站中肯定会有影迷会这样的栏目，而运动员的个人网站中一般包含荣誉奖项这样的栏目 B.分组完成任务。任务一 规划个人网站目录目录上一页上一页下一页下一页退出退出 作业：作业： 1为自己设计一个个人网站，至少包含8个栏目，参照课本表1-1画出站点的目录结构。 任务一 规划个人网站目录目录上一页上一页下一页下一页退出退出任务二任务二 创建站点创建站点 任务描述：任务描述：使用网页
6、编辑软件Dreamweaver 8，创建“幽幽我心的个人网站”站点。 任务分析：任务分析：创建本地站点首先需要运行Dreamweaver 8，然后定义站点的名称、确定是否使用服务器技术、确定站点在本地计算机上的位置等。第一单元 创建个人网站目录目录上一页上一页下一页下一页退出退出 自己动手：自己动手： 1启动软件Dreamweaver8 。 Dreamweaver8 界面Dreamweaver8的起始页2创建网站站点。创建站点的流程任务二 创建站点目录目录上一页上一页下一页下一页退出退出 任务总结：任务总结： 通过完成以本任务，学习了软件的启动方法以及创建网站站点的流程。任务二 创建站点目录目
7、录上一页上一页下一页下一页退出退出 举一反三：举一反三：1新建一个站点，名称为“pra1-1”，使用“高级”选项卡完成新建过程，保存位置为“D:pra1-1”，其他参数保持默认即可。 A.启发思路： 在新建站点的过程中，使用“高级”选项卡完成新建过程更为直观，需要进行设置的参数与使用“基本”选项卡完成这一操作是一致的。 B.分组完成任务。任务二 创建站点目录目录上一页上一页下一页下一页退出退出 2使用搜索引擎搜索并打开5个不同主题类型的网页，记录并分析它们的URL，将其URL中的协议类型、域名和目录结构等内容填入表JYFS1-2中。 A.启发思路： 使用浏览器浏览一个网页的时候，浏览器的地址栏
8、中显示出这个网页的URL地址。 B.分组完成任务。任务二 创建站点目录目录上一页上一页下一页下一页退出退出 作业：作业： 1新建一个以自己姓名命名的个人站点，该站点使用“ASP JavaScript”服务器技术,暂不设置远程信息与测试服务器，站点保存在“D:pra1-2”文件夹中。 任务二 创建站点目录目录上一页上一页下一页下一页退出退出任务三任务三 管理站点管理站点 任务描述：任务描述：使用网页编辑软件Dreamweaver 8，实现站点的管理。 任务分析：任务分析：站点的管理功能包括新建、编辑、复制、删除、导出和导入，在Dreamweaver 8中有相应的管理工具可以直接完成这些操作，大大
9、简化了站点的管理工作。第一单元 创建个人网站目录目录上一页上一页下一页下一页退出退出 自己动手：自己动手： 1导出站点。 任务三 管理站点站点名称目录目录上一页上一页下一页下一页退出退出 2导入站点。 任务三 管理站点注意：因为有重名的站点，所以导入的站点名称后面自动加0。 目录目录上一页上一页下一页下一页退出退出 3复制删除与编辑站点。 任务总结：任务总结：通过完成以本任务，学习了软件的启动方法以及创建网站站点的流程。任务三 管理站点目录目录上一页上一页下一页下一页退出退出 举一反三：举一反三： 新建站点“pra1-5”，使用管理站点功能将其导出。将站点导出文件通过网络或移动存储设备拷贝到其
10、他计算机中，使用管理站点功能将其导入。 1启发思路： 在站点制作过程中，有时需要更换计算机，导出站点并导入到其他计算机中。 2分组完成任务。任务三 管理站点目录目录上一页上一页下一页下一页退出退出 作业：作业： 1新建站点“pra1-3”，使用管理站点功能复制站点“pra1-3”，编辑复制的站点名称为“pra1-4”，之后删除站点“pra1-3”。 任务三 管理站点目录目录上一页上一页下一页下一页退出退出任务四任务四 创建网站目录结构创建网站目录结构 任务描述：任务描述：实现先前规划的“幽幽我心的个人网站”目录结构 任务分析：任务分析：创建目录结构需要在站点内新建相应的网页文件及文件夹。 在众
11、多的网页文件中有一个页面叫做首页，他作为整个网站的入口，必然要与其他的页面在设置上有所区别。第一单元 创建个人网站目录目录上一页上一页下一页下一页退出退出 自己动手：自己动手： 1启动Dreamweaver，打开“幽幽我心的个人网站”。 2使用文件面板（看不到文件面板怎么办？）创建网站首页： A.如下页图所示，在文件面板中，选择“幽幽我心的个人网站”右键单击，新建一个网页文件，命名为Index.html。 任务四 创建网站目录结构 注意：不论是使用起始页还是使用“新建”菜单创建新网页，都需要保存到准确的目录位置。所以建议使用“文件”面板直接在站点内新建网页文件及文件夹。 B. 在文件面板中该文
12、件名上右击鼠标，选择“设成首页”,以区别于其他网页文件。目录目录上一页上一页下一页下一页退出退出任务四 创建网站目录结构 创建网页时网页命名有什么要求？创建网页时网页命名有什么要求？ 首页文件名命名有什么要求？首页文件名命名有什么要求？目录目录上一页上一页下一页下一页退出退出 3在文件面板双击打开首页文件、设置其页面属性 任务四 创建网站目录结构 Dreamweaver 8界面各部分的功能是什么？界面各部分的功能是什么？页面属性首页名称目录目录上一页上一页下一页下一页退出退出 如下图所示，在首页文件index.html的页面属性中，设置左边距和上边距为0像素。 任务四 创建网站目录结构各选项的
13、功能什么？各选项的功能什么？目录目录上一页上一页下一页下一页退出退出 5新建首页图像文件夹 6新建其他页面文件夹。结果文件面板如下图所示。 课堂讨论：课堂讨论： 首页文件名称可以不用index.html吗？怎样把首页文件与其他网页文件区分开来？通常把页面的左边距和上边距设置为0，为什么？ 4单击“F12”键，在IE浏览器中预览生成的网页。 任务四 创建网站目录结构空白首页怎样管理站点目录？目录目录上一页上一页下一页下一页退出退出 任务总结：任务总结： 通过完成以上任务，学习了创建首页、设置页面属性、创建并管理站点目录。 任务四 创建网站目录结构目录目录上一页上一页下一页下一页退出退出 举一反三
14、：举一反三： 依据前面学习的知识与掌握的专业技能，新建一个站点，网站命名为“网页制作”，存放在“D:dreamweaver”文件夹中，使用“文件”面板新建首页文件“index.html”和首页图像文件夹“images”，在“我的电脑”中查看相应目录的变化。 1启发思路： 注意要把网页设为首页 2分组完成任务。任务四 创建网站目录结构目录目录上一页上一页下一页下一页退出退出 作业：作业： 1使用文件菜单新建ASP JavaScript类型的动态页，文件保存为D:/ practice 1-1.asp，使用属性面板修改网页标题为ASP网页。 2新建站点pra1-7，使用文件面板创建一个网页文件，命名
15、为practice1-2.html，选中该文件后使用 下拉菜单中的重命名选项，改名为newpage.html，同样使用 下拉菜单中的选项预览页面后删除该页面。任务四 创建网站目录结构目录目录上一页上一页下一页下一页退出退出任务五任务五 使用代码创建网页使用代码创建网页 任务分析：任务分析：网页是用HTML（超文本标识语言）记述的，HTML是一种编写网页的基础语言，是英文HyperText Markup Language 的缩写，中文意思是“超文本标识语言”。HTML文件也可以说是一个文本文件，它包含了一些HTML标签、文本、脚本等，而且可以使用记事本等多种文本编辑软件进行编写。 任务描述：任务
16、描述：使用HTML语言创建一个空白页面。 第一单元 创建个人网站目录目录上一页上一页下一页下一页退出退出 打开记事本输入下列代码并保存，文件名example.html，最后双击运行。任务五 使用代码创建网页 自己动手自己动手 1使用“记事本”创建一个空白网页文件 其中各Html标签的功能是什么？目录目录上一页上一页下一页下一页退出退出 2使用Dreamweaver 8“代码”视图创建一个空白网页文件 运行Dreamweaver 8，使用起始页新建一个空白页面，在“文档”工具栏中选择“代码”视图，“文档”窗口将显示如下图代码，其中包含文档类型的说明文字和页面的编码方式与标题。 任务五 使用代码创
17、建网页此代码会在新建空白网页时自动生成。目录目录上一页上一页下一页下一页退出退出 课堂讨论：课堂讨论： 分组讨论使用代码创建网页和使用Dreamweaver 8创建网页各有什么优缺点。任务五 使用代码创建网页目录目录上一页上一页下一页下一页退出退出 举一反三：举一反三： 依据前面学习的知识与掌握的专业技能，使用word 2003新建一个空白文档，保存时选择文件类型为“网页（*.htm；*.html）”命名为“wordpage.html”，保存在D盘根目录下，完成后使用Dreamweaver 8打开该页面，在“代码”视图下查看其自动生成的HTML代码。 1启发思路： 网页是由HTML语言编写的，
18、保存为扩展名为Html或Htm的文本文件。任何一个文本编辑软件都可以编写。分组讨论有哪些文本编辑软件，引出Word。回忆如何使用Word创建文件。 2分组完成任务。任务五 使用代码创建网页目录目录上一页上一页下一页下一页退出退出 作业：作业： 1使用Dreamweaver 8新建一个空白文档，将“文档”窗口切换到“拆分”视图，查看“文档”面板的状态。 2标签是标签内部包含的一个功能标签，使用网络查找该标签的各种属性及其作。 任务五 使用代码创建网页相关知识：相关知识： 1常见的网页主题有：个人站点、企业宣传、软件下载、求职招聘、专业论坛、流行时尚、互动聊天和在线销售等。 2对网站题材的选择，通
19、常要注意以下两点： A.主题要简单明确。网站的内容要紧密地围绕主题， 它不可能包罗万象，也并不是把所有精彩的图像、动画、视频放在一起，就能做出好的网站，那样的结果往往会让你的网站没有特色，而且也要耗费很多的精力去维护。 B.尽量选择自己擅长或者喜欢的内容作为网站的题材。比如根据所学的专业，自己的爱好、特长等去分析选择网站题材。这样的题材做起来才会有兴趣，兴趣是制作网站的动力，有热情才能设计出优秀的作品。任务一 规划个人网站 3建立目录结构的一些建议： A.不要将所有文件都存放在根目录下，会造成文件管理混乱。 B.按栏目内容建立子目录。 C.在每个栏目目录下都建立独立的images目录保存图像资
20、源。 D.目录的层次不要太深，建议不要超过3层。 E.目录使用英文名称，不要使用中文名称。 F.不要使用过长的目录名称。任务一 规划个人网站相关知识：相关知识： 1Dreamweaver8 界面起始页面板组菜单栏任务二 创建站点 2Dreamweaver8 起始页打开最近编辑过的网页文件。选择创建各种类型的网页文件。选用Dreamwea-ver 8中已有的范例 创 建CSS样 式表、框架集页面等网页文件。任务二 创建站点 3创建站点的流程URL的含义任务二 创建站点 4URL的含义 URL就是“统一资源定位器（Uniform Resource Locator : URL）”，通俗点说，它用来指
21、出某一项信息所在位置及存取方式。比如要上网访问某个网站，在IE浏览器的地址栏中所输入的就是URL。URL是Internet上用来指定一个站点（site）或一个网页（Web Page）的标准方式。 URL的语法结构：协议名称：/主机名称端口地址/存放目录/文件名称。其中除了协议名称及主机名称是绝对必须有的外，其余像端口地址、存放目录等都可以不要。例如http:/www.myH 创建站点相关知识：相关知识： 1网页命名的规则：网页文件名通常使用小写英文，不能使用空格，最好不要使用特殊字符，不用中文。 服务器类型默认的首页名称Windows Server (NT 2000 2003 XP)index
22、.htm index.htmldefault.htm default.aspUnix Linuxindex.htm index.html 2不同站点服务器默认首页名称规则如下表，通常首页命名为index.html。任务四 创建网站目录结构文文档档工工具具栏栏面面板板组组文文件件面面板板属性面板属性面板状态栏状态栏插插入入栏栏菜单栏菜单栏文档窗口文档窗口标签选择器标签选择器任务四 创建网站目录结构 3Dreamweaver8网页设计界面介绍 4页面属性对话框介绍 “外观外观”选项选项：用于设置页面的总体外观，包括字体与背景属性的设置，以及插入内容的页边距。在Dreamweaver 8中默认页边距
23、不是0，所以通常在页面内容制作前，首先把上边距和左边距设为0。 “链接链接”选项选项：用于设置页面内的超级链接内容的样式。 “标题标题”选项选项：用于设置六种标题字体的默认样式。 “标题标题/编码编码”选项选项：用于设置网页的标题和页面文本内容的编码类型。 “跟踪图像跟踪图像”选项选项：把页面效果图插入到页面中来，在制作过程中随时进行跟踪对比。任务四 创建网站目录结构 Dreamweaver 8“文件”面板上的站点目录结构建立在本地计算机的相应位置，就本网站而言，站点是“D:mysite”文件夹，其他文件和文件夹全部建立在“D:mysite”文件夹中。 如果要删除站点中的文件或文件夹，可以在“
24、文件”面板选中它后，用键盘上的Delete键实现。如果在“文件”面板删除了站点中的文件或文件夹，实际上是删除了硬盘中相应位置的文件和文件夹。但是如果删除站点，硬盘中相应位置的文件和文件夹并不会被删除。 在站点中对文件或文件夹的删除、复制、剪切、粘贴、重命名等操作，都可以通过单击鼠标右键在“编辑”选项中实现。注意命名网页文件时必须加上扩展名。 5管理站点目录任务四 创建网站目录结构“插入插入”栏栏 “插入”栏包含多种可插入的页面元素（如表格、层和图像等）的按钮，当鼠标指针指向一个按钮时，会出现按扭的名称或功能提示。这些按钮又分为几种类别，可以在“插入”栏的左侧进行类别切换。下面对“插入”栏进行简
25、单的说明，具体使用方法在以后的内容中介绍。 “常用”类别：用于插入最常用的对象，例如图像和表格。 “布局”类别：用于插入表格、div标签、层和框架。还可以在“标准”（默认）、“扩展表格”和“布局”三个表格视图中进行切换。 “表单”类别：用于插入表单和表单元素。 “文本”类别：用于插入各种文本格式设置标签和列表格式设置标签，例如b、em、p、h1和ul。 “HTML”类别：用于插入水平线、头内容、表格、框架和脚本的HTML标签。 “应用程序”类别：用于插入动态元素，如记录集、重复区域以及记录插入和更新表单。 “Flash元素”类别：用于插入Flash元素。 “收藏”类别：用于将“插入”栏中最常用
26、的按钮分组和组织到某常用位置。任务四 创建网站目录结构“文档文档”窗口窗口 “文档”窗口显示当前打开的文档，分为“代码”视图、“设计”视图和同时显示“代码”视图和“设计”视图的“拆分”视图三种视图模式。 “文档文档”工具栏工具栏 “文档”工具栏左端是快速切换“文档”窗口三种视图模式的选项按钮，然后是一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。 “状态状态”栏栏 “状态”栏提供与正在编辑的文档有关的信息和工具。 “标签选择器标签选择器” 位于“状态栏”上，通过它可以选择各种页面元素。 “属性属性”面板面板“属性”面板用于查看和更改所选对象或文本的各种属性。每种对象具有不同的属
27、性。 面板组面板组 Dreamweaver 8的面板组中包含许多面板，每个面板都可以展开或折叠，关闭或打开面板可以在“窗口”菜单进行。 任务四 创建网站目录结构 相关知识：相关知识： Html标签的功能： ：标签用于HTML代码的最前边，用来标识HTML代码的开始。而标签恰恰相反，它放在HTML代码的最后边，用来标识HTML代码的结束。 ：和构成HTML代码的开头部分，在此标签之间可以使用显示网页标题的标签、等，这些标签都是描述HTML代码相关信息 的标签，标签之间的内容不会在浏览器的窗口内显示出来。 ：标签中的内容是HTML代码的主体部分，在此标签之间可包含、等等众多的标签，它们所定义的文本、图像等将会在浏览器的窗口内显示出来 任务五 使用代码创建网页 素材和资料部分来自素材和资料部分来自网络，如有帮助请下载网络，如有帮助请下载!512021/3/10
