Microsoft Word - 公開講座テキスト2006ver-01.doc

Size: px

Start display at page:

Download "Microsoft Word - 公開講座テキスト2006ver-01.doc"

けいざぶろうはまもり
7 years ago
Views:

1 平成 18 年度奈良教育大学公開講座ならやまオープンセミナーホームページを作ろう HTML から BLOG まで 2006 年 8 月 16 日 ~18 日奈良教育大学情報処理センター/ 附属教育実践総合センター 2007/01/04 Page-1

2 1. ホームページはどうやって作るか? ホームページはどうやって公開するか? HTML って何? HTML の基本的な規則簡単な HTML 文書を作って表示してみましょうここまでにでてきた<タグ>の解説色を指定しようレイアウトのための<タグ> リンク絵を描いて貼り付けよう壁紙を選ぼうタグのまとめ基本編サンプルページホームページ公開のためサーバーへファイルを転送する複数のページを作るデジカメ画像の修正補正 (Photposhop の活用 ) ホームページビルダーを使ってみようスタイルシートに挑戦 BLOG を始めよう /01/04 Page-2

絵を描いて貼り付けよう... 12 11. 壁紙を選ぼう... 14 12. タグのまとめ基本編... 16 13. サンプルページ... 20 14. ホームページ公開のためサーバーへファイルを転送する... 25 15.

3 1. ホームページはどうやって作るか? 手で書く <タグ>を打つともいう専用ソフトを使う IBM ホームページビルダーが有名ワープロやエクセルの文書を HTML に変換する etc いろいろな方法があるが結局は HTML ファイルというものを作ればよい (どれでもできるようになって欲しい) 2. ホームページはどうやって公開するか? 自分のパソコンで作った HTML ファイルをサーバーというコンピュータに転送する (ファイル転送 =FTP という) 手で書くソフトで作る WORDで作る etc HTMLファイル <html> こんにちは藤原です </html> ファイル転送インターネット WWWサーバーコメント: 最近注目されている BLOG は HTML ファイルを意識しなくてもできてしまうので簡単でもカスタマイズ( 自分流にアレンジすること)するためにはやはり HTML と後でお話しする STYLE の知識が必要になります 2007/01/04 Page-3

ればよい (どれでもできるようになって欲しい) 2. ホームページはどうやって公開するか?

4 3. HTML って何? Hyper Text Markup Language の略? Hyper ( 超 ) Text ( 文書 ) 並上 [SUPER] もっと上 ( 超 ) [HYPER] ものすごい文章という意味らしいどこがすごいのか??では Markup とはそこで 2007/01/04 Page-4

5 HTML の文法に従って書いた文書 (HTML 文書 )をファイルとして保存すると HTML ファイルとなる 4. HTML の基本的な規則 <タグ>はブラウザーへの指示です代表的なブラウザーである Internet Explorer は米国人ですですから <タグ>は基本的に英語ですそして半角英数文字しか使えません ( 全角文字を含んではいけません) 2007/01/04 Page-5

6 たとえて言うと HTML 文書は演劇のシナリオに似ていますブラウザーが上演される舞台 <タグ>はト書きそれ以外の部分がせりふにあたります 2007/01/04 Page-6

7 5. 簡単な HTML 文書を作って表示してみましょう 5.1. スタートプログラムアクセサリからメモ帳を開く 5.2. とりあえず以下のように入力する( 名前住所や所属は自分のものにする) <TAG>は必ず半角英数字で打つ <title>と</title>の間はローマ字でも日本語でもOK エル(l)といち(1)に注意してください 5.3. 一応入力したら名前を付けて各自の Z:ドライブ = マイドキュメントに保存するファイルの名前は必ず homepage.htm としてください (この講座での約束です) 2007/01/04 Page-7

<title>と</title>の間はローマ字でも日本語でもOK エル(l)といち(1)に注意してください 5.3.

8 5.4. このファイルを IE(インターネットイクスプローラ)で見るマイドキュメントを開いて今保存した homepage.htm を見つけてダブルクリックすればよい 5.5. インターネットイクスプローラが開いてこのように見えるはずこれから内容を書き足していく注意 : メモ帳から HTML ファイルを開くときファイルの種類をすべてのファイルとしないと homepage.htm が見つからないのであわてないでください 2007/01/04 Page-8

9 6. ここまでにでてきた<タグ>の解説 <html> </html> <head> </head> <title> </title> <body> </body> <h1> </h1> <hr> <br> HTML 文書全体の開始と終了ヘッド情報の開始と終了タイトルの開始と終了本文の開始と終了見出し(Heading) タイプ 1 の開始と終了水平罫線 (Horizontal Rule)を引く改行 (Break)する <タグ>の書き方は半角英数しか使ってはいけないこと大文字小文字はどちらでもかまわない <HTML> <html> <Html> どれでもOK < >に対応して</ >があって <タグ>の効果の範囲を決めているしかし例外があるコメント: 最後の二つには対応する</hr> とか </br> というものはないこのようなものは最近の書き方では <br/> とか <hr/> という書き方が推奨されている 7. 色を指定しよう 7.1 背景 (Back Ground)に色を付けよう <body> を <body bgcolor=#ffffcc> と変更してみよう色の指定は色の記号 ( 光の三原色 [ 赤緑青 ]の強さを指定する) # 方式と色の名前 ( pink green red ) 方式がある 7.2 色の記号 # 方式の説明三原色の割合が同じなら黒 ~ 灰色 ~ 白と変化するこれをクレースケールという三原色の割合を変えると色が付く 2007/01/04 Page-9

しかし例外があるコメント: 最後の二つには対応する</hr> とか </br> というものはないこのようなものは最近の書き方では <br/> とか <hr/> という書き方が推奨されている 7. 色を指定しよう 7.

