当前位置：文档之家 › DreamweaverCS5网页制作-电子教案1资料

DreamweaverCS5网页制作-电子教案1资料

  • 格式：ppt
  • 大小：931.51 KB
  • 文档页数：28

下载文档原格式

  / 28

合集下载

Dreamweaver cs5标准实例教程配套全册教学课件

Dreamweaver cs5标准实例教程配套全册教学课件

2.2.3 “插入”面板
单击文档窗口右侧浮动面板组中的“插入”按钮，即可弹出以前熟悉的“插入”面 板。
“插入”面板共有8类对象元素，包含一些最常用的项目：常用、布局、表单、数 据、Spry、InContext Editing、文本和收藏夹。“插入”面板的初始视图为“常用” 面板，单击“插入”面板中“常用”面板右侧的倒三角形按钮，即可在弹出的下拉 列表中选择需要的面板，从而在不同的面板之间进行切换。如图所示。
所谓动态网页，是指服务器会针对不同的使用者以及不同的要求执行不同的程序， 从而提供不同的服务，一般与数据库有关。这种网页通常在服务器端以扩展名asp、 jsp或是aspx 等储存。动态网页的页面自动生成，无须手工维护和更新HTML文档； 不同的时间、不同的人访问同一网址时会产生不同的页面。
动态网页与静态网页的最大不同就是Web服务器和用户之间的动态交互，这也是 Internet强大生命力的体现。
第1章 网页制作基础知识
本章重点
本章和网页制作的基本步骤，然后简要介绍设计制作网页的常用工 具，重点介绍Adobe公司最新推出的Dreamweaver CS5，它涵盖了 网页制作与站点管理，是使用最多的网页制作工具之一。
学习目的
通过本章的学习，您可以：
网页与网站 网站建设的基本步骤
1.1 网页与网站
网页是网络上的基本文档，网页中包含文字、图片、声音、动画、影像以及 链接等元素，通过对这些元素的有机组合，就构成了包含各种信息的网页。简单 地说，通过浏览器在WWW上所看到的每一个超文本文件都是一个网页，而通过 超链接连接在一起的若干个网页的集合即构成网站。
通常我们看到的网页，都是以.htm、.html、.shtml等为后缀的文件。在网站设计 中，这种纯粹HTML格式的网页通常被称为静态网页。静态网页的内容是固定的， 当用户浏览网页内容时，服务器仅仅是将已有的静态HTML文档传送给浏览器供用 户阅读。若网站维护者要更新网页的内容，就必须手工更新所有的HTML文档。

Dreamweaver网页设计- 电子教案

Dreamweaver网页设计- 电子教案

1.1 基本知识
1.1.7 HTML（超文本链接标示语言） HTML是Hypertext Markup Language的缩写。它是一种简单、通用的全置标记 语言。HTML 文档是文本格式，可以用任何一种文本编辑器对它进行编辑， 也可以借助专业HTML编辑器对它进行可视化处理，如：Dreamweaver在 UNIX平台中，HTML文档的后缀名为“.html‖，而在 WINDOWS平台中则为 “.htm‖。网站的首页一般命名为index.htm， index.html， default.htm， default.html等。 1.1.8 Java Java是一种由Sun公司提出的，从C++发展而来的新型的程序设计语言。它可以 作为一个独立的程序而不需要浏览器的支持。然而对静态网页来说Java主要 用于创建Java Applet（Java小应用程序）。 1.1.9 JavaScript JavaScript是一种在网页中使用的脚本语言，它是由Netscape公司发明的，原来 的名字叫LiveScript。 注意：JavaScript的语法类似Java，两者的名字也有几分相似。但是，如要仅凭 此就认为两者有某种关系，那就错了。它们只是名字和语法相似，除此之外， 两者没有任何联系。
2.1 安装和启动Dreamweaver
（2）接着出现欢迎使用Dreamweaver和一些版权警告信息，如图2-2所 示。
图2-2―欢迎使用和版权警告” 对话框
2.1 安装和启动Dreamweaver
（3）单击“下一步”按钮，出现Dreamweaver―许可证协议”对话框，
选择“我接收该许可证协议中的条款（A）”，如图2-3所示。
图2-7 安装完成
2.2 Dreamweaver的操作界面组成

Dreamweaver网页制作课件教案第1章

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网页制作教案

Dreamweaver网页制作教案

