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

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

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

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

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

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

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

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

8、设与管理任务二任务二 学习相关概学习相关概1因特网因特网 因特网（因特网（Internet）又称为互联网，是一个把分布于世界各地的）又称为互联网，是一个把分布于世界各地的计算机用传输介质互相连接起来的网络。计算机用传输介质互相连接起来的网络。Internet主要提供的服务有主要提供的服务有万维网（万维网（WWW）、文件传输协议（）、文件传输协议（FTP）、电子邮件（）、电子邮件（E-mail）及）及远程登录（远程登录（Telnet）等）等。2万维网万维网 万维网（万维网（World Wide Web）简称）简称WWW或者或者3W，它是无数个网，它是无数个网络站点和网页的集合络站点和网页的集合。

9、 也是也是Internet提供的最主要的服务，它是由多媒体链接而形成的提供的最主要的服务，它是由多媒体链接而形成的集合，通常上网看到的就是万维网的内容集合，通常上网看到的就是万维网的内容。第 12 页中小型网站建设与管理中小型网站建设与管理3浏览器浏览器 浏览器是指互联网上的文本文档（或其他类型的文件）翻译成浏览器是指互联网上的文本文档（或其他类型的文件）翻译成网页，并让用户与这些文件交互的一种软件工具，主要用于查看网页网页，并让用户与这些文件交互的一种软件工具，主要用于查看网页的内容。目前最常用的浏览器有两种：美国微软公司的的内容。目前最常用的浏览器有两种：美国微软公司的Internet E

10、xplorer，美国网景公司的，美国网景公司的Netscape Navigator。此外，国内的网。此外，国内的网络公司也开发了一些浏览器，比如腾讯公司推出了新一代的网络浏览络公司也开发了一些浏览器，比如腾讯公司推出了新一代的网络浏览器，腾讯浏览器正式从器，腾讯浏览器正式从QQ里剥离出来，成为一个独立的工具，腾讯里剥离出来，成为一个独立的工具，腾讯浏览器与浏览器与QQ一样拥有一个亲切而且朗朗上口的名字一样拥有一个亲切而且朗朗上口的名字腾讯腾讯TT，等，等等。等。第 13 页中小型网站建设与管理中小型网站建设与管理4电子邮件电子邮件 电子邮件又称电子邮件又称E-mail，是目前，是目前Inter

11、net上使用最多、最受欢迎的上使用最多、最受欢迎的一种服务。电子邮件是利用计算机网络的电子通信功能传送信件、单一种服务。电子邮件是利用计算机网络的电子通信功能传送信件、单据、资料等电子媒体信息的通信方式，它最大的特点是人们可以在任据、资料等电子媒体信息的通信方式，它最大的特点是人们可以在任何地方、时间收发信件，大大提高了工作效率，为办公自动化、商业何地方、时间收发信件，大大提高了工作效率，为办公自动化、商业活动提供了很大的便利。活动提供了很大的便利。5URL URL（Uniform Resource Locator）即统一资源定位器，也就）即统一资源定位器，也就是网络地址，是在是网络地址，是在

12、Internet上用来描述信息资源，并将上用来描述信息资源，并将Internet提供提供的服务统一编址的系统。简单的来说，通常在的服务统一编址的系统。简单的来说，通常在IE浏览器或浏览器或Netscape浏览器中输入的网址就是浏览器中输入的网址就是URL的一种。的一种。第 14 页中小型网站建设与管理中小型网站建设与管理模块二模块二 初识初识Dreamweaver CS3学习目标学习目标 了解网页设计的基本概念，掌握了解网页设计的基本概念，掌握Dreamweaver CS3工作界面的工作界面的操作和设置操作和设置.第 15 页中小型网站建设与管理中小型网站建设与管理任务任务一、初识一、初识Dr

13、eamweaver CS31安装并启动安装并启动 （1）安装）安装Dreamweaver CS3后，双击桌面图标或者单击后，双击桌面图标或者单击“开始开始程程序序Adobe Dreamweaver CS3”。 （2）进入）进入Dreamweaver CS3后，首先显示其起始页，通过起始页可后，首先显示其起始页，通过起始页可以直接打开最近使用过的文档或其他文档，也可以创建新文档以直接打开最近使用过的文档或其他文档，也可以创建新文档2.工作界面工作界面 （1）当在起始页中单击）当在起始页中单击“新建新建”列的第一项列的第一项“HTML”后，将会创建后，将会创建一个一个“.html”格式的新文档，并

14、进入格式的新文档，并进入Dreamweaver CS3工作界面，工作界面，如图所示。如图所示。第 16 页中小型网站建设与管理中小型网站建设与管理菜单栏菜单栏标题栏标题栏“插入插入”栏栏“文档文档”工具栏工具栏文档标签文档标签面板组面板组属性属性面板面板标签选择器标签选择器状态栏状态栏第 17 页中小型网站建设与管理中小型网站建设与管理 （2）由上图可以看出，）由上图可以看出，Dreamweaver CS3的工作界面由标题栏、菜的工作界面由标题栏、菜单栏、单栏、“插入插入”栏、栏、“文档文档”工具栏、文档窗口、状态栏、工具栏、文档窗口、状态栏、“属性属性”面板和面板组等组成。面板和面板组等组成

