当前位置:首页 >> 其它课程 >>

Dreamweaver网页制作教学课件


Dreamweaver网页制作
主 编:王树平

副主编:杜大志 李光宇

第一单元 创建个人网站

目录

上一页

下一页

退出

第一单元 创建个人网站 任务描述:本单元将通过一个个人网站的创建,学习网站 从规划到建立的流

程,自己动手,打造属于自己的站点。任务 完成后如下图所示:

目录

上一页

下一页

退出

第一单元 创建个人网站
任务一 规划个人网站 任务二 创建站点 任务三 管理站点 任务四 创建网站目录结构 任务五 使用代码创建网页

目录

上一页

下一页

退出

第一单元 创建个人网站

任务一 规划个人网站
任务描述:了解网站的主题和规划流程,规划一个个人网 站。 任务分析:制作一个个人网站之前需要进行系统的规划, 包括网站主题的确定、栏目板块的划分及建立相应的目录结构、 选择合适的开发工具软件。

目录

上一页

下一页

退出

任务一 规划个人网站 自己动手: 1.定位网站的主题和名称。

常见的网页主题有哪些? 网站主题的选择需要注意什么?

2.规划网站的栏目与目录结构。

设计网站目录结构需要注意哪些问题?

目录

上一页

下一页

退出

任务一 规划个人网站 3.选择网页制作软件 Dreamweaver 8:一款集网站管理与网页制作于一身的 “所见即所得”的网页制作软件

其他常见网页编辑软件: 微软的Frontpage:Microsoft Office办公软件成员之一,被 誉为最易于使用、功能强大的网页制作编辑入门工具。 Netscape编辑器:Netscape Communicator和Netscape Navigator随带的网页制作软件,是一款简单的面向初学者的网 页制作入门工具。 CuteHTML:美国GlobalSCAPE开发的网页制作软件。 HotDogPro4.54:美国软件公司Sausage推出的网页制作 软件,使用方便、功能十分强大,具有动画制作功能。现在的 最新版为“HotDog Professional 7”。
目录 上一页 下一页 退出

任务一 规划个人网站 任务总结: 通过完成以上任务,学习了个人网站的规划方法。

目录

上一页

下一页

退出

任务一 规划个人网站 举一反三: 1.通过互联网浏览网站,总结所浏览网站的主题类型,至 少找出企业宣传、软件下载、求职招聘、专业论坛、流行时尚、 互动聊天和在线销售类型的网站各一个,记录它们的网站名称 填入表JYFS1-1中。

A.启发思路: 根据表格内的提示,使用搜索引擎查找相关类型的网站。
B.分组完成任务。

目录

上一页

下一页

退出

任务一 规划个人网站 2.相同主题类型的网站所包含的栏目不一定完全相同, 搜索并浏览网络上的个人网站,看一看它们都包含哪些栏目并 进行汇总。 A.启发思路: 不同的人制作的个人网站栏目划分会有很大的区别,不同的年 龄段,不同的工作职业,不同的兴趣爱好有不同的栏目划分。 在搜索过程中注意考虑这些区别,例如,电影明星的个人网站 中肯定会有影迷会这样的栏目,而运动员的个人网站中一般包 含荣誉奖项这样的栏目 B.分组完成任务。

目录

上一页

下一页

退出

任务一 规划个人网站 作业: 1.为自己设计一个个人网站,至少包含8个栏目,参照课 本表1-1画出站点的目录结构。

目录

上一页

下一页

退出

第一单元 创建个人网站

任务二 创建站点
任务描述:使用网页编辑软件Dreamweaver 8,创建“幽 幽我心的个人网站”站点。 任务分析:创建本地站点首先需要运行Dreamweaver 8, 然后定义站点的名称、确定是否使用服务器技术、确定站点在 本地计算机上的位置等。

目录

上一页

下一页

退出

任务二 创建站点 自己动手: 1.启动软件Dreamweaver8 。

Dreamweaver8 界面 Dreamweaver8的起始页

2.创建网站站点。

创建站点的流程

目录

上一页

下一页

退出

任务二 创建站点 任务总结: 通过完成以本任务,学习了软件的启动方法以及创建网站 站点的流程。

目录

上一页

下一页

退出

任务二 创建站点 举一反三: 1.新建一个站点,名称为“pra1-1”,使用“高级”选项 卡完成新建过程,保存位置为“D:\pra1-1”,其他参数保持默 认即可。 A.启发思路: 在新建站点的过程中,使用“高级”选项卡完成新建过程更为 直观,需要进行设置的参数与使用“基本”选项卡完成这一操 作是一致的。 B.分组完成任务。

