ホームページの作り方　講習会テキスト

Size: px

Start display at page:

Download "ホームページの作り方　講習会テキスト"

なおかむら
5 years ago
Views:

1 ホームページ作成ソフト ( ホームページビルダー ) 講習会テキスト 2014 年 4 月 1 日版明治大学メディア支援事務室

2 目次目次本テキストについて概要ページ公開の仕組み HTML とタグコンテンツ ( 素材 ) の作成準備ホームページビルダー 18 の起動新たにページを作成する文字の入力 ( 見出しの作成 ) 文の入力 ( 段落の作成 ) 水平線の入力壁紙の挿入ページにタイトルを付けるページを保存するリンクの設定画像の挿入ページの保存 ( 画像ファイルも合わせて保存する ) WWW サーバへのアップロードページのアップロード ( 転送と公開 ) 作ったホームページをブラウザ上で見る付録 A. 文字のフォント ( 書式 ) の変更 B. リンクの設定 (URL で指定 ) C. 表の挿入 D. ロゴの作成 E. 箇条書きの作成 F. サイト機能を使ってホームページを作成する本テキストについて --- このテキストはホームページビルダー 18( ホームページ作成ソフト ) を利用してホームページの元となる形式のドキュメントを作成後大学の WWW サーバへ FFFTP( ファイル転送ソフト ) を用いて転送してホームページを公開するまでの基本的な手順を記しています使用環境は Windows7 となりますがパソコンの基本的な操作ウェブブラウザ (Microsoft InternetExplorer や Mozilla Firefox Google Chrome) の操作に関する詳細は本テキスト中では省略させて頂きます 2

3 1. 概要 1.1 ページ公開の仕組みホームページは WWW(World Wide Web ワールドワイドウェブ ) というシステムを利用して情報を発信する際に作成します作成したデータを Web サーバ ( 情報を実際に発信するコンピュータ ) 上に用意することでインターネット上のコンピュータからそのデータが閲覧できるようになります生田の利用者がホームページを公開する場合下記の 4 つの手順が必要です 1. MyDocs(X:) に local_html( 学内 ) あるいは public_html( 学外 ) というフォルダを作成します 2. そのフォルダの中に作成したホームページのファイルや画像を保存します 3. local_html( 又は public_html) フォルダをファイル転送ソフト (FFFTP) を利用して転送 ( アップロード ) します 4. ブラウザ上で下記の URL を入力する事で公開されていることを確認します学内のみの公開基盤サービス利用アカウント / ファイル名学外への公開基盤サービス利用アカウント / ファイル名ファイル名を指定しない場合は通常 index.html を読み出しこれがトップページとなりますこの講習会では最終的に 22 ページの図 42 のようなホームページを完成させますなおホームページを公開するに当たっては MIND 利用基準を遵守しなければなりません以下を参照してください学校法人明治大学総合情報ネットワーク (MIND) 利用基準学校法人明治大学総合情報ネットワーク (MIND) 運用基準図 1 ページ公開の仕組み参考 : ユーザー ID 前の ~ ( チルダと呼ぶ ) は shift キー + へキーを半角で入力したものです ( 図 2) shift キーを押さずにへキーを押すと ^ ( キャレットまたはハットなどと呼ぶ ) が入力されてしまいます図 2 チルダ 3

1.2 HTML とタグホームページは HTML というデータ形式で記述します右の図 3 のようなものをソースコードと呼びます <H1> や </H1> のように < > 記号で囲まれた部分をタグと呼び <HTML> が HTML 文書の開始タグ <BODY> がホームページ上で実際に表示される本文の開始タグ </BODY> が本文の終了タグと言うようにデータのどういう要素であるか

