本当に基本的なメモをしています。
◆01．Webサイトの構成について知ろう◆
《Webページとは》
(=^^=)Webページとは………Webブラウザに読み込まれるデータ一式のこと
★Webページのデータは、HTMLファイルと、HTMLファイルに関連づけられたCSSファイルや画像ファイルなどで構成されている。
☆HTMLファイルにはページに表示される文章や関連ファイルの情報が書き込まれている。
↓
HTMLファイルをWebブラウザで開くと、文章と一緒に画像などが埋め込まれた状態で表示される。
《Webサイトとは》
(=⌒－⌒=)∫Webサイトとは………Webページの集合体で、複数のWebページが連携してWebサイト全体で情報発信を行う。
◇リンク………ページ同士の連携を「リンク」と言う。
☆Webサーバ………Webサイトを公開するためのコンピューター。（Webサーバの管理には専門的な知識が必要なため、契約しているインターネットサービスプロバイダが提供するサービスを利用したり、業者からレンタルしたWebサーバにデータをあずけたりするのが一般的である。
★アップロード………Webサーバにデータを送ること。
☆ダウンロード………Webサーバからデータを取得すること。
◆02．Webページを作成するために必要なもの◆
〈テキストファイルの作成ソフト＝テキストエディタ（無料ソフトと有料ソフト）〉
☆テキストエディタ（無料ソフト）………HTMLファイルやCSSファイルはテキストファイルである。「メモ帳」というソフトでテキストファイルの作成ができる。
(=・・=)ただし、HTMLを保存するときとCSSを保存するときでは、それぞれファイル形式（拡張子）が異なるので注意すること。
他にもより高機能なテキストエディタには「TeraPad」（Windows)やCotEditor（Mac）といった無料ソフトがある。
★Webサイト制作専用ソフト（有料ソフト）………大量のページを作成したり、さらに効率的に作業したい場合の「Webサイト制作専用ソフト」である「Adobe Dreamweaver」などがある。
◇画像編集用ソフト………デジカメで撮った写真のサイズを変えたり必要な部分だけ切り抜いたりといったシンプルな作業（→フリーソフトでも充分できる）から、オリジナルのボタン画像の作成やより複雑な画像編集を行ったりするためには「Adobe Photoshop」や「Adobe Fireworks」などを利用する。
〈データを転送するためのソフト〉
(=・・=)作成したWebページを公開するには、データ一式をWebサーバに転送する必要がある。
★データ転送用のソフトは「FTPクライアント」と呼ばれる。
★よく使われているFTPクライアント（データ転送用のソフト）は、FileZilla（Win/Mac）やCyberduck（Mac）などがあり、どちらも無料で利用できる。（→できれば作者に寄付するとよいとのこと。）
◆03．Webサイト制作の流れを知ろう◆
〈Webページの構成を考える〉
(1)どんなページをいくつくらい作成するのか、またそれらのページをどのように連携させるかといった、Webサイト全体の構成を最初に考える
↓
(2)似たようなページはカテゴリー（グループ）分けするのが一般的である。
↓
(3)カテゴリーごとにメニューボタンを用意し、すべてのページに配置する。
↓
(4)メニューボタンをクリックしてカテゴリーのトップページにジャンプし、カテゴリーのトップページからカテゴリー内の各ページにジャンプする流れを作成する。
〈各ページに掲載する情報をまとめる〉
★どんな文章や画像を載せるのか、ページごとに具体的な情報をまとめる。
↓
★「デザインカンプ」を作成する。
（「デザインカンプ」………画像制作・編集ソフト（Adobe FireWorksなど）を使った詳細なデザイン図のこと。）
○最初に正確な完成図を作り、その完成図を再現するために、パーツとなる画像を書き出したり CSSファイルを作成したりする。
○Photoshopなどの画像制作・編集ソフトでレイアウトしたり細かいデザインをほどこしていく。
（◆または、紙にスケッチするなどして大まかな配置を決めておくと、その後の作業がスムーズに。）
〈HTMLファイルを作る〉
(=・・=)HTMLファイル………Webページに掲載する文章にHTMLタグと呼ばれる印を組み込んだもの。
◇HTMLとは「HyperText Markup Language」の略で、その名の通り印を付けるための言語である。
☆HTMLタグには見出しを表すタグや段落を示すタグなど、たくさんの種類が用意されている。
★「HTMLファイルを作る」………テキストエディタ（「TeraPad」（Windows)やCotEditor（Mac）（無料ソフト）「Adobe Dreamweaver」（有料ソフト）等）で文章ファイルを開き、
タグを追加していく作業のこと。
〈CSSファイルを作る〉
□CSSファイル………文章や画像の見た目に関する情報を記述する。あらかじめ決められた方法に従って、ページの背景色、テキストの色や大きさ、文章と画像の配置などを指定する。
CSSファイルには、１．「どこに」 ２．「どんなスタイルを」 ３．「どのように」の順で、スタイル指定のための情報を記述する。
（◆スタイルを一度にたくさん記述すると思いがけない表示結果になることもあるので、少し作業を進めるたびにWebブラウザでチェックして、スタイル指定が思いどおりに反映されているかどうか確認する。）
◆01．Webサイトの構成について知ろう◆
《Webページとは》
(=^^=)Webページとは………Webブラウザに読み込まれるデータ一式のこと
★Webページのデータは、HTMLファイルと、HTMLファイルに関連づけられたCSSファイルや画像ファイルなどで構成されている。
☆HTMLファイルにはページに表示される文章や関連ファイルの情報が書き込まれている。
↓
HTMLファイルをWebブラウザで開くと、文章と一緒に画像などが埋め込まれた状態で表示される。
《Webサイトとは》
(=⌒－⌒=)∫Webサイトとは………Webページの集合体で、複数のWebページが連携してWebサイト全体で情報発信を行う。
◇リンク………ページ同士の連携を「リンク」と言う。
☆Webサーバ………Webサイトを公開するためのコンピューター。（Webサーバの管理には専門的な知識が必要なため、契約しているインターネットサービスプロバイダが提供するサービスを利用したり、業者からレンタルしたWebサーバにデータをあずけたりするのが一般的である。
★アップロード………Webサーバにデータを送ること。
☆ダウンロード………Webサーバからデータを取得すること。
◆02．Webページを作成するために必要なもの◆
〈テキストファイルの作成ソフト＝テキストエディタ（無料ソフトと有料ソフト）〉
☆テキストエディタ（無料ソフト）………HTMLファイルやCSSファイルはテキストファイルである。「メモ帳」というソフトでテキストファイルの作成ができる。
(=・・=)ただし、HTMLを保存するときとCSSを保存するときでは、それぞれファイル形式（拡張子）が異なるので注意すること。
他にもより高機能なテキストエディタには「TeraPad」（Windows)やCotEditor（Mac）といった無料ソフトがある。
★Webサイト制作専用ソフト（有料ソフト）………大量のページを作成したり、さらに効率的に作業したい場合の「Webサイト制作専用ソフト」である「Adobe Dreamweaver」などがある。
◇画像編集用ソフト………デジカメで撮った写真のサイズを変えたり必要な部分だけ切り抜いたりといったシンプルな作業（→フリーソフトでも充分できる）から、オリジナルのボタン画像の作成やより複雑な画像編集を行ったりするためには「Adobe Photoshop」や「Adobe Fireworks」などを利用する。
〈データを転送するためのソフト〉
(=・・=)作成したWebページを公開するには、データ一式をWebサーバに転送する必要がある。
★データ転送用のソフトは「FTPクライアント」と呼ばれる。
★よく使われているFTPクライアント（データ転送用のソフト）は、FileZilla（Win/Mac）やCyberduck（Mac）などがあり、どちらも無料で利用できる。（→できれば作者に寄付するとよいとのこと。）
◆03．Webサイト制作の流れを知ろう◆
〈Webページの構成を考える〉
(1)どんなページをいくつくらい作成するのか、またそれらのページをどのように連携させるかといった、Webサイト全体の構成を最初に考える
↓
(2)似たようなページはカテゴリー（グループ）分けするのが一般的である。
↓
(3)カテゴリーごとにメニューボタンを用意し、すべてのページに配置する。
↓
(4)メニューボタンをクリックしてカテゴリーのトップページにジャンプし、カテゴリーのトップページからカテゴリー内の各ページにジャンプする流れを作成する。
〈各ページに掲載する情報をまとめる〉
★どんな文章や画像を載せるのか、ページごとに具体的な情報をまとめる。
↓
★「デザインカンプ」を作成する。
（「デザインカンプ」………画像制作・編集ソフト（Adobe FireWorksなど）を使った詳細なデザイン図のこと。）
○最初に正確な完成図を作り、その完成図を再現するために、パーツとなる画像を書き出したり CSSファイルを作成したりする。
○Photoshopなどの画像制作・編集ソフトでレイアウトしたり細かいデザインをほどこしていく。
（◆または、紙にスケッチするなどして大まかな配置を決めておくと、その後の作業がスムーズに。）
〈HTMLファイルを作る〉
(=・・=)HTMLファイル………Webページに掲載する文章にHTMLタグと呼ばれる印を組み込んだもの。
◇HTMLとは「HyperText Markup Language」の略で、その名の通り印を付けるための言語である。
☆HTMLタグには見出しを表すタグや段落を示すタグなど、たくさんの種類が用意されている。
★「HTMLファイルを作る」………テキストエディタ（「TeraPad」（Windows)やCotEditor（Mac）（無料ソフト）「Adobe Dreamweaver」（有料ソフト）等）で文章ファイルを開き、
タグを追加していく作業のこと。
〈CSSファイルを作る〉
□CSSファイル………文章や画像の見た目に関する情報を記述する。あらかじめ決められた方法に従って、ページの背景色、テキストの色や大きさ、文章と画像の配置などを指定する。
CSSファイルには、１．「どこに」 ２．「どんなスタイルを」 ３．「どのように」の順で、スタイル指定のための情報を記述する。
（◆スタイルを一度にたくさん記述すると思いがけない表示結果になることもあるので、少し作業を進めるたびにWebブラウザでチェックして、スタイル指定が思いどおりに反映されているかどうか確認する。）