本日のチュートリアルでは、Div+CSSを使用してPSDページをHTMLページにカットする方法を教えてくれます。この種のチュートリアルはこのサイトではほとんど行われておらず、それらのほとんどは比較的断片的です。将来的には、この種のチュートリアルをゆっくりと公開して翻訳します。
最初に効果を見てください
下の写真はレンダリングです。それを切り取った後、頭と底がより広くなる可能性があります...
新しいフォルダーを作成します
まず、コンピューターにフォルダーを作成します。私はそれをZmoolと名付けました。次に、フォルダーに新しいフォルダー画像を作成し、Webサイトのすべての画像を配置します。次に、コードエディター（DreamWeaver）を開き、ルートディレクトリでindex.htmlという名前のHTMLファイルを作成します。これは、ホームページテンプレートです。ここで、新しいCSSファイルを作成し、style.cssファイルに名前を付けます。下の図に示すように：
index.htmlファイルを開きます。ヘッドタグの上部で、スタイルシート（style.css）へのリンクを追加します。次のコードを使用できます。
<link href = style.css rel = styleSheet type = text /css />
ヘッダーコードは次のとおりです。
<！doctype html public - // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> <hhtml xmlns = http：//www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = utf-8/> <title> Modern Design Studio </title> <link href = style.css rel = styleSheet type = text/css/> </head> <body> </body> </html>
HTML構造を作成します
次に、HTMLファイル構造を設定します。以下のような3つのセクション（タイトル、コンテンツ、フッター）を設定します。
<！doctype html public - // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> <hhtml xmlns = http：//www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = utf-8/> <title> untitled document </title> <link rel = styleSheet type = text/css href = style.css/> </head> <body> <body> <div id = header> </div> div = div = content> </div> <div = footer> </div> </html> <
背景を切断します
PSDファイルには多くのテクスチャ効果が含まれています。これらすべてを切り取り、Divページ効果をデザイン効果と一致させるために、コードを使用してWebページに追加する必要があります。
<body> <div id = header> <div id = container> </div> </div> <div id = content> <div id = container> </div> </div> <div = footer> <div id = container> </div> </body> </body>
バックグラウンドレイヤーを除いて、Photoshopで元々設計されたレイヤーを開き、非表示にします。
次に、スライスツールを使用して、背景を選択し、WebページWeb形式（Alt + Shift + Ctrl + S）を保存します。次に、保存された画像フォルダーファイルはbackground.jpgという名前です。
背景スタイルを設定します
style.cssファイルを開き、基本スタイル、バックグラウンドスタイル、メインパーツの幅を次のように設定します。
* {マージン：0px;パディング：0px;} body {background：url（images/background.jpg）;}＃container {margin：auto;幅：960px;}頭を切ります
Photoshopに戻り、ヘッドの背景を除き、いわゆるレイヤーを非表示にし、同じ方法を使用してヘッドの背景画像をWeb形式にカットし、ファイル名をhead.jpgとして保存します。
ヘッドバックグラウンドコードを編集します
style.cssファイルで次のコードを編集します。
#header {background：url（images/header.jpg）; height：124px;}ヘッドロゴをカットします
この時点で、ロゴ層をカットし、背景層を含むすべてのレイヤーを非表示にします。 logo.pngとして保存するために、上記と同じ方法としてロゴ層をカットします。注：PNG形式の画像として保存します。
ページにロゴを追加するために追加します
htmlに戻り、次のコードを追加します<div id = logo>…。</div> #header #containerに追加します。
<div id = header> <div id = container> <div id = logo> <a href =＃> <img src = image/logo.png> </a> </div> </div> </div>
次に、以下のstyle.cssファイルに切り替えて、#Logoスタイルを書きます。
#logo {margin-top：20px; border：none;}ナビゲーションコードを編集します
以下はページのコードです。ヘッダーには、ロゴとナビゲーションの2つの部分が含まれています。
<div id = header> <div id = container> <div id = logo> <a href =＃> <img src = image/logo.png> </a> </div> <ul> <li> <a href =＃> <li> <a href =＃> blog </a> </li> <li> <a href =＃>連絡先</a> </li> </div> </div>
ナビゲーションスタイルは次のとおりです。
次に、CSSテーブルにナビゲーションスタイルを追加します〜、ul、li、およびリンクをスタイルします。
#header li {color：＃959595; list-style：none; float：float：left; margin-right：20px; font-family：myriad pro、arial; font-weight：bold; font-size：24px;} ul {float：right; margin-top：-40px;}＃header li A：hover {background：＃202020; color：＃d2d2d2; -moz-border-radius：5px; -khtml-border-radius：5px; -webkit-border-radius：5px;}今、中央の部分を作ります
次の図に示すように、ページコンテンツの中央部分に2つのDIVを追加します。
<div id = content> <div id = container> <div id = foutid> </div> <div id = paragraphs> </div> </div> </div>
Photoshop PSDページに切り替え、中央部を切り取り、fouded.jpgに名前を付けます。次の図：
次のコードをHTMLページに追加し、テキストは紹介します。
<div id = content> <div id = container> <div id = foutid> <a href =＃>その他のプロジェクト</a> <p> <p> <pan>ポートフォリオプロジェクト、2010年1月5日</span>クリーンで素敵なポートフォリオデザインを作成したかったことはありますか？このチュートリアルでは、クリーンブルーポートフォリオレイアウトを設計する方法を紹介します。清潔で素敵なポートフォリオのデザインを作成したいと思ったことはありますか？このチュートリアルでは、Adobe Photoshopでクリーンブルーポートフォリオレイアウトを設計する方法を紹介します。
PSDファイルで、他のいわゆるレイヤーを非表示にし、ボタンレイヤーパーツのみを残し、ボタンパーツを切り取り、PNG形式を保存し、[ボタン]ボタンを名前を付けます。
次に、これらの写真をページに追加し、CSSファイルページに切り替えて、バックグラウンドスタイルとボタンスタイルを含む次のコードを追加します。
#featured {background：url（images/foutid.jpg）no-repeat; height：381px; margin-top：30px; margin-left：80px;}＃fouder A {background：url（images/button.png）; height：30px; width：124px; text-indent：-9999px; position：aspolute; magne-top：330px; margin-left：180px;}次に、いくつかのスタイルのDummyTextを追加しましょう：
.dummyText {color：＃d2d2d2; width：245px; margin-top：150px; position：aspolute; font-family：arial、helvetica、sans-serif; font-size：12px; line-height：180％; margin-left：290px;} span {font-size：16px; color：＃191919; font-weight：bold;}次のカテゴリの紹介セクションを表示するために写真を追加するために以下が追加されます
ページのコード部分は次のとおりです。
<div id = paragraphs> <p> <span>美しい</span> webdesignfanは、Webデザイン、Photoshop、Freebies、およびチュートリアルに関するデザイン関連のブログです。 Webデザイナーと開発者専用の有用な情報を公開しています。ここでは、ベクター、WordPressテーマ、多くのインスピレーションなどの無料のリソースを見つけることができます。 </p> <p> <span>効果的</span> webdesignfanは、Webデザイン、Photoshop、景品、チュートリアルに関するデザイン関連のブログです。 Webデザイナーと開発者専用の有用な情報を公開しています。ここでは、ベクター、WordPressテーマ、多くのインスピレーションなどの無料のリソースを見つけることができます。 </p> <p> <span> functional </span> webdesignfanは、Webデザイン、Photoshop、景品、チュートリアルに関するデザイン関連のブログです。 Webデザイナーと開発者専用の有用な情報を公開しています。ここでは、ベクター、WordPressテーマ、多くのインスピレーションなどの無料のリソースを見つけることができます。 </p> </div>
私たちの中央部のコンテンツは次のようになります。
<div id = content> <div id = container> <div id = foutid> <a href =＃>その他のプロジェクト</a> <p> <p> <pan>ポートフォリオプロジェクト、2010年1月5日</span>クリーンで素敵なポートフォリオデザインを作成したかったことはありますか？このチュートリアルでは、クリーンブルーポートフォリオレイアウトを設計する方法を紹介します。清潔で素敵なポートフォリオのデザインを作成したいと思ったことはありますか？このチュートリアルでは、Adobe Photoshopでクリーンブルーポートフォリオレイアウトを設計する方法を紹介します。 Webデザイナーと開発者専用の有用な情報を公開しています。ここでは、ベクター、WordPressテーマ、多くのインスピレーションなどの無料のリソースを見つけることができます。 </p> <p> <span>効果的</span> webdesignfanは、Webデザイン、Photoshop、景品、チュートリアルに関するデザイン関連のブログです。 Webデザイナーと開発者専用の有用な情報を公開しています。ここでは、ベクター、WordPressテーマ、多くのインスピレーションなどの無料のリソースを見つけることができます。 </p> <p> <span> functional </span> webdesignfanは、Webデザイン、Photoshop、景品、チュートリアルに関するデザイン関連のブログです。 Webデザイナーと開発者専用の有用な情報を公開しています。ここでは、ベクター、WordPressテーマ、多くのインスピレーションなどの無料のリソースを見つけることができます。 </p> </div> </div> </div>
CSSファイルに移動して、次のコードを追加します。
#paragraphs span {font-family：myriad pro、helvetica、sans-serif; font-size：22px; font-weight：600; lette-facing：-2px;}＃paragraphs {margin-left：80px; font-family：arial、helbetica、 sans-serif; color：＃191919; font-size：12px; margin-top：15px;}。パラグラフ{width：250px; margin-left：15px; float：left;}これは私たちがこれまでに行ったことです：
ウェブサイトの下部は以下に処理されます
その部分が終了したので、フッターの作成を開始します。
まず、PSDファイルで、フッターとフッターテクスチャレイヤーを除く他のレイヤーを非表示にし、フッターフォルダーをフッター.jpgとしてスライスして保存します。
次に、もう一度カットして、ボタンと鳥のグラフィックをカットします。それはそれぞれfollow.pngとbird.jpgをフォローします。
ボトムコードを編集します
ボトムフッターには、リンク付きの鳥のテキストと写真が含まれています。
したがって、次のコードをHTMLページに追加します。
<div id = footer> <div id = container> <p> 2010？架空のデザインスタジオ。 Webdesignfanによるデザイン
次に、次のように下部にあるフッタースタイルコードを編集します。
＃footer {background：url（images/footer.jpg）; height：71px; margin-top：191px;}＃footer p {font-family：arial、helvetica、sans-serif; font-size：12px; color：＃959595; postion：boset; massent-top：30px;}＃footer A {background：url（images/follof.png）; text-indent：-9999px; position：aspolute：aspolute：height：27px; width：124px; margin-left：730px; margin-top：30px;}フッターの背景としてfooter.jpgを使用し、テキストスタイルを追加します。
下部の鳥の絵へのリンクでは、以前に同じ方法を使用して、浮動効果を使用して配置しました。
最終効果
ファイルダウンロード（0,7 MB）
今でも終わった。あなたがそれを理解しているかどうかはわかりません。理解していない場合は、メッセージを残してください。あなたがそれを理解していないなら、私はそれをもう一度追加して変更します、ハハ〜