dreamweaver圆角表格Word文档下载推荐.docx
- 文档编号:8063298
- 上传时间:2023-05-10
- 格式:DOCX
- 页数:11
- 大小:20.05KB
dreamweaver圆角表格Word文档下载推荐.docx
《dreamweaver圆角表格Word文档下载推荐.docx》由会员分享,可在线阅读,更多相关《dreamweaver圆角表格Word文档下载推荐.docx(11页珍藏版)》请在冰点文库上搜索。
如何让文本与表格边框有一定空白区间,如下:
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样式、行为等)
二、界面的切换:
为满足不同人群的需求。
三、界面的恢复:
窗口——工作区——重置设计器
四、插入面板的调用。
第三节、网页相关知识
二、什么是网页(网页的概念):
在互联网上基于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:
顶窗口(框架结构)
第十六、十七、十八、十九节、超链接对象
一、超链接的对象
2、图片
3、热点
4、空链接(#)
5、邮件链接:
mailto:
邮箱地址(可以利用菜单命令直接插入)
6、下载链接(浏览器打不开的内容即为下载链接)
7、锚点链接(链接到网页的具体位置)
步骤:
(1)创建锚点
(2)制作链接(#锚记)
隐藏锚点:
编辑——首选参数——不可见元素
锚点链接不但可以链接本页面中的锚点,也可以链接到其它页面中的锚点。
8、脚本链接(实现特殊功能)
javascript:
window.close()——关闭窗口
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节课
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- dreamweaver 表格