10 色が想像しにくければここを見よう大学 HP 在学生の方へ学内パソコン利用の手引きホームページの作成色の記号ここで各自のページに背景色を指定してください <body> のところを <body bgcolor=#??????> と書き直しますそしてメモ帳で追加修正したらファイル上書き保存しエクスプローラの更新ボタンで確認する 7.3 色の名前自分の名前だけ文字の色を変えてくださいたとえばこんにちは <font color=pink> 藤原公昭 </font>ですここで color= の指定には色の記号でも色の名前 ( 英語 )でも良いどういう色の名前があるかは大学 HP 在学生の方へ学内パソコン利用の手引きホームページの作成色の名前でみてくださいあるいはキーワード検索で色の名前としてみてください 8. レイアウトのための<タグ> 8.1 中央揃え最初の挨拶文をセンター揃えにして下さい 2007/01/04 Page-10

3 色の名前自分の名前だけ文字の色を変えてくださいたとえばこんにちは <font color=pink> 藤原公昭 </font>ですここで color= の指定には色の記号でも色の名前 ( 英語 )でも良い

11 <center> こんにちは<br> <font color=green> 藤原公昭 </font><br> です </center> そしてブラウザーの窓の幅を狭くしたり広くしたりしてみて下さい 8.2 箇条書き(LIST) 以下のように自己紹介の内容を箇条書きにしてください <html> <head> <title> 藤原公昭のホームページ</title> </head> <body bgcolor=#ffffcc> ( 背景色を指定する #ffffcc はクリーム色 ) <center> (ここから画面のセンターにそろえる) <h1> こんにちは<br> <font color=green> 藤原公昭 </font><br> ( 文字色を変える) です<br> </h1> </center> (センター揃えをやめる左揃えに戻る) <hr> (けい線を引く) <ul> ( 箇条書きの開始 ) <li> 青森県弘前市生まれ岩手県盛岡市出身 <li> 奈良教育大学教育学部教授 <li> 奈良大学非常勤講師 <li> 趣味は畑仕事とスキー </ul> ( 箇条書きの終了 ) </body> </html> ここで <ul> 番号なし箇条書き(Un-ordered List)の開始 <li> リストの項目 </ul> 箇条書きの終了上の図のように箇条書きのマーク( )が各項目に付けられます (マークを付けるだけなら箇条書きのタグなんて必要ないのではと思われた方は <li>のどれかを思いっきり長く書いてみてください <li> 青森県弘前市生まれおやつはいつも青いリンゴでした岩手県盛岡市出身石川啄木宮沢賢治は郷土の大先輩ですもし民主党の小沢一郎氏が総理大臣になれば岩手県では8 人目となります ) 2007/01/04 Page-11

<h1> こんにちは<br> <font color=green> 藤原公昭 </font><br> ( 文字色を変える) です<br> </h1> </center> (センター揃えをやめる左揃えに戻る) <hr> (けい線を引く) <ul> ( 箇条書きの開始 ) <li> 青森県弘前市生まれ岩手県盛岡市出身

12 参考 : 箇条書きのマークを画像にしたい <ul style="list-style-image:url(naruto.gif)"> <li> 荻窪ラーメン <li> 博多ラーメン <li> 天理ラーメン </ul> 参考 : 箇条書きに順番を付ける(Ordered List) <ol> <li> 阪神 <li> 中日 <li> 横浜 </ol> 9. リンクホームページの存在理由はリンク= 他のページへ飛んでいけることにあります各自のページに奈良教育大学ホームページへのリンクを以下のように作ってください <a href= 奈良教育大学ホームページへ</a><br> <a>をアンカー(anchor= 錨 )タグと言います Href=は Hypertext Reference( 超文書参照 :エイチレフと読んでください)の略で飛んでいきたいホームページのアドレス(URL)を書きます <a href=ページのアドレス> 何かの文字 ( 画像でも良い)</a> 何の文字をクリックするとページのアドレスに飛んでいくどこかのページにある情報の本体 = 船からでている錨がここに打ち込まれているというイメージ 10. 絵を描いて貼り付けよう画像のファイルがすでにあれば Image タグで表示させる <img src= 画像ファイル名 > Image Source( 画像の元は) と読む 2007/01/04 Page-12

リンクホームページの存在理由はリンク= 他のページへ飛んでいけることにあります各自のページに奈良教育大学ホームページへのリンクを以下のように作ってください <a href=http://www.nara-edu.ac.

13 画像のファイルには二種類ある自然画像 JPEG ファイルデジカメスキャナーなどイラスト GIF PNG ファイルお絵かきソフト設計図面など色の数が少ない(256 色以内 )なら後者が使われることが多い (パレット/インデックス方式とも言う) ファイル名の拡張子の由来は画像圧縮形式の違いによる 10.1 ペイントで絵を描いて GIF ファイルを作る考え方 : お絵かきソフト=ペイントで自由に描く必要な範囲だけを指定し画像編集ソフト=PhotoShop にコピーペーストする必要なら拡大縮小するホームページに貼り込むために背景を透明にする GIF 形式に圧縮してファイルに保存するではアクセサリペイントを起動し自由に絵を描くペイントの画像の必要な部分を囲って( 点線四角ツール) 編集コピーする Adobe Photoshop Elements 3.0 を起動する最初の選択は写真の編集と補正とするファイル新規クリップボードからとするとペイントで選択した範囲が表示されるこのままでファイル保存しても良い( へ) またイメージ図形解像度で画像の大きさを変更することもできる背景を透明にするためにはさらに以下の操作を行うイメージモードでインデックスカラーにチェックが入っていることを確認しカラーテーブ 2007/01/04 Page-13

