(教学课件)chapter4利用Dreamweaver制作简单网页_第1页
(教学课件)chapter4利用Dreamweaver制作简单网页_第2页
(教学课件)chapter4利用Dreamweaver制作简单网页_第3页
(教学课件)chapter4利用Dreamweaver制作简单网页_第4页
(教学课件)chapter4利用Dreamweaver制作简单网页_第5页
已阅读5页，还剩51页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第4章利用Dreamweaver制作简单网页

——制作“慧衡”页面计算机工程学院计算机基础教学部第4章利用Dreamweaver制作简单网页

——制作“慧1学习目标了解DreamweaverCS6认识HTML标记语言分析网页的页面结构及代码结构创建站点及制作简单网页网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室学习目标了解DreamweaverCS6网页设计与制作实用2实训项目深圳慧衡科技有限公司需要制作一个二级页面“慧衡”，用于介绍公司的基本情况。网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室实训项目深圳慧衡科技有限公司需要制作一个二级页面“慧衡”，用3项目分析设计思路：（1）页面元素：包括相应的公司介绍文字、公司的logo、客户案例展示的Flash影片、水平线和特殊字符等。（2）页面布局：由于是初识网页设计，还不懂布局技术，本案例只做一个简单的图文页面，采用较普遍的上中下结构，自上而下对页面元素进行排版，3个版块的排列情况及其中的元素如图所示。（3）配色方案：采用蓝灰色以体现的企业的稳健、深远、平静和谐。配有一些橙色使稳健中增添活力。网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室项目分析设计思路：网页设计与制作实用教程（第3版）计算机工程4设计目标网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室设计目标网页设计与制作实用教程（第3版）计算机工程学院计算5预备知识：初识Dreamweaver

CS6DreamweaverCS6工作界面网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室预备知识：初识DreamweaverCS6Dreamwea6预备知识：初识Dreamweaver

CS6工作界面包括：1．菜单栏：含有“文件”、“编辑”等10个菜单分类。2．文档工具栏：包含了一些与查看文档等相关的常用命令和选项。3．插入面板：包括用于创建和插入各种对象（如表格、AP元素和图像）的按钮。当鼠标指针移动到一个按钮上时，会出现该按钮的名称的提示。4．文档窗口：是Dreamweaver的主工作区，用于显示和编辑当前创建的文档。网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室预备知识：初识DreamweaverCS6工作界面包括：网7预备知识：初识Dreamweaver

CS65．属性面板：用于检查和编辑当前选定页面元素（如文本、图像或其他插入的对象）的最常用属性，其内容根据选定的元素会有不同变化。6．状态栏：位于文档窗口底部，提供与文档相关的其他信息。7．浮动面板：集中了网页编辑和站点管理过程中最常用的一些操作。可以展开和折叠这些面板，在菜单栏中的“窗口”下拉菜单中单击面板名称可以显示或者隐藏这些面板。8．代码窗口：当在“文档工具栏”中点击“拆分”或“代码”后可以看到代码窗口。在代码窗口中能够查看、输入和修改网页的代码。垂直于代码窗口左侧的是编码工具栏，包含用于执行多种标准编码的操作按钮。网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室预备知识：初识DreamweaverCS65．属性面板：用8预备知识：HTML——HTML文档结构一个标准的HTML网页文档的基本代码结构，如图所示。其标签含义：超文本标记语言标签<html><html></html>在文档的最外层，文档中的所有文本和HTML标签都包含在其中，它表示该文档是以超文本标记语言（HTML）编写的。网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室预备知识：HTML——HTML文档结构一个标准的HTML网页9预备知识：HTML——HTML文档结构头标签<head><head></head>是HTML文档的头部标签，在浏览器窗口中，头部信息是不被显示在正文中的，在此标签中可以插入其它标记，用以说明文件的标题和整个文件的一些公共属性。标题标签<title><title>和</title>是嵌套在<head>头部标签中的，标签之间的文本是文档标题，文档标题显示在浏览器窗口的标题栏。网页主体区标签<body><body></body>标记一般不省略，标签之间的文本是正文，是在浏览器中要显示的页面内容。网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室预备知识：HTML——HTML文档结构头标签<head>网页10预备知识：HTML——HTML语法形式HTML标签通常有三种格式：不带属性的双标签：格式为<标签名称>内容</标签名称>。例如：<h1>…</h1>用于设置一级标题带有属性的双标签：

格式为<标签名称属性名称1="值"属性名称2="值"……>内容</标签名称>。属性名称（name）和值（value）一起使用。例如：<hrsize="3"align="left"width="800"/>单标签：格式为<标签名称/>。例如：<br/>换行标签。网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室预备知识：HTML——HTML语法形式HTML标签通常有三种11预备知识：HTML——HTML语法规则

Web文档中，标签采用“<”和“>”作为分割字符。

HTML标签不区分大小写，如<HTML>和<html>是相同的标签。大多数HTML标签可以嵌套，但不能交叉，各层标签为全包容关系。

Web文档一行可以书写多个标签，一个标签也可以分多行书写。

HTML源代码中的换行、回车符和多个连续空格在浏览时都是无效的。网页中所有显示的内容都应该受限于一个或多个标签，不能存在游离于标签之外的文字或图像等，否则会产生错误。网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室预备知识：HTML——HTML语法规则Web文档中，标签12预备知识：HTML——HTML常用标签强制换行标签<br/>：放在一行的末尾，可以使后面的文字、图片、表格等显示于下一行，而又不会在行与行之间留下空行，强制换段标签<p></p>：HTML的分段完全依赖于分段标记元素<p>。标题标签<hn></hn>：用于把文字设置为各种大小不同的标题。共有六级标题。标签中“h”后面的数字代表标题的级别，该数字越大标题文本就越小。字体设置标签<font>：用于设置文本的字体格式。HTML语言的注释标签<!--注释内容-->或<!-->注释内容</!-->网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室预备知识：HTML——HTML常用标签强制换行标签<br/>13制作流程任务2：在页面插入基本元素任务4：设置页面元素格式任务3：设置页面属性网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室任务5：添加背景音乐和字幕效果任务1：创建与管理本地站点制作流程任务2：在页面插入基本元素任务4：设置页面元素格式任14任务1——创建与管理本地站点创建本地站点管理本地站点管理本地站点文件网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室任务1——创建与管理本地站点创建本地站点管理本地站点管理本15任务2——在页面插入基本元素在网页中插入图像在网页中添加文本在网页中插入Flash影片在网页中插入水平线在网页中插入特殊字符网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室任务2——在页面插入基本元素在网页中插入图像在网页中添加文16step

在W08文件夹中，新建空白页“introduce.html”。

在网页中插入图像文件“banner.gif”。

在网页中添加文本。

在网页中插入Flash影片文件“show.swf”

在网页中插入水平线（宽为1000像素，高为4像素）。

