设为首页收藏本站
开启辅助访问
搜索
快捷导航
论坛 › 学院 › 平面设计学院 › 如何在Dreamweaver网页设计图片上插入文字 ...
发新帖
返回列表
3 821
电梯直达  跳转到指定楼层

[提问] 如何在Dreamweaver网页设计图片上插入文字

青年创意|注册会员 |勤币 173 |学币 10
发表于 2015-11-19 09:45 | 复制链接 | 打印 | 上一主题 | 下一主题
网页美工设计入门详解 - 第三节 网页制作流程
怎么在DW图片上插入文字

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有帐号？立即注册

x
举报 使用道具
| 回复

共3个回复 最后回复于 2015-11-19 18:07

xm10421396
金牌会员
勤币 8789   学币 0  
沙发
发表于 2015-11-19 17:05:53 | 只看该作者
第一可以把图片设为背景，这个方法如果你觉得不好用的话建议网页最好还是用表格做，这样便于排版和处理，图片就可以设为那个单元格的背景就行
举报 使用道具
回复 支持 反对
yuanxi52028
注册会员
勤币 614   学币 0  
板凳
发表于 2015-11-19 18:00:02 | 只看该作者
有两种方法可以实现
第一种
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
#box01 {
        width:735px;/* box01的宽 */
        height:210px;/* box01的高 */
        position:relative;/* box01相对定位 */
}
#box02 {
        width:auto;/* box02的宽 */
        height:auto;/* box03的高 */
        overflow:hidden;/* box02里的内容溢出隐藏 */
        position:absolute;/* box02绝对定位 */
        top:50px;/* 定位在距离顶部50像素 */
        left:400px;/* 定们在距离左边400像素 */
        font-size:14px;/* box02里字体的大小 */
        color:#ffffff;/* box02里字体的颜色 */
        font-weight:bold;/* box02里的字体是粗体 */
}
-->
</style></head>

<body>
<div id="box01">
    <img src="http://a1.att.hudong.com/56/67/01300542445633139736678491002.jpg" width="735" height="210" />
    <div id="box02">你要写的文字</div>
</div>
</body>
</html>


重点是用了到定位，图片在box01里面，box02是浮在box01之上的，定位在你想要放的位置。
举报 使用道具
回复 支持 反对
yuanxi52028
注册会员
勤币 614   学币 0  
地板
发表于 2015-11-19 18:07:12 | 只看该作者
本帖最后由 yuanxi52028 于 2015-11-19 18:09 编辑

第二种

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
#box01 {
        width:335px;/* box01的宽 实际是735像素 因为要减掉padding（内边距）所撑开的距离400 */
        height:160px;/* box01的高 实际是21像素 因为要减掉padding（内边距）所撑开的距50 */
        background:url(图片地址);/* box01里的背景图片 */
        font-size:14px;/* box01里字体的大小 */
        color:#ffffff;/* box01里字体的颜色 */
        font-weight:bold;/* box01里的字体是粗体 */
        padding:50px 0px 0px 400px;/* box01里的内容边距 上 右 下 左 控制内容显示的位置 注意这里有改动 那么box01的宽高也要相对应调整  */
}
-->
</style></head>

<body>
<div id="box01">
你要写的文字
</div>
</body>
</html>


重点是用到背景图片和内边距

两种方法都可以使用，一般是会根据整个网页的需要来选择哪一种方法的。
举报 使用道具
回复 支持 反对
发新帖
返回列表
B Color Image Link Quote Code Smilies
高级模式
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表