dreamweaver网页制作教学课件

《dreamweaver网页制作教学课件》由会员分享，可在线阅读，更多相关《dreamweaver网页制作教学课件（50页珍藏版）》请在金锄头文库上搜索。

1、目录上一页下一页退出Dreamweaver网页制作第一单元 创建个人网站主 编：王树平副主编：杜大志 李光宇 目录上一页下一页退出任务描述：本单元将通过一个个人网站的创建，学习网站 从规划到建立的流程，自己动手，打造属于自己的站点。任务 完成后如下图所示：第一单元 创建个人网站目录上一页下一页退出第一单元 创建个人网站任务一 规划个人网站任务二 创建站点 任务三 管理站点 任务四 创建网站目录结构 任务五 使用代码创建网页 目录上一页下一页退出任务一 规划个人网站 任务描述：了解网站的主题和规划流程，规划一个个人网 站。任务分析：制作一个个人网站之前需要进行系统的规划， 包括网站主题的确定、栏

2、目板块的划分及建立相应的目录结构 、选择合适的开发工具软件。第一单元 创建个人网站目录上一页下一页退出自己动手：1定位网站的主题和名称。常见的网页主题有哪些？网站主题的选择需要注意什么？2规划网站的栏目与目录结构。设计网站目录结构需要注意哪些问题？任务一 规划个人网站目录上一页下一页退出3选择网页制作软件其他常见网页编辑软件：微软的Frontpage：Microsoft Office办公软件成员之一，被 誉为最易于使用、功能强大的网页制作编辑入门工具。Netscape编辑器：Netscape Communicator和Netscape Navigator随带的网页制作软件，是一款简单的面向初学

3、者的网 页制作入门工具。CuteHTML：美国GlobalSCAPE开发的网页制作软件。HotDogPro4.54：美国软件公司Sausage推出的网页制作 软件，使用方便、功能十分强大，具有动画制作功能。现在的 最新版为“HotDog Professional 7”。Dreamweaver 8：一款集网站管理与网页制作于一身的“ 所见即所得”的网页制作软件任务一 规划个人网站目录上一页下一页退出任务总结：通过完成以上任务，学习了个人网站的规划方法。任务一 规划个人网站目录上一页下一页退出举一反三：1通过互联网浏览网站，总结所浏览网站的主题类型 ，至少找出企业宣传、软件下载、求职招聘、专业论坛

4、、 流行时尚、互动聊天和在线销售类型的网站各一个，记录 它们的网站名称填入表JYFS1-1中。A.启发思路： 根据表格内的提示，使用搜索引擎查找相关类型的网站。B.分组完成任务。任务一 规划个人网站目录上一页下一页退出2相同主题类型的网站所包含的栏目不一定完全相同， 搜索并浏览网络上的个人网站，看一看它们都包含哪些栏目并 进行汇总。A.启发思路： 不同的人制作的个人网站栏目划分会有很大的区别，不同 的年龄段，不同的工作职业，不同的兴趣爱好有不同的栏 目划分。在搜索过程中注意考虑这些区别，例如，电影明 星的个人网站中肯定会有影迷会这样的栏目，而运动员的 个人网站中一般包含荣誉奖项这样的栏目B.分

5、组完成任务。任务一 规划个人网站目录上一页下一页退出作业：1为自己设计一个个人网站，至少包含8个栏目，参照课 本表1-1画出站点的目录结构。任务一 规划个人网站目录上一页下一页退出任务二 创建站点任务描述：使用网页编辑软件Dreamweaver 8，创建“幽幽 我心的个人网站”站点。任务分析：创建本地站点首先需要运行Dreamweaver 8， 然后定义站点的名称、确定是否使用服务器技术、确定站点在 本地计算机上的位置等。第一单元 创建个人网站目录上一页下一页退出自己动手：1启动软件Dreamweaver8 。Dreamweaver8 界面Dreamweaver8的起始页2创建网站站点。创建站

