Comments
Description
Transcript
ホームページの作り方
平成１６年度 ＩＴ活用研修 ホームページの作り方 「ホームページ・ビルダー」を使用し、わか りやすく、人にやさしいホームページの作り 方を学びます。 平成１６年７月３，１０日（土曜日） 特定非営利活動法人パソコンまるごとアシスト この講座では、ホームページ作成ソフトの中でも利用者の多い「ＩＢＭホーム ページ・ビルダー」の使い方を学び、簡単なホームページを作成してみます。 このソフトウェアには３０日間試用できる「体験版」が用意されており、次の ページから入手できます。 http://www-6.ibm.com/jp/software/internet/hpb/download.html 平成 １ ６ 年 ６ 月 １ １ 日 現 在 の 最 新 版 は 、「 バ ー ジ ョ ン ８ 」 で す 。 ○ＨＴＭＬとは？ インターネット上に公開されているホームページを見ると、多くの画像や写真 を 表 示 し た り 、背 景 に 色 や 模 様 を つ け た り 文 字 の 色 や 字 体 を 変 化 さ せ て み た り と 、 いろいろなスタイルやパターンのものがあります。特定の場所をクリックすると 表示される画面が切り替わったり、より詳しい情報が表示されたりします。 このように、どこに何をどのような順序や位置で表示するか、どのような操作 に対してどういった反応を返すか、というような、ホームページ上のあらゆる事 柄 を 一 定 の 取 り 決 め に し た が っ て パ ソ コ ン に 指 示 す る 命 令 言 語 を 、「 Ｈ Ｔ Ｍ Ｌ （Ｈｙｐｅｒ−Ｔｅｘｔ Ｍａｒｋｕｐ Ｌ ａ ｎ ｇ ｕ ａ ｇ ｅ ）」 と 呼 び ま す 。 ホームページはこのＨＴＭＬで記述されており、パソコンはこれをインターネ ット上から読み込み、決められた命令にしたがって画面を構成して、我々が目に するようなホームページを表示してくれます。ホームページを作成するというこ とは、このＨＴＭＬを記述するということです。 ○ＨＴＭＬは難しくない！？ こ こ で 、「 命 令 言 語 ？ 」「 Ｈ Ｔ Ｍ Ｌ を 記 述 す る ？ 」 と い う こ と を 、 決 し て 難 し く考えないでください！ Ｈ Ｔ Ｍ Ｌ は 、「 タ グ 」 と 呼 ば れ る コ ン ト ロ ー ル コ ー ド を 使 っ て 、 文 字 の 装 飾 な ど の 命 令 を 記 述 し ま す 。 多 く の タ グ は < b > ・ ・ ・ < /b > の よ う に 「 開 始 タ グ 」 と 「 終 了 タ グ 」 で 文 字 や 段 落 を 囲 み ま す が 、 中 に は < br > の よ う な 「 単 独 タ グ 」 も あ り ま す 。 開 始 タ グ の タ グ 名 に ス ラ ッ シ ュ （ /） を つ け た も の が 終 了 タ グ で 、 開 始 タ グ と終了タグに囲まれた部分に対して、その命令が有効になります。 例： < b > 文 字 を 太 く す る 。 < /b > −−−＞ 文字を太くする。 文 字 を < b > 太 く < /b > す る 。 −−−＞ 文字を太くする。 < i > 文 字 を 斜 体 に す る 。 < /i > − − − ＞ 文字を斜体にする。 < b > < i > 文 字 を 太 く 斜 体 に し た い 。 < /b > < i > −−−＞文字を太く斜体にしたい。 （ｂはボールド＝太字、i はイタリック体＝斜体） - 1/14 - ○ｈｔｍｌファイルの例（基本的な形） で は 、「 メ モ 帳 」 を 使 っ て 簡 単 な ｈ ｔ ｍ ｌ フ ァ イ ル （ ホ ー ム ペ ー ジ の ソ ー ス ） を 作 成 し て み ま し ょ う 。 フ ァ イ ル は 、 拡 張 子 に .html ま た は .htm を 指 定 し て 保 存 し ます。 ここから……＞ ここから……＞ < html > < head > < title > ホ ー ム ペ ー ジ の 練 習 < /title > ここまでが……＞ タイトルです。 < /head > ヘ ッ ダ 部 分 で す 。 < body > ＜……ここから 初 め て の ホ ー ム ペ ー ジ で す 。 < br > うまくできるかな？ ここまでが……＞ < /body > ＜……ここまでが < /html > 本文です。 html フ ァ イ ル で す 。 （ br は 改 行 ） ○ｈｔｍｌファイルのソースを確認するには？ 自分の見ているホームページがどのように記述されているか、ｈｔｍｌファイ ルのソースを確認してみましょう。 イ ン タ ー ネ ッ ト ・ エ ク ス プ ロ ー ラ で は 、「 表 示 （ Ｖ ）」 − − ＞ 「 ソ ー ス （ Ｃ ）」 と 開きます。 - 2/14 - ○ホームページ・ビルダーを使うと・・・。 ｈ ｔ ｍ ｌ フ ァ イ ル は 、 タ グ と 本 文 （ body の 部 分 ） を 全 て 手 で 打 っ て 記 述 し て い くことで作成できますが、たくさんのタグをマスターして使いこなすことや、ペ ージ全体を思ったようにレイアウトすることは容易なことではありません。 そこで、ｈｔｍｌの複雑な規則を理解しなくても簡単な操作を行うことでホー ムページを作成できるよう手助けしてくれるソフトウェアが、今回使用するホー ムページビルダーに代表される、ホームページ作成ソフトです。 ホームページ作成ソフトを使うと、白紙の上に文字を入力して色や字体を変更 したり写真や画像を貼り付けて移動させたり縮小したりというように、あたかも ワープロで文書を作成するような感覚で、簡単にｈｔｍｌファイルを作成するこ とが可能です。 ＜ホームページ・ビルダーの作成画面＞ ○フォルダーを１つ作り、全てのファイルをその中に保存してください。この講 習では、デスクトップにそれぞれのお名前をつけたフォルダを作り、それを利用 します。では、フォルダを作成してください。 - 3/14 - ○ホームページ・ビルダーを使ってみよう！ ホームページ・ビルダーの起動とページ作成の準備 １ ．「 ス タ ー ト 」 − − ＞ 「 全 て の プ ロ グ ラ ム 」 − − ＞ 「 Ｉ Ｂ Ｍ ホ ー ム ペ ー ジ ・ ビ ルダーＶ７」−−＞「ホームページビルダー」の順にクリックし、プログラ ムを起動します。 ２．編集スタイルは３種類ありますが、ここでは「かんたん」を選択します。 ３ ．「 ス タ ー ト 」 か ら ペ ー ジ の 編 集 を 始 め ま す が 、 初 め て の 時 は 「 サ イ ト を 作 成 する」を選択します。 ４ ．「 サ イ ト 名 」 に は ご 自 分 の お 名 前 を つ け 、 続 い て 「 新 規 に ト ッ プ ペ ー ジ を 作 成する」を選択してください。 ５ ．「 ト ッ プ ペ ー ジ の 作 成 先 フ ォ ル ダ の 指 定 」 で は 、 デ ス ク ト ッ プ を 指 定 し て く だ さ い 。 通 常 、「 C:¥Documents and Settings¥ （ ユ ー ザ ー 名 ） ¥ デ ス ク ト ッ プ ¥ （ ご 自 分のお名前）￥ 」となります。 ６ ． 次 に 、「 ペ ー ジ の 作 成 ウ ィ ザ ー ド 」 が 開 き ま す 。 こ こ で は 、「 作 り 方 」 を 「 白 紙 」 に 、「 編 集 モ ー ド 」 を 「 標 準 モ ー ド 」 に 変 更 し ま す 。 ７ ．「 転 送 設 定 」 は ホ ー ム ペ ー ジ を 公 開 す る た め に 必 要 な 手 順 で す が 、 こ こ で は 行いませんので「いいえ」を選択してください。 - 4/14 - 文字の入力と編集 １．中央に「白紙」が表れますので、ワープロ感覚で編集していきます。画面左 の「ナビメニュー」から「文字の挿入」を選択し、文字を入力しましょう。 ２．次に、入力した文字を「中央揃え」にしましょう。 （ 方 法 ： 文 字 を ド ラ ッ グ し て 、ツ ー ル ・ バ ー の「 中 央 揃 え 」を ク リ ッ ク し ま す 。） ３．次に、文字の色を変更しましょう。 （方法：対象となる文字をドラッグして、ツール・バーの「文字色の変更」を 選 択 し て 指 定 し ま す 。） ４．同じように、文字のサイズを変更したり字体を変更したりしてみましょう。 壁紙の挿入 １．画面左の「ナビメニュー」から「壁紙の挿入」を選択し、壁紙を設定しまし ょ う 。「 素 材 集 」 に は い ろ い ろ な 壁 紙 が 用 意 さ れ て い ま す の で 、 気 に 入 っ た ものを選ぶと簡単です。 - 5/14 - 水平線、リストの挿入、表の挿入など １ ． 画 面 左 の 「 ナ ビ メ ニ ュ ー 」 か ら 、「 水 平 線 の 挿 入 」 を 選 択 し て み ま し ょ う 。 水平線の「太さ」と「幅」を指定します。水平線を右クリックして「属性の 変 更 （ Ａ ）」 を 選 択 す る と 、 ス タ イ ル を 変 更 で き ま す 。 ２ ． 画 面 左 の 「 ナ ビ メ ニ ュ ー 」 か ら 、「 リ ス ト の 挿 入 」 を 選 択 し て み ま し ょ う 。 それぞれの行の見出しに表示するマークを指定します。見出し無しのリスト も 挿 入 で き ま す 。 リ ス ト を 右 ク リ ッ ク し て 「 属 性 の 変 更 （ Ａ ）」 を 選 択 す る と、スタイルを変更できます。 ３ ． 画 面 左 の 「 ナ ビ メ ニ ュ ー 」 か ら 、「 表 の 挿 入 」 を 選 択 し て み ま し ょ う 。 列 と 行の数を指定します。表の枠の中に文字を入力し、装飾しましょう。 ４．特定のセルの背景を変えたい場合には、対象のセルを右クリックして「属性 の 変 更 （ Ａ ）」 を 選 択 し 、「 背 景 」 の 色 ま た は 画 像 を 設 定 し ま す 。 ５ ． セ ル を 結 合 し た い 場 合 に は 、 対 象 の セ ル を 右 ク リ ッ ク し て 、「 選 択 セ ル の 結 合 （ Ｊ ）」 を 選 択 し ま す 。 - 6/14 - 画像の挿入（素材集から） １．ホームページ・ビルダーには、様々な絵柄や写真が用意されています。画面 左 の 「 ナ ビ メ ニ ュ ー 」 か ら 、「 画 像 の 挿 入 」 を 選 択 し ま す 。「 素 材 集 」 か ら 選 択 し て 挿 入 す る と 簡 単 で す が 、「 フ ァ イ ル か ら 」 を 選 択 し て 自 分 で 用 意 し たファイルを使うことも出来ます。 （画面左の「ナビメニュー」を「素材集」に切り替えると、ドラッグアンド ド ロ ッ プ で 画 像 を 挿 入 す る こ と が 出 来 ま す 。） ロゴの挿入 ホームページの題名など、強調したい文字には飾り文字（ロゴ）を使うと効果的 です。 １ ． 画 面 左 の 「 ナ ビ メ ニ ュ ー 」 か ら 、「 ロ ゴ （ 飾 り 文 字 ） の 挿 入 」 を 選 択 し ま す 。 「文字」には作りたいロゴの文字を入力し、大きさと好みのスタイルを決定しま す 。「 文 字 の 詳 細 設 定 」 か ら は 、 字 体 や 影 な ど が 設 定 出 来 ま す 。 - 7/14 - リンクの挿入 あるページから別のページへ移る仕組みを「リンク」と呼び、リンクを設定する ことを「リンクを張る」と呼びます。 ・外部のページへＵＲＬを指定してリンクを張ることが出来ます。 例： page1.html −−＞ http://www.pref.gifu.lg.jp/ ・自分で作成したページが複数あれば、それぞれのページをリンクすることが出 来ます。 例： page1.html ＜ − − ＞ page2.html １ ．文 字 に リ ン ク を 挿 入 す る 場 合 は 、 画 面 左 の ナ ビ メ ニ ュ ー か ら「 リ ン ク の 挿 入 」 を選択します。対象となる文字をドラッグしてから選択すると、リンクの挿 入先が確定できます。 ２．画像やロゴにリンクを挿入する場合も、文字にリンクを挿入する場合と同じ 要領で行います。 - 8/14 - ファイルの保存 ・作成したページに設定した画像ファイルやリンクは、それぞれ関連を持ってい ます。そのため、ファイル名を単独で変更したりファイルを削除したりすると、 ページが正しく表示できなくなります。 ・画像などを貼り付けた場合には、それらのファイルも１つずつ保存する必要が あります。 ・ フ ァ イ ル 名 は 、 一 般 的 に 「 ト ッ プ ペ ー ジ 」 に あ た る フ ァ イ ル に は 「 index.html 」 ま た は 「 index.htm 」 を 指 定 し ま す 。 ま た 、 日 本 語 や 全 角 文 字 は 使 用 で き ま せ ん 。 作成したページのｈｔｍｌソースを確認するには？ 参考までに、ホームページ・ビルダーが作成したｈｔｍｌソースを確認してみま しょう。 １ ． メ ニ ュ ー ・ バ ー か ら 「 表 示 」 − − ＞ 「 編 集 ス タ イ ル の 切 り 替 え （ Ｏ ）」 の 順 にクリックし、編集スタイルを「スタンダード」に切り替えます。 ２．ウィンドウを「ＨＴＭＬソース」に切り替えると、ホームページ・ビルダー が作成したｈｔｍｌソースが表示されます。 - 9/14 - ○ホームページを公開するには？ ・ホームページを作成しても、自分のパソコンのフォルダに保存しただけでは、 他の人が見ることは出来ません。インターネット上に公開して多くの人に見ても ら う た め に は 、作 成 し た フ ァ イ ル や 貼 り 付 け た 画 像 フ ァ イ ル を 公 開 サ ー バ ー へ「 ア ッ プ ロ ー ド 」 し な け れ ば な り ま せ ん 。 ア ッ プ ロ ー ド と は 、「 Ｆ Ｔ Ｐ （ File Transfer Protcol ）」 と 呼 ば れ る 規 則 に 従 っ て 、 フ ァ イ ル を 転 送 す る こ と で す 。 ・ホームページ・ビルダーにはＦＴＰツールが付属していますので、それを使っ てファイルをアップロードすることが出来ます。この講座では、実際にファイル をアップロードできませんので、説明は割愛します。ご了承ください。 ・ホームページの公開場所（公開サーバー）としては、 １．個人で契約しているプロバイダのサーバ ２．無料のホームページ公開用サーバ などが考えられます。 http://isweb.www.infoseek.co.jp/ http://www.tok2.com/ http://www.geocities.co.jp/ 例： （ 各 サ ー ビ ス の 利 用 に つ い て は 、 利 用 規 約 を 必 ず ご 確 認 く だ さ い 。） ○一歩進んだホームページを作ろう。 ・ＣＳＳ（カスケーディング・スタイル・シート）とは、ホームページのスタイ ル（書体、レイアウトなど見栄えに関するもの）をまとめて記述したものをいい ます。それぞれのタグに属性を指定することである程度はスタイルを記述するこ と が で き ま す が 、ス タ イ ル ・ シ ー ト を 使 え ば よ り 効 率 よ く 詳 細 な 設 定 が で き ま す 。 それに限らず、ホームページの見栄えが明らかに違ってきますので、ぜひＣＳＳ をマスターしましょう。 ＣＳＳで出来ること（例） 文字 書体、文字のサイズ、太さ、文字飾りなど 色と背景 文字の色、背景色、背景の画像、背景画像の位置 文字のレイアウト 左揃え／右揃え／両端揃え、行間隔など レイアウト ページ内の余白、表中の余白など 箇条書き リストマークタイプ、位置、画像 表 枠線の色、余白、文字や画像の位置など その他 リンク文字の色や文字飾り、カーソルの形状など - 10/14 - ○画像の加工 ホ ー ム ペ ー ジ ・ ビ ル ダ ー に は 、「 ウ ェ ブ ア ー ト デ ザ イ ナ ー 」 と い う 画 像 編 集 ソ フ トが付属しています。 １ ． メ ニ ュ ー バ ー の 「 ツ ー ル （ Ｔ ）」 か ら 「 ウ ェ ブ ア ー ト デ ザ イ ナ ー の 起 動 （ Ｄ ）」 を選択します。 ２．ホームページ・ビルダーの素材を編集することもできますし、自分で用意し た写真や画像の編集も可能です。 - 11/14 - ○わかりやすく、人にやさしいホームページとは？ ・表示が速いこと ・画像サイズ、レイアウトの確認を。 ・フラッシュの多用も問題多し。 ・ダイヤルアップのユーザにも配慮を。 ・情報が正しいこと ・情報が新しいこと ・情報が頻繁に更新されること ・更新日の表示があること ・月日だけではなく、年月日の表示が望ましい。 ・必要な情報が探しやすいこと ・ 情 報 が 多 け れ ば 多 い ほ ど 、「 案 内 」 が 重 要 （ サ イ ト マ ッ プ の 設 置 な ど ）。 ・表示の横幅、縦幅が適切であること ・横スクロールは不便、縦スクロールもほどほどに。 ・情報量が多ければ、ページを分けること。 - 12/14 - ・文字と画像のバランスが適切であること ・文字ばかり、画像ばかりでは、どちらも見づらい。 ・色づかい文字サイズ、字体が適切であること ・閲覧者の環境（パソコンの種類、身体的状態など）は様々であるため、誰 に も 同 じ よ う に 見 え る デ ザ イ ン 、 配 色 を （ ユ ニ バ ー サ ル ・ デ ザ イ ン ）。 ・ ア ク セ シ ビ リ テ ィ ー （【 accessibility 】） の 視 点 （ 以 下 は 、 http://e-words.jp/ か ら 引用） 情報やサービス、ソフトウェアなどが、どの程度広汎な人に利用可能である かをあらわす語。特に、高齢者や障害者などハンディを持つ人にとって、ど の 程 度 利 用 し や す い か と い う 意 味 で 使 わ れ る こ と が 多 い 。 accecibility と は 「 受 け入れられやすさ」という意味の英単語である。 例えば、手や腕の障害のためにマウスを使えない場合、ソフトウェアはキー ボードだけで利用可能である必要がある。弱視や老眼の人にとってはフォン トサイズや配色は容易にカスタマイズ可能でなくては見にくい。視覚障害の 人は読み上げソフトを使うので、それに適したレイアウトや記述方法が求め られる。 特 に 、 Web ペ ー ジ に つ い て の 「 利 用 の し や す さ 」 を 「 Web ア ク セ シ ビ リ テ ィ 」 と い う 。 こ れ に つ い て は 「 WCAG 」 ( Web Content Accessibility Guidelines ) と い う 指 針 が W3C に よ っ て 提 唱 さ れ て い る 。 画 像 や 音 声 な ど に は 代 替 テ キ ス ト に よる注釈をつける、すべての要素をキーボードで指定できるようにする、情 報内容と構造、および表現を分離できるようにするなどの方針が定められて いる。 ・ ユ ー ザ ビ リ テ ィ （【 usability 】） の 視 点 （ 以 下 は 、 http://e-words.jp/ か ら 引 用 ） ソ フ ト ウ ェ ア や Web サ イ ト の 「 使 い や す さ 」 の こ と 。 様 々 な 機 能 に な る べ く 簡単な操作でアクセスできることや、使っていてストレスや戸惑いを感じな いことなどが、優れたユーザビリティにつながる。また、ユーザが目標の操 作を完了するまでに費やした労力などもユーザビリティの指標となる。ソフ トウェアの使用感を指すことが多いが、広くハードウェアまで含めた工業製 品 全 般 に 対 し て 使 う 場 合 も あ る 。 国 際 規 格 の ISO 9241-11 で は 、 ユ ー ザ ビ リ テ ィを「特定の利用状況において、特定の利用者によって、ある製品が、指定 された目標を達成するために用いられる際の、有効さ、効率、利用者の満足 度の度合い」と定義している。 - 13/14 - 参考文献 ホームページデビューのすべてがわかる本 株式会社 ２００１年４月８日 秀和システム 幸田幸子＆アンカー・プロ 著 デザインを変えずに表示が速くなるｗｅｂサイトのダイエット 株式会社 メディア・テック出版 ２００１年１月６日 佐藤信正 著 標準ウェブユーザビリティ辞典 株式会社 ２００３年４月１日 インプレス ソシオメディア（株） 編著 参考ウェブサイト http://www.catvy.ne.jp/~jc-sudo/builder/index_bld.htm マニュアルに書いていない ホームページビルダー講座 - 14/14 - スタジオマイン