1 ペイントで絵を描いて GIF ファイルを作る考え方 : お絵かきソフト=ペイントで自由に描く必要な範囲だけを指定し画像編集ソフト=PhotoShop にコピーペーストする必要なら拡大縮小するホームページに貼り込むために背景を透明にする GIF 形式に圧縮してファイルに保存

14 ルを選択する ( カラーテーブルが選択できないときはインデックスカラーを一度選択することでインデックスカラーになる ) カラーテーブルのスポイトをクリックし画像の背景の位置でクリックすると背景が市松模様となるこれで背景が透明になったファイル保存するこのときファイル形式は GIF であることを確認する以上ですややこしいのでよくわからなくなったら聞いてくださいこれで例えば apple.gif という画像ファイルができたので( 名前は各自で違いますが) これを表示するために生まれは青森です <img src=apple.gif> の様に適当なところに Image タグを書けば良いのです 10.2 どんな画像でもOK デジカメの写真でもスキャナーで撮った画像でも画像ファイルになってさえいれば Image タグで表示することができますので試してみてくださいデジカメ写真の修整も Photoshop のお得意ですので後の講義で説明します但しホームページは基本的に全世界に公開されるものですので著作権や肖像権に注意してください 11. 壁紙を選ぼうホームページの印象はデザインと壁紙 = 背景の画像で決まります自分の趣味にあった壁紙を選んでみましょう( 自作してもいいですね) 11.1 壁紙 (Wall Paper)を選んで取り込む大学ホームページの共同利用 PC 利用の手引きホームページ作成の壁紙 1 か壁紙 2 を 2007/01/04 Page-14

2 どんな画像でもOK デジカメの写真でもスキャナーで撮った画像でも画像ファイルになってさえいれば Image タグで表示することができますので試してみてくださいデジカメ写真の修整も Photoshop のお得意ですので後の講義で説明します但しホームページは基本的に全世界に公開

15 見て下さいその他にも GOOGLE や YAHOO で素材集というキーワードで探すと壁紙 (Wall Paper)が見つかります ( 素材集から借用する際は注意事項をよく読んでください作成者名を明記して下さい使用前後にメールで連絡して下さい等を要求されている場合はそれにしたがって下さい ) 11.2 取り込む手順気に入った壁紙の上で( 右 )ボタンをクリックしポップアップしたメニューで名前を付けて画像を保存 ( 左 )クリックするファイル名はそのままでドライブを Z: (マイドキュメント)とし OK とすれば壁紙の画像のファイルが Z:ドライブ(マイドキュメント)に保存されるこのとき( 作者がつけた)ファイルの名前をメモしておくこの壁紙をホームページに取り込むためには <body bgcolor=# > の代わりに <body background=00680.jpg> の様に壁紙のファイル名を background= で指定します 11.3 壁紙の色合いを変えたい場合壁紙の色が濃すぎて文字が読みにくいあるいは壁紙の色合いを微妙に変えたい場合 Photoshop でそのファイルを読み込み画質調整カラー色相彩度などのメニューで変えてみます 2007/01/04 Page-15

2 取り込む手順気に入った壁紙の上で( 右 )ボタンをクリックしポップアップしたメニューで名前を付けて画像を保存 ( 左 )クリックするファイル名はそのままでドライブを Z: (マイドキュメント)とし OK とすれば壁紙の画像のファイルが Z:ドライブ(マイドキュメント)に保存される

