在Dreamweaver CS6中新建一个html空白文档，将页面内容放入<body></body>中。选中背景图即可插入。
详细步骤：
工具/材料：
1、新建文件夹并将其命名为“表格”。
2、将背景图放入新建的”表格“文件夹里。
3、在Dreamweaver CS6中新建一个html空白文档。
4、将页面内容放入<body></body>中。
5、在<body后按一下空格键，找到background，再按空格，点击“浏览”，找到背景图的位置。
6、选中背景图，点击“确定”。
7、图片插入完成。
8、将这个html另存为在“表格”文件夹里。
9、点击这个预览图标，就可以在浏览器中查看效果。
10、完成效果图。
参考资料：
百度百科-HTML表单
自学自强，不懂就问，但不能太依赖对方哦，有时自己解决问题才是真正学到东西的，^.^
不废话，css代码：
<style>.Gavin_Design ,.gd div{margin:0 auto overflow:hidden height:auto background-color:transparent color:#333}
.gd{width:1000px}
.gd input ,.gd textarea{margin:0 padding:0 background:none border:none font-size:14px resize:none outline:0}
.gd .part{padding:15px 0}
.gd .textarea{height:90px border:1px solid #ddd -webkit-box-shadow:inset 0 3px 2px rgba(0,0,0,.05) -moz-box-shadow:inset 0 3px 2px rgba(0,0,0,.05) box-shadow:inset 0 3px 2px rgba(0,0,0,.05) background:#fff padding:10px}
.gd .textarea textarea{width:100% height:90px overflow:hidden overflow-y:auto}
.gd .bottom_contorl{margin-top:15px}
.gd .bottom_contorl .express{float:left height:32px line-height:32px padding-left:10px}
.gd .bottom_contorl .button{float:right width:320px height:32px text-align:center font-size:0}
.bottom_contorl .button input{height:32px width:150px margin-left:10px color:#fff cursor:pointer}
.bottom_contorl .button input.submit{background:#4779be}
.bottom_contorl .button input.submit:active{background:#3c6eb4}
.bottom_contorl .button input.cancel{background:#b5b5b5}
.bottom_contorl .button input.cancel:active{background:#a9a9a9}
.gd .part .init{width:100% border-collapse:collapse color:#333}
.gd .part td{border-bottom:1px solid #e5e5e5 height:60px padding:2% vertical-align:middle}
.gd .part .user{overflow:hidden white-space:nowrap text-overflow:ellipsis font-size:12px width:60px}
.gd .part .me{color:#666}
.gd .part .reply{color:#22627d}
.gd .part .comments{font-size:14px}
</style>
html结构代码（div+css）：
<div class="Gavin_Design gd"><div class="part">
<div class="textarea">
<textarea placeholder="你有什么好的建议请留言"></textarea>
</div>
<div class="bottom_contorl">
<div class="express">表情</div>
<div class="button">
<input type="button" class="submit" value="提交">
<input type="button" class="cancel" value="取消">
</div>
</div>
</div>
<div class="part">
<table cellpadding="0" cellspacing="0" class="init">
<tr>
<td width="10%"><div class="user me">我</div></td>
<td width="90%" class="comments">老师你好，周末快乐！</td>
</tr>
<tr>
<td><div class="user reply">秋叶，很长的名字</div></td>
<td class="comments">下午好，秋荷！</td>
</tr>
<tr>
<td width="10%"><div class="user me">我</div></td>
<td width="90%" class="comments">好长不想打字，好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字。</td>
</tr>
<tr>
<td><div class="user reply">秋叶，很长的名字</div></td>
<td class="comments"><b>亲爱的。。。好长不想打字，好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字</b></td>
</tr>
</table>
</div>
</div>
希望能帮助到你^.^
使用表单中的文件域（<input type="file".../>）控件可以上传文件。
打开DreamWeaver，这里使用的版本是CS6，新建一个php文件。
保存到网站目录下，命名为upload.php。
在代码中插入一个表单
对话框中， *** 作留空，方法选择“post”，编码类型输入“multipart/form-data”，名称命名为“upload_form”，其中编码类型必须为“multipart/form-data”。点击确定，产生的代码如下：
<body>
<form action="" method="post" enctype="multipart/form-data" name="upload_form"></form>
</body>
接下来在form中插入一个标签控件、一个文件域控件和一个上传按钮。
结果如下：
<body>
<form action="" method="post" enctype="multipart/form-data" name="upload_form">
<label>选择图片文件</label>
<input name="imgfile" type="file" accept="image/gif, image/jpeg"/>
<input name="upload" type="submit" value="上传" />
</form>
</body>
不同的浏览器，对于文件域控件的显示不同，IE9浏览器和FireFox中的预览效果都要看一下
代码中，重要的是名为imgfile的文件域控件，type属性为“file”，表示这是一个文件域控件。
accept属性表示点击“浏览...”按钮时，d出的打开对话框中的文件类型。accept="image/gif, image/jpeg"表示我们只想在文件打开对话框中显示后缀名为“gif”和“jpg”、“jpeg”的文件。对于此属性，有些浏览器并不支持。比如在IE9中，此属性不起任何作用。在chrome中，此属性起作用。
如果想支持所有的图像文件，accept值可以设置为“image/*”，在chrome中，文件类型显示
好了，html代码就写完了，因为action=""，表示点击上传按钮时，将表单提交给自身，因此，我们还要添加接收表单的处理代码。
代码如下：
<?php
if (isset($_FILES['imgfile'])
&&is_uploaded_file($_FILES['imgfile']['tmp_name']))
{
$imgFile = $_FILES['imgfile']
$imgFileName = $imgFile['name']
$imgType = $imgFile['type']
$imgSize = $imgFile['size']
$imgTmpFile = $imgFile['tmp_name']
move_uploaded_file($imgTmpFile, 'upfile/'.$imgFileName)
$validType = false
$upRes = $imgFile['error']
if ($upRes == 0)
{
if ($imgType == 'image/jpeg'
|| $imgType == 'image/png'
|| $imgType == 'image/gif')
{
$validType = true
}
if ($validType)
{
$strPrompt = sprintf("文件%s上传成功<br>"
. "文件大小: %s字节<br>"
. "<img src='upfile/%s'>"
, $imgFileName, $imgSize, $imgFileName
)
echo $strPrompt
}
}
}
?>
代码分析：
$_FILES是一个数组变量，用于保存上传后的文件信息。
$_FILES['imgfile']表示文件域名称为'imgfile'的控件提交服务器后，上传的文件的信息。
一个上传的文件，有以下属性信息：
'name'： 上传的文件在客户端的名称。
'type'： 文件的 MIME 类型，例如"image/jpeg"。
'size'： 已上传文件的大小，单位为字节。
'tmp_name'：上传时，在服务器端，会把上传的文件保存到一个临时文件夹中，可以通过此属性得到临时文件名。
'error'：文件在上传过程中的错误代码。如果上传成功，此值为0，其它值的意义如下：
1：超过了php.ini中设置的上传文件大小。
2：超过了MAX_FILE_SIZE选项指定的文件大小。
3：文件只有部分被上传。
4：文件未被上传。
5：上传文件大小为0。
代码中首先判断$_FILES['imgfile']变量是否存在，如果存在，并且$_FILES['imgfile']['tmp_name']变量所指文件被上传了，判断error属性，如果属性为0，把上传后的图像从临时文件夹移到upfile文件夹中，显示上传文件的信息，并显示上传后的图像。
如果error值不为0，表示上传失败，显示失败信息。
完成的代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.mobiletrain.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.mobiletrain.org ">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>上传图片文件</title>
</head>
<?php
if (isset($_FILES['imgfile'])
&&is_uploaded_file($_FILES['imgfile']['tmp_name']))
{
$imgFile = $_FILES['imgfile']
$upErr = $imgFile['error']
if ($upErr == 0)
{
$imgType = $imgFile['type']//文件类型。
/* 判断文件类型，这个例子里仅支持jpg和gif类型的图片文件。*/
if ($imgType == 'image/jpeg'
|| $imgType == 'image/gif')
{
$imgFileName = $imgFile['name']
$imgSize = $imgFile['size']
$imgTmpFile = $imgFile['tmp_name']
/* 将文件从临时文件夹移到上传文件夹中。*/
move_uploaded_file($imgTmpFile, 'upfile/'.$imgFileName)
/*显示上传后的文件的信息。*/
$strPrompt = sprintf("文件%s上传成功<br>"
. "文件大小: %s字节<br>"
. "<img src='upfile/%s'>"
, $imgFileName, $imgSize, $imgFileName
)
echo $strPrompt
}
else
{
echo "请选择jpg或gif文件，不支持其它类型的文件。"
}
}
else
{
echo "文件上传失败。<br>"
switch ($upErr)
{
case 1:
echo "超过了php.ini中设置的上传文件大小。"
break
case 2:
echo "超过了MAX_FILE_SIZE选项指定的文件大小。"
break
case 3:
echo "文件只有部分被上传。"
break
case 4:
echo "文件未被上传。"
break
case 5:
echo "上传文件大小为0"
break
}
}
}
else
{
/*显示表单。*/
?>
<body>
<form action="" method="post" enctype="multipart/form-data" name="upload_form">
<label>选择图片文件</label>
<input name="imgfile" type="file" accept="image/gif, image/jpeg"/>
<input name="upload" type="submit" value="上传" />
</form>
</body>
<?php
}
?>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）