DREAMWEAVER表格背景颜色 |
您所在的位置:网站首页 › dw怎么插背景图片上怎么放上文字 › DREAMWEAVER表格背景颜色 |
篇一:Dreamweaver制作表格表单 Dreamweaver制作表格和表单 表格当初主要用于数据的格式化显示,现在表格更多地用于排列网页中的内容,今天我们就一起来看看在Dreamweaver CS3里如何创建表格,以及如何使用表格对网页中的图文进行布局。 一、什么是表格布局 表格布局就是为了精确定位、合理安排网页中的文字、图片等元素,它就像网页的脸面,是在一个限定的面积范围内合理安排、布置图像、文字等元素的位置,从而设计出版式漂亮的页面。如图1所示,就是一个使用表格布局的页面。 图1 表格布局文字和图片 二、表格的使用 如果我们要实现如图1所示的表格布局页面,该怎么办?不急!下面就一步一步地实现如图1所示的表格布局页面。请执行以下步骤: (1) 新建空白文档,然后选择“插入”一“表格”命令,以显示“表格”对话框,如图2所示。 图2 “表格”对话框 (2) 输入所需的行数为7和列数为4,选择“百分比”或“像素”为单位的表格宽度。 (3) 在“边框粗细”后的文本框中输入边框宽度,如果不需要显示边框,请将值设为"0"。 (4) 设置“单元格边距”和“单元格间距”。 (5) 设置的相关值如图2所示,然后单击“确定”按钮。 (6) 选中第1行所有单元格,然后右击鼠标选择“表格”一“合并单元格”命令,高度设为34。同理,合并第3行所有单元格,合并第7行所有单元格,合并第1列第 4行、第1列第5行、第1列第6行这3个单元格,合并第2列第4行、第2列第5行、第2列第6行这3个单元格,合并第4列第4行、第4列第5行、第4列第 6行这3个单元格,合并后的效果如图3所示。 (7) 按图1添加相关文字内容。 (8) 光标定位到第4行第1个单元格里,然后依次选择“插入”一“表单”一“复选框”命令。 (9) 在第1行单元格里插入图片“commodity_tablehead.gif'’。同理,在相应位置插入图片commodity_huaping.jpg、online_pic.gif和list_ tool_favl.gif。 (10) 在第4行最后一个单元格输入“一口价283.30”,然后在“属性”面板里设置此单元格背景颜色为“#FF99FF”和居中对齐。 图3 插入表格并合并相关单元格 (11) 光标定位到第3行,然后切换到“代码”视图,如图4所示,在光标位置插入如下代码:WANGYEXX.COM 同理,在最后一行插入第2条虚线。 (12) 按F12键就可以看到如图1所示的效果。 图4 切换到“代码”视图 本节作业: 制作如图1网页。 注意事项: 1.注意设计视图和代码视图的切换。 2.熟练各种面板工具的使用。 网页学习网提示:光看教程是无法让你掌握HTML知识,最好是完成作业后才进入下一次教程,动起手来吧! 点击下载第五章案例及作业资源 返回《HTML入门经典》教程列表 转载请注明本文地址:/html/jc/525.html 表单是HTML的一个重要部分,主要用于采集和提交用户输入的信息,它也是实现动态网页的一种主要表现形式。下面我们就使用Dreamweaver CS3快速地创建常用的表单页面。 一、什么是表单 表单是网站管理者与访问者之间沟通的桥梁,包含如按钮、文本框、下拉列表框、单选按钮、复选框等表单元素。表单元素用于接受用户的输入并提供一些交互式操作。用户输入的数据可以通过客户端脚本来验证,然后提交给服务器作进一步的处理。 表单在万维网(www)上应用非常广泛,而且仍在不断发展。下面是一个“注册”表单的典型例子,如图1所示。 图1 注册表单页面 二、表单的使用 在Dreamweaver CS3中,如何实现如图1所示的“注册”表单页面?一看图1就知道这是一个表单,所以要插入表单,再仔细看看表单域里面的文字和表单元素是不是都很规整、 井然有序?是的,这是什么在起作用?表格,所以这里还使用了表格对表单中的元素进行布局。经过这么一分析,我们基本上知道了图 5.13所示的“注册”表单 页面是由表单、表格以及表单元素构成的。 下面我们就一步一步地实现如图1所示的表单页面。 1.插入表单 在Dreamweaver中插入表单时,表单以红线显示。用浏览器浏览时,这条线不会出现在网页上,仅在Dreamweaver中编辑时可见。添加到表单的每个项目都必须在表单内部, 否则将视之为另一个表单,了解这一点是非常重要的。为了布局美观,您可以将表格和图形等对象放置到表单标签内。 要将表单插入网页,请执行以下步骤。 (1) 新建空白文档,将插入点放置在“文档”窗口内要插入表单的地方。单击“表单”工具栏中“表单”图标,或在菜单中选择“插入”一“表单”命令。 (2) 此时Dreamweaver即插入一个表单,如图2所示。在“设计”视图中,表单边框线显示为红色。如果未显示红色边框线,请选择“查看”一“可视化助 理”一“不可见元素”命令。单击表单边框线或选择“文档”窗口左下角的表单标签()可以选中整个表单。 (3) 将鼠标放到表单域内或选中表单域,此时在“属性”面板中就可以设置表单域的各项属性,如图2所示。 图2 设计视图中显示的表单 ● 动作:此属性指定表单提交到服务器后,处理表单信息的动态页或脚本文件的位置,一般是一个URL路径,可以单击“浏览文件”图标来选择适当的页面或脚本文件。这里指定为 。 ● 方法:可指定用于将表单数据提交到服务器的方法。当用户提交表单时,有GET和POST两种方式可将浏览器的信息发送至服务器。选POST方式比较安全。 在设置好表单域的各个属性后,一个表单就创建好了。 2.插入表单元素 (1) 在表单域里单击,然后插入一个10行2列的表格,合并最后1行所有单元格,再合并倒数第2行所有单元格,其他设詈如图3所示。 图3 表格属性 (2) 在表格的第1、第2、第3和第4行的第1列分别输入文本“登录名:”、“密码:”、“再次输入密码:”和“电子邮箱:”:先把光标定位到要插入表单元素的 单元格,然后使用“表单”工具栏,在第2列中分别依次插入一个文本框、两个密码框和一个文本框,属性设置如图4和图5所示。 篇二:dreamweaver基础教程——插入并编辑表格 dreamweaver基础教程:插入并编辑表格 表格是网页设计制作不可缺少的元素,它以简洁明了和高效快捷的方式将图片、文本、数据和表单的元素有序的显示在页面上,让我们可以设计出漂亮的页面,使用 表格排版的页面在不同平台、不同分辨率的浏览器里都能保持其原有的布局,而在不同的浏览器平台有较好的兼容性,所以表格是网页中最常用的排版方式之一。 一、插入并编辑表格 1、插入表格 在文档窗口中,将光标放在需要创建表格的位置,单击“常用”快捷栏中的表格按钮弹出的“表格”对话框,指定表格的属性后,在文档窗口中插入设置的表格。 “行数”文本框用来设置表格的行数。 “列数”文本框用来设置表格的列数。 “表格宽度”文本框用来设置表格的宽度,可以填入数值,紧随其后的下拉列表框用来设置宽度的单位,有两个选项——百分比和像素。当宽度的单位选择百分比时,表格的宽度会随浏览器窗口的大小而改变。 “单元格边距”文本框用来设置单元格的内部空白的大小。 “单元格间距”文本框用来设置单元格与单元格之间的 距离。 “边框粗细”用来设置表格的边框的宽度。 “页眉”定义页眉样式,可以在四种样式中选择一种。 “标题” 定义表格的标题。 “对其标题”定义表格标题的对齐方式。 “摘要” 可以在这里对表格进行注释。 2、选择单元格对象 对于表格、行、列、单元格属性的设置是以选择这些对象为前提的。 选择整个表格的方法是把鼠标放在表格边框的任意处,当出现 这样的标志时单击即可选中整个表格,或在表格内任意处单击,然后在状态栏选中标签即可;或在单元格任意处单击,点鼠标右键在弹出菜单菜单中选择“表格——选择表格” 要选中某一单元格,按住Ctrl键,鼠标在需要选中的单元格单击即可;或者,选中状态栏中的标签。 要选中连续的单元格,按住鼠标左键从一个单元格的左上方开始向要连续选择单元格的方向拖动。要选中不连续的几个单元格,可以按住Ctrl键,单击要选择的所有单元格即可。 要选择某一行或某一列,将光标移动到行左侧或列上方,鼠标指针变为向右或向下的箭头图标时,单击即可。 3、设置表格属性 选中一个表格后,可以通过属性面板更改表格属性。 “填充”文本框用来设置单元格边距,“间距”文本框用来设置单元格间距。 “对齐”下拉列表框用来设置表格的对齐方式,默认的对齐方式一般为左对齐。 “边框”文本框用来设置表格边框的宽度。 “背景颜色”文本框用来设置表格的背景颜色。 “边框颜色”用来设置表格边框的颜色。 在“背景图像”文本框填入表格背景图像的路径,可以给表格添加背景图像。也可以如下图所示给文本框加上链接路径。还可以单击文本框后的“浏览”按钮,查找图像文件。在“选择图像源”对话框中定位并选择要设置为背景的图片,单击“确认”按钮即可。 4、单元格属性 把光标移动到某个单元格内,可以利用单元格属性面板对这个单元格的属性进行设置。 “水平”文本框用来设置单元格内元素的水平排版方式,是居左、居右或是居中。 “垂直”文本框用来设置单元格内的垂直排版方式,是顶端对齐、底端对齐或是居中对齐。 “高”、“宽”文本框用来设置单元格的宽度和高度。 “不换行”复选框可以防止单元格中较长的文本自动换行。“标题”复选框使选择的单元格成为标题单元格,单元格内的文字自动以标题格式显示出来。 “背景”文本框用来设置表格的背景图像。 篇三:在Dreamweaver中制作细线表格 制作细线表格 如果仅仅是定义表格的边框为1(border="1")和边框颜色值(如borderColor="#000000"),表格线其实是2px的,要做细线表格,有2种方法: 方法一 1、插入表格,参数设置如下图(边框:0 单元格填充:0 单元格间距:1 ): 2、选中表格,在属性面板中设置表格的背景颜色为黑色: 3、全选所有单元格(光标定位到第一个单元格里,按住Shift键单击最后一个单元格,)然后在属性面板中设置所有单元格的背景颜色为白色: 4、完成后效果如图: 当然,表格边框和单元格的颜色也可以设置为其他颜色,但是不能是同一种颜色。 方法二 1、插入表格,参数设置: 边框:1 单元格填充:0 单元格间距:0 2、点击“窗口 / 标签检查器”,打开标签面板,设置“浏览器指定”: Bordercolordark:白色(#FFFFFF) Bordercolorlight::黑色(#000000) 3、完成后如图:
DREAMWEAVER表格边框 DREAMWEAVER表格内线颜色 DW表格边框 DREAMWEAVER中表格的用途 DREAMWEAVER表格背景图片 DREAMWEAVER表格背景透明 DW表格边框颜色代码 DREAMWEAVER表格灰色 DREAMWEAVER表格插入图片 ECEL表格填充背景颜色 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |