*総合科学演習A 第14回 [#v309c3ec] **応用課題「Wordでホームページ作成」 [#ncfff2ff] ***概要 [#a066cb3b] ワープロソフト「Word」は、ホームページ作成にも利用できます。 前回からひきつづき、 応用課題として、Wordを使ったホームページ作成を行います。 今回は、「''マンダラート''」という技法を応用して、 「''マンダラート''」という技法を応用して、 ページのコンテンツを作成しましょう ***「マンダラート」とは [#q27ecac7] -デザイナー今泉浩晃氏が開発した、思考のためのツールであり、 例えばアイデアを考えたり整理したりするのに使われす。 --Mandal-Art ( http://www.mandal-art.com/ ) -3×3のセル(マス目)からなるマトリックスで、 中央のセルにテーマを書きます。 そして、その周りのセルに、中央のセルから連想したり関連することなどを 思いつくままに記入していきます。 そうすることで考えを掘り下げたり、新しい考えを発見できたりします。 |CENTER:アイデアA|CENTER:アイデアB|CENTER:アイデアC| |CENTER:アイデアD|~テーマ|CENTER:アイデアE| |CENTER:アイデアF|CENTER:アイデアG|CENTER:アイデアH| **コンテンツの作成 [#kbe27639] Webページのコンテンツ(中身)を作成するために、 マンダラートを利用して、情報を整理しましょう。 Webページに書いてもらうテーマは「私の街」です。 自分の出身地や現在住んでいる場所、かつて行ってみて記憶に残っている場所などをについて、Webページを作成しましょう。 ***マンダラートの作成 [#za6a47a7] 配布資料「マンダラート・シート」に、 自分にとっての「街」について、調査して、記入してみましょう。 それぞれのセル(マス目)に書く内容は、次のような項目です。 紹介や説明の文章は短くてかまいませんが、 ''できるだけ関連するWebサイトの情報を集めましょう'' -必須項目 --街について(都市の紹介やPR) --私について(自己紹介) --私と街の思い出(街での体験や思い出) --街への期待(街の将来に対して思うこと) -選択項目~ 項目か、項目の具体的な内容についてか、どちらかを書く --名所 --歴史上の有名人、芸能人 --歴史上の出来事 --名産品や特産品 --有名な祭り、行事 **Wordでの制作 [#zb7e1d04] シートが完成したら、Wordを使って、マンダラートを作成してみましょう。 **ステップ1:Wordでの制作 [#zb7e1d04] ***全体の構成 [#l92ce295] まず、全体の構成を決めましょう。 -タイトルを作成する ++「○○のマンダラート」(○○は自分の名前やニックネーム)と入力 ++「○○○のマンダラート」(○○○は自分の名前やニックネーム)と入力 -表(マンダラート)作成する ++メニューから「罫線」→「挿入」→「表」を選択 ++メニューバーから、「罫線」→「挿入」→「表」を選択 ++列数と行数を、それぞれ「3」にする ++「OK」ボタンをクリックする -Webページに関する情報を作成する --Webページに関する情報とは、「著作権」「更新日」「連絡先」で、 次のような役目があります。 ---著作権:誰が作成し所有しているかを示す(情報の信頼性) ---更新日:いつ最後に更新されたかを示す(情報の鮮度) ---連絡先:どこに連絡すればいいかを示す(情報の双方向) ***マンダラートの入力 [#sb5526c3] 紙のマンダラート・シートに記入した内容をもとに、 Wordの中のマンダラートに入力していきましょう。 入力できたら、次のような設定をして、見栄えをよくしましょう。 -フォントの種類や大きさ、文字色 -罫線の太さや色、塗りつぶしの色 ***ファイルの保存 [#j7fe7338] 入力ができたら、次のようにして、ファイルに保存してください。 +メニューから「ファイル」→「名前を付けて保存」をクリック +メニューバーから、「ファイル」→「名前を付けて保存」をクリック +保存する場所は、「マイドキュメント」 +ファイル名は、「学籍番号」+「のマンダラート.doc」を設定(半角文字で) --例:学籍番号がC2023000の場合、ファイル名は「C2023000のマンダラート.doc」 **ステップ2:Webページとして編集 [#v7ac6922] ワープロの文書は、A4やB5などの限られたサイズの「紙」の上で表現します。 しかし、Webページは、「ウィンドウ」の中での表示の仕方を考える必要があります。ウィンドウの中のどの位置に表示するか、確認しながら編集しましょう。 Webページするステップ ***表示の変更とプレビュー [#nc966b77] 「Webページ」として編集するために、Wordの画面の表示形式を変更します。 +メニューバーから、「表示」→「Webレイアウト」を選択 +表示が、Wordのウィンドウ全体に変わります 1.コンテンツをうつ タイトル ワードアート スタイルと書式 表 表の作成・調整 文字の入力 罫線と網掛けの設定 署名 水平線 著作権 作成日と更新日 メールアドレス 次に、実際にブラウザでどのように表示されるか確認します。 表示や印刷をする前の、確認作業のことを「プレビュー」といいます。 +メニューバーから、「ファイル」→「ブラウザでプレビュー」を選択 +ブラウザが起動して、出来ばえを確認することができます 2.Webページにする Webページとして編集 メニューバー:「表示」→「Webレイアウト」 ブラウザで確認 メニューバー:「ファイル」→「ブラウザでプレビュー」 背景を設定 メニューバー:「書式」→「背景」 ハイパーリンクの編集 作成:リンクにしたい文字を入力し選択→ 右クリックから「ハイパーリンク」→下にある「アドレス」にリンク先のURLを入力 削除:ハイパーリンクの部分を右クリック→「ハイパーリンクの削除」 保存 メニューバー:「ファイル」→「Webページとして保存」 「ページタイトル」:タイトル(○○のマンダラート)を入力し、OKをクリック ファイル名:(学籍番号).htm(必ず半角文字!)と入力し「保存」をクリック ***ハイパーリンクの設定 [#c8385388] Webページのなかに、他のWebページや画像・動画などの情報へジャンプルする機能を、 「''ハイパーリンク''」といいます。 Wordでは、URLやメールアドレスが入力されると、Enterキーを押したときに、 自動的にハイパーリンクを作ります。 3.サーバに登録する ファイルを転送 ブラウザで確認 http://arena.hyogo-dai.ac.jp/student/sougou/(学籍番号).htm 自分でハイパーリンクを作成するには、次のようにします。 +ハイパーリンクにしたい文字列を、マウスでドラッグして入力し選択 +右クリックして、メニューから「ハイパーリンク」を選択 ++左側の「リンク先」から、ほかのWebページへのリンクなら「ファイル、Webページ」を、電子メールアドレスなら「電子メールアドレス」を選択 ++上にある「表示文字列」にリンクさせる文字列を設定 ++下にある「アドレス」にリンク先のURLを設定 ++「OK」ボタンをクリック #ref(html01.png,nolink,75%); ハイパーリンクを削除するには、次のようにします。 +削除したいハイパーリンクの部分を、右クリック +メニューから「ハイパーリンクの削除」を選択 ***背景の設定 [#taa11f5a] ページの背景に、色やグラデーション、画像などを設定することが出来ます。 -メニューバーから、「書式」→「背景」を選択 --色や「その他の色」 ---背景をひとつの色で塗りつぶします --「塗りつぶし効果」 ---グラデーションやパターン、画像などを背景に設定します ***Webページとして保存 [#ld18752c] Wordのファイル(Word文書)として作成してきたマンダラート・シートを、 Webページ(HTMLファイル)に変換しましょう。 +メニューバーから、「ファイル」→「Webページとして保存」をクリック ++ページタイトルにある、''「タイトルの変更」''ボタンをクリックして、 次のようにタイトルを入力 ---「○○○のマンダラート」(○○○には自分の名前・ニックネームなど) ++ファイル名を、次のように入力 ---自分の学籍番号.htm (学籍番号がC2023000なら、ファイル名はc2023000.htm) ---必ず半角文字にすること! ++ファイルの種類にある、「▼」をクリックし、 ''「Webページ(フィルタ後)(*.htm, *.html)」''を選択 ++「保存」ボタンをクリック #ref(html00.png,nolink,75%); **ステップ3:Webページの公開 [#t6b96228] インターネットで公開されているWebページは、 すべて、 ''Webサーバ''というコンピュータで管理され公開されています。 つまり、 Webページをインターネットに公開するには、 作成したHTMLファイルを、 手元のパソコンからWebサーバへ転送する必要があります。 #ref(server.png,nolink); Webサーバにファイルを転送するには、「ftp」というファイル転送機能やCD-ROMなどのメディアを使う方法など、いくつかの方法があります。 今回は、''「Webフォルダ」''という方法で、ファイルを転送します。 ***Webフォルダによる転送方法 [#dca484db] Windowsで''Webフォルダ''を利用するには、 ''Internet Explorer''を使用します。 次のように操作すれば、通常のデータのコピーと同じように Webサーバへファイルを転送することができます。 +Internet Explorerを起動 +メニューから、「ファイル」→「開く」を選択 ++「Webフォルダとして開く」のチェックボックスを、マウスをクリックしてチェック ++「開く」の入力欄に、「http://arena.hyogo-dai.ac.jp/joho2/」と入力 ++「OK」ボタンをクリック #ref(web00.png,nolink,75%); +ユーザ名とパスワードを入力し、「OK」ボタンをクリック --ユーザ名: --パスワード: //#ref(web01.png,nolink,80%); フォルダの表示になったら、通常のコピー操作で、ファイルの転送ができます。 次のようにして、Webページのファイルを転送してください。 +「マイドキュメント」を開く +「''<自分の学籍番号>.html''」を右クリックし、「コピー」を選択 +Webフォルダとして開いたウィンドウで、空白部分を右クリックし、「貼り付け」を選択 +「マイドキュメント」を開き、 「''<自分の学籍番号>.files''」を右クリックし、「コピー」を選択 +Webフォルダとして開いたウィンドウで、空白部分を右クリックし、「貼り付け」を選択 ***転送後の確認 [#sb203b86] 転送したファイルがインターネットに公開されているか、確認しましょう。 「Internet Explorer」を起動し、次のURLを入力してください。 -http://arena.hyogo-dai.ac.jp/student/2004/sougou/<学籍番号>.htm |