dreamweaver 课件第一单元.ppt

1、Dreamweaver网页制作，第一单元创建个人网站，主编：王树平副主编：杜大志李光模，任务说明：本单元通过个人网站的创建，学习网站通过从企划到创建的流程，自己动手，属于自己的网站。 任务完成后，第一单元创建个人站点，第一单元创建个人站点，任务一订画个人站点、任务二创建站点、任务三管理站点、任务四创建站点目录结构、任务五使用代码创建页、任务一订画任务分析：在创建个人网站之前需要进行系统的修订。 包括确定网站主题、划分列板和建立适当的目录结构、选择适当的开发工具软件等。 中的组合图层性质变更选项。 第一单元创建个人网站，自己动手。 1确定网站的主题和名称。2订版网站栏目和目录结构。任务一策划个人

2、网站，3选网页制作软件，其他常见网页编辑软件：微软前页： Microsoft office是办公软件的成员之一，是最易于使用、最强大的网页制作编辑入门工具和Netscape编辑器Netscape Communicator和Netscape Navigator附带的网页创建软件是一个简单的初学者网页创建入门工具。 CuteHTML :美国GlobalSCAPE开发的网页制作软件。 HotDogPro4.54 :美国软件公司Sausage推出的网页制作软件易于使用，功能非常强大，具有动画制作功能。 现在的最新版本是“HotDog Professional 7”。 Dreamweaver8:将网站管

3、理和网页制作一体化的“只看就能得到”网页制作软件、任务一企划个人网站、任务总结：通过完成以上任务，学习了个人网站的企划方法。任务一策划个人网站，一反三： 1通过网络浏览网站，总结浏览网站的主题类型，企业宣传、软件下载、求职招聘、专业论坛、流行时尚、互动聊天和在线销售类型的网站a .启发构想：根据表中的提示，使用搜索引擎搜索相关类型的网站。 b .分组完成任务。 任务一企划个人网站，2同一主题类型的网站包含的专栏未必完全相同。 搜索并浏览网络上的个人网站，查看并总结其中包含的专栏。 a .启发构想：不同人建立的个人网站的专栏区分有很大差异，根据年龄层、工作职业、兴趣不同，专栏区分也不同。 在搜索

4、过程中考虑到这些差异，例如，电影明星的个人网站一定有电影迷会一栏，选手的个人网站包含荣誉奖一栏，b .小组执行任务。 任务是修订个人网站，任务： 1为自己设定个人网站，至少包含8个栏，参照教科书表1-1描绘网站的目录结构。 任务一企划个人站点，任务二制作站点，任务说明：使用网页编辑软件Dreamweaver 8制作“安静的我心的个人站点”。 任务分析：要创建本地站点，必须首先运行Dreamweaver 8，然后定义站点名称、确定是否使用服务器技术以及确定站点在本地计算机上的位置等。 第一个单元创建个人网站，自己动手： 1启动软件Dreamweaver8。 创建、Dreamweaver8的起始页

5、和2个网站。 任务2创建站点，总结任务：通过完成本任务，学习了软件的启动方法和创建站点的流程。 任务2创建一个站点，按倒数3:1创建一个新站点，名称为“pra1-1”，使用“详细信息”选项卡完成新进程，保存位置为“D:pra1-1”，其他残奥仪表保持缺省值即可。 a .启发构想：在创建新站点的过程中，使用“详细”标签完成新流程更直观，需要设定的残奥仪表与使用“基本”标签完成一致。 b .分组完成任务。、创建任务2站点，使用2搜索引擎查找和打开5个不同主题类型的网页，记录和分析这些URL，并将该URL中的协议类型、域名、目录结构等填写到表JYFS1-2中。 a .启发构想：使用浏览器阅览一个页面

6、时，在浏览器的地址栏上显示该页面的URL地址。 b .分组完成任务。 创建任务2站点，作业：使用ASP JavaScript服务器技术，暂时不设置远程信息和测试服务器，站点将创建一个以自己的名称命名并存储在D:pra1-2文件夹中的个人站点任务2创建站点，任务3管理站点，任务说明：使用网页编辑软件Dreamweaver 8实现站点的管理。 任务分析：站点管理功能包括新建、编辑、复制、删除、导出、导入等，Dreamweaver 8提供了适当的管理工具，可以直接执行这些操作，大大简化了站点管理。 第一个单元创建个人网站，自己插手：导出一个网站。任务3管理站点、站点名称、2导入站点。任务3管理站点，

