(教学课件)chapter4利用Dreamweaver制作简单网页

1、第4章利用Dreamweaver制作简单网页制作“慧衡”页面计算机工程学院计算机基础教学部学习目标了解Dreamweaver CS6认识HTML标记语言分析网页的页面结构及代码结构创建站点及制作简单网页网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室实训项目深圳慧衡科技有限公司需要制作一个二级页面“慧衡”，用于介绍公司的基本情况。网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室项目分析设计思路：（1）页面元素：包括相应的公司介绍文字、公司的logo、客户案例展示的Flash影片、水平线和特殊字符等。（2）页面布局：由于是初识网页设计，还不懂布局技术，本案例只做一个简

2、单的图文页面，采用较普遍的上中下结构，自上而下对页面元素进行排版，3个版块的排列情况及其中的元素如图所示。（3）配色方案：采用蓝灰色以体现的企业的稳健、深远、平静和谐。配有一些橙色使稳健中增添活力。网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室设计目标网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室预备知识：初识Dreamweaver CS6Dreamweaver CS6工作界面网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室预备知识：初识Dreamweaver CS6工作界面包括：1菜单栏：含有“文件”、“编辑”等10个菜单分类。2文档工具栏：包含

3、了一些与查看文档等相关的常用命令和选项。3插入面板：包括用于创建和插入各种对象（如表格、AP元素和图像）的按钮。当鼠标指针移动到一个按钮上时，会出现该按钮的名称的提示。4文档窗口：是Dreamweaver的主工作区，用于显示和编辑当前创建的文档。网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室预备知识：初识Dreamweaver CS65属性面板：用于检查和编辑当前选定页面元素（如文本、图像或其他插入的对象）的最常用属性，其内容根据选定的元素会有不同变化。6状态栏：位于文档窗口底部，提供与文档相关的其他信息。7浮动面板：集中了网页编辑和站点管理过程中最常用的一些操作。可以展开和折

4、叠这些面板，在菜单栏中的“窗口”下拉菜单中单击面板名称可以显示或者隐藏这些面板。8代码窗口：当在“文档工具栏”中点击“拆分”或“代码”后可以看到代码窗口。在代码窗口中能够查看、输入和修改网页的代码。垂直于代码窗口左侧的是编码工具栏，包含用于执行多种标准编码的操作按钮。网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室预备知识：HTMLHTML文档结构一个标准的HTML网页文档的基本代码结构，如图所示。其标签含义：超文本标记语言标签在文档的最外层，文档中的所有文本和HTML标签都包含在其中，它表示该文档是以超文本标记语言（HTML）编写的。网页设计与制作实用教程（第3版）计算机工程学

5、院计算机基础教研室预备知识：HTMLHTML文档结构头标签是HTML文档的头部标签，在浏览器窗口中，头部信息是不被显示在正文中的，在此标签中可以插入其它标记，用以说明文件的标题和整个文件的一些公共属性。标题标签和是嵌套在头部标签中的，标签之间的文本是文档标题，文档标题显示在浏览器窗口的标题栏。网页主体区标签 标记一般不省略，标签之间的文本是正文，是在浏览器中要显示的页面内容。网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室预备知识：HTMLHTML语法形式HTML标签通常有三种格式：不带属性的双标签：格式为内容。例如： 用于设置一级标题带有属性的双标签：格式为内容。属性名称（na

6、me）和值（value）一起使用。例如：单标签：格式为。例如：换行标签。网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室预备知识：HTMLHTML语法规则Web文档中，标签采用“”作为分割字符。HTML标签不区分大小写，如和是相同的标签。大多数HTML标签可以嵌套，但不能交叉，各层标签为全包容关系。Web文档一行可以书写多个标签，一个标签也可以分多行书写。HTML源代码中的换行、回车符和多个连续空格在浏览时都是无效的。网页中所有显示的内容都应该受限于一个或多个标签，不能存在游离于标签之外的文字或图像等，否则会产生错误。网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室