目录

上一页

下一页

退出

任务二 创建站点 2.使用搜索引擎搜索并打开5个不同主题类型的网页,记 录并分析它们的URL,将其URL中的协议类型、域名和目录结 构等内容填入表JYFS1-2中。 A.启发思路: 使用浏览器浏览一个网页的时候,浏览器的地址栏中显示 出这个网页的URL地址。 B.分组完成任务。

目录

上一页

下一页

退出

任务二 创建站点 作业: 1.新建一个以自己姓名命名的个人站点,该站点使用 “ASP JavaScript”服务器技术,暂不设置远程信息与测试 服务器,站点保存在“D:\pra1-2”文件夹中。

目录

上一页

下一页

退出

第一单元 创建个人网站

任务三 管理站点
任务描述:使用网页编辑软件Dreamweaver 8,实现站点 的管理。 任务分析:站点的管理功能包括新建、编辑、复制、删除、 导出和导入,在Dreamweaver 8中有相应的管理工具可以直接 完成这些操作,大大简化了站点的管理工作。

目录

上一页

下一页

退出

任务三 管理站点 自己动手: 1.导出站点。
站点名称

目录

上一页

下一页

退出

任务三 管理站点 2.导入站点。

注意: 因为有 重名的 站点, 所以导 入的站 点名称 后面自 动加0。

目录

上一页

下一页

退出

任务三 管理站点 3.复制删除与编辑站点。 任务总结: 通过完成以本任务,学习了软件的启动方法以及创建网站 站点的流程。

目录

上一页

下一页

退出

任务三 管理站点 举一反三: 新建站点“pra1-5”,使用管理站点功能将其导出。将站点 导出文件通过网络或移动存储设备拷贝到其他计算机中,使用 管理站点功能将其导入。 1.启发思路: 在站点制作过程中,有时需要更换计算机,导出站点并导 入到其他计算机中。 2.分组完成任务。

目录

上一页

下一页

退出

任务三 管理站点 作业: 1.新建站点“pra1-3”,使用管理站点功能复制站点“pra13”,编辑复制的站点名称为“pra1-4”,之后删除站点“pra13”。

目录

上一页

下一页

退出

第一单元 创建个人网站

任务四 创建网站目录结构
任务描述:实现先前规划的“幽幽我心的个人网站”目录 结构 任务分析:创建目录结构需要在站点内新建相应的网页文 件及文件夹。 在众多的网页文件中有一个页面叫做首页,他作为整个网 站的入口,必然要与其他的页面在设置上有所区别。

目录

上一页

下一页

退出

任务四 创建网站目录结构 自己动手: 1.启动Dreamweaver,打开“幽幽我心的个人网站”。 2.使用文件面板(看不到文件面板怎么办?)创建网站首 页: A.如下页图所示,在文件面板中,选择“幽幽我心的个人网 站”右键单击,新建一个网页文件,命名为Index.html。 注意:不论是使用起始页还是使用“新建”菜单创建新网 页,都需要保存到准确的目录位置。所以建议使用“文件”面 板直接在站点内新建网页文件及文件夹。

B. 在文件面板中该文件名上右击鼠标,选择“设成首 页”,以区别于其他网页文件。
目录 上一页 下一页 退出

任务四 创建网站目录结构

创建网页时网页命名有什么要求? 首页文件名命名有什么要求?

目录

上一页

下一页

退出

任务四 创建网站目录结构 3.在文件面板双击打开首页文件、设置其页面属性

首页 名称

页面 属性

Dreamweaver 8界面各部分的功能是什么?
目录 上一页 下一页 退出

任务四 创建网站目录结构 如下图所示,在首页文件index.html的页面属性中,设置左 边距和上边距为0像素。

各选项的功能什么?
目录 上一页 下一页 退出

任务四 创建网站目录结构 4.单击“F12”键,在IE浏览器中预览生成的网页。 空白首页 5.新建首页图像文件夹 6.新建其他页面文件夹。结果文件面板如下图所示。

怎样管理站点目录?

课堂讨论:

首页文件名称可以不用index.html吗?怎样把首页文件与其 他网页文件区分开来?通常把页面的左边距和上边距设置为0, 为什么?
目录 上一页 下一页 退出

任务四 创建网站目录结构 任务总结: 通过完成以上任务,学习了创建首页、设置页面属性、创 建并管理站点目录。