15、。3面板基本操作面板基本操作 （1）Dreamweaver CS3的工作界面并不是一成不变的，可根据实的工作界面并不是一成不变的，可根据实际需要，对其进行各种调整。例如，要关闭所有面板和面板组，可按际需要，对其进行各种调整。例如，要关闭所有面板和面板组，可按【F4】键；再次按【】键；再次按【F4】键，可恢复原来状态。】键，可恢复原来状态。 （2）如果要打开或关闭某个面板，可单击）如果要打开或关闭某个面板，可单击“窗口窗口”菜单下的相应选菜单下的相应选项。例如，可选择项。例如，可选择“窗口窗口文件文件”菜单打开或关闭菜单打开或关闭“文件文件”面板。另面板。另外，如果面板组包含了多个面板，则可以在

16、打开面板组后，通过单击外，如果面板组包含了多个面板，则可以在打开面板组后，通过单击面板标签在各面板之间切换。例如，对于面板标签在各面板之间切换。例如，对于“文件文件”面板组，可以通过面板组，可以通过单击单击“文件文件”和和“资源资源”标签在两个面板之间切换。标签在两个面板之间切换。第 18 页中小型网站建设与管理中小型网站建设与管理 （3）面板组不仅可以关闭，还可以根据需要将它们任意移动和隐藏。）面板组不仅可以关闭，还可以根据需要将它们任意移动和隐藏。 （4）单击面板组名称左侧的三角符号）单击面板组名称左侧的三角符号 ,可将面板组隐藏，并且可将面板组隐藏，并且 符号变符号变为为 符号，此时单击

17、符号，此时单击 符号，可以重新显示隐藏的面板组。符号，可以重新显示隐藏的面板组。 （5）单击面板组右上角的）单击面板组右上角的 符号，在弹出的菜单中选择符号，在弹出的菜单中选择“关闭面板组关闭面板组”，可关闭面板组。，可关闭面板组。 （6）单击面板区域左侧）单击面板区域左侧 的符号，可隐藏整个面板区域，并且的符号，可隐藏整个面板区域，并且 符号变为符号变为 符号；如要重新显示面板区域，可单击符号；如要重新显示面板区域，可单击 符号。符号。第 19 页中小型网站建设与管理中小型网站建设与管理4.网页文档基本操作网页文档基本操作（1）要新建网页文档，可选择）要新建网页文档，可选择“文件文件新建新建

18、”菜单，打开菜单，打开“新建文档新建文档”对话框。在左侧的对话框。在左侧的“文档类型文档类型”列表中选择第一项列表中选择第一项“空白页空白页”，在，在“页面类型页面类型”列表中选择列表中选择“HTML”，在，在“布局布局”列表中选择列表中选择“无无”。（2）设置完后单击）设置完后单击“创建创建”按钮，就创建了一个默认为按钮，就创建了一个默认为“Untitled-1”的新文档。的新文档。第 20 页中小型网站建设与管理中小型网站建设与管理 （3）要保存网页文档，可选择）要保存网页文档，可选择“文件文件保存保存”菜单，或按【菜单，或按【Ctrl+S】组合键，弹出组合键，弹出“另存为另存为”对话框，

19、在该对话框的对话框，在该对话框的“保存在保存在”下拉列表下拉列表中选择保存文档的文件夹，在中选择保存文档的文件夹，在“文件名文件名”编辑框中输入文档名。设置编辑框中输入文档名。设置完后单击完后单击“保存保存”按钮，就将文档保存在了选择的文件夹中。按钮，就将文档保存在了选择的文件夹中。 （4）关闭文档的操作相当简单，只需要单击相应文档右上方的）关闭文档的操作相当简单，只需要单击相应文档右上方的“关闭关闭”按钮按钮 （或按【（或按【Ctrl+W】组合键）即可。执行该操作时，如果文档】组合键）即可。执行该操作时，如果文档已被修改，系统会弹出提示框，询问是否保存修改。如果文档未命名已被修改，系统会弹出

20、提示框，询问是否保存修改。如果文档未命名，此时系统还会打开，此时系统还会打开“另存为另存为”对话框，提示用户命名文档。对话框，提示用户命名文档。第 21 页中小型网站建设与管理中小型网站建设与管理模块三模块三 建立与管理站点建立与管理站点学习目标学习目标 通过本模块的学习掌握站点的建立和管理，并使同学们能够根通过本模块的学习掌握站点的建立和管理，并使同学们能够根据不同的要求建立和管理站点据不同的要求建立和管理站点。第 22 页中小型网站建设与管理中小型网站建设与管理任务一任务一 建立与管理站点建立与管理站点1、确立站点目录结构、确立站点目录结构2、建立站点、建立站点 （1）首先在本地磁盘上创建

21、一个文件夹，并重命名文件夹为你需要）首先在本地磁盘上创建一个文件夹，并重命名文件夹为你需要的名称（此处为的名称（此处为“mysite”），将其作为站点根文件夹。），将其作为站点根文件夹。 （2）启动）启动Dreamweaver CS3后，选择后，选择“站点站点新建站点新建站点”菜单，菜单，打开打开“未命名站点未命名站点1的站点定义为的站点定义为”对话框，单击对话框，单击“基本基本”选项卡，选项卡，在上面的编辑框中输入在上面的编辑框中输入“mysite”作为站点名称，然后单击作为站点名称，然后单击“下一步下一步”按钮。按钮。 （3）由于我们创建的是静态网站，因此，在接着弹出的对话框中选）由于我们

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