個人 Web サイトの構築方法を段階的に教えます - DIV と CSS_html/css_WEB-ITnose についての隠された事柄

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

タイトルは長い方が良いと言われます。 。 。

わあ、ははは、親愛なる友人、私、胡漢山、また戻ってきました~~~

数日間会っていないのですが、寂しいですか?まあ、大丈夫です、黙っていても大丈夫です。とにかく、考えてみたんです、ふふふ、ふふふふ

わかった、わかった、真剣に、最初の 2 つの記事がとてもたくさんの友達に気に入ってもらったので、これを投稿することにしました このシリーズはもっとふっくらして、ええと、Xサイズ、ほらほら、男の子の靴と時計はよだれを垂らしています。エマはまた真剣に話していません。実際、当初は 4 ～ 5 つの記事を書いて終了する予定でした。しかし、誰もが必要としているので、もっと詳しく書きましょう。ご覧のとおり、タイトルがメインプロットになっているため、サイドプロットやサイドストーリーもありますが、一般的に、関連する内容が詳細かつ明確に説明されており、皆様のサポートに感謝しています。さて、これ以上ナンセンスはやめて、今日のトピック、DIV と CSS の間に隠されたものを始めましょう。

こんにちは、前の章で Web サイトのデザインが完了しました。Web サイトのデザイン図面が手元にあります。今度は図面をカットします。

この記事はデザイナー向けの記事なので、以前の Web サイトデザインの記事をシンプルにして問題ありません。しかし、このフロントエンドの知識を簡単に説明することはできません。多くの友人がこの知識を理解して学ぶ必要があります。そこで今日は、まず Web ページの基本構造について説明し、次に DIV+CSS とは何かを理解しましょう。

1. Web ページの基本構造

Web ページのコードと言えば、多くの友人はおそらく専門的な本を読んだり、専門的な言葉に混乱したりしたことがあるでしょう。専門的なことについては話さないようにしましょう。すべての Web ページを作成するために必要な基本的なフレームワークを説明します。

上記は毎回使用される基本的な構造です。ラベルと各ラベルの意味を理解したい子供用靴は、ラベルと呼ばれます。このシリーズの記事のフロントエンドの知識。

2. DIV+CSS とは一体何ですか?

実のところ、それが一体何なのかは分かりません。

ああ、友よ、私の言うことを聞いて、肉切り包丁を置いて、すぐに仏陀になってください。そうですね、本当はこれを HTML+CSS と呼ぶべきなのですが、いつから DIV+CSS と呼ばれるようになったのかは知りません。これは誰が担当しているのか、よくわかりません。しかし、その理由についてはまだ少しわかっています。初期のWebページは純粋なHTMLで作られていましたが、それがどのようなものかはご自身で想像していただければ、フロントエンドの知識についてはどうすることもできません。脇のプロットのふふふふ。

簡単に言うと、HTML コードは、服を着ていない人間と考えることができます。もちろん、彼は醜い、醜い、古い服を着ています。

それで、服を作って彼に着せる責任のある人たちは、もう我慢できないのですか？服を着るのに半日かかるのはどんな面倒ですか？履いてから交換するのに2日かかるのは無理でしょうか？

怒った人々は、怒りのあまりみすぼらしい服を捨て、多用途で生地の交換や節約が簡単な服のセットを再設計しました --- CSS

DIV について, 実はこのやつが一番よく使われるHTMLタグです。これはブロックレベルの要素であり、他の属性が含まれていないため、CSS を追加できるため、非常に使いやすいです。さて、ここで落とし穴を明らかにします。笑、それは、Shenma がそれを HTML+CSS ではなく DIV+CSS と呼んでいるからです。前述したように、DIV は非常に頻繁に使用され、使いやすいためです。その後、一部の素人はこれを新しいものを指すために使用します。 Webコードの標準技術。ということで、募集要項は DIV+CSS だらけです╮(╯▽╰)╭

3. まずは試してみましょう、サオニアン

まずはやってみましょう道具の話。以前は、メモ帳に手書きでコードを書けるという募集要項が多かったのですが、それはWebデザイナーとして、一般向けの個人Webサイトを構築したい場合でも、便利で高速なソフトウェアを使用する必要があります。

上で述べたように、入力可能な空のテキスト ファイルは、サフィックス名を .html に変更するだけで Web ページに作成できます。 Web ページ制作ソフトはたくさんありますが、代表的なものは Dreamweaver、Fireworks、Visual Studio です

個人的には、デザイナーであれば ADOBE ソフトウェアが必須であり、これを 1 セット使用するだけで済みますので、DW をお勧めします。あまり役に立ちません。

FW は画像をカットする傾向があり、一部の機能は現在のスケッチに似ていますが、Web プログラミングの点では ADOBE 独自の DW にまだ遅れています。

VS は Web ページの作成もできる専門的なプログラミング ソフトウェアです。すべての機能を備えていますが、サイズが大きいため、Web ページの作成のみにはお勧めできません。

DW をインストールしたら、プレイを始めましょう。

最初に前の写真を撮りましょう

この写真は、えーっと、パーティション設計が施された、履歴書に似た推奨 Web ページ形式であることをまだ覚えていますか。

それでは、このパーティションに従って Web ページを簡単に作成してみましょう。

子供たちは、時計を読んだ後、開始し、上で送信した基本構造コードをコピーし、卑劣な Web ページ名を付けて、コンテンツ領域で開始する準備をします。

上の図には 9 つのパーティションがあるため、コンテンツ領域に 9 つの div タグを追加する必要があります。

Jiang Zi です。ディ、後ろの方を見逃してしまいました。なぜ対になっているのかというと、対になっていないものはあるのでしょうか？ふふふ、サイドドラマもお楽しみに。 。 。

分かった、分かった、本題に入りましょう、翠華に来てザワークラウトを出します、ああ、いいえ、コードを入力してください

書き終わりましたDW の子供用シューズを使用した F12 試してみてください。Web ページから飛び出しますか? はい、Web ページ上のコードの実際の効果を確認できます。でも、ちょっとイライラします

これは一体何ですか? 私に教えたいのはこの Web ページですか?

ふふ、服を着ていないのは当然ですし、美しくもありません。さあ、CSS を入れましょう。

CSS には外部、内部、インラインの 3 つの適用方法があります。ここで内部スタイルについて簡単に説明します。他もどうぞお楽しみに。 。 。争わないで、お金をあげてもいいですか？ 。 。サイドストーリーもお楽しみに。 。 。ふふふ、

さて、head にコードを挿入しました。これが実際にこれから書く内部スタイルの「コンテナ」です。それの。

以下に具体的な原理を説明します。div タグなどの HTML タグには名前を付けることができます。この名前は「class」または「id」と呼ばれます。

div に名前を付けます。英語を忘れずに使用してください。ピンインは問題ありませんが、Web ページが中国語を解析できることは期待できません。スリム。 。 。

名前が選択されたので、名前に属性を追加しましょう。属性は内部スタイルに配置されます。

.box{height:200px; width:100%; border:1px solid #666666; text-align:center;}

角括弧内の意味。 : 高さ 200 ピクセル; 幅 100%; 境界線 1 ピクセル 境界線の色 #666666;

Web ページを追加します

F12もう一度見て、違うかどうか見てください、へへ

もちろん、まだ非常に単純ですが、今日の主なことはこれらの基本的なことを理解することです。次の記事では、それを深く理解して実践します。 。

はい、今日の内容はここで終わります。また次回お会いしましょう。