dreamweaver第1章基础知识.ppt

1、dreamweaver第1章基础知识InternetInternet简介简介1、Internet的概念 Internet的意思是计算机互连网。Internet是一个理想的信息交流媒体。Internet是一个庞大的信息资源库。Internet是一个花样众多的娱乐厅。Internet是一个既能省钱也能赚钱的场所。2、Internet的发展 Internet是人类历史发展中的一个伟大的里程碑，它是未来信息高速公路的雏形，人类正由此进入一个前所未有的信息化社会。人们用各种名称来称呼Internet，如国际互联网络、因特网、交互网络、网际网等等，它正在向全世界各大洲延伸和扩散，不断增添吸收新的网络成员，

2、已经成为世界上覆盖面最广、规模最大、信息资源最丰富的计算机信息网络。3、Internet的社会影响 网络技术的广泛应用改变了人们的社会生活环境，也改变了人的生活方式、行为方式和社会互动关系。正确对待个人早期社会化过程中所形成的价值观念和行为规范。正确对待人机关系和人际关系。正确对待虚拟空间与现实空间。网页设计1、为什么要学习网页设计？网络是未来 IT 行业的发展趋势 为自己的就业提高竞争优势 个人主页是展示自我的平台 2、网页设计是平面设计、动画设计、音效设计、配色等各个方面结合的产物。网页设计是一门综合性技术，包含许多方面的内容。它包含程序设计、美术设计及其他媒体技术。网页设计看似复杂，但是

3、，不管哪一种技术都有基础的一部分。任何技术都是从一定的基础上扩展而来。在学习网页设计之前，先学习与之相关的一些基础知识。3、网站与网页 网站是众多网页的集合。网站同时也是信息服务类企业的代名词。4、网页的基本元素 文本和图片 构成网页的最基本元素 超级链接 文字连接和图片连接 动画 gif和flash 表单 实现交互性特性 音频和视频 通过音视频插件来实现 二种格式a:Media Play b:Real5、网页的布局元素 标题：标注和说明网页的性质与内容 网站标识：放在显眼的位置加深浏览者的影响，它一般是网站的形象，是精心设计的。导航、页眉：网站栏目的缩影 内容：网站的精神所在，具有方向性如：

4、新闻类、游戏类等 页脚：放置网站的相关信息6、色彩与搭配 设计者在设计网页时一定要注意色彩的搭配与风格的设计，一般网页设计者多是根据人们对色彩的联想来决定用那些颜色和色系的。红色是最终力量来源，给人带来有震撼、热烈、激情、喜庆、高贵、刺激、上进灰色是最好的背景色，给人压抑、平抑、暧昧、内向、消极、失望、抑郁蓝色给人带来感觉有清凉、开朗、理智、沉稳、深远、哀伤、安静HTML惊鸿一瞥1、什么是HTML HTML是英文Hypertext Marked Language的缩写，中文意思是超文本标记语言，是一种用来制作超文本文档的简单标记语言。它定义了一系列规则告诉浏览器如何显示HTML的元素。含有HT

5、ML元素集合的文件，也就是网页。2、创建HTML网页 创建HTML网页是一件很容易的事。把HTML标签写在记事本里，然后保存扩展名为.html或.htm文件。3、HTML结构 网页中的源码告诉浏览器如何进行显示，HTML结构又是怎样的呢？一般HTML网页是以标签开始，以结束。之间是网页头部，用来描述网页的相关内容，如网页标题、网页语言和网页内容简述等。认识Dreamweaver Dreamweaver是一款可视化网页设计和网站管理软件。可视化编辑功能可以快速制作出精彩的网页，而不需要编写任何代码。而且，它能与其他图形编辑软件紧密结合，协同处理编辑图片，使用起来非常方便。同时，它还支持代码编辑环

6、境，如颜色代码、自动补全和代码折叠等，更方便地进行代码编写，支持最新的CSS可视化布局。Dreamweaver特点1、简洁高效的设计和开发界面 是一个所见即所得的可视化网页编辑器。2 2、增强的HTML代码编辑功能 具有代码提示特性，片断面板，标记检视器。3 3、良好的扩展功能 可以通过Extension Manager，在Macromedia Exchange站点上下载所提供的免费的程序。4 4、提供完整的Web应用开发能力 可以对ASP、JSP、PHP、CFML、ASP.NET等Web技术进行支持，制作开发Web应用程序。5 5、更好的团队合作 可以与Microsoft Office产品的

