dreamweaver圆角表格.docx
《dreamweaver圆角表格.docx》由会员分享，可在线阅读，更多相关《dreamweaver圆角表格.docx（11页珍藏版）》请在冰豆网上搜索。
dreamweaver圆角表格
竭诚为您提供优质文档/双击可除
dreamweaver圆角表格
篇一：
第三章使用表格规划网页布局
第三章使用表格规划网页布局
一、相关概念
1、表格功能：
显示数据，定位网页元素（布局）
2、表格的组成：
表格由行和列组成，行和列的交叉形成的矩形形状称之为单元格。
单元格中的内容和边框之间的距离叫边距cellpadding。
单元格和单元格之间的距离叫间距cellspacing。
表格的边线叫做边框border。
tr：
代表一行。
td：
代表一个单元格。
3、占位符：
当我们插入表格后，每个单元格的默认的高度是12像素的，但这些单元格中什么也没有，它是用什么撑起高度的？
这都是“占位符”的功劳。
因为一个单元格在没有设置高度值的时候，代表着此单元格的高度值为0，但如果这样就没法对单元格进行操作了，所以，dreamweaver会在每个单元格中插入代码“”，用以撑起单元格的高度。
当我们在单元格插入内容，或是设定了单元格的高度数值，这个代码就会消失。
如果想要设置低于12像素的单元格的高度时，也必须先将这个占位代码给删除掉才行。
二、插入表格
两种方法：
①“插入”→“表格”命令
②单击“插入”面板的“常用”类别中的“表格”按钮上，打开“表格”对话框。
1、宽度（百分比，像素）：
相对显示，绝对显示
2、边距/填充：
文本内容与边框之间距离
3、间距：
单元格与单元格之间距离
4、标题：
设置表格标题位置
【例4-1】：
新建一个网页文档，在文档中插入表
格（9行2列）并插入表格内容
【练习1】：
制作下面表格
【练习2】：
如何让文本与表格边框有一定空白区间，如下：
5、插入嵌套表格：
嵌套表格就是在已经存在的表格中插入的表格。
插入嵌套表格的方法与插入表格的方法相同。
【练习3】：
利用表格制作下图样式：
说明：
由于大表格控制的是网页整体的布局，
为使之在不同分辨率的显示器下能保持统一的
外观，大表格的宽度一般使用像素值，而为了使嵌套表格的宽高不和总表格发生冲突，嵌套表格一般使用百分比来设置宽和高。
【思考】：
利用嵌套表格留空白
操作方法：
插入一个1行1列的表格，再在此表格中插入一表格，此时新插入的表格设置时宽度要小一些，另外最好不要设置边框。
要么将里面表格的宽度以“百分比”的形式设置，此值要小于100%，具体多少适情况而定。
三、编辑表格
（一）选择表格
1、选择整个表格：
左上角或底部边缘；任意单元格+标签
2、选择表格中的行或列：
上边缘，左边缘；拖动鼠标
3、选择单个单元格：
单元格+标签；单元格+ctrl+a
4、选择单行或矩形单元格块：
鼠标拖动；首单元格+shift+尾单元格
5、选择不相邻的单元格
ctrl+欲选单元格（再次单击则从选集中删除）
（二）编辑表格和单元格
1、调整表格大小：
三个控制点（水平、垂直、水平+垂直方向）
2、更改列宽和行高：
左右指针或上下指针位置拖动鼠标
3、添加和删除行、列：
当前单元格上面插入一行（修改-表格-插入行）
当前单元格左边插入一列
插入-布局：
插入多行多列（修改-表格-插入行或列）
删除行或列（选择，修改-表格-删除行/列；del键）
4、拆分和合并单元格：
选择表格，修改-表格-合并/拆分单元格；属性面板中的按钮
【例4-2】：
打开例3-1网页文档，编辑表格（边框1，背景灰，边框颜色深灰，合并第一行）
5、复制、粘贴单元格
【练习4】：
如何制作下图的细线边框表格？
【练习5】：
制作简单导航栏
【练习6】：
如何制作下图圆角表格？
四、使用表格规划网页布局
（一）在“布局模式”下规划网页布局
表格的三种布局模式：
标准、扩展、布局dreamweavercs3在“插入”栏的“布局”类别中提供了“标准”、“扩展”两种表格视图模式，注意在“查看-
表格模式-布局模式”中切换：
“标准”模式：
标准模式是表格默认的视图模式，对于表格及其内容的绝大部分操作适
合在该模式下进行。
“扩展”模式：
在标准模式中，当图像填满整个单元格时，很难直接将光标定位在单元
格中，为了解决这个问题，可以切换到“扩展表格”模式。
在“扩展”模式下，dreamweaver临时向文档中的所有表格添加单元格边距和间距，并且增加表格的边框以使编辑操作更加容易。
利用这种模式，可以方便地选择表格中的内容或者精确地定位插入点。
“布局”模式：
专门为方便网页布局而设计的模式，这种模式下的单元格边框是没有宽
度的。
“布局”模式的主要功能是
绘制或编辑复杂的表格。
文档窗口的顶部显示“布局模式”，指示当前正处于“布局”模式中，原来页面上的每个表格都显示为布局表格。
1、认识布局单元格和布局表格
创建布局表格，在布局表格中添加布局单元格
直接创建布局单元格时，自动创建布局表格
2、绘制布局单元格和布局表格
“布局单元格”不能存在于布局表格之外，可以在“布局表格”中任意位置绘制“布局单元格”；按住ctrl键拖拽鼠标，实现连续绘制多个“布局表格”或“布局单元格”。
3、选择布局单元格和表格
单元格：
点击单元格边框，8个控制点
表格：
单击灰色区域
4、移动和调整布局单元格和布局表格：
在布局表格内，布局单元格可以任意移动。
鼠标拖动；方向键微调（shift每次调10像素）
注意：
布局单元格不能在布局表格之外，同一个布局表格中可以放置多个布局单元格，在布局表格中还可以嵌套多个布局表格。
（二）布局的过程
1.设定页面尺寸
分辨率800x600像素，页面显示尺寸为780x428像素；
分辨率1024x768像素，页面显示尺寸为1007x600像素。
2.放置功能模块
3.布局细化与调整（选择、调整、移动、修改）
例4-3：
在布局模式下规划“游戏网站”主页布局并设置单元格样式
1、新建文档，切换到【布局模式】
2、打开布局插入栏，绘制布局表格（800*600像素）
3、绘制布局单元格（若干）
4、选中布局单元格，属性面板中设置背景色
表格的应用技巧：
强调：
如果要将某网页元素（例如一幅图像）放到特定位置，首先应想到使用表格！
1.使用表格还是单元格
2.使用百分比还是像素
3.使用一个大表格还是多个横向表格
篇二：
dw使用教程
adobedreamweavercs6课程笔记
第一节、dreamweavercs6软件简介和安装
一、dreamweavercs6是由美国adobe公司最新开发的一款网页设计、网站管理为一体的专业软件。
二、为了保让能够正常安装，在安装时，请断开网络。
第二节、dwcs6软件界面的简介
一、软件界面组成
1、菜单栏
2、工作区
3、属性栏
4、浮动面板（文件、资源、css样式、行为等）
二、界面的切换：
为满足不同人群的需求。
三、界面的恢复：
窗口——工作区——重置设计器
四、插入面板的调用。
第三节、网页相关知识
一、dreamweavercs6是由美国adobe公司最新开发的一款网页设计、网站管理为一体的专业软件。
二、什么是网页（网页的概念）：
在互联网上基于http协议传播信息的页面。
三、什么是网站：
反应同一主题的多个网页的集合。
四、网页内容的组成（网页元素）
1、文字
2、图片（jpg，gif，png）
3、动画（swf，gif）
4、多媒体
5、超链接
6、表单
7、网页特效
8、其它元素
第四节、网页制作方法与站点建立
一、网页的制作方法
1、代码法：
html
2、软件制作：
dreamweaver、frontpage（所见即所得）。
二、制作网站前准备工作：
建立站点。
三、站点：
用来存放网站中所有元素的文件夹，为了制作方便需要将这个文件夹和制作软件相链接。
四、站点的建立（链接）
1、站点——建立
2、文件面板
3、应用程序栏（窗口——应用程序栏）
五、站点的分类（按照网站的位置）
1、本地站点
2、远程站点
第五节、规划本地站点目录结构
一、规划本地站点目录结构
1、images（图片）
2、swf（动画）
3、css（css样式）
4、script（存放网页特效）js
5、other（其它）
二、网站主页名称
1、index.htm
2、index.html
3、default.htm
4、default.html
注：
主页必须放在网站的根目录下面，同时名称也有特殊的要求。
第六、七节、网页中文字的输入1-2
一、网页的四个视图
1、设计视图
2、代码视图
3、拆分视图
4、实时视图
二、网页中的文字
1、文字直接输入就可以了。
2、回车表示换段。
3、shift+回车：
表示换行。
4、输入空格时要在全角输入法状态下输入。
5、特殊字符的插入：
“插入——html——特殊字符”
6、文字也可以从网站中复制，但是在复制时需要将网页中文字的格式去掉。
（注：
如何去除复制来的文字格式，只需要将文字粘贴到记事本中，然后从记事本中再复制文字就可以了。
）
三、预览网页：
文件——在浏览器中预览——iexplore（快捷键：
F12）
第八、九节、页面属性1-2
一、页面属性
1、修改——页面属性
2、或通过属性栏
二、属性
1、左边距、右边距、上边距、下边距。
2、文字字体、大小、颜色。
（注：
a、字体：
选择常用字体。
如：
宋体
b、大小：
正文文字一般设置为12-16px。
）
3、页面背景。
4、背景图片。
（默认情况自动填充、平铺）
（注：
a、图片要放在站点内。
（有关网站中的所有元素都必须放在站点内）。
b、图片名称不能为中文。
）
（注：
如果同时设置背景颜色和背景图片，以背景图片为准。
）
第十节、html网页基本代码格式
一、网页基本代码
（注：
1、head：
开头部分
2、title：
标题
3、body：
正文部分）
二、常用代码
1、
：
换段
2、
：
换行
注：
多数html代码都有对称性的特点。
第十一节、图片的插入
一、图片
1、图片格式
（1）jpg：
图片质量较高，一般用于较大的图片。
如：
人物、风景。
（不支持透明）
（2）gif：
用于制用按钮、动画、导航条等，图片较小，只有256种颜色。
（支持透明）
（3）png：
兼有两种格式的特点。
（支持透明）注：
图片的大小一般尽量控制在200k以下。
2、链接
（1）_blank：
在新的网页打工。
（2）_self：
在自身网页打开。
第十二节、图片热点
一、热点
1、矩形热点
2、圆形热点
3、多边形热点
注：
编辑——首选参数——辅助功能——图像
二、替换
1、用于图片的注释。
2、当图片无法显示的时候用此内容代替。
三、宽度和高度的设置
四、相关html代码
1、img：
图片。
2、src：
位置。
3、热点：
……
第十三节、图片的编辑
一、裁剪、亮度对比度、锐化
注：
使用dreamweaver编辑图像是个不好的习惯，如果要编辑图像，最好使用专门的图像编辑软件（如：
Fireworks、photoshop），编辑好了以后，再重新插入进来。
二、插入——图像对象——鼠标经过图像
三、水平线的插入
插入——html——水平线
四、背景颜色的代码：
bgcolor
第十四节、超链接
一、超链接指的是通过点击一个对象可以链接打开另外一个对象（网页、图片、程序等）。
二、链接的代码（即链接的标签）
内容
文字
三、超链接的状态（修改——页面属性——链接）
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、…..：
单元格
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节课
升级会员 