個人 Web サイトの構築方法を段階的に教えます - DIV と CSS_html/css_WEB-ITnose の秘密

この記事では、静的 Web サイトのデザインから再構築、設置までの全プロセスについて説明します。また、痛いデザイナーのユーモラスな日常生活についても説明します。 。 。

おいおいおいおいおい～～～

また突然現れた、大きなサプライズに驚いたのか、ああ、怒った顔で行ったら、とんでもない状況だった、咳咳咳、わかってる、私もわかってる あなたが貴重な道徳的誠実さを私に提供してから長い時間が経ちましたね?

ああ、それでは早速、世界中のヒーローと女の子の皆さん、本当に私に驚かないんですか？ああ、はははははははははは~~~ああ~~~私の顔を平手打ちしないで~~~

さて、このような休息期間を経て、引き続き Dongxie DIV についての噂話をさせてください。 West Poison CSS 部屋にあるあの卑猥なもの。さあ、ドアを閉めて、犬を放してください、いいえ、DW を放してください。 。 。

さて、前回こんな変なものを作った時は、惨めな気持ちになりませんでしたか？でも、そんなことはどうでもいいので、今回は彼女を「ふっくら」させてみましょう。下の子供用の靴で曲がっていると思うものはありますか？

前回確立しました。 。 。良い。 。 。私が数えるのを待ってください。 。 。ああ、9 つのエリアがあるかもしれませんが、そのうちの 678 か所を構築したかもしれませんが、これらの詳細は気にせず、独自の設計に従ってください。

次に、前述の領域に応じて、これらの DIV に設計されたものを配置する必要があります。いわゆる切り絵のように、江湖人の間で最高の武術秘伝書として知られる「向日葵コレクション」です。 、切り込みが深いほど、カンフーはよりクライマックスになります、私は自分自身をたくさん表現したいです、ふふふ。

絵をカットする前に、まず、このカンフーにもグレードがあることを言わなければなりません。低レベルの部分は「スピードカット」と呼ばれ、上級部分は「カービングマジックハン​​ド」と呼ばれます。難易度は同じではなく、習得すれば自然とスキルも上がりますので、世界中の友人の皆さんは慎重に選んでいただければと思います。

独特のリーダースタイルはありますか？ ふふふ、ふふふ

さて、まずは低レベルから始めましょう、このシンプルな内容はあまりサクサクしていません。

最初に私のデザインドラフトを投稿します。

デザインする際に各領域にどのように実装するかを考えてWebページを作成することで、品質を確保しながらできるだけシンプルに実装できることがわかります。デザイン。 もちろん、初心者にとって、これは混乱しているように見えるかもしれませんが、これは非常に重要です。覚えておいてください。これが、Shenma のデザイナーがこれらのゴースト コードを学習する必要がある理由でもあります。

さて、デザインドラフトを開いて、「すべてをすばやくカット」してみましょう。

PS で、「スライス ツール」を選択し、カット アイコンと同じグループに置きます

スライス ツールを使用して、上で分離された領域を切り取ります。スライスが交差したり隙間ができたりすることはできないことに注意してください。 。スライス時にサイズが合わない場合は、変形ツールを使用する場合と同様の方法でいつでもサイズを変更できます。

スライスが完了して調整したい場合は、スライス選択ツールを使用して任意のスライスを再選択し、調整することができます この文はお経を唱えているようには聞こえません。 。 。

次に、ショートカット キーについては説明しませんが、Web で使用される形式で保存します。形式として JPG を選択し、サイズを変更しないで、[保存] をクリックし、ファイルに好きな名前を付け、形式として画像のみを選択し、デフォルト設定、すべてのスライスを選択します。

ここには、HTML と画像の形式を選択することができますが、それはあまりにも低すぎるので、あなたが信じるかどうかはわかりません。そうであろうとなかろうと、私はそれを信じます。

保存後、保存したフォルダーを開きます。PSは画像フォルダーを生成します。実際には、Webサイトで写真が保存されているフォルダーはこの名前です。画像フォルダーを開くと、カットされた写真が表示されます。

