项目一创建你的第一个网站

1、项目一项目一 创建你的第一个网站创建你的第一个网站 第 2 页 中小型网站建设与管理中小型网站建设与管理 n 项目简介项目简介 Dreamweaver CS3提供了强大的网页制作功能，所见即所得的提供了强大的网页制作功能，所见即所得的 操作界面使那些掌握了文档编辑能力的人可以轻松完成一张网页的制操作界面使那些掌握了文档编辑能力的人可以轻松完成一张网页的制 作。建立站点是制作网页的第一步，要学会制作网页，掌握站点建立作。建立站点是制作网页的第一步，要学会制作网页，掌握站点建立 和编辑的方法尤为重要，所有的网页都是基于站点建立的。和编辑的方法尤为重要，所有的网页都是基于站点建立的。 通过鉴赏各类网

2、页和网站，领略不同网站的布局与风格，然后动通过鉴赏各类网页和网站，领略不同网站的布局与风格，然后动 手建立一个简单的手建立一个简单的“个人网站个人网站”的站点，让学生们了解的站点，让学生们了解 Dreamweaver CS3软件的操作界面；并且通过具体的实例让学生掌软件的操作界面；并且通过具体的实例让学生掌 握站点素材及其制作工具的有关知识，合理规划网站，掌握站点的建握站点素材及其制作工具的有关知识，合理规划网站，掌握站点的建 立立。 第 3 页 中小型网站建设与管理中小型网站建设与管理 n 项目目标项目目标 本项目以规划本项目以规划“我的个人网站我的个人网站”为例，让学生了解为例，让学生了解

3、 Dreamweaver CS3的界面、掌握软件的基本操作方法，了解网页设的界面、掌握软件的基本操作方法，了解网页设 计的基本概念，掌握站点的建立和管理，能够根据要求建立和管理站计的基本概念，掌握站点的建立和管理，能够根据要求建立和管理站 点；掌握简单网页制作最基本的步骤点；掌握简单网页制作最基本的步骤。 第 4 页 中小型网站建设与管理中小型网站建设与管理 n 工作任务工作任务 n 鉴赏网页鉴赏网页 n 初识初识Dreamweaver CS3 n 建立与管理站点建立与管理站点 第 5 页 中小型网站建设与管理中小型网站建设与管理 模块一模块一 鉴赏网页鉴赏网页 学习目标学习目标 鉴赏各种不同

4、的网页，从中感受不同类别的网站的风格与特色鉴赏各种不同的网页，从中感受不同类别的网站的风格与特色 。从而了解网站发展的历史与现状，并熟悉了解一些网站的相关基础。从而了解网站发展的历史与现状，并熟悉了解一些网站的相关基础 知识知识。 第 6 页 中小型网站建设与管理中小型网站建设与管理 任务一：鉴赏网页；任务一：鉴赏网页； 1、网站与网页、网站与网页 （1）网页是）网页是Internet中最基本的信息单位，是构成网站的基本元素，是中最基本的信息单位，是构成网站的基本元素，是 把文字、图形、声音及动画等各种多媒体信息相互链接起来的一种信把文字、图形、声音及动画等各种多媒体信息相互链接起来的一种信

5、息表达方式，是承载各种网站应用的平台。通常情况下，网页中有文息表达方式，是承载各种网站应用的平台。通常情况下，网页中有文 字和图像等基本信息，有些网页中还有声音、视频和动画等多媒体内字和图像等基本信息，有些网页中还有声音、视频和动画等多媒体内 容。网页一般由网站容。网页一般由网站LOGO、广告栏、导航栏和信息栏等部分组成、广告栏、导航栏和信息栏等部分组成。 在访问一个网站时，首先映入眼帘的网页一般称为网站的首页。在访问一个网站时，首先映入眼帘的网页一般称为网站的首页。 首页只是网页的开场页，单击首页上的文字或图片，即可打开网站的首页只是网页的开场页，单击首页上的文字或图片，即可打开网站的 主页

6、，而首页也随之关闭。主页，而首页也随之关闭。 第 7 页 中小型网站建设与管理中小型网站建设与管理 n 首页首页 第 8 页 中小型网站建设与管理中小型网站建设与管理 n 主页主页 第 9 页 中小型网站建设与管理中小型网站建设与管理 （2）网站根据内容形式与功能结构的不同，基本可以分成）网站根据内容形式与功能结构的不同，基本可以分成9大类别：大类别： 资讯门户类网站、企业品牌类网站、交易类网站、社区网站、办公及资讯门户类网站、企业品牌类网站、交易类网站、社区网站、办公及 政府机构网站、互动游戏网站、有偿资讯类网站、功能性网站和综合政府机构网站、互动游戏网站、有偿资讯类网站、功能性网站和综合

