第第1 1章章 认识认识Dreamweaver CS4Dreamweaver CS4中文版中文版认识网页设计的基础知识1.1认识Dreamweaver CS4中文版 1.2拓展训练 1.31.1 1.1 认识网页设计的基础知识认识网页设计的基础知识 1.1.1 1.1.1 网页的基本概念网页的基本概念 1.1.2 1.1.2 网页的基本元素网页的基本元素 1.1.3 1.1.3 网站的建设流程网站的建设流程 1.1.4 1.1.4 网页的布局类型网页的布局类型 1.1.1 网页的基本概念网页的基本概念 1. 网页从文件的角度来说，一个网页就是一 个HTML文件。当浏览者输入一个网址或 单击某个链接后，在浏览器中显示出来的 就是一个网页。一般网页上都会有文本、 图片等信息，而复杂一些的网页上还会有 声音、视频、动画等多媒体内容，为网页 增添了丰富的色彩和动感。2网站 网站是一系列逻辑上可以视为一个整 体的网页集合，是许多相关网页有机结合 而组成的一个信息服务中心。对于小型网 站，是指带有一定主题的多个网页集合； 对于大型网站还包含数据库和服务器端应 用程序等如新浪、网易、搜狐等门户网站 。在构成网站的众多网页中，有一个页面 比较特殊，称为首页，即网站的第一个页 面。 3动、静态网页 静态网页是指网页文件中没有程序，只有 HTML代码，一般以.html或.htm为后缀名的网页 ，静态网站内容不会在制作完成后发生变化，任 何人访问都显示一样的内容。 动态网页是指网页文件不仅具有HTML标记 ，而且还含有程序代码，并使用数据库连接。动 态网页能根据不同的时间，不同的来访者显示不 同的内容，动态网站更新方便，一般在后台直接 更新。 1.1.2 网页的基本元素网页的基本元素 虽然网页的形式和内容各种各样，但构成网页 的基本元 素大体相同， 主要包括标题、 网站LOGO、导航、超链接、 广告栏、文本、 图片、动画、视 频与音频等。LOGO导航广告栏动画图像1.1.3 网站的建设流程网站的建设流程 网站的建设流程一般分为前期策划、 网页制作、网站发布、网站推广以及后期 维护等工作。 1. 前期策划 （1）明确网站主题 （2）明确网站名称 （3）设置网站栏目 （4）明确网站风格 2网页制作 在前期策划完成后，接着就进入网页 设计与制作阶段。这一时期的工作按其性 质可分为3类：页面美工设计、静态页面制 作和程序开发。 3网站发布 发布站点前，必须确定网页的存储空间。如 果自己有服务器，配置好后，直接发布到上面即 可。如果自己没有服务器，则最好在网上申请一 个空间来存放网页，并申请一个域名来指定站点 在网上的位置。发布网页可直接使用 Dreamweaver CS4中的“发布站点”功能进行上传 。对于大型站点的上传一般使用FTP软件，如 LeapFTP、CuteFTP等，使用这种方法上传下载 速度都很快。 4网站推广 网站推广活动一般发生在网站上发布 之后，当然也不排除一些网站在筹备期间 就开始宣传的可能。网站推广是网络营销 的主要内容，可以说，大部分的网络营销 活动都是为了网站推广的需要，如发布新 闻、搜索引擎登记、交换链接、网络广告 等。 5后期维护 站点上传到服务器后，首先要检查运 行是否正常，如果有错误要及时更正。另 外，每隔一段时间，还应对站点中的内容 进行更新，以便提供最新消息，吸引更多 的用户。 1.1.4 网页的布局类型网页的布局类型 网页是构成网站的基本元素。一个网 页是否精彩与网页布局有着重要关系。常 见的网页布局类型有“国”字型、“匡”字型 、“三”字型、“川”字型等。 1“国”字型 2“匡”字型 3“三”字型 4“川”字型 5其他类型 (1) 标题文本型 (2) 封面型 (3) Flash 型 (4) 框架型 1.2 1.2 认识认识DreamweaverDreamweaver CS4 CS4中文版中文版 1.2.1 1.2.1 创建站点创建站点 1.2.2 1.2.2 创建文档创建文档 1.2.3 设计文档 1.2.1 创建站点创建站点 在Dreamweaver中设计网页时，网页 通常在在站点中制作的，因此首先需要定 义一个站点。Dreamweaver提供的站点创建 向导能够快速创 建站点。定义的 站点1.2.2 创建文档创建文档 要进行网页设计，就需要有一个设计 文档。 1.2.3 设计文档设计文档 对文档进行设计，就是对文档进行布 局，并向文档中添加网页信息。 1.3 1.3 拓展训练拓展训练1.3.1 1.3.1 设计设计“ “世界之窗世界之窗” ”网页网页 1.3.2 1.3.2 设计设计“ “铁血夜鹰铁血夜鹰” ”网页网页 1.3.1 设计设计“世界之窗世界之窗”网页网页 1插入一个表格。 2输入文本“世界之窗”。 3插入图像。 1.3.2 设计设计“铁血夜鹰铁血夜鹰”网页网页 1确定光标位置 。 2. 插入FlashPaper 。3为“草原”文本上文的图像添 加“交换图像”行为。4为“雪山”文本上方的图片添加【晃 动】效果。5为“草原”文本上文的图像添 加【显示/渐隐】效果。6为 “关闭窗口”文本添加“调 用JavaScript”行为 。 7.使用“floatimg”插件，为网页 添加一张飘浮的图片。飘浮图片