0

Photoshop でレイアウトを作成してエクスポートしました。結果はこちら。このレイアウトの上にテキストを追加するにはどうすればよいですか? 私のタグはレイアウトの上ではなく下に追加していますが、WYSIWYG ツールは特に優れたものではありません。

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の背景を画像に設定することで、その上に書き込みを行うことができます。imgタグの代わりに div の背景画像を設定することで、同じことが実現できます。

于 2013-06-14T00:20:19.040 に答える