dreamweaver圆角表格.docx

1、dreamweaver圆角表格竭诚为您提供优质文档/双击可除dreamweaver圆角表格篇一：第三章使用表格规划网页布局第三章使用表格规划网页布局一、相关概念1、表格功能：显示数据，定位网页元素（布局）2、表格的组成：表格由行和列组成，行和列的交叉形成的矩形形状称之为单元格。单元格中的内容和边框之间的距离叫边距cellpadding。单元格和单元格之间的距离叫间距cellspacing。表格的边线叫做边框border。tr：代表一行。td：代表一个单元格。3、占位符：当我们插入表格后，每个单元格的默认的高度是12像素的，但这些单元格中什么也没有，它是用什么撑起高度的？这都是“占位符”的功劳。

2、因为一个单元格在没有设置高度值的时候，代表着此单元格的高度值为0，但如果这样就没法对单元格进行操作了，所以，dreamweaver会在每个单元格中插入代码“”，用以撑起单元格的高度。当我们在单元格插入内容，或是设定了单元格的高度数值，这个代码就会消失。如果想要设置低于12像素的单元格的高度时，也必须先将这个占位代码给删除掉才行。二、插入表格两种方法：“插入”“表格”命令单击“插入”面板的“常用”类别中的“表格”按钮上，打开“表格”对话框。1、宽度（百分比，像素）：相对显示，绝对显示2、边距/填充：文本内容与边框之间距离3、间距：单元格与单元格之间距离4、标题：设置表格标题位置【例4-1】：新建

3、一个网页文档，在文档中插入表格（9行2列）并插入表格内容【练习1】：制作下面表格【练习2】：如何让文本与表格边框有一定空白区间，如下：5、插入嵌套表格：嵌套表格就是在已经存在的表格中插入的表格。插入嵌套表格的方法与插入表格的方法相同。【练习3】：利用表格制作下图样式：说明：由于大表格控制的是网页整体的布局，为使之在不同分辨率的显示器下能保持统一的外观，大表格的宽度一般使用像素值，而为了使嵌套表格的宽高不和总表格发生冲突，嵌套表格一般使用百分比来设置宽和高。【思考】：利用嵌套表格留空白操作方法：插入一个1行1列的表格，再在此表格中插入一表格，此时新插入的表格设置时宽度要小一些，另外最好不要设置边

4、框。要么将里面表格的宽度以“百分比”的形式设置，此值要小于100%，具体多少适情况而定。三、编辑表格（一）选择表格1、选择整个表格：左上角或底部边缘；任意单元格+标签2、选择表格中的行或列：上边缘，左边缘；拖动鼠标3、选择单个单元格：单元格+标签；单元格+ctrl+a4、选择单行或矩形单元格块：鼠标拖动；首单元格+shift+尾单元格5、选择不相邻的单元格ctrl+欲选单元格（再次单击则从选集中删除）（二）编辑表格和单元格1、调整表格大小：三个控制点（水平、垂直、水平+垂直方向）2、更改列宽和行高：左右指针或上下指针位置拖动鼠标3、添加和删除行、列：当前单元格上面插入一行（修改-表格-插入行）

5、当前单元格左边插入一列插入-布局：插入多行多列（修改-表格-插入行或列）删除行或列（选择，修改-表格-删除行/列；del键）4、拆分和合并单元格：选择表格，修改-表格-合并/拆分单元格；属性面板中的按钮【例4-2】：打开例3-1网页文档，编辑表格（边框1，背景灰，边框颜色深灰，合并第一行）5、复制、粘贴单元格【练习4】：如何制作下图的细线边框表格？【练习5】：制作简单导航栏【练习6】：如何制作下图圆角表格？四、使用表格规划网页布局（一）在“布局模式”下规划网页布局表格的三种布局模式：标准、扩展、布局dreamweavercs3在“插入”栏的“布局”类别中提供了“标准”、“扩展”两种表格视图模式

6、，注意在“查看-表格模式-布局模式”中切换：“标准”模式：标准模式是表格默认的视图模式，对于表格及其内容的绝大部分操作适合在该模式下进行。“扩展”模式：在标准模式中，当图像填满整个单元格时，很难直接将光标定位在单元格中，为了解决这个问题，可以切换到“扩展表格”模式。在“扩展”模式下，dreamweaver临时向文档中的所有表格添加单元格边距和间距，并且增加表格的边框以使编辑操作更加容易。利用这种模式，可以方便地选择表格中的内容或者精确地定位插入点。“布局”模式：专门为方便网页布局而设计的模式，这种模式下的单元格边框是没有宽度的。“布局”模式的主要功能是绘制或编辑复杂的表格。文档窗口的顶部显示“