7、注意：由于存在重复站点，导入的站点名称后会自动添加0。 复制3个站点的删除和编辑。、任务总结：通过完成本任务，学习了软件的启动方法和创建网站的流程。 任务3管理站点，一反三：列出新站点“pra1-5”，使用管理站点功能导出。 站点导出文件通过网络或可移动存储设备复制到另一台计算机，并使用管理站点功能导入。 1启发构想：站点创建过程中，可能需要更换计算机、导出站点，并将其部署到其他计算机上。 2分组完成任务。 任务三管理站点、任务： 1使用新站点“pra1-3”、管理站点功能复制站点“pra1-3”，编辑复制的站点名称“pra1-4”，然后删除站点“pra1-3”。 任务3管理站点，任务4创建站

8、点目录结构，任务说明：实现以前修订的“安静的我心的个人站点”目录结构，任务分析：要创建目录结构，需要在站点内创建相应的新web文件和文件夹。 在很多网页文件中有被称为主页的页面，他作为网站整体的入口，肯定和其他页面设定不同。 第一个单元创建个人网站，自己动手：启动Dreamweaver，打开“我心中安静的个人网站”。 2使用文件面板(如果看不见文件面板，该怎么办？ 创建网站主页： a .在“文件”面板中选择“安静的我心的个人网站”，单击鼠标右键，创建一个名为Index.html的新网页文件，如下图所示。 建立任务4网站的目录结构。 注意：无论是使用起始页还是使用“新建”菜单创建新的网页，都必须

9、保存到正确的目录位置。 因此，最好使用“文件”面板直接在站点中创建web文件和文件夹。 b .在“文件”面板中右键单击该文件名，然后选择“设置为首页”以与其他web文件区分开。 任务4制作站点目录结构，3在文件面板中双击打开主页文件，设定其页属性，任务4制作站点目录结构，如下图所示，在主页文件index.html的页属性中加入左标记任务4创建网站目录结构，创建5个首页图像文件夹，创建6个其他页面文件夹。 结果文件面板如下图所示。课堂讨论：主页文件名是否可以不使用index.html？如何将主页文件与其他网页文件区别开来？ 通常，将页面的左边距和上边距设置为0。 为什么？4单击4f12键在IE浏

10、览器中预览生成的网页。 任务4站点目录结构、空白主页、站点目录的管理方法、任务总结：完成上述任务后，我们学习了创建主页、设置页面属性、创建和管理站点目录。建立任务4网站的目录结构，列举一逆三。 根据以前学到的知识和专业知识，创建一个新网站，将该网站命名为“创建网页”，保存在“D:dreamweaver”文件夹中，然后使用“文件”面板创建主页文件“indeaver” 任务4创建网站的目录结构，任务：使用1文件菜单创建新的ASP JavaScript类型的动态页，将文件保存为D:/practice 1-1.asp，然后使用属性面板创建网页2创建新站点pra1-7，使用“文件”面板创建网页文件，命名

11、为practice1-2.html，选择该文件，然后使用下拉菜单中的重命名选项重命名newpage.html 任务4制作网站的目录结构，任务5使用代码制作网页，任务分析：网页用HTML (超文本标记语言)记述，HTML是制作网页的基础语言，英语的hypertext marku HTML文件也可以称为包含多个HTML标签、文本、脚本等的文本文件。 此外，还可以使用记事本等各种文本编辑软件进行创建。 任务说明：使用HTML语言创建空白页。 第一个设备创建个人网站，打开记事本，输入以下代码保存，输入文件名example.html，最后双击运行。 中的组合图层性质变更选项。 任务5使用代码创建网页，自

12、己动手1使用“记事本”创建空白的网页文件。 每个Html标签的功能是什么？ 2使用dreamweaver8的“代码”视图创建一个空web页文件，运行dreamweaver8，使用起始页创建一个新的空页，并在“文档”工具栏中选择“代码”视图时，在“文档”窗口中显示以下插图代码创建新的空网页时，将自动生成此代码。课堂讨论、任务5用代码制作网页，列举一反三：根据以前学到的知识和所掌握的专业知识，用word 2003制作新的空白文档，保存时将文件类型改为“网页(*.htm . HTML )名为“wordpage.HTML”，保存在d盘的根目录中，完成后使用Dreamweaver 8打开页面，显示在“代

13、码”视图中自动生成的HTML代码。 1启发构想：网页用HTML语言写成，扩展名作为HTML或Htm的文档保存。 任何文本编辑软件都可以制作。 分组讨论有什么样的文本编辑软件，引出Word。 想起使用Word创建文件的方法。 2分组完成任务。 使用任务5代码创建网页。 作业：使用Dreamweaver 8创建新的空文档，将“文档”窗口切换到分割视图，并显示“文档”面板的状态。 2标签是标签内部包含的功能标签，使用网络检索该标签的各种属性及其创建。 使用任务5代码创建网页。 相关知识：1常见的网页主题包括个人网站、企业宣传、软件下载、求职招聘、专业论坛、流行时尚、互动聊天、在线销售等。 2请注意，

14、网站题材的选择通常是a .主题简单明了。 网站的内容需要紧紧围绕主题。 那个不能包罗。 另外，并不是所有精彩的图像、动画、视频都能结合起来制作好的网站。b .尽量选择自己擅长的内容和喜欢的内容作为网站的题材。 例如，根据学过的专家、自己的兴趣、特长等，分析选择网站的题材。 这样的题材才有兴趣，兴趣是创造网站的原动力，有热情才能设计出优秀的作品。任务修订个人网站并创建三个目录结构的一些建议： a .不要将所有文档保存在根目录下。 文档管理可能会混乱。 b .根据栏的内容创建子目录。 c .在每个列目录下创建一个独立的images目录以保存图像资源。 d .目录的层次结构不要太深。 建议不要超过三

15、层。 e .目录中使用英文名称，不要使用中文名称。 f .不要使用过长的目录名称。任务一策划个人站点、相关知识：1打开Dreamweaver 8界面、起始页、面板组、菜单栏、任务二创建站点、2打开Dreamweaver 8起始页、最近编辑的网页文件。 然后选择创建不同类型的web文件。 选择Dreamwea-ver 8的现有示例，创建CSS样式表、框架集页面等web文件。 任务2制作站点、3制作站点的流程、URL的含义、任务2制作站点、4URL的含义URL是“统一资源定位符： URL”，一般来说，在访问某信息的位置和例如因特网的站点时URL是指定站点(site )或网页(Web Page )时

16、在互联网上使用的标准方法。 URL的语法结构：协议名：/主机名端口地址/存储目录/文件名。 其中，除协议名、主机名绝对需要以外，也可以不需要其他的侗像端口地址、保存目录等。 例如，http:/www.myH，任务2站点的制作，相关知识：1网页命名的规则：网页文件名通常使用小写英语，不使用空格。 最好不要使用特殊文字。 最好不要用中文。 2不同站点服务器的默认主页名称规则如下表所示，主页名称通常为index.html。 任务4创建web目录结构，任务4创建web目录结构，3dreamweaver8web设计界面，4页属性对话框介绍，“外观”选项：字体和背景属性设置，插入内容空白Dreamweav

17、er 8的默认边距不为0，因此通常在创建页面内容之前，首先将上边距和左边距设置为0。 链接选项：设置页面中超链接内容的样式。 标题选项：用于设置六种标题字体的默认样式。 “标题/编码”选项：设置网页标题和页面文本内容的编码类型。 “描图”选项：在页面中插入页面效果图，并在创建过程中随时进行描图对比。 任务4创建网站的目录结构，Dreamweaver 8“文件”面板上的站点目录结构在本地计算机的适当位置创建。 在本网站中，站点是“d3360mysite”文件夹，其他文件和文件夹全部在“d3360mysite”中创建。如果要从站点中删除文件或文件夹，请在“文件”面板中选择文件，键盘上的dees 如果