4 1.2 HTML とタグホームページは HTML というデータ形式で記述します右の図 3 のようなものをソースコードと呼びます <H1> や </H1> のように < > 記号で囲まれた部分をタグと呼び <HTML> が HTML 文書の開始タグ <BODY> がホームページ上で実際に表示される本文の開始タグ </BODY> が本文の終了タグと言うようにデータのどういう要素であるかを指定しています HTML のデータの中身はテキストデータ ( 装飾のない単純な文字のこと ) ですのでメモ帳や秀丸などのテキストエディタ ( テキストデータを編集するソフト ) でも作成可能ですがその場合はタグの種類意味を理解する必要がありますこの講習で使うホームページビルダーはタグを知らなくてもマウスを使用して直観的な操作でデータにタグを自動的に埋め込みながらホームページの作成行なえるソフトです <HTML> <HEAD> <TITLE> 私のホームページ </TITLE> </HEAD> <BODY> <H1> ようこそ </H1> <IMG SRC= my_face.gif > <HR> このホームページの説明 </BODY> </HTML> 図 3 HTML タグ 2. コンテンツ ( 素材 ) の作成学内用に公開するホームページ ( ホームページで表示される文章ファイル画像等 ) の作成を行います注意することはコンテンツ ( 素材 ) やフォルダの名前は全て半角英数で入力するということです全角日本語等で名前を入力するとホームページを公開した時に正しく表示されないことがありますまた環境によっては大文字小文字をしっかり区別することが必要な場合もあります 2.1 準備マイドキュメントに local_html ( 学内に公開するためのフォルダ ) を作成してくださいウィンドウ上部メニューバーのホームタブを開くと見つかる [ 新しいフォルダー ] をクリックし作成されたフォルダを半角英数で local_html と名前を変更する ( 図 4) 以後作成したページや画像は全てこのフォルダに保存しますまたサーバへの転送もこのフォルダをまるごと行います注意 : 一つのフォルダにすべてのコンテンツが入っていないとホームページを更新した時に画像が表示されないなどの不具合が生じますサイト機能の紹介 : ホームページビルダーには上記でフォルダを作成するのと同じ目的でサイト作成という機能を利用することもできますサイト作成をするとサイト単位でファイルの読み込みができまたサイト内のファイルのツリー構造が確認できます詳細は付録 F. サイト機能を使ってホームページを作成するを参考にしてください図 4 フォルダ作成 (local_html) 4

2.2 ホームページビルダー 18 の起動ホームページビルダー 18 を起動してください

ホームページビルダーが起動します ( 図 6) 次いでホームページビルダーのメニューより

5 2.2 ホームページビルダー 18 の起動ホームページビルダー 18 を起動してくださいスタートボタンすべてのプログラムホームページビルダー 18 ホームページビルダー 18 をクリックすると起動できます ( 図 5) 2.3 新たにページを作成する図 5 ホームページビルダーの起動 (1) 様々な新規作成ホームページビルダーが起動します ( 図 6) 次いでホームページビルダーのメニューよりファイル (F) 標準モードで新規作成 (B) と選択してください ( 図 7) ここでページの作成が始められます図 6 ホームページビルダー起動画面図 7 新規作成 5

ホームページビルダーで用意されている形式のホームページを作成することができますホームページ全体の構成が自動的に生成される為効率的に作成が行えますが作成されたホームページに変更する場合

6 (2) 新規作成ホームページビルダーでは様々なホームページの形式を設定することができますここではコンピュータで閲覧する一般的なホームページ作成の手順を説明します 1 画面左上のファイルメニューをクリックして標準モードで新規作成 (B) を選択してください ( 図 8) 参考 : かんたんナビ表示時のかんたんページ作成とサンプルテンプレートウイザードに沿って作成を進めることでホームページビルダーで用意されている形式のホームページを作成することができますホームページ全体の構成が自動的に生成される為効率的に作成が行えますが作成されたホームページに変更する場合このテキストで説明するホームページビルダーの基本的な操作や HTML についての知識が必要となります図 8 標準モードで新規作成 2 白紙ページの作成画面が表示されます ( 図 9) 図 9 白紙の新しいページ 6

2.4 文字の入力 ( 見出しの作成 ) はじめにページに見出しをつけましょうページ編集の画面内で適当な個所をクリックしてください 1 文字を入力すると通常の文として文字が入力されます行が選択されている間ピンクの枠が表示されます

タグをクリックしその下段に表示される段落の中で見出し 1 を選択してください ( 図 11) すると選択されている部分の文字が見出しのレベル 1 に設定されますこの操作は画面左上のメニューから選択することでも可能です見出し

大きさで表示されるかという点については基本的には Web ブラウザの仕様に依存します表示メニューの属性ビューをクリックすると図 11 属性タブで見出しを設定属性タブを表示できる通常の文を入力している際に単純に文字の大きさを変更したい場合は

7 2.4 文字の入力 ( 見出しの作成 ) はじめにページに見出しをつけましょうページ編集の画面内で適当な個所をクリックしてください 1 文字を入力すると通常の文として文字が入力されます行が選択されている間ピンクの枠が表示されますこの枠が現在編集している対象あるいはページの部分を示しこの枠内の箇所に対して様々な設定を指示することが可能です ( 図 10) 図 10 文字入力画面 2 初めての作成と文字を入力してください文字を入力したら画面右手に表示されている属性タグをクリックしその下段に表示される段落の中で見出し 1 を選択してください ( 図 11) すると選択されている部分の文字が見出しのレベル 1 に設定されますこの操作は画面左上のメニューから選択することでも可能です見出しとは新聞の見出しと同じ意味で表示される文字の大きさについての指示とは異なります見出しがブラウザ上 (InternetExplorer や GoogleChrome MozillaFirefox など ) でどのような文字大きさで表示されるかという点については基本的には Web ブラウザの仕様に依存します表示メニューの属性ビューをクリックすると図 11 属性タブで見出しを設定属性タブを表示できる通常の文を入力している際に単純に文字の大きさを変更したい場合は書式メニューのサイズを選択し文字の大きさを変更してください実際の手順は付録 A. 文字のフォント ( 書式 ) の変更を参照してくださいまた見出しの変更について画面左上の表示のところでも同じように変更が可能です ( 図 12) 図 12 ツールバーの書式メニュー 7