在网页中插入特殊字符（空格和版权）。计算机工程学院计算机基础教研室网页设计与制作实用教程（第3版）step在W08文件夹中，新建空白页“introduce17设置页面属性，其中：①页面的背景颜色值为“#5E6C7B”。②页面的左、右边距均为130px。任务3——设置页面属性计算机工程学院计算机基础教研室网页设计与制作实用教程（第3版）设置页面属性，其中：任务3——设置页面属性计算机工程学院18任务4——设置页面元素格式设置文本格式设置SWF影片格式设置水平线格式网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室任务4——设置页面元素格式设置文本格式设置SWF影片格式设19Step1设置文本格式页面文字设置格式首页方案技术服务设计案例培训合作慧衡颜色值为“#FE6F00”，“加粗”效果，中文字体为“黑体”，对齐方式为“右对齐”深圳慧衡科技有限公司（InteMatrix）颜色值为“#FE6F00”，“加粗”效果，中文字体为默认字体，英文设置字体为“ComicSansMS,cursive”公司管理团队，客户案例展示顾正书(SteveGu)－合伙创始人兼首席咨询师肖卫华博士(WarrenXiao)－合伙创始人兼首席分析师程胜(ChalsenCheng)－首席工程师颜色值为“#FEEEED”中文字体为默认字体慧衡观点慧衡博客外贸社区关于慧衡Email订阅常见问题解答(FAQ)联系我们颜色值为“#CCC”，字体为“仿宋”，字号为默认值，居中对齐Copyright©2008-2014InteMatrix慧衡AllRightReserved.粤ICP备09069737号-1颜色值为“#CCC”，字体为默认值，字号为10px,居中对齐其他文字字体为“仿宋”，字号为17px计算机工程学院计算机基础教研室网页设计与制作实用教程（第3版）Step1设置文本格式页面文字设置格式首页方案技术服20Step1设置文本格式计算机工程学院计算机基础教研室网页设计与制作实用教程（第3版）页面文字设置格式公司管理团队，客户案例展示标题4顾正书(SteveGu)－合伙创始人兼首席咨询师肖卫华博士(WarrenXiao)－合伙创始人兼首席分析师程胜(ChalsenCheng)－首席工程师标题5Step1设置文本格式计算机工程学院计算机基础教研室网页21STEP2：设置SWF影片格式计算机工程学院计算机基础教研室网页设计与制作实用教程（第3版）通过代码，设置SWF影片居中。STEP2：设置SWF影片格式计算机工程学院计算机基础教研22STEP3：设置水平线格式计算机工程学院计算机基础教研室网页设计与制作实用教程（第3版）通过代码，设置水平线颜色值为"#F15F00"。STEP3：设置水平线格式计算机工程学院计算机基础教研室网23任务5——添加背景音乐和字幕效果网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室添加背景音乐制作文本字幕效果任务5——添加背景音乐和字幕效果网页设计与制作实用教程（第24step利用代码添加背景音乐“bg.mp3”。利用代码设置文本滚动字幕效果。预览网页时，文字“客户案例展示”从右向左进行滚动计算机工程学院计算机基础教研室网页设计与制作实用教程（第3版）step利用代码添加背景音乐“bg.mp3”。计算机工程25项目总结计算机工程学院计算机基础教研室网页设计与制作实用教程（第3版）项目总结计算机工程学院计算机基础教研室网页设计与制作实用教26课后练习配套实训

利用配套实训文件夹下提供的素材文件，根据前面所学的知识，自主设计与制作一个介绍中国台湾音乐团体“信乐团”的网页，要求如下：创建本地站点文件夹，将网页用到的素材按类别复制到站点文件夹中，启动Dreamweaver，定义站点。新建“index.htm”文件，设置页面背景图像为“bg.jpg”，网页标题为“信乐团”。插入基本的页面元素包括文本、图像、水平线等对象。设置页面文字的文本格式。查看本机显示分辨率，计算页面留白边距使页面内容位于背景图像的白色区域中。在“代码”视图中通过代码设置某一页面元素的具有滚动效果。网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室课后练习配套实训

利用配套实训文件夹下提供的素材文件，根据前27课后练习同步测试

通过教材第4章“同步测试”检验自己是否掌握了本章的相关知识点与技能点。网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室课后练习同步测试

通过教材第4章“同步测试”检验自己是否掌握28第4章利用Dreamweaver制作简单网页

——制作“慧衡”页面计算机工程学院计算机基础教学部第4章利用Dreamweaver制作简单网页