Dreamweaver网页制作教案第一章：Dreamweaver 简介1.1 课程目标了解Dreamweaver 的基本功能和特点掌握Dreamweaver 的界面布局和基本操作1.2 教学内容Dreamweaver 的历史和发展Dreamweaver 的特点和优势Dreamweaver 的界面布局Dreamweaver 基本操作1.3 教学方法讲解和演示学生实际操作练习1.4 教学资源Dreamweaver 软件教学PPT1.5 教学步骤1. 讲解Dreamweaver 的历史和发展2. 讲解Dreamweaver 的特点和优势3. 演示Dreamweaver 的界面布局4. 演示Dreamweaver 基本操作5. 学生实际操作练习第二章：网页布局和设计2.1 课程目标了解网页布局的基本概念掌握Dreamweaver 中的网页布局工具学会设计美观实用的网页2.2 教学内容网页布局的基本概念Dreamweaver 中的网页布局工具网页设计的原则和技巧2.3 教学方法讲解和演示学生实际操作练习2.4 教学资源Dreamweaver 软件教学PPT2.5 教学步骤1. 讲解网页布局的基本概念2. 讲解Dreamweaver 中的网页布局工具3. 演示如何使用网页布局工具进行布局4. 讲解网页设计的原则和技巧5. 学生实际操作练习第三章：HTML 代码编辑3.1 课程目标了解HTML 代码的基本结构掌握Dreamweaver 中的HTML 代码编辑工具学会使用Dreamweaver 编写简单的HTML 代码3.2 教学内容HTML 代码的基本结构Dreamweaver 中的HTML 代码编辑工具HTML 代码的基本标签和使用方法3.3 教学方法讲解和演示学生实际操作练习3.4 教学资源Dreamweaver 软件教学PPT3.5 教学步骤1. 讲解HTML 代码的基本结构2. 讲解Dreamweaver 中的HTML 代码编辑工具3. 演示如何使用Dreamweaver 编写HTML 代码4. 讲解HTML 代码的基本标签和使用方法5. 学生实际操作练习第四章：添加多媒体元素4.1 课程目标了解多媒体元素在网页中的作用掌握Dreamweaver 中添加多媒体元素的方法学会使用Dreamweaver 添加音频、视频和图像等元素4.2 教学内容多媒体元素在网页中的作用Dreamweaver 中添加多媒体元素的方法音频、视频和图像等元素的基本属性和使用方法4.3 教学方法讲解和演示学生实际操作练习4.4 教学资源Dreamweaver 软件教学PPT4.5 教学步骤1. 讲解多媒体元素在网页中的作用2. 讲解Dreamweaver 中添加多媒体元素的方法3. 演示如何使用Dreamweaver 添加音频、视频和图像等元素4. 讲解音频、视频和图像等元素的基本属性和使用方法5. 学生实际操作练习第五章：网页和交互5.1 课程目标了解网页的作用和类型掌握Dreamweaver 中创建和编辑的方法学会使用Dreamweaver 实现简单的网页交互效果5.2 教学内容网页的作用和类型Dreamweaver 中创建和编辑的方法网页交互效果的实现方法5.3 教学方法讲解和演示学生实际操作练习5.4 教学资源Dreamweaver 软件教学PPT5.5 教学步骤1. 讲解网页的作用和类型2. 讲解Dreamweaver 中创建和编辑的方法3. 演示如何使用Dreamweaver 创建和编辑4. 讲解网页交互效果的实现方法5. 学生实际操作练习第六章：CSS样式应用6.1 课程目标理解CSS样式的作用和基本概念掌握Dreamweaver中创建和应用CSS样式的方法学会通过CSS样式美化网页元素6.2 教学内容CSS样式的作用和基本概念Dreamweaver中的CSS面板创建和应用CSS样式的基本方法CSS选择器和优先级CSS属性和值6.3 教学方法讲解和演示学生实际操作练习6.4 教学资源Dreamweaver软件教学PPT6.5 教学步骤1. 讲解CSS样式的作用和基本概念2. 讲解Dreamweaver中的CSS面板3. 演示如何创建和应用CSS样式4. 讲解CSS选择器和优先级5. 讲解CSS属性和值6. 学生实际操作练习第七章：表格和表单的使用7.1 课程目标理解表格在网页中的作用掌握Dreamweaver中创建和编辑表格的方法学会使用表格进行数据展示掌握表单的创建和应用学会使用表单收集用户数据7.2 教学内容表格在网页中的作用Dreamweaver中创建和编辑表格的方法表格的属性和布局表单的创建和编辑表单元素和属性7.3 教学方法讲解和演示学生实际操作练习7.4 教学资源Dreamweaver软件教学PPT7.5 教学步骤1. 讲解表格在网页中的作用2. 讲解Dreamweaver中创建和编辑表格的方法3. 演示如何创建和编辑表格4. 讲解表格的属性和布局5. 讲解表单的创建和编辑6. 讲解表单元素和属性7. 学生实际操作练习第八章：Dreamweaver 高级功能8.1 课程目标了解Dreamweaver 的高级功能掌握Dreamweaver 中的模板和库的使用学会使用Dreamweaver 进行站点管理和发布网页8.2 教学内容Dreamweaver 的高级功能模板和库的使用站点管理和发布网页8.3 教学方法讲解和演示学生实际操作练习8.4 教学资源Dreamweaver 软件教学PPT8.5 教学步骤1. 讲解Dreamweaver 的高级功能2. 讲解模板和库的使用3. 演示如何使用模板和库4. 讲解站点管理和发布网页5. 学生实际操作练习第九章：响应式网页设计9.1 课程目标理解响应式网页设计的概念和重要性掌握Dreamweaver 中的响应式设计工具学会创建适应不同设备的网页布局9.2 教学内容响应式网页设计的概念和重要性Dreamweaver 中的响应式设计工具媒体查询的使用弹性布局和网格系统9.3 教学方法讲解和演示学生实际操作练习9.4 教学资源Dreamweaver 软件教学PPT9.5 教学步骤1. 讲解响应式网页设计的概念和重要性2. 讲解Dreamweaver 中的响应式设计工具3. 演示如何使用媒体查询4. 讲解弹性布局和网格系统5. 学生实际操作练习第十章：项目实战与拓展10.1 课程目标学会使用Dreamweaver 完成实际项目培养学生的网页设计能力和创新思维了解网页设计行业的前沿动态和发展趋势10.2 教学内容项目实战：综合运用Dreamweaver 完成一个网页设计项目拓展训练：学习网页设计相关的软件和技能行业动态：了解网页设计行业的前沿动态和发展趋势10.3 教学方法项目指导学生实际操作练习行业分享10.4 教学资源Dreamweaver 软件项目案例和素材教学PPT10.5 教学步骤1. 项目启动：讲解项目要求和设计思路2.重点和难点解析本教案中，需要重点关注的环节包括：1. 第二章“网页布局和设计”中的演示和实际操作练习环节。

