Question

我在Photoshop中创建并导出了一个布局;结果在这里。我现在如何在此布局上添加文本？我的标签是将它添加到布局下面而不是它上面，而所见即所得的工具并不是特别棒。

ETA：我知道从Photoshop中这样导出并不理想。但是，课程作业需要它。

<!DOCTYPE HTML>
<html>
<head>
<title>DarkLayout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<style>
div.text {
width:250px;
padding:269px;
border:0px;
margin:10px;
color: #39376f;
opacity: 0.5; 
}

p{
    font-family:"Letter Gothic Std Bold";
    font-size: 18 pt;
    color: #39376f;
}
</style>

</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (DarkLayout.psd) -->
<table id="Table_01" width="955" height="600" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="4">
            <img src="images/DarkLayout_01.gif" width="955" height="120" alt=""></td>
    </tr>
    <tr>
        <td rowspan="10">
            <img src="images/DarkLayout_02.gif" width="38" height="480" alt=""></td>
        <td colspan="2">
            <a href="#"><img src="images/DarkLayout_03.gif" width="166" height="66" alt=""></a></td>
        <td rowspan="10">
            <img src="images/DarkLayout_04.gif" width="751" height="480" alt=""></td>
    </tr>
    <div.text>
<p> Here is some demo font.</p></div.text>
    <tr>
        <td colspan="2">
            <img src="images/DarkLayout_05.gif" width="166" height="30" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <a href="#"><img src="images/DarkLayout_06.gif" width="166" height="66" alt=""></a></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="images/DarkLayout_07.gif" width="166" height="27" alt=""></td>
    </tr>
    <tr>
        <td>
            <a href="#"><img src="images/DarkLayout_08.gif" width="164" height="66" alt=""></a></td>
        <td rowspan="4">
            <img src="images/DarkLayout_09.gif"width="2" height="176" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/DarkLayout_10.gif" width="164" height="22" alt=""></td>
    </tr>
    <tr>
        <td>
            <a href="#"><img src="images/DarkLayout_11.gif" width="164" height="66" alt=""></a></td>
    </tr>
    <tr>
        <td>
            <img src="images/DarkLayout_12.gif"width="164" height="22" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <a href="#"><img src="images/DarkLayout_13.gif" width="166" height="66" alt=""></a></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="images/DarkLayout_14.gif" width="166" height="49" alt=""></td>
    </tr>
</table>
<!-- End Save for Web Slices -->

</body>
</html>

Answer 1

显然已经说过这不是方法，在任何其他情况下你都应该使用HTML和CSS编写它，但考虑到这是一个类，没有选择，这里是一个答案：< / p>

通过<img src>标记添加图片时，您基本上会在布局中创建另一个div（或框），这意味着您无法轻松地在其上放置任何内容。

如果您实际上可以使用Photoshop后使用的代码，我会将图像作为背景图像添加到您的td标记中，如下所示：

<td rowspan="10" background="images/DarkLayout_04.gif" width="" height=""><p> Here is some demo font.</p></td>

基本上，您正在做的是将td的背景设置为图像，并允许您在其上面书写。通过设置div的背景图像而不是img标记，可以实现同样的效果。

Answer 2

永远不要将导出布局等内容用于html，因为它会创建一个非常混乱和错误的结构 - 在这个例子中，表格中包含所有内容，而表格应仅用于表格数据。

如果您计划将来制作更多网站，通过学习HTML和CSS可以节省大量时间。互联网上充满了免费的资源，文章，视频等。

将文本添加到Photoshop创建的布局

2 个答案: