「ホームページ作り らくらく講座」
Mac版Hotall編

      1. 全体のページレイアウト、構成 ・ WebSiteホームページの構成図
      2. 必要な材料の変換・用意(画像、映像、音声、文字など)
      3. 素材の準備
      4. ホームページの作成/HOTALLの基本的使い方
      5. GIFアニメの作り方



 インターネットは、1969年からアメリカではじめられたネットワークのネットワークです。世界中にあるコンピュータを電話回線で接続して、情報の公開や、情報のやりとり、電子メールのやりとりをすることができる、サイバースペースが広がりは、現在では、三千万台ものコンピュータが接続され、数千万人のひとが参加していると言われています。
 さらに、このサイバースペースへの入り口は、コンピュータ画面だけではなく、各家庭のテレビや、携帯端末などへと広がり、そこに流れる情報もこれまでの研究情報から、お料理や買い物などの生活情報やデジタルブックや辞書などの教育情報、福祉情報などへとより身近なものも多くなってきました。


1、全体のページのレイアウト、構成を考えます。

 まず、一番上にタイトル画がきて、その下にタイトル、線を引いて区切りを入れて、さらに、メニューボタンが並んでいる。それらのボタンを押すといろいろなページが表示される。そこには、文書、画像、音声や映像を見たり聞いたりすることができます。
 ホームページを作成するということは、これらの文字、画像、音声、映像情報を、あらかじめフォルダに用意して、それらが思ったとおりに、表示、再生されるようにレイアウトされたHTMLファイルを作成することです。
 このHTMLファイルを簡単に作成するためのソフトが、HTMLエディタといわれるものです。
 本講座では、HTMLエディタは、HOTALL Ver.2.0を使用します。


2、必要な材料(画像、映像、音声、文字など)を用意します。

○文字情報


○画像情報


○音声情報


○映像情報



3、素材の準備



4、ホームページの作成/HOTALLの基本的使い方

 ホームページを作成しましょう。 フォルダのなかの、「HOTALL」のアイコンをクリックして、「HOTALL」を起動します。

(1)新規ファイルの作成


(2)文字情報の入力といろいろな指定



○見出し文字
 見出しにする文字の大きさは「見出し文字サイズ」ボタンを押して指定します。これを指定すると、その文字の後に自動的に「改段落」が指定されます。

○通常の文字サイズの変更
 見出し以外の通常の文字の大きさは、大きさを指定したい文字列をドラッグして、反転表示させて、「通常の文字サイズ」ボタンを押して、サイズ指定をします。

○文字の大きさの変更
 大きさを指定したい文字をドラッグします。選ばれた文字が反転表示された状態で、「文字サイズを大きく」ボタンを押します。小さくするときは、「文字サイズを小さく」ボタンを押します。文字の大きさの状態をみながら、ボタンを押してサイズを指定することができます。

○アンダーライン、強調文字、斜体文字
 指定したい文字列をドラッグして反転表示させ、「アンダーライン」、「強調文字」、「斜体文字」ボタンを押します。

○文字の色の指定
 文字をドラッグして反転表示させて、「特定の文字の色指定」ボタンを押します。希望する色をパレットから選び、その色をクリックします。

○文字の位置寄せ
 文字位置の指定をしたい文字列を、ドラッグして反転表示させます。「左右中央寄せ」ボタンを押し、位置を指定します。文字列全体を左右に寄せて表示差せるときは、「インデント指定」ボタンを押して、文字列の左右も空白をいれます。


○リスト表示
 いくつもの項目などを、箇条書にしたり、番号などを付けてリストにするときは、「リスト表示」ボタンを押します。

○指定の解除
 いろいろな文字の指定を解除するときは、「いろいろな指定の解除」ボタンを押します。

○ラインをいれて、画面に区切りを付けよう
 ページ上に、区切りを付けたいときは、横線をいれることができます。横線をいれたい場所をクリックして、「横線」ボタンを押します。引かれた横線をダブルクリックして、その幅や長さを指定することができます。


■色の指定

○通常文字の指定
 「ドキュメント設定」ボタンを押し、ドキュメント設定ダイアログボックスを表示させます。「文字色」ボタンを押し、パレットから好みの色をクリックして選びます。特に指定した文字色以外の文字の色が全て変わります。

○背景色
 ページのバックカラーを指定することができます。通常は、グレー色になっていますが、四角をクリックし続けると、パレットが表示され、ここから好みの色をクリックして指定することができます。

○「見ていないリンク色」、「一度見たリンク色」、「クリック色」
 リンクされボタンなっている文字列の色、それがリンク先を見たときと、まだ見ていないときの色、またクリックされたときの色を指定することができます。


(3)画像の指定

○写真の取り込み(スキャナの使い方)

○画像の張り付け



(4)リンク


(5)Mailto(メール・トゥ)

(6)音声情報


(7)GIFアニメの作り方