7、结合，并与Flash、Fireworks可无缝连接。Dreamweaver Dreamweaver 操作界面操作界面 新建或打开一个文档，进入Dreamweaver8的标准工作界面。Dreamweaver8的标准工作界面包括：标题显示、菜单栏、插入面板组、文档工具栏、标准工具栏、文档窗口、状态栏、属性面板和浮动面板组。1、标题显示栏 启动Macromedia Dreamweave 8后，标题栏将显示文字Macromedia Dreamweave 8.0，新建或打开一个文档后，在后面还会显示该文档所在的位置和文件名称。2、菜单栏 Dreamweave 8的菜单共有10个，即文件、编辑、视图、插入

8、、修改、文本、命令、站点、窗口和帮助。其中，编辑菜单里提供了对Dreamweaver菜单中首选参数的访问。文件：用来管理文件。例如新建，打开，保存，另存为，导 入，输出打印等。编辑：用来编辑文本。例如剪切，复制，粘贴，查找，替换和参数设置等。查看：用来切换视图模式以及显示、隐藏标尺、网格线等辅助视图功能。插入：用来插入各种元素，例如图片、多媒体组件，表格、框架及超级链接等。修改：具有对页面元素修改的功能，例如在表格中插入表格，拆分、合并单元格，对其对象等。文本：用来对文本操作，例如设置文本格式等。命令：所有的附加命令项。站点：用来创建和管理站点。窗口：用来显示和隐藏控制面板以及切换文档窗口。帮

9、助：联机帮助功能。例如按下F1键，就会打开电子帮助。3、插入面板组 插入面板集成了所有可以在网页应用的对象包括“插入”菜单中的选项。插入面板组其实就是图像化了的插入指令，通过一个个的按钮，可以很容易的加入图像、声音、多媒体动画、表格。图层、框架、表单、Flash和ActiveX等网页元素。4、文档工具栏 “文档”工具栏包含各种按钮，它们提供各种“文档”窗口视图（如“设计”视图和“代码”视图）的选项、各种查看选项和一些常用操作（如在浏览器中预览）。5、标准工具栏 “标准”工具栏包含来自“文件”和“编辑”菜单中的一般操作的按钮：“新建”、“打开”、“保存”、“保存全部”、“剪切”、“复制”、“粘贴

10、”、“撤消”和“重做”。6、文档窗口 当我们打开或创建一个项目，进入文档窗口，我们可以在文档区域中进行输入文字、插入表格和编辑图片等操作。1)、设计视图 提供一个所见即所得的网页编辑窗口，在这里可以方便地插入图片、文字等页面元素。2)、代码视图 便于用户直接用HTML语言编写网页。3)、设计与代码视图 此模式下，窗口上半部分为网页的代码显示，下半部分为网页中的元素直接显示。这种方式可以方便用户查看、修改网页中插入元素的代码错误。7、状态栏 “文档”窗口底部的状态栏提供与你正创建的文档有关的其它信息。8、属性面板 属性面板并不是将所有的属性加载在面板上，而是根据我们选择的对象来动态显示对象的属性

11、属性面板的状态完全是随当前在文档中选择的对象来确定的。例如，当前选择了一幅图像，那么属性面板上就出现该图像的相关属性；如果选择了表格，那么属性面板会相应的变化成表格的相关属性。9、浮动面板 其它面板可以同称为浮动面板，这些面板都浮动于编辑窗口之外。在初次使用dreamweave 8的时候，这些面板根据功能被分成了若干组。在窗口菜单中，选择不同的命令可以打开基本面板组、设计面板组、代码面板组、应用程序面板组、资源面板组和其它面板组。设计简单主页1、选择文件-新建，新建一个操作文档。2、选择文件-保存（index.html），在开始造之前，一定要先保存网页文档。3、选择修改-页面属性（Ctrl+J，背景颜色：6DCFF6天蓝色，左边距和上边距：0），设置网页文档等基本环境。4、在常用插入栏中单击“图像”，插入“title.gif”，然后多次按“Enter”键，光标定位于文档中间，单击“表格”（行列：1，宽度：100像素）。5、光标定位于表格中，单击“图像”，插入“main_img.gif”。6、单击“在浏览器中预览/调式”（F12）