16 気に入ったものができたらファイル保存で上書き保存するか別名で保存します 11.4 壁紙の表示方法を変える( 応用編 ) 壁紙は小さな画像がタイルのように敷き詰められるのが普通ですが風景などの大きな画像を壁紙にする場合 A. 繰り返しをしない(1 枚のみ表示する) B. スクロールしない( 画面に対して固定される) としたい場合がありますこれは以下のようにします( は壁紙の画像ファイル名です) A:<body background= style="background-repeat:none"> 繰り返しをしない B:<body background= style="background-attachment:fixed"> 背景画像を固定 A+B:<body background= style="background-repeat:none; background-attachment:fixed"> 12. タグのまとめ基本編基本的なタグの機能をここでまとめておきます 12.1 BODY <body bgcolor=( 色 ) background=( 背景の画像 ) text=( 色 ) link=( 色 ) vlink=( 色 ) alink=( 色 )> 色は色コード(#FFFFCC)または色名 (pink green)どちらでも良い bgcolor= 背景色か background= 壁紙ファイル名のどちらかにする背景が暗い場合 text=で文字色を明るくする link=はリンクの文字色 ( 通常は青 ) vlink=はすでに行ったことのあるリンク(visited)の文字色 ( 通常は暗い青 ) alink=はリンクをマウスでクリックする時 (active)の色 ( 通常は赤 ) 12.2 見出し(Heading) 文字の大きさ <h1> 見出し文字 1</h1> <h2> 見出し文字 2</h2> <h3> 見出し文字 3</h3> <h4> 見出し文字 4</h4> <h5> 見出し文字 5</h5> 1 行の見出しにのみ使う長い文章の文字サイズや単語の文字サイズを変えたい場合は<font size> を使うこと副作用として改行されるので注意 2007/01/04 Page-16

style="background-attachment:fixed"> 背景画像を固定 A+B:<body background= style="background-repeat:none; background-attachment:fixed"> 12. タグのまとめ基本編基本的なタグの機能をここでまとめておきます 12.

17 12.3 FONT( 字体 ) <font size=1>サイズ=1</font> <font size=2>サイズ=2</font> <font size=3>サイズ=3( 標準 )</font> <font size=4>サイズ=4</font> <font size=5>サイズ=5</font> <font size=6>サイズ=6</font> 文字色も指定する場合は <font color= 色 size= 大きさ >と両方書いても良い FONT の入れ子 (Nesting) ここは黒い文字とする <font color=red>ここから赤い文字 <font color=blue>ここからは一時的に青い文字 </font> 赤い文字に戻る </font> 黒い文字に戻る 12.4 改行パラグラフ罫線 <br> 改行 <p> </p> パラグラフ( 段落の開始と終了 : 副作用として 1 行の空白 ) <hr> 罫線 (Horizontal Rule) <hr size= 線の縦幅 (ドット数 ) width=50%( 画面幅の半分 )> という指定もできる 12.5 リスト( 箇条書き) (1) 番号付きリスト(Ordered List) 今週の順位 <ol> <li> 中日 <li> 読売 <li> 広島 </ol> 自動的に番号がつけられ段が少し下がる (2) 番号無しリスト(Unordered List) 今週のトピック <ul> <li> 雨が降った <li> 床屋に行った <li> 風邪を引いた </ul> 箇条書きのマーク( )がつけられ段が少し下がる (</ol>や</ul>を忘れると段が下がったままになるので注意 ) 2007/01/04 Page-17

4 改行パラグラフ罫線 <br> 改行 <p> </p> パラグラフ( 段落の開始と終了 : 副作用として 1 行の空白 ) <hr> 罫線 (Horizontal Rule) <hr size= 線の縦幅 (ドット数 ) width=50%( 画面幅の半分 )> という指定もできる 12.

18 12.6 画像の配置 <img src= 画像ファイル>で指定した画像の配置の方法普通には改行 <br>の後なら画面の左に配置される (1) 画面の中央に配置 <center> <img src= 画像ファイル名 > </center> (2) 画面の左に配置して文字を右に回り込ませる <img src=deer.gif align=left> ここの文字は<br> 画面の右に回り込む <br> 回り込みを止める <br clear=all> ここからは画面の下に文字が書かれる (3) 画面の右に配置して文字を回り込ませる <img src=deer.gif align=right> ここの文字は<br> 画面の左に回り込む <br> 回り込みを止める <br clear=all> ここからは画面の下に文字が書かれる 12.7 BLOCKQUOTE( 段落 ) 段を下げる<br> AAAAA<br> <blockquote> この間は一段下がる<br> BBBBB<br> <blockquote> もう一段下がる<br> CCCCC<br> </blockquote> 一段戻る<br> BBBBB<br> </blockquote> 元に戻る<br> AAAAA<br> 2007/01/04 Page-18

gif align=left> ここの文字は<br> 画面の右に回り込む <br> 回り込みを止める <br clear=all> ここからは画面の下に文字が書かれる (3) 画面の右に配置して文字を回り込ませる <img src=deer.

19 12.8 TABLE の応用 (1) 二段組 <center> <table border=0> <td width=50% valign=top> こちらは<br> 左の段になる<br> LEFT-1<br> LEFT-2<br> LEFT-3<br> LEFT-4<br> <td width=50% valign=top> こちらは<br> 右の段になる<br> RIGHT-1<br> RIGHT-2<br> RIGHT-3<br> </table> </center> (2) 表組 <table border=2> <tr> <th>98 年度 <th>おんな<th>おとこ<th> 計 <tr> <td> 国語 <td>100<td>50<td>150 <tr> <td> 社会 <td>25<td>33<td>58 </table> tr =Table Record 横 1 行の開始 td =Table Data 個々のデータ項目 th= 見出しの項目 ( 太字で中央揃えになる) border= 枠の線の太さ(ドット) (3) 表の応用絵を並べる <table border=2> <tr> <td><img src=fujiwara.gif> <td><img src=deer.gif> <tr align=center> <td>father<td>& Son </table> align= right 右揃え left 左揃え center 中央揃え 2007/01/04 Page-19

<tr> <td> 社会 <td>25<td>33<td>58 </table> tr =Table Record 横 1 行の開始 td =Table Data 個々のデータ項目 th= 見出しの項目 ( 太字で中央揃えになる) border= 枠の線の太さ(ドット) (3) 表の応用絵を並

20 12.9 タグの範囲についての注意 <center> <font color=red> </center> </font> これは互い違いでだめ <font color=red> 赤い字になる <font color=blue> 青い字になる </font> 赤い字に戻る </font>もとの色に戻るこれは入れ子 (NEST) で良い表示が思い通りにならない場合互い違いを疑う 13. サンプルページ自己紹介趣味のこと関心のあることなど自由に書き足してサンプル程度のページを作ろうこのサンプルの HTML ファイルの全体を示します 2007/01/04 Page-20

これは入れ子 (NEST) で良い表示が思い通りにならない場合互い違いを疑う 13.

21 <html> <head> <title>home Page of Fujiwara Kimiaki</title> </head> <body bgcolor=#ffffcc> <center> <h3> 藤原公昭 </h3> <h4>fujiwara Kimiaki</h4> <img src=fujiwara.gif border=1> <br> <a href= 奈良教育大学教育学部 </a><br> 小学校教員養成課程 <br> ラテン語専攻 <br> 2 回生 <br> <br> </center> <hr> <center><h4>プロフィール</h4></center> <ul> <li> 1948 青森県弘前市生まれ <li> 岩手県盛岡市へ転居 <a href= 小岩井農場 </a>の近く <li> 1966 盛岡第一高校卒業大学入学で上京 <br> <li> 奈良に来るまで 27 年間東京都民 <li> 1994 奈良教育大学教育実践研究指導センター教授 </ul> <hr> <center><h4> 小学校ラテン語課程 </h4></center> 世界でもユニークな学科です少数精鋭で教官学生併せて1 名しかいません卒業生も皆無です <br> Da pacem, Domine, in diebus nostris. <br> <br> 担当教官 ( 兼学生 ) <a href= 藤原公昭 </a> <hr> <center><h4> 中世ルネッサンスの音楽 </h4></center> 古い音楽に興味があり研究をしている最近は CD やコンサートでも取り上げられることが多く好ましい傾向である <br> 関連サイト<br> <ul> <li><a href= Consort 千葉大学桧垣研究室 </a> <li><a href= Kanzaki オリジナル楽器オーケストラの楽しみ</a> </ul> <hr> <center><h4> 海外雄飛か?</h4></center> 残念ながら小学校にラテン語科のある学校は少ないフランスかドイツに活躍の場を求めたい <hr> お手紙を下さいは <a href=mailto:z912345@student.nara-edu.ac.jp> z912345@student.nara-edu.ac.jp</a> <hr> <a href= <img src=deer.gif> 奈良教育大学 HomePage へ </a> </body> </html> ポイント: ポートレートや似顔絵デジカメ写真の利用項目毎に見だしと罫線見やすくわかりやすくメリハリを付けて箇条書きの活用テーブルの活用 2007/01/04 Page-21

22 ここまでのまとめと目標 A: 内容の追加修正 1. メモ帳で HTML ファイル(homepage.htm)を開く ( ファイルの種類ですべてのファイル*.* を指定 ) 2. 内容の追加編集上書き保存 3.IE で更新ボタンで確認 B: 壁紙を選ぶ <BODY BACKGROUND= 画像ファイル名 > 壁紙の画像は学内 PC 利用の手引きを見るか WEB で素材集を検索する C: 基本的なタグを使ってみる <BR> 改行 :<HR> 横けい線 : <H?> 見出し</H?> <FONT> 文字色サイズ</FONT> <H1> 最大 <H6> 最小 size=1~7( 大 ) color= 色の名前色の記号 <CENTER> 中央揃え</CENTER> リスト= 箇条書き C1: 番号無し箇条書き <UL> </UL> C2: 番号付きリスト <OL> </OL> C3:アイコン付きリスト下の通り <ul style="list-style-image:url(flag.gif);"> <li> 阪神アイコンの画像ファイル名が flag.gif <li> 巨人 <li>ソフトバンク </ul> すべてのリストに同じアイコンをつけるのであれば </head>の前に <style type="text/css"> LI { list-style-image:url(flag.gif);} </style> と書く文字色の指定 <BODY TEXT=? LINK=? VLINK=?>で指定する TEXT= 文字の色 LINK=リンクの文字の色 VLINK= 見たことのあるリンクの文字の色 (Visited) D: レイアウトの基本テクニック <Table>を覚えるあい ABCD うえお EFG <table border=1> <tr> <td>あい<td>うえお <tr> <td>abcd<td>efg </table> border=0 とすると区切り線が見えなくなる 2007/01/04 Page-22

23 E: 4 項目の内容を作っていこう 1. 自分のこと家族のこと 2. 仕事のこと 3. 興味のあること 4. 将来展望希望 F: 項目毎に区切りを入れる( 罫線またはラインの図形を素材集からもらってくる) プロフィール仕事の紹介興味のあること将来展望 G: コース担当教員の紹介をテーブルで作る ( 家族の紹介でも結構です) 梅村佳代教育学日本近世民衆教育史研究岡本定男教育学芸術教育運動の歴史的研究氏名から先生のホームページへリンクさせる <table border=1> <tr> border( 縁取りの線の太さ)は適当に変えてみる <td> <a href= 梅村佳代 </a> <td> 教育学 <td> 日本近世民衆教育史研究 <tr> <td> <a href= 岡本定男 </a> <td> 教育学 <td> 芸術教育運動の歴史的研究 </table> H: お手紙下さい(mailto) <a href=mailto:a01234@student.nara-edu.ac.jp>お手紙下さい</a> ここに自分のメールアドレスを書くただし SPAM( 迷惑メールが増える可能性がある) 2007/01/04 Page-23

24 デジカメは希望者に貸しますスキャナーは情報館 2F 実践センターメディアルームなどで使えます携帯カメラも貸与できますなお各自のホームページが学外から見えることに同意しない場合その旨記して下さい ( 学外に対してアピールする内容であることを期待しますがどうしてもという場合は学外からのアクセスができないような設定をします ) 自己紹介において不必要にプライバシーに関わることを書かないように( 誕生日や電話番号住所などは危険です) 2007/01/04 Page-24

25 14. ホームページ公開のためサーバーへファイルを転送するある程度できた段階でサーバーに転送して全世界にホームページを公開しますファイル転送をすると受講者一覧のページからリンクされるようになります Z: Drive homepage.htm 画像ファイル壁紙ファイルその他 FTP(ファイル転送 ) Student.nara-edu.ac.jp Internet 受講者一覧ファイル転送の対象となるファイルは関連するすべてのファイルです homepage.htm ( 各自の HTML ファイル複数のページを作る場合はそれも含む) 画像ファイル壁紙ファイルボタンやアイコン ( 各自ファイル名は異なる) その他のファイル ( 音声などもしあれば) 14.1 フィル転送ソフト FFFTP の使い方 (1) FFFTP を起動する (2) 新規ホストにホストの設定を行う 2007/01/04 Page-25

26 ホストの設定名 student ホスト名 student ユーザー名 guest?? 各自のアカウントパスワード講義時に教えますローカルの初期フォルダ Z: (ゼットコロン) ホストの初期フォルダー WWW ( 必ず大文字 ) OKして (3) ホスト一覧に Student ができるのでこれを選択して接続する左側に各自の Z:ドライブ右側に Student 機の各自の WWW ディレクトリが見えれば OK うまくいかない( 右側に WWW ディレクトリが見えない場合は多分パスワードを間違えている (4) homepage.htm や画像ファイル壁紙ファイルアイコンファイルなど左から右へドラッグするとファイルの転送が実行される 14.1A IE(Internet Explorer)によるフィル転送ソフトの方法 Windows の場合は FTP(ファイル転送 )ソフトウェア(Ws_ftp や FFFTP など)ではなく IE(インターネットイクスプローラ)を使ってファイルをサーバーに転送する事ができます 1) IE のアドレス(URL)に ftp://student.nara-edu.ac.jp/ と入力しますここで http ではなく ftp であることに注意してください 2007/01/04 Page-26

27 2) ユーザー名 (アカウント名 )とパスワードを聞かれますので各自のアカウント(guest??)と Student 機へのパスワード( 講義時に教えます)を答えます 3) 各自が student 機に持っているフォルダー(UNIX ではディレクトリ)が見えるので WWW フォルダーを開いてそこに Z:ドライブのファイルをドラッグすればファイルを転送したことになる注意 : Student 機へファイル転送された時点で学外つまり全世界からのアクセスが可能となります 1. 著作権や肖像権を侵害していないか? 2. 自分および他人のプライバシーを不必要に公開していないか? に十分留意して下さいどうしても学外への公開は困るという方は担当教員に言ってください学内限定の設定をします 2007/01/04 Page-27