目录

上一页

下一页

退出

任务四 创建网站目录结构 举一反三: 依据前面学习的知识与掌握的专业技能,新建一个站点, 网站命名为“网页制作”,存放在“D:\dreamweaver”文件夹 中,使用“文件”面板新建首页文件“index.html”和首页图像 文件夹“images”,在“我的电脑”中查看相应目录的变化。

1.启发思路: 注意要把网页设为首页
2.分组完成任务。

目录

上一页

下一页

退出

任务四 创建网站目录结构 作业: 1.使用"文件"菜单新建"ASP JavaScript"类型的动态页, 文件保存为"D:/ practice 1-1.asp",使用属性面板修改网页标题 为"ASP网页"。 2.新建站点"pra1-7",使用"文件"面板创建一个网页文件, 命名为"practice1-2.html",选中该文件后使用 下拉菜单中的重 命名选项,改名为"newpage.html",同样使用 下拉菜单中的选 项预览页面后删除该页面。

目录

上一页

下一页

退出

第一单元 创建个人网站

任务五 使用代码创建网页
任务描述:使用HTML语言创建一个空白页面。

任务分析:网页是用HTML(超文本标识语言)记述的, HTML是一种编写网页的基础语言,是英文HyperText Markup Language 的缩写,中文意思是“超文本标识语言”。HTML文 件也可以说是一个文本文件,它包含了一些HTML标签、文本、 脚本等,而且可以使用记事本等多种文本编辑软件进行编写。

目录

上一页

下一页

退出

任务五 使用代码创建网页

自己动手
1.使用“记事本”创建一个空白网页 文件打开记事本输入下列代码并保存,文件名example.html, 最后双击运行。 <html> <head> …… </head> <body> …… </body> </html>
目录 上一页 下一页 退出

其中各 Html标签 的功能是 什么?

任务五 使用代码创建网页

2.使用Dreamweaver 8“代码”视图创建一个空白网页文件 运行Dreamweaver 8,使用起始页新建一个空白页面,在 “文档”工具栏中选择“代码”视图,“文档”窗口将显示如 下图代码,其中包含文档类型的说明文字和页面的编码方式与 标题。

此代码会 在新建空 白网页时 自动生成。

目录

上一页

下一页

退出

任务五 使用代码创建网页 课堂讨论: 分组讨论使用代码创建网页和使用Dreamweaver 8创建网 页各有什么优缺点。

目录

上一页

下一页

退出

任务五 使用代码创建网页 举一反三:

依据前面学习的知识与掌握的专业技能,使用word 2003 新建一个空白文档,保存时选择文件类型为“网页(*.htm; *.html)”命名为“wordpage.html”,保存在D盘根目录下,完 成后使用Dreamweaver 8打开该页面,在“代码”视图下查看 其自动生成的HTML代码。
1.启发思路:

网页是由HTML语言编写的,保存为扩展名为Html或Htm 的文本文件。任何一个文本编辑软件都可以编写。分组讨论有 哪些文本编辑软件,引出Word。回忆如何使用Word创建文件。 2.分组完成任务。
目录 上一页 下一页 退出

任务五 使用代码创建网页 作业:

1.使用Dreamweaver 8新建一个空白文档,将“文档”窗 口切换到“拆分”视图,查看“文档”面板的状态。
2.<meta>标签是<head>标签内部包含的一个功能标签, 使用网络查找该标签的各种属性及其作。

目录

上一页

下一页

退出

任务一 规划个人网站 相关知识: 1.常见的网页主题有:个人站点、企业宣传、软件下载、 求职招聘、专业论坛、流行时尚、互动聊天和在线销售等。

2.对网站题材的选择,通常要注意以下两点: A.主题要简单明确。网站的内容要紧密地围绕主题, 它不 可能包罗万象,也并不是把所有精彩的图像、动画、视频放在 一起,就能做出好的网站,那样的结果往往会让你的网站没有 特色,而且也要耗费很多的精力去维护。 B.尽量选择自己擅长或者喜欢的内容作为网站的题材。比 如根据所学的专业,自己的爱好、特长等去分析选择网站题材。 这样的题材做起来才会有兴趣,兴趣是制作网站的动力,有热 情才能设计出优秀的作品。

任务一 规划个人网站 3.建立目录结构的一些建议: A.不要将所有文件都存放在根目录下,会造成文件管理混 乱。 B.按栏目内容建立子目录。 C.在每个栏目目录下都建立独立的images目录保存图像资

