《初识dreamweaver》由会员分享，可在线阅读，更多相关《初识dreamweaver（36页珍藏版）》请在金锄头文库上搜索。
1、第2章 初识Dreamweaver,开始了解Dreamweaver的环境及基本操作 为后续内容打基础,内容,Dreamweaver 8的安装 Dreamweaver 8的工作窗口 创建网站 网页基本编辑操作,2.1 Dreamweaver 8的安装,Dreamweaver版本按时间和版本的高低分别是 dreamweaver mx dreamweaver 8 dreamweaver cs系列 现在最高版本是dreamweaver cs4 从低到高，功能是越来越多，用起来也越来越方便。 最早的版本是macromedia公司出品的，后来公司被adobe收购了（2005年04月18日 Adobe换股收
2、购Macromedia 总金额34亿美元）。,请参阅百度百科Adobe Creative Suite词条,2.2 Dreamweaver 8的工作窗口（1/4）,面板组,标签选择器,【属性】检查器,【文档】窗口,【文档】工具栏,【插入】工具栏,2.2 Dreamweaver 8的工作窗口（2/4）,【文档】窗口 显示当前文档 【文档】工具栏上的【代码】、【设计】和【拆分】按钮决定了显示方式 【文档】工具栏 【代码】按钮：主要用来书写网页脚本语言、网页标记、程序代码 【设计】按钮：主要用来制作静态网页，通过图形化操作完成 【拆分】按钮：把窗口拆分成“设计”与“代码”两部分,2.2 Dreamwe
3、aver 8的工作窗口（3/4）,【属性】检查器 用户可以检查和编辑当前选定页面元素的属性 【插入】工具栏 包含8个类别 用户在制作网页时，大部分的操作都可以通过该工具栏来实现,2.2 Dreamweaver 8的工作窗口（4/4）,【面板】组 包含多个面板，每个面板包含不同的选项，功能强大 标签选择器 用来选择网页标记,2.3 创建网站,在制作网页之前，首先要创建和设置本地站点 在 Dreamweaver 中，“站点”一词既表示 Web 站点，又表示属于 Web 站点的文档的本地存储位置。 建立站点后 Dreamweaver 站点可组织与 Web 站点相关的所有文档，跟踪和维护链接，管理文件
4、，共享文件以及将站点文件传输到 Web 服务器。,2.3 创建网站,站点 本地站点 把网站建立在自己计算机的硬盘里，把网站里的内容全部放在一个文件里，这个文件夹可以理解为本地站点 远程站点 通过将文件上传到远程文件夹来发布本地站点。远程文件夹是存储文件的位置，Dreamweaver 将此文件夹称为远程站点,概念,开发站点时一般在本地站点进行,2.3 创建网站,创建本地站点步骤 在开始构建 Web 站点之前，您需要建立站点文档的本地存储位置 在【资源管理器】或【我的电脑】中创建本地站点文件夹 如 e:learn，在其下再创建一个images文件夹用于存图片 用于存放站点的网页、图片等文件,第1步
5、,2.3 创建网站,创建本地站点步骤 在Dreamweaver中创建并设置本地站点 菜单：站点/新建站点 在出现的对话框（如后图所示）中指定站点名称与本地根文件夹 其他选项采用默认值即可,第2步,2.3 创建网站,输入站点名称,指定站点文件夹，如e:learn,指定站点存放图像的文件夹（不是必需的），如e:learnimages,2.3 创建网站,确定后“管理站点”对话框中列出了刚才新建的站点,“文件”面板显示该站点的根及下面的文件,大功告成,课堂练习1,在本地硬盘新建一个文件夹，在该文件夹中再创建一个images子文件夹 在Dreamweaver中建立一个本地站点 输入网站名称 指定本地根文
6、件夹（网站的根）为刚才新建的那个文件夹 指定默认图像文件夹为网站根文夹下的images文件夹 其它设置默认 然后从教学网站 “第1周课堂练习”中下载source.rar 解压后，将dw_text.txt和dw_2.txt文件复制到新建的文件夹下，将dreamweaver.jpg图片文件复制到images子文件夹下,2.4 新建网页,方法一 选择菜单：文件/新建 打开如图所示的对话框 选择“基本页”中的“HTML”选项，单击创建,2.4 新建网页,方法二 在“文件”面板的空白处，单击鼠标右键 在弹出菜单中选择“新建文件”，在“文件”面板的当前文件夹中新建一个名为untitled.html的网页文
7、件 重命名该网页,在空白处单击右键，在弹出菜单中选择“新建文件”,2.4 新建网页,编辑 后续课程会详细讲述 保存 快捷键 Ctrl+S 预览 按 F12 在浏览器中预览当前网页,2.5 网页基本编辑操作,网页标题 设置其他页面属性 网页文字编辑 图像操作 超链接 表格 查看代码,1 网页标题,输入网页标题,网页标题会显示在浏览器的标题栏,2.5 网页基本编辑操作,2 设置其他页面属性,菜单：修改/页面属性 在网页中单击鼠标右键，在弹出菜单中选择“页面属性” 文本颜色 背景图象 背景颜色 边距,或,2.5 网页基本编辑操作,3 网页文字编辑,设置字体、大小、颜色、对齐 插入空格 在代码中写入
8、或 全角空格 段落 行回车：Shift+Enter 段落回车：Enter 项目列表,2.5 网页基本编辑操作,3 网页文字编辑,插入水平线 菜单：插入/HTML/水平线 工具栏： “插入”工具栏中“HTML”类 插入特殊字符 菜单：插入/HTML/特殊字符 工具栏：“插入”工具栏中“文本”类,2.5 网页基本编辑操作,4 图像操作,支持GIF、JPEG和PNG图像格式 GIF：最多256色的存储，适合存储非连续色调或颜色比较单一的图像 JPEG：适合存储照片或连续色调图像，最多支持16M色、有损压缩 PNG 插入图像 菜单：插入/图像 “插入”工具栏,2.5 网页基本编辑操作,在网页中恰当运用
9、图像，可以体现出一个网页的特色和风格,4 图像操作,若站点设置了“默认图像文件夹”（如图上图），当所选图像存储于当前站点之外，会自动复制一份图像到指定的默认图像文件夹中 否则会出现如右下图所示的对话,2.5 网页基本编辑操作,4 图像操作,图像属性 源文件 定图像来源 宽、高 调整大小时同时按下Shift 替换 指定只显示文本的浏览器或已设置为手动下载图像的浏览器中代替图像显示的替代文本。,2.5 网页基本编辑操作,5 超链接,选定所需设置链接的对象，如文字、图片等 在属性面板中设置 链接：指定链接指向的文件或对象 相对地址 绝对地址 目标：_blank表示在新窗口中显示链接指向的内容,2.5
10、 网页基本编辑操作,网页的最大特点就是超链接,6 表格,表格是用来在 HTML 页上显示表格式数据以及对文本和图形进行布局的强有力工具 表格由一行或多行组成；每行又由一个或多个单元格组成。,2.5 网页基本编辑操作,6 表格,插入表格 选择“插入”“表格”或单击“插入”工具栏上的“表格”按钮。 出现“表格”对话框 设置表格属性 单击确定,2.5 网页基本编辑操作,6 表格,当选定了表格或表格中有插入点时，Dreamweaver 会显示表格宽度和表格选择器（由绿色线条指示）中的每个表格列的列宽。 宽度旁边是表格标题菜单与列标题菜单的箭头。使用菜单可以快速访问一些与表格相关的常用命令。,2.5 网
11、页基本编辑操作,7 查看代码,“拆分”按钮 该窗口会拆分，同时显示“设计”视图和基础 HTML 代码。,代码视图,设计视图,7 查看代码,“代码”按钮 窗口显示“代码”视图，其中列出网页的HTML 代码。,课堂练习2,首先下载source.rar(若已在课堂练习1中下载文件,跳过此步) 然后制作两个网页：dw.htm和dw2.htm,，如下两页所示 压缩并上传至教学网站,课堂练习2,单击此链接，在新窗口中打开dw2.htm,大小：24 颜色：#cc0000,标题：Dreamweaver 8 的新增功能,水平线,版权符,项目列表,Dw.htm 网页中文字可取自dw_text.txt,课堂练习2,单击此链接，打开dw.htm,表格宽度 760像素,Dw2.htm 网页中文字可取自dw2_text.txt,小结,本章主要介绍Dreamweaver的环境以及一些常用的基本操作,一些网上资源,建议大家用“Dreamweaver教程”作为关键字到Google上进行搜索 推荐e硅谷动力网提供的薛欣讲解的教程http:/ FIF网页制作教程 http:/