8 2.5 文の入力 ( 段落の作成 ) 見出しの設定ができたら通常の文章を入力してみましょうまず 2.4 文字の入力 ( 見出しの作成 ) で作成した見出し初めての作成の下をクリックこのとき見出しはじめて作成に表示されていたピンクの枠が消えその下から新しい段落ができますそこにこれからホームページを作りますと入力してみましょう ( 図 13) ホームページビルダーでは通常下向きのカーソルキー ( 矢印キー ) を押すと新しい文段落が開始され文字 ( 文 ) 入力できますまたエンター (Enter) キーを押すと行は変わりますが段落が変更になったとはみなされません見出しにピンクの枠があり見出し文の末尾にカーソルが残っている場合は下向き矢印 ( ) をクリックしてください注意 : 右端の領域にカーソルがあるとページ編集領域で文字入力できませんかならず一旦編集領域をクリックしてから入力してください文字のフォント ( 書式 ) の変更ロゴの作成箇条書き表の挿入に関しては付録 (23 ページ ~) を参照してくださいホームページ作成上の注意点段落と改行改行の指示は行を変えるという <BR> タグをページに埋め込みます一方段落の変更は <P> タグが埋め込まれますホームページを作成する際に使わない方が良い文字図 13 新しい段落に入力世の中には様々なコンピュータがあり機種によっては表示できない文字があります例えば半角カナ文字丸付きの数字 : KK ミリキロセンチメートルクラムトンアールヘクタールリットルワットカロリートルセントハーセントミリハールヘーシなど : 上下左右などその他 : 明治大正昭和平成mmcmkmmgkgccなどなどがそれにあたりますページを作成する際にはこのような文字の使用は避けた方がよいでしょう 8

9 2.6 水平線の入力次は水平線 ( 区切り線 ) を引いてみましょう ( 下向き矢印 ) を一回押して段落を進めてください次に画面左部分に表示されているナビメニューの水平線ボタンをクリックするか ( 図 14) 画面上部分に表示されている挿入 (I) メニューの水平線 (Z) をクリックしてください ( 図 15) 図 15 ナビメニューで水平線を設置図 14 挿入コマンドで水平線を設置これで水平線を作成できました ( 図 16) 図 16 水平線の例 9

10 2.7. 壁紙の挿入背景にホームページの内容にふさわしい壁紙をつけます挿入画像ファイル素材集から壁紙としてを選択してください ( 図 17) すると壁紙を選択する画面が開きますこの中から好きなデザインを選択して開くをクリックしますここでは wallppr016.gif を選択しています ( 図 18) 図 17 素材集から壁紙としてを選択図 18 壁紙選択背景に壁紙が設定されました ( 図 19) 図 19 壁紙挿入結果 10

2.8 ページにタイトルを付けるタイトルとはホームページ上の名前のことです見出し ( 本文の文頭 )

編集 (E) 属性の変更 (A) を選択してください ( 図 20) 図 20 属性の変更属性画面のページ情報

ここで入力した文字列が編集中のページのタイトルになります (OK をクリック後図 22 の所に表示されます )

11 2.8 ページにタイトルを付けるタイトルとはホームページ上の名前のことです見出し ( 本文の文頭 ) とは異なります ( 見出しは 7 ページ図 10~ 図 11 で作成したものです ) 画面上何も選択されていない状態で編集 (E) 属性の変更 (A) を選択してください ( 図 20) 図 20 属性の変更属性画面のページ情報タブにあるページタイトル (P) に適当に名前を入力し OK をクリックしてください ( 図 21) ここで入力した文字列が編集中のページのタイトルになります (OK をクリック後図 22 の所に表示されます ) この画面上でページの背景色や表示文字の色の変更などを設定することができます図 22 ページタイトルが表示される図 21 ページタイトルを入力 11

ホームページビルダーを開いてから行なってくださいエクスプローラー上でファイルをクリックしてもファイルの編集画面を開くことはできません保存場所にファイルをコピーする (C) にチェックをいれて html ファイルと同じ場所に保存する図 24 素材ファイルをコピーして保存 index.

12 2.9 ページを保存する画面上部分のメニューバーのファイル (F) 名前を付けて保存 (A) を選択し local_html フォルダの中へ index.html という名前を半角英数で入力し保存してください ( 図 23) 保存する場所を指定しないとマイドキュメントにページが保存されてしまうので注意してください図 23 名前を付けて保存すると図 24 のように壁紙に使用した画像素材をどこに保存するか確認画面が出てきます今回は図のように設定し html ファイルと同じ場所に保存します注意 : 保存したファイルの編集画面を再度開く時はホームページビルダーを開いてから行なってくださいエクスプローラー上でファイルをクリックしてもファイルの編集画面を開くことはできません保存場所にファイルをコピーする (C) にチェックをいれて html ファイルと同じ場所に保存する図 24 素材ファイルをコピーして保存 index.html というファイル名について明治大学で運用している WWW サーバはあるクライアント ( ブラウザ ) からページのリクエストを受け取ったときにページの名前が省略されていると index.html という名称のファイルを応答します例えばという要求を受け付けた場合を応答します WWW サーバではファイル名が省略された場合にこの名前 index.html というファイルを応答するというような設定がされている場合が多くありますファイル名は必ず半角英数でパソコンではファイルやフォルダの名前にはアルファベットや数字だけでなくひらがなカタカナ漢字等様々な文字を使うことが可能ですしかしファイル名に漢字や記号等を使用すると FTP ソフトや Web サーバパソコンの種類や言語環境によってはページを公開する際に文字化けなど正しく表示されないことがありますページや画像写真に付ける名前は半角英数字のみを使うよう注意してくださいまた大文字小文字の間違いにも気を付けましょう 12

