情報基礎 講義メモ(第5回)

課題(今日の11:50まで)

• 演習(1)
  • http://www.media.osaka-cu.ac.jp/~kiyoshi/info_edu/2007_first_half/nagata_picture.pdf　のスライド15。
  • 先週の「演習(1)　来週の11:50まで＝スライド15」という小見出しの後の指示に従う。
  • できあがったファイルは、rgb-color.html という名称で public_html に置いておく。
• 演習(2)
  • http://www.media.osaka-cu.ac.jp/~kiyoshi/info_edu/2007_first_half/nagata_picture.pdf　のスライド25、26　をもとに発展させたもの。想像のものでも実在のものでもいいので、街路や、施設内の建物の配置や、部屋あるいは店のレイアウトや、鉄道あるいは道路の路線図や、古代・中世・異世界などの国や州の配置図などを、大枠を同じにし、その上のレイアウトを変えて2枚作る。Starsuit7図形描画か、それがうまく動かない場合には、Powerpointを用いる。
    
  • 先週の「演習(2)　来週の11:50まで＝スライド25、26」という小見出しの後の指示に従う。
  • 1つの画像を、「layout1.png」、もう1つの画像を、「layout2.png」、画像を呼び出すHTMLファイルを「layout.html」(先週の「演習(2)」の指示に従って、ダウンロードする)とし、すべて、public_html　の中に置く。

ウェブサイト作成の課題について(5月18日の11:50まで)

• 3ページ以上のウェブページからなるウェブサイトを来週の昼11:50までに完成させる。以下の条件を満足しなければならない。
• 3ページ以上(htmlファイルが3つ以上)で、トップページ(index.html)から子ページにきちんとリンクが張ってある。子ページからトップページへのリンクも張っておくこと。
• 気にいった(他人の)ウェブページ、3つ以上にリンクを張ること。それが、リストになっていること。
  
• 少なくても合計で1枚、画像が入っていること。
  
• 締め切りより遅くなった場合
  • 完成すれば、評点は遅れた分、ほんの少しずつ下がるが、評価はする。
  • 間に合わなかった者は、完成した時点で
    
    　kiyoshi◎gscc.osaka-cu.ac.jp と k-nakano◎ex.media.osaka-cu.ac.jp
    
    　(◎　を　半角の　@　で置き換えること)に完成したことを通知するメールを出すこと。遅れれば遅れるほど、評点がわずかずつ悪くなっていくが、完成すればともかく評価はするので遅れても完成させること。

今日、学ぶこと

• ハイパーリンクの設定
• 背景に色を着ける＝単一の色を着ける
• 背景を画像で敷き詰める
• 表の作り方
• 来週までの課題完成のためにウェブの構成、内容を考え、実際に作っていく。

Starsuite 7　描画機能の不具合とPowerpointの利用

Starsuite 7　描画機能の不具合

• Starsuite 7　では、レイヤ機能を用いると、「エクスポート」の際に、「中身のないファイルは支援できない」と表示されるなど、別にまずい点がないのに、うまく動かないことがあるようである。EAさんによると、名前を変えてファイルを保存し、Starsuite 7　を一度終了させてから、再び起動すると、ファイル自体には手を加えていない(終了したときのまま)でも、うまくいくことがあるようである。
  
• 先週、エラーが起きてしまった人は、Starsuite 7を起動させ、先週のできるだけ後の時点でのファイルを呼び出し、「エクスポート」を、もう1度、試してほしい。

WindowsのPowerpointの利用

上記の方法でうまくいかない学生については、WindowsのPowerpointの利用で乗り切ることにする。

Windowsを起動する

