Wordでホームページを作成する 

今回はだれでも簡単にやさしくホームページ作成できる方法を考えてみます。

Wordは、いわゆるワープロソフトですが、文書をHTML形式で保存する機能があります。

Wordなら割合と多くの人が文書作成ソフトとして利用していると思います。またホームページを作成するソフトを購入する必要がありません。敷居が低いのですが、余り知られておりません。

そこで、この時間ではこれを実際に簡単なホームページ(正確にはWebページ)を作成することをを体験しながら、その長所、短所(限界)を考えてもらいます

具体的に考察する主な観点は以下の通りである。

1、    本当にリンク等が作成できるのか。

2、    作成したWebページがブラウザで表示できるのか。

3、    作成したWebページがWebサーバにアップロードできるか(今回これはできないので、私が実験した結果を聞くこと)

4、    Webページのソースがどの様に作成されるか(HTMLのこと)

5、    既存のWeb作成ソフト(ホームページビルダー等)と比べてどうか(使い勝手等)

6、    アクセシビリティのあるWebページの作成ができるか(主にCSSについて)

7、    ・・・・・・・

<参考記事> (注意)このプリンのPDF

参照先リンク:http://www.blogdehp.jp/13/13_hpsoft_word.asp  、

  Microsoft Word 2007ホームページ作成

参考:現在の代表的なブラウザ:参照先リンク

        ブラウザの速度比較結果  ブラウザ 比較 ブラウザ 占有率

制作例 ;

@     パソコン奮戦記  A 数学(数式のある例)  B PDFの例  C Wordのファイル

 

<実習課題(最低限やること)>

まず、ホルダーを新規に作成し、その中に仮想サイトを構成していく。

その中に、画像などを入れるホルダー等を予め作成しておく。

ファイル名、ホルダ名はすべて英数半角にする。

トップページは index.htmlまたはindex.htm

サブページは 任意の名前.htmlまたはhtm

最低限、トップページとサブッページは作成し、リンクを張ること。

以上最低限ことしてから、出来たらスタイルシート(CSS)を作成することを考える。

出来る人のみ、カウンターを(自力で)設置してみよう。

 

●作成方法:トップページ(Word2007で作るウェブサイト)の作り方

 

フォントの種類・サイズ

フォントの種類とサイズはお好みにより選択してください。作例では MSPゴシックを使用し,本文の部分は10.5ポイントを使用すること

タイトルの作成

1.   「表示」→「文書の表示」の「Web レイアウト」をクリック

2.   「ホーム」→「段落」の「中央揃え」をクリック

3.   「挿入」→「テキスト」の「ワードアート」をクリック

4.   ワードアート雛形をクリック

5.   タイトルを入力(Word2007で作るウェブサイト)

6.   フォントを選ぶ(MSゴシック)。OKをクリック

7.   挿入したワードアートをクリックして選択し,表示される四方の「■」をドラッグして大きさを調整。Enterキーを押す

水平線の挿入

「ページレイアウト」→「ページ罫線」→「線種とページ罫線と網掛け設定」→「水平線」→選択して「OK」をクリック

画像の挿入

 クリップアートにある画像を使用してもらいます。

1.  「挿入」→「クリップアート」

2.   「自分の画像を検索」 → 画像をクリック

フレームの設定

1.   「写真を選択(写真の上でクリック)」→「書式」→「図のスタイル」→「▼(図の全体的な視覚スタイルを選択します)」→「選択(クリック)」

2.   「図の枠線」→「テーマの色・太さなどを選択(クリック)」

ハイパーリンク

1.   リンクを設定する文字をドラッグ→「挿入」→「リンク」の「ハイパーリンク」をクリックします。

背景の設定

1.   「ページ レイアウト」→「ページの背景」の「ページの色」→「塗りつぶし効果」→「テクスチャ」→「セーム皮」→「OK

2.   文字を濃い色にする場合には,「テーマの色」,「テクスチャ」は薄い色を選ぶといいようです。

アクセスカウンターの設置

1.   無料のFC2カウンターを設置しました。なお,他のサイトでもほぼ同じ操作です。

2.   「編集」→カウンターを設置するところに目印(★印)を入力→「上書き保存」→「閉じる」 <閉じておかないと5.の上書き保存ができないことがあります。>

3.   ファイルを開いて,「表示」→「ソース」→「編集」→「検索」→「検索する文字列」→「★」→「次を検索」

4.   FC2カウンターサイトにあるHTMLタグ(ホームページに設置する場合)を「コピー」

5.   3.で検索した「★」の後ろにHTMLタグを「貼り付け」→「上書き保存」

6.   ブラウザ画面→「最新の情報に更新」 <カウンターが表示されれば設置できました>

7.   「編集」→2.の編集画面の目印「★」を「削除」→「上書き保存」

保存

1.   「ドキュメント」→何もないところで「右クリック」→「新規作成」→「フォルダ」→「myweb(ほかの名前でもよい)」を作成

2.   Officeボタン」→「名前を付けて保存」→その他の形式→ファイルの種類・「Webページ」→ファイル名・「index.htm(又はindex.html)」→タイトルの変更→ページタイトル・「Word2007で作るウェブサイト」→「保存」

3.   Yahoo!ジオシティーズのユーザーは,次の方法で保存します。

2.の「保存」の前に,「ツール」→「Webオプション」→「ファイル」→「可能な場合は長いファイル名を使用する」のチェックをはずす→「OK」→「保存」

 

Wordで作成したWebページについて,次のこと考え、対策を施す。

  メインテナンスを良くするためには→ 画像や素材等をホルダーごとに整理する。

 アクセスビリティのあるWebページどうかを考えて修正する。 アクセシビリティ

例えば:

・弱視や老眼の人にとってはフォントサイズや配色は簡単に利用者がに変更できるか?。

・視覚障害の人は読み上げソフトを使うので、それに適したレイアウトや記述方法であるか? などがあげられます。

詳しくは、ウェブコンテンツのアクセシビリティに関するガイドライン19995月にW3Cによって策定された。

 

*提出*

ホルダ(各個人の番号 例2523(2/13))に作成したホームページとワードで作成した場合の感想文(wordで作成ものをファイルと印刷したもの)を提出すること、なお感想文の

ワードファイルは前述のホルダに入れること。印刷したものは教師に提出すること。