1 / 20

知识储备 快速掌握 Dreamweaver CS3

知识储备 快速掌握 Dreamweaver CS3. 任务 1. Dreamweaver CS3 简介 任务 2. Dreamweaver CS3 工作界面 任务 3. Dreamweaver CS3 新增功能 任务 4. 创建基本网页 任务 5. 创建高级网页. 任务 1. Dreamweaver CS3 简介.

dara-burke
Download Presentation

知识储备 快速掌握 Dreamweaver CS3

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 知识储备快速掌握Dreamweaver CS3 任务1. Dreamweaver CS3简介 任务2. Dreamweaver CS3工作界面 任务3. Dreamweaver CS3新增功能 任务4. 创建基本网页 任务5. 创建高级网页

  2. 任务1. Dreamweaver CS3简介 Dreamweaver CS3 是Adobe公司开发的集网页制作和网站管理于一身的所见即所得网页编辑器，被称为三剑客之一，利用它轻而易举地制作出充满动感的网页 。DreamweaverCS3提供众多的可视化设计工具、应用开发环境以及代码编辑支持。开发人和设计师能够快捷地创建代码应用程序，集成程度非常高，开发环境精简面高效，开发人员能够运用Dreamweaver与服务器技术构建功能强大的网络应程序。利用 Dreamwaver可以轻而易举地制作出充满动感的网页。Dreamweaver CS3 是业界领先的Web开发工具，通过该工具用户能够高效地计、开发和维护基于标准的网站和应用程序。使用Dreamweaver CS3，We开发人员能够完成开发的全过程，从创建和维护基本网站到支持最佳实践和最新技术的高级应用程序。

  3. 任务2. Dreamweaver CS3工作界面

  4. 任务3. Dreamweaver CS3新增功能 任务3.1 置CSS布局，将CSS轻松合并到项目中。 任务3.2 Spry 任务3.3 Spry效果

  5. 任务4  创建基本网页 任务4.1 创建及保存网页 任务4.2 插入表格 任务4.3 编辑文本 任务4.4 插入图像 任务4.5  超级链接

  6. 任务4.1 创建及保存网页 步骤1：首先启动Dreamweaver CS3，进入Dreamweaver CS3主界面。

  7. 任务4.1 创建及保存网页 步骤2：选择【文件】|【新建】命令，弹出【新建文档】对话框。

  8. 任务4.1 创建及保存网页 步骤3：从各种预先设计的页面布局中选择【空白页】|HTML【无】选项，单击【创建】按钮，新建空白网页。

  9. 任务4.1 创建及保存网页 步骤4：选择【文件】|【另存为】对话框，如图1.23所示，在【文件名】文本框中输入文件名“index.htm”,【保存类型】选择【所有文档*.htm；*html；*.shtm；*.shtml；*】步骤5：单击【保存】按钮，即可保存该网页。

  10. 任务4.2 插入表格 (1)选择【插入记录】|【表格】命令。 （2）单机常用面板中的插入表格图标。 （3）按Ctrl+Alt+T 组合键在【表格】对话框中设置完相关参数，单击【确定】按钮，即可插入表格。

  11. 任务4.3  编辑文本 选中要修饰的文本，在属性检查器中可以设置文本的相关属性。 1.设置字体大小 将光标置于网页中想要输入文字的位置，输入相应的文字内容。选中文字，在【属性检查器】中将【大小】设置为“12”像素。 2.设置文字的颜色 在属性检查器中单击【大小】下拉列表右边的颜色框，弹出调色板，这时鼠标指针变为吸管状态。将吸管置于要选择的颜色上，单击选中该颜色。

  12. 任务4.3  编辑文本 3.设置文字的样式 文字的样式就是文字的显示方式，Dreamweaver CS3中提供了多种文字样式，包括【粗体】、【斜体】、【下划线】等。在属性检查器中，只有【粗体】按钮和【斜体】但选择【文本】|【样式】命令后，其子菜单提供了更多的文字样式。 4.文字的的对齐和缩进 步骤1.选中文字，打开属性检查器。 步骤2.单击属性检查器中的3个对齐按钮之一，其中有左对齐、右对齐、居中对齐。3种方式。

  13. 任务4.4 插入图像 步骤1.将光标置于网页要插入图像的位置，选择【插入记录】|【图像】命令，弹出【选择图像源文件】对话框。 步骤2.在对话框中，从本书配套光盘中选择02/2.4/images/bg_youxia.gif图像，单击【确定】按钮，即可插入图像。

  14. 任务4.5  超级链接 在访问Internet时，浏览者可以通过单击超级链接查看各种 不同的网页，所谓超级链接就是对新访问地址的指定。在 Dreamweaver CS3中设置超级链接的基本方法是：选择所需的 文本或图像，然后选择属性检查器中的【链接】，在其中输入 URL，或单击右边的【浏览文件图标】选择所需文件即可。

  15. 任务5 创建高级网页 任务5.1 使用AP Div 任务5.2  使用表单 任务5.3  使用行为 任务5.4 使用ＣＳＳ样式表 任务5.5 模板和库

  16. 任务5.1 使用AP Div 利用Dreamweaver提供的AP Div技术，可以很方便地规划网页布局。AP元素是网页中的一个区域，在一个网页中可以有多个AP元素存在，它最大的优点在于各个AP元素可以重叠，并且可以决定每个AP元素是否可见，同时也可以自定义各AP元素之间的层次关系。在熟练掌握了解AP元素技术后，可以随心所欲地对网页进行布局控制。选择【插入记录】|【布局对象】|AP Div命令，此时文档窗口中会出现一个蓝色矩形框，这就是刚插入的AP Div。

  17. 任务5.2  使用表单 用表单必须具备的条件有两个：一个是建立含有表单元素的网页文档，另一个是具备服务器端的表单处理应用程序或者客户端的脚本程序，它能够处理用户输入表单的信息。可以使用Dreamweave CS3创建文本域、密码域、单选按钮、复选框、按钮、以及其他表单对象。表单主要用来得到用户的反馈信息，入会员 注册、网上调查、信息反馈等。

  18. 任务5.3  使用行为 Dreamweave CS3提供了二十几种行为，这些行为能够为网页添加很多功能，如播放声音、打开浏览器窗口、设置状态栏文本、显示或隐藏元素等。一个行为是由一个事件所触发的动作组成的，因此行为的基本元素有两个：时间和动作。 不同的事件为不同的网页元素所定义，如在大多数浏览器中onMouseOver(鼠标经过）和onClick（载入）行为是图像及文档相关的事件。由于目前JavaScript被大多数浏览器所支持，因此不必考虑行为的兼容性问题。 步骤1. 大开如图2.40所示的网页文档。选择【窗口】|【行为】命令，打开行为面板，如图2.41所示。在行为面板中单击添加按钮，在弹出的菜单中选择【弹出信息】选项。 步骤2. 弹出【弹出信息】对话框，在【消息】文本框中输入相应的信息。 步骤3.单击【确定】按钮，行为面板中就会出现新添加的行为。

  19. 任务5.4  使用ＣＳＳ样式表 CSS（Cascading Style Sheet)被称为“层叠样式表”或“级联样式表”。 使用Css能够简化网页的格式代码，加快下载速度，也减少了需要上传的代 码数量，大大减少了重复劳动的工作量。利用CSS样式美化网页。

  20. 任务5.5 模板和库 为了统一风格，一个网站的很多页面都要用到相同的页面元素和排版方式，使用模板可以避免重复地在每个页面插入或修改相同的部分，等网站改版的时候，只要改变模板这个文件的设计，就能自动更改所有基于该模板的网页。 库的用途和模板比较类似，都是可将同一内容用于不同的页面，但库比较小，只是使用了一个或几个页面元素。应用模板，则网页的大体结构和内容已确定，只需更改部分内容，而应用库，则只是往页面中添加部分页面元素。

More Related