ネットにサイトが表示される仕組み_____index1
index 1 Contents ②
サイトの仕組みとサイト構造をしろう。
ホームページがネットに表示される仕組みをしろう、使われるフォルダー・ファイル等の種類、構造をしる。
ホームページ(サイト)作成の、フォルダーとファイル構造
インターネット「ネットワーク」とは?を知ろう。
ネットワークとは複数のパソコンが世界中のパソコンと繋がっている状態のことを言い、
ネットワークが世界中に広がったものがインターネットと言っています。
自分の使っているパソコンからプロバイダーに接続されると一般でいうところの
住所が割り当てられます。
この住所のことを「IPアドレス」と呼んでいます。このIPアドレスがあることで、
誰がどこにアクセスしたかがプロバイダー側には記憶として残ることになります。
何か問題が生じた場合には情報開示されて個人にたどり着くことは容易にできます。
インターネットは使い方次第では善にも悪にもなりえますので使い方に【留意】します。
Webサイトのファイル・フォルダー構造を理解する。
フォルダー・・・ファイル・・・とは?
ここに、一冊の本があるとします、側である表紙にあたる部分がフォルダーです、
文章が書かれている中の部分がファイルという事です。
でわ、理解して頂いたところで
ファイルを整理するフォルダー構造を作る際は初めに手書きで書いてみることをお勧めします。
Webサイト作成で使用するファイルを整理するときは、注意しなければいけないことがあります、
「そのフォルダー構造がそのままURLとして使う」ことになりますので、
そのことを常に考えておくことが必要であります、
それでは、次の三つのことを注意しながらフォルダー構造を作っていきます。
◎URLは出来るだけ短く使うことにしよう。
◎URLを見るとそのページの内容がイメージ出来るフォルダー名、ファイル名を付けよう。
◎ルート階層は出来るだけ浅くする、フォルダーにフォルダーがある構造は出来るだけさけること。
フォルダー構造には大きく分けて二通りがあります。
★その一つが可能な限りルート階層に置く方法、
(上の階層を作らずに一つの階層にまとめる)階層構造を浅くする。
★その二つ目はサイトのトップページを除く全てのページを別々のフォルダーに保存する方法です、
付け加えて、それぞれのフォルダーにはイメージ(images)フォルダーを作りページにふくまれる
画像はそのイメージフォルダーに保存しておきます。
「画像が少ない時にはルート階層の一つのイメージフォルダーに保存してもよいでしょう」
図解で見ていただきますと以下のようになります。
★可能な限りルート階層に置く方法
「絶対パス」
特徴としては階層構造が浅くなりまとまりがよく見やすくなります、ただし、
ホルダーが少ないためにページ数が多くなると同じ階層に保存されるために、
管理がしずらいという欠点もあります。このフォルダー構造は小規模なサイト向けで、
数十ページほどのWebサイト向きといえます。
赤い枠の中がURLになります。検索をかけたときに検索窓(クエリ)に出てくるコードになります。
★トップページを除く全てのページを別々のフォルダーに保存する方法
「相対パス」
このフォルダー構造の特徴としては多くのファイルを扱得るために大規模なWebサイト向きです、
大企業サイト向き、エコサイト向きと言えます、
その他の特徴としては「index html」が省略できるために、省略したURLが好まれる傾向です。
最近では、小規模サイトでもこのパターンでサイト作成する方が増えています、
それぞれのフォルダーの中にはimagesフォルダーを作りますから画像が増えて困ることも解消できます。
赤い枠の中がURLになります。
上記の構造を解説します。
ブラウザ上に保存されているフォルダー名がrootという名前で保存されています。 このフォルダーを左ダブルクリックで開きます。すると中に
indexドットhtml名のファイル
about名のフォルダー
contact名のフォルダー
CSS名のフォルダー
scripts名のフォルダー
images名のフォルダー
このように、それぞれのフォルダーとファイルが入っています
●-->
indexドットhtml名のファイルがありますが、前準備として
このサイトで使うドメインを取得されていると思いますが
そのドメインをこのファイルに埋めます、
赤枠の中ですが(サンプル)拡張子はドットcomになっていますが
貴方の取得されているドメインを入れてください。
このファイルはユーザーが検索したときに最初に映し出されるトップページ画面になります。
このファイルは独立していますので除くと書いていました。
●-->
about名のフォルダーの中にはindexドットhtmlファイルとimagesフォルダーが入っています。
imagesフォルダーの中にはmapドットjpgという名の画像が入っています、
このファイル(ページ)で使う画像を入れています。
●-->
contact名のフォルダーの中にはindexドットhtmlファイルとimagesフォルダーが入っています。
imagesフォルダーの中にはmapドットjpgという名の画像が入っています、
このファイル(ページ)で使う画像を入れています。
このような作りが、1ページにつき1つのフォルダーを作るフォルダー構造となります。
●-->
CSS名のフォルダーの中にはstyleドットcssというファイルが入っています、
カスケードスタイルシートと呼んでいます、略してスタイルシートです、
HTMLを装飾するのに使います。
scripts名のフォルダーは動的部分でのみ使うことになりますのでここでは省略します。
●-->images名のフォルダーは画像などを入れておくフォルダーになります。
●豆知識●