网页制作第1单元素材.ppt

《网页制作第1单元素材.ppt》由会员分享，可在线阅读，更多相关《网页制作第1单元素材.ppt（50页珍藏版）》请在三一办公上搜索。

1、Dreamweaver网页制作,第一单元 创建个人网站,主 编：王树平副主编：杜大志 李光宇,任务描述：本单元将通过一个个人网站的创建，学习网站从规划到建立的流程，自己动手，打造属于自己的站点。任务完成后如下图所示：,第一单元 创建个人网站,第一单元 创建个人网站,任务一 规划个人网站,任务二 创建站点,任务三 管理站点,任务四 创建网站目录结构,任务五 使用代码创建网页,任务一 规划个人网站,任务描述：了解网站的主题和规划流程，规划一个个人网站。,任务分析：制作一个个人网站之前需要进行系统的规划，包括网站主题的确定、栏目板块的划分及建立相应的目录结构、选择合适的开发工具软件。,第一单元 创建

2、个人网站,自己动手：1定位网站的主题和名称。,2规划网站的栏目与目录结构。,任务一 规划个人网站,3选择网页制作软件,其他常见网页编辑软件：微软的Frontpage：Microsoft Office办公软件成员之一，被誉为最易于使用、功能强大的网页制作编辑入门工具。Netscape编辑器：Netscape Communicator和Netscape Navigator随带的网页制作软件，是一款简单的面向初学者的网页制作入门工具。CuteHTML：美国GlobalSCAPE开发的网页制作软件。HotDogPro4.54：美国软件公司Sausage推出的网页制作软件，使用方便、功能十分强大，具有动

3、画制作功能。现在的最新版为“HotDog Professional 7”。,Dreamweaver 8：一款集网站管理与网页制作于一身的“所见即所得”的网页制作软件,任务一 规划个人网站,任务总结：通过完成以上任务，学习了个人网站的规划方法。,任务一 规划个人网站,举一反三：1通过互联网浏览网站，总结所浏览网站的主题类型，至少找出企业宣传、软件下载、求职招聘、专业论坛、流行时尚、互动聊天和在线销售类型的网站各一个，记录它们的网站名称填入表JYFS1-1中。,A.启发思路：根据表格内的提示，使用搜索引擎查找相关类型的网站。,B.分组完成任务。,任务一 规划个人网站,2相同主题类型的网站所包含的栏

4、目不一定完全相同，搜索并浏览网络上的个人网站，看一看它们都包含哪些栏目并进行汇总。,A.启发思路：不同的人制作的个人网站栏目划分会有很大的区别，不同的年龄段，不同的工作职业，不同的兴趣爱好有不同的栏目划分。在搜索过程中注意考虑这些区别，例如，电影明星的个人网站中肯定会有影迷会这样的栏目，而运动员的个人网站中一般包含荣誉奖项这样的栏目,B.分组完成任务。,任务一 规划个人网站,作业：1为自己设计一个个人网站，至少包含8个栏目，参照课本表1-1画出站点的目录结构。,任务一 规划个人网站,任务二 创建站点,任务描述：使用网页编辑软件Dreamweaver 8，创建“幽幽我心的个人网站”站点。,任务分

5、析：创建本地站点首先需要运行Dreamweaver 8，然后定义站点的名称、确定是否使用服务器技术、确定站点在本地计算机上的位置等。,第一单元 创建个人网站,自己动手：1启动软件Dreamweaver8。,Dreamweaver8的起始页,2创建网站站点。,任务二 创建站点,任务总结：通过完成以本任务，学习了软件的启动方法以及创建网站站点的流程。,任务二 创建站点,举一反三：1新建一个站点，名称为“pra1-1”，使用“高级”选项卡完成新建过程，保存位置为“D:pra1-1”，其他参数保持默认即可。,A.启发思路：在新建站点的过程中，使用“高级”选项卡完成新建过程更为直观，需要进行设置的参数与