7、布局模式”，指示当前正处于“布局”模式中，原来页面上的每个表格都显示为布局表格。1、认识布局单元格和布局表格创建布局表格，在布局表格中添加布局单元格直接创建布局单元格时，自动创建布局表格2、绘制布局单元格和布局表格“布局单元格”不能存在于布局表格之外，可以在“布局表格”中任意位置绘制“布局单元格”；按住ctrl键拖拽鼠标，实现连续绘制多个“布局表格”或“布局单元格”。3、选择布局单元格和表格单元格：点击单元格边框，8个控制点表格：单击灰色区域4、移动和调整布局单元格和布局表格：在布局表格内，布局单元格可以任意移动。鼠标拖动；方向键微调（shift每次调10像素）注意：布局单元格不能在布局表格之

8、外，同一个布局表格中可以放置多个布局单元格，在布局表格中还可以嵌套多个布局表格。（二）布局的过程1.设定页面尺寸分辨率800x600像素，页面显示尺寸为780x428像素；分辨率1024x768像素，页面显示尺寸为1007x600像素。2.放置功能模块3.布局细化与调整（选择、调整、移动、修改）例4-3：在布局模式下规划“游戏网站”主页布局并设置单元格样式1、新建文档，切换到【布局模式】2、打开布局插入栏，绘制布局表格（800*600像素）3、绘制布局单元格（若干）4、选中布局单元格，属性面板中设置背景色表格的应用技巧：强调：如果要将某网页元素（例如一幅图像）放到特定位置，首先应想到使用表格！

9、1.使用表格还是单元格2.使用百分比还是像素3.使用一个大表格还是多个横向表格篇二：dw使用教程adobedreamweavercs6课程笔记第一节、dreamweavercs6软件简介和安装一、dreamweavercs6是由美国adobe公司最新开发的一款网页设计、网站管理为一体的专业软件。二、为了保让能够正常安装，在安装时，请断开网络。第二节、dwcs6软件界面的简介一、软件界面组成1、菜单栏2、工作区3、属性栏4、浮动面板（文件、资源、css样式、行为等）二、界面的切换：为满足不同人群的需求。三、界面的恢复：窗口工作区重置设计器四、插入面板的调用。第三节、网页相关知识一、dreamwe

10、avercs6是由美国adobe公司最新开发的一款网页设计、网站管理为一体的专业软件。二、什么是网页（网页的概念）：在互联网上基于http协议传播信息的页面。三、什么是网站：反应同一主题的多个网页的集合。四、网页内容的组成(网页元素)1、文字2、图片（jpg，gif，png）3、动画（swf，gif）4、多媒体5、超链接6、表单7、网页特效8、其它元素第四节、网页制作方法与站点建立一、网页的制作方法1、代码法：html2、软件制作：dreamweaver、frontpage（所见即所得）。二、制作网站前准备工作：建立站点。三、站点：用来存放网站中所有元素的文件夹，为了制作方便需要将这个文件夹和

11、制作软件相链接。四、站点的建立(链接)1、站点建立2、文件面板3、应用程序栏（窗口应用程序栏）五、站点的分类（按照网站的位置）1、本地站点2、远程站点第五节、规划本地站点目录结构一、规划本地站点目录结构1、images（图片）2、swf（动画）3、css（css样式）4、script（存放网页特效）js5、other（其它）二、网站主页名称1、index.htm2、index.html3、default.htm4、default.html注：主页必须放在网站的根目录下面，同时名称也有特殊的要求。第六、七节、网页中文字的输入1-2一、网页的四个视图1、设计视图2、代码视图3、拆分视图4、实时视图

