项目一　了解网站的概念 项目二　创建个人网站“鸿渐工作室” 项目三　制作“鸿渐工作室”的主页 项目四　HTML语言 项目五　制作“家乡特产”网页 项目六　制作“给我留言”网页 项目七　制作“应用技巧”网页 项目八　模板制作及应用.

Presentation on theme: "项目一　了解网站的概念 项目二　创建个人网站“鸿渐工作室” 项目三　制作“鸿渐工作室”的主页 项目四　HTML语言 项目五　制作“家乡特产”网页 项目六　制作“给我留言”网页 项目七　制作“应用技巧”网页 项目八　模板制作及应用."— Presentation transcript:

1

2 项目一　了解网站的概念 项目二　创建个人网站“鸿渐工作室” 项目三　制作“鸿渐工作室”的主页 项目四　HTML语言 项目五　制作“家乡特产”网页 项目六　制作“给我留言”网页 项目七　制作“应用技巧”网页 项目八　模板制作及应用

3 项目描述 沧州工贸学校计算机应用专业张鸿渐同学多才多艺，在学完网页制作课程之后想在网上安个“家”。本任务以制作个人网站“鸿渐工作室”为例学习网站站点的建立过程。本项目包括的操作主要是规划个人网站“鸿渐工作室”，创建站点、管理站点、在网站中加入网页等。 通过本项目的学习，了解创建网站的一般方法：确定主题→设计网站结构、风格→收集相关资料→绘制网站结构图→创建网站。

4 1 2 3 4 5 项目目标 了解网站主题的含义； 了解常见的网站主题类型； 能够归纳网站主题类型； 了解网站的栏目划分；
1 了解网站主题的含义； 2 了解常见的网站主题类型； 3 能够归纳网站主题类型； 4 了解网站的栏目划分； 5 理解网站的栏目与目录结构的对应关系。

5 项目二　创建个人网站“鸿渐工作室” 任务一 创建个人网站“鸿渐工作室” 任务二 管理站点 任务三 制作一个简单的网页

6 1 规划个人网站“鸿渐工作室”，绘制结构图 步骤
网站包含多个由超级链接连在一起的网页，所以，在建立网站之前，要明确这个网站由哪些网页组成，明确网页之间的关系。张鸿渐的作品很多，需要分类，在制作网站之前，首先画出网站的设计草图。

7 步骤 2 创建网站 （1）在本地计算机上创建一个站点。站点文件夹为webhongjian,站点名称为hongjian。利用“我的电脑”在本地磁盘中（如D盘）新建一个名为”webhongjian”的文件夹。 （2）运行Dreamweaver CS6，启动后，屏幕会弹出Dreamweaver CS6欢迎界面。选择“新建”栏中的“HTML”即可进入Dreamweaver CS6的工作界面。

8 2 创建网站 步骤 （3）单击“站点”菜单→“新建站点”，打开“站点设置对象”对话框。
在对话框中的“站点名称”文本框中输入站点的名称“webhongjian”(可输入任何一个便于记忆的名称)，点击“本地站点文件夹”右侧的浏览文件夹图标 ，选择“计算机”-“d:”-“webhongjian”文件夹，出现“选择根文件夹”对话框，单击“选择（S）”，回到“站点设置对象”对话框。然后单击“保存”按钮，完成站点的创建。 站点创建后，Dreamweaver CS6窗口右侧的“文件”面板中会显示新建的站点信息。

9 步骤 2 创建网站 （4）右键单击Dreamweaver CS6窗口右侧“文件”面板中的 ，选择“新建文件夹”，新建“images”文件夹，用来存放网站中的图片，同样的方法新建“donghua”文件夹，用来存放网站中的动画文件。 此面板中有站点的完整信息：站点的名称、站点所在的位置、站点的树形结构。 单击站点中各文件夹前的“　　”或“　 　”可展开或折叠此文件夹。 随着工作的继续，今后我们还能在此面板中看到站点中的各个网页及与网页相关的图片、动画等各类素材文件。通过“文件”面板可以方便地管理站点中的对各种对象。

10 相关知识 1 认识站点 一般来说，网页制作是在本地计算机上进行的，即需要在本地计算机上创建一个组织管理网页及相关内容的站点。当站点在本地计算机中调试成功后，再上传到Web服务器正式运行。此时网络中的任何一台计算机都可以使用浏览器浏览该站点中的信息了。 站点就是硬盘上的一个存储区（文件夹），它存储了一个网站中包含的所有网页文件和相关资源。Dreamweaver的使用是以站点为基础的。 它组织和管理站点中文件的方法是：在设计制作网页之前，为要处理的网站建立一个本地站点。将所有的网页文件及用到的素材文件（图像、动画、音频、视频等）存放到该站点下，以便在本地对这些文件进行管理和调试。站点中的全部网页制作并调试成功后再将站点整体传送到Web服务器中，供他人浏览。

11 2 常用的站点 相关知识 Dreamweaver中常用的站点有三种：本地站点、远程站点、测试站点。 本地站点 远程站点 测试站点
本地站点是指存放在本地计算机硬盘上的站点，一般来说是在设计制作网页过程中，将本地计算机当作服务器进行调试使用的站点。 远程站点是指存放在远程服务器（网络中的服务器）上的站点，是网站制作调试成功后，上传到远程服务器上的站点。 测试站点是用于测试动态网页的站点。需要将本地计算机设置成web服务器后，测试站点才能正常工作。

12 项目二　创建个人网站“鸿渐工作室” 任务一 创建个人网站“鸿渐工作室” 任务二 管理站点 任务三 制作一个简单的网页

13 1 注册域名 注册域名是在Internet上建立网站服务的基础，一个好记而漂亮的域名对一个网站的成功运营起着不可估量的作用。在设计域名时，要注意以下两点。 （1）域名应简明易记，便于输入 一个好的域名最好能采用短而易记的拼音或单词，朗朗上口，让人看一眼就能记住。事实证明，过长的域名往往难以被人们记住，这样网站也难以得到推广。

14 “ ” 1 注册域名 （2）域名要有一定的内涵和意义
有一定内涵和意义的域名，不但可记性好，而且有助于实现企业的营销目标。如企业名称、产品名称、商标名、品牌名等都是不错的选择，这样能提高企业的营销目标，使域名与品牌更好地结合在一起，加深人们对企业的印象。 ”

15 2 申请网站空间 （1）使用免费网站空间 （2）租用虚拟主机
注册后，有的ISP会附加提供一个免费的网站空间供用户直接上传要发布的网页。但免费网站空间中用户的权限往往受到很大限制，许多高级功能都不能使用。 （2）租用虚拟主机 用户通过ISP网站平台实现租借，成功申请网站空间后需按年向ISP交纳一定费用。这种方式的特点是多个用户共用一个服务器，但各用户分占不同的硬盘空间，使用不同域名和不同的IP地址，这样对每一个用户而言，是感觉不到其他用户存在的。

16 2 申请网站空间 （3）租用专用服务器 该方式与租用虚拟主机相似，不同的是服务器只供一个用户使用，服务器性能稳定、效率高。
（4）使用自己的服务器 用户也可以购买自己的服务器，选择好ISP后将服务器接入Internet，这样网站就可建立到自己的服务器上，在这种方式下用户对服务器拥有最高的管理权和控制权。

17 ① ② ③ 3 上传网站内容 确定了服务器“地址”、“用户名”和“密码”后，用户就可以上传Web文件了。网站上传的实现方法有3种。
使用IE浏览器上传文件 ② 使用专业的FTP工具上传文件 ③ 使用Dreamweaver上传文件

18 4 网站维护管理方法 （1）网站文件结构的设置 网站开发者在创建网站时， 不应图方便将所有的网站文 件都存放在一个站点目录下， 而要使用不同的文件夹来存 放不同性质的文件。合理的 网站文件结构使站点资源分 类清晰，便于开发者及管理 者在对网站维护时进行快速 的定位，避免发生错误。

19 4 网站维护管理方法 （1）网站文件结构的设置 在网站文件组织结构上，通常采用以下两种方案。
开发者可将不同类型的文件分别存放在 不同的文件夹中，如用“pages”、 “images”、“sounds”、“videos”命 名文件夹并分别存放网页、图片、音频、视 频等网站文件，这种分类方法适用于中小型 网站。 方案一：按文件类型分类

20 4 网站维护管理方法 （1）网站文件结构的设置 方案二：按部门、业务或项目分类 对于多业务或多项目的中大型网站，开发者可将网站资源按不同的主题或业务性质进行分类存放。对于较大型的网站，按部门、业务或项目分类后，还可以采用方案一的方式再对同一项目内的文件按类型进一步细分及存储。

21 5 网站文件管理原则 （1）在进行网站开发之前，开发者就应具备管理网站存储目录的意识，并事先建立合适的网站文件结构，这将给以后的开发工作带来很多方便。 （2）网站的首页文件通常是“index.html”，它必须存放在网站的根目录中。 （3）网站使用的所有文件都必须存放在站点的文件夹或者子文件夹中。用URL方式进行链接的内容或者页面可以不存放在站点文件夹中。 （4）相同路径下的文件或文件夹不能同名。 （5）尽量不要通过文件操作方式直接进行网站文件的删除、重命名或移动等，这样容易使已经设计好的网页出现链接错误。所有这些操作应通过站点管理器来完成。

22 6 管理站点 打开“管理站点”对话框，可用下例方法之一：
通过“管理站点”对话框管理站点 打开“管理站点”对话框，可用下例方法之一： （1）在“文件”面板中，单击站点文件夹下拉框，选择“管理站点”，打开“管理站点”对话框。 （2）选择“站点”菜单→“管理站点”，打开“管理站点”对话框。 在对话框中可进行站点的新建、复制、编辑、删除等操作，也可将别的站点导入到当前站点中，还可以导出当前选定的站点。这些都是对站点整体操作，若要操作站点中的文件夹或文件，则可通过“文件”面板来进行。

23 7 管理站点中的文件夹和文件 站点文件夹是用来存放网站所有文件的，通常根据站点规划的要求，在此文件夹中建立多个子文件夹，并为这些子文件夹规范命名，用于分类存放站点中不同板块的网页文件或不同类型的素材文件。

24 7 管理站点中的文件夹和文件 对站点中文件和文件夹的主要操作有： (1)新建文件或文件夹
选择新建文件或文件夹所在的父文件夹，右击此文件夹名称，在快捷菜单中选择“新建文件”或“新建文件夹”，再输入文件或文件夹的名称，回车即可

25 7 管理站点中的文件夹和文件 (2)复制文件或文件夹
右击该文件或文件夹名称，在快捷菜单中选择“编辑”→“拷贝”（Ctrl+C），再右击目标文件夹，在快捷菜单中选择“编辑”→“粘贴”(Ctrl+V)，即可。 或右击该文件或文件夹名称，在快捷菜单中选择“编辑”→“复制”(Ctrl+D)，即可。

26 7 管理站点中的文件夹和文件 (3)重命名文件或文件夹
右击该文件或文件夹名称，在快捷菜单中选择“编辑”→“重命名”，输入新的名称，回车即可。

27 7 管理站点中的文件夹和文件 (4)删除文件或文件夹 右击该文件或文件夹名称，在快捷菜单中选择“编辑”→“删除”(Del)，确认即可。

28 7 管理站点中的文件夹和文件 (5)移动文件或文件夹 单击并拖动文件或文件夹到新的目标位置即可。

29 项目二　创建个人网站“鸿渐工作室” 任务一 创建个人网站“鸿渐工作室” 任务二 管理站点 任务三 制作一个简单的网页

30 创建好站点后就需要为站点新建相关的网页了。我们首先制作一个简单的网页，完成后的效果如图所示。

31 步骤 1.首先将制作网页所需的图片“沧州工贸学校新校区.jpg”文件拷到站点文件夹即: “d:\webhongjian\images”下。 2.右键单击Dreamweaver CS6窗口右侧“文件”面板中的 ，选择“新建文件”，输入文件名“xuexiaojianjie.html”, 按回车键确定，这个文件就是我们新建的网页文件了。

32 步骤 3.双击“xuexiaojianjie.html”文件，就可以对文件进行编辑制作了。对照图2-7输入网页文本内容。文中每段开头应输入4个半角空格（占2个汉字位）。由于默认情况下Dreamweaver不允许连续输入多个空格，我们可以切换到中文全角状态下进行连续多个空格的输入。 4.设置文本字体，字号 点击编辑区下方的属性面板中的“页面属性”按钮，页面字体选择“默认字体”，大小选择“14” ，然后单击确定。

33 步骤 5.设置文本标题的格式 选中标题文本“沧州工贸学校简介”，选择格式菜单下的“段落格式”下的“标题1”。

34 步骤 6.插入图片 单击“插入”工具栏中的“图像” 按钮，选择“ ”，打开“选择图像源文件”对话框。定位到“d:\webhongjian\images”下“沧州工贸学校新校区.jpg”文件，单击“确定”按钮。网页现在已经插入一幅图片了。选中图片，单击“格式”菜单下的“对齐”，选择“居中对齐”。

35 步骤 7.设置网页标题 在文档工具栏“标题”框中输入网页标题——“沧州工贸学校简介”。

