html - Photoshop モックアップからセマンティック HTML および CSS に移行するための最良の方法は何ですか?

Question

私は通常、手動プロセスを使用します。

ページを見て、セマンティック要素を把握し、HTML を構築する
必要だと思う画像を切り分ける
CSSを書き始める
必要に応じてさまざまな手順を微調整して繰り返します

より良いアプローチまたはツールを手に入れましたか?

score 10 · Accepted Answer

私はかなり自然なコーディング方法を持っています。重要なのは、ページをドキュメントまたは記事のように扱うことです。このように考えると、次のことが論理的に明確になります。

ページのタイトルは最上位の見出しです
- サイトのタイトルにするか、実際のページのタイトルにするかは、あなた次第です。個人的には、Stack Overflow ではなく About Us を h1 にします。
ナビゲーションは目次であるため、順序付きリストです。ul ではなく ol を使用することもできます。
セクションヘッダーは h2、それらのセクション内のセクションは h3 などです。それらを積み重ねます。
可能な場合は、引用符と引用符を使用してください。"だけで囲わないでください。
b と i を使用しないでください。strong と em を使用します。これは、HTML が表示用のマークアップではなく構造的なためです。単語を強調する場所には、強いタグと強調タグを使用する必要があります。
<label>あなたのフォーム要素。
<acronym>可能であればs とsを使用<abbr>しますが、最初のインスタンスでのみ使用してください。
最も簡単な方法: 常に、常に画像に代替テキストを付けます。
おそらくまだ使っていない HTML タグがたくさんあります - 住所のアドレス、画面コード出力。HTML Dogを参照してください。私のお気に入りのリファレンスです。

これはほんの一部です。もっと考えられると思います。

ああ、挑戦したい場合は、最初に XHTML を書き、次に CSS を書きます。CSS を使用する場合、HTML に触れることはできません。実際には、あなたが思っているよりも難しいです (しかし、私はそれが私をより速くしたことを発見しました)。

score 4 · Accepted Answer

Web サイトを構築するとき、HTML を書いている間はデザインのことを完全に忘れようとする傾向があります。これを行うのは、デザイン固有のマークアップにならないようにし、要素のセマンティックな意味に集中できるようにするためです。

物事をマークアップする方法のいくつかの指針：

menu - UL (順序付けられていないリスト) 要素を使用します。これがまさにメニューです。選択肢の順序付けられていないリスト。例：
```
<ul id="menu">
    <li id="home"><a href="/" title="Go to Homepage">Home</a></li>
    <li id="about"><a href="/about" title="More about us">About</a></li>
</ul>
```
水平メニューが必要な場合は、次のようにします。
```
#menu li {
    display: block;
    float: left;
}
```
ロゴ - 画像の代わりにロゴに H1 (見出し) 要素を使用します。例:
```
<div id="header">
    <h1>My website</h1>
</div>
```
CSS (グラフィカルな項目を含むメニューが必要な場合は、上記のメニューに同じ手法を適用できます):
```
#header h1 {
    display: block;
    text-indent: -9999em;
    width: 200px;
    height: 100px;
    background: transparent url(images/logo.png) no-repeat;
}
```
ID とクラス - ID を使用して、インスタンスが 1 つしかない要素を識別します。複数のインスタンスを取得した要素を識別するためにクラスを使用します。
テキストブラウザ (lynx など) を使用します。このようにナビゲートすることが理にかなっている場合、アクセシビリティに関してはうまくいっています。

これが役立つことを願っています:)

score 3 · Accepted Answer

私は基本的にジョンと同じことをしていますが、他にもいくつかのアイデアがあります。

