dwcs5制作圆角表格的方法

 时间:2024-10-14 16:50:07

1、打开dw,按下ctrl+n,新建一个文件,高度和宽度都是200像素,背景内容为透明

dwcs5制作圆角表格的方法

2、​选择圆角矩形工具,将属性栏行的半径设置为15像素,这个半径的大小需要你自己根据表格的样式倦虺赳式来选择,一可以多尝试几个半径的尺寸来最后决定一种最合适的半径​

dwcs5制作圆角表格的方法
dwcs5制作圆角表格的方法

3、​拖动鼠标绘制一个矩形,这里需要调整矩形与画布的位置,使得矩形正好在画布的中心,不偏不倚​

dwcs5制作圆角表格的方法

4、​右键单击该矩形,在打开的菜单中,选择【栅格化】,将其栅格化,如图所示​

dwcs5制作圆角表格的方法

5、​在菜单栏上执行:图像----画布大小,我们来切割图片​

dwcs5制作圆角表格的方法

6、​先来切割左上角,得到左上角的图片,如图所示,将宽度和高度都设置成30像素,这个像素的大小需要你自己尝试几个尺寸以后才能知道设置成多大的像素,自己试验一下吧。记得定位要选择左上角,然后点击确定遽牟赓雁按钮。

dwcs5制作圆角表格的方法

7、​这是得到的左上角的图片​,将该图片另存为web和设备所用格式

dwcs5制作圆角表格的方法
dwcs5制作圆角表格的方法

8、​在打开的对话框中,将格式设置为gif,颜色表中记得选择透明色是最后一个画布颜色。

dwcs5制作圆角表格的方法

9、​在历史记录面板,退回到栅格化那一步,我们来用上面的方法得到其他的三个角的图片,最后得到蚵播噍疸四个图片,分别为j1.gif ;j2.gif;j3.gif;j4.gif​

dwcs5制作圆角表格的方法

10、​得到了四个角以后,还得得到四个边的图片,我们以上面的边为例,将画布大小调整为宽2像素、高度30像素(与角的图片的高度相同),然后点击确定按钮。将该图片保存为gif格式即可。以这样的方法我们获得上下左右四个边的图片。​

dwcs5制作圆角表格的方法

11、​这是我最后得到的8张图片,他们正好可以围城一个表格​

dwcs5制作圆角表格的方法

12、​打开dw,插入一个表格,表格为3x3​,宽度是100%,粗细、边距、间距均为零

dwcs5制作圆角表格的方法
dwcs5制作圆角表格的方法

13、​将光标定位在第一行第一个单元格,然后再属性栏,将宽度和高度都设置为30像素,同样的方法把另外三个位于角的位置的单元格设置为30x30像素​

dwcs5制作圆角表格的方法
dwcs5制作圆角表格的方法

14、​接着将光标定位到第一行的第一个单元格,在菜单栏上执行:插入--图像,插入我们的第一个角的图片​

dwcs5制作圆角表格的方法
dwcs5制作圆角表格的方法

15、​依据同样的方法插入其他四个角的图片,如图所示​

dwcs5制作圆角表格的方法
dwcs5制作圆角表格的方法

16、​将光标定位到第一行的第二个表格,然后我们来制作表格的边边​

dwcs5制作圆角表格的方法

17、​右键单击该单元格,在打开的右键菜单中,选择【编辑标签】

dwcs5制作圆角表格的方法

18、​打开标签编辑器,在该对话框中,我们切换到浏览器特定的,背景图像这里点击右边的浏览按钮

dwcs5制作圆角表格的方法

19、​选择我们刚才做好的一个边的图片,点击确定按钮​

dwcs5制作圆角表格的方法

20、​这就是插入的一个图片,它会自动的平铺,形成一条线,依据这样的方法可以做好其他的三个边边​

dwcs5制作圆角表格的方法
dwcs5制作圆角表格的方法

21、​在第二行的第二个单元格,我们可以输入单元格的内容,如图所示,这样的单元格可以随意的改变大小,而边框的样式却是不变的:​

dwcs5制作圆角表格的方法

22、​即便我插入更多的文字,表格仍然是一个完好的圆角表格​

dwcs5制作圆角表格的方法
  • DW怎样添加圆角矩形
  • DW设置背景图片的操作方法
  • DW如何设置背景图片的大小
  • DW怎么修改文字链接颜色?
  • 在DW中怎样创建圆角矩形
  • 热门搜索
    诵读经典手抄报 以感恩为主题的手抄报 关于孝心的手抄报 科技节手抄报内容 读书节手抄报图片 清明节手抄报内容资料 70周年手抄报内容文字 小学生交通安全手抄报 神话故事手抄报图片 关于鸟的手抄报