Dreamweaver CS3网页制作-电子教案第3章
Dreamweaver CS3网页制作基础教程-教学大纲
《Dreamweaver CS3中文版网页制作基础》课程教学大纲一、课程性质和任务本课程是网页制作的一门实用课程，是网络类专业的一门实践性很强的技术基础课。
它的主要任务是培养学生规划、设计和制作网站的实际技能。
二、课程教学目标1、掌握Dreamweaver CS3界面的组成与使用方法2、掌握创建和发布站点的基本方法3、掌握首选参数及页面属性的设置方法4、掌握文本、图象、多媒体的主要属性与设置方法5、掌握制作超级链接的方法6、掌握表格的创建、编辑与属性设置方法7、掌握框架结构网页的制作方法8、掌握使用AP Div和CSS样式布局网页的方法9、掌握使用时间轴创建动画的方法10、掌握使用模板和库项目创建网页的方法11、掌握使用行为和Spry构件的方法12、掌握使用表单设计网页的方法13、掌握创建ASP应用程序的方法四、教学内容和基本要求第1章Dreamweaver CS3概况∙了解Dreamweaver CS3的基本概况。
∙熟悉Dreamweaver CS3的工作界面。
∙掌握常用工具栏和面板的基本使用方法。
∙了解Dreamweaver CS3的新特性。
第2章规划、创建和管理站点∙了解网站制作的一般流程。
∙了解网页布局的基本方式。
∙了解网页色彩搭配的基本原理。
∙掌握定义站点的基本方法。
∙掌握设置首选参数的基本方法。
∙掌握创建文件夹和文件的基本方法。
∙掌握编辑、复制和删除站点的基本方法。
∙掌握导出和导入站点的基本方法。
第3章创建和设置文档∙掌握创建、打开、保存和关闭文档的方法。
∙掌握添加文档内容的方法。
∙掌握设置文档格式的方法。
第4章使用图像和媒体∙了解网页中常用图像的基本格式。
∙掌握插入图像和设置图像属性的方法。
∙掌握插入图像占位符的方法。
∙掌握设置网页背景颜色和背景图像的方法。
∙掌握插入Flash动画、图像查看器、ActiveX视频的方法。
第5章设置超级链接∙了解超级链接的种类。
∙掌握设置文本和图像超级链接的方法。
Dreamweaver-CS3教案设计
《网页制作基础》教案第1章基础知识（5课时）教学目标1．掌握HTML的基本知识及作用；2．掌握安装和配置IIS的方法；3．熟悉Dreamweaver CS3的工作界面；4．掌握创建和设置Dreamweaver CS3站点的方法。
教学重点1．HTML语言2．熟悉Dreamweaver CS3的工作界面3．创建本地站点教学难点HTML的基本知识教学方法任务驱动法，以学生做为主，教师使用多媒体投影演示制作过程并讲解关键环节。
学生上机操作完成实例与实训。
任务1 认识网页教学目标：1．理解掌握网页的概念2．HTML的概念3．掌握HTML的基本知识及作用教学重点：1．网页的实质2．HTML的基础知识教学难点：HTML标记教学方法：任务驱动法，讲练结合法教具准备：多媒体教学教学内容：第1课时一、网页1、网页的概念：网页是网站的基本组成元素。
网页文件的扩展名通常为.htm或.html。
一般是由HTML 语言编写的文本文件。
2、网页的实质网页文档本身是一个文本文件，这些文本能够将文字及其他媒体文件有机的组织在一起，在浏览器中合适地显示。
二、HTML1、Html的中文含义Html是Hypertext Markup Language的缩写，其中文含义是“超文本标记语言”。
2、Html的概念它是使用特殊标记来描述文档结构和表现形式的一种语言，可以用来实现WEB页面。
3、网页文档的组成一个HTML文档通常分为文档头和文档主体两部分。
三、标记1、标记的格式在HTML中定义了许多标记，这些标记用来描述文档。
这些标记使用“<”和“>”括起来。
标记通常分为开始标记和结束标记。
其格式为：<标记名属性名=属性值>标记内容</标记名>注意：若一个标记有多个属性，属性和属性之间要用空格隔开。
示例：简单的网页文档<html><!—文档头部—><head><title>我的第一个网页</title></head><!—文档主体—><body bgcolor=blue text=red><h1>这是我的第一个网页<p>欢迎大家</body></html>第2课时2、常用标记<html>…</html> 标记一个HTML文档的开始和结束。
Dreamweaver CS3网页设计培训教程电子教案03
案例目标
本案例将练习在Dreamweaver CS3 中添加文本 。
Dreamweaver CS3网页设计培训教程
3.1.2 典型案例——制作版权信息栏
操作思路
（1）新建一个空白网页并划分出版权 栏。 （2）输入文本。 （3）在【属性】面板中设置其属性和 超链接，然后进行保存。
Dreamweaver CS3网页设计培训教程
Dreamweaver CS3网页设计培训教程
3.2.2 典型案例——美化版权信息栏
案例目标
本案例将练习对“版权.html”网页中的文 本进行格式设置 。
Dreamweaver CS3网页设计培训教程
3.2.2 典型案例——美化版权信息栏
操作思路
（1）对水平线进行设置。 （2）对所有的文本进字号设置。 （3）对段落对齐方式进行设置。 （4）对最后一行文本进行字体及颜色等设 置。
Dreamweaver CS3网页设计培训教程
3.2.2 典型案例——美化版权信息栏
操作步骤
具体操作步骤请教师参照软件及书中 内容进行讲解。
Dreamweaver CS3网页设计培训教程
3.2.2 典型案例——美化版权信息栏
案例小结
本案例通过美化“版权.html”为用户演示 了文本格式的设置方法。在设置文本格式 时，正文文本应尽量使用12像素的宋体。 另外，需要特别注意的是：对齐、缩进及 列表，都是针对文本段落的，只有对文本 段落才有效。
3.1.2 典型案例——制作版权信息栏
操作步骤
具体操作步骤请教师参照软件及书中 内容进行讲解。
Dreamweaver CS3网页设计培训教程
3.1.2 典型案例——制作版权信息栏
案例小结
网页设计DreamweaverCS3教案(华东师范大学)
第 7章建立框架网页教学目标：1．能够理解框架的作用2．能够合理使用框架划分窗口布局3．能够明白框架和框架集的关系4．能在框架中创建编辑网页5．能在框架中打开已有的网页进行编辑6．能够正确保存框架和框架集7．能够理解和编辑框架的属性教学重点：绘制布局表格、绘制布局单元格、设置布局表格和布局单元格的属性教学难点：绘制嵌套布局表格教学课时：理论：2课时实训：4课时教学方法：讲授法、任务驱动法。
教学过程:一、导入新课网页布局技术还有一种，叫做框架。
然而框架本质上是一种浏览器窗口的分割技术。
而前面我们学习的表格和层的布局方式则属于页面分割技术，只是对一个网页的页面做了的划分，在页面不同的位置放置不同的内容，但这些内容仍在同一个页面上。
利用框架，我们可以把浏览器窗口分成几个部分，每一部分都相当于浏览器窗口的一个子窗口，都可以用来显示一个完整的网页，从而可以实现多个页面在浏览器中的同时显示，所以说框架应该算作是一种“窗口”的布局技术。
按照布局要求，把浏览器窗口分成若干子窗口，并在各个子窗口中显示具有不同内容的网页，这些网页有机的结合在一起，达到一个完整的布局效果。
二、讲授新课（一）、框架和框架集的概念框架是一种窗口分割布局技术，利用框架我们可以把窗口分成规划好的若干子窗口，每一个框架都相当于一个子窗口，我们可以在框架中编辑和显示一个完整的网页。
不同框架中的网页是互不相干，根据我们的整体规划，可以把不同的信息放置在不同框架中页面上，从而实现我们想要的布局效果。
每一个框架都属于某个框架集，我们可以把框架集中的一个框架拆分，来实现更多子窗口的划分，就像我们项目中一样，这其实是通过在框架集中不断的嵌套子框架集来实现的。
（二）、创建框架在创建框架集或使用框架前，通过选择“查看/可视化助理/框架边框”命令，使框架边框在文档窗口的设计视图中可见。
1、使用预制框架集(1)、新建一个HTML文件，在快捷工具栏选择“布局”，单击“框架”按钮，在弹出的下拉菜单中选择“顶部和嵌套的左侧框架”。
Dreamweaver网页制作实训教程(CS3版)教学课件
1.3.4 测试和发布网站
有了空间和域名后，就可以测试并发布网站了， 网站测试一般包括服务器稳定和安全测试、程序 和数据库测试、网页兼容性测试等。
1.3.5 网站推广
1. 注册到搜索引擎 2. 交换广告条 3. 宣传 4. 网络广告 5. 报纸、杂志
第2章 Dreamweaver CS3入门
初识Dreamweaver CS3 网站创建与管理 页面总体设置
2.2.3 “文件”面板的应用
利用“文件”面板，可以高效地管理站 点。实际操作中，在定义站点后，我们 通常是利用该面板来创建、重命名或打 开站点中的网页文档或文件夹。
在定义了多个站点 后，可利用该下拉 列表选择要进行操 作的站点
2.3 页面总体设置
2.3是检索网页的整个内容，而是只检索 网页中的关键字和说明文本，如果想要自己的 网页能够被搜索引擎检索到，则最好把关键字 设定为人们经常使用的词语。
选择目标 文件所在 文件夹
单击选 择文件
单击“打 开”按钮
5．预览文档
如要预览文档，可在打开文档后单击“文档” 工具栏中的“在浏览器中预览/调试”按钮 ， 在弹出的菜单中选择“预览在IExplore”菜单 项（或直接按【F12】键），在浏览器中打开 文档。
2.2 网站创建与管理
2.2.1 确定站点目录结构
网页制作与网站设计_03Dreamweaver CS3 基础
•
如果要打开网页文件，可以选择菜单“文件”|“打开”命令，在 “打开”对话框中选择需要打开的网页文件
Dreamweaver CS3基础
任务五描述：建立站点 站点是建立和管理网站文件的一种方式和方法，因此，建立站点 是创建网站的一个重要前提之一。Dreamweaver CS3是一个站点创 建和管理工具，使用它不仅可以创建单独的文档，还可以创建完整的 站点。 解决方案 在使用Dreamweaver CS3制作网页前，最好先定义一个新站点， 这是为了更好地利用站点对文件进行管理，尽可能减少错误，如路径出 错、链接出错等。我们可以使用【站点定义向导】按照提示快速创建本 地站点
Dreamweaver CS3基础
知识讲解及操作步骤 1. Dreamweaver特点： 2. 灵活编写网页的特点
3. 可视化编辑界面
4. 强大的Web站点管理功能 • • • • 业界领先的网页设计工具 集成的工作流 整的CSS支持 轻松的Spry
Dreamweaver CS3基础
任务二描述：了解Dreamweaver CS3创建Web站点的工作流程 经过对Dreamweaver CS3特点、新特性的了解，小刚已经对 Dreamweaver CS3有了基本的认识，下面我们来学习如何利用 Dreamweaver CS3创建Web站点的流程。
Dreamweaver_CS3实用教程完整版
1.1.1 网页和网站的概念
网页(web)，也就是网站上的某一个页面，它是一个纯文本文件，是向浏览 者传递信息的载体，以超文本和超媒体为技术，采用HTML、CSS、XML等语 言来描述组成页面的各种元素，包括文字、图像、音乐等，并通过客户端浏览 器进行解析，从而向浏览者呈现网页的各种内容。 网站(Website)，它是指在互联网上，根据一定的规则，使用HTML等工具 制作的用于展示特定内容的相关网页集合，它建立在网络基础之上，以计算机、 网络和通信技术为依托，通过一台或多台计算机向访问者提供服务。平时所说 的访问某格站点，实际上访问的是提供这种服务的一台或多台计算机。
第1章 网站的设计与制作简述
Dreamweaver CS3是一款专业的网页制作软件，它具有简单易学、操作 方便以及适用于网络等优点。通过对Dreamweaver CS3的学习，即使没有任 何网页制作经验的用户，也能很容易上手，制作出精美的网页。本章主要介绍 了网页的基本概念、网页设计的构思和设计流程，以及Dreamweaver CS3的 新增特色功能和工作环境等。
1.2.2 网页的设计构思
在制作网页之前，首先要进行网页的设计与构思，主要包括网页的主题、 网页的命名、网站标志、色彩搭配和字体等要素。
1.2.3 网页的布局
网页布局的好坏是决定网页美观与否的一个重要方面。通过合理的布局， 可以将页面中的文字、图像等内容完美、直观地展现给访问者，同时合理安排 网页空间，优化网页的页面效果和下载速度。反之，如果页面布局不合理，网 页在浏览器中的显示将十分糟糕，页面中的各个元素显示效果可能会重叠或丢 失。因此，在对网页进行布局设计时，应遵循对称平衡、异常平衡、对比、凝 视和空白等原则。常见的网页布局形式包括：型布局、T型布局、“三”型布 局、对比布局和POP布局等。
第3章网页文本应用
Dreamweaver网页制作
应用举例——用CSS样式设置文本格式 利用CSS样式为Triangel网页进行文本 格式设置，最终效果如下图所示 。
Dreamweaver网页制作
Dreamweaver网页制作
练习（四）
在Dreamweaver CS3中输入宋词《满江 红》，利用CSS样式设置其格式，参考效果 如下图所示。
Dreamweaver网页制作
提高：操作CSS样式表
页面文本的输入和设置比较简单，其操作与常 用的Word等文字处理软件差不多，但是关于文本样 式的设置和应用则有一些区别。
Dreamweaver网页制作
设置段落格式
设置段落缩进
设置文本对齐
Dreamweaver网页制作
设置段落缩进
将光标插入点定位到需要设置格式的段落 中，在“属性”面板的“格式”下拉列表框 中选择“段落”选项，可通过单击相应的按 钮设置缩进或凸出。
Dreamweaver网页制作
设置文本对齐
Dreamweaver提供了左对齐、居中对 齐、右对齐和两端对齐等4种对齐方式。可 在“属性”面板中进行设置，也可选择“ 文本/对齐”菜单中的对齐命令进行设置。
选择“窗口/CSS样式”命令可在浮动 面板组打开“CSS样式”面板，如下图所 示。
Dreamweaver网页制作
创建CSS样式
创建内部CSS
创建外部CSS
Dreamweaver网页制作
创建内部CSS
内部CSS样式只能用于当前网页，可在 CSS面板中单击鼠标右键，在弹出的快捷 菜单中选择“新建”命令，也可单击面板 右下角的“新建CSS规则”按钮进行创建 。
Dreamweaver CS3 网站设计指南说明书
1 DESIGNING WEBSITES WITH DREAMWEAVER CS3 20:311 Comparing Web Design Options2 Appreciating CSS Advantages3 Reviewing Old School Designs4 Creating Dynamic Sites5 Reviewing Site Di erences2 CREATING A NEW WEBSITE 43:441 Creating a New Site2 Creating a New Page3 Adding Images with Alternate Text4 Inserting & Formatting Text5 Aligning Images with the Property Inspector6 Using the Page Properties Dialog Box7 Linking to Pages in a Site8 Creating an Email Link9 Linking to Other Websites10 Testing & Targeting Links11 Organizing Files & Folders3 CUSTOMIZING THE INTERFACE 24:331 Introducing the Workspace2 Opening an Existing Site3 Working in Code, Design & Split Views4 Customizing the Insert Bar5 Use the Properties Inspector & the Tag Selector6 Reviewing Menu Options & Preferences7 Comparing the Macintosh® & PC Interfaces8 Previewing in Browsers & Device Central4 CREATING & INSERTING IMAGES 22:301 Optimizing Images for the Web2 Saving GIFs & PNGs in Photoshop®3 Inserting GIFs in Dreamweaver4 Adjusting Transparency Settings5 Saving JPGs for the Web6 Edit Images in Dreamweaver & Photoshop7 Changing Editor Preferences5 CREATING CSS LAYOUTS 1:201 Getting Started with Styles2 Creating Tag & Class Styles3 Creating Styles to Format Images4 Reviewing CSS Code5 Previewing Page Styles6 Understanding Page Properties7 Creating Divs with ID Styles8 Adding Images & Lists to Divs9 Creating a Series of Divs10 Aligning Divs Side by Side11 Using the Clear Option in CSS12 Adding Borders with CSS13 Creating an Image Border14 Using Margins for Positioning15 Creating Navigation Links16 Styling a List for Navigation17 Creating a Rollover E ect in CSS18 Duplicating Existing Styles19 Changing Page Properties Styles20 Reviewing Style Selectors6 DESIGNING WITH CSS 57:061 Understanding the Box Model2 Comparing Margins & Padding3 Viewing CSS in Various Browsers4 Creating a Page from a Template5 Using Paste Special6 Using Styles to Align Images7 Creating a Two Column Layout8 Calculating CSS Spacing9 Styling Headlines10 Understanding Font Sizes11 Using External Style Sheets12 Viewing Styles13 Reviewing CSS Options7 CREATING LAYOUTS WITH ABSOLUTE POSITIONING 53:431 Explaining Absolute Positioning2 Comparing Absolute & Centered Positioning3 Warnings about Using AP Divs4 Using a Tracing Image5 Creating a Layout with AP Divs6 Naming AP Divs7 Nesting AP Divs8 Aligning AP Divs9 Inserting Images into Divs10 Calculating Page Layouts11 Re ning an AP Layout12 Setting the Z-Index8 DESIGNING ACCESSIBLE TABLES 31:521 Understanding Tables & Accessibility2 Using Tables for Tabular Data3 Styling a Table4 Editing Table Layouts5 Adding Style to a Table Using CSS9 CREATING WEBSITES WITH FRAMES 20:301 Introducing Frames2 Creating a Frameset3 Opening Pages into Frames4 Controlling Scrollbars & Borders5 Targeting Links in Frames6 CreditsPart 1 –Part 2 –1 USING BEHAVIORS TO ADD INTERACTIVITY 43:051 Viewing Behaviors in a Browser2 Introducing the Behaviors Panel3 Inserting Rollover Images4 Using the Swap Image Behavior5 Altering Swap Image Options6 Using the Show-Hide Elements Behavior7 Using the Open Browser Behavior8 Downloading More Behaviors2 SURVIVAL HTML & CSS 23:471 Writing HTML: The Fundamentals2 Understanding Doctypes3 Recognizing HTML Tags4 Understanding Links5 Working in Split View 3 USING & CREATING TEMPLATES 30:451 Using CSS Layouts2 Editing CSS Layouts3 Altering CSS Styles4 Creating a Dynamic Web Template5 Editing Dynamic Web Templates4 CREATING WEB FORMS 25:111 Creating & Inserting a Form2 Inserting Text Fields3 Adding Drop-Down Lists4 Inserting Radio Buttons5 Inserting Check Boxes & a Submit Button6 Connecting a Form to a Script5 ADDING FLASH® TO YOUR PAGES 25:371 Working with Flash2 Inserting Flash Video3 Creating Flash Buttons & Text4 Troubleshooting the Flash Options6 TESTING & PUBLISHING A WEBSITE 18:351 Using the Check Page Feature2 Testing & Fixing Links3 Running Site Reports4 Con guring FTP Settings5 Publishing a Site to a Server7 DREAMWEAVER TIPS & TRICKS 07:291 Registering a Domain Name2 Finding Fonts & Photos3 Learning More Online4 Final Comments & Credits | 800-980-1820。
DW教案
《网页设计Dreamweaver CS3》教案二、网页的基本构成要素《网页设计Dreamweaver CS3》教案成修改。
步骤三：创建文件夹。
在站点的根本件夹中可以创建若干子文件夹。
我们要建设一个完整、成功的网站，其中必然要包含很多内容，如：网页文件、图片文件、声音文件、动画文件等等。
为了方便开发者分类管理、维护这些文件，使得站点中各类文件的存放有条理性、结构性，可以通过在站点根文件夹中建立若干子文件夹的形式，对各种类型的文件分类保存管理，如：建立images文件夹来存放图片文件；建立music音文件等等。
当然也可以按照其他方法分类进行保存管理步骤四：创建网页文件。
在站点的根本件夹中创建一个空白页面并命名，本例中重新将网页文件命名为index.html，该名称在站点中一般作为首页的名称。
当然，除了可以直接在站点根文件下创建网页外，还可以在根文件夹中的子文件夹里创建网页。
【知识链接】Dreamweaver简介三、创建站点的必要性Dreamweaver中的站点可组织与网站相关的所有文档，跟踪和维护链接，管理文件，共享文件以及将站点文件传输到Web Dreamweaver 站点根据站点中文件的存放地点，可以分为本地站点和远程站点，本教材中所有项目中所建立站点均为本地站点。
四、首页和网站结构通常所说的网站是由一个或多个网页组成的，而进入网站时首先打开的网页称为首页或主页。
按照行业习惯命名为“index.htm”(“index.html default.htm”(“default.html”)。
本书中站点首页名称一律采用了为。
网站结构图：主页页《网页设计Dreamweaver CS3》教案【项目目标】•能新建并保存网页文件•能掌握普通文本的输入方法、复制、粘贴。
•能设置页面背景•插入图像，图像对齐方式设置。
步骤五：插入特殊字符和日期《网页设计Dreamweaver CS3》教案【项目目标】•能正确插入普通图像•能合理设置图像属性制作要点提示1.创建一个本地站点并且新建一个子文件夹images来管理素材文件2.新建一个网页，保存网页文件，将其命名为“index.html”3.插入一个3行3列的表格4.在每个单元格中分别插入一幅图像5.保存文件，预览最终效果《网页设计Dreamweaver CS3》教案【项目目标】•能正确插入Flash动画•能掌握Flash对象的插入方法•能学会视频的插入•能正确添加背景音乐【项目分析】具体工作任务：1.一个网页，主题为“与青春有约”2.置页面背景，使效果更加完美3.入文字，进行适当的格式化设置4.入Flash动画，设置对齐方式，放置一个合适位置5.Flash文本，内容为版权信息，设置动态变换方式6.入Flash按钮，设置链接7.置背景音乐8.入视频操作方法：选中要编辑的插件，然后编辑、修改插件属性面板的参数。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
“编辑字体列表”对话框
3.1 文本的输入和编辑
(2) 设置文字大小 在属性面板的“大小”列表中选择相应的大小级别和单位， 在属性面板的“大小”列表中选择相应的大小级别和单位，可以更 改选择文字的大小。 改选择文字的大小。 (3) 设置文本颜色 系统默认文本颜色是黑色，要设置文本其他颜色，先选择文本， 系统默认文本颜色是黑色，要设置文本其他颜色，先选择文本，单击 属性面板中的，在颜色拾取器中选择颜色，或在右边的文本框中输入颜色 属性面板中的，在颜色拾取器中选择颜色， 的名称或16进制代码，例如：red或#FF0000。 的名称或16进制代码，例如：red或#FF0000。 16进制代码
颜色拾取器ຫໍສະໝຸດ 3.1 文本的输入和编辑5．插入水平线 ．
(1) 创建水平线 光标定位于需要插入水平线的位置，选择菜单“ 光标定位于需要插入水平线的位置，选择菜单“插入记录 HTML→水平线 命令。 水平线” →HTML→水平线”命令。 (2) 修改水平线 选择水平线，窗口下方出现如图3 14所示的属性面板 所示的属性面板， ①选择水平线，窗口下方出现如图3-14所示的属性面板，通 过属性面板，可以设置水平线的一些属性。 过属性面板，可以设置水平线的一些属性。
“水平线属性”面板
3.1 文本的输入和编辑
②设置水平线颜色。右击水平线，在弹出菜单中选择“编辑标 设置水平线颜色。右击水平线，在弹出菜单中选择“ 命令， 标签编辑器”对话框。选择“浏览器特定的” 签”命令，打开 “标签编辑器”对话框。选择“浏览器特定的” 选项，单击，在颜色拾取中选择合适颜色，单击“确定”按钮。 选项，单击，在颜色拾取中选择合适颜色，单击“确定”按钮。 。
2．JPG/JPEG图像 ． 图像
JPEG的含义是“联合图像专家组”，文件扩展名为“.jpg”或 的含义是“联合图像专家组” 文件扩展名为“ 的含义是 或 格式可以支持24位真彩色 “.jpeg”。 JPEG格式可以支持 位真彩色，普遍应用于存储连续色调 。 格式可以支持 位真彩色， 的图像。 格式可以支持有损或无损压缩， 的图像。 JPEG格式可以支持有损或无损压缩，是可以把文件压缩到最 格式可以支持有损或无损压缩 小的格式。 格式压缩的主要是高频信息， 小的格式。JPEG格式压缩的主要是高频信息，能用较大的压缩比保存 格式压缩的主要是高频信息 颜色丰富的图像，适合应用于互联网，可减少图像的传输时间， 颜色丰富的图像，适合应用于互联网，可减少图像的传输时间，目前各 类浏览器均支持JPEG这种图像格式。 这种图像格式。 类浏览器均支持 这种图像格式
3.4 图像的插入 3.5 设置图像属性
本章要点
3.6 插入 插入Flash动画 动画
插入Flash动画文件 动画文件 插入 设置透明背景 插入Flash按钮 按钮 插入
3.7 插入其他多媒体元素
插入音频文件 插入视频文件
3.8 超链接的类型
链接路径 链接类型
本章要点
3.9 创建各种超链接
文本超链接 图像超链接 锚点超链接 电子邮件超链接 空链接 文件下载链接 脚本链接
“标签编辑器”对话框
3.2 页面属性
1．“页面属性”对话框的打开 ． 页面属性”
·选择菜单“修改→页面属性”命令。 选择菜单“修改→页面属性”命令。 Ctrl+J键 ·按Ctrl+J键。 ·右击文档窗口空白处，在弹出的菜单中选择“页面属性”命令。 右击文档窗口空白处，在弹出的菜单中选择“页面属性”命令。 单击属性面板中按钮。 ·单击属性面板中按钮。
3.4 图像的插入
(1) 将光标定位到窗口中要插入图像的位置，执行以下操作之一，打 将光标定位到窗口中要插入图像的位置，执行以下操作之一， 选择图像源文件”对话框。 开 “选择图像源文件”对话框。 ·选择菜单“插入记录 图像”命令。 选择菜单“ 图像” 选择菜单 插入记录→图像 命令。 ·选择插入栏“常用”类别中的“图像”按钮。 选择插入栏“ 选择插入栏 常用”类别中的“图像”按钮。 ·按Ctrl+Alt+I键。 按 键
3.1 文本的输入和编辑
2．文字的换行 ．
强制换行有段落换行和换行符换行两种方式。 强制换行有段落换行和换行符换行两种方式。 (1) 段落换行 在换行位置按Enter键，会自动添加段落标记</p>和<p>，生成新的段 键 会自动添加段落标记 在换行位置按 和 ， 落，并且在两段之间会空出一行。 并且在两段之间会空出一行。 (2) 换行符换行 ·按Shift+Enter键。 按 键 ·选择菜单“插入记录→HTML→特殊字符 换行符”命令。 选择菜单“插入记录 特殊字符→换行符 选择菜单 特殊字符 换行符”命令。 ·选择插入栏“文本”类别中的按钮，在下拉菜单中选择“换行符”命 选择插入栏“文本”类别中的按钮，在下拉菜单中选择“换行符” 选择插入栏 令。 ·在代码视图窗口中，输入换行代码标记 <br/>。 在代码视图窗口中， 在代码视图窗口中 。
“链接”对话框
3.2 页面属性
(3) 标题 编码 标题/编码 标题/编码 选项中可以设置网页标题和编码类别，如图所示。 编码” 在“标题 编码”选项中可以设置网页标题和编码类别，如图所示。
“标题/编码”对话框
3.3 网页图像格式
1．GIF图像 ． 图像
GIF的含义是“图像互换格式”。GIF文件不属于任何应用程序， 的含义是“图像互换格式” 文件不属于任何应用程序， 的含义是 文件不属于任何应用程序 目前几乎所有相关软件都支持GIF图像文件。 图像文件。 目前几乎所有相关软件都支持 图像文件 GIF格式图像可以制作成 格式图像可以制作成GIF动画。 动画。 格式图像可以制作成 动画 GIF文件的缺点是最多只能使用 256 种颜色，适合存储色调不连续 种颜色， 文件的缺点是最多只能使用 或具有大面积单一颜色的图像，例如按钮、图标、徽标或其它具有统一 或具有大面积单一颜色的图像，例如按钮、图标、 色彩和色调的图像。 色彩和色调的图像。
3.2 页面属性
(1) 外观 在“外观”选项中可以设置页面的默认字体、背景颜色和页面边距等。 外观”选项中可以设置页面的默认字体、背景颜色和页面边距等。
“外观”对话框
3.2 页面属性
(2) 链接 链接”选项中可以设置链接的字体、颜色和下划线样式等， 在“链接”选项中可以设置链接的字体、颜色和下划线样式等，如图 所示。 所示。
3.1 文本的输入和编辑
3．插入空格 ．
·按Ctrl+Shift+Space键。 Ctrl+Shift+Space键 ·选择菜单“插入记录→HTML→特殊字符→不换行空格”命令。 选择菜单“插入记录→HTML→特殊字符→不换行空格”命令。 特殊字符 ·选择插入栏“文本”类别中的按钮，在下拉菜单中选择“不换行空格” 选择插入栏“文本”类别中的按钮，在下拉菜单中选择“不换行空格” 命令。 命令。 ·在代码视图窗口中，输入空格代码 。 在代码视图窗口中，输入空格代码 。 ·切换中文输入法为全角状态，按空格键输入。 切换中文输入法为全角状态，按空格键输入。
2．页面属性对话框的设置 ．
“页面属性”对话框共有五种分类：“外观”、“链接”、 页面属性”对话框共有五种分类： 外观” 链接” 标题” 标题/编码” 跟踪图像” 其中常用的是“ “标题”、“标题/编码”、“跟踪图像”，其中常用的是“外 链接” 标题/编码”三个类别。 观”、“链接”和“标题/编码”三个类别。
本章任务
1. 学会文本的输入方法； 学会文本的输入方法； 2. 学会文本的属性设置； 学会文本的属性设置； 3. 学会页面属性的设置； 学会页面属性的设置； 4. 学会图像的插入和属性设置； 学会图像的插入和属性设置； 5. 能插入 能插入Flash动画、音频和视频文件； 动画、 动画 音频和视频文件； 6. 了解超链接的各种类型； 了解超链接的各种类型； 7. 能建立各种类型的超链接。 能建立各种类型的超链接。
第3章 网页的基本操作
本章要点 本章导读 本章任务 上机实训
本章要点
3.1文本的输入和编辑 文本的输入和编辑
文本的输入 文字的换行 插入空格 文本的属性设置 插入水平线
3.2 页面设置
“页面属性”对话框的打开 页面属性” 页面属性对话框的设置
本章要点
3.3 网页图像格式
GIF图像 图像 JPG/JPEG图像 图像 PNG图像 图像
3.3 网页图像格式
3．PNG图像 ． 图像
PNG的含义是“可移植性网络图像”，是网络接受的新型图像文 的含义是“可移植性网络图像” 的含义是 件格式。 能够提供长度比GIF小30％的无损压缩图像文件，但与 件格式。PNG能够提供长度比 能够提供长度比 小 ％的无损压缩图像文件， JPEG相比，压缩量较少，它同时提供 24位和 位真彩色图像支持以 相比，压缩量较少， 位和48位真彩色图像支持以 相比 位和 及其他诸多技术性支持。由于PNG非常新，所以目前并不是所有的程 非常新， 及其他诸多技术性支持。由于 非常新 序都可以用它来存储图像文件， 可以处理PNG图像文件， 图像文件， 序都可以用它来存储图像文件， Photoshop可以处理 可以处理 图像文件 也可以用PNG图像文件格式存储。文件必须具有.png文件扩展名才能 也可以用 图像文件格式存储。文件必须具有 文件扩展名才能 图像文件格式存储 识别为PNG文件。 文件。 被 Dreamweaver 识别为 文件
本章导读
本章介绍DreamWeaver建立网页的基本操作。 本章介绍DreamWeaver建立网页的基本操作。 DreamWeaver建立网页的基本操作 主要包括文本的输入和编辑方法； 主要包括文本的输入和编辑方法；图像的插入和属 性设置；Flash动画和其他多媒体元素的插入；各 性设置；Flash动画和其他多媒体元素的插入； 动画和其他多媒体元素的插入 种超链接的建立方法。 种超链接的建立方法。