0

我在 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>
4

2 回答 2

1

显然已经声明这不是要采用的方法，在任何其他情况下，您绝对应该使用 HTML 和 CSS 对其进行编码，但考虑到这是一个类并且别无选择，这里有一个答案：

通过<img src>标签添加图像时，您基本上是在为您的布局创建另一个 div（或框），这意味着您不能轻易地在其上放置任何东西。

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

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

基本上，您所做的是将td's 背景设置为图像，这样您就可以在其上书写。同样可以通过设置 div 的背景图像而不是img标签来实现。

于 2013-06-14T00:20:19.040 回答
0

永远不要使用诸如将布局导出到 html 之类的东西，因为它会创建一个非常混乱和错误的结构 - 在这个示例中，您将所有内容都放在表格中，而表格应该只用于表格数据。

如果您计划将来制作更多网站，您将通过学习 html 和 css 节省大量时间。互联网上到处都是免费的资源、文章、视频等。

于 2013-06-13T21:59:30.970 回答