DreamweaverCS5网页制作项目一

DreamweaverCS5网页制作项目一

豫备常识
1、网站办理与网页建造相关软件
Dreamweaver是今朝最常常使用的网站办理和网 页建造软件，其功能周全、操作天真、专业性强。 在建造网页时，除Dreamweaver外还需要用到 Fireworks、Flash、Photoshop等辅助软件。
2、网页建造根底——XHTML措辞
XHTML是Extensible HyperText Markup Language(可扩大超文本标志措辞)的英文缩 写，它的前身是HTML。因为HTML代码繁 琐，布局松散，所以推出了XHTML。也可 以或许说，XHTML是HTML的一个升级版 本。
义务四 站点根底操作
义务申明
一般在Dreamweaver中建造网页之前，最好先定 义站点，然后在站点中创建网页。本义务重要进 修在Dreamweaver CS5中定义和办理站点的方式。
豫备常识
1、在Dreamweaver CS5中定义站点
在Dreamweaver中定义站点的目标是把当地磁 盘中的站点文件夹同Dreamweaver创立必定的 关联，从而便利用户使用Dreamweaver办理站 点和编纂站点中的网页文档，和上传或下载站 点内容等。
义务实施——指出新浪网主页的构成元素
在熟悉了网页的构成元素后，接下来经由过程辨 识“新浪网”网站首页的构成元素，来进一步加 强和安定前面的进修。
站标
导航条
标题问 题栏
告白条 按钮
义务二 网站启示根底
义务申明
在进修建造网页之前起首熟悉一下与网站启示相关 的根底常识，并从整体上熟悉一下其建造流程，对 后面的进修将长短常有益的。下面就来熟悉一下与 网站启示亲切相关的根底常识。
豫备常识
1、启动Dreamweaver CS5

网页设计与制作——Dreamweaver CS5标准教程第1章 网页设计基础

网页设计与制作——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地址，或网址，它可以是本地磁盘

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 操作目的
通过打开效果文件，熟练掌握打开命令。通过复制效果，熟练

Dreamweaver网页设计电子教案(全)完整版课件整套教学课件