6、使用“基本”选项卡完成这一操作是一致的。,B.分组完成任务。,任务二 创建站点,2使用搜索引擎搜索并打开5个不同主题类型的网页，记录并分析它们的URL，将其URL中的协议类型、域名和目录结构等内容填入表JYFS1-2中。,A.启发思路：使用浏览器浏览一个网页的时候，浏览器的地址栏中显示出这个网页的URL地址。,B.分组完成任务。,任务二 创建站点,作业：1新建一个以自己姓名命名的个人站点，该站点使用“ASP JavaScript”服务器技术,暂不设置远程信息与测试服务器，站点保存在“D:pra1-2”文件夹中。,任务二 创建站点,任务三 管理站点,任务描述：使用网页编辑软件Dreamweave

7、r 8，实现站点的管理。,任务分析：站点的管理功能包括新建、编辑、复制、删除、导出和导入，在Dreamweaver 8中有相应的管理工具可以直接完成这些操作，大大简化了站点的管理工作。,第一单元 创建个人网站,自己动手：1导出站点。,任务三 管理站点,站点名称,2导入站点。,任务三 管理站点,注意：因为有重名的站点，所以导入的站点名称后面自动加0。,3复制删除与编辑站点。,任务总结：通过完成以本任务，学习了软件的启动方法以及创建网站站点的流程。,任务三 管理站点,举一反三：新建站点“pra1-5”，使用管理站点功能将其导出。将站点导出文件通过网络或移动存储设备拷贝到其他计算机中，使用管理站点功

8、能将其导入。,1启发思路：在站点制作过程中，有时需要更换计算机，导出站点并导入到其他计算机中。,2分组完成任务。,任务三 管理站点,作业：1新建站点“pra1-3”，使用管理站点功能复制站点“pra1-3”，编辑复制的站点名称为“pra1-4”，之后删除站点“pra1-3”。,任务三 管理站点,任务四 创建网站目录结构,任务描述：实现先前规划的“幽幽我心的个人网站”目录结构,任务分析：创建目录结构需要在站点内新建相应的网页文件及文件夹。在众多的网页文件中有一个页面叫做首页，他作为整个网站的入口，必然要与其他的页面在设置上有所区别。,第一单元 创建个人网站,自己动手：1启动Dreamweaver

9、，打开“幽幽我心的个人网站”。2使用文件面板（看不到文件面板怎么办？）创建网站首页：A.如下页图所示，在文件面板中，选择“幽幽我心的个人网站”右键单击，新建一个网页文件，命名为Index.html。,任务四 创建网站目录结构,注意：不论是使用起始页还是使用“新建”菜单创建新网页，都需要保存到准确的目录位置。所以建议使用“文件”面板直接在站点内新建网页文件及文件夹。,B.在文件面板中该文件名上右击鼠标，选择“设成首页”,以区别于其他网页文件。,任务四 创建网站目录结构,3在文件面板双击打开首页文件、设置其页面属性,任务四 创建网站目录结构,如下图所示，在首页文件index.html的页面属性中，

10、设置左边距和上边距为0像素。,任务四 创建网站目录结构,5新建首页图像文件夹,6新建其他页面文件夹。结果文件面板如下图所示。,课堂讨论：首页文件名称可以不用index.html吗？怎样把首页文件与其他网页文件区分开来？通常把页面的左边距和上边距设置为0，为什么？,4单击“F12”键，在IE浏览器中预览生成的网页。,任务四 创建网站目录结构,空白首页,怎样管理站点目录？,任务总结：通过完成以上任务，学习了创建首页、设置页面属性、创建并管理站点目录。,任务四 创建网站目录结构,举一反三：依据前面学习的知识与掌握的专业技能，新建一个站点，网站命名为“网页制作”，存放在“D:dreamweaver”文

11、件夹中，使用“文件”面板新建首页文件“index.html”和首页图像文件夹“images”，在“我的电脑”中查看相应目录的变化。,1启发思路：注意要把网页设为首页,2分组完成任务。,任务四 创建网站目录结构,作业：1使用文件菜单新建ASP JavaScript类型的动态页，文件保存为D:/practice 1-1.asp，使用属性面板修改网页标题为ASP网页。2新建站点pra1-7，使用文件面板创建一个网页文件，命名为practice1-2.html，选中该文件后使用 下拉菜单中的重命名选项，改名为newpage.html，同样使用 下拉菜单中的选项预览页面后删除该页面。,任务四 创建网站目