7、类网站等。类网站等。 第 10 页 中小型网站建设与管理中小型网站建设与管理 2、网站的风格与布、网站的风格与布局局 网页的风格是指网站给浏览者的整体形象，包括站点的网页的风格是指网站给浏览者的整体形象，包括站点的CI（标（标 志、色彩和字体）、版面布局、浏览方式、交互性、文字、内容及网志、色彩和字体）、版面布局、浏览方式、交互性、文字、内容及网 站荣誉等诸多因素站荣誉等诸多因素。 常见的网页的布局有常见的网页的布局有“国国”字形布局、字形布局、“匡匡”字形布局、字形布局、“三三 ”字形布局、字形布局、“川川”字形布局、封面型布局、字形布局、封面型布局、Flash布局、标题文本布局、标题文本

8、型布局、框架型布局和变化型布局等型布局、框架型布局和变化型布局等。 第 11 页 中小型网站建设与管理中小型网站建设与管理 任务二任务二 学习相关概学习相关概 1因特网因特网 因特网（因特网（Internet）又称为互联网，是一个把分布于世界各地的）又称为互联网，是一个把分布于世界各地的 计算机用传输介质互相连接起来的网络。计算机用传输介质互相连接起来的网络。Internet主要提供的服务有主要提供的服务有 万维网（万维网（WWW）、文件传输协议（）、文件传输协议（FTP）、电子邮件（）、电子邮件（E-mail）及）及 远程登录（远程登录（Telnet）等）等。 2万维网万维网 万维网（万维网

9、（World Wide Web）简称）简称WWW或者或者3W，它是无数个网，它是无数个网 络站点和网页的集合络站点和网页的集合。 也是也是Internet提供的最主要的服务，它是由多媒体链接而形成的提供的最主要的服务，它是由多媒体链接而形成的 集合，通常上网看到的就是万维网的内容集合，通常上网看到的就是万维网的内容。 第 12 页 中小型网站建设与管理中小型网站建设与管理 3浏览器浏览器 浏览器是指互联网上的文本文档（或其他类型的文件）翻译成浏览器是指互联网上的文本文档（或其他类型的文件）翻译成 网页，并让用户与这些文件交互的一种软件工具，主要用于查看网页网页，并让用户与这些文件交互的一种软件

10、工具，主要用于查看网页 的内容。目前最常用的浏览器有两种：美国微软公司的的内容。目前最常用的浏览器有两种：美国微软公司的Internet Explorer，美国网景公司的，美国网景公司的Netscape Navigator。此外，国内的网。此外，国内的网 络公司也开发了一些浏览器，比如腾讯公司推出了新一代的网络浏览络公司也开发了一些浏览器，比如腾讯公司推出了新一代的网络浏览 器，腾讯浏览器正式从器，腾讯浏览器正式从QQ里剥离出来，成为一个独立的工具，腾讯里剥离出来，成为一个独立的工具，腾讯 浏览器与浏览器与QQ一样拥有一个亲切而且朗朗上口的名字一样拥有一个亲切而且朗朗上口的名字腾讯腾讯TT，等

11、，等 等。等。 第 13 页 中小型网站建设与管理中小型网站建设与管理 4电子邮件电子邮件 电子邮件又称电子邮件又称E-mail，是目前，是目前Internet上使用最多、最受欢迎的上使用最多、最受欢迎的 一种服务。电子邮件是利用计算机网络的电子通信功能传送信件、单一种服务。电子邮件是利用计算机网络的电子通信功能传送信件、单 据、资料等电子媒体信息的通信方式，它最大的特点是人们可以在任据、资料等电子媒体信息的通信方式，它最大的特点是人们可以在任 何地方、时间收发信件，大大提高了工作效率，为办公自动化、商业何地方、时间收发信件，大大提高了工作效率，为办公自动化、商业 活动提供了很大的便利。活动提