第1章
本章内容目录
1. 9 插入Flash：在线游戏 1.10 插入视频和声音 1.11 本章小结 1.12 本章习题
第1章
1.1 基本操作
1.1.1 网页的基本概念
网页：通常是HTML格式（文件扩展名为.html或.htm）。网页通常用
图像来提供图画，网页要透过网页浏览器来阅读。
HTML语言：HTML的全称是Hyper Text Markup Language，中文翻译
框架主要用于将浏览器划分为多个窗口，在各个窗口中显示多个不同 的HTML文档。通过设定这些文档之间的相互关系，从而实现文档导 航和文档操作的目的。
框架技术主要有两种类型的 元素：一是框架集，另外一 个是框架。
基于框架技术制 作的BBS
第1章
1.7.2 上机操作
制作一个基本框架框架
在框架的左侧插入12行1列的表 格，在右侧插入2行1列的表格
4．表格一般被划分为_______、 _______、 _______ 3部分。
5．框架是由两种元素_______和_______组成。
第1章
二、选择题
1．创建虚拟链接使用的符号是：____
A.@
B.#
C.$
D.*
2．GIF格式的图像的有点有______ A.支持动画格式 B.持透明图标 C.无损压缩方式 D.支持24位真彩色
都可以
第2章
第2章 CSS样式表与模板
本章学习知识点
● 认识CSS ● 使用CSS编辑器 ● 背景样式的定义 ● 滤镜的使用
上 一 张
返 回
下 一 张
第2章
本章内容目录
2.1 文字和图像的处理：生日贺卡 2.2 CSS样式：独具风格的主页 2.3 对文字运用CSS滤镜：蓝色生死恋 2.4 对图像运用CSS滤镜：图片滤镜 2.5 层模板：海底世界 2.6 库项目的应用：公司主页 2.7 总结提高 2.8 本章习题
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

1.2 网站配色方案
1．色彩的搭配原则
（1）色彩的鲜明性 如果一个网站的色彩鲜明，很容易引人注意，会给浏览者耳目一新的感 觉。 （2）色彩的独特性 网页的用色必须要有自己独特的风格，这样才能给浏览者留下深刻的印 象。 （3）色彩的艺术性 网站设计是一种艺术活动，因此必须遵循艺术规律。按照内容决定形式 的原则，在考虑网站本身特点的同时，大胆进行艺术创新，设计出既符 合网站要求，又具有一定艺术特色的网站。 （4）色彩搭配的合理性 色彩要根据主题来确定，不同的主题选用不同的色彩。例如，用蓝色体 现科技型网站的专业，用粉红色体现女性的柔情等。
1.3 网站设计常用软件
1．网站设计开发软件
（1）文本编辑器 制作网页通常使用HTML语言，HTML文档可以使用多种文本编辑器进行 编辑，如记事本、Word写字板、UltraEdit等。 （2）FrontPage FrontPage是微软公司出品的一款网页制作入门级软件。FrontPage使用 方便简单，会用Word就能做网页，所见即所得是其特点。 （3）Dreamweaver Dreamweaver是由Adobe公司推出一款优秀的网站开发工具，是网页设 计师在选择开发工具时一个不错的选择，能更有效地设计、开发和维护 基于网站标准化的网站。
实训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中的We页，用户要想在众多的网页中指明要获得的网页，就必须借助于URL进 行资源定位。URL由三个部分组成：协议、主机名、路径及文件名。例 如：某网页的URL为/news /wj1.html，其中http:是 采用的协议，是主机名，news指网页的路径（存储网页 的文件夹），wj1.html是要访问的网页文件名。用户只要在浏览器的地 址栏中输入要浏览网页的URL，便可以浏览到该网页。
实训1 体验HTML文档
实训1 体验HTML文档
myweb2.html代码
myweb3.html程序代码

实训1 体验HTML文档
<table width="490" border="1" align="center" cellpadding="0" cellspacing="0"> <tr> <td colspan="3"><img src="11.JPG" width="501" height="101"></td> </tr> <tr> <td width="168" ><a href="web1.html">我的地盘</a></td> <td width="168"> <a href="/" target="_blank">一听音乐</a> </td> <td width="146" ><a href="mailto:liming@">与我联系</a></td> </tr> <tr> <td height="149" colspan="3" align="center"> <form name="form1" method="post" action=""> 用户登录<br> 用户姓名<input name="textfield3" type="text" id="textfield3" /> <br> 登录密码 <input name="textfield3" type="password" id="textfield4" /> <br> <input type="submit" name="button2" id="button2" value="登录"> </form> </td> </tr> </table>
互补色配色方案指在色彩圆环上沿直径选择相对应的两种颜色构成配色 方案。
1.2 网站配色方案
（4）三色配色方案
三色配色方案指在色彩圆环中选择一个等边三角形三个顶点上的颜色构 成的配色方案。三色方案中使用了三种彼此之间差别明显，对比强烈的 颜色，因此页面显得相当不稳定，给人带来另类的感觉，给予浏览者某 种紧张感。
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.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" >
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.4 HTML文档入门
1．HTML语言概述
HTML（Hypertext Marked Language，超文本标记语言）是用于创建 Web文档的一种标记语言。在IE浏览器中任意打开一个网页，选择“查 看→源文件”命令，系统会启动记事本程序，打开该网页的源程序代码。