36 步骤 8.保存网页 保存网页文件的方法有多种： (1) Ctrl+S。 (2) 单击“文件”菜单→“保存”。 (3)关闭网页文件时，软件提示是否保存。 此时会打开的“另存为…”对话框，输入文件名,定位好文件位置后，再单击“保存”即可。

37 步骤 9.浏览网页 单击文档工具栏中的“在浏览器中预览/调试”按钮 ，选择“预览在IExplore” 。或在编辑状态直接按F12键，即可进行预览。 浏览网页前应保存网页，如果没有保存，Dreamweaver会弹出保存提示框。单击“是”按钮。

38 相关知识 1 网页中的组成元素 网页由多种不同的元素组成，一般包含文本、图像、超链接、表格、层、表单、动画、音频、视频和脚本程序等基本元素。 文本 表单 图像 动画 网页 超链接 音频 表格 视频 层 脚本程序

39 相关知识 1 网页中的组成元素 文本 文本是网页最基本的元素，网页内容主要是靠文本来表达的。文本字符所占的存储空间非常小，下载速度非常快。文本可以使用各种格式属性来修饰，还可以用脚本程序来产生各种动态效果。 图像 网页总是图文并茂的，合理的图像布局能给人以强烈的视觉冲击效果。所以图像是网页中必不可少元素。网页中常用的图像格式有JPG、GIF、PNG等。

40 相关知识 1 网页中的组成元素 超链接：网页中海量的信息是通过超链接来实现联系的。用户单击网页中的超链接浏览器就会打开与之关联的网页或信息点。超链接实现了网页的跳转，将独立的网页连成了无边无际的信息的海洋，使得网页与网页、网站与网站之间相互连接成为一个有机的整体。 表格：表格在网页中主要用于清晰的显示各类数据和进行页面布局，应用十分方便。 层：层一般与CSS（层叠样式表）结合使用，进行页面布局。其应用十分灵活，修改方便，可以页面的任意可显示区域布局层。相对于表格的布局功能而言，更能代表网页布局技术的发展方向。

41 1 网页中的组成元素 相关知识 表单：主要用于收集用户输入的数据，实现网页的动态交互功能。所以表单主要应用于动态网页中。
音频：音频对象是网页中人机交互的又一种重要元素，丰富了网页的功能。音频文件主要有WAV、MIDI、MP3等。 音频 表单

42 相关知识 1 网页中的组成元素 动画：动画可以让网页更生动活泼，丰富视觉效果。网页中常用的动画文件格式有GIF和SWF。GIF动画最多只能正常显示256种颜色的画面，而SWF是Flash动画，可以显示真彩色动画。 动画 视频：与音频对象一样，是网页中人机交互的又一种重要元素，丰富了网页的功能，使得网页的多媒体功能更全面，更精彩，更实用。视频文件的格式主要有RM、AVI、MPG、FLV等。视频信息一般都需要客户端安装相应的插件才能正常播放。 视频

43 FrontPage、Word、Excel
相关知识 2 FrontPage、Word、Excel FrontPage 是Office 中一个专门制作网页的应用程序。除了FrontPage ，Office中其它一些应用程序也有可视化制作网页功能。下面就让我们来看一下Word 制作网页的功能。 Word 制作网页的的一种方法是使用Word 编辑文档，最后将文档保存为Web文件格式即可。具体操作方法是，单击“文件”菜单|“另存为网页”选项。 Excel 是一个专门的表格数据处理程序。用它来编辑和处理表格数据，以及有多个表构成的工作文档非常方便。如果要制作一个网页，而这个网页要能够具有使用Excel 对它进行处理时的那种操作效果的话，使用Excel 是很方便的。可以直接将excel文件另存为网页。具体操作方法是，单击“文件”菜单|“另存为网页”选项。

44 3 Dreamweaver的文件类型 相关知识
在Dreamweaver中，可以创建和使用多种文件类型，最常用的文件类型是HTML文件，HTML文件（或超文本标记语言文件）包含基于标签的语言，负责在浏览器中显示网页页面，其扩展名为“.html”或“.htm”。Dreamweaver默认情况下使用扩展名“.html”保存文件。在Dreamweaver中可创建和编辑基于HTML5的网页，还提供起始布局可从头开始生成HTML5页面。