2.10 リンクの設定 (1) リンク先の用意次はリンクの設定をします最初にリンク先のページを用意しますリンクとは複数の文書を結び付ける役割を担う参照のことでありジャンプ先を指定し別ページに行くことを指しますファイル (F) メニューから標準モードで新規作成 (B) を選択し新しい画面を開いて下さい (5 ページの 2.

13 2.10 リンクの設定 (1) リンク先の用意次はリンクの設定をします最初にリンク先のページを用意しますリンクとは複数の文書を結び付ける役割を担う参照のことでありジャンプ先を指定し別ページに行くことを指しますファイル (F) メニューから標準モードで新規作成 (B) を選択し新しい画面を開いて下さい (5 ページの 2.3 新たにページを作成する図 7 を参照してください ) こちらのページは index.html からのリンク先として用意するページです新規画面が開いたら編集領域にリンク先のページと入力してください sub.html という名前を付けて保存してください (12 ページ図 23 参照 ) 保存できたら右側のページ一覧タブをクリックしてみてください ( 図 25) 現在開いているページの一覧が表示されます ( 編集中のページ欄に index.html と sub.html という 2 つのファイルが表示されています ) 複数のページを開いている場合はこの中から編集したいページを選択できますページ一覧アイコンをクリック青くなっている方が表示中のページ表示に少し時間がかかることがあるするとページ一覧が表示される図 25 ページ一覧ここではこの index.html をクリックしてください 13

(2) 設定 index.html から sub.html へファイル移動するためのリンクを設定しましょう現在開いている index.

の部分をドラッグ ( 選択 ) します ( 図 26) ( この次のページへのどこかをクリックした時別のページへ移動する設定をリンクと言います ) 挿入

リンクする部分を選択する図 27 リンク先の設定属性画面が表示されたらファイルへタブをクリックし参照をクリックします ( 図 28) 参考 :

14 (2) 設定 index.html から sub.html へファイル移動するためのリンクを設定しましょう現在開いている index.html の画面上で先ほど記入した文字の後に下向き矢印 ( ) でカーソルを移動してくださいそこに次のページへと入力してください次のページへの部分をドラッグ ( 選択 ) します ( 図 26) ( この次のページへのどこかをクリックした時別のページへ移動する設定をリンクと言います ) 挿入 (I) メニューのリンク (L) を選択してください ( 図 27) またはナビメニューのリンクの挿入ボタンをクリックしても同様に設定可能です図 26 リンクする部分を選択する図 27 リンク先の設定属性画面が表示されたらファイルへタブをクリックし参照をクリックします ( 図 28) 参考 : ファイルへタブはファイルにリンクする時に URL へタブは他所のホームページへリンクする時に使用します 26 ページの B. リンクの設定 (URL で指定 ) を参照下さい図 28 属性画面で参照設定 14

html をリンク先に選択すると先ほど選択した次のページへの箇所に下線が引かれます

タブをクリックしてください ( 図 31) するとページ編集画面と同様の画面が開きますこの画面上で

html ファイルの画面が表示されれば OK です参考 : リンクは文字や画像を選択しマウスの右クリッ図 30

15 開くという画面が開くので sub.html を選択し開くをクリックします ( 図 29) 属性画面に戻り OK を選択します図 29 sub.html をリンク先に選択すると先ほど選択した次のページへの箇所に下線が引かれますこれでリンクの設定ができました ( 図 30) 正しく設定できたか確認するためにプレビュータブをクリックしてください ( 図 31) するとページ編集画面と同様の画面が開きますこの画面上で次のページへをクリックします先ほど作った sub.html ファイルの画面が表示されれば OK です参考 : リンクは文字や画像を選択しマウスの右クリッ図 30 リンクを設定すると青字になり下線がつくクメニューリンクの挿入(L) を選択しても同様の設定ができます注意 : ページ編集を続けるにはページ編集タブをクリックして編集画面に戻ってくださいプレビュー画面では編集はできません ( 図 32) 図 31 プレビュー画面で確認図 32 編集するときはページ編集へ 15

2.11 画像の挿入次は画像を挿入しましょう今回はホームページビルダーに添付されている素材集の画像を使用します

素材集から (G) を選択してください ( 図 33) 参考 : ナビメニューのボタン ( 画像ファイルの挿入 ) をクリックしても同様です図

16 2.11 画像の挿入次は画像を挿入しましょう今回はホームページビルダーに添付されている素材集の画像を使用します画像を挿入したい場所にカーソルを移動しピンクの枠が表示されていない状態にしてください挿入 (I) メニューの画像ファイル (I) から素材集から (G) を選択してください ( 図 33) 参考 : ナビメニューのボタン ( 画像ファイルの挿入 ) をクリックしても同様です図 33 画像の挿入素材集から開く画面が開きます左側のフォルダから画像イラスト植物をクリックし好きな画像を選択したら開くをクリックします ( では img_h015.gif を選択しています )( 図 34) カーソル位置に画像が挿入されます ( 図 35) 画像の大きさを変えたい時 : 画像を選択し画像の四隅に表示される四角いハンドルをマウスの左クリックで操作しながら調節してください図 34 画像の選択図 35 画像が表示される 16

17 参考 : ホームページビルダー 18 で使用できる画像ファイルは GIF( 拡張子.gif) : 読み方はジフなど容量が軽いが色の数が 256 色までしか使用できない JPEG( 拡張子.jpg) : 読み方はジェイペグなど容量画質ともそこそこで扱いやすい PNG( 拡張子.png) : 読み方はピングなど容量が軽く画質も JPEG より良いが古いパソコンでは表示できない場合がある BMP( 拡張子.bmp) : 読み方はビットマップなど容量が重くなることがあるなどの特徴があります必要に応じて使い分けましょうホームページに画像を掲載する際の注意ホームページ作成時には使用する画像データの著作権に十分気を付けましょうまた自分で撮影した写真でも個人を特定できる第三者が写っている場合は肖像権に触れる事があります友達や知り合いの写真を掲載する場合は必ず本人に確認を取りましょう 17

18 2.12 ページの保存 ( 画像ファイルも合わせて保存する ) ではすべてを保存しましょうファイル (F) メニューのすべて保存 (V) を選択してくださいすると 13 ページの時と同様に図 23 の画面が表示されます先ほど挿入した画像をどこに保存しますか? と尋ねてきますページと画像は必ず全て local_html フォルダの中に保存します図 36 のように保存場所に (HTML ファイルと同じフォルダ ) が指定されている場合画像は local_html フォルダに保存されます上書き時に自動的にファイル名を変更するにチェックをして保存をクリックしてください画像ファイルの名前を変更する必要がある場合にはホームページを作成する前に変更しておきましょう図 36 素材ファイルをコピーして保存注意 : ファイル名は半角英数字です半角カナや全角は使わないでください ) 以上でホームページの作成は終了ですではこれらのページをサーバへ転送し実際にブラウザで表示してみましょう 18

FFFTP というファイル転送ソフトを使って suruga2 というサーバに転送することでホームページとして公開されますスタートメニューから

(suruga2) を指定したら接続を選択してください ( 図 38) 参考 : 接続先のことをホストと呼びますここではホストは Web

19 3. WWW サーバへのアップロード 3.1. ページのアップロード ( 転送と公開 ) 次に作成したホームページを公開します作成したホームページはサーバへ転送して初めて公開されます FFFTP というファイル転送ソフトを使って suruga2 というサーバに転送することでホームページとして公開されますスタートメニューからプログラムを選択し FFFTP を選択します ( 図 37) 図 37 FFFTP 起動ホスト一覧の画面が開くのでここで転送先のサーバ (suruga2) を指定したら接続を選択してください ( 図 38) 参考 : 接続先のことをホストと呼びますここではホストは Web サーバのことを指しています図 38 サーバーに接続する次に自分のユーザー ID パスワードと順に入力した後 OK をクリックしますこの時 anonymous(a) の欄にチェックを入れないでください ( 図 39) 図 39 ユーザー ID を入力 19

