-1

初めての Web サイトを開始しようとしています。Photoshop でレイアウトを作成しましたが、グラフィック要素を適切な「div」に配置する方法がわかりません。

思いついたレイアウトはこちら

ここに画像の説明を入力

私がやろうとしているのは、まずヘッダーで、ロゴを中央に置いたまま、色付きの線 (スレッド) をブラウザーの幅の 100% 拡大することです。私はこれを試してみましたが、これらのスレッドの幅全体を 1 つの .png ファイル (画像サイズは約 100px x 1200px) にしましたが、これには問題があるようです。

ヘッダーの下にある「コンテンツ領域」のグラフィック (内向きのボックスのようなもの) を使用して、ボックスの端の整合性を維持したいと考えていますが、高さはコンテンツの量に応じて時々変動します. どうすればこの権利を行使できますか? ボックスを背景画像として高さ 100% のコンテナ div を作成しようとしましたが、画像が拡大縮小されないようです。

4

3 に答える 3

3

さて、あなたのレイアウトがどれだけうまくできているかに基づいて、私はあなたがすでにすべてをレイヤーに分割していると思います. していない場合は、そうしてください。

次に、最近では通常、繰り返しパターンを使用していることに注意してください。以前は縮小された巨大な画像を使用していましたが、それは大量のデータを使用し、デザイン パターンがより単純化されたため、パターンのみを使用しています。

すべてのテキストは CSS で簡単に作成できるため、無視します。

次に、扱っている 1 つの要素を除くすべてのレイヤーを非表示にして、[ファイル] > [Web 用に保存] に移動します。透過性を考慮したファイル形式を選択してください。デザインを正確に再現したい場合は、おそらくかなりの数の要素が必要になるでしょう: ロゴ、ビーズ、幅 5 ピクセル程度の紐のストリップ、水平方向の境界線、垂直方向の境界線、および別の画像あなたの国境の隅々まで。1 つの画像を使用して CSS3 で回転させることもできますが、これは広くサポートされていません。

次に、HTML と CSS について学習します。真剣に、噛むことができる以上に噛まないでください。

その方法がわかったら、サイトを複数の div (ヘッダー、ナビゲーション、本文) に分けます。

ヘッダーの場合、背景を小さなストリップに設定し、背景の繰り返しを x に設定します。

ヘッダー内にロゴを配置し、余白を「0 auto」に設定します。これで中心になります。

繰り返しますが、テキストには CSS を使用してください。

最後に、パースペクティブを使った体の境界線...これは少し難しいです。3 つの div を作成し、サイド + コーナーの代わりにトップ、サイド、ボディを使用できます。または、それに固執して 4 つの div を作成することもできます。各エッジに 1 つ、各コーナーに 1 つです。

ただし、境界線には CSS を使用するだけです。私が言ったことを適用するのは少し難しく、うまくタイル化するには照明を削除する必要があります。CSS3 を使用すると、押し出しを行いたい場合にクールな影を設定できます。

このようにする必要はないことに注意してください。これは私が行う方法です。

于 2013-08-06T02:18:14.667 に答える
1

私はあなたと一緒にこれを一歩一歩進んでいきます。まず、Photoshop を異なるレイヤーに分離する必要があります。Photoshop ファイルのレイヤーやパーツを切り出すときは、画像をできるだけ小さくしてください。たとえば、色付きの線は 100 ピクセル x 1200 ピクセルの画像である必要はありません。100px x 10px の画像を繰り返すことができます。

ヘッダーでロゴとスレッド/色付きの線を組み合わせることができます。

<header>
  <img src="logo.png" />
</header>

ロゴは<img>タグに入り、スレッド (繰り返し 100px x 10px の画像に切り詰めたもの) はヘッダーの背景に入ります。CSS は次のようになります。

header {
  background: url('colored_line_threads.png') repeat-x center;
  text-align: center;
  width: 100%;
}

このbackground-repeatプロパティrepeat-xは、色付きの線が水平軸に沿ってのみ繰り返されるようにします。このbackground-positionプロパティcenterにより、線が<header>コンテナの垂直方向の中央に配置されます。

コンテンツの周囲の斜めの境界線については、Photoshop ファイルからいくつかの戦略的な画像を切り取る必要があります。四隅すべての画像、上下の水平境界線の画像、左右の垂直境界線の画像を作成することをお勧めします。次に、この問題の HTML/CSS コンポーネントがあります。これを行うにはもっと良い方法があると確信していますがdiv、国境の一部に .

<div class="content">
  <div class="border">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>

  <div class="corner">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>

  <p>Some text here...</p>
</div>

ここでは、内部に<div>コンテナーを含む 2 つのコンテナーを作成しました。1 つは 4 つのコーナー用で、もう 1 つは 4 つの境界用です。<div>ボーダーの場合、CSS は次のようになります。

.border div {
  position: absolute;
}

.border div:nth-child(2n) {
  background: url('border_horizontal.png');
  width: 100%; height: 50px;
}

.border div:nth-child(2n+1) {
  background: url('border_vertical.png');
    width: 50px; height: 100%;
}

.border div:nth-child(1) {
  top: 0px; left: -15px;
  background-position: 0px 0px;
}

.border div:nth-child(2) {
  top: -15px; left: 0px;
  background-position: 0px 0px;
}

.border div:nth-child(3) {
  top: 0px; right: -15px;
  background-position: 50px 0px;
}

.border div:nth-child(4) {
  bottom: -15px; left: 0px;
  background-position: 0px 50px;
}

ボーダー コンテナー内のそれぞれdivは、コンテンツ コンテナーのボーダーを表し、繰り返し画像を使用してボーダーを表示しています。コーナーについても同じで、div各コーナーに 1 つずつ:

.corner div {
  position: absolute;
  background-image: url('corners.png');
  width: 50px; height: 50px;
}

.corner div:nth-child(1) {
  top: -15px; left: -15px;
  background-position: 0px 0px;
}

.corner div:nth-child(2) {
  top: -15px; right: -15px;
  background-position: 50px 0px;
}

.corner div:nth-child(3) {
  bottom: -15px; left: -15px;
  background-position: 0px 50px;
}

.corner div:nth-child(4) {
  bottom: -15px; right: -15px;
  background-position: 50px 50px;
}

コードの残りの部分は、この CodePen ( http://codepen.io/phantomesse/pen/safcK ) で確認して試すことができます。

これは、HTML と CSS を構成する 1 つの方法にすぎません。これを行うには多くの方法があります (おそらくもっと良い方法もあります) ので、練習を続けてください!

于 2013-08-06T04:47:57.300 に答える