dreamweaver8_简单网页制作
Dreamweaver8系列DIV+CSS教程网页标准布局实例教程(二)
div+css网页标准布局实例教程（二）五、布局页面——头部和导航有了上边的基础，下面的任务就是要利用html和css制作完成一个完整的网页了。
先从头部开始，第三小节时我们已经把整体框架给搭建好了，就像盖房子一样，整体结构已经出来了，下面就需要填砖分割空间了。
先分析下头部：分为两部分，一个是logo靠左侧显示，一个是搜索靠右侧显示，那么布局时插入两个div，一个向左浮动，一个向右浮动的方式来完成。
另外还有很多种实现方法，比如logo用h1标签，搜索用span，或者把log o做为背景图片也是可以的，不管采用哪种方法，要根据页面的需求选用一种最合理的方法。
如果要在logo加上链接的话，那么就不能用背景图片的方法了。
<div id="header"><div id="logo">此处显示id "logo" 的内容</div><div id="search">此处显示id "search" 的内容</div></div>先在header里插入以上两块元素。
然后分别插入相应的内容，在logo里插入我们事先切割好的logo图片，在search里插入一个表单，一个文本框和一个按钮，插入后如下：<div id="header"><div id="logo"><img src="images/logo.gif" width="181" height="45" /></div><div id="search"><form id="form1" name="form1" method="post" action="">搜索产品<input type="text" name="textfield" id="textfield" /><input type="submit" name="button" id="button" value="查询" /></form></div></div>接下来定义css吧，在ps里测量，头部的高度是71px，logo距顶部18px，搜索产品距顶部30px，下面在css里把这些参数都给定义上，看显示的效果和效果图中的效果是不是一样呢？#logo { float:left; margin-top:18px;}#search { float:right; margin-top:30px;}这两项的位置已经差不多了。
Dreamweaver 8 创建和编辑网页
网页设计与制作——《 Dreamweaver 8 教程》讲义
五、修改网页属性：
2. 【页面属性】对话框
• 外观
【外观】选项卡
网页设计与制作——《 Dreamweaver 8 教程》讲义
五、修改网页属性：
2. 【页面属性】对话框
• 链接
【链接】选项卡
网页设计与制作——《 Dreamweaver 8 教程》讲义
【文件】面板
网页设计与制作——《 Dreamweaver 8 教程》讲义
五、修改网页属性：
1. 网页的基本属性
• 外观属性——指页面中文本的字体、字样、大小、颜 色、背景颜色和背景图像，以及页面边距的设置。 • 链接属性——指链接文本的字体、大小，链接文本的 颜色，鼠标指针指向链接文本时的颜色，已访问过的链 接文本的颜色，单击链接文本时的颜色，以及下画线的 样式。
1. 通过【打开】对话框打开文档
• 选择【文件】| 【打开】命令， 弹出【打开】对 话框，选择所需 的网页文档，单 击【打开】按钮。
【打开】对话框
网页设计与制作——《 Dreamweaver 8 教程》讲义
四、打开已有文档：
2. 通过【文件】面板打开文档
• 显示【文件】面板， 在面板左上方的【站 点】下拉列表框中选 择保存网页的站点、 服务器或驱动器，然 后在文件和文件夹列 表中双击所需网页文 档的图标。
三、网页的保存：
• 保存当前网页：选择【文件】|【保存】命令，弹出 【另存为】对话框，打开所需站点文件夹，在【文件夹】 文本框中输入网页名称，然后单击【保存】按钮。 • 保存已创建的所有页面：选择【文件】|【保存全部】 命令。
网页设计与制作——《 Dreamweaver 8 教程》讲义
dreamweaver8网页设计教程
《dreamweaver8网页设计》目录第一章遨游DREAMWEA VER8精彩世界1第二章创建与规划站点3第三章文本及其格式化10第四章表格13第五章图像15第六章框架18第七章页面布局视图的使用21第八章链接24第九章层与时间轴 28第十章表单32第十一章行为35第十二章制作动态页面38第十三章代码片断、库项目和模板 42第十四章网页的制作45第十五章网站的测试与上传49第十六章使用FIREWORKS 8处理网页图像 52第一章遨游Dreamweaver8精彩世界课题：Dreamweaver8简介及创建文档一、教学基本内容1、Dreamweaver8 的工作界面2、建立html文档二、课型：新授课三、课时：2个课时四、教学重点与难点重点：熟悉Dreamweaver8工作界面中各个工具的作用难点：1、各个面板的调用2、建立一个HTML的网页3、插处图像五、教学目的1 、对Dreamweaver这个制作网页的工具及网页有一定的认识，激发学生学习网页设计的兴趣2、一定要学会建立一个空白网页3、会对页面有一个简单的设置六、教学过程1、引入（1）为什么要用Dreamweaver而不用Frontpage?Dreamweaver是Macromedia公司的出品，它以程序小、运行速度快、所制作网页代码少这些优点，赢得了网页制作人员的喜爱。
（2）相关工具的介绍因为这是第一节网页制作课，所以首先要简单介绍下制作网页的一些相关工具，比如与Dreamweaver合称为网页三剑客的Flash和Fireworks。
2、讲授新课（1） Dreamweaver的界面a．文档窗口：主菜单、工具栏、底部启动条、文档编辑区b．对象面板：标准、表格、表单、框架、特殊、文件廷冖隐藏、字符c．启动面板：站点管理、代码检查、HTML样式、CSS样式、行为、历史记录、资源管理d．属性面板：随目前对象不同而内容不同(2)创建HTML网页(3)在网页中插入图像输入文字以后，插入图像，并对图像设置对齐的方式，使之与文字呈混排的状态。
利用Dreamweaver8软件制作网站
利用Dreamweaver8软件制作网站摘要：Dreamweaver8是建立Web站点和应用程序的专业工具。
它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。
本文在实施制作过程中充分的体现出了Dreamweaver8的强大功能。
本文主要分为四各部分。
第一部分介绍Dreamweaver8，第二部分讲述利用Dreamweaver8制作网站的主要过程与步骤，第三部分讲述在运用Dreamweaver8时需注意的一些地方与一些心得。
前言Dreamweaver是美国Macromedia公司开发的集网站制作和网站管理于一身的所见即所得的网页编辑器，它是第一套针对专业网页设计师特别开发的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
Dreamweaver是专业可视化网站开发的先锋。
在2000年，为了响应Web开发者中越来越普遍的服务器技术，Macromedia推出了Dreamweaver UltraDev。
此产品提供了Dreamweaver的功能和用于采用ASP、JSP、ColdFusion 创建Web应用程序工具的功能。
Dreamweaver8是在旧版本的基础之上构建的，通过在主要领域（如XML和CSS）扩展功能并简化工作流程来帮助用户在最短时间内完成更多工作。
通过支持最新的专业设计方法，Dreamweaver8采用Web社区所使用的强大的开放式、基于标准的开发。
Dreamweaver8还支持所有主要服务器技术，包括ColdFusion、PHP、ASP、和JSP，使所有技术级别的开发者的设计都栩栩如生。
一、Dreamweaver8特点Dreamweaver是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件，随着Dreamweaver 8的发布，更坚定Dreamweaver在该领域的地位。
Dreamweaver8中文版网页制作基础课程设计
Dreamweaver8中文版网页制作基础课程设计课程范围本课程旨在教授Dreamweaver8软件的基础知识，包括网页制作的基础知识、网页设计的基本原则、标记语言和样式表的应用，以及交互设计的概念和技能。
具体而言，学生将学习以下技能：1.熟练掌握Dreamweaver8软件的常用菜单和工具2.了解HTML、CSS、JavaScript编程语言的基础知识3.能够使用HTML语言建立网页的框架结构、插入多媒体元素和超链接4.能够使用CSS语言为网页添加样式和布局5.能够使用JavaScript语言进行简单的交互设计教学方法本课程采用理论教学和实践教学相结合的方法。
在课堂上，老师将结合案例分析和操作演示来讲解理论知识，并设置相关练习来帮助学生巩固所学的知识。
在实践环节，学生将根据老师的指导自行制作网页，并展示自己的成果。
在课程结束后，学生将提交一个网页设计作品，并进行评分和点评。
教学安排本课程共分为10个单元，每个单元包括理论讲解和实践环节。
具体教学安排如下：单元1：Dreamweaver8软件介绍和安装1.Dreamweaver8软件介绍2.Dreamweaver8软件安装与配置3.Dreamweaver8主界面介绍单元2：网页与网站基础知识1.网页的基本概念和类型2.网站的基本结构3.网页设计的基本原则单元3：HTML语言基础1.HTML语言介绍2.HTML语法规则和标签3.HTML文档结构单元4：HTML语言进阶1.HTML链接和嵌入对象2.HTML表格和表单3.HTML图像和图像映射单元5：CSS语言基础1.CSS语言介绍2.CSS语法规则和选择器3.CSS样式和优先级单元6：CSS语言进阶1.CSS盒模型和布局2.CSS动画和过渡3.CSS响应式设计单元7：JavaScript语言基础1.JavaScript语言介绍2.JavaScript语法规则和语句3.JavaScript变量和数据类型单元8：JavaScript语言进阶1.JavaScript函数和对象2.JavaScript事件和事件处理3.JavaScript DOM和jQuery库单元9：网页交互设计1.网页交互设计概念和原则2.网页交互设计工具和方法3.网页交互设计案例分析单元10：综合实践和评估1.自主设计网页2.网页制作实践3.网页作品评估和点评教学要求1.学生需要自备Dreamweaver8软件和相关教材2.学生需要参加所有的课程和实践环节3.学生需要完成作业和网页设计作品4.学生需要积极参与讨论和问答环节评分标准1.准时到课和积极参与讨论和问答环节（10%）2.网页制作作业（40%）3.网页设计作品（50%）。
Dreamweaver8中文版网页制作基础教学设计 (2)
Dreamweaver8中文版网页制作基础教学设计1. 前言随着互联网技术的飞速发展，越来越多的人开始关注网页制作技术。
而Dreamweaver作为最受欢迎的网页制作工具之一，为网页设计师提供了强大的支持。
本教学将介绍Dreamweaver8中文版的基础知识及其使用，希望能够帮助初学者顺利入门网页制作。
2. Dreamweaver8中文版的介绍Dreamweaver8是由Adobe公司推出的一款网页制作工具。
它的主要特点有以下几点：•WYSIWYG编辑器：所见即所得的编辑模式，方便用户快速制作网页。
•支持多种编程语言：Dreamweaver8支持HTML、CSS、JavaScript等多种编程语言，可以轻松制作复杂的网页。
•内置库和模板：Dreamweaver8内置了大量的库和模板，可以加速用户的工作流程。
•图形用户界面：Dreamweaver8的用户界面非常直观，易于使用，适合初学者入门。
3. Dreamweaver8中文版的安装要学习Dreamweaver8中文版的使用，首先需要在电脑上进行安装。
以下是安装步骤：1.下载Dreamweaver8的安装文件（建议从官方网站下载）。
2.运行安装文件，按照提示进行安装。
3.在安装过程中，可以选择要安装的组件和安装路径。
4.安装完成后，双击Dreamweaver8的图标即可启动程序。
4. Dreamweaver8中文版的界面Dreamweaver8的界面分为以下几个部分：•菜单栏：包含Dreamweaver8的各种功能选项。
•工具栏：包含用于网页制作的各种工具。
•文件管理器：用于管理网页文件。
•代码编辑器：用于输入和编辑HTML、CSS等编程语言的代码。
•设计视图：所见即所得的编辑模式，方便用户制作网页。
5. Dreamweaver8中文版的基础操作在学习使用Dreamweaver8之前，需要掌握一些基础操作。
下面介绍几个常用的基础操作：5.1 新建网页1.在菜单栏中选择“文件”->“新建”，或在工具栏中点击“新建”按钮。
第8章网页制作工具Dreamweaver8
相关的属性，用于为“文件”面板设置站点首选参数，如图814所示。
图8-14 站点参数设置
8
8.2 站点管理
所谓站点，可以看做是一系列文档的组合，这些文档之 间通过各种链接关联起来，可能拥有相似的属性，例如，描 述相关的主体，采用相似的设计，或者实现相同的目的等， 也可能只是毫无意义的链接。利用浏览器，就可以从一个文 档跳转到另一个文档，实现对整个网站的浏览。 8.2.1 本地站点和远端站点
图8-64 实例效果
【例8-8】
22
8.7 使用表格
8.7.1 插入表格 表格是页面布局极为有用的设计工具。在设计页面时，往
往要利用表格来定位页面元素。使用表格可以导入表格化数据， 设计页面分栏，定位页面上的文本和图像等。 在Dreamweaver中插入表格的方法如下。 ① 将光标放到要插入表格的位置。 ② 执行下列操作之一：
（1）插入工具栏 Dreamweaver 8的插入工具栏如图8-4（a）所示，插入工
具栏中默认显示的是“常用”类的主要功能按钮。单击“常用”按 钮会弹出一个下拉菜单，其中包含了插入工具栏中的其他功能 菜单，如图8-4（b）所示。用户选择不同的分类，插入工具栏 中包含的功能按钮也随之改变。
图8-4 插入工具栏及其功能分类菜单
如果需要设置网页的其他属性，可以打开“页面属性”对 话框进行设置。
14
8.3 制作第一个网页
8.3.3 网页基本元素 在通常情况下，网页上一般都包含文本、日期、特殊符号
及水平线等基本元素。 1．文本和特殊符号
文本的操作主要包括：输入文字、设置文字大小、设置字 体、设置文本颜色、设置文本对齐方式等。 2．日期
Dreamweaver 8网页设计
（3） DIV布局 DIV是一个容器，可以放置内容。DIV+CSS=内容+表现 优点：代码精简、提高页面下载速度、表现和内容相分离等 缺点：比较灵活难于控制 应用场合：复杂的不规则页面、业务种类较多的大型商业网站
使用CSS美化页面
一、认识CSS： CSS是Cascading Style Sheets的缩写，称为“层叠样式表”。 “样式”就是格式，文字的大小，颜色等网页内容的样式。 “层叠”是指在HTML文件中引用数个定义样式的样式文件时，若数个样式文件 间所定义的样式发生冲突，将依据层次顺序处理。 二、CSS语法： 1.基本语法： CSS的定义是3部分构成：选择符（selector）、属性（properties）和属性值（ value）。
• <html> • <frameset cols="25%,50%,25%"> • <frame src="/example/html/frame_a.html"> • <frame src="/example/html/frame_b.html"> • <frame src="/example/html/frame_c.html"> • <noframes> • <body>您的浏览器无法处理框架！</body> • </noframes> • </frameset> • </html>
• 2.9 框架 – 表格和层均是以插入的对象为单位，而框架则不同， 它是以插入的网页为单位，它提供了一种较为固定的 网页结构。
（1）框架的基本结构 <HTML> <HEAD> <TITLE>rows_cols框架</TITLE> </HEAD> <FRAMESET rows="25%,50%,*" border="5"> <FRAME name=“top" src="the_first.html"> <FRAME name="middle" src="the_second.html"> <FRAME name=“bottom" src="the_third.html"> </FRAMESET> <noframes><body>……</body></noframes> </HTML>
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
•
• •
6）单击“下一步”按钮，在弹出的对话框“您如何连接到远程服务器？”下 拉菜单选择“无”选项。
7）单击“下一步”在弹出的对话框中会所示相关的信息，然后单击“确定”， 完成站点的设置。 8）此时在Dreamweaver8的文件面板就会出现站点的文件夹及所有的文件。
返回 退出
2、制作网页 1
• • • • 1）启动Dreamweaver8新建一个HTML页，命名为“index” 。 2）单击属性面板中的“页面属性”按钮，打开“页面属性”设置对话框， 对页面进行相应的设置，设置完成后点击“确定” 即可。 3）根据课件设计方案，在设置好的网页中添加表格，对表格进行编辑，添加好 相应的文字，预览后保存。
返回
退出
下一页
返回Байду номын сангаас
退出
2、制作网页 2
• 4）在重新创建一个新的网页，命名为“导航页”页面属性的设置同 （2）， • 根据已经设计好的方案，编辑导航页。 • 5）然后分别制作“作者简介”、“课文内容”、“课文分析”、“生词生 字”、 • “课堂练习”、“课后习题”网页。
下一页
返回
退出
2、制作网页 3
网页课件实例
• •
1、创建新站点 2、制作网页
返回
退出
1、创建新站点
• • • • • • 1）在本地计算机硬盘创建一个文件夹，名为“唐诗教学”。 2）打开Dreamweaver 8，在菜单栏打开“站点”选项，执行“新建站 点” 命令。 3）在弹出的对话框中选择“基本”选卡，输入站点的名称。 4）单击“下一步”按钮，在弹出的对话框中选择“否，我不想用服务器技 术”。 5）单击“下一步”按钮，在弹出对话框中选择“编辑我的计算机上的本地副 本，完成后在上传服务器”选项，如图所示。单击按钮，选择站点的位置为先 前创建的文件夹。
• 6）在Dreamweaver 8中，打开导航页，选中“返回主页”文字，在属性
面板链接栏点击打开链接对话框选择主页，单击“确定”。链接即建立完
成，按F12预览， • 7）依次选择“作者简介”、“课文内容”、“课文分析”、“生词生
字”、“课堂练习”、“课后习题”等文字，用同样的方法，分别建立链
接。 • 8）分别用Dreamweaver 8软件依次打开“作者简介”、“课文内容”、 “课文分析”、“生词生字”、“课堂练习”、“课后习题”网页用同样 的方法将每一页的文字全部和相应的网页链接好，整个课件即完成。