12、供了很大的便利。 5URL URL（Uniform Resource Locator）即统一资源定位器，也就）即统一资源定位器，也就 是网络地址，是在是网络地址，是在Internet上用来描述信息资源，并将上用来描述信息资源，并将Internet提供提供 的服务统一编址的系统。简单的来说，通常在的服务统一编址的系统。简单的来说，通常在IE浏览器或浏览器或Netscape 浏览器中输入的网址就是浏览器中输入的网址就是URL的一种。的一种。 第 14 页 中小型网站建设与管理中小型网站建设与管理 模块二模块二 初识初识Dreamweaver CS3 学习目标学习目标 了解网页设计的基本概念，掌握了

13、解网页设计的基本概念，掌握Dreamweaver CS3工作界面的工作界面的 操作和设置操作和设置. 第 15 页 中小型网站建设与管理中小型网站建设与管理 任务任务一、初识一、初识Dreamweaver CS3 1安装并启动安装并启动 （1）安装）安装Dreamweaver CS3后，双击桌面图标或者单击后，双击桌面图标或者单击“开始开始程程 序序Adobe Dreamweaver CS3”。 （2）进入）进入Dreamweaver CS3后，首先显示其起始页，通过起始页可后，首先显示其起始页，通过起始页可 以直接打开最近使用过的文档或其他文档，也可以创建新文档以直接打开最近使用过的文档或其

14、他文档，也可以创建新文档 2.工作界面工作界面 （1）当在起始页中单击）当在起始页中单击“新建新建”列的第一项列的第一项“HTML”后，将会创建后，将会创建 一个一个“.html”格式的新文档，并进入格式的新文档，并进入Dreamweaver CS3工作界面，工作界面， 如图所示。如图所示。 第 16 页 中小型网站建设与管理中小型网站建设与管理 菜单栏菜单栏 标题栏标题栏 “插入插入”栏栏 “文档文档” 工具栏工具栏 文档标签文档标签 面板组面板组 属性属性 面板面板 标签选择器标签选择器状态栏状态栏 第 17 页 中小型网站建设与管理中小型网站建设与管理 （2）由上图可以看出，）由上图可以

15、看出，Dreamweaver CS3的工作界面由标题栏、菜的工作界面由标题栏、菜 单栏、单栏、“插入插入”栏、栏、“文档文档”工具栏、文档窗口、状态栏、工具栏、文档窗口、状态栏、“属性属性” 面板和面板组等组成。面板和面板组等组成。 3面板基本操作面板基本操作 （1）Dreamweaver CS3的工作界面并不是一成不变的，可根据实的工作界面并不是一成不变的，可根据实 际需要，对其进行各种调整。例如，要关闭所有面板和面板组，可按际需要，对其进行各种调整。例如，要关闭所有面板和面板组，可按 【F4】键；再次按【】键；再次按【F4】键，可恢复原来状态。】键，可恢复原来状态。 （2）如果要打开或关闭

16、某个面板，可单击）如果要打开或关闭某个面板，可单击“窗口窗口”菜单下的相应选菜单下的相应选 项。例如，可选择项。例如，可选择“窗口窗口文件文件”菜单打开或关闭菜单打开或关闭“文件文件”面板。另面板。另 外，如果面板组包含了多个面板，则可以在打开面板组后，通过单击外，如果面板组包含了多个面板，则可以在打开面板组后，通过单击 面板标签在各面板之间切换。例如，对于面板标签在各面板之间切换。例如，对于“文件文件”面板组，可以通过面板组，可以通过 单击单击“文件文件”和和“资源资源”标签在两个面板之间切换。标签在两个面板之间切换。 第 18 页 中小型网站建设与管理中小型网站建设与管理 （3）面板组不仅

17、可以关闭，还可以根据需要将它们任意移动和隐藏。）面板组不仅可以关闭，还可以根据需要将它们任意移动和隐藏。 （4）单击面板组名称左侧的三角符号）单击面板组名称左侧的三角符号 ,可将面板组隐藏，并且可将面板组隐藏，并且 符号变符号变 为为 符号，此时单击符号，此时单击 符号，可以重新显示隐藏的面板组。符号，可以重新显示隐藏的面板组。 （5）单击面板组右上角的）单击面板组右上角的 符号，在弹出的菜单中选择符号，在弹出的菜单中选择“关闭面板组关闭面板组” ，可关闭面板组。，可关闭面板组。 （6）单击面板区域左侧）单击面板区域左侧 的符号，可隐藏整个面板区域，并且的符号，可隐藏整个面板区域，并且 符号变