• Windowsの 起動方法:
  1. KDEパネルの左から6つ目ぐらいのアイコン(4色の旗のような、窓のようなものがはためいている)をクリックする。
     
  2. しばらくすると、Windowsのログイン画面が現れる(かなり時間が掛かる場合がある)。
     入力欄のそばでクリックしないと、入力できる状態にならないようである。入力できる状態になったら、Linuxと同じ、ログイン名とパスワードを入力する。
  • マウスカーソルが、飛び回って、居場所がわからなくなったりするので、入力する欄を切り替えるには「Tab」キー(アルファベットの「Q」の左)、「OK」ボタンのクリックの代わりに「Enter」キーを押す。
    
  3. 1〜2分で、Windowsのログイン後の画面が表示される(かなり時間が掛かる場合がある)。Windows　の「My Document」の中に「PowerPoint」といった名称のディレクトリ(フォルダー)を設けておく。
     「My Document」のウィンドウの中で、ファイル→新規作成→フォルダ
  
  

PowerPointの起動とファイル操作、表示

• PowerPointの起動
• 下記、ドラッグする(マウスのボタンを押し続けたまま、マウスを引きずる)手法と、メニューツリーの分岐点でクリックする(マウスのボタンを一度押したら手を離す)手法とがある。クリックの方が容易。
• (Windowsの窓の左下の)スタート→プログラム(→Microsoft Office)→PowerPoint
  
• ファイルメニュー
• できるだけショートカットキーを覚えること：【】で囲ったのは、覚えたほうがよいショートカット
  • 「ファイル」　の下(「ファイル」というメニューを呼び出すには、【alt + f】)
    
  • 新規作成　　　alt + f → n、【ctrl + n】
  • 開く　　　alt + f → o　(既存ファイルを開く)、【ctrl + o】
  • 上書き保存　　　alt + f → s、【ctrl + s】
    .
  • 名前を付けて保存　　　alt + f → a
  • HTML形式で保存　　　alt + f → h　(Webページ[いわゆるホームページ]用)
    
  • 印刷　　ctrl　+　p
    

真っ白いスライドを設ける

• 新規ファイルを開く
  • 新規作成　　　【alt + f】 → n、【ctrl + n】
• 新規スライドを選ぶ
  • 出てきたダイアログ(指定画面)で「新しいプレゼンテーション」
  • Powerpointで、挿入　→　新しいスライド　　右側の「スライドレイアウトの適用」で、たとえば、上から4段目の左側、「白紙」というレイアウトを選ぶ。

図形作成機能

• 画面下辺に図形作成関連のメニュー
  • 線分、矢印線、長方形、楕円、横書きテキスト、縦書きテキスト
  • ペンキ缶＝塗りつぶしの色、筆＝筆の色、線の太さ、線の種類、矢印の向き
    
  • 図形の調整
    • グループ化
      • グループ化とグループ化解除
    • 順序＝図形の重なりの制御
    • 配置、整列＝特定の線に図形の位置をそろえる、均等配置する
    • 回転、鏡像反転
  • オートシェイプ→基本図形

Powerpointで図を作成してウェブページから呼び出す

• ウェブページの中で、図を用いたい場合、Powerpointで作図した後、.png 形式で出力し、それをHTMLファイルで呼び出すのが便利である。Powerpointで作成した図の場合、コピーしたり、拡大縮小したり、左右反転や回転したりするのが容易である。また、基本的な図形パターンや修飾文字パターンがたくさん用意されている。
  
• Powerpointで、挿入　→　新しいスライド　　右側の「スライドレイアウトの適用」で、上から4段目の左側、「白紙」というレイアウトを選ぶ。もう一度、挿入　→　新しいスライド　　右側の「スライドレイアウトの適用」で、上から4段目の左側、「白紙」というレイアウトを選ぶ。最初のスライドを模様替えの前、後のスライドを模様替えの後とする。
  
• 1枚目のスライドに、部屋の模様替えの図を描く。まず、柱と壁を作る。できたら、柱と壁の全部を選んでグループ化(図形の調整　→　グループ化)する。グループ化した柱と壁を選び、編集→コピー　　2枚目のスライド(今は真っ白)のどこかをクリックし、編集→ペースト。
  
• 1枚目のスライドに、机や椅子の図形を作って配置する。椅子などは、台形と楕円などを組み合わせて作り、グループ化する。グループ化した椅子をコピーしたりする。
  机や椅子を全部選び、編集→コピー　　2枚目のスライド(今は、柱と壁のみ存在)のどこかをクリックし、編集→ペースト。机や椅子の位置を動かす。 適当な名前(たとえば　layout.ppt )でファイルを保存する。
  