$suruga2 に接続すると以下のような画面になります ( 図 40) 図 40 local_html をアップロードまず赤く囲んだ画面左側のフォルダを X:\ (MyDocs の場所 ) に変更します表示された左のフォルダ一覧の中から local_html フォルダを選択し ( アップロードボタン ) をクリックしますアップロード処理中状況を表示する画面が流れます$

20 suruga2 に接続すると以下のような画面になります ( 図 40) 図 40 local_html をアップロードまず赤く囲んだ画面左側のフォルダを X:\ (MyDocs の場所 ) に変更します表示された左のフォルダ一覧の中から local_html フォルダを選択し ( アップロードボタン ) をクリックしますアップロード処理中状況を表示する画面が流れます注意 : となりのはミラーリングと言って左側に表示されているものを全て右側にコピーするボタンです間違えると少々やっかいなので気を付けましょう注意 :local_html フォルダに不必要なファイル例えばバックファイル (.bak) などがある場合あらかじめ転送前に削除して下さい下の図 41 のように local_html フォルダが右側にコピーされていれば転送完了です 20

21 最後に ( 切断 ) ボタンを押し FFFTP を終了しますアップロードできたら切断サーバーのほうに Local_html ができた図 41 アップロード完了 21

22 参考 : 下図に FFFTP 画面の主な場所の解説ですダウンロードアップロード最新の情報に更新ローカル ( ファイルサーバーの中身 ) ホスト (Web サーバーの中身 ) 現在選択中のウィンドウ 22

3.2 作ったホームページをブラウザ上で見る Web ブラウザ (InternetExplorer か Google Chrome) を立ち上げてアドレス (D) 欄に下記アドレスを入力しエンターキーを押してください学校内のみ公開する場合 :http://local.kisc.meiji.ac.jp/~ ユーザー ID/ 自分が作ったホームページが表示されましたか?

23 3.2 作ったホームページをブラウザ上で見る Web ブラウザ (InternetExplorer か Google Chrome) を立ち上げてアドレス (D) 欄に下記アドレスを入力しエンターキーを押してください学校内のみ公開する場合 : ユーザー ID/ 自分が作ったホームページが表示されましたか? 正しく転送されていれば下記のように自分が作ったホームページがブラウザ上に公開されますこのページは local として公開されているため学外から閲覧することはできません学校外へ公開する場合は local_html フォルダを public_html フォルダという名前に変更することで可能となりますその際の URL は下記です学校外にも公開する場合 : ユーザー ID/ 講習は以上です最後にホームページビルダーなど立ち上がっているソフトウェアをすべて終了してくださいまたログオフもお願いしますお疲れ様でした 23

24 4. 付録 A. 文字のフォント ( 書式 ) の変更文字の色や大きさ形を変更しますはじめて作成の文字列のうち作成の文字だけ大きくし色を変えてみましょう変更したい文字列をクリックし ( 図 42) 作成の文字のみ選択 ( ドラッグ ) します ( 図 43) 図 42 文字列をクリック図 43 部分選択メニューバーの書式 (O) フォントをクリックします ( 図 44) フォントの設定画面が表示されたら色指定 (C) やサイズ (I) などを適当に変えてみましょうサンプル欄に変更した文字が表示されますここでは色 : 赤サイズ :7 斜体の設定をしてみました ( 図 45) 図 44 フォント図 45 フォントの設定よければ OK をクリックしてください右図のように文字のフォントの変更ができました ( 図 46) 図 46 フォントの設定が変更される 24

25 またフォントの変更はツールバーのボタンを操作することで Word のような編集ができます左から太字斜体打ち消し文字サイズ拡大文字サイズ縮小文字色変更フォントの変更左揃え中央揃え右揃えとなります文字を選択する時の注意 : 文字列にピンクの枠が表示されている時は段落が選択されていますこの状態で右クリックしメニューの属性の変更 (A) を選択すると段落に対しての属性指定になってしまい文字の色や形状の変更はできません必ず文字をドラッグ ( 選択 ) してからフォント設定を行ってください ( どこでも配置モードの場合は水色の枠です ) 文字の大きさの指定について : 文字の大きさは 1~7 までの数字あるいは -2~+4 の割合で指示します特に指示がない場合文字の大きさは 3(0) になりますただし大きさの違いは実際にブラウザで表示しないとわかりませんので注意してください 25

