当前位置:文档之家› 我爱自学网DreamweaverCS6课程笔记

我爱自学网DreamweaverCS6课程笔记

Adobe DreamweaverCS6课程笔记第一节、Dreamweaver CS6软件简介和安装1、DreamweaverCS6是由美国Adobe公司最新开发的一款网页设计、网站管理为一体的专业软件。

2、为了保让能够正常安装,在安装时,请断开网络。

第二节、DWCS6软件界面的简介一、软件界面组成1、菜单栏2、工作区3、属性栏4、浮动面板(文件、资源、CSS样式、行为等)二、界面的切换:为满足不同人群的需求。

三、界面的恢复:窗口——工作区——重置设计器四、插入面板的调用。

第三节、网页相关知识1、DreamweaverCS6是由美国Adobe公司最新开发的一款网页设计、网站管理为一体的专业软件。

2、什么是网页(网页的概念)在互联网上基于http协议传播信息的页面。

3、什么是网站反应同一主题的多个网页的集合。

4、网页内容的组成(网页元素)(1)文字(2)图片(jpg,gif,png)(3)动画(swf,gif)(4)多媒体(5)超链接(6)表单(7)网页特效(8)其它元素第四节、网页制作方法与站点建立1、网页的制作方法(1)代码法:html(2)软件制作:Dreamweaver 、frontpage(所见即所得)。

2、制作网站前准备工作:建立站点。

3、站点:用来存放网站中所有元素的文件夹,为了制作方便需要将这个文件夹和制作软件相链接。

4、站点的建立(链接)(1)站点——建立(2)文件面板(3)应用程序栏(窗口——应用程序栏)5、站点的分类(按照网站的位置)(1)本地站点(2)远程站点第五节、规划本地站点目录结构1、规划本地站点目录结构(1)images(图片)(2)swf(动画)(3)css(CSS样式)(4)script(存放网页特效)JS(5)other(其它)2、网站主页名称(1)index.htm(2)index.html(3)default.htm(4)default.html注:主页必须放在网站的根目录下面,同时名称也有特殊的要求。

第六、七节、网页中文字的输入1-21、网页的四个视图(1)设计视图(2)代码视图(3)拆分视图(4)实时视图2、网页中的文字(1)文字直接输入就可以了。

(2)回车表示换段。

(3)shift+回车:表示换行。

(4)输入空格时要在全角输入法状态下输入。

(5)特殊字符的插入:“插入——html——特殊字符”(6)文字也可以从网站中复制,但是在复制时需要将网页中文字的格式去掉。

(注:如何去除复制来的文字格式,只需要将文字粘贴到记事本中,然后从记事本中再复制文字就可以了。

)3、预览网页:文件——在浏览器中预览——IExplore(快捷键:F12)第八、九节、页面属性1-21、页面属性(1)修改——页面属性(2)或通过属性栏2、属性(1)左边距、右边距、上边距、下边距。

(2)文字字体、大小、颜色。

注:A、字体:选择常用字体。

如:宋体B、大小:正文文字一般设置为12-16px。

(3)页面背景。

(4)背景图片。

(默认情况自动填充、平铺)注:A、图片要放在站点内。

(有关网站中的所有元素都必须放在站点内)。

B、图片名称不能为中文。

注:如果同时设置背景颜色和背景图片,以背景图片为准。

第十节、Html网页基本代码格式1、网页基本代码<html><head><title></title></head><body></body></html>注:(1)head:开头部分(2)title:标题(3)body:正文部分2、常用代码(1)<p></p>:换段(2)<br>:换行注:多数html代码都有对称性的特点。

第十一节、图片的插入一、图片1、图片格式(1)JPG:图片质量较高,一般用于较大的图片。

如:人物、风景。

(不支持透明)(2)gif:用于制用按钮、动画、导航条等,图片较小,只有256种颜色。

(支持透明)(3)png:兼有两种格式的特点。

(支持透明)注:图片的大小一般尽量控制在200K以下。

2、链接(1)_blank:在新的网页打工。

(2)_self:在自身网页打开。

第十二节、图片热点1、热点(1)矩形热点(2)圆形热点(3)多边形热点注:编辑——首选参数——辅助功能——图像2、替换(1)用于图片的注释。

(2)当图片无法显示的时候用此内容代替。

3、宽度和高度的设置4、相关html代码(1)Img:图片。

(2)Src:位置。

(3)热点:<map>……</map>第十三节、图片的编辑一、裁剪、亮度对比度、锐化注:使用Dreamweaver编辑图像是个不好的习惯,如果要编辑图像,最好使用专门的图像编辑软件(如:Fireworks、photoshop),编辑好了以后,再重新插入进来。

二、插入——图像对象——鼠标经过图像三、水平线的插入插入——html——水平线四、背景颜色的代码:bgcolor第十四节、超链接一、超链接指的是通过点击一个对象可以链接打开另外一个对象(网页、图片、程序等)。

二、链接的代码(即链接的标签)<a href=”URL”>内容</a><a href=”URL” target=”_blank”>文字</a>三、超链接的状态(修改——页面属性——链接)(1)链接:链接默认颜色。

