项目一 认识Dreamweaver 8-.ppt

1、Dreamweaver 8中文版网页制作基础,老虎工作室2012年12月,项目一 认识Dreamweaver 8,任务一 网页案例赏析,任务二 认识网页制作工具,任务三 制作一个简单的网页,实训 定义站点并创建网页,本项目主要是让读者对网页制作软件Dreamweaver 8有一个总体认识。首先欣赏一些优秀网页案例，然后了解常用网页制作工具以及Dreamweaver的发展历程、基本功能和作用，最后通过制作一个简单的网页来认识Dreamweaver 8的工作界面，并学习常用工具栏和面板的基本使用方法。,任务一 网页案例赏析,通过网页案例欣赏，增强读者对网页设计与制作的兴趣。 1、北京大学主页 2、

2、海信集团主页 3、网易体育主页 4、百度主页,结构清晰、布局简洁，充分结合了现代教育理念，将学习与网络合理地进行了整合，实现了教学对象广泛、使用方便、时间自由以及节约成本等特点。,1、北京大学主页,从内容上看，其注重宣传企业的品牌和形象以及产品和服务。从结构上看，页面比较简洁，内容布局合理，值得学习和借鉴。,2、海信集团主页,主体部分的布局模式采用的是左中右三栏结构，这也是常用的网页布局模式之一。在栏目和内容较多时，合理划分栏目结构是非常重要。,3、网易体育主页,页面比较简洁，除了网站标志和页脚信息，主体部分只有简单的一行文字和一些表单域。百度这种典雅的用户界面设计是值得借鉴的。,4、百度主页

3、,任务二 认识网页制作工具,（一）了解网页制作工具 （二）了解Dreamweaver,（一）了解网页制作工具,按工作方式不同，通常可以将网页制作软件分为两类，一类是所见即所得式的网页编辑软件，如Visual Studio、Dreamweaver、FrontPage、HotMetal等，另一类是直接编写HTML源代码的软件，如Hotdog、Editplus、HomeSite等，也可以直接使用所熟悉的文字编辑器来编写源代码，如记事本、写字板等，但要保存成网页格式的文件。 要想制作出精致美观、丰富生动的网页，往往需要多种软件的互相配合，如网页制作软件Dreamweaver，图像处理软件Firewor

4、ks或Photoshop，动画创作软件Flash等。,1、概况 Dreamweaver是美国Macromedia公司于1997年发布的集网页制作和网站管理于一身的所见即所得式的网页编辑器。 2002年5月，Macromedia发布Dreamweaver MX，Dreamweaver一跃成为专业级别的开发工具。 2003年9月，Macromedia发布Dreamweaver MX 2004，提供了对CSS的支持，促进了网页专业人员对CSS的普遍采用。 2005年8月，Macromedia发布Dreamweaver 8，加强了对XML和CSS的技术支持，并简化了工作流程。 2005年底，Macro

5、media公司被Adobe公司并购，自此，Dreamweaver就归Adobe公司所有。 2007年7月，Adobe公司发布Dreamweaver CS3。 2008年9月发布Dreamweaver CS4。 2010年4月发布Dreamweaver CS5。 2011年4月发布Dreamweaver CS5.5。,（二）了解Dreamweaver,2、优点 对于初学者来说，Deamweaver的可视化效果让用户比较容易入门，具体表现在两个方面：一是静态页面的编排，这和Microsoft Office等办公可视化软件是类似的；二是交互式网页的制作，这是它与其他网页制作软件不同的重要特征。利用D

6、eamweaver 8可以比较容易地制作交互式网页，很容易链接到Access、SQL Server等数据库。,（二）了解Dreamweaver,任务三 制作一个简单的网页,（一） 定义站点 （二） 创建和保存文件 （三） 设置文本属性 （四） 保存工作区布局,（一） 定义站点,需要掌握的内容主要有： 1、【起始页】对话框的构成和作用 2、定义静态站点的基本过程,1、【起始页】对话框的构成和作用,其中有三项列表：【打开最近项目】、【创建新项目】和【从范例创建】。,2、定义静态站点的基本过程,(二） 创建和保存文件,需要掌握的内容主要有： 1、创建文件的方法 2、保存文件的方法 3、Dreamwe

7、aver 8 窗口界面 4、浮动面板组 5、【标准】工具栏 6、【文件】面板,1、创建文件的方法,在【起始页】对话框创建文件的基本方法是，单击【创建新项目】【HTML】命令，创建一个空白的HTML文档。,2、保存文件的方法,（1）单击【标准】工具栏中的【保存】按钮保存文件。 （2）选择主菜单中的【文件】/【保存】命令或【另存为】命令保存文件。,3、Dreamweaver 8 窗口界面,4、浮动面板组,在Dreamweaver 8窗口中的工具栏或各种面板，可以通过鼠标操作将它们从窗口中脱离出来成为浮动工具栏或面板。浮动面板的显示与隐藏命令都集中在主菜单栏中的【窗口】菜单中。,5、【标准】工具栏,

8、选择主菜单中的【查看】【工具栏】【标准】命令显示【标准】工具栏。,6、【文件】面板,（三） 设置文本属性,需要掌握的内容主要有： 1、【文档】工具栏 2、【属性】面板 3、【插入】面板 4、水平线及其属性设置,1、【文档】工具栏,（1）单击【设计】按钮将编辑区域切换到【设计】视图，在其中可以对网页进行编辑。 （2）单击【代码】按钮，可以将编辑区域切换到【代码】视图，在其中可以编写或修改网页源代码。 （3）单击【拆分】按钮，可以将编辑区域切换到【拆分】视图，在该视图中整个编辑区域分为上下两个部分，上方为【代码】视图，下方为【设计】视图。,2、【属性】面板,如果没有显示【属性】面板，在主菜单中选择

9、【窗口】【属性】命令即可显示。,3、【插入】面板,【插入】面板通常有两种表现形式：制表符格式和菜单格式。,4、水平线及其属性设置,在【插入】/【HTML】面板中单击 （水平线）按钮，或在主菜单中选择【插入】/【HTML】/ 【水平线】命令插入一条水平线。,（四） 保存工作区布局,1、掌握保存工作区布局的方法 在主菜单栏中选择【窗口】【工作区布局】【保存当前】命令。,2、掌握管理工作区布局的方法 在主菜单中选择【窗口】【工作区布局】【管理】命令。,实训 定义站点并创建网页,下面通过实训来增强读者对Dreamweaver 8窗口的组成、工具栏和面板的功能及基本操作的感性认识。 要求：首先定义一个静态站点，然后创建和编排网页文档。,制作“送孟浩然之广陵”网页,项目小结,本项