12、录结构,任务五 使用代码创建网页,任务分析：网页是用HTML（超文本标识语言）记述的，HTML是一种编写网页的基础语言，是英文HyperText Markup Language 的缩写，中文意思是“超文本标识语言”。HTML文件也可以说是一个文本文件，它包含了一些HTML标签、文本、脚本等，而且可以使用记事本等多种文本编辑软件进行编写。,任务描述：使用HTML语言创建一个空白页面。,第一单元 创建个人网站,打开记事本输入下列代码并保存，文件名example.html，最后双击运行。,任务五 使用代码创建网页,自己动手 1使用“记事本”创建一个空白网页文件,其中各Html标签的功能是什么？,2使

13、用Dreamweaver 8“代码”视图创建一个空白网页文件,运行Dreamweaver 8，使用起始页新建一个空白页面，在“文档”工具栏中选择“代码”视图，“文档”窗口将显示如下图代码，其中包含文档类型的说明文字和页面的编码方式与标题。,任务五 使用代码创建网页,此代码会在新建空白网页时自动生成。,课堂讨论：分组讨论使用代码创建网页和使用Dreamweaver 8创建网页各有什么优缺点。,任务五 使用代码创建网页,举一反三：依据前面学习的知识与掌握的专业技能，使用word 2003新建一个空白文档，保存时选择文件类型为“网页（*.htm；*.html）”命名为“wordpage.html”，

14、保存在D盘根目录下，完成后使用Dreamweaver 8打开该页面，在“代码”视图下查看其自动生成的HTML代码。,1启发思路：网页是由HTML语言编写的，保存为扩展名为Html或Htm的文本文件。任何一个文本编辑软件都可以编写。分组讨论有哪些文本编辑软件，引出Word。回忆如何使用Word创建文件。,2分组完成任务。,任务五 使用代码创建网页,作业：1使用Dreamweaver 8新建一个空白文档，将“文档”窗口切换到“拆分”视图，查看“文档”面板的状态。2标签是标签内部包含的一个功能标签，使用网络查找该标签的各种属性及其作。,任务五 使用代码创建网页,相关知识：,1常见的网页主题有：个人站

15、点、企业宣传、软件下载、求职招聘、专业论坛、流行时尚、互动聊天和在线销售等。,2对网站题材的选择，通常要注意以下两点：A.主题要简单明确。网站的内容要紧密地围绕主题，它不可能包罗万象，也并不是把所有精彩的图像、动画、视频放在一起，就能做出好的网站，那样的结果往往会让你的网站没有特色，而且也要耗费很多的精力去维护。B.尽量选择自己擅长或者喜欢的内容作为网站的题材。比如根据所学的专业，自己的爱好、特长等去分析选择网站题材。这样的题材做起来才会有兴趣，兴趣是制作网站的动力，有热情才能设计出优秀的作品。,任务一 规划个人网站,3建立目录结构的一些建议：A.不要将所有文件都存放在根目录下，会造成文件管理

16、混乱。B.按栏目内容建立子目录。C.在每个栏目目录下都建立独立的images目录保存图像资源。D.目录的层次不要太深，建议不要超过3层。E.目录使用英文名称，不要使用中文名称。F.不要使用过长的目录名称。,任务一 规划个人网站,相关知识：,1Dreamweaver8 界面,起始页,面板组,菜单栏,任务二 创建站点,2Dreamweaver8 起始页,打开最近编辑过的网页文件。,选择创建各种类型的网页文件。,选用Dreamwea-ver 8中已有的范例创建CSS样式表、框架集页面等网页文件。,任务二 创建站点,3创建站点的流程,URL的含义,任务二 创建站点,4URL的含义 URL就是“统一资源

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