6、点的流程任务二 创建站点目录上一页下一页退出任务总结：通过完成以本任务，学习了软件的启动方法以及创建网站 站点的流程。任务二 创建站点目录上一页下一页退出举一反三：1新建一个站点，名称为“pra1-1”，使用“高级”选项 卡完成新建过程，保存位置为“D:pra1-1”，其他参数保持 默认即可。A.启发思路： 在新建站点的过程中，使用“高级”选项卡完成新建过程更为 直观，需要进行设置的参数与使用“基本”选项卡完成这一操 作是一致的。B.分组完成任务。任务二 创建站点目录上一页下一页退出2使用搜索引擎搜索并打开5个不同主题类型的网页，记 录并分析它们的URL，将其URL中的协议类型、域名和目录结

7、构等内容填入表JYFS1-2中。A.启发思路： 使用浏览器浏览一个网页的时候，浏览器的地址栏中 显示出这个网页的URL地址。B.分组完成任务。任务二 创建站点目录上一页下一页退出作业：1新建一个以自己姓名命名的个人站点，该站点使用 “ASP JavaScript”服务器技术,暂不设置远程信息与测试服 务器，站点保存在“D:pra1-2”文件夹中。任务二 创建站点目录上一页下一页退出任务三 管理站点任务描述：使用网页编辑软件Dreamweaver 8，实现站点 的管理。任务分析：站点的管理功能包括新建、编辑、复制、删除 、导出和导入，在Dreamweaver 8中有相应的管理工具可以直 接完成这

8、些操作，大大简化了站点的管理工作。第一单元 创建个人网站目录上一页下一页退出自己动手：1导出站点。任务三 管理站点站点名称目录上一页下一页退出2导入站点。任务三 管理站点注意： 因为有 重名的 站点， 所以导 入的站 点名称 后面自 动加0 。 目录上一页下一页退出3复制删除与编辑站点。任务总结：通过完成以本任务，学习了软件的启动方法以及创建网站 站点的流程。任务三 管理站点目录上一页下一页退出举一反三：新建站点“pra1-5”，使用管理站点功能将其导出。将站 点导出文件通过网络或移动存储设备拷贝到其他计算机中 ，使用管理站点功能将其导入。1启发思路： 在站点制作过程中，有时需要更换计算机，导

9、出站点并导 入到其他计算机中。2分组完成任务。任务三 管理站点目录上一页下一页退出作业：1新建站点“pra1-3”，使用管理站点功能复制站点“pra1- 3”，编辑复制的站点名称为“pra1-4”，之后删除站点“pra1- 3”。任务三 管理站点目录上一页下一页退出任务四 创建网站目录结构 任务描述：实现先前规划的“幽幽我心的个人网站”目录结 构任务分析：创建目录结构需要在站点内新建相应的网页文 件及文件夹。在众多的网页文件中有一个页面叫做首页，他作为整个网 站的入口，必然要与其他的页面在设置上有所区别。第一单元 创建个人网站目录上一页下一页退出自己动手：1启动Dreamweaver，打开“幽

10、幽我心的个人网站”。2使用文件面板（看不到文件面板怎么办？）创建网站首 页：A.如下页图所示，在文件面板中，选择“幽幽我心的个人网 站”右键单击，新建一个网页文件，命名为Index.html。任务四 创建网站目录结构注意：不论是使用起始页还是使用“新建”菜单创建新网 页，都需要保存到准确的目录位置。所以建议使用“文件”面 板直接在站点内新建网页文件及文件夹。 B. 在文件面板中该文件名上右击鼠标，选择“设成首页 ”,以区别于其他网页文件。目录上一页下一页退出任务四 创建网站目录结构创建网页时网页命名有什么要求？首页文件名命名有什么要求？目录上一页下一页退出3在文件面板双击打开首页文件、设置其页

11、面属性 任务四 创建网站目录结构Dreamweaver 8界面各部分的功能是什么？页面 属性首页 名称目录上一页下一页退出如下图所示，在首页文件index.html的页面属性中，设置左 边距和上边距为0像素。 任务四 创建网站目录结构各选项的功能什么？目录上一页下一页退出5新建首页图像文件夹 6新建其他页面文件夹。结果文件面板如下图所示。 课堂讨论：首页文件名称可以不用index.html吗？怎样把首页文件与其 他网页文件区分开来？通常把页面的左边距和上边距设置为0 ，为什么？4单击“F12”键，在IE浏览器中预览生成的网页。 任务四 创建网站目录结构空白首页怎样管理站点目录？目录上一页下一页

