资源描述
单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,中国人民大学 王蓉,第,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,换股收购,Macromedia,总金额,34,亿美元）。,请参阅百度百科,Adobe Creative Suite,词条,2.2 Dreamweaver 8,的工作窗口（,1/4,）,面板组,标签选择器,【,属性,】,检查器,【,文档,】,窗口,【,文档,】,工具栏,【,插入,】,工具栏,2.2 Dreamweaver 8,的工作窗口（,2/4,）,【,文档,】,窗口,显示当前文档,【,文档,】,工具栏上的,【,代码,】,、,【,设计,】,和,【,拆分,】,按钮决定了显示方式,【,文档,】,工具栏,【,代码,】,按钮：主要用来书写网页脚本语言、网页标记、程序代码,【,设计,】,按钮：主要用来制作静态网页，通过图形化操作完成,【,拆分,】,按钮：把窗口拆分成“设计”与“代码”两部分,2.2 Dreamweaver 8,的工作窗口（,3/4,）,【,属性,】,检查器,用户可以检查和编辑当前选定页面元素的属性,【,插入,】,工具栏,包含,8,个类别,用户在制作网页时，大部分的操作都可以通过该工具栏来实现,2.2 Dreamweaver 8,的工作窗口（,4/4,）,【,面板,】,组,包含多个面板，每个面板包含不同的选项，功能强大,标签选择器,用来选择网页标记,2.3,创建网站,在制作网页之前，首先要创建和设置本地站点,在,Dreamweaver,中，“站点”一词既表示,Web,站点，又表示属于,Web,站点的文档的本地存储位置。,建立站点后,Dreamweaver,站点可组织与,Web,站点相关的所有文档，跟踪和维护链接，管理文件，共享文件以及将站点文件传输到,Web,服务器,。,2.3,创建网站,站点,本地站点,把网站建立在自己计算机的硬盘里，把网站里的内容全部放在一个文件里，这个文件夹可以理解为本地站点,远程站点,通过将文件上传到远程文件夹来发布本地站点。远程文件夹是存储文件的位置，,Dreamweaver,将此文件夹称为远程站点,概念,开发站点时一般在本地站点进行,2.3,创建网站,创建本地站点步骤,在开始构建,Web,站点之前，您需要建立站点文档的本地存储位置,在,【,资源管理器,】,或,【,我的电脑,】,中,创建本地站点文件夹,如,e:learn,，在其下再创建一个,images,文件夹用于存图片,用于存放站点的网页、图片等文件,第,1,步,2.3,创建网站,创建本地站点步骤,在,Dreamweaver,中创建并设置本地站点,菜单：站点,/,新建站点,在出现的对话框（,如后图所示,）中指定站点名称与本地根文件夹,其他选项采用默认值即可,第,2,步,2.3,创建网站,输入站点名称,指定站点文件夹，如,e:learn,指定站点存放图像的文件夹（不是必需的），如,e:learnimages,2.3,创建网站,确定后“管理站点”对话框中列出了刚才新建的站点,“文件”面板显示该站点的根及下面的文件,大功告成,课堂练习,1,在本地硬盘新建一个文件夹，在该文件夹中再创建一个,images,子文件夹,在,Dreamweaver,中建立一个本地站点,输入网站名称,指定本地根文件夹（网站的根）为刚才新建的那个文件夹,指定默认图像文件夹为网站根文夹下的,images,文件夹,其它设置默认,然后从教学网站,“,第,1,周课堂练习”中下载,source.rar,解压后，将,dw_text,.,txt,和,dw_2,.txt文件复制到,新,建的文件夹下,，,将dreamweaver.jpg图片文件复制到images,子,文件夹,下,2.4,新建网页,方法一,选择菜单：文件,/,新建,打开如图所示的对话框,选择“基本页”中的“,HTML”,选项，单击创建,2.4,新建网页,方法二,在“文件”面板的空白处，单击鼠标右键,在弹出菜单中选择“新建文件”，在“文件”面板的当前文件夹中新建一个名为,untitled.html,的网页文件,重命名该网页,在空白处单击右键，在弹出菜单中选择“新建文件”,2.4,新建网页,编辑,后续课程会详细讲述,保存,快捷键,Ctrl+S,预览,按,F12,在浏览器中预览当前网页,2.5,网页基本编辑操作,网页标题,设置其他页面属性,网页文字编辑,图像操作,超链接,表格,查看代码,1,网页标题,输入网页标题,网页标题会显示在浏览器的标题栏,2.5,网页基本编辑操作,2,设置其他页面属性,菜单：修改,/,页面属性,在网页中单击鼠标右键，在弹出菜单中选择“页面属性”,文本颜色,背景图象,背景颜色,边距,或,2.5,网页基本编辑操作,3,网页文字编辑,设置字体、大小、颜色、对齐,插入空格,在代码中写入,&,nbsp,;,或 全角空格,段落,行回车：,Shift+Enter,段落回车：,Enter ,项目列表,2.5,网页基本编辑操作,3,网页文字编辑,插入水平线,菜单：插入,/HTML/,水平线,工具栏：“插入”工具栏中“,HTML”,类,插入特殊字符,菜单：插入,/HTML/,特殊字符,工具栏：“插入”工具栏中“文本”类,2.5,网页基本编辑操作,4,图像操作,支持,GIF,、,JPEG,和,PNG,图像格式,GIF,：最多,256,色的存储，适合存储非连续色调或颜色比较单一的图像,JPEG,：适合存储照片或连续色调图像，最多支持,16M,色、有损压缩,PNG,插入图像,菜单：插入,/,图像,“插入”工具栏,2.5,网页基本编辑操作,在网页中恰当运用图像，可以体现出一个网页的特色和风格,4,图像操作,若站点设置了“默认图像文件夹”（如图上图），当所选图像存储于当前站点之外，会自动复制一份图像到指定的默认图像文件夹中,否则会出现如右下图所示的对话,2.5,网页基本编辑操作,4,图像操作,图像属性,源文件,定图像来源,宽、高,调整大小时同时按下,Shift,替换,指定只显示文本的浏览器或已设置为手动下载图像的浏览器中代替图像显示的替代文本。,2.5,网页基本编辑操作,5,超链接,选定所需设置链接的对象，,如文字、图片等,在属性面板中设置,链接：指定链接指向的文件或对象,相对地址,绝对地址,目标：,_blank,表示在新窗口中显示链接指向的内容,2.5,网页基本编辑操作,网页的最大特点就是超链接,6,表格,表格是用来在,HTML,页上显示表格式数据以及对文本和图形进行布局的强有力工具,表格由一行或多行组成；每行又由一个或多个单元格组成。,2.5,网页基本编辑操作,6,表格,插入表格,选择“插入”,“,表格”或单击“插入”工具栏上的“表格”按钮。,出现“表格”对话框,设置表格属性,单击确定,2.5,网页基本编辑操作,6,表格,当选定了表格或表格中有插入点时，,Dreamweaver,会显示表格宽度和表格选择器（由绿色线条指示）中的每个表格列的列宽。,宽度旁边是表格标题菜单与列标题菜单的箭头。使用菜单可以快速访问一些与表格相关的常用命令。,2.5,网页基本编辑操作,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:/
展开阅读全文