OK をクリックします ( 図 48) 参考 : リンク先の URL はブラウザのアドレスを事前にコピーしておくとよいでしょうその際下記のショートカットを使うと便利です図 48 URL を指定するコピー :[Ctrl] キー +

26 B. リンクの設定 (URL で指定 ) リンク先にインターネット上の別のホームページを指定しますリンクを設定したい文字列次のページへをドラッグして右クリックしリンクの設定 (L) を選択します ( 図 47) 参考 : メニューバーの挿入リンクまたは ( リンクの挿入 ) ボタンでも同様の操作ができます図 47 右クリックメニュー属性画面で URL へタブをクリックします URL(R) 欄にリンク先の URL を入力してください最後に OK をクリックします ( 図 48) 参考 : リンク先の URL はブラウザのアドレスを事前にコピーしておくとよいでしょうその際下記のショートカットを使うと便利です図 48 URL を指定するコピー :[Ctrl] キー + [C] ( コピーしたい部分を選択した状態でコントロールキーを押しながらアルファベットの C を押す ) 貼り付け :[Ctrl] キー + [V] ( コピーを張り付けたい部分をクリックしてコントロールキーを押しながらアルファベットの V を押す ) 26

をクリックすると画面上に表が挿入されます ( 図 51) 最初にクリックしたカーソル位置に四角い枠が指定した数だけ表示されます

27 C. 表の挿入表を挿入したい場所にカーソルを移動してください表(A) メニューの表の挿入(B) を選択します ( 図 49) または ( 表の挿入 ) ボタンをクリックしても同様です図 49 表の挿入表の挿入画面が表示されますここで行数列数を適当に指定して OK をクリックすると画面上に表が挿入されます ( 図 51) 最初にクリックしたカーソル位置に四角い枠が指定した数だけ表示されます枠をクリックし文字を入力してください ( 図 50) 参考 : 表の中には画像も挿入できます図 50 表が挿入される図 51 行数列数を指定する 27

28 D. ロゴの作成ロゴは以下の手順で作成しますロゴを入れたい箇所にカーソルを移動してくださいここでははじめて作成の下にカーソルをおきますメニューから挿入ロゴを選択してください ( 図 52) またはします ( ロゴの挿入 ) ボタンをクリック図 52 ロゴの挿入ロゴの作成画面が表示されるので文字 (I) 欄に適当な文字を入力し文字の大きさ文字の形状を選択してください ( 図 53) プレビューで確認し良ければ完了をクリックして下さいカーソル位置にロゴが設置されました ( 図 54) 図 53 ロゴの作成画面図 54 ロゴが設置される 28

E. 箇条書きの作成今度は箇条書きを作成してみましょうまずカーソルを移動しピンクの枠が表示されていない状態にしてください箇条書きの種類は番号なしの箇条書き ( などが先頭に表示される ) 番号つきの箇条書き (1,2,3 など ) などがあります箇条書きは挿入 (I) メニューリスト (S) と選択し箇条書きの種類の番号なしリスト (B) を選択します ( 図 55) または

29 E. 箇条書きの作成今度は箇条書きを作成してみましょうまずカーソルを移動しピンクの枠が表示されていない状態にしてください箇条書きの種類は番号なしの箇条書き ( などが先頭に表示される ) 番号つきの箇条書き (1,2,3 など ) などがあります箇条書きは挿入 (I) メニューリスト (S) と選択し箇条書きの種類の番号なしリスト (B) を選択します ( 図 55) またはボタンでも同じ操作ができます図 55 箇条書きの入力番号なしリスト (B) を選択するとカーソル位置にが表示されますカーソルの点滅している所からさくらと入力し Enter キーを押してくださいすると 2 番目の文が入力できるようになります ( 図 57) 箇条書きはこの操作の繰り返しで必要な分だけ入力します続けてうめももと Enter キーで改行しながら入力してみましょう図 56 入力例 29

