Photoshopモックアップから意味のあるHTMLとCSSに移行する最も良い方法は何ですか?


20

私は、一般的に手動のプロセスを使用します。ページで

  1. ルックを、セマンティック要素を把握し、HTMLを構築
  2. スライス私はCSS
  3. を書い
  4. スタートを必要とすると思う画像をアップ
  5. 必要に応じてさまざまなステップを微調整して繰り返します。

良いアプローチやツールがありますか?

10

私はコーディングのかなり自然な方法があります。キーは、文書や記事のようにページを扱うことです。あなたはこのようにそれを考える場合は、次のは、論理的に明確になる:

  1. ページのタイトルは、サイトのタイトルや実際のページタイトルを作るかどうか

    • を見出し、トップレベルであるh1はあなた次第です - 個人的に私はスタックオーバーフローではなくh1について考えています。
  2. ナビゲーションは、コンテンツのテーブルであり、したがって順序付きリスト - あなたにも、ULの上にオールを使用することができます。

  3. セクションヘッダーはh2で、セクション内のセクションはh3sなどです。それらをスタックします。

  4. 可能であれば、引用符と引用符を使用してください。単に「とそれを囲むしないでください。

  5. Bと私は使用しないでください。強い使用し、HTMLをプレゼンテーションマークアップではなく、構造的であるため、EMは。これがある。強いをEM phasisタグを使用する必要がありますどこに単語に重点を置くところ。

  6. <label>フォーム要素を。

  7. 使用<acronym> sおよび<abbr>の可能性が、唯一の最初のインスタンスインチ

  8. 最も簡単なのは、常に、常にの画像に代替テキストを付けます。

  9. 郵便番号、画面コード出力のためのアドレスがない可能性があるHTMLタグがたくさんあります。いくつかのためにHTML Dogを見て、それは私の好きなリファレンスです。

これはほんの少しの指摘ですが、私はより多くのことを考えることができると確信しています。

ああ、チャレンジしたい場合は、まずXHTMLを書いてからCSSを書いてください。 CSSを書くときにHTMLに触れることは許されません。あなたが思っているよりも実際には難しいです(しかし、私はそれが私をより速くしたと分かっています)。

  0

+1 for HTMLDog 22 7月. 102010-07-22 16:41:20

  0

ありがとうございました。 15 9月. 142014-09-15 07:02:15


0

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


1

ショートカットはありませんが、みんな少し違っています。

This tutorial昨日、私のフィードリーダーにポップアップされたのは、最初から最後までプロセスを示していますが、あなたがそれをやったことのない人を助けるかもしれません。

EDIT: image1とfireworksの両方が1日目からかなりサポートされていて、すべてのリリースで意味がよくなりましたが、もっと複雑なデザインそれが何であるかをデザインする手の込んだビットです。これらは手作業で行う必要があります。


0

This pageには、もう少し自動化する方法が示されています。


4

ウェブサイトを構築するとき、私はHTMLを書いている間にデザインを完全に忘れてしまう傾向があります。私はこれを行うので、設計に特有のマークアップは終わらないので、要素の意味的意味に焦点を当てることができます。物事をマークアップする方法

いくつかのポインタ:

  • メニュー - それはメニューがまさにだから、UL(番号なしリスト)要素を使用します。順序のないリスト例:

    #menu li { 
        display: block; 
        float: left; 
    } 
    
  • ロゴ - 代わりimage.ExampleのロゴのためのH1(見出し)要素を使用します:

    <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> 
    

    あなたはこれを行うことができ、水平メニューたい場合

    <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)を使用します。このようにナビゲートすることが理にかなっている場合は、アクセシビリティに関しては優れています。

私はこれが役に立てば幸い:)


3

私は基本的にジョンはありません同じことを行うが、ここではいくつかの他のアイデアです:

  1. Photoshopで利用ガイド(およびそれらにロック)。事前に各ボックス/地域のすべての寸法を把握してください。

  2. 簡単に参照できる情報ファイル(私はtxtファイルを使用しています)にすべての寸法と色の16進数値を集めます。これにより、alt-tab税が減り、Photoshopで色を選択する回数が複数回になります。

  3. すべてのガイドが整ったら、写真とグループ化された要素から始まり、存在するはずのさまざまな背景タイル/画像で終わる画像フォルダにウェブサイト全体をスライスします。 (ヒント:ctrl - レイヤのプレビューをクリックしてそのレイヤのコンテンツを選択します)。フォトショップを使って上の

注:

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

1

これまでの素晴らしいアドバイスに加えて、デザインの印刷版を入手し、赤いペンを使ってすべてのブロック要素をマークすることをお勧めしますデザイナーと30分座って座って、スタティックデザインに合わないユースケースのデザインをどのように構想しているかを話すことができます。

  • さらに多くのテキストがナビゲーションに挿入されるとどうなりますか?
  • この幅は固定ですか、液体ですか?
  • このコンテンツペインは正しい固定高さですか?それは流体の場合は、なぜあなたはそれに繰り返すことができない背景を置いたのですか?
  • 他に接続されている2つの要素を壊すページの下に境界線があります。視覚的には理にかなっていますが、意味的には、私はこれらの要素を収容するためにliを使うことはできません。もっと重要だと思いますか?
  • これはまた、あなたの肘がCSSの深いところまで問題になることを実感していないかもしれない潜在的な問題を発見するのに役立ちます。

    数回の作業を経てから仕事が簡単になるだけでなく、デザイナーは仕事をマークアップするのにもっと強い感覚を覚えるでしょう。なぜならデザイナーの中には、仕事をするために数日のCSS調整が必要です。


    0

    また、「レイヤーコンプ(Layer Comps)」機能について知ることができます。私はボタンの状態を変更するためにこれを使用します。

    1. ノーマル、ホバー、アクティブのレイヤーコンプを作成します。
    2. これらのそれぞれで、その状態に属するエフェクト/カラーオーバーレイと表示レイヤーを設定します。
    3. ウェブ用に保存:各スライスの名前を変更するのが簡単でない限り、各状態の別のフォルダに移動します(そうしないと、ホバーボタンスライスによって通常のスライスが上書きされます)。