——制作“慧29学习目标了解DreamweaverCS6认识HTML标记语言分析网页的页面结构及代码结构创建站点及制作简单网页网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室学习目标了解DreamweaverCS6网页设计与制作实用30实训项目深圳慧衡科技有限公司需要制作一个二级页面“慧衡”，用于介绍公司的基本情况。网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室实训项目深圳慧衡科技有限公司需要制作一个二级页面“慧衡”，用31项目分析设计思路：（1）页面元素：包括相应的公司介绍文字、公司的logo、客户案例展示的Flash影片、水平线和特殊字符等。（2）页面布局：由于是初识网页设计，还不懂布局技术，本案例只做一个简单的图文页面，采用较普遍的上中下结构，自上而下对页面元素进行排版，3个版块的排列情况及其中的元素如图所示。（3）配色方案：采用蓝灰色以体现的企业的稳健、深远、平静和谐。配有一些橙色使稳健中增添活力。网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室项目分析设计思路：网页设计与制作实用教程（第3版）计算机工程32设计目标网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室设计目标网页设计与制作实用教程（第3版）计算机工程学院计算33预备知识：初识Dreamweaver

CS6DreamweaverCS6工作界面网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室预备知识：初识DreamweaverCS6Dreamwea34预备知识：初识Dreamweaver

CS6工作界面包括：1．菜单栏：含有“文件”、“编辑”等10个菜单分类。2．文档工具栏：包含了一些与查看文档等相关的常用命令和选项。3．插入面板：包括用于创建和插入各种对象（如表格、AP元素和图像）的按钮。当鼠标指针移动到一个按钮上时，会出现该按钮的名称的提示。4．文档窗口：是Dreamweaver的主工作区，用于显示和编辑当前创建的文档。网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室预备知识：初识DreamweaverCS6工作界面包括：网35预备知识：初识Dreamweaver

CS65．属性面板：用于检查和编辑当前选定页面元素（如文本、图像或其他插入的对象）的最常用属性，其内容根据选定的元素会有不同变化。6．状态栏：位于文档窗口底部，提供与文档相关的其他信息。7．浮动面板：集中了网页编辑和站点管理过程中最常用的一些操作。可以展开和折叠这些面板，在菜单栏中的“窗口”下拉菜单中单击面板名称可以显示或者隐藏这些面板。8．代码窗口：当在“文档工具栏”中点击“拆分”或“代码”后可以看到代码窗口。在代码窗口中能够查看、输入和修改网页的代码。垂直于代码窗口左侧的是编码工具栏，包含用于执行多种标准编码的操作按钮。网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室预备知识：初识DreamweaverCS65．属性面板：用36预备知识：HTML——HTML文档结构一个标准的HTML网页文档的基本代码结构，如图所示。其标签含义：超文本标记语言标签<html><html></html>在文档的最外层，文档中的所有文本和HTML标签都包含在其中，它表示该文档是以超文本标记语言（HTML）编写的。网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室预备知识：HTML——HTML文档结构一个标准的HTML网页37预备知识：HTML——HTML文档结构头标签<head><head></head>是HTML文档的头部标签，在浏览器窗口中，头部信息是不被显示在正文中的，在此标签中可以插入其它标记，用以说明文件的标题和整个文件的一些公共属性。标题标签<title><title>和</title>是嵌套在<head>头部标签中的，标签之间的文本是文档标题，文档标题显示在浏览器窗口的标题栏。网页主体区标签<body><body></body>标记一般不省略，标签之间的文本是正文，是在浏览器中要显示的页面内容。网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室预备知识：HTML——HTML文档结构头标签<head>网页38预备知识：HTML——HTML语法形式HTML标签通常有三种格式：不带属性的双标签：格式为<标签名称>内容</标签名称>。例如：<h1>…</h1>用于设置一级标题带有属性的双标签：

格式为<标签名称属性名称1="值"属性名称2="值"……>内容</标签名称>。属性名称（name）和值（value）一起使用。例如：<hrsize="3"align="left"width="800"/>单标签：格式为<标签名称/>。例如：<br/>换行标签。网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室预备知识：HTML——HTML语法形式HTML标签通常有三种39预备知识：HTML——HTML语法规则

Web文档中，标签采用“<”和“>”作为分割字符。

HTML标签不区分大小写，如<HTML>和<html>是相同的标签。大多数HTML标签可以嵌套，但不能交叉，各层标签为全包容关系。