サイトを新規作成する上部タブよりサイトサイトの新規作成を選択してください ( 図 57) 図 57 サイトの新規作成サイト名を入力 ( サイト名は自分の好きな名前で!

30 F. サイト機能を使ってホームページを作成するホームページビルダーにはサイト機能がありますこれはホームページの中で使われるファイル画像などをまとめて管理 ( 保存 ) しサイト単位でファイルの読み込みなどができる機能ですサイトを作成する場合は新たにホームページビルダー 18 を立ち上げてください 1. サイトを新規作成する上部タブよりサイトサイトの新規作成を選択してください ( 図 57) 図 57 サイトの新規作成サイト名を入力 ( サイト名は自分の好きな名前で! ページタイトルとなります ) 次へをクリックし ( 図 59) 新規にトップページを作成するをクリック次へをクリック ( 図 58) 図 59 サイト名を決める図 58 新規にトップページを作成 30

$html を選択し参照 (B) をクリック ( 図 60) フォルダの選択画面が表示されるのでサイトを作成する場所を指定する学内の場合マイドキュメント (X:\) の中の local_html フォルダを指定したら OK をクリック ( 図 61)$ (local_html フォルダは 4 ページで作成済み ) 図 60 の画面に戻るのでサイト新規作成に戻り完了をクリック local_html を選択図 60 index_html を作成図 61 local_html フォルダを選択

(local_html フォルダは 4 ページで作成済み ) 図 60 の画面に戻るのでサイト新規作成に戻り完了をクリック local_html を選択図 60 index_html を作成図 61 local_html フォルダを選択

31 トップページのファイル名 (P) 欄で index.html を選択し参照 (B) をクリック ( 図 60) フォルダの選択画面が表示されるのでサイトを作成する場所を指定する学内の場合マイドキュメント (X:\) の中の local_html フォルダを指定したら OK をクリック ( 図 61) (local_html フォルダは 4 ページで作成済み ) 図 60 の画面に戻るのでサイト新規作成に戻り完了をクリック local_html を選択図 60 index_html を作成図 61 local_html フォルダを選択ページ作成方法の選択という画面が表示されますが今回は白紙ページを選択してください ( 図 62) これはカスケーディングスタイルシート (CSS) の設定ですが今回は省略しますもう少しホームページやインターネットの知識が身に付いたら試してみてください図 62 ページ作成方法の選択これでサイト作成完了ですこのサイトに html ファイルを追加していくことでホームページを作成していきます ( 転送設定のメッセージが表示されますがいいえをクリックしてください ) 31

2. サイト作成後 html ファイルの作成方法は 5~18 ページを参考にしてください

html newpage2.html newpage3.html 図 63 新規サイト制作例 3.

local_html フォルダ内に保存されます ( 図 64) 参考までにマイドキュメントの中の

ファイルを作成しましたがフォルダにはそれに付随する複数のファイル ( 画像など )

32 2. サイト作成後 html ファイルの作成方法は 5~18 ページを参考にしてください今回は以下のような 3 つの html ファイルを作成してみました index.html newpage2.html newpage3.html 図 63 新規サイト制作例 3. 作成したファイルをサイトに保存するファイルすべて保存を選択する全てのファイルが local_html フォルダ内に保存されます ( 図 64) 参考までにマイドキュメントの中の local_html フォルダを開いてくださいここでは上の 3 つの html ファイルを作成しましたがフォルダにはそれに付随する複数のファイル ( 画像など ) が自動的に保存されていますこれらのファイルが別のフォルダに保存されてしまうとホームページ更新時に画像が表示されない等の不具合が生じます Index.htm 図 64 local_html フォルダを開いた画面 32

4. サイト単位でファイルを読み込む作成したファイルをサイト名でまとめて読み込むことができますメニューバーのサイトサイトを開くを選択 ( 図

で自分で入力したサイト名 ) を選択開くをクリック ( 図 65) 図 66 サイト単位でファイルを読み込む図 65 サイトを開く

編集したいファイルをダブルクリックすると編集画面が開きます図 63 と比較してリンク構造を確認して下さい Index.html index.

33 4. サイト単位でファイルを読み込む作成したファイルをサイト名でまとめて読み込むことができますメニューバーのサイトサイトを開くを選択 ( 図 66) 新しいサイト 1(1. で自分で入力したサイト名 ) を選択開くをクリック ( 図 65) 図 66 サイト単位でファイルを読み込む図 65 サイトを開くメニューバーからサイトメニューを開くと下記のようなビジュアルサイトビューが開きサイト内のリンク構造が表示されます編集したいファイルをダブルクリックすると編集画面が開きます図 63 と比較してリンク構造を確認して下さい Index.html index.html から newpage2.html と newpage3.html に newpage2.html newpage3.html Newpage2.html から index.html にリンク Newpage3.html から index.html にリンク図 67 ビジュアルサイトビュー 33

34 5. ファイルの転送ページの公開は 19~21 ページを参考にしてください 34

ホームページの作り方　講習会テキスト

ホームページの作り方　講習会テキストホームページの作り方 2011 年 4 月更新明治大学講習の前にこの講習はホームページビルダー 14 を利用してホームページを作成し駿河台地区設置の WWW サーバーで公開する手順を実習する講習です ( 最新のバージョンと異なる場合もあります ) 講習では 2 つページを作成しますテキストの中では各自の USB メモリに保存するように指示されています持っていない場合はデスクトップまたは

ホームページの作り方 講習会テキスト

ホームページの作り方　講習会テキスト