28 14.2 修正と再転送パソコン側の HTML ファイルを変更したり画像を追加した場合関連するファイルはすべて再度ファイル転送しないと受講者一覧側のページには反映されないので注意してください QUIZ:デジカメで撮った myface.jpg という画像を追加したどのファイルをサーバーに転送すればいいか? ANSWER:myface.jpg だけ送っても画像は見えない HTML ファイルに <img src=myface.jpg> というタグを追加したのだから homepage.htm も再度転送する必要があるつまり: 追加修正したファイルはすべて再度転送する必要があります 15. 複数のページを作る趣味のページ旅行の記録同好会の紹介などページを分けてみませんか 15.1 複数のページをお互いにリンクするページのファイル名は.htm ( 拡張子 )であれば何でも良い但し先頭ページは必ず homepage.htm とする書き方は HTML 文書共通の約束 (<html>から開始し </html>で終わる etc)に従う例えば homepage.htm の内容が以下のようだとする <html> <a href=profile.htm>プロフィール( 自己紹介 )のページ</a><br> <a href=hobby.htm> 趣味のページ</a><br> </html> このようにした場合他に 2 つのファイル profile.htm と hobby.htm を作るこれはメモ帳で homepage.htm の場合と同様に作成し名前を付けて保存するときにそれぞれの名前を付けて保存すればよい例えば hobby.htm の内容は以下のようになる <html> <head> <title> 藤原公昭趣味のページ</title> (タイトルは適当に) </head> <body> 以下略 ( 趣味の内容を書く) 2007/01/04 Page-28