12、二、网页中的文字1、文字直接输入就可以了。2、回车表示换段。3、shift+回车：表示换行。4、输入空格时要在全角输入法状态下输入。5、特殊字符的插入：“插入html特殊字符”6、文字也可以从网站中复制，但是在复制时需要将网页中文字的格式去掉。（注：如何去除复制来的文字格式，只需要将文字粘贴到记事本中，然后从记事本中再复制文字就可以了。）三、预览网页：文件在浏览器中预览iexplore（快捷键：F12）第八、九节、页面属性1-2一、页面属性1、修改页面属性2、或通过属性栏二、属性1、左边距、右边距、上边距、下边距。2、文字字体、大小、颜色。（注：a、字体：选择常用字体。如：宋体b、大小：正文文

13、字一般设置为12-16px。）3、页面背景。4、背景图片。（默认情况自动填充、平铺）（注：a、图片要放在站点内。（有关网站中的所有元素都必须放在站点内）。b、图片名称不能为中文。）（注：如果同时设置背景颜色和背景图片，以背景图片为准。）第十节、html网页基本代码格式一、网页基本代码（注：1、head：开头部分2、title：标题3、body：正文部分）二、常用代码1、：换段2、：换行注：多数html代码都有对称性的特点。第十一节、图片的插入一、图片1、图片格式（1）jpg：图片质量较高，一般用于较大的图片。如：人物、风景。（不支持透明）（2）gif：用于制用按钮、动画、导航条等，图片较小，只

14、有256种颜色。（支持透明）（3）png：兼有两种格式的特点。（支持透明）注：图片的大小一般尽量控制在200k以下。2、链接（1）_blank：在新的网页打工。（2）_self：在自身网页打开。第十二节、图片热点一、热点1、矩形热点2、圆形热点3、多边形热点注：编辑首选参数辅助功能图像二、替换1、用于图片的注释。2、当图片无法显示的时候用此内容代替。三、宽度和高度的设置四、相关html代码1、img：图片。2、src：位置。3、热点：第十三节、图片的编辑一、裁剪、亮度对比度、锐化注：使用dreamweaver编辑图像是个不好的习惯，如果要编辑图像，最好使用专门的图像编辑软件（如：Firewor

15、ks、photoshop），编辑好了以后，再重新插入进来。二、插入图像对象鼠标经过图像三、水平线的插入插入html水平线四、背景颜色的代码：bgcolor第十四节、超链接一、超链接指的是通过点击一个对象可以链接打开另外一个对象（网页、图片、程序等）。二、链接的代码（即链接的标签）内容文字三、超链接的状态（修改页面属性链接）1、链接：链接默认颜色。2、变换图像：鼠标移上去时的颜色。3、已访问：访问以后链接的颜色。4、活动：鼠标点下去时的颜色。第十五节、超链接打开方式一、链接页面打开的目标：_blank：新窗口打开网页new：新窗口打开网页_parent：父窗口（框架结构）_self：自身窗口、原

16、窗口_top：顶窗口（框架结构）第十六、十七、十八、十九节、超链接对象一、超链接的对象1、文字2、图片3、热点4、空链接（#）5、邮件链接：mailto：邮箱地址（可以利用菜单命令直接插入）6、下载链接（浏览器打不开的内容即为下载链接）7、锚点链接（链接到网页的具体位置）步骤：（1）创建锚点（2）制作链接（#锚记）隐藏锚点：编辑首选参数不可见元素注：锚点链接不但可以链接本页面中的锚点，也可以链接到其它页面中的锚点。8、脚本链接（实现特殊功能）javascript:window.close()关闭窗口javascript:window.print()打印文字第二十节、表格一、表格的作用1、制作表

17、格2、定位布局二、表格的建立1、插入表格2、常用面板三、表格的元素及代码1、.：单元格2、.：行3、.：表格四、元素的选择1、单元格2、行3、表格第二十一节、表格属性一、表格参数1、行数和列数2、宽度单位：（1）象素表示绝对值（固定值）。（2）用%表示相对值。3、填充：单元格中的内容与边框的距离。4、间距：表示单元格与单元格之间的距离。5、边框：设置表格是否留有边线。6、对齐7、清除行高和列宽8、将宽度转换为象素9、将宽度转换为百分比第二十二节、行和单元格属性1、水平：单元格内容水平对齐方式。2、垂直：单元格内容垂直对齐方式。3、宽：单元格宽度。4、高：单元格高度。5、背景颜色：单元格背景颜色。6、拆分和合并单元格。注：在利用表格排版时网页中各种元素都是放入单元格内进行排版的。第二十三节、网页布局和大小篇三：dreamweaver教案1课程表授课班级：班授课内容：网页制作合计：4节课