1、网页设计与制作实用网页设计与制作实用教程（第教程（第3 3版）版）高等教育出版社高等教育出版社第4章利用Dreamweaver制作简单网页制作“慧衡”页面计 算 机 工 程 学 院 计 算 机 基 础 教 学部学习目标 了解Dreamweaver CS6 认识HTML标记语言 分析网页的页面结构及代码结构 创建站点及制作简单网页网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室实训项目深圳慧衡科技有限公司需要制作一个二级页面“慧衡”，用于介绍公司的基本情况。网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室项目分析设计思路
2、：（1 1）页面页面元素元素：包括相应的公司介绍文字、公司的logo、客户案例展示的Flash影片、水平线和特殊字符等。（2 2）页面页面布局布局：由于是初识网页设计，还不懂布局技术，本案例只做一个简单的图文页面，采用较普遍的上中下结构，自上而下对页面元素进行排版，3个版块的排列情况及其中的元素如图所示。（3 3）配色配色方案方案：采用蓝灰色以体现的企业的稳健、深远、平静和谐。配有一些橙色使稳健中增添活力。网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室设计目标网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室预备知识：
3、初识D Dreamweaverreamweaver CS6CS6Dreamweaver CS6工作界面网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室预备知识：初识D Dreamweaverreamweaver CS6CS6工作界面包括：1菜单栏：含有“文件”、“编辑”等10个菜单分类。2文档工具栏：包含了一些与查看文档等相关的常用命令和选项。3插入面板：包括用于创建和插入各种对象（如表格、AP元素和图像）的按钮。当鼠标指针移动到一个按钮上时，会出现该按钮的名称的提示。4文档窗口：是Dreamweaver的主工作区，用于显示和编辑当前创建的文档。网 页 设
4、 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室预备知识：初识D Dreamweaverreamweaver CS6CS65属性面板：用于检查和编辑当前选定页面元素（如文本、图像或其他插入的对象）的最常用属性，其内容根据选定的元素会有不同变化。6状态栏：位于文档窗口底部，提供与文档相关的其他信息。7浮动面板：集中了网页编辑和站点管理过程中最常用的一些操作。可以展开和折叠这些面板，在菜单栏中的“窗口”下拉菜单中单击面板名称可以显示或者隐藏这些面板。8代码窗口：当在“文档工具栏”中点击“拆分”或“代码”后可以看到代码窗口。在代码窗口中能够查看、输入和修改网页的代码。垂直
5、于代码窗口左侧的是编码工具栏，包含用于执行多种标准编码的操作按钮。网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室预备知识：HTMLHTMLHTMLHTML文档结构一个标准的HTML网页文档的基本代码结构，如图所示。其标签含义：超文本标记语言标签超文本标记语言标签在文档的最外层，文档中的所有文本和HTML标签都包含在其中，它表示该文档是以超文本标记语言（HTML）编写的。网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室预备知识：HTMLHTMLHTMLHTML文档结构头头标签标签是HTML文档的头部标签，在浏览器窗口中
6、，头部信息是不被显示在正文中的，在此标签中可以插入其它标记，用以说明文件的标题和整个文件的一些公共属性。标题标签标题标签和是嵌套在头部标签中的，标签之间的文本是文档标题，文档标题显示在浏览器窗口的标题栏。网页主体区标签网页主体区标签 标记一般不省略，标签之间的文本是正文，是在浏览器中要显示的页面内容。网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室预备知识：HTMLHTMLHTMLHTML语法形式HTML标签通常有三种格式：不带属性的双标签：格式为内容。例如：用于设置一级标题带有属性的双标签：格式为内容。属性名称（name）和值（value）一起使用。例如
7、：单标签：格式为。例如：换行标签。网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室预备知识：HTMLHTMLHTMLHTML语法规则Web文档中，标签采用“”作为分割字符。HTML标签不区分大小写，如和是相同的标签。大多数HTML标签可以嵌套，但不能交叉，各层标签为全包容关系。Web文档一行可以书写多个标签，一个标签也可以分多行书写。HTML源代码中的换行、回车符和多个连续空格在浏览时都是无效的。网页中所有显示的内容都应该受限于一个或多个标签，不能存在游离于标签之外的文字或图像等，否则会产生错误。网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算
8、机工程学院计算机基础教研室预备知识：HTMLHTMLHTMLHTML常用标签 强制强制换行标签换行标签/：放在一行的末尾，可以使后面的文字、图片、表格等显示于下一行，而又不会在行与行之间留下空行，强制换段标签强制换段标签/p ：HTML的分段完全依赖于分段标记元素。标题标题标签标签 ：用于把文字设置为各种大小不同的标题。共有六级标题。标签中“h”后面的数字代表标题的级别，该数字越大标题文本就越小。字体设置标签字体设置标签font：用于设置文本的字体格式。HTMLHTML语言的注释标签语言的注释标签或注释内容网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室制
9、作流程任务2：在页面插入基本元素任务4：设置页面元素格式任务3：设置页面属性网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室任务5：添加背景音乐和字幕效果任务1：创建与管理本地站点任务1 1 创建与管理本地站点创建本地站点管理本地站点管理本地站点文件网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室任务2 2 在页面插入基本元素在网页中插入图像在网页中插入图像在网页中添加文本在网页中添加文本在网页中插入在网页中插入FlashFlash影片影片在网页中插入水平线在网页中插入水平线在网页中插入特殊字符在网页中插入特殊字符网
10、页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室STEPSTEP在W08文件夹中，新建空白页“introduce.html”。在网页中插入图像文件“banner.gif”。在网页中添加文本。在网页中插入Flash影片文件“show.swf”在网页中插入水平线（宽为1000像素，高为4像素）。在网页中插入特殊字符（空格和版权）。计算机工程学院计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）设置页面属性，其中：页面的背景颜色值为“#5E6C7B”。页面的左、右边距均为130px。任务3 设置页面属性计算机工程学院计算机基础教研室网 页 设
11、计 与 制 作 实 用 教 程（第 3 版）任务4 4 设置页面元素格式设置设置文本格式文本格式设置设置SWFSWF影片格式影片格式设置水平线格式设置水平线格式网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室STEP1 STEP1 设置文本格式页面文字页面文字设置格式设置格式首页首页 方案方案 技术技术 服务服务 设计设计 案例案例 培训培训 合作合作 慧衡慧衡颜色值为“#FE6F00”，“加粗”效果，中文字体为“黑体”，对齐方式为“右对齐”深圳慧衡科技有限公司（深圳慧衡科技有限公司（InteMatrixInteMatrix）颜色值为“#FE6F00”，“
12、加粗”效果，中文字体为默认字体，英文设置字体为“Comic Sans MS,cursive”公司管理团队，客户案例展示公司管理团队，客户案例展示顾正书顾正书(Steve(Steve GuGu)合伙创始人兼首席咨询师合伙创始人兼首席咨询师肖卫华博士肖卫华博士(Warren Xiao)(Warren Xiao)合伙创始人兼首席分析师合伙创始人兼首席分析师程胜程胜(ChalsenChalsen Cheng)Cheng)首席工程师首席工程师颜色值为“#FEEEED”中文字体为默认字体慧衡观点慧衡博客慧衡观点慧衡博客 外贸社区外贸社区 关于慧衡关于慧衡EmailEmail订阅订阅 常见问题解答常见问题解
13、答(FAQ)(FAQ)联系我们联系我们颜色值为“#CCC”，字体为“仿宋”，字号为默认值，居中对齐Copyright 2008-2014 InteMatrix Copyright 2008-2014 InteMatrix 慧衡慧衡 All Right All Right Reserved.Reserved.粤粤ICPICP备备0906973709069737号号-1-1颜色值为“#CCC”，字体为默认值，字号为10px,居中对齐其他文字其他文字字体为“仿宋”，字号为17px计算机工程学院计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）STEP1 STEP1 设置文本格式
14、计算机工程学院计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）页面文字页面文字设置格式设置格式公司管理团队，客户案例展示公司管理团队，客户案例展示标题4顾正书顾正书(Steve(Steve GuGu)合伙创始人兼首席咨询师合伙创始人兼首席咨询师肖卫华博士肖卫华博士(Warren Xiao)(Warren Xiao)合伙创始人兼首席分析师合伙创始人兼首席分析师程胜程胜(ChalsenChalsen Cheng)Cheng)首席工程师首席工程师标题5STEP2：设置SWF影片格式计算机工程学院计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）通过代码，
15、设置SWF影片居中。STEP3：设置水平线格式计算机工程学院计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）通过代码，设置水平线颜色值为#F15F00。任务5 5 添加背景音乐和字幕效果网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室添加背景音乐添加背景音乐制作文本字幕效果制作文本字幕效果STEPSTEP利用代码添加背景音乐“bg.mp3”。利用代码设置文本滚动字幕效果。预览网页时，文字“客户案例展示”从右向左进行滚动计算机工程学院计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）项目总结计算机工程学院计算机基
16、础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）课后练习1.1.配套实训配套实训利用配套实训文件夹下提供的素材文件，根据前面所学的知识，自主设计与制作一个介绍中国台湾音乐团体“信乐团”的网页，要求如下：创建本地站点文件夹，将网页用到的素材按类别复制到站点文件夹中，启动Dreamweaver，定义站点。新建“index.htm”文件，设置页面背景图像为“bg.jpg”，网页标题为“信乐团”。插入基本的页面元素包括文本、图像、水平线等对象。设置页面文字的文本格式。查看本机显示分辨率，计算页面留白边距使页面内容位于背景图像的白色区域中。在“代码”视图中通过代码设置某一页面元素的具有滚动效果。网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室课后练习2.2.同步测试同步测试通过教材第4章“同步测试”检验自己是否掌握了本章的相关知识点与技能点。网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室
