コンテンツに基づいたWeb構築のすべての方法( I )

10435 ワード
テキストリンク
写真で

イントロ


CMSS(コンテンツマネージメントシステム)に取り組んで長年にわたり、自分自身や他のサイトのウェブサイトを作成した後、私はすべてのウェブサイトの所有者の基本的な問題は以下の通りです.
データから働くウェブサイトへ行く方法?
私は、この一連の記事の例を通してその質問に答えるようにします.
もちろん、すべては非常に複雑な、非常に高速取得することができます.データは、多くの味とサイズで来ることができました.そして、ウェブサイトはFacebook、アマゾンまたはNetflixのような完全にインタラクティブな複雑なアプリでありえました.またはあなたの定期的なジョーのレストランとして簡単です.複雑さを最低限に保つようにしましょう.だから、内部の技術がどのように働くかを自分で理解することができます.
あなたが知っている必要がある一つのこと:あるすべてのこれらのウェブサイトのニーズを解決するための単一の解決策はありません.私は自分自身を読んで嫌いだが、この特定のケースでは、どのようにあなたのデータからあなたのウェブサイトに行くには?本当に依存します.

基本的な例


基本から始めて、出発点として使用できる例のウェブサイトを作成しましょう.2つの製品とフルーツ愛好家と呼ばれる果物:レモンとイチゴ.それは3ページ:1つのページとして1つのページ/インデックスページには、果物をリストし、各果物のように、次のように:
- index.html   
- products/
    - lemon.html
    - strawberry.html
HTML Webページの基本的な構造は以下の通りです.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title of page</title>
  </head>  
  <body>
    ... 
  </body>
</html>
簡単ですね.すべてのページにヘッダを追加しましょう.
<header>
  <h1>🍋 FruitLovers</h1>
  <p>
    If life gives you lemons... 
  </p>
</header>
フッターも同様です.
<footer>
  FruitLovers © 2021
</footer>
我々のホームページの現在の主要な内容:
<main>
  <h2>Fruits you can buy from us</h2>
  <ul>
    <li>
      <a href="products/lemon.html">
        Lemons, our classic
      </a>
    </li>
    <li>
      <a href="products/strawberry.html">
        Strawberries, less sugar than lemons!
      </a>
    </li>
  </ul>
</main>
ここで一緒にすべてをブレンド、ここに私たちのホームページのHTML構造です:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>FruitLovers - Home</title>
  </head>  
  <body>
    <header>
      <h1>🍋 FruitLovers</h1>
      <p>
        If life gives you lemons... 
      </p>
    </header>
    <main>
      <h2>
        Fruits you can buy from us
      </h2>
      <ul>
        <li>
          <a href="products/lemon.html">
            Lemons, our classic
          </a>
        </li>
        <li>
          <a href="products/strawberry.html">
            Strawberries, less sugar than lemons!
          </a>
        </li>
      </ul>
    </main>
    <footer>
      FruitLovers © 2021
    </footer>
  </body>
</html>
レモンページに行きましょう.すべての構造に加え、同じヘッダーとフッターがあります.タイトル、価格とイメージを加えましょう:
<main>
  <h2>
    Lemon
  </h2>
  <p>
   Today's price is: 2€
  </p>
  <img src="images/lemon.jpg" />
</main>
ホームページに戻る方法があります😅. 戻るリンクを追加しましょう.
<main>
  <a href="index.html">
    ← Home
  </a>
  <h2>
    Lemon
  </h2>
  <p>
   Today's price is: 2€
  </p>
  <img src="images/lemon.jpg" />
</main>
以下のように、それぞれのフルーツページの他の製品のリストを表示すればよいでしょう.
<main>
  <a href="index.html">← Home</a>
  <h2>
    Lemon
  </h2>
  <p>
    Today's price is: 2€
  </p>
  <img src="images/lemon.jpg">
  <h2>
    Other fruits you can buy from us:
  </h2>
  <ul>
    <li>
      <a href="products/strawberry.html">
        Strawberries, less sugar than lemons!
      </a>
    </li>
  </ul>
</main>
もっとおいしくできるようにするには、いくつかの基本的なスタイルをCSSファイルに追加しましょう.
- index.html   
- products/
    - lemon.html
    - strawberry.html
- styles.css 👈

html {
  font-family: sans-serif;
}
そして、頭の中のリンクタグを持つすべてのページに追加します.
...
<head>
   ...
   <link rel="stylesheet" href="/styles.css">
</head>
これが最後の結果です.
< div >
このようなウェブサイトに必要な技術は?かなり基本的な< em >静的な/EM >ウェブサーバ、安い(ほとんど無料!)HTMLを読む何でも信頼できる互換性があります.p >
この例では、入力と出力は同じ場所にある.ウェブサイトそのものはコンテンツがあるところです.p >
< p >別の製品を追加するために必要なすべてのことを考えてください.< tt/p >が必要です.
<ウル>
  • 新しいデザイン/パターンに従って、新しいページを作成します
  • ホームページのリストに追加します
  • とすべての製品のリストに追加します“他の果物”リスト.
    • < ull >
    ので、多くの場所ので、間違いを犯すのは簡単!😅


    < tt >ページのデザインや構造を変更したい場合や、ヘッダやフッターを変更したい場合などには、解析スクリプトを追加したい場合はどうしますか.すべての場合、すべてのページを編集する必要があります!p >
    このような解決策は限られたリソースを持つウェブサイトの所有者にとってOKです.p >
    しかしながら、私たちのウェブサイトではすでにたくさんのことが繰り返されていると言うのは明らかだと思います.ヘッダーとフッタは、すべて繰り返されます.果物の製品のページは、実際には、それぞれの果物の特定のデータだけで異なります.保守性のために、我々は一度だけ物事を書いて、どこか他のデータを保つべきですp >

    どのように、我々はこの問題を解決しますか？


    < p >パートIIへの頭
    < div class ="Lagagchen - chen link "

    コンテンツに基づいたWeb構築のすべての方法( II )

    ダニエル・ヴァーヴァー・ Jan 27・ 4分読む


    < div >
    ジャバスクリプト
    MacOS OSXインストールoh-my-zsh autojump