次に、それぞれに名前を付けます。簡単な点は 1234 です。より複雑な点は、SEO と保守性を考慮して、名前をセマンティックにする必要があります。たとえば、LOGO の場合は、home_top_logo という名前を付けます。こうすることで、他の場所で使用されている異なるサイズのロゴがこのロゴと混同されなくなります。

名前を付けたら、画像フォルダー全体を Web ページ ファイルの場所にコピーします。これは非常に重要です。忘れないでください。

それでは、DW に戻りましょう。HTML では、画像を挿入する方法が 2 つあります。1 つ目は、ページに直接挿入する方法です。

img タグを見たことがありますか? これは、画像を直接挿入することを意味します。src の後の引用符は、画像ファイルの相対的な位置を表します。 Web ページ ファイルと同じレベルのフォルダーに 1.jpg が含まれています。相対的な位置を理解するにはある程度の練習が必要ですが、確実に理解するのは難しくありません。

相対位置に加えて、Baidu で画像を右クリックすると、そこにある URL の長いリストが表示され、それをコピーして相対アドレスを置き換えることができます。これは使用しないでください、これについてはまだ掘り下げないでください。

さて、最初のカット画像を挿入しました。DW で F12 を使用してプレビューします。 。 。

なんてことだ、これは一体何だ? ブラウザを縮小すると、なぜこんなに非倫理的になるのか?

ねえ、最初に理由を掘り下げるのはやめましょう。ここで重要なことは、これが大丈夫かどうかをみんなに理解してもらうことです。

画像を挿入する 2 番目の方法を使用する必要があります。CSS で背景として画像を挿入します。何かを挿入するとき、私はいつも赤面しています、ああ、なぜ私は赤面しているのですか？ ? ?

さて、CSSと言えば、まずは前回のコードをおさらいしましょう。

以前、ボックスと呼ばれる各 DIV に同じ名前を追加し、その名前に属性を付けました。ははは、ゲーム内の名前をよく覚えていました。次に、まずボックスの名前に属性を追加する必要があります。シェンマについては、上級章で独自の魔法の用途があります。

これは、カバーするけどカバーしないという意味です。

ああ、あまり考えすぎずにコードを書き続けてください。

さて、各 DIV に独自の名前を付ける必要があります

DIV の名前またはシリアル番号に従って、これらの新しい属性を書き込みます。私の場合は 9 つのパーティションがあるので、9 つの名前を書き込み、属性を追加しました。わかりやすくするために、bg1 の形式で書きました。仕事のプロジェクトの場合は、このようには絶対に書けません。コードのセマンティクス、その他の支出ライン プロットが必要です。 。

ここでの属性の意味を大まかに理解する必要があります。まず背景です。画像アドレスは水平方向と垂直方向に整列され、幅は現在挿入されている画像に従う必要があります。 DIV、つまりコンテナ自体は背景画像に適応します。

それでは、各 DIV にこれらの素晴らしい名前を付けてください

見たことがありますか? スペースで区切られている限り、各キャラクターは複数の称号を身に着けることができます。 。

さて、もう一度 F12 に行きましょう。もちろん、前にプレビューしたページを更新できます。

ラフが来る、ラフが来る、ウェブページが来る、そうそう。

さて、ここには奇妙なものがいくつかあります（笑）、前回のレッスンで追加した境界線と各領域の名前です。これらを削除して、もう一度見てください。これは、月にある小さな足跡のようなものです。

もう一度すべてのコードを見てみましょう

特別な達成感を感じていますか、春を感じていますか~~~

まあ、これは単なる低レベルのスキルです。興奮しすぎですが、実際は本物です この Web ページはこのページより何倍も複雑です、おお、ふふふ、満足させるのが簡単すぎて、簡単に世界から排除されているのはあなたのせいです~~~

わかりました、私今日の記事はこれで終わります、親愛なる友人たち、本当に会いたかったです。ああ、ふふふ~~~おい、喧嘩しないで~~~ビジネスについて話しましょう、ビジネスについて話しましょう

次の記事では高度な演習について話します。内容がこれよりもずっと多くて困っています。複数のパートに分かれているので、1 つのビデオ チュートリアルを作成して、見たいものを教えてください。

ファンの反応を楽しみにしています~