多媒体技术应用项目化教程（修订版） 课件 6多媒体综合应用网站设计与制作 .pptx

项目六多媒体综合应用—“科顺建筑防水公司网站”设计与制作

学习目标知识目标能力目标1.了解多媒体网页的基本概念。2.熟悉DreamweaverCC2018软件界面与基本工具。3.了解HTML语言、Div及CSS基本知识。4.掌握运用DreamweaverCC2018软件制作和发布网站的基本过程。1.能根据需求分析确定网站主题及风格、规划网站结构并进行页面版式设计。2.能进行网站的总体设计、界面设计、制作各页面并将各页进行有效整合；能应用DreamweaverCC2018软件设计、制作、测试、发布网站。3.能编写网站设计说明书。4.能与人良好沟通，合作完成学习任务。

目录一二三四五六七6.1项目提出6.2项目分析6.3相关知识6.4项目实现6.5项目评价6.6项目总结6.7拓展训练

6.1项目提出网站是指在因特网上根据一定的规则使用HTML等工具制作,用于展示特定内容的相关网页的集合。用户可以通过网页浏览器来访问网站，获取自己需要的资讯或者享受网络服务。本项目以“科顺建筑防水公司”网站的设计和制作为例，培养学生网页的设计思想与制作方法，从网站规划、网页版面设计入手，逐步展开实际制作网页与网站的全过程。重点学习使用DreamweaverCC2018软件进行页面布局、样式设置、插入图片、插入图片等技术。

6.2项目分析网站设计与制作的全过程是指从网站需求分析开始到完成发布的整个过程。如果是小规模项目，可以一个人承担多项任务，自己完成，但通常情况是３～４名开发者（设计师、程序员等）一起组成一个小组来完成项目。网站设计与制作的基本流程网站需求分析规划网站结构素材准备设计与制作网页网站测试与发布网站设计与制作的基本流程

6.2项目分析1．关于项目主题本项目的任务是完成“科顺建筑防水公司”网站的设计与制作，包括“科顺建筑防水公司”网站的首页及各级页面的设计与制作。通过对“科顺建筑防水公司”网站的建构，本项目集成了工程案例、业务范围、客户服务、关于我们等一级模块，每个模块包含企业的各类具体内容。2．项目用户分析清楚定位网站用户群体，是“科顺建筑防水公司”网站是否成功的前提条件。一般可以将用户分为３类：企业项目合作者、已成熟客户和产品潜在客户。企业项目合作者可以通过网站了解企业实力；已成熟客户可以通过网站了解最新信息；而产品潜在客户即访问者，可以通过网站了解企业整体形象及产品的详细信息。

6.3相关知识DreamweaverCC2018工作界面DreamweaverCC2018工作界面

6.4项目实现6.4.1总体设计1．网站结构设计网站的页面基本结构包括首页、二级页面等。在实际建设网站过程中可根据实际需求，适当调整页面的级数。2．网站内容设计“科顺建筑防水公司”网站从为客户提供企业信息出发，设计了首页、二级页面和三级页面。为了对网页制作中用的素材进行分类管理，建立了ｉｍａｇｅｓ与ｏｔｈｅｒｓ等素材文件夹，用于放置各类多媒体素材。网站主要栏目结构一级页面二级页面二级页面栏目首页工程案例防水工程案例、运动场地案例、室内地坪案例业务范围防水材料销售、运动场地营造、室内地坪、化工防腐客户服务服务体系、日常防护、留言反馈关于我们关于我们、企业文化、新闻动态、联系我们

6.4项目实现文件面板中的站点文件夹6.4.2首页制作1．新建站点最终效果图:

6.4项目实现①创建站点文件夹。定义站点②定义站点。6.4.2首页制作主要操作步骤:

6.4项目实现首页模块化布局预览效果6.4.2首页制作2．首页模块化布局最终效果图:

6.4项目实现body的CSS规则定义主要操作步骤:①新建文档。②保存文档。③设置页面标题。④设置页面初始化CSS样式。

6.4项目实现主要操作步骤:⑤插入和设置Div标签container。插入DIV标签设置container标签CSS样式

6.4项目实现主要操作步骤:⑥插入Div标签header。⑦插入和设置Div标签banner。设置banner标签CSS样式

6.4项目实现主要操作步骤:⑧插入Div标签content。⑨插入和设置Div标签footer。设置footer标签CSS样式

6.4项目实现首页顶部效果6.4.2首页制作3．首页顶部制作最终效果图:

6.4项目实现主要操作步骤:①插入和设置Div标签logo。②插入图像。设置logo标签CSS样式

6.4项目实现主要操作步骤:③插入和设置Div标签nav。④插入和设置Div标签clear。设置nav标签CSS样式插入clear标签设置clear标签CSS样式

6.4项目实现主要操作步骤:⑤输入文字。⑥设置项目列表。文字列表效果

6