18、名通常使用小写英文，不能使用空格，最好不要使用特殊字符，不用中文。,2不同站点服务器默认首页名称规则如下表，通常首页命名为index.html。,任务四 创建网站目录结构,任务四 创建网站目录结构,3Dreamweaver8网页设计界面介绍,4页面属性对话框介绍,“外观”选项：用于设置页面的总体外观，包括字体与背景属性的设置，以及插入内容的页边距。在Dreamweaver 8中默认页边距不是0，所以通常在页面内容制作前，首先把上边距和左边距设为0。“链接”选项：用于设置页面内的超级链接内容的样式。“标题”选项：用于设置六种标题字体的默认样式。“标题/编码”选项：用于设置网页的标题和页面文本内容

19、的编码类型。“跟踪图像”选项：把页面效果图插入到页面中来，在制作过程中随时进行跟踪对比。,任务四 创建网站目录结构,Dreamweaver 8“文件”面板上的站点目录结构建立在本地计算机的相应位置，就本网站而言，站点是“D:mysite”文件夹，其他文件和文件夹全部建立在“D:mysite”文件夹中。如果要删除站点中的文件或文件夹，可以在“文件”面板选中它后，用键盘上的Delete键实现。如果在“文件”面板删除了站点中的文件或文件夹，实际上是删除了硬盘中相应位置的文件和文件夹。但是如果删除站点，硬盘中相应位置的文件和文件夹并不会被删除。在站点中对文件或文件夹的删除、复制、剪切、粘贴、重命名等操

20、作，都可以通过单击鼠标右键在“编辑”选项中实现。注意命名网页文件时必须加上扩展名。,5管理站点目录,任务四 创建网站目录结构,“插入”栏“插入”栏包含多种可插入的页面元素（如表格、层和图像等）的按钮，当鼠标指针指向一个按钮时，会出现按扭的名称或功能提示。这些按钮又分为几种类别，可以在“插入”栏的左侧进行类别切换。下面对“插入”栏进行简单的说明，具体使用方法在以后的内容中介绍。“常用”类别：用于插入最常用的对象，例如图像和表格。“布局”类别：用于插入表格、div标签、层和框架。还可以在“标准”（默认）、“扩展表格”和“布局”三个表格视图中进行切换。“表单”类别：用于插入表单和表单元素。“文本”类

21、别：用于插入各种文本格式设置标签和列表格式设置标签，例如b、em、p、h1和ul。“HTML”类别：用于插入水平线、头内容、表格、框架和脚本的HTML标签。“应用程序”类别：用于插入动态元素，如记录集、重复区域以及记录插入和更新表单。“Flash元素”类别：用于插入Flash元素。“收藏”类别：用于将“插入”栏中最常用的按钮分组和组织到某常用位置。,任务四 创建网站目录结构,“文档”窗口“文档”窗口显示当前打开的文档，分为“代码”视图、“设计”视图和同时显示“代码”视图和“设计”视图的“拆分”视图三种视图模式。“文档”工具栏“文档”工具栏左端是快速切换“文档”窗口三种视图模式的选项按钮，然后是

22、一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。“状态”栏“状态”栏提供与正在编辑的文档有关的信息和工具。“标签选择器”位于“状态栏”上，通过它可以选择各种页面元素。“属性”面板“属性”面板用于查看和更改所选对象或文本的各种属性。每种对象具有不同的属性。面板组 Dreamweaver 8的面板组中包含许多面板，每个面板都可以展开或折叠，关闭或打开面板可以在“窗口”菜单进行。,任务四 创建网站目录结构,相关知识：Html标签的功能：,：标签用于HTML代码的最前边，用来标识HTML代码的开始。而标签恰恰相反，它放在HTML代码的最后边，用来标识HTML代码的结束。,：和构成HTML代码的开头部分，在此标签之间可以使用显示网页标题的标签、等，这些标签都是描述HTML代码相关信息的标签，标签之间的内容不会在浏览器的窗口内显示出来。,：标签中的内容是HTML代码的主体部分，在此标签之间可包含、等等众多的标签，它们所定义的文本、图像等将会在浏览器的窗口内显示出来,任务五 使用代码创建网页,