dreamweaver8_简单网页制作

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;}这两项的位置已经差不多了。

《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是建立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软件的基础知识，包括网页制作的基础知识、网页设计的基本原则、标记语言和样式表的应用，以及交互设计的概念和技能。

具体而言，学生将学习以下技能：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中文版网页制作基础教学设计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.在菜单栏中选择“文件”->“新建”，或在工具栏中点击“新建”按钮。

如何使用Dreamweaver8进行网页设计和开发第一章：介绍Dreamweaver8Dreamweaver8是一款专业的网页设计和开发工具，由Adobe公司开发。

它可以帮助开发者创建各种类型的网页，包括静态网页、动态网页和响应式网页。

本章将介绍Dreamweaver8的基本特点和功能，以及如何使用它进行网页设计和开发。

第二章：安装和设置Dreamweaver8在开始使用Dreamweaver8之前，首先需要进行安装和设置。

本章将介绍Dreamweaver8的安装过程，包括下载安装包、运行安装程序和输入序列号。

同时，还会介绍如何进行基本的设置，包括语言选择、默认文件夹设置和主题选择等。

第三章：Dreamweaver8的主要界面本章将介绍Dreamweaver8的主要界面，包括工具栏、菜单栏、面板和编辑窗口等。

同时，还会介绍如何自定义界面，根据自己的工作习惯进行布局和设置。

第四章：创建网页文件在Dreamweaver8中，创建网页文件非常简单。

本章将介绍如何创建一个新的网页文件，包括选择页面模板、设置页面属性和编辑页面内容等。

同时，还会介绍如何导入现有的网页文件，并进行必要的转换和调整。

第五章：网页设计基础网页设计是Dreamweaver8的核心功能之一。

本章将介绍网页设计的基础知识，包括颜色选择、字体选择和布局设计等。

同时，还会介绍如何使用Dreamweaver8中的设计工具，如图像处理工具和样式编辑器等。

第六章：网页开发基础网页开发是Dreamweaver8的另一个重要功能。

本章将介绍网页开发的基础知识，包括HTML、CSS和JavaScript等。

同时，还会介绍如何使用Dreamweaver8中的代码编辑器和调试工具，进行网页开发和调试。

第七章：网页优化和测试在完成网页设计和开发后，需要对网页进行优化和测试。

本章将介绍如何使用Dreamweaver8中的网页优化工具，包括代码优化、图像优化和链接检查等。

Dreamweaver 8入门经典教程我们已经描绘了小屋的蓝图，从现在开始，为我们的小屋添砖加瓦吧。

打开01.html，制作一个图文混排的简单页面。

一、页面的总体设置1、设置页面的头内容头内容再浏览器中是不可见的，但是却携带着网页的重要信息，如关键字、描述文字等，还可以实现一些非常重要的功能，如自动刷新功能。

鼠标左键单击插入工具栏最左边按钮旁的下拉小三角，在弹出菜单中选择“HTML”项，出现“文件头”按钮，点开下拉菜单，就可以进行头内容的设置了。

设置标题，网页标题可以是中文、英文或符号，显示在浏览器的标题栏中。

我们直接在设计窗口上方的标题栏内输入或更改，就可以完成网页标题的编辑了。

插入关键字，关键字用来协助网络上的搜索引擎寻找网页。

要想让更多的人看见你的网站，这项要好好填哦^_^单击上图所示的“关键字”项，弹出“关键字”对话框，填入关键字即可。

插入META，META标记用于记录当前网页的相关信息，如编码，作者，版权等，也可以用来给服务器提供信息。

单击上图所示的“META”项，弹出“META”对话框，在“属性”栏选择“名称”属性，在“值”文本框中输入相应的值，可以定义相应的信息。

author—作者信息，copyright—版权声明，generator—网页编辑器。

2、设置页面属性单击“属性栏”中的“页面属性”按钮，打开的“页面属性”对话框。

设置外观，“外观”是设置页面的一些基本属性。

我们可以定义页面中的默认文本字体、文本字号、文本颜色、背景颜色和背景图像等。

我们设置页面的所有边距为0。

设置链接，“链接”选项内是一些与页面的链接效果有关的设置。

“链接颜色”定义超链接文本默认状态下的字体颜色，“变换图像链接”定义鼠标放在链接上时文本的颜色，“已访问链接”定义访问过的链接的颜色，“活动链接”定义活动链接的颜色。

“下划线样式”可以定义链接的下划线样式。

设置标题，“标题”用来设置标题字体的一些属性。

如下图所示，在左侧“分类”列表中选择“标题”，这里的标题指的并不是页面的标题内容，而是可以应用在具体文章中各级不同标题上的一种标题字体样式。