《网页制作：项目02__规划和创建站点--ppt》由会员分享，可在线阅读，更多相关《网页制作：项目02__规划和创建站点--ppt（32页珍藏版）》请在金锄头文库上搜索。
1、主讲：网页设计与制作 Dreamweaver 8项目二 定义和创建站点任务一 如何做好一个网站任务二 创建站点项目二： 定义和创建站点网页设计与制作 Dreamweaver 8任务一小 结任务二实 训任务一 如何做好一个网站随着互联网同人们的日常生活结合得 越来越紧密，网站的数量也在迅速增 加，而形成一个良好的网站制作流程 习惯，并了解网页布局和色彩搭配的 基本知识，可以使网站制作者的效率 大大提高。本任务主要介绍网站制作 流程、网页布局的基本知识。Dreamweaver 8网页设计与制作项目二： 定义和创建站点任务一小 结任务二实 训操作一 网站制作流程1. 前期策划前期策划工作主要包括：
2、l 网站主题 l 网站名称 l 栏目设置 l 整体风格Dreamweaver 8网页设计与制作项目二： 定义和创建站点任务一小 结任务二实 训网页制作阶段的工作按其性质可以分为3类： l 页面美工设计 l 静态页面制作 l 程序开发2. 网页制作Dreamweaver 8网页设计与制作操作一 网站制作流程项目二： 定义和创建站点任务一小 结任务二实 训操作一 网站制作流程发发布网页页可直接使用Dreamweaver 8中的“ 发发布站点”功能进进行上传传。对对于大型站点的上传传一般都使用FTP软软件， 如LeapFTP和CuteFTP等 。 3. 网站发布Dreamweaver 8网页设计与制
3、作项目二： 定义和创建站点任务一小 结任务二实 训网站推广是网络营销的主要内容，可以说，大部分的网络营销活动都是为了网站推广的需要，如发布新闻、搜索引擎登记、交换链接、网络广告等。操作一 网站制作流程4. 网站推广Dreamweaver 8网页设计与制作项目二： 定义和创建站点任务一小 结任务二实 训站点上传到服务器后，首先要检查运行是否正常，如果有错误要及时更正。另外，每隔一段时间，还应对站点中的内容进行更新，以便提供最新消息，吸引更多的用户。操作一 网站制作流程5. 后期维护Dreamweaver 8网页设计与制作项目二： 定义和创建站点任务一小 结任务二实 训也称“同”字型，即最上面是网
4、站的标题以及横幅广告条，接下来是网站 的主要内容，最左和最右分列一些小条目内容，中间是主要部分，最下面 是网站的一些基本信息、联系方式、版权声明等。这是使用最多的一种结 构类型。1. “国”字型Dreamweaver 8网页设计与制作项目二： 定义和创建站点操作二 网页布局的基本方式任务一小 结任务二实 训也称拐角形，这种结构与“国”字型结构很相近，上面是标题及 广告横幅，下面左侧是一窄列链接等，右列是很宽的正文，下面也 是一些网站的辅助信息。2. “匡”字型Dreamweaver 8网页设计与制作项目二： 定义和创建站点操作二 网页布局的基本方式任务一小 结任务二实 训这是一种比较简洁的布局
5、类型，其页面在横向上被分隔为3 部分，上部和下部放置一些标志、导航条、广告条和版权信 息等，中间是正文内容。 3. “三”字型Dreamweaver 8网页设计与制作项目二： 定义和创建站点操作二 网页布局的基本方式任务一小 结任务二实 训即整个页面在垂直方向上被分为3列，内容按栏目分布在这 3列中，最大限度地突出栏目的索引功能。 4. “川”字型Dreamweaver 8网页设计与制作项目二： 定义和创建站点操作二 网页布局的基本方式任务一小 结任务二实 训Dreamweaver 8网页设计与制作项目二： 定义和创建站点操作二 网页布局的基本方式是指页面内容以文本为主，最上面一般是标题，下面
6、是正文 的格式。 5. 标题文本型框架型布局通常分为为左右框架型、上下框架型和综综合框架 型。由于兼容性和美观观等原因，专业设计专业设计 人员员很少采用这这 种结结构。 6. 框架型任务一小 结任务二实 训Dreamweaver 8网页设计与制作项目二： 定义和创建站点操作二 网页布局的基本方式封面型基本上是出现现在一些网站的首页页，大部分由一些精 美的平面设计设计 和一些动动画组组合而成，在页页面中放几个简单简单 的链链接或者仅仅是一个“进进入”的链链接，甚至直接在首页页的图图 片上做链链接而没有任何提示。这这种类类型的网页页布局大多用 于企业业网站或个人网站。7. 封面型Flash型是指整
7、个网页就是一个Flash动画，这是一种比较 新潮的布局方式。其实，这种布局与封面型在结构上是类似 的，无非使用了Flash技术。8. Flash型任务一小 结任务二实 训本任务主要介绍定义站点、创 建文件夹和文件、设置首选参 数的方法。任务二 创建站点Dreamweaver 8网页设计与制作项目二： 定义和创建站点任务一小 结任务二实 训在Dreamweaver中制作网页，首先需要定义一个站点。在定义站点时，首先需要确定是 直接在服务器端编辑还是在本地编辑，还是在 本地计算机中确定存放网页文件的根目录，然 后设置与远程服务器进行数据传递的方式等。经过本操作的学习，需要掌握的内容有：Dreamw
8、eaver 8网页设计与制作项目二： 定义和创建站点操作一 定义站点创建站点操作动画任务一小 结任务二实 训Dreamweaver 8网页设计与制作项目二： 定义和创建站点操作一 定义站点1、打开【站点定义】对话框的3种方法 在Dreamweaver 8操作界面的主菜单中选择【站点】【新建站点】命令。 在【起始页】中选择【Dreamweaver站点】项。 在站点管理器中选择下拉菜单中的【站点】【新建站点】命令。任务一小 结任务二实 训2、【站点定义】对话框的两种状态 【基本】：将会按照向导一步一步地进行，直至完成定义工作，适合初学者。 【高级】：可以在不同的步骤或者不同的分类选项中任意跳转，而
9、且可以做更高级的修改和设置，因此适合在站点维护中使用。Dreamweaver 8网页设计与制作项目二： 定义和创建站点操作一 定义站点任务一小 结任务二实 训3、【管理站点】对话框的使用通过【站点】【管理站点】命令可打开【管理站点】 对话框。Dreamweaver 8网页设计与制作项目二： 定义和创建站点操作一 定义站点任务一小 结任务二实 训4、站点管理器的使用打开Dreamweaver 8，选择【设计器】风格的操作界面 。在右侧【文件】面板中有3个选项卡，其中【文件】选项卡就是站点管理器的缩略图。Dreamweaver 8网页设计与制作项目二： 定义和创建站点操作一 定义站点没有定义站点时
10、的状态 已定义站点的状态 任务一小 结任务二实 训站点管理器主要用来管理文件及文件夹，在后期的网站维护中将起到非 常重要的作用。Dreamweaver 8网页设计与制作项目二： 定义和创建站点操作一 定义站点展开后的【站点管理器】窗口 任务一小 结任务二实 训经过本操作的学习，应该掌握的内容主要有：Dreamweaver 8网页设计与制作项目二： 定义和创建站点操作二 创建文件夹和文件创建文件夹及文件1、文件夹和文件命名的原则文件夹的命名最好遵循一定的规则，以便于理解和查找，如使用栏目 名称的首字母等。网页中还会用到图片文件，可以将其全部放在“images” 或“pics”文件夹中，也可以放在
11、各个栏目内容所在文件夹下的“images”或 “pics”文件夹中，这要根据实际需要而定。任务一小 结任务二实 训一般首页文件名为“index.htm”或者“index.html”。如果页面是使用ASP 语言编写的，那么文件名变为“index.asp”。如果是用ASP.NET语言编写 的，则文件名为“index.aspx”。文件名的开头不能使用数字、运算符等符号，文件名也最好不要使用 中文。文件的命名一般遵循以下4个原则。汉语拼音，如“JianJie.htm”。拼音缩写，如“gsjj.htm”。英文缩写，如“asp.htm”。英文原义，如“BookList.htm”。Dreamweaver 8
12、网页设计与制作项目二： 定义和创建站点操作二 创建文件夹和文件任务一小 结任务二实 训2、在【文件】面板中创建文件夹和文件的基本方法在【文件】【文件】面板中右击根文件夹，在弹出的快捷菜单中选择【新建 文件夹】命令，将创建一个文件夹。在【文件】【文件】面板中右击根文件夹，在弹出的快捷菜单中选择【新建 文件】命令，将创建一个新文件。还可以通过【文件】【新建】菜单 命令、Dreamweaver 8启动时的【起始页】对话框中的命令等方法创建文件。Dreamweaver 8网页设计与制作项目二： 定义和创建站点操作二 创建文件夹和文件任务一小 结任务二实 训3、在站点地图中将文件链接起来的方法（1）在【
13、站点定义】对话框的 【高级】【站点地图布局】分类中定义好站点的主页。（2）在【文件】【文件】面板中单击 【展开/折叠】按钮，展开站点管 理器，然后单击 【站点地图】按钮，从其下拉菜单中选择“地图和文件”。（3）用鼠标单击左侧站点导航中的“index.asp”，然后依次拖动其右上方的指针图标到右侧本地文件夹中相应的文件上，这样就建立了主页文件 和其他文件的链接。Dreamweaver 8网页设计与制作项目二： 定义和创建站点操作二 创建文件夹和文件任务一小 结任务二实 训在Dreamweaver中可以通过设置【首选参数】来定义 Dreamweaver的使用规则。如，新建文档默认的扩展名是 什么，
14、在文本处理中是否允许输入多个连续的空格、在定 义文本或其他元素外观时是使用CSS还是HTML标签，不可 见元素是否显示等。要求通过本操作的学习掌握设置【首选参数】的基本方法 。Dreamweaver 8网页设计与制作项目二： 定义和创建站点操作三 设置首选参数任务一小 结任务二实 训1、设置【常规】分类参数在【文档选项】中勾选【显示起始页】复选框，在【编辑选项】中勾 选【允许多个连续的空格】和【使用CSS而不是HTML标签】复选框 。Dreamweaver 8网页设计与制作项目二： 定义和创建站点操作三 设置首选参数任务一小 结任务二实 训2、设置【不可见元素】分类 参数可以定义不可见元素是否
15、显示，只需勾选相应的复选框即可，建议全部选择。Dreamweaver 8网页设计与制作项目二： 定义和创建站点操作三 设置首选参数任务一小 结任务二实 训3、设置【复制/粘贴】分类 参数定义粘贴到Dreamweaver设计视图中的文本格式。Dreamweaver 8网页设计与制作项目二： 定义和创建站点操作三 设置首选参数任务一小 结任务二实 训4、设置【新建文档】分类参数在【默认文档】下拉列表中选择“HTML”，在【默认扩展名】文本框 中输入扩展名格式，如“.html”或“.htm”等，在【默认文档类型】下拉列 表中选择“HMTL 4.01 Transitional”。Dreamweaver 8网页设计与制作项目二： 定义和创建站点操作三 设置首选参数任务一小 结任务二实 训实训 创建个人站点根据自己的爱好规划一个个人站点，要有明确的主题，根 据主题进行栏目规划和站点结构规划，然后在Dreamweaver 8中 定义站点，并创建相应的文件夹和文件。通过该实训，让读者 学会规划、定义和创建站点的方法。【实训目的】l 进一步巩固站点规划的有关知识。 l 进一步巩固定义和创建站点的基本方法。 l 进一步巩固在站点
