tceic.com
简单学习网 让学习变简单
当前位置:首页 >> 其它课程 >>

Dreamweaver网页制作课件 第一单元


Dreamweaver网页制作
主 编:王树平

副主编:杜大志 李光宇
制作者:杜大志 李光宇

第一单元 创建个人网站

目录

上一页

下一页

退出

第一单元 创建个人网站 任务描述:本单元将通过一个个人网站

的创建,学习网站 从规划到建立的流程,自己动手,打造属于自己的站点。任务 完成后如下图所示:

目录

上一页

下一页

退出

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

目录

上一页

下一页

退出

第一单元 创建个人网站

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

目录

上一页

下一页

退出

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

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

主题及名称

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

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

目录

上一页

下一页

退出

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

其他常见网页编辑软件: 微软的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.启动软件Dreamweaver CS5 。

Dreamweaver CS5界面 Dreamweaver CS5的起始页

2.创建网站站点。

创建站点的流程

目录

上一页

下一页

退出

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

目录

上一页

下一页

退出

任务二 创建站点

举一反三:
1.新建一个站点,名称为“pra1-1”,保存位置为 “D:\pra1-1”,其他参数保持默认即可。

分组完成任务。

目录

上一页

下一页

退出

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

目录

上一页

下一页

退出

任务二 创建站点 作业: 1.新建一个站点,名称为“pra1-2”,保存位置为 “D:\pra1-2”。在 “高级设置”的“本地信息”中设置默认图 像文件夹为“D:\pra1-2\images”,要求使用“浏览文件夹”方 法完成。

目录

上一页

下一页

退出

第一单元 创建个人网站

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

目录

上一页

下一页

退出

任务三 管理站点 自己动手: 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",同样使用下拉菜单中的选 项预览页面后删除该页面。

目录

上一页

下一页

退出

任务一 规划个人网站 相关知识: 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的面板组中包含许多面板,每个面板都可以展开或折叠,关闭 或打开面板可以在“窗口”菜单进行。


推荐相关:

2015网页设计与制作DreamWeaver教案:第十二讲使用模板和库制作网页

2015网页设计与制作DreamWeaver教案:第十二讲使用模板和库制作网页_其它_高等教育_...D. 插入/1×3 表格 T1,宽 902,高 84,单元格间距 4,填充 0,边框 0。 ...


Dreamweaver网页制作教案

Dreamweaver网页制作教案_文学_高等教育_教育专区。认识 Dreamweaver 一、学习目的 了解 Dreamweaver,学会利用 Dreamweaver 制作网页。 二、学习内容 Dreamweaver 的基本...


dreamweaver网页制作教案

dreamweaver 网页制作教案 (Dreamweaver MX)一、Dreamweaver MX 中文版建站初步 建立一个网站,首先要在本地机器上做好网站,再传到网上的虚拟空间上。现在免费的 网页...


Dreamweaver网页制作教案

Dreamweaver网页制作教案_计算机硬件及网络_IT/计算机_专业资料。理解Dreamweaver,学会应用Dreamweaver制造网页。认识Dreamweaver 一、学习目的 理解 Dreamweaver,学会应用 ...


第一单元 网站设计与制作

4页 1下载券 Dreamweaver网页制作课件... 43页 免费 第一单元 网页制作入门 ...第一单元 网站设计与制作 第 1 课 创建站点 本课学习目标:1、知识目标:了解...


网页制作教案电子版

网页制作教案电子版_院校资料_高等教育_教育专区。校历 教学内容 第一章《网页...Dreamweaver CS3 网页浏 览的基本原理和网页制作技术的发展,知道目前网页制作常用...