Dreamweaver CS5网页制作-电子教案1
合集下载
DreamweaverCS5网页制作项目一
6．面板组
默认状态下，面板组位于文档窗口右侧。面板组 中包含各种类型的面板，Dreamweaver中的大部 分操作都需要在面板中实现。其中最常用的有 “插入”面板、“文件”面板和“CSS样式”面 板。
任务实施——调整Dreamweaver CS5工作 界面
使用Dreamweaver制作或编辑网页时，经常需要 打开、关闭某个面板，或对其工作界面进行各种 调整。本节我们就来学习一下调整Dreamweaver CS5工作界面的基本操作（具体操作见视频13）。
（2）域名
（3）网址
网址又叫URL，英文全称是“Uniform Resource Locator”，即统一资源定位符。它是网络上通用 的一种地址格式，用于标识网页文件在网络中的 位置。 一个完整的网址由通信协议名称、域名或IP地址、 网页在服务器中的路径和文件名4部分组成。
任务实施——网站建设基本流程
预备知识
一、启动Dreamweaver CS5
安装Dreamweaver CS5后，单击桌面左下角的 “开始”按钮 ，选择“所有程 序”>“Adobe Dreamweaver CS5”，就可以启 动Dreamweaver CS5了。
二、Dreamweaver CS5界面元素简 介
Dreamweaver CS5的工作界面由应用程序栏、文 档标签栏、文档工具栏、文档窗口、标签选择器、 状态栏、属性检查器和面板组等组成。
二、在Dreamweaver CS5中管理站 点
定义站点后，如果需要修改站点属性、复制或删 除站点等，可执行管理站点的操作。
任务实施—在DreamweaverCS5中定义站点“欧妮 雅”
在本书的大部分“任务实施”中，我们都将制作 “欧妮雅”化妆品网站的相关页面，下面我们先 从定义该站点开始（具体操作见视频1-4）。
网页设计与制作案例教程(Dreamweaver CS5+Div+CSS+JavaScript)第一章3
12
下面以实例说明标题标记的用法。 实例代码： <html> <head> <title>文本的标题</title> </head> <body> </body> </html> 保存页面后在IE中打开，可以看到浏览器的标题栏中显 示了刚才设置的标题“文件的标题”，效果如下图所示。
3、属性
属性是用来描述对象特征的特性。在HTML中，所有的属性都 放置在开始标记的尖括号里，属性与标记之间用空格分隔，属 性的值放在相应属性之后，用等号分隔，而不同的属性之间用 空格分隔。格式为： <标记 属性1=属性值1 属性2=属性值2 …> 受影响的内容 <／ 标记>
例如：<body bgcolor="#ccffff" text="#660033">
4
5
认识 HTMext Markup Language,直译为超文本标记语言。它是一种 文本类、解释执行的标记语言，是在标准一 般化标记语言(SGML) 的基础上建立的。
6
1.5.2 HTML的基本语法
HTML文件就是由各种HTML元素和标签组成的。 一个HTML文件的基本结构如下：
9
1、双标记
“双标记”与单标记刚好相反，这种标记有头有尾，且前头标记与后面 的标记保持一样，但在后面标记前有斜线，所以叫双标记。其中开始标 记是告诉浏览器从本处开始标记所表达的功能，再由尾标记告诉浏览器 结束，构成尾标记是在小于号后面加斜杠，语法形式为： <标记>内容</标记> 其中，<标记>指的是字母关键字组成的标记，如 <div></div>组成一个层， <table></table>组成一个表格，而“内容”是被标记修饰的部分，从标 记对前到标记对结束的内容都被标记对修饰着，如<div>这是一个层 </div>中的文本文字“这是一个层”被<div>标记对修饰表示一个层的内 容，再如<p>段落内容</p>中的“段落内容”被<p>标记对修饰，表示一 个段落等。双标记可以多层嵌套，如在<p></p>标记对中可以嵌套 <div></div>标记对或其他标记对，在多个嵌套中，一个标记对的结束标 记对最近一个标记对开始标记配对。值得注意的是，标记对不能交叉。 10
Dreamweaver网页制作课件教案第1章
学习目的
通过本章的学习，您可以：
Dreamweaver CS5的新增功能。 工作界面的构成及各菜单栏、工具栏、插入栏和浮动面板的功能与作用。 文件的打开、创建和存储的基本方法。
1.1 Dreamweaver CS5的新功能
集成CMS支持 CSS 检查 启用/禁用CSS 集成Adobe BrowserLab PHP 自定义类代码提示 站点特定的代码提示 与 Business Catalyst 集成 增强的CSS起始布局 增强的Subversion支持 简化的站点设置 保持跨媒体一致性 动态相关文件
第1章 网页制作基础知识
本章重点
本 章 介 绍 Dreamweaver CS5 中 文 版 的 基 础 知 识 ， 内 容 包 括 ： Dreamweaver CS5的新增功能和安装，简单介绍其用户界面以及创建与保存 文件的方法等。Dreamweaver CS5是著名影像处理软件公司Adobe推出的最 新网页设计制作工具，是继Dreamweaver CS5之后的升级版本，是目前最完 美的网站制作工具。
1.2.6 浮动面板
在Dreamweaver CS5工作环境的右侧存在着浮动面板。浮动面板中包括了“CSS 样式”面板、“AP元素”面板、“代码片段”面板、“参考”面板、“数据库”面 板、“绑定”面板、“服务器行为”面板、“组件”面板、“属性”面板、“行为” 面板、“历史记录”面板、“框架”面板、“标签检查器”面板、“文件”面板和 “资源”面板等。
1.2.1 菜单栏 1.2.2 文档工具栏 1.2.3 “插入”面板
1.2.4 文档窗口
设计视图 代码视图 拆分视图（垂直拆分/水平拆分）
1.2.5 属性面板
属性面板分成上下两部分。不同的对象有不同的属性，因此选中不同对象 时，属性面板显示的内容是不相同的。单击面板右下角的三角形按钮可以关闭 属性面板的下部分。
通过本章的学习，您可以：
Dreamweaver CS5的新增功能。 工作界面的构成及各菜单栏、工具栏、插入栏和浮动面板的功能与作用。 文件的打开、创建和存储的基本方法。
1.1 Dreamweaver CS5的新功能
集成CMS支持 CSS 检查 启用/禁用CSS 集成Adobe BrowserLab PHP 自定义类代码提示 站点特定的代码提示 与 Business Catalyst 集成 增强的CSS起始布局 增强的Subversion支持 简化的站点设置 保持跨媒体一致性 动态相关文件
第1章 网页制作基础知识
本章重点
本 章 介 绍 Dreamweaver CS5 中 文 版 的 基 础 知 识 ， 内 容 包 括 ： Dreamweaver CS5的新增功能和安装，简单介绍其用户界面以及创建与保存 文件的方法等。Dreamweaver CS5是著名影像处理软件公司Adobe推出的最 新网页设计制作工具，是继Dreamweaver CS5之后的升级版本，是目前最完 美的网站制作工具。
1.2.6 浮动面板
在Dreamweaver CS5工作环境的右侧存在着浮动面板。浮动面板中包括了“CSS 样式”面板、“AP元素”面板、“代码片段”面板、“参考”面板、“数据库”面 板、“绑定”面板、“服务器行为”面板、“组件”面板、“属性”面板、“行为” 面板、“历史记录”面板、“框架”面板、“标签检查器”面板、“文件”面板和 “资源”面板等。
1.2.1 菜单栏 1.2.2 文档工具栏 1.2.3 “插入”面板
1.2.4 文档窗口
设计视图 代码视图 拆分视图（垂直拆分/水平拆分）
1.2.5 属性面板
属性面板分成上下两部分。不同的对象有不同的属性，因此选中不同对象 时，属性面板显示的内容是不相同的。单击面板右下角的三角形按钮可以关闭 属性面板的下部分。
项目一初识Dreamweavercs5(理论)1
项目一网页制作基础任务一初识Dreamweaver CS5一、教学目标1、了解网页制作软件。
2、掌握创建本地站点。
二、学生特征分析学生利用Dreamweaver cs5，学会创建站点、首页、子页、制作一个简单的页面，利用它学生可以方便快捷地制作出美观大方、功能齐全的网页，这也是学生将要学习的主要内容。
三、课型理论课四、教学重点了解网页制作软件工作界面组成。
五、教学难点创建本地站点。
六、课前准备多媒体七、课时安排2课时（45分钟×2）八、教学过程(一)、导入在Dreamweaver CS5中有哪几种方法可以创建站点？同时本地站点与远程站点有什么区别？（5分钟）（二）、新授认识Dreamweaver：一、打开DM：开始—程序—Adobe Dreamweaver—Adobe Dreamweaver CS4二、认识DM：标题栏、菜单栏、工具栏、编辑栏、状态栏、面板。
工具栏：视图—工具栏—插入/文档/标准。
面板：窗口—相应面板。
折叠面板/展开面板。
三、网页制作步骤：创建文件—设置标题—编辑内容—保存文件—浏览器查看效果。
浏览网页：1、在编辑状态下，按F12浏览。
2、保存文件，打开浏览器，打开文件浏览。
站点操作：一、新建站点：方法：1、站点—新建站点；2、站点—管理站点—新建—站点；3、文件面板—站点下拉菜单—管理站点—新建—站点步骤：方法1：基本选项—给站点命名—不使用服务器—确定站点存储位置（选择已有文件夹或新建文件夹）--选择无远程服务器—完成。
方法2：高级选项—输入站点名称—选择本地根文件夹位置（选择已有文件夹或新建文件夹）二、编辑站点：方法：1、站点—管理站点—选择站点—编辑—修改站点名称或存储位置；2、文件面板—站点下拉菜单—管理站点—选择站点—编辑—修改站点名称或存储位置。
三、复制站点：方法：1、站点—管理站点—选择站点—复制；2、文件面板—站点下拉菜单—管理站点—选择站点—复制。
四、删除站点：方法：1、站点—管理站点—选择站点—删除；2、文件面板—站点下拉菜单—管理站点—选择站点—删除。
网页设计与制作——Dreamweaver CS5标准教程第1章 网页设计基础
色彩，网页设计元素和页面布局是网页创意设计的 三个重要组成部分。
1.2.1色彩
1.2网页设计知识
1.认识色彩 任何色彩都具有色相、明度和纯度三种属性。 色相是色彩的名称，是一个色彩区别与另一个色彩
的主要因素。 明度也称为亮度，表示了色彩的明暗程度，明度越
大，色彩越亮。 纯度是指色彩的鲜艳程度或饱和度。色彩纯度越高
1.2网页设计知识
3. 利用图像配色
1.2.2网页设计元素
1. 网站标识 网站logo，将网站logo置于页面比较醒目的位置，如左
上角。 2. 网站banner 网站banner一般位于页面的顶部，即可以表达和突出网
站创意和形象，也可以传达某种特定信息。 网络banner通常是由GIF动画、JPEG图像或Flash动画完
Language，超文本标记语言） XHTML（eXtensible Hyper Text Markup
Language，可扩展的超文本标记语言）是 HTML的升级版本。
1.3网页标准化技术
1.3.2 CSS样式
CSS（Cascading Style Sheets，层叠样式表）是由W3C 指定和发布的，用于描述网页元素格式的一组规则， 其作用是设置HTML和XHTML语言编写的结构化文档外 观。
1.3网页标准化技术
网页由三部分组成：结构（Structure）、表 现（Presentation）和行为（Behavior），相 应的技术标准由3个部分组成：结构化标准语 言，CSS样式表和脚本语言。
1.3网页标准化技术
1.3.1 结构化语言 结构化语言HTML（Hyper Text Markup
名，表达为如下形式： 协议名://服务器的IP地址或域名/路径/文件名 /s2012/shicha URL地址，或Web地址，或网址，它可以是本地磁盘
1.2.1色彩
1.2网页设计知识
1.认识色彩 任何色彩都具有色相、明度和纯度三种属性。 色相是色彩的名称，是一个色彩区别与另一个色彩
的主要因素。 明度也称为亮度，表示了色彩的明暗程度，明度越
大，色彩越亮。 纯度是指色彩的鲜艳程度或饱和度。色彩纯度越高
1.2网页设计知识
3. 利用图像配色
1.2.2网页设计元素
1. 网站标识 网站logo，将网站logo置于页面比较醒目的位置，如左
上角。 2. 网站banner 网站banner一般位于页面的顶部，即可以表达和突出网
站创意和形象，也可以传达某种特定信息。 网络banner通常是由GIF动画、JPEG图像或Flash动画完
Language，超文本标记语言） XHTML（eXtensible Hyper Text Markup
Language，可扩展的超文本标记语言）是 HTML的升级版本。
1.3网页标准化技术
1.3.2 CSS样式
CSS（Cascading Style Sheets，层叠样式表）是由W3C 指定和发布的，用于描述网页元素格式的一组规则， 其作用是设置HTML和XHTML语言编写的结构化文档外 观。
1.3网页标准化技术
网页由三部分组成：结构（Structure）、表 现（Presentation）和行为（Behavior），相 应的技术标准由3个部分组成：结构化标准语 言，CSS样式表和脚本语言。
1.3网页标准化技术
1.3.1 结构化语言 结构化语言HTML（Hyper Text Markup
名，表达为如下形式： 协议名://服务器的IP地址或域名/路径/文件名 /s2012/shicha URL地址，或Web地址，或网址，它可以是本地磁盘
DreamweaverCS5网页设计教程课程设计
Dreamweaver CS5网页设计教程课程设计一、教学目标本课程的主要目标是：1.了解网页设计的基本原理与规范。
2.掌握Dreamweaver CS5的使用方法和网页设计技巧。
3.能够独立完成基本网页设计与制作。
二、教学内容2.1 网页设计概述本章主要介绍网页设计的概念和原理，阐述网页设计的规范和流程。
包括以下内容：1.网页设计的概念和作用。
2.网页设计的规范和流程。
3.网页设计中常用的设计软件和工具介绍。
2.2 Dreamweaver CS5入门本章主要介绍Dreamweaver CS5的基本界面和功能，让学生熟悉Dreamweaver CS5的基本操作。
包括以下内容：1.Dreamweaver CS5的安装和界面介绍。
2.Dreamweaver CS5的基本功能介绍。
3.Dreamweaver CS5的基本操作。
2.3 网页设计基础本章主要介绍网页设计的基础知识和技巧，包括页面布局、图片处理、文字处理和颜色搭配等。
包括以下内容：1.页面布局的概念和方法。
2.图片处理和文字处理的技巧。
3.颜色搭配的原则和方法。
2.4 网页设计实战本章主要介绍如何使用Dreamweaver CS5实现网页设计，通过实战让学生熟练掌握Dreamweaver CS5的使用和网页设计的流程。
包括以下内容：1.Dreamweaver CS5实现网页设计的流程。
2.网页设计实战案例介绍和指导。
3.指导学生独立完成网页设计任务。
三、教学方法本课程采用教师授课和学生实践相结合的教学方法。
具体包括：1.教师讲课。
2.演示Dreamweaver CS5的使用。
3.学生模仿和操作。
4.学生独立完成网页设计任务。
四、考核方式本课程的考核方式主要采用网页设计实战任务和学生作业。
具体包括：1.网页设计实战任务：由教师给出网页设计题目，要求学生独立完成。
任务要求设计符合规范、美观大方的网页，并在规定时间内提交。
2.学生作业：要求学生根据教师课堂讲解和演示，完成与课程相关的作业。
《DreamweaverCS5网页设计》课件
第2章目录
设置页面的标题和编码： 1. 选择“修改”→“页面属性”，或者在属性检查器中单击 “页面属性”。 2. 在“页面属性”对话框中，单击“标题/编码”类别，如图 2.1所示。 3. 在“标题”框中，指定页面标题。也可以使用文档工具栏 来指定页面标题。 4. 从“编码”下拉列表框中选择文档中字符所用的编码。 5. 单击“确定”。
第1章目录
8／183
1.2 设置Dreamweaver站点
1.2.1 Dreamweaver工作流程 规划和设置站点 组织和管理站点文件 设计网页布局 向页面添加内容 通过手动编码创建页面 针对动态内容设置Web应用程序 创建动态页 测试和发布
第1章目录
9／183
1.2 设置Dreamweaver站点
第10章 制作ASP动态网页
3／183
第1章 Dreamweaver CS5 使用基础
1.1 认识Dreamweaver CS5工作区 1.2 设置Dreamweaver站点 1.3 创建和管理站点文件
4／183
ቤተ መጻሕፍቲ ባይዱ
1.1 认识Dreamweaver CS5工作区
1.1.1 启动Dreamweaver CS5 启动Dreamweaver CS5：单击“开始”，指向“所有程序”，然后单击 “Adobe Dreamweaver CS5”。 在“开始”菜单或任务栏中为这个软件添加一个快捷方式。 1.1.2 工作区布局概述 工作区中主要包括以下元素。 欢迎屏幕。 应用程序栏。 文档工具栏。 标准工具栏。 编码工具栏。 样式呈现工具栏 文档窗口 属性检查器 标签选择器 面板组 插入面板 文件面板
第1章目录
13／183
Dreamweaver CS5网页设计案例教程1
“插入”面板
6.更完整CSS功能
传统的HTML所提供的样式及排版功能非常有限，因此，现在复杂的网
页版面主要靠CSS样式来实现。而CSS样式表的功能较多，语法比较复杂，
需要一个很好的工具软件有条不紊地整理复杂的CSS源代码，并适时地提供 辅助说明。Dreamweaver CS5就提供了这种方便有效的CSS功能。 “属性”面板提供了CSS功能。用户可以通过“属性”面板中“类” 选项的下拉列表对所选的对象应用样式或创建和编辑样式。若某些文字应 用了自定义样式，当用户调整这些文字的属性时，会自动生成新的CSS样式。
3.定义新站点
建立好站点文件夹后用户就可定义新站点了。在Dreamweaver CS5中， 站点通常包含两部分，即本地站点和远程站点。本地站点是本地计算机上 的一组文件，远程站点是远程 Web 服务器上的一个位置。用户将本地站点 中的文件发布到网络上的远程站点，使公众可以访问它们。在Dreamweaver CS5中创建 Web 站点，通常先在本地磁盘上创建本地站点，然后创建远程 站点，再将这些网页的副本上传到一个远程 Web 服务器上，使公众可以访 问它们。
开始页面
“首选参数”对话框
2.不同风格的界面
Dreamweaver CS5的操作界面新颖淡雅，布局紧凑，为用户提供了一 个轻松、愉悦的开发环境。 若户想修改操作界面的风格，切换到自己熟悉的开发环境，可选择 “窗口 > 工作区布局”命令，弹出其子菜单，在子菜单中选择“编码器” 或“设计器”命令，选择其中的一种界面风格，页面会发生相应的改变。
1.2 创建网站框架
操作目的 操作步骤
相关工具
1.2.1 操作目的
通过打开效果文件，熟练掌握打开命令。通过复制效果，熟练
DreamweaverCS5教程第1章
1.2 网页的相关概念
1.2.1 1.2.2 1.2.3 1.2.4 浏览器 网页与HTML URL、域名与IP地址 网站上传和下载
1.2.1 浏览器
浏览器是指将互联网上的文本文档（或其他类型的 文件）翻译成网页，并让用户与这些文件交互的一 种软件工具，主要用于查看网页的内容。 互联网（Internet）又称为因特网，是一个把分布 于世界各地的计算机用传输介质互相连接起来的网 络。Internet主要提供的服务有万维网（WWW）、 文件传输协议（FTP）、电子邮件（E-mail）及远 程登录（Telnet）等。
1.2.2 网页与HTML
HTML（Hyper Text Marked Language）即 超文本标记语言，是一种用来制作超文本文档 的简单标记语言，也是制作网页的最基本的语 言，它可以直接由浏览器执行。
1.2.3 URL、域名与IP地址
URL也就是网络地址，是在Internet上用来描述信息资 源，并将Internet提供的服务统一编址的系统。 域名类似于Internet上的门牌号，相对于IP地址而言， 更便于使用者理解和记忆。 IP地址是给因特网上的每台计算机和其他设备分配的一 个唯一的地址。在IE浏览器的地址栏中输入IP地址 “202.38.64.9”，按下回车键。
<BODY BACKGROUNE=”URI “BGCOLOR=”Color “> ............................................ </BODY>
1.4 HTML常用标记
1.4.1 链接标记< LINK > 1.4.2 段落标记<P> 1.4.3 通用块标记<DIV> 1.4.4 行内标记<SPAN> 1.4.5 元数据标记<META>
第一讲网页设计与制作 DreamweaveCs5
1.2 Dreamweaver的操作界面组成
1. “代码”视图 “代码”视图是个手工编码环境，如可以用于编写HTML、CSS、 JavaScript以及服务器端脚本语言（如asp，php，jsp等）。主要用 于满足喜欢手写代码的用户，通常要求比较高，如图1-22所示。
图 1-22 “代码”视图
1.2 Dreamweaver的操作界面组成
图 1-17 “插入”工具栏
1.2 Dreamweaver的操作界面组成
当选择“显示为制表符”时，更加方便操作，显示效果如图1-18所示。
图 1-18 “插入”工具栏（制表符样式）
1.2 Dreamweaver的操作界面组成
“样式呈现”工具栏：当在文档中使用依赖于媒体的样式表时，此工 具栏才有用，能够查看设计在不同媒体类型中的呈现方式，如图 1-19所示。
1.1 安装和启动Dreamweaver
1.1.1 安装Dreamweaver 安装Dreamweaver（中文版）的过程如下： （1）双击Dreamweaver安装盘中的“setup.exe”文件，此时开始加载安 装向导。出现Installshield Wizard界面，如图1-1所示。
图1-1 加载安装向导
1.1 安装和启动Dreamweaver
（2）接着出现欢迎使用Dreamweaver和一些版权警告信息，如图1-2 所示。
图1-2“欢迎使用和版权警告” 对话框
1.1 安装和启动Dreamweaver
（3）单击“下一步”按钮，出现Dreamweaver“许可证协议”对话框， 选择“我接收该许可证协议中的条款（A）”，如图1-3所示
图3-10文档的创建
1.3.2.2 输入文本
在Dreamweaver中输入文字可不象Word那样随心所欲，输入文本需 要注意以下问题： 换行：按快捷键【Shift+回车】（对应代码为“<br />”）， 分段：直接按快捷键【回车】（对应代码为“<p> 字符串</p>”）。 输入空格：第一种方法是插入不换行空格，按快捷键 【Ctrl+Shirt+Space】（对应代码为“ ”)；第二种方法是在确 保输入法处于“全角”模式时输入空格。
网页设计与制作案例教程(Dreamweaver CS5+Div+CSS+JavaScript)第一章1
暖色色彩搭配：暖色色彩搭配是指使用红色、橙色、黄色集合色等 色彩的搭配。这种色调的运用可使主页呈现温馨、和煦、热情的 氛围
网站规划
1．确定网站主题
网站的主题就是网站所要包含的主要内容， 例如，旅游、娱乐休闲、体育、新闻、教 育、医疗、时尚等。
总之，首先要让访问者一眼就能了解该网站能 提供什么信息，使访问者有一个基本的认识， 并且有继续看下去的兴趣。
网站规划 目录结构设计需要注意的问题：
按栏目内容建立子目录。 文件夹、图片、网页文件的命名最好使用小写英文字母和数字 命名，不要用中文或其他文字命名。 每个栏目下分别为图像文件创建一个image子文件夹。 分支页面内容要相对独立，切忌重复，导航功能要好。 目录的层次不要太深，主要栏目最好能直接从首页到达。 要设计一个好的网站、必须要用树形结构把每个页面大纲 列出来并规划好，如下图——月牙果果网站
广与维护
网站开发的基本流程
网站设计完后，必须进行全面的测 网站一定要有特定的用户和特定的 网站设计成功与否，很大程度 网站互联网上大大小小的各种网络 试，测试完成以后，设计开发人员 任务，要明确建设网站的目的和内 上取决于设计者的规划水平。 数以百计，如何让更多的浏览者迅 必须为 Web网站系统准备或申请充 容。通过讨论可以确定网站的设计 网站规划包含的内容很多，如 速地访问到企业的网站是一个十分 足的空间资源，利用 FTP工具将网 方案，设计方案能够兼顾到各方的 重要的问题。所以，Web网站上传 网站的主题、网站栏目、结构 站发布到所申请的主页服务器上。 实际需求和设计开发的技术问题， 层次、连接内容、颜色搭配、 之后，需要不断地对网站进行宣传 能够为成功开发 Web网站打下良好 网站Logo、版面布局及文字图 推广，以便让更多的人去浏览它， 的基础。 片的运用等 提高网站的访问率与知名度。
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
1.4 HTML文档入门
3．HTML文档常用标记
（3）文字标记 格式： <font size="文字大小" face="字体" color="文本颜色">文本内容</font> 说明：<font>标记用于设置网页中文字的字号、字体、颜色等属性。设置字号时， <font size=1>（最小）、<font size=7>（最大）、<font size=+1>（比预设字大 一级）、<font size=-1>（比预设字小一级）。 例如：将文本“最新通知”设置为楷体_GB2312，大小为4。 <font size="4" face="楷体_GB2312">最新通知</font> （4）段落标记 格式： <p align="对齐方式">段落文本</p> 说明：由<p>标记所标识的文字代表同一个段落的文字。其中align属性有left、 center和right三个参数，这三个设置分别代表左对齐、居中对齐和右对齐。 例如：将标题“会议通知”居中显示。 <p align="center">会议通知</p>
2．HTML文档基本结构
一个HTML文档是由一系列的元素和标记组成的，HTML用标记来规定元 素的属性和它在文件中的位置。
1.4 HTML文档入门
3．HTML文档常用标记
（1）标题标记 格式：<title>网页的标题</title> 说明：该标记在<head></head>标记中，所包含的文字将出现在浏览器的标题栏 上。当用户将此页面添加到收藏夹时，也会默认以该标题为名称。 （2）主体标记 格式： <body bgcolor="页面背景颜色" background="背景图像" text="文本颜色"> 主体内容 </body> 说明：包括所有主体内容，可以设置页面的背景颜色、背景图像、文字颜色等属 性。背景颜色和文本颜色可以使用颜色名（如蓝色：blue）或颜色代码值（如蓝 色：#0000FF）来表示。 例如：将图像tx.jpg设置为网页背景图像，网页文字颜色为蓝色。 <body background="tx.jpg" text="#0000FF"> 主体内容 </body>
1.2 网站配色方案
1．色彩的搭配原则
（1）色彩的鲜明性 如果一个网站的色彩鲜明，很容易引人注意，会给浏览者耳目一新的感 觉。 （2）色彩的独特性 网页的用色必须要有自己独特的风格，这样才能给浏览者留下深刻的印 象。 （3）色彩的艺术性 网站设计是一种艺术活动，因此必须遵循艺术规律。按照内容决定形式 的原则，在考虑网站本身特点的同时，大胆进行艺术创新，设计出既符 合网站要求，又具有一定艺术特色的网站。 （4）色彩搭配的合理性 色彩要根据主题来确定，不同的主题选用不同的色彩。例如，用蓝色体 现科技型网站的专业，用粉红色体现女性的柔情等。
1.4 HTML文档入门
1．HTML语言概述
HTML（Hypertext Marked Language，超文本标记语言）是用于创建 Web文档的一种标记语言。在IE浏览器中任意打开一个网页，选择“查 看→源文件”命令，系统会启动记事本程序，打开该网页的源程序代码。
1.4 HTML文档入门
1.3 网站设计常用软件
1．网站设计开发软件
（1）文本编辑器 制作网页通常使用HTML语言，HTML文档可以使用多种文本编辑器进行 编辑，如记事本、Word写字板、UltraEdit等。 （2）FrontPage FrontPage是微软公司出品的一款网页制作入门级软件。FrontPage使用 方便简单，会用Word就能做网页，所见即所得是其特点。 （3）Dreamweaver Dreamweaver是由Adobe公司推出一款优秀的网站开发工具，是网页设 计师在选择开发工具时一个不错的选择，能更有效地设计、开发和维护 基于网站标准化的网站。
1.4 HTML文档入门
3．HTML文档常用标记
（5）换行标记 格式： <br> 说明：<br>是个单标记，HTML文件中任何位置只要使用了<br>标记，当文件显 示在浏览器中时，该位置之后的文字将显示于下一行。 （6）水平线标记 格式： <hr align="对齐方式" color="颜色" width="宽度" size="高度" noshade> 说明：在网页中插入一条水平分隔线，将不同的内容信息分开，使文字看起来清 晰、明确。noshade用于设置水平为实心线（默认情况下为阴影线）。 例如：插入一条宽度800像素的红色水平线，并居中显示。 <hr width="800" color="#ff0000" align="center" >
1.2 网站配色方案
色彩是人的视觉最敏感的东西。 网站主页的色彩处理得好，可以锦上添花，达到事半功倍的 效果。 色彩总的应用原则是“总体协调，局部对比”，也就是说主 页的整体色彩效果应该是和谐的，只有局部的、小范围的地 方可以有一些强烈色彩的对比。 在色彩的运用上，可以根据主页内容的需要，分别采用不同 的主色调。
实训1 体验HTML文档
myweb3.html浏览效果
1.1 网页基础知识
1．Internet概述
1.1 网页基础知识
2．WWW服务
1.1 网页基础知识
3．Web站点和网页
1.1 网页基础知识
4．HTTP和URL
HTTP：超文本传输协议，是因特网上应用最为广泛的一种网络协议， 它允许将HTML文档从Web服务器传送到WWW浏览器。 URL：Internet中的Web服务器数量众多，且每台服务器都包含有多个网 页，用户要想在众多的网页中指明要获得的网页，就必须借助于URL进 行资源定位。URL由三个部分组成：协议、主机名、路径及文件名。例 如：某网页的URL为/news /wj1.html，其中http:是 采用的协议，是主机名，news指网页的路径（存储网页 的文件夹），wj1.html是要访问的网页文件名。用户只要在浏览器的地 址栏中输入要浏览网页的URL，便可以浏览到该网页。
1.4 HTML文档入门
3．HTML文档常用标记
模块1 网页设计基础
实训1 体验HTML文档 1.1 网页基础知识 1.2 网站配色方案 1.3 网站设计常用软件 1.4 HTML文档入门 思考与实训1
实训1 体验HTML文档
myweb1.html的程序代码： <html> <head> <title>滚动的Байду номын сангаас幕</title> </head> <body> <marquee direction="left"> 大家好！这是我用记事本编写的第一个网页。 </marquee> </body> </html>
1.3 网站设计常用软件
2．网页美化工具软件
（1）Photoshop Photoshop是由Adobe公司开发的一种的图形图像软件，是目前最好的 平面设计软件之一。其功能完善、性能稳定、使用方便，是美化网页的 常用工具。 （2）Fireworks Fireworks是一款专为网络图形设计的图形编辑软件，它大大简化了网络 图形设计的工作难度，无论是专业设计家还是业余爱好者，使用 Fireworks都不仅可以轻松地制作出十分动感的GIF动画，还可以轻易地 完成大图切割、动态按钮、动态翻转图等。 （3）Flash Flash是专业的矢量图形编辑和动画创作软件，是一种交互式动画设计工 具，用它可以将音乐、声效、动画，以及富有新意的界面融合在一起， 以制作出高品质的网页动态效果。
1.4 HTML文档入门
3．HTML文档常用标记
（7）图像标记 格式： <img src="图像地址" align="对齐方式" width="宽度" height="高度" alt="替换文 字" boder="边框宽度"> 说明：在页面中插入一幅图像，图像地址可以在本地计算机，也可以是一个URL 地址，但图像必须是GIF、JPG/JPEG或PNG格式的，其他格式的图像不能被插 入到网页中。Alt参数用于设置图像的说明信息，当浏览器不能显示图像时，则 用该参数指定的文本替换特定的图片。若图片正常显示，则当鼠标指向该图片时 也会显示该文字。 例如：插入images文件夹中的图像tx.jpg，宽度和高度均为300像素，鼠标指向 图像或图像不能正常浏览时提示“风景图片”。 <img src="images/tx.jpg" width="300" height="300" alt="风景图片" >
1.2 网站配色方案
（2）相似色配色方案
相似色配色方案指在色彩圆环上选择彼此相邻的几种颜色构成的配色方 案。例如橙色、橙红色，以及橙黄色就可以组成一个相似色方案。由于 相似色方案中包含了多种基色，如果再加上亮度和饱和度的变化，可以 构成的颜色就非常多。