7、预备知识：HTMLHTML常用标签强制换行标签：放在一行的末尾，可以使后面的文字、图片、表格等显示于下一行，而又不会在行与行之间留下空行，强制换段标签 ：HTML的分段完全依赖于分段标记元素。标题标签：用于把文字设置为各种大小不同的标题。共有六级标题。标签中“h”后面的数字代表标题的级别，该数字越大标题文本就越小。字体设置标签：用于设置文本的字体格式。HTML语言的注释标签或注释内容网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室制作流程任务2：在页面插入基本元素任务4：设置页面元素格式任务3：设置页面属性网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室任务5：添加

8、背景音乐和字幕效果任务1：创建与管理本地站点任务1 创建与管理本地站点创建本地站点管理本地站点管理本地站点文件网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室任务2 在页面插入基本元素在网页中插入图像在网页中添加文本在网页中插入Flash影片在网页中插入水平线在网页中插入特殊字符网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室step在W08文件夹中，新建空白页“introduce.html”。在网页中插入图像文件“banner.gif”。在网页中添加文本。在网页中插入Flash影片文件“show.swf”在网页中插入水平线（宽为1000像素，高为4像素）。在网页中

9、插入特殊字符（空格和版权）。计算机工程学院计算机基础教研室网页设计与制作实用教程（第3版）设置页面属性，其中：页面的背景颜色值为“#5E6C7B”。页面的左、右边距均为130px。任务3 设置页面属性计算机工程学院计算机基础教研室网页设计与制作实用教程（第3版）任务4 设置页面元素格式设置文本格式设置SWF影片格式设置水平线格式网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室Step1 设置文本格式页面文字设置格式首页 方案 技术 服务 设计 案例 培训 合作 慧衡颜色值为“#FE6F00”，“加粗”效果，中文字体为“黑体”，对齐方式为“右对齐”深圳慧衡科技有限公司（InteMa

10、trix）颜色值为“#FE6F00”，“加粗”效果，中文字体为默认字体，英文设置字体为“Comic Sans MS, cursive”公司管理团队，客户案例展示顾正书(Steve Gu) 合伙创始人兼首席咨询师肖卫华博士(Warren Xiao)合伙创始人兼首席分析师程胜(Chalsen Cheng) 首席工程师颜色值为“#FEEEED”中文字体为默认字体慧衡观点慧衡博客 外贸社区 关于慧衡Email订阅 常见问题解答(FAQ) 联系我们颜色值为“#CCC”，字体为“仿宋”，字号为默认值，居中对齐Copyright 2008-2014 InteMatrix 慧衡 All Right Reser

11、ved. 粤ICP备09069737号-1颜色值为“#CCC”，字体为默认值，字号为10px,居中对齐其他文字字体为“仿宋”，字号为17px计算机工程学院计算机基础教研室网页设计与制作实用教程（第3版）Step1 设置文本格式计算机工程学院计算机基础教研室网页设计与制作实用教程（第3版）页面文字设置格式公司管理团队，客户案例展示标题4顾正书(Steve Gu) 合伙创始人兼首席咨询师肖卫华博士(Warren Xiao)合伙创始人兼首席分析师程胜(Chalsen Cheng) 首席工程师标题5STEP2：设置SWF影片格式计算机工程学院计算机基础教研室网页设计与制作实用教程（第3版）通过代码，设

12、置SWF影片居中。STEP3：设置水平线格式计算机工程学院计算机基础教研室网页设计与制作实用教程（第3版）通过代码，设置水平线颜色值为#F15F00。任务5 添加背景音乐和字幕效果网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室添加背景音乐制作文本字幕效果step利用代码添加背景音乐“bg.mp3”。利用代码设置文本滚动字幕效果。预览网页时，文字“客户案例展示”从右向左进行滚动计算机工程学院计算机基础教研室网页设计与制作实用教程（第3版）项目总结计算机工程学院计算机基础教研室网页设计与制作实用教程（第3版）课后练习配套实训利用配套实训文件夹下提供的素材文件，根据前面所学的知识，自主设计与制作一个介绍中国台湾音乐团体“信乐团”的网页，要求如下：创建本地站点文件夹，将网页用到的素材按类别复制到站点文件夹中，启动Dreamweaver，定义站点。新建“index.htm”文件，设置页面背景图像为“bg.jpg”，网页标题为“信乐团”。插入基本的页面元素