12、退出任务总结：通过完成以上任务，学习了创建首页、设置页面属性、创 建并管理站点目录。 任务四 创建网站目录结构目录上一页下一页退出举一反三：依据前面学习的知识与掌握的专业技能，新建一个站点， 网站命名为“网页制作”，存放在“D:dreamweaver”文件夹中， 使用“文件”面板新建首页文件“index.html”和首页图像文件夹 “images”，在“我的电脑”中查看相应目录的变化。 1启发思路： 注意要把网页设为首页2分组完成任务。任务四 创建网站目录结构目录上一页下一页退出作业：1使用“文件“菜单新建“ASP JavaScript“类型的动态页， 文件保存为“D:/ practice 1

13、-1.asp“，使用属性面板修改网页标题 为“ASP网页“。2新建站点“pra1-7“，使用“文件“面板创建一个网页文件 ，命名为“practice1-2.html“，选中该文件后使用 下拉菜单中的 重命名选项，改名为“newpage.html“，同样使用 下拉菜单中的 选项预览页面后删除该页面。任务四 创建网站目录结构目录上一页下一页退出任务五 使用代码创建网页任务分析：网页是用HTML（超文本标识语言）记述的， HTML是一种编写网页的基础语言，是英文HyperText Markup Language 的缩写，中文意思是“超文本标识语言”。HTML文件 也可以说是一个文本文件，它包含了一些

14、HTML标签、文本、 脚本等，而且可以使用记事本等多种文本编辑软件进行编写。 任务描述：使用HTML语言创建一个空白页面。 第一单元 创建个人网站目录上一页下一页退出打开记事本输入下列代码并保存，文件名example.html， 最后双击运行。任务五 使用代码创建网页自己动手1使用“记事本”创建一个空白网页文件 其中各 Html标签 的功能是 什么？目录上一页下一页退出2使用Dreamweaver 8“代码”视图创建一个空白网页文件 运行Dreamweaver 8，使用起始页新建一个空白页面，在“ 文档”工具栏中选择“代码”视图，“文档”窗口将显示如下图代码 ，其中包含文档类型的说明文字和页面

15、的编码方式与标题。 任务五 使用代码创建网页此代码会 在新建空 白网页时 自动生成 。目录上一页下一页退出课堂讨论：分组讨论使用代码创建网页和使用Dreamweaver 8创建网 页各有什么优缺点。任务五 使用代码创建网页目录上一页下一页退出举一反三：依据前面学习的知识与掌握的专业技能，使用word 2003 新建一个空白文档，保存时选择文件类型为“网页（*.htm； *.html）”命名为“wordpage.html”，保存在D盘根目录下，完成 后使用Dreamweaver 8打开该页面，在“代码”视图下查看其自 动生成的HTML代码。 1启发思路： 网页是由HTML语言编写的，保存为扩展名

16、为Html或Htm 的文本文件。任何一个文本编辑软件都可以编写。分组讨论有 哪些文本编辑软件，引出Word。回忆如何使用Word创建文件 。2分组完成任务。任务五 使用代码创建网页目录上一页下一页退出作业：1使用Dreamweaver 8新建一个空白文档，将“文档”窗口 切换到“拆分”视图，查看“文档”面板的状态。2标签是标签内部包含的一个功能标签， 使用网络查找该标签的各种属性及其作。 任务五 使用代码创建网页相关知识： 1常见的网页主题有：个人站点、企业宣传、软件下载、 求职招聘、专业论坛、流行时尚、互动聊天和在线销售等。2对网站题材的选择，通常要注意以下两点：A.主题要简单明确。网站的内容要紧密地围绕主题， 它不可能包罗万象，也并不是把所有精彩的图像、动画、 视频放在一起，就能做出好的网站，那样的结果往往会让 你的网站没有特色，而且也要耗费很多的精力去维护。B.尽量选择自己擅长或者喜欢的内容作为网站的题材 。比如根据所学的专业，自己的爱好、特长等去分析选择 网站题材