45 3 Dreamweaver的文件类型 相关知识
（1）HTML模板文件： Dreamweaver的模板文件可以编辑可编辑区域，文件扩展名为“dwt”。 （2）CSS文件：CSS是Cascading style Sheet（层叠样式表）的缩写，是用于设置HTML内容的格式，控制网页样式及各个页面元素的位置并允许将样式信息与网页内容分离的一种标记性语言。其文件扩展名为“.css”。 （3）GIF文件：GIF（图形交换格式）文件的扩展名为“.gif”。GIF格式是用于卡通、徽标、具有透明区域的图形、动画的常用Web图形格式。GIF最多包含256种颜色。

46 3 Dreamweaver的文件类型 相关知识
（4）JPEG文件：JPEG（联合图像专家组）文件（根据创建该格式的组织命名）的扩展名为“jpg”，通常是照片或色彩较鲜明的图像。JPEG格式最适合用于数码照片或扫描的照片、使用纹理的图像、具有渐变色过渡的图像以及需要256种以上颜色的任何图像。 （5）XML文件：XML是Extensible Markup Language（可扩展标识语言）的缩写。XML包含原始形式的数据，可使用XSL（Extensible Stylesheet Language，可扩展样式表语言）设置这些数据的格式，最初设计的目的是为弥补HTML的不足，以强大的扩展性、满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。文件扩展名为“.xml”。

47 3 Dreamweaver的文件类型 相关知识
（6 ）XSL文件：XSL文件的扩展名为“.xsl”或“.xslt”。它们用于设置要在网页中显示的XML数据的样式。 （7）CFML文件：CFML文件的扩展名为“.cfm”。它用于处理动态页面 （8）PHP文件：PHP超文本处理器（Professional Hypertext Preprocessor ）文件， PHP是一种HTML内嵌式的语言，是一种在服务器端执行的嵌入HTML文档的脚本语言，用于处理动态页面。其实，它和大家所熟知的ASP一样，是一门常用于Web编程的语言。PHP的网页文件的格式是“.php”，具有.php扩展名。

48 3 Dreamweaver的文件类型 相关知识 此外，Dreamweaver还支持如下一些文件类型。
（1）JavaScript文件：JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言。它是通过嵌入或调入到标准的HTML中实现的。文件扩展名为“js”。 （2）ActionScript文件：ActionScript（动作脚本）文件是Macromedia为其Flash产品开发的，是一种完全的面向对象的编程语言，功能强大，类库丰富，语法类似Java，多用于Flash互动性、娱乐性、实用性开发，网页制作和RIA应用程序开发。文件扩展名为“.as”。

49 3 Dreamweaver的文件类型 相关知识
（3）ASP文件：ASP是Active Server Page的缩写，是Microsoft公司开发的代替CGI脚本程序的一种文件。应用它可以与数据库和其他程序进行交互，是一种简单、方便的编程工具。ASP的网页文件的格式是“.asp”。 （4）JSP文件：JSP是Java Server Pages的缩写，是由Sun Microsystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。JSP技术有点类似ASP技术，它是在传统的网页HTML文件（*.htm，*.html ）中插入Java程序段和JSP标记，从而形成JSP文件（*.jsp）。 注：文件的文件名和扩展名大小写是一样的。

50 自我测评 一．填空题 1．站点就是硬盘上的一个______________________。 2．Dreamweaver中常用的站点有三种：___________、_________、__________。 3．Dreamweaver中，选择“________”菜单中的“______________”后就可以在打开对话框中根据向导逐步进行创建站点的操作。 4．Web服务器拥有一个___________________和若干_______________用于发布站点。

51 自我测评 相知识 二．选择题 1．下列方法中能打开Dreamweaver的“站点管理”对话框的是（ ）。 A）通过“文件”面板中的“管理站点”。 B）选择“站点”菜单中的“管理站点”菜单项。 C）选择“插入”栏中的“管理站点”项。 D）选择“文件”菜单中的“管理站点”菜单项。 2．Web服务器也称作（ ）。 A）IIS服务器 B）WWW服务器 C）HTTP服务器 D）Internet服务器

52 自我测评 相知识 3．下列关于IIS设置的说法正确的是（ ）。 A）使用“IIS信息服务”对话框不仅能设置Web服务，也能设置FTP等网络服务功能。 B）使用“IIS信息服务”对话框，不能建立多个Web网站。 C）使用“IIS信息服务”对话框，能建立多个Web网站，并能同时启动这些网站。 D）使用“IIS信息服务”对话框，能建立多个Web网站，但一次只能启动一个网站。

53 自我测评 相知识 三．简答题 1．简述在Dreamweaver中创建站点的一般步骤。 2．简述在Windows系统中安装IIS组件的一般步骤。

54