Photoshop でガイドを使用します (そしてそれらにロックします)。事前に各ボックス/領域のすべての寸法を把握してください。
すべての寸法と色の 16 進値を、簡単に参照できる情報ファイル (私は txt ファイルを使用) に収集します。これにより、代替タブの負担が軽減され、Photoshop で何度も色を選択できるようになります。
すべてのガイドを配置したら、Web サイト全体をスライスして画像フォルダーに入れます。写真とグループ化された要素から始めて、存在する場合はさまざまな背景タイル/画像で終わります。(ヒント:ctrlレイヤーのプレビューをクリックして、そのレイヤーのコンテンツを選択します)。

Photoshop の使用に関する注意事項:

ガイドまたはグリッドを使用します。
関連情報についてはメモ機能を使用してください
同様の要素には常にレイヤーグループを使用してください。ワンクリックでリージョン全体をオフにできる必要があります。すべての「ヘッダー」コンテンツを 1 つのレイヤーグループに入れます。
常にレイヤーに名前を付けます。
各ページテンプレートを 1 つの PSD ファイルに配置し、ネストされたレイヤーグループを使用してそれらを整理できます。このように、サイトの各ページテンプレートにすべてのガイドとメモを設定する必要はありません。

score 1 · Accepted Answer

これまでの優れたアドバイスに加えて、赤いペンを使用してデザインのすべてのブロック要素をマークアップして、デザインの印刷版を入手することをお勧めします。設計者と30分ほど座って、静的な設計に適合しないユースケースで設計が機能することをどのように想定しているかについて話し合うことができます。

より多くのテキストがナビゲーションに配置されるとどうなりますか？
この幅は固定ですか、それとも流動的ですか？
このコンテンツペインは正しい固定の高さですか、それとも流動的ですか？流動的だとしたら、なぜ繰り返しできない背景をその上に置いたのですか？
ページの下に伸びる境界線があり、他の方法で接続されている2つの要素を分割しています。視覚的には理にかなっていますが、意味的には、これらの要素の両方を格納するためにliを使用することはできません。何がもっと重要だと思いますか？

また、肘がcssの奥深くまで問題になることに気づかなかった可能性のある潜在的な問題を見つけるのにも役立ちます。

数回行うと仕事が楽になるだけでなく、デザイナーは自分の作品のマークアップに何が関係しているかをより強く理解できるようになります-一部のデザイナーは、視覚的に非常にシンプルに見えるものが数秒かかる理由を理解するのに本当に苦労しています仕事をするためにCSSを微調整する日。

score 1 · Accepted Answer

近道はありません:)しかし、誰もがわずかに異なる働きをします。

昨日フィードリーダーに表示されたこのチュートリアルは、最初から最後までのプロセスを示しており、これまでに行ったことがない人を助けるかもしれませんが、あなたは古い手であるため、独自の方法を合理化するだけです.

編集: listapart リンクは確かに、imageready と花火の両方が初日からかなり適切にサポートされている「フラット」デザインに対してより自動化されており、リリースごとにより良くなり、よりセマンティックになっていますが、より複雑なデザインの場合、それは厄介なビットですデザインをそのままにし、これらは手作業で行う必要があります。

score 0 · Accepted Answer

私の知っているデザイナーの中には、通常 Illustrator を使用してデザイン要素を作成している人もいます。

score 0 · Accepted Answer

0

このページでは、もう少し自動化する方法を示します。

于 2008-08-21T09:30:34.890 に答える

score 0 · Accepted Answer

また、「レイヤーカンプ」機能についても知っておきましょう。ボタンの状態を変更するためにこれを使用します。

通常、ホバー、およびアクティブのレイヤーカンプを作成します。
これらのそれぞれで、その状態に属するエフェクト/カラーオーバーレイと可視レイヤーを設定します。
Web 用に保存: 各スライスの名前を変更する方が簡単でない限り、状態ごとに異なるフォルダーに移動します (そうしないと、ホバーボタンスライスが通常のスライスを上書きします)。

html - Photoshop モックアップからセマンティック HTML および CSS に移行するための最良の方法は何ですか?

8 に答える 8

Related

Reference