18、为符号变为 符号；如要重新显示面板区域，可单击符号；如要重新显示面板区域，可单击 符号。符号。 第 19 页 中小型网站建设与管理中小型网站建设与管理 4.网页文档基本操作网页文档基本操作 （1）要新建网页文档，可选择）要新建网页文档，可选择“文件文件新建新建”菜单，打开菜单，打开“新建文档新建文档” 对话框。在左侧的对话框。在左侧的“文档类型文档类型”列表中选择第一项列表中选择第一项“空白页空白页”，在，在“ 页面类型页面类型”列表中选择列表中选择“HTML”，在，在“布局布局”列表中选择列表中选择“无无”。 （2）设置完后单击）设置完后单击“创建创建”按钮，就创建了一个默认为按钮，就创建了

19、一个默认为“Untitled-1” 的新文档。的新文档。 第 20 页 中小型网站建设与管理中小型网站建设与管理 （3）要保存网页文档，可选择）要保存网页文档，可选择“文件文件保存保存”菜单，或按【菜单，或按【Ctrl+S】 组合键，弹出组合键，弹出“另存为另存为”对话框，在该对话框的对话框，在该对话框的“保存在保存在”下拉列表下拉列表 中选择保存文档的文件夹，在中选择保存文档的文件夹，在“文件名文件名”编辑框中输入文档名。设置编辑框中输入文档名。设置 完后单击完后单击“保存保存”按钮，就将文档保存在了选择的文件夹中。按钮，就将文档保存在了选择的文件夹中。 （4）关闭文档的操作相当简单，只需要

20、单击相应文档右上方的）关闭文档的操作相当简单，只需要单击相应文档右上方的“关闭关闭 ”按钮按钮 （或按【（或按【Ctrl+W】组合键）即可。执行该操作时，如果文档】组合键）即可。执行该操作时，如果文档 已被修改，系统会弹出提示框，询问是否保存修改。如果文档未命名已被修改，系统会弹出提示框，询问是否保存修改。如果文档未命名 ，此时系统还会打开，此时系统还会打开“另存为另存为”对话框，提示用户命名文档。对话框，提示用户命名文档。 第 21 页 中小型网站建设与管理中小型网站建设与管理 模块三模块三 建立与管理站点建立与管理站点 学习目标学习目标 通过本模块的学习掌握站点的建立和管理，并使同学们能够

21、根通过本模块的学习掌握站点的建立和管理，并使同学们能够根 据不同的要求建立和管理站点据不同的要求建立和管理站点。 第 22 页 中小型网站建设与管理中小型网站建设与管理 任务一任务一 建立与管理站点建立与管理站点 1、确立站点目录结构、确立站点目录结构 2、建立站点、建立站点 （1）首先在本地磁盘上创建一个文件夹，并重命名文件夹为你需要）首先在本地磁盘上创建一个文件夹，并重命名文件夹为你需要 的名称（此处为的名称（此处为“mysite”），将其作为站点根文件夹。），将其作为站点根文件夹。 （2）启动）启动Dreamweaver CS3后，选择后，选择“站点站点新建站点新建站点”菜单，菜单， 打

22、开打开“未命名站点未命名站点1的站点定义为的站点定义为”对话框，单击对话框，单击“基本基本”选项卡，选项卡， 在上面的编辑框中输入在上面的编辑框中输入“mysite”作为站点名称，然后单击作为站点名称，然后单击“下一步下一步 ”按钮。按钮。 （3）由于我们创建的是静态网站，因此，在接着弹出的对话框中选）由于我们创建的是静态网站，因此，在接着弹出的对话框中选 择择“否，我不想使用服务器技术否，我不想使用服务器技术”单选按钮，然后点击单选按钮，然后点击“下一步下一步”按按 钮。钮。 第 23 页 中小型网站建设与管理中小型网站建设与管理 （4）在接下来弹出的对话框中选择）在接下来弹出的对话框中选择“编辑我的计算机编辑我的计算机”单选按单选按 钮，单击钮，单击“您将把您将把”编辑框后的文件夹图标，在打开的选择根文编辑框后的文件夹图标，在打开的选择根文 件夹对话框中选择站点文件夹，然后单击件夹对话框中选择站点文件夹，然后单击“选择选择”按钮。按钮。 （5）回到）回到“mysite的站点定义为的站点定义为”对话框，单击对话框，单击“下一步下一步”按钮，按钮， 由于现在只是在本地编写和调试网页，故不需要连接到远程服务器，由于现在只是在本地编写和调试网页，故不需要连接到远程服务器，