模块八网页制作DreamweaverCS5模块八网页制作DreamweaverCS5章节.pptVIP

模块八 网页制作 Dreamweaver CS5 学习目标 掌握站点的创建和管理操作 掌握网页中各个对象的添加 熟悉对象属性的设置方法 熟悉超链接的设置 掌握CSS样式和层div的应用 项目一 创建“网站开发” 项目二 编辑“网站开发” 项目一 创建“网站开发” 任务一 站点的创建和管理 任务二 网页文件头的设置 任务三 网站发布 任务一 站点的创建和管理 1. Dreamweaver CS5的界面 2.站点 一个站点（site）是一个存储区，它存储了一个网站包含的所有文件。Dreamweaver的使用是以站点为基础的，必须为每一个要处理的网站建立一个本地站点 任务一 站点的创建和管理 3.Dreamweaver CS5窗口视图方式 Dreamweaver CS5窗口有3种视图方式： （1）代码视图：显示网页的所有代码。 任务一 站点的创建和管理 3.Dreamweaver CS5窗口视图方式 （2）设计视图：以所见即所得的方式显示所有网页元素，提供可视化界面来操作页面元素，直接在代码视图中生成相对应的代码。 任务一 站点的创建和管理 3.Dreamweaver CS5窗口视图方式 （3）拆分视图：将文档窗口分成左、右两部分。左部分是代码部分，右部分是设计部分。 任务一 站点的创建和管理 ? 任务设计 1. 创建新站点 在Dreamweaver CS5中创建站点，通常会先创建本地站点，编辑好后再上传到远程站点的服务器上。本节将介绍如何创建本地站点。 2. 管理站点 创建好站点后，需要对站点进行管理 任务一 站点的创建和管理 任务二 网页文件头的设置 ? 任务设计 1. 设置META META是用来记录当前网页的相关信息，包括编码、作者、版权等。 2. 设置关键字 关键字的作用是协助Internet上的搜索引擎寻找网页。 3. 设置刷新 4. 设置链接 任务三 网站发布 ? 任务设计 1．上传文件 2. 下载文件 3. 同步文件 项目二 编辑“网站开发” 任务一 网页的简单布局 任务二 插入文本 任务三 插入图像 任务四 插入表单 任务五 插入超链接 任务一 网页的简单布局 1. 表格布局 表格（table）是页面的重要元素，是页面排版的主要方法。一个表格通常由行和列组成，每行由一个或多个单元格组成。表格中的横向称为行，纵向称为列，一行与一列相交所产生的区域称为单元格。 2. 框架布局 每个框架都是一个独立的网页，它们通过框架集显示在浏览器窗口中。框架集是HTML文件，它定义一组框架的布局和属性，包括框架数量、框架大小、载入到框架的网页等属性。框架集并不在浏览器中显示，它只是用于保存框架网页的一个容器。 任务一 网页的简单布局 3.制作IFrame框架页面 IFrame是Inline Frame的缩写，一般称为内联框架或浮动框架。 4. CSS样式表 CSS的全称是Cascading Style Sheet，通常又称为“层叠样式表（Style Sheet）”，它是用来进行网页风格设计的。 任务一 网页的简单布局 任务二 插入文本 1．输入文本信息 输入文本的方法很简单，在文档窗口的编辑区域直接输入文本或拷贝其他文档的内容粘贴到文本中。 2．设置文本格式 利用文本属性可以方便地修改选中文本的字体、字号、样式、对齐方式等，以获得预期的效果。 任务设计 制作导航栏 2. 制作侧边栏 任务二 插入文本 任务三 插入图像 任务设计 网页中间部分是两行图片。本任务主要来介绍图片的插入方法。跟“知识链接”里面介绍的插入方式很类似，代码如：img src=“images/pic4.gif” width=“107” height=“87” /。不同的地方是，此处将图片放在列表中，采用横向图片列表。在main层中添加一个层index_pic。 任务四 插入表单 任务设计 表单在日常网页中应用十分广泛。为了更好的介绍表单，本小节将制作一个用户注册页面。 1．插入表单域 2．插入文本字段和密码域 3．插入单选按钮 4．插入复选框 5．插入选择（列表/菜单） 任务四 插入表单 任务设计 表单在日常网页中应用十分广泛。为了更好的介绍表单，本小节将制作一个用户注册页面。 6. 插入跳转菜单 7. 插入文本区域 8. 插入文件域 9. 插入按钮 任务五 插入超链接 任务设计 超链接是网页中最基本、最重要的元素之一。超链接一般分为文本链接和图片链接。 1. 文本超链接 2．创建电子邮件超链接 3．创建下载文件超链接 4．创建图像超链接 谢谢您的聆听！ Adobe Dreamweaver CS