Web文档一行可以书写多个标签，一个标签也可以分多行书写。

HTML源代码中的换行、回车符和多个连续空格在浏览时都是无效的。网页中所有显示的内容都应该受限于一个或多个标签，不能存在游离于标签之外的文字或图像等，否则会产生错误。网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室预备知识：HTML——HTML语法规则Web文档中，标签40预备知识：HTML——HTML常用标签强制换行标签<br/>：放在一行的末尾，可以使后面的文字、图片、表格等显示于下一行，而又不会在行与行之间留下空行，强制换段标签<p></p>：HTML的分段完全依赖于分段标记元素<p>。标题标签<hn></hn>：用于把文字设置为各种大小不同的标题。共有六级标题。标签中“h”后面的数字代表标题的级别，该数字越大标题文本就越小。字体设置标签<font>：用于设置文本的字体格式。HTML语言的注释标签<!--注释内容-->或<!-->注释内容</!-->网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室预备知识：HTML——HTML常用标签强制换行标签<br/>41制作流程任务2：在页面插入基本元素任务4：设置页面元素格式任务3：设置页面属性网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室任务5：添加背景音乐和字幕效果任务1：创建与管理本地站点制作流程任务2：在页面插入基本元素任务4：设置页面元素格式任42任务1——创建与管理本地站点创建本地站点管理本地站点管理本地站点文件网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室任务1——创建与管理本地站点创建本地站点管理本地站点管理本43任务2——在页面插入基本元素在网页中插入图像在网页中添加文本在网页中插入Flash影片在网页中插入水平线在网页中插入特殊字符网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室任务2——在页面插入基本元素在网页中插入图像在网页中添加文44step

在W08文件夹中，新建空白页“introduce.html”。

在网页中插入图像文件“banner.gif”。

在网页中添加文本。

在网页中插入Flash影片文件“show.swf”

在网页中插入水平线（宽为1000像素，高为4像素）。

在网页中插入特殊字符（空格和版权）。计算机工程学院计算机基础教研室网页设计与制作实用教程（第3版）step在W08文件夹中，新建空白页“introduce45设置页面属性，其中：①页面的背景颜色值为“#5E6C7B”。②页面的左、右边距均为130px。任务3——设置页面属性计算机工程学院计算机基础教研室网页设计与制作实用教程（第3版）设置页面属性，其中：任务3——设置页面属性计算机工程学院46任务4——设置页面元素格式设置文本格式设置SWF影片格式设置水平线格式网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室任务4——设置页面元素格式设置文本格式设置SWF影片格式设47Step1设置文本格式页面文字设置格式首页方案技术服务设计案例培训合作慧衡颜色值为“#FE6F00”，“加粗”效果，中文字体为“黑体”，对齐方式为“右对齐”深圳慧衡科技有限公司（InteMatrix）颜色值为“#FE6F00”，“加粗”效果，中文字体为默认字体，英文设置字体为“ComicSansMS,cursive”公司管理团队，客户案例展示顾正书(SteveGu)－合伙创始人兼首席咨询师肖卫华博士(WarrenXiao)－合伙创始人兼首席分析师程胜(ChalsenCheng)－首席工程师颜色值为“#FEEEED”中文字体为默认字体慧衡观点慧衡博客外贸社区关于慧衡Email订阅常见问题解答(FAQ)联系我们颜色值为“#CCC”，字体为“仿宋”，字号为默认值，居中对齐Copyright©2008-2014InteMatrix慧衡AllRightReserved.粤ICP备09069737号-1颜色值为“#CCC”，字体为默认值，字号为10px,居中对齐其他文字字体为“仿宋”，字号为17px计算机工程学院计算机基础教研室网页设计与制作实用教程（第3版）Step1设置文本格式页面文字设置格式首页方案技术服48Step1设置文本格式计算机工程学院计算机基础教研室网页设计与制作实用教程（第3版）页面文字设置格式公司管理团队，客户案例展示标题4顾

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论