(2)变换图像:鼠标移上去时的颜色。

(3)已访问:访问以后链接的颜色。

(4)活动:鼠标点下去时的颜色。

第十五节、超链接打开方式一、链接页面打开的目标:_blank:新窗口打开网页New:新窗口打开网页_parent:父窗口(框架结构)_self:自身窗口、原窗口_top:顶窗口(框架结构)第十六、十七、十八、十九节、超链接对象一、超链接的对象(1)文字(2)图片(3)热点(4)空链接(#)(5)邮件链接:mailto:邮箱地址(可以利用菜单命令直接插入)(6)下载链接(浏览器打不开的内容即为下载链接)(7)锚点链接(链接到网页的具体位置)步骤:(1)创建锚点(2)制作链接(#锚记)隐藏锚点:编辑——首选参数——不可见元素注:锚点链接不但可以链接本页面中的锚点,也可以链接到其它页面中的锚点。

(8)脚本链接(实现特殊功能)Javascript:window.close()——关闭窗口Javascript:window.print()——打印文字第二十节、表格一、表格的作用1、制作表格2、定位布局二、表格的建立1、插入——表格2、常用面板三、表格的元素及代码1、<td>…..</td>:单元格2、<t r>…..</tr>:行3、<table>…..</table>:表格四、元素的选择1、单元格2、行3、表格第二十一节、表格属性一、表格参数1、行数和列数2、宽度单位:(1)象素表示绝对值(固定值)。

(2)用%表示相对值。

3、填充:单元格中的内容与边框的距离。

4、间距:表示单元格与单元格之间的距离。

5、边框:设置表格是否留有边线。

6、对齐7、清除行高和列宽8、将宽度转换为象素9、将宽度转换为百分比第二十二节、行和单元格属性1、水平:单元格内容水平对齐方式。

2、垂直:单元格内容垂直对齐方式。

3、宽:单元格宽度。

4、高:单元格高度。

5、背景颜色:单元格背景颜色。

6、拆分和合并单元格。

注:在利用表格排版时网页中各种元素都是放入单元格内进行排版的。

第二十三节、网页布局和大小一、网页布局分类(1)“同”字式(2)“厂”字式或反“厂”字式二、网页大小(宽度大小)(1)800*600分辨率宽度设为778象素(2)1024*768分辨率宽度设为950象素或1002象素注:滚动条一般占有22个象素第二十四、二十五、二十六节、实例——网页制作1一、制作网站时的步骤:1、设置页面边距(0,0,0,0)即上、下、左、右边距都为0。

2、先整体后局部:先插入一个大表格用来定位和决定网页宽度,然后再插入小表格来定位每一个部分。

注:(1)大表格尽量不拆分。

(即一行一列)(2)表格与表格之间可以嵌套。

3、插入表格(0,0,0)即填充、边框、间距为0。

4、表格大小和居中(1)800*600分辨率宽度设为778象素(2)1024*768分辨率宽度高为950象素或1002象素5、将单元格内光标定位到左上角(选单元格设置)6、将单元格的高度设置和图片高度一样(作为背景时)第二十七——三十一节、实例——网页制作1-81、图片可以直接插入到表格中、也可以作为背景插入。

注:什么时候直接插入到表格、什么时候作为背景插入呢?(1)当需要在单元格内添加文字时就必须使用背景插入。

(2)如果需要做超链接时就必须作为图片插入。

2、选择表格标签后插入表格可以将新插入的表格放在所选择表格的下面。

3、插入——图像对象——图像占位符注:插入图像占位符后就可以任意设置表格的宽度和高度。

第三十二、三十三节、实例——网页制作9-10一、添加行和列1、插入——插入表格对象2、布局标签3、Tab键(光标定位在最后一个单元格内按tab键)第三十四节、参数的优先级一、参数优先级:单元格>>行>>表格注:表格间距部分的颜色取决于表格背景颜色。

二、图像大于颜色且自动复制1、背景颜色:bgcolor2、背景图像:background第三十五节、表格中单元格大小的设置1、宽度要根据实际大小来进行设置。

2、在设置表格单元格宽度时,可以保留某一列单元格的宽度不设置。

第三十六——三十八节、细线边框表格的制作1-31、利用表格的间距属性来制作。

2、利用表格的填充属性来制作。

第三十九节、实例——简单导航条1、利用表格的间距属性来制作。

第四十节、实例——水平细线与标题栏1、插入图像占位符2、删除单元格中的空格占位符:&nbsp;第四十一节、实例——圆角表格1第四十二节、实例——圆角表格21、height="100%":表示高度为100%。

第四十三节、网页平面效果图1、网站在制作前首先要做网页效果平面图。

2、平面图做好以后再用photoshop、或Fireworks等软件中的切片工具做切片。

3、切片做好后并进行保存。

4、删除不要的部分,保留需要的部分并进行重命名。

第四十四节、滚动效果代码1、<marquee>内容</marquee>(1)direction:方向(2)scrollamount:速度(一般设为3)(3)on mouseover=“this.stop()”:鼠标移上去停止(4)on mouseout=”this.start()”:鼠标离开时开始。

相关主题