三沣开发知识 购物 网址 游戏 小说 歌词 地图 快照 股票 美女 新闻 笑话 | 汉字 软件 日历 阅读 下载 图书馆 开发 租车 短信 China
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题
autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程 CSS/HTML/Xhtml
html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
站长资讯 .NET新手 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA VisualStudio ASP.NET-MVC .NET控件开发 EntityFramework WinRT-Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动 Html-Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP OracleERP DynamicsCRM K2 BPM 信息安全 企业信息 Android开发 iOS开发 WindowsPhone WindowsMobile 其他手机 敏捷开发 项目管理 软件工程 SQLServer Oracle MySQL NoSQL 其它数据库 Windows7 WindowsServer Linux
  IT知识库 -> Dreamweaver教程 -> Dreamweaver怎么设计彩色边框的表格? -> 正文阅读
 

[Dreamweaver教程]Dreamweaver怎么设计彩色边框的表格?

Dreamweaver怎么设计彩色边框的表格? Dreamweaver怎么设计彩色边框的表格?想要制作一个五颜六色变宽的表格,该怎么制作呢?我们需要使用CSS样式来制作,下面我们就来看看详细的教程,需要的朋友可以参考下
Dreamweaver中制作表格是很简单的,但是想要改变表格边框颜色,该怎么办呢?下面我们就来看看详细的教程。
软件名称:adobe dreamweaver cc 2014 32&64位中文破解安装版(附破解教程)软件大小:320MB更新时间:2014-06-25

1、启动Adobe Dreamweaver软件,单击欢迎界面窗口中的新建HTML按钮,创建一个新的空白网页文档。

2、保存文档后,将Dreamweaver窗口右上角的工作区布局更改为“经典”布局方式,这样可以让“插入”面板显示出来。

3、单击“常用”面板当中的“插入表格”按钮,弹出“表格”对话框,设置插入的表格为3行3列,宽度600像素(大家可以根据自己的需要设置行列以及宽度值),边框粗细、单元格边距和间距均设置为0,我们等会用CSS样式来控制它们。

4、表格插入后,在单元格中任意输入文本。然后单击Dreamweaver窗口右边“CSS样式”浮动面板上的“新建CSS样式规则”按钮,弹出“新建CSS规则”对话框。

5、在“新建CSS规则”对话框的“选择器类型”下拉列表中选择“标签(重新定义HTML元素)”选项,“选择器名称”的下拉列表中选择“table”也就是表格的标签,“规则定义”选项默认为“仅限该文档”(如果需要对其他文档中的表格也使用此样式可更改此选项)。

6、单击“确定”按钮后打开“table的CSS规则定义”对话框,选择左边“分类”选项中的“边框”项,我们来对表格的外边框进行设置。将右边窗口中“样式”、“边框”、“颜色”栏下“全部相同”的复选框取消勾选,因为对于表格我们只设置上边和左边的边框样式,上和左的“样式”选择“solid(实线)”,“宽度”填入数值2px(细边框表格此处填1像素),颜色可以任意选择自己喜欢的颜色。单击“确定”按钮完成对于表格的样式设置。


7、再次返回Dreamweaver窗口,单击右边“CSS样式”浮动面板上的“新建CSS样式规则”按钮,弹出“新建CSS规则”对话框。这次我们在“新建CSS规则”对话框的“选择器名称”的下拉列表中选择“td”也就是单元格的标签,其他选项同上。

8、单击“确定”按钮后打开“td的CSS规则定义”对话框,先选择左边“分类”选项中的“区块”项,我们把“文本对齐”方式设置为“center(居中)”,让单元格中的文本都居中对齐。

9、然后选择左边“分类”选项中的“方框”项,默认勾选“填充”栏中“全部相同”的复选框,填入数值5px,让单元格内的文字与单元格四周的距离均为5像素。

10、最后选择左边“分类”选项中的“边框”项,我们来对单元格的边框进行设置。将右边窗口中“样式”、“边框”、“颜色”栏下“全部相同”的复选框取消勾选,因为对于单元格我们只设置右边和下边的边框样式,右和下的“样式”选择“solid(实线)”,“宽度”填入数值2px(细边框表格此处填1像素),颜色可以任意选择自己喜欢的颜色。单击“确定”按钮完成对于单元格的样式设置。

11、单击“确定”按钮完成制作。保存文档后预览最终页面表格效果,可以看到漂亮的彩色边框表格。

以上就是Dreamweaver设计彩色边框的表格的教程,希望大家喜欢,请继续关注脚本之家。
相关推荐:
Dreamweaver怎么绘制视化表格?
Dreamweaver中的表格怎么排版?
Dreamweaver网页怎么制作一个带有列表值的下拉菜单?
  Dreamweaver教程 最新文章
Dreamweaver怎么添加字体? dw更换字体的教程
dreamweaver制作网页详细步骤(设计网站首页
Dreamweaver怎么给代码添加注释?
Dreamweaver单选按钮怎么出一道单选题?
Dreamweaver文字怎么添加多个不同的阴影?
Dreamweaver怎么制作一个开场动画效果的网页
dw如何插入flash动画?dw插入flash动画方法
Dreamweaver制作网页技巧20则
Dreamweaver CS5 破解激活方法
制作网页 详解Dreamweaver13个技巧
上一篇文章      下一篇文章      查看所有文章
加:2017-11-14 23:25:06  更:2017-11-14 23:25:18 
 
技术频道: 站长资讯 .NET新手区 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA Visual Studio ASP.NET MVC .NET控件开发 Entity Framework WinRT/Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动设计 Html/Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP Oracle ERP Dynamics CRM K2 BPM 信息安全 企业信息化其他 Android开发 iOS开发 Windows Phone Windows Mobile 其他手机开发 敏捷开发 项目与团队管理 软件工程其他 SQL Server Oracle MySQL NoSQL 其它数据库 Windows 7 Windows Server Linux
脚本语言: vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题 autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程
网站开发: CSS/HTML/Xhtml html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 美食菜谱 新闻资讯 电影视频 小游戏 Chinese Culture 股票 租车
生肖星座 三丰软件 视频 开发 短信 中国文化 网文精选 搜图网 美图 阅读网 多播 租车 短信 看图 日历 万年历 2017年12日历
2017-12-18 22:54:02
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT知识库