源。
D.目录的层次不要太深,建议不要超过3层。 E.目录使用英文名称,不要使用中文名称。 F.不要使用过长的目录名称。

任务二 创建站点 相关知识: 1.Dreamweaver8 界面

菜 单 栏

面 板 组

起 始 页

任务二 创建站点 2.Dreamweaver8 起始页
选择创建 各种类型 的网页文 件。 打开最 近编辑 过 的网 页文件 。 选 用 Dreamwe a-ver 8中 已有的范 例 创 建 CSS 样 式 表、框架 集页面等 网页文件。

任务二 创建站点 3.创建站点的流程

URL的含义

任务二 创建站点 4.URL的含义 URL就是“统一资源定位器(Uniform Resource Locator : URL)”,通俗点说,它用来指出某一项信息所在位置及存取 方式。比如要上网访问某个网站,在IE浏览器的地址栏中所输 入的就是URL。URL是Internet上用来指定一个站点(site)或 一个网页(Web Page)的标准方式。 URL的语法结构:协议名称://主机名称[端口地址/存放目 录/文件名称]。其中除了协议名称及主机名称是绝对必须有的 外,其余像端口地址、存放目录等都可以不要。例如 http://www.myHost.com/mySite,其中http为协议名称, www.myHost.com为主机名称即域名,mySite为存放目录,而 网页的文件名被省略了。

任务四 创建网站目录结构 相关知识: 1.网页命名的规则:网页文件名通常使用小写英文,不能 使用空格,最好不要使用特殊字符,不用中文。

2.不同站点服务器默认首页名称规则如下表,通常首页命 名为index.html。
服务器类型 Windows Server (NT 2000 2003 XP) Unix Linux 默认的首页名称 index.htm index.html default.htm default.asp index.htm index.html

任务四 创建网站目录结构 3.Dreamweaver8网页设计界面介绍
菜单栏 文档窗口

插 入 栏

面 板 组

文 档 工 具 栏

文 件 面 板

标签选择器

状态栏

属性面板

任务四 创建网站目录结构 4.页面属性对话框介绍

“外观”选项:用于设置页面的总体外观,包括字体与 背景属性的设置,以及插入内容的页边距。在Dreamweaver 8 中默认页边距不是0,所以通常在页面内容制作前,首先把上 边距和左边距设为0。 “链接”选项:用于设置页面内的超级链接内容的样式。 “标题”选项:用于设置六种标题字体的默认样式。 “标题/编码”选项:用于设置网页的标题和页面文本 内容的编码类型。 “跟踪图像”选项:把页面效果图插入到页面中来,在 制作过程中随时进行跟踪对比。

任务四 创建网站目录结构 5.管理站点目录 Dreamweaver 8“文件”面板上的站点目录结构建立在本 地计算机的相应位置,就本网站而言,站点是“D:\mysite” 文件夹,其他文件和文件夹全部建立在“D:\mysite”文件夹 中。 如果要删除站点中的文件或文件夹,可以在“文件”面 板选中它后,用键盘上的Delete键实现。如果在“文件”面 板删除了站点中的文件或文件夹,实际上是删除了硬盘中相 应位置的文件和文件夹。但是如果删除站点,硬盘中相应位 置的文件和文件夹并不会被删除。 在站点中对文件或文件夹的删除、复制、剪切、粘贴、 重命名等操作,都可以通过单击鼠标右键在“编辑”选项中 实现。注意命名网页文件时必须加上扩展名。

任务四 创建网站目录结构
“插入”栏

“插入”栏包含多种可插入的页面元素(如表格、层和图像等)的按钮,当鼠 标指针指向一个按钮时,会出现按扭的名称或功能提示。这些按钮又分为几种类别, 可以在“插入”栏的左侧进行类别切换。下面对“插入”栏进行简单的说明,具体 使用方法在以后的内容中介绍。
“常用”类别:用于插入最常用的对象,例如图像和表格。 “布局”类别:用于插入表格、div标签、层和框架。还可以在“标准”(默 认)、“扩展表格”和“布局”三个表格视图中进行切换。 “表单”类别:用于插入表单和表单元素。 “文本”类别:用于插入各种文本格式设置标签和列表格式设置标签,例如b、 em、p、h1和ul。 “HTML”类别:用于插入水平线、头内容、表格、框架和脚本的HTML标签。 “应用程序”类别:用于插入动态元素,如记录集、重复区域以及记录插入和 更新表单。 “Flash元素”类别:用于插入Flash元素。 “收藏”类别:用于将“插入”栏中最常用的按钮分组和组织到某常用位置。