• まず1枚目のスライドを選んでいる状態で、ファイル　→　名前を付けて保存　→　ファイル保存のダイアログの中で、下の「ファイルの種類」欄で、.png 形式を選ぶ。ファイル名は、英数字とする。保存場所は、「My document」の中の「Powerpoint」とする。「保存」とすると、このファイル形式で出力(エクスポート)するのが、現在のスライドのみかスライド全部かと聞いてくるので、「現在のスライド」をクリックする。ファイル名は、layout1.png　とする。
  次に、2枚目のスライドを選んでいる状態で、同様の操作をする。ファイル名は、　layout2.png　とする。
  

画像(「.png」)ファイルを移動

• 下図の「Powerpoint」の中にある画像ファイル、すなわち、layout1.pngとlayout2.pngを、「public_html」に移動する。Windowsの中で作業しても、Linuxの中で作業してもよいが、Linuxの中で作業する方が、わかりやすいであろう。

　　　　　　　　　　　　ディレクトリの構造

今日の内容

ハイパーリンクの設定

• HTMLファイル内のハイパーリンクについて学ぶ。
  　
  • 飛び先が同じHTMLファイルの中にあるとき。
    • http://www.media.osaka-cu.ac.jp/~kiyoshi/info_edu/2007first_half/color_table.htmlを表示し、表示　→　ソース　でソースコード(HTML命令語をそのまま見る形式)を見る。

• HTMLファイル間のハイパーリンクについて学ぶ。
  
• 飛び先のHTMLファイルがindex.htmlと同じディレクトリの中にあるとき。
  • 飛び方＝<body>と</body>との間に次の行を入れる。
    
    <a href="xxxx.html">○○○の自己紹介</a>に行く<br>
  
  　
  • 戻り方＝飛ぶ先のHTMLファイルの<body>と</body>との間(通常、ページの先頭かページの末尾)に次の行 を入れる。
    
    <a href="index.html">TOP</a>に戻る<br>
    
• 飛び先のHTMLファイルがたとえば、index.htmlと同じディレクトリの中の子ディレクトリ「education」にあるとき。
  
  • 飛び方＝<body>と</body>との間に次の行を入れる。
    
    <a href="education/xxxx.html">○○○の自己紹介</a>に行く<br>
    
  • 戻り方＝飛ぶ先のHTMLファイルの<body>と</body>との間(通常、ページの先頭かページの末尾)に次の行を入れる。
    
    <a href="../index.html">TOP</a>に戻る<br>
  
  　

背景に色を着ける

• 背景への色の着け方を学ぶ。
  
  • 　<body bgcolor="#RRGGBB">
    　ここで、RRは赤成分　00から16進数のffまで。GGは緑成分　00から16進数のffまで。BBは青紫成分　00から16進数のffまで。
    
    #000000＝黒　#ffffff＝白　#ff0000＝赤　#00ff00＝緑　#0000ff＝青紫
    #ffff00＝黄　#ff00ff＝マゼンタ(牡丹色)　#00ffff＝シアン(水色)
    
    16進数は次のように大きくなっていく。
    00→01→(10進数と同じ)→09→0a→0b→0c→0d→0e→0f→
    10→11→(10進数と同じ)→19→1a→1b→1c→1d→1e→1f→
    20→21→(10進数と同じ)→29→2a→2b→2c→2d→2e→2f→
    
    　　↓
    　　あと、30−3f、40−4f、50−5f　と大きくなっていく。
    　　↓
    
    90→91→(10進数と同じ)→99→9a→9b→9c→9d→9e→9f→
    a0→a1→a2→a3→…→a8→a9→aa→ab→ac→ad→ae→af→
    
    　　↓
    　　あと、b0−bf、c0−cf、d0−df、e0−ef　と大きくなっていく。
    　　↓
    
    f0→f1→f2→f3→…→f8→f9→fa→fb→fc→fd→fe→ff　。2桁はこれでおしまい。
    
    
  • http://www.media.osaka-cu.ac.jp/~kiyoshi/info_edu/2007first_half/color_table.htmlを表示
    
