情報機器の操作テキスト 7
webページを作る 1 年賀状ページを作る

おはようフェルプス君。今回の任務はwebページを作ることにある。 例によって、君もしくはメンバーが捕らえられ、あるいは殺されても 当局はいっさい関知しないからそのつもりで。 尚、このテープは自動的に消滅しない。クルクル回り続ける。 成功を祈る

準備

  1. デスクトップ上にある実習フォルダ内のtera termを起動する。
  2. teraterm起動画面ここでは「ok」をクリックするだけ。
  3. login IDとパスワードを入力して [ OK ] をクリックする。
  4. VTターミナル画面です。
  5. mkwebmkweb を入力して [enter]キー を押す
  6. logoutlogout を入力して [enter]キー を押す
  7. マイドキュメントpublic_htmlというフォルダができているか、その中にindex.htmlというファイルができているか確認する。

作業

作業1. WORDで年賀状ページを作ってみよう。

  1. nenga.docを右クリックして、public_htmlというフォルダの中に保存する。
  2. public_htmlというフォルダの中のnenga.docをWクリックしてWORDで編集する。
  3. こういう文書ファイルを作るのは、高校まででやっているはずなので、今更教えることはないと思います。(できない人は、手を挙げて、「HELP」)
  4. 「謹賀新年」「本年もよろしくお願いいたします」の色や大きさや言葉を、自分の好きなように変えましょう。
  5. 自分の好きな画像に変えましょう。google イメージ検索
  6. 「俳句」は、自分で適当な文章に変えましょう。
  7. 名前は、自分の名前に変えましょう。
  8. レイアウトを大きく変えたい・クリスマスカードにしたい という人は、自由に変更しましょう。
  9. 以上の変更ができたら、「名前を付けて保存」で、「2008nenga.doc」というファイル名をつけて、public_html内に保存しましょう。
  10. また、「Webページとして保存」で「2008nenga.html」というファイル名をつけて、public_html内に保存しましょう。
  11. ブラウザを起動して、URL欄に、
    http://satsuki.ex.osaka-kyoiku.ac.jp/~ID/2008nenga.html
    を入力して、enter
    IDには、自分のID k0XXXXX を入れる。~Shift+^で入力する)
    自分で作った年賀状がブラウザに表示されたかな?
    表示されなかったら、 のどれかなので、直して、再度ブラウザで確認しましょう。

作業2.サクラエディタで、年賀状ページを作ってみよう。

  1. サンプルのnenga_inline_css_table.htmlを右クリック「対象をファイルに保存」でpublic_html内に保存する。
  2. 保存したnenga_inline_css_table.htmlをWクリックしてブラウザで表示しておく。
  3. サクラエディタで、nenga_inline_css_table.htmlを開く。
    いろいろな変更をしたら、
  4. ブラウザの更新ボタンをクリックするか、[ F5 ]キーを押して画面を更新する。
  5. <DIV  STYLE="text-align:center;font-size:3em;color:#ff0000;margin-top:1em;margin-bottom:1em;">謹賀新年</DIV>
    の「謹賀新年」を自分の好きな語句に変える。
  6. <DIV STYLE="font-size:150%;text-align:center;margin-bottom:1em;">本年もよろしくお願いいたします</DIV>
    も同様に。
    雲が行く晩夏のパルケエスパーニャ<BR>
    明日から昨日に向かって風が吹く<BR>
    夕凪を縫い取っていく秋の鯔<BR>
    鞦韆の頂点の足秋陽蹴る<BR>
    </TD>
    <TD>
    日本語を掘り出してある画いてある<BR>
    秋の陽を窓辺のコップ虹にして<BR>
    悪玉が散るは美し曼珠沙華<BR>
    金の船紅葉の川を溯る<BR>
    <DIV ALIGN="right">
    <SPAN STYLE="font-size:0.8em"><A HREF="http://www.cc.osaka-kyoiku.ac.jp/~nonami/nikki/diary.cgi">「のなみの俳句帳」より</A></SPAN>
    </DIV>
    </TD>
    </TR>
    </TABLE> は、ばっさり消して、自分で文章を書く。<P></P>で囲うこと。
  7. 野浪正隆
     は 自分の名前に書き換える。
  8. 「名前を付けて保存」でマイドキュメント内のpublic_html内にnenga2.htmlというファイル名で保存する。
  9. nenga_inline_css_table.htmlは、テーブルを使って、俳句を2段に並べています。
    しかし、「テーブルは表の表示にだけ使うべき」です。
    レイアウトにテーブルを使わずCSSを使って2段組にしたもの(見た目は全然変わらない)を作っておいたので、ブラウザで見て、右クリック「ソースの表示」でどんなhtmlで書いてあるか確認しましょう。
  10. ブラウザを起動して、
    URL欄に、
    http://satsuki.ex.osaka-kyoiku.ac.jp/~ID/2005nenga2.html
    を入力する。
    (IDのところは、自分のID k0XXXXX を入れる。~はShift+^で入力する)
    自分で作ったwebページがブラウザに表示されたかな?
  11. 表示された人は、

宿題

参考ページ

以下のような入門ページがあるので、読んでおくこと

次回

次回は、webページを作る 2 作品集を作る です。