29 <a href=homepage.htm>ホームに戻る</a><br> ( 先頭ページに戻るリンク) </body> </html> 必ず自分のホームページ(homepage.htm)に戻るリンクを作っておいてください * リンクの仕方 <a href=ファイル名.htm> 別のファイルのページにリンクする</a> <a href= (URL)>どこへでもリンクできる</a> 15.2 フレーム(Frame)の作り方複数ページの応用にフレーム表示があります内容の見出し一覧を左のフレーム( 枠 )に出したままでクリックされた内容を右のフレームに表示するページの全貌がわかるので最近はよく使われています上の例では 6 ヶのファイルを用意します例えば 1- 枠組みを決めるファイル homepage.htm 2. 左のメニューのファイル menu.htm 3.~6 項目 4 ヶのファイル toppage.htm family.htm job.htm concern.htm ( こんにちはのページ) ( 家族の紹介のページ) ( 仕事のことのページ) ( 関心のあることのページ) 各ファイルの雛形は以下のようにします 1. 枠組み homepage.htm <html> <head> <title>home Page of Fujiwara Kimiaki</title> </head> <frameset cols="30%,*"> 左枠を30%の幅にし右枠は残り全部 (*)とする <frame src=menu.htm name=left> 左枠には menu.htm を表示し <frame src=toppage.htm name=right> 右枠には最初 toppage.htm を表示する </frameset> 2007/01/04 Page-29

30 </html> 2. 左のメニュー menu.htm <html> <body> <ol> <li><a href=toppage.htm <li><a href=family.htm <li><a href=job.htm <li><a href=concern.htm </ol> </html> target=right>こんにちは</a> target=right> 家族の紹介 </a> target=right> 仕事のこと</a> target=right> 関心のあること</a> そして残りのページ( 項目毎のページ)は普通に HTML ファイルとして作っていきます例えば家族のページ family.htm は以下のような感じになります family.htm <html> <body> <h2> 藤原 's ファミリー</h2> <hr> <ul> <li> 本人 <li> 妻 <li> 娘 </ul> <a href=url target="_top"> URL を画面全体に表示する(* 注意 ) </body> </html> (* 注意 ) 他のページにリンクする場合左のフレームが残ったままだと問題が起きる場合がありますその場合は <a>タグの中に target="_top" と書いておきますそうすればリンクされたページはブラウザーの全画面に表示されます 2007/01/04 Page-30

