网页设计与制作项目教学王君学孙海伦金哲第1章教案项目1认识Dreamweaver8章节.pptVIP

项目一 认识Dreamweaver8 任务一 了解Dreamweaver 8 Dreamweaver是美国Macromedia公司（1984年成立于美国芝加哥，2005年被Adobe公司并购）开发的集网页制作和网站管理于一身的所见即所得式网页编辑器，是针对专业网页设计师而设计的视觉化网页开发工具，它可以让设计师轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。由Macromedia公司开发的Dreamweaver与Flash、Fireworks一起被称为“网页三剑客”，在Macromedia公司被Adobe公司并购后，2007年由Adobe公司发布的网页三剑客是指Dreamweaver、Flash和Photoshop。 对于初学者来说，Deamweaver的可视化效果让用户比较容易入门，具体表现在两个方面：一是静态页面的编排，这和Microsoft Office等办公可视化软件是类似的；二是交互式网页的制作，这是它与其他网页制作软件不同的重要特征。利用Deamweaver 8可以比较容易地制作交互式网页，很容易链接到Access、SQL Server等数据库。 Dreamweaver集建立站点、布局网页、开发应用程序、编辑代码和发布网站等功能于一体，可轻松地完成网站开发的所有工作，因此，在各个行业领域都得到了广泛的应用，如个人网站、教育科研网站、企业网站、商业网站、政府网站、公益性网站以及其他网站等。 任务二 欣赏优秀网站 下面来欣赏几个优秀网站，希望通过欣赏读者能够增强对网页设计与制作的兴趣。 图1-1为中国海洋大学网站主页，其结构清晰、布局简洁，充分结合了现代教育理念，将教学与网络合理地进行了整合，实现了教学对象广泛、使用方便、时间自由以及节约成本等特点。 图1-2为蒙牛集团网站主页。从内容上看，其注重宣传企业的文化和形象。从结构上看，页面比较简洁，美工效果突出体现出了产品的特色。内容布局合理，值得学习和借鉴。 图1-3为搜狐网站主页。其内容丰富，门类众多。主体部分的布局模式采用的是左中右三栏结构，这也是一种常用的网页布局模式。由于门户网站众多的栏目和内容，因此，在设计网页时合理地划分栏目结构是非常重要的一项工作。 图1-3 图1-4所示为谷歌主页，这个页面比较简洁，除了网站标志和页脚信息，主体部分只有简单的一行文字和一些表单域，重点体现了主页功能。读者在学习网页制作时，谷歌这种典雅的用户界面设计是值得借鉴的。 图1-4 任务三 制作一个简单的网页 （一） 定义站点 （二） 创建和保存文件 （三） 设置文本属性 （四） 保存工作区布局 （一） 定义站点 在Dreamweaver中，网页通常是在站点中制作的，因此首先需要定义一个站点。 1.在起始页中选择【创建新项目】／【Deamweaver站点】选项，打开【xiangmu1的站点定义为】对话框，在【您打算为您的站点起什么名字】文本框中输入站点名“xiangmu1”， 如图所示。 2. 单击 按钮，在打开的对话框中点选【否，我不想使用服务器技术】单选钮，如图所示。 3.接着单击 按钮，在打开的对话框中点选第1个单选钮，文件存储位置根据实际情况确定，如图1-6所示。 4.单击 按钮，在对话框的【您如何连接到远程服务器？】下拉列表中选择【无】选项，如图所示。 5.单击 按钮，显示站点定义信息 ，最后单击 按钮，完成站点定义设置 。如图所示。 （二） 创建和保存文件 站点定义完成后，下面开始创建和保存文件。 【操作步骤】 1.在起始页中选择【创建新项目】／【HTML】选项，创建一个空白的HTML文档，如图所示。 3.单击【标准】工具栏中的（保存）按钮，将新建文档保存在刚刚创建的站点中，文件名为“index.htm”，如图所示。 （三） 设置文本属性 文件已经创建完毕并进行了命名保存，下面添加一些文本并进行属性设置。 【操作步骤】 1.在文档中输入文本，每一行以按Enter键结束，如图1-12所示。 2.在【文档】工具栏的【标题】文本框中输入“摄影常识”，如图1-13所示。它将显示在浏览器的标题栏中。 3.用鼠标光标选中文档标题“摄影常识”，在【属性】面板的【格式】下拉列表中选择【标题1】选项 4.将鼠标光标置于文本所在行，在【属性】面板的【字体】下拉列表中选择【编辑字体列表】选项，在【编辑字体列表】对话框中，在【可用字体】下拉列表中选择【幼圆】选项，单击 按钮，添加字体。单击 按钮，完成字体的添加。 5.选择正文文本主体部分，然后在【属性】面板的【字