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