31 16 デジカメ画像の修正補正 (Photposhop の活用 ) 画像処理ソフトの定番が Adobe(アドビ) 社の Photoshop ですデジカメで撮った写真に修整や補正を加えることで撮影時の失敗をある程度はカバーしたり見栄えのよい画像にすることができます 16.1 露出補正シアーズタワーからのシカゴの夜景露出過多ガラスに室内照明が反射修正前修正後修正の方法を順に示す (1) Photoshop Elements3.0 を起動する写真の編集と補正を選択する (2) ファイル開くから X:ドライブの公開講座フォルダーから chicago-night.jpg ファイルを開く (3) 全体の明るさを調整するために画質調整ライティングレベル補正を選ぶ 2007/01/04 Page-31

32 (4) ガラスの写り込みが軽減し街路の光のにじみが消える程度にレベル補正のスライダーを調整する写り込みは完全に消えなくてもいい (5) スポイトツールで暗い空の色を吸い取ってブラシツールで残っている写り込みを消していく (6) OKなら保存または別名で保存する 2007/01/04 Page-32

33 16.2 逆光の補正人物が逆光で暗いめがねのツルに光が反射修正前修正後 (1) めがねの反射光を消すためにビューズームインで拡大する (2) スポイトで周辺の色を吸い取って鉛筆ツールで反射光を塗りつぶす (3) OKならピクセル等倍に戻し確認する 2007/01/04 Page-33

34 (4) 次に逆光の人物を明るく補正するためにレイヤーを複製するこれで背景と背景のコピーという二つのレイヤーができる (5) コピーされたレイヤーで人物を含む部分をで選択する( 時間に余裕があればマグネットツールで人物の輪郭をなぞるのがよい) (6) 選択した部分を画質調整ライティングで明るく調整する 2007/01/04 Page-34

35 (7) 例えばレベル補正で調整すると下のようになる (8) 人物の輪郭に沿って背景のレベル補正を取り消すこれは消しゴムで行う (9) 人物の輪郭の付近ではズームインし消しゴムのサイズを調整して慎重に行う後光がのこるよりは少しくい込むくらいでよい (10) OKになったらレイヤーレイヤーを統合して保存または別名で保存する 2007/01/04 Page-35

36 試してみよう: 若草山や窓を背景にポートレートを撮影して逆光補正をしてみよう花の写真や置物の写真を撮りキズやヨゴレの修正をしてみよう 2007/01/04 Page-36

37 17. ホームページビルダーを使ってみよう HTML ファイルを作る別の方法としてホームページ作成ソフトの利用があります世の中の多くのページはこの方法で作られています代表的なホームページ作成ソフトである IBM 社ホームページビルダーを使ってみましょう課題 : 趣味のページをホームページビルダーで作成し homepage.htm とリンクしてみよう 17.1 ホームページビルダーの起動とどこでも配置モードホームページビルダーを立ち上げるとようこそ画面が出ますここでは編集モードとしてかんたんモードかスタンダードを選びます (とりあえずスタンダードとしましょう) はじめにファイルどこでも配置モードで新規作成を選択します 17.2 ページ編集で作成編集しプレビューで確認する 17.3 ワープロ感覚でページを作っていく左のメニューから項目を選んで右のキャンバスに配置していきます多分直感的にわかります 2007/01/04 Page-37

38 ので自由にトライしてみてください 17.4 ファイルの保存最後にファイル名前を付けて保存しますファイルの名前は特に指定しなければ newpage1.html となりますので適当に変更して保存してくださいまたこのとき使用した画像ファイル( 壁紙やアイコンも) 保存されますのでファイル転送する際にそれらもサーバーに転送することを忘れないようにします 2007/01/04 Page-38

39 18 スタイルシートに挑戦ホームページビルダーは確かに簡単ですでもだれが作っても同じような雰囲気のページになってしまいますデザインを極めたい? 方は是非スタイルあるいはスタイルシートに挑戦してみてくださいここではスタイルのエッセンスである箱 =BOX の考え方だけを取り上げます四角い箱を組み合わせて画面を作るということです 18.1 ボックスの構成 Margin Border Padding は特に指定しなければ幅 0 と考えてよい <html> <body> <h1>ボックスの意味 </h1> <hr> <p style="margin:50px; border: solid 5px green; padding: 20px; background: pink; width:200px; height: 40px"> ここが内容を書き込む場所となります </p> </html> 属性 : 値 ; 属性 : 値 ; のように書く :コロン ;セミコロン 2007/01/04 Page-39

40 18.2 段組を作る <html> <head> <style type="text/css">  </style> </head> ここから BODY <body> <div id=header> ここはヘッダーです </div> <div id=content> <div id=menu> ここはメニューです </div> <div id=main> ここはメインです </div> </div> <div id=footer> ここはフッターです </div> </body> </html> 2007/01/04 Page-40

41 18.3 ナビゲーションリンクをまとめたものをナビゲーションといいます様々な視覚効果も加えることができます <html> <head> <style type="text/css">  </style> </head> <body> <div class=menu> <div> <a href= 奈良教育大学 </a> </div> <div> <a href= 奈良女子大学 </a> </div> <div> <a href= 奈良大学 </a> </div> </div> </body> </html> 2007/01/04 Page-41

42 18.4 スタイルの使い方サンプル 1. リストのマークを画像 (アイコンにする画像を URL( )で指定する) <html><body> プレーオフ出場チーム <ul style="list-style-image:url(flag.gif);"> <li> 西武ライオンズ <li>ロッテーマリーンズ <li>ソフトバンクホークス </ul> </body></html> 2. リンクにアンダーラインを付けない <a href= style="text-decoration:none;"> <img src=deersmall.gif border=0> 奈良教育大学 </a> text-decoration:none でアンダーラインが消える img border=0 で画像の枠も消す 3. テーブル内の文字や色を指定する <div style="margin:30px;"> <table border=1 style="border:2px solid violet; color:blue; background: #ffffcc;"> <tr><td> 第一回 <td>1 次方程式 <tr><td> 第二回 <td>2 次方程式 <tr><td> 第三回 <td>3 次方程式 <tr><td> 第四回 <td>4 次方程式 </table> </div> ここで <div>は全体をくくってスタイルを指定している margin( 余白 )を個別に指定したいときは margin-top/bottom/left/right を指定する ex. <div style="margin-top:10px;margin-left:30px;"> 2007/01/04 Page-42

43 19. BLOG を始めよう Web 上の Log( 記録 )という意味で weblog という言葉がつくられこれを We blog ( 私たちは blog する)と読んで BLOG なる言葉が作られたといわれています米国では 2001 年 9.11 同時多発テロに関して意見表明や相互参照に利用されブレークしたそうですが日本では日記風身の回り記録として使われています多くの有名人タレントの方々も BLOG を開設しています BLOG はとにかく簡単です始めようと思いさえすれば 10 分後には自分の BLOG ができているはずですそれを実際に実行してみましょう毎日記事を更新する必要はありませんし誰かに見られることを意識せずに備忘録として使ってもかまいません気に入らなければ削除すればよいのですでは始めましょう 2007/01/04 Page-43

44 19.1 BLOG への登録 BLOG の作成で一番面倒くさい( 心理的バリアーがある)のが実はこの登録ですインターネット接続プロバイダーとして OCN や NIFTY に加入されている方はご利用のアカウントで BLOG を開設できますがそのほかの無料サービスでは利用者登録を新たにする必要があり若干の個人情報を登録する必要がありますしかし住所職業電話番号などは不要ですのであまり心配される必要はないと思います無料サービスの代表的なものに 1) Yahoo 2)goo(NTT 系の会社です)がありよく利用されていますこの講座では goo を例に説明しますが Yahoo にされてもほとんど同じです趣味で決めて下さい (Yahoo は知名度が高いためかアクセスが重い傾向があります) 1) goo のトップページからブログをクリックします 2) 新規登録かブログを開設する( 無料 ) のどちらかをクリックします 3) gooid 登録では最初に一括登録が勧誘されますがとりあえずは不要ですのでクリックしません 2007/01/04 Page-44

45 4) そして個人情報の入力画面になりますマークは必須ですので確認して下さい特にメールアドレスが必要です在学中は学生継続して使う場合はプロバイダーのアドレスに修正しておいて下さい( 利用者情報の編集 ) ケイタイのアドレスでは登録できないようです 5) BLOG の設定他の利用者と ID が重複していなければ BLOG の設定画面になりますここで BLOG のタイトル概要を入力しテンプレート( 画面のデザイン) をサンプルから選ぶと BLOG の立ち上げは完了です 2007/01/04 Page-45

46 6) 記事の入力新規投稿からタイトルと本文を入力しますデジカメ写真も画像の選択で指定できます OK なら [ 投稿 ]ボタンを押しあなたのブログを見るで確認できます 7) 写真画像の選択写真画像をパソコンから画像フォルダーに登録 (アップロード)しておきますここから記事に貼り付ける画像を選ぶようになっています ( 携帯電話から記事を入力する場合は携帯で撮った写真を貼付すればよい) 携帯電話から登録する(これを MOVLOG(モブログ)というようです) 場合はお使いの携帯電話を登録しないといけないことそして投稿するアドレスが決められていることなどに注意してくださいこのあたりの操作はやってみればすぐにわかります失敗しても簡単に消せるので心配しなくて OKです 2007/01/04 Page-46

47 19.2 コメント他の方の BLOG の記事に対してコメントを書き込むことができますこれは普通その記事を見た感想などを書くようですコメントの数字をクリックするとそれまでに書き込まれたコメントが読め自分でもコメントを書き込むことができます無意味なコメントや不愉快なコメントが書き込まれることもありますこの場合はだまって削除すればよいでしょうあまり酷い場合はコメントの書き込みを不許可にすることもできます 19.3 トラックバックコメントは誰でも( 自分の BLOG を持っていなくても) 書き込めます掲示板と同じですトラックバックとは自分の BLOG の記事と誰かの BLOG の記事を関連させることです 1) 誰かの BLOG の記事に対してトラックバックボタンを押します 2) 自分の BLOG で相手の記事に関連した内容を作成します 3) 相手の BLOG で表示されているトラックバック URL をコピーし 4) 自分の BLOG のトラックバック URL 欄にペースト( 貼付 )します 5) 自分の BLOG を投稿します 2007/01/04 Page-47

48 これで相手の BLOG のトラックバック数が一個増えそれをクリックすると自分の BLOG の記事の一部が見えるようになりますさらにクリックすると全文が見えますなお自分の記事には相手 BLOG へのリンクを作っておきます 2007/01/04 Page-48

49 おしまい have fun! 2007/01/04 Page-49

Fckeditor の基本的な使い方 Point!! fckeditor を上手く使うコツ始めにページ内に一通り文章 ( 画像や表を含む)を書いてから文字装飾をして下さい編集したいテキストや画像を選択しアイコ

Fckeditor の基本的な使い方 Point!! fckeditor を上手く使うコツ始めにページ内に一通り文章 ( 画像や表を含む)を書いてから文字装飾をして下さい編集したいテキストや画像を選択しアイコ Fckeditor マニュアル目次 Fckeditor の基本的な使い方... 2 記事の登録プレビューの前に... 2 リンクを挿入... 5 画像を挿入する... 6 PC に保存している画像の挿入... 6 WEB 上の画像を挿入... 8 文字装飾... 10 文章を見出しにする... 10 太文字