• 背景に画像を敷き詰める。
  • 　<body background="XXXXXX.png">
    　ここで、XXXXXは、背景に使う画像ファイルの名称。この画像ファイルは、そのウェブページのHTMLファイルと同じディレクトリに入れておくこと。
    詳しくは、
    http://www.media.osaka-cu.ac.jp/~kiyoshi/kyoto/streets.html　を参照。
    このほかに、http://www.media.osaka-cu.ac.jp/~kiyoshi/index2.htmlで、背景色の指定、リンク、リンクのリスト化、順序の付かないリストと順序の付くリストなどについて示しているので、ソースコードを見て参考にしてほしい。

表の作り方

• 表の作り方を学ぶ。
  • 永田先生の、教材ページを開いておく。学情情処教育のトップページ→左側の下から6番目「ホームページの作成について」→「Webページを作ろう」→「HTMLの書き方のヒント」→「表」
  • index.htmlに書き加えてもよいし、index.htmlがぐちゃぐちゃになるのが嫌な人は、別な名前にして、それをいろいろ修正してもよい。
    
  • tr　がテーブル・レコード。レコードとは、1件のデータ。表の1行にあたる。thは、テーブル・ヘッダー。表頭を意味する。表頭とは、下記を参照。tdは、テーブル・データ。1件のデータの中の１つ１つのデータ項目、表でいえば1つ1つの「欄」を意味する。
  
  
  • 表の基本的パターンは、以下のとおり。以下は、2行3列の表になる。
    
    <table>
    <tr><th>表頭1</th><th>表頭2</th><th>表頭3</th></tr>
    <tr><td>レコード1の項目1</td><td>レコード1の項目2</td><td>レコード1の項目3 </td></tr>
    <tr><td>レコード2の項目1</td><td>レコード2の項目2</td><td>レコード2の項目3 </td></tr>
    </table>
  
  　
• 表の例：
  • http://www.media.osaka-cu.ac.jp/~kiyoshi/info_edu/2007first_half/color_table.htmlを表示

画像の呼び出し方

• 画像ファイルの入手方法について。今回は、Starsuite　7　か　Powerpoint　で作って、エクスポートした画像を用いる。それ以外の入手方法としては、ペイントソフトで作る方法、イメージスキャナーで取り込んだデータを画像ファイルの形式で保存する方法、デジタルカメラで撮った写真データを画像ファイルの形式で保存する方法などがある。
  
• 画像の呼び出し方を理解する。
  • 永田先生の、教材ページを開いておく。学情　情処教育のトップページ→左側の下から6番目「ホームページの作成につ いて」→「Web ページを作ろう」→「HTMLの書き方のヒント」→「画像」
  • workディレクトリの中の、index.html をKWriteで開く
  • .htmlファイルをダブルクリックすると、Konquerorなど、ウェブブラウザの元で開かれる(システム提供者の設定によって変わる)。Konquerorで開いたときには、中身をみるだけで、書き直すことができない。
    
  • KWriteで開くには、index.htmlを、パネルの左から5〜6番目のKWriteのアイコンの上にドラッグする。
    
  • body　と　/body　との間のどこかに、次の行を入れる(永田先生のページから、コピー&ペースしてもよい)。
    
    　　　<img src="画像ファイル名.拡張子" alt="画像の代わりに表示する文字"><br>
    
  • ALTでは、(1)通信速度が遅いので画像表示を止めている人のために文字を示す、(2)目が不自由で、読み上げソフトを使っている人用に、画像の箇所で読み上げるための文字を示す−−の2つの役割のために、文字を指定する。
    
  • デジタルカメラ画像のように、大きなサイズの画像データを表示する際には、2005年の第5回の後ろの方に示すように、サムネールをクリックしたら大きな画像が表示されるようにする。

以上

(第4回)←　↑(この期の目次)　→(第6回)