任务四 创建网站目录结构
“文档”窗口
“文档”窗口显示当前打开的文档,分为“代码”视图、“设计”视图和同时 显示“代码”视图和“设计”视图的“拆分”视图三种视图模式。 “文档”工具栏

“文档”工具栏左端是快速切换“文档”窗口三种视图模式的选项按钮,然后 是一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。
“状态”栏 “状态”栏提供与正在编辑的文档有关的信息和工具。

“标签选择器”
位于“状态栏”上,通过它可以选择各种页面元素。 “属性”面板 “属性”面板用于查看和更改所选对象或文本的各种属性。每种对象具有不同的 属性。 面板组 Dreamweaver 8的面板组中包含许多面板,每个面板都可以展开或折叠,关闭 或打开面板可以在“窗口”菜单进行。

任务五 使用代码创建网页 相关知识: Html标签的功能:
<html></html>:<html>标签用于HTML代码的最前边,用来标识HTML代码 的开始。而</html>标签恰恰相反,它放在HTML代码的最后边,用来标识HTML代 码的结束。 <head></head>:<head>和</head>构成HTML代码的开头部分,在此标签之 间可以使用显示网页标题的标签<title></title>、<meta></meta>等,这些标签都是 描述HTML代码相关信息的标签,<head></head>标签之间的内容不会在浏览器的 窗口内显示出来。 <body></body>:<body></body>标签中的内容是HTML代码的主体部分,在 此标签之间可包含<p>、</p>、<h1>、</h1>、<br>、<hr>等等众多的标签,它们 所定义的文本、图像等将会在浏览器的窗口内显示出来


相关文章:
网页设计课件
网页设计课件_工学_高等教育_教育专区。主讲教师:史...主讲教师:史文崇(副教授,硕士, 计算机应用技术教学...任何 Dreamweaver 软件与网页制作的相关书籍 上机安排...
Dreamweaver网页制作教案
搜试试 3 帮助 全部 DOC PPT TXT PDF XLS 百度文库 教育专区 高等教育 文学Dreamweaver网页制作教案_文学_高等教育_教育专区 暂无评价|0人阅读|0次下载|举报...
dreamweaver网页制作教案
dreamweaver 网页制作教案 (Dreamweaver MX)一、Dreamweaver MX 中文版建站初步 建立一个网站,首先要在本地机器上做好网站,再传到网上的虚拟空间上。现在免费的 网页...
Dreamweaver8网页课件制作教程
Dreamweaver8网页课件制作教程_工学_高等教育_教育专区 暂无评价|0人阅读|0次下载|举报文档 Dreamweaver8网页课件制作教程_工学_高等教育_教育专区。共同学习...
东财2015年9月课程考试《网页制作:DreamWeaver网页制作》实验实践考核课程题目发布
三、DreamWeaver 作品参考实例 可以参考《网页制作:DreamWeaver 网页制作课件中的“单元十一 综合案例分析坛” 及范文。 四、DreamWeaver 设计需要提交的文档及要求 ...
网页制作教案电子版
教学方法 任务驱动法 作业布置 本章主要通过三个活动的开展,让学生了解 Dreamweaver CS3 网页浏 览的基本原理和网页制作技术的发展,知道目前网页制作常用的几种工具...
2015春东财《网页制作:DreamWeaver网页制作》在线作业三
搜试试 3 帮助 全部 DOC PPT TXT PDF XLS 百度文库 教育专区 高等教育 教育...2015春东财《网页制作:DreamWeaver网页制作》在线作业三_教育学_高等教育_教育专区...
《dreamweaver网页设计与制作》课程标准
搜试试 3 帮助 全部 DOC PPT TXT PDF XLS 百度文库 教育专区 高等教育 工...网站的策划和设计 3.Dreamweaver 介绍 课题二 制作简单网页(4 学时) 教学要求...
网页设计教学教案
网页设计教学教案_中职中专_职业教育_教育专区。《Dreamweaver CS5 网页设计教程...内容大纲:具体可结合本章的 PPT 课件进行配合讲解。 1.1 规划“千履千寻公司...
更多相关标签:
网页制作ppt教学课件 | dreamweaver教学课件 | dreamweaver网页制作 | dreamweaver8制作网页 | 如何制作教学课件 | 教学课件制作 | 怎样制作教学课件 | 多媒体教学课件的制作 |