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

Size: px

Start display at page:

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

もえりやぶき
7 years ago
Views:

1 ホームページの作り方 2011 年 4 月更新明治大学講習の前にこの講習はホームページビルダー 14 を利用してホームページを作成し駿河台地区設置の WWW サーバーで公開する手順を実習する講習です ( 最新のバージョンと異なる場合もあります ) 講習では 2 つページを作成しますテキストの中では各自の USB メモリに保存するように指示されています持っていない場合はデスクトップまたは MyDocs に保存してくださいなおこのテキストはパソコンの基本的な操作は一通りできるものとして作成されていますブラウザ ( Firefox や Internet Explorer) の使い方はこの講習ではふれませんまたホームページを公開するためには基盤サービスアカウントが必要です注 1) Homepage Builder14 ではファイルのことをページと呼んで管理しています注 2) Homepage Builder14 はメディア教室メディア実習室 1 2 で利用可能です 1

2 目次 1. ページ公開の仕組み HTML とタグ準備ホームページビルダーの立ち上げ新たにページを作成する... 6 (1) 通常の新規作成... 6 (2) フレームを使いたい場合などの新規作成見出しの作成文の入力 ( 段落の作成 ) 水平線の入力箇条書きの作成ページにタイトルを付けるページを保存するリンクの設定 (1) リンク先の用意 (2) 設定画像の貼り込みページの保存 ( 画像ファイルも合わせて保存する ) ページのアップロード ( 転送と公開 ) 付録 A. 文字の書式の変更 B. リンクの設定 (URL で指定 ) C. 表の作成 D.FFFTP でのサーバー側のファイル操作 (1) ファイルの削除 (2) フォルダの作成 E.FTP ツールによるファイル転送 F. ロゴの作成

3 1. ページ公開の仕組みホームページは WWW(World Wide Web ワールドワイドウェブ ) というシステムを利用して情報を発信する際に作成します作成したデータを WWW サーバー ( 情報を実際に発信するコンピュータ ) 上に用意することでインターネット上のコンピュータからそのデータが閲覧されるようになります駿河台和泉の利用者がホームページを公開する場合は作成したデータを suruga2 というサーバに転送 ( アップロード ) しますその際には必要に応じて事前に各自の転送先に local_html あるいは public_html というディレクトリ ( フォルダ ) を用意し学内へのみ公開にしたいならば suruga2 の local_html へ ( 練習用 ) 学外へも公開にしたいならば suruga2 の public_html へ転送しますなお転送したデータは以下の URL で参照できます学内のみの公開基盤サービス利用アカウント / ファイル名学外への公開基盤サービス利用アカウント / ファイル名なおホームページを公開するに当たっては MIND 利用基準を遵守しなければなりません以下を参照してください学校法人明治大学総合情報ネットワーク (MIND) 利用基準 ( MIND 利用上の遵守事項ガイドライン (2010 年 4 月 1 日 ) ( ) 転送 ( アップロード ) 3

4 2.HTML とタグホームページは HTML(Hyper Text Markup Language) という形式で記述します ( 図 1) <HTML> <HEAD> <TITLE> ホームページだよ ~ ん </TITLE> </HEAD> <BODY> <H1> ホームページだよ ~ ん </H1> <IMG SRC= my_face.gif > <HR> ほにゃほにゃふげふげ </BODY> </HTML> ( 図 1) この中の <H1> や </H1> をタグといい文章の構成や書式などを指定する役割を持っていますこの HTML のデータはテキストデータですのでメモ帳などでも作成可能ですがその場合はタグの種類意味を覚えていないと作成できませんこの講習で使うホームページビルダーはタグを知らなくてもマウスの操作でデータにタグを自動的に埋め込みながらホームページの作成を行なえるソフトです 3. 準備講習会では学内用に公開するページの作成を行います用意した USB メモリに local_html という名前のフォルダを作成してください以後作成したページなどはこのフォルダに保存しますまたこの講習ではサーバーへの転送はこのフォルダごと行います ( 図 2) ( 図 2) 4

5 4. ホームページビルダーの立ち上げホームページビルダーは以下の順にメニューをたどって立ち上げてください ( 図 3) スタートボタンすべてのプログラム配信型アプリケーション ( 図 3) WebDesktop XP Style Windows Internet Explorer ウィンドウから Homepage Builder14 をクリックすると Z!Stream 3.0 のウィンドウが表示されます状態の欄が起動準備中から起動中に変わるとホームページビルダーが立ちあがります ( 図 4) ( 図 4) 5

5. ページを新規作成する (1) 通常の新規作成ホームページビルダーが立ち上がると最初にスタートウィンドウが表示されますこの中からページを作成する (N) をクリックしてください次いでページ作成方法の選択ウィンドウから白紙ページ

標準モードが選択されています ) これでページの作成が始められます ( 図 5) (2) フレームを使いたい場合などの新規作成白紙ページの作成ウィンドウでページの種類 (P) メニューからフレームページ

白紙から作成するか予め用意された雛形 ( テンプレート ) を元に作成を始めるかの指示はページ作成方法の選択ウィンドウから選択できます詳細なレイアウトの指示を含むページを作成するか否かの指示も同様にページ作成方法の選択ウィンドウから選択できます

6 5. ページを新規作成する (1) 通常の新規作成ホームページビルダーが立ち上がると最初にスタートウィンドウが表示されますこの中からページを作成する (N) をクリックしてください次いでページ作成方法の選択ウィンドウから白紙ページ (B) を選択してください白紙ページの作成ウィンドウが現れるので初期設定の状態のままで OK ボタンをクリックしてください ( 図 5) ( 初期設定では表示環境 (D) は PC ページページの種類 (P) は通常ページ編集モード (E) は標準モードが選択されています ) これでページの作成が始められます ( 図 5) (2) フレームを使いたい場合などの新規作成白紙ページの作成ウィンドウでページの種類 (P) メニューからフレームページを選択するとフレームを使用したホームページを作成できます ( 図 6) ( 図 6) ページを閲覧するであろう対象のシステム (PC や携帯電話など ) の指定は白紙ページの作成ウィンドウの表示環境 (D) メニューから選択できます白紙から作成するか予め用意された雛形 ( テンプレート ) を元に作成を始めるかの指示はページ作成方法の選択ウィンドウから選択できます詳細なレイアウトの指示を含むページを作成するか否かの指示も同様にページ作成方法の選択ウィンドウから選択できますはじめて利用する場合や意味がよくわからない場合には (1) 通常の新規作成の手順で進めるのがよいでしょう注 ) このテキストでは初心者用の編集スタイルであるかんたんモードで作成していきますあらかじめ表示 (V) の編集のスタイルの切り替え (O) を選択しかんたんモードに切り替えておきましょう 6

6. 見出しの作成はじめにページに見出しをつけましょうページ編集の画面内をクリックしてください ( 図 7) ( 図 7) この状態で文字を入力すると

この枠内の箇所に対して様々な設定をすることが可能です ( 図 8) 色つきの枠内の文字 ( 列 ) に対して属性等が指示できる ( 図 8) 文字を入力したら

見出しのレベル 1 であることが指示されて画面上の表示も変化します ( 図 9) ( 図 9) この操作は画面中央上のメニューから選択することでも可能です ( 図

Internet Explorer) でどのような大きさ形で表示されるかという点については基本的にはブラウザ次第です通常の文を入力している際に

7 6. 見出しの作成はじめにページに見出しをつけましょうページ編集の画面内をクリックしてください ( 図 7) ( 図 7) この状態で文字を入力すると通常の文として文字が入力されます文字が入力されている間色つきの枠が表示されますこの枠が現在編集している対象あるいはページの部分を示していてこの枠内の箇所に対して様々な設定をすることが可能です ( 図 8) 色つきの枠内の文字 ( 列 ) に対して属性等が指示できる ( 図 8) 文字を入力したらツールバーにある属性の変更をクリックし属性ウィンドウの段落 (P) メニューの中から見出し 1 を選択してみてくださいすると入力した文字に対してそれが見出しのレベル 1 であることが指示されて画面上の表示も変化します ( 図 9) ( 図 9) この操作は画面中央上のメニューから選択することでも可能です ( 図 10) ( 図 10) 見出しは新聞でいう見出しと同じ意味で表示される文字の大きさや形を指示するものではありません見出しがブラウザ上 (Firefox や Internet Explorer) でどのような大きさ形で表示されるかという点については基本的にはブラウザ次第です通常の文を入力している際に単純に文字の大きさを変更したい場合は書式 (O) メニューのフォント (F) を選択してフォントウィンドウのサイズ (I) で文字の大きさを変更してください実際の手順は付録 A. 文字の書式の変更を参照してください 7

7. 文の入力 ( 段落の作成 ) 見出しの設定ができたら通常の文章を入力してみましょうまず見出しの下をクリックしてくださいこのとき見出しにあった枠の表示が消えた場合はそこから新しい段落が開始できますまだ見出しに枠がある場合は下向きのカーソルキー ( ) を押してくださいホームページビルダーでは通常下向きのカーソルキー ( 矢印キー ) を押して新しい文

8 7. 文の入力 ( 段落の作成 ) 見出しの設定ができたら通常の文章を入力してみましょうまず見出しの下をクリックしてくださいこのとき見出しにあった枠の表示が消えた場合はそこから新しい段落が開始できますまだ見出しに枠がある場合は下向きのカーソルキー ( ) を押してくださいホームページビルダーでは通常下向きのカーソルキー ( 矢印キー ) を押して新しい文段落を開始します適当に文字 ( 文 ) を入力してみてください ( 図 11) ( 図 11) ホームページビルダーで Enter キーを押すと改行されますが段落が変更になったとはみなされません ( 図 12) ( 図 12) 段落と改行改行の指示は行を変える <BR> タグをページに埋め込みます一方段落の変更は <P> タグが埋め込まれます画面では同じように見えますが実際に作成された HTML には違いがあるのですホームページを作成する際に使わない方が良い文字世の中には様々なコンピュータがあり機種によっては表示できない文字がありますこれを機種依存文字または環境依存文字といいます例えば半角カナ文字 ( アイウ ) 丸付きの数字 (1 2 3) ローマ数字 (Ⅰ Ⅱ Ⅲ) などがそれにあたりますこれらは表示する側で違う文字に置き換えられたり何も表示されなかったりすることがあるのでページを作成する際には使用しないようにしましょう 8

8. 水平線の入力次は水平線 ( 区切り線 ) を引いてみましょう左側のナビメニュー

箇条書きの作成今度は箇条書きを作成してみましょうホームページで使われる箇条書きには

9 8. 水平線の入力次は水平線 ( 区切り線 ) を引いてみましょう左側のナビメニューから水平線の挿入を選択します水平線の挿入ウィンドウが表示されるので内容を確認し OK をクリックします ( 図 13) これで水平線が入ります ( 図 14) ( 図 13) ( 図 14) 9. 箇条書きの作成今度は箇条書きを作成してみましょうホームページで使われる箇条書きには番号なしの箇条書き ( 通常の箇条書き ) 番号つきの箇条書きなどがありますではカーソルを移動し枠が表示されていない状態にしてください ( 図 15) ( 図 15) 9

10 箇条書きは左側のナビメニューからリストの挿入を選択しリストの挿入ウィンドウで箇条書きの種類を指定することではじめます ( 図 16) ( 図 16) 通常を選択するとカーソル位置にが表示されるので何か文を入力し Enter キーを押してみてくださいすると 2 番目の文が入力できるようになります箇条書きはこの操作の繰り返しで必要な分だけ入力します ( 図 17) ( 図 17) 10

は1ページに1つだけ付けるもので見出しとは異なりますので注意してください ( 図

ページタイトル (P) に適当にタイトルを入力し OK をクリックしてください ( 図

11 10. ページにタイトルを付ける作成したページには必ずタイトルを付けるようこころがけましょうタイトルは1ページに1つだけ付けるもので見出しとは異なりますので注意してください ( 図 18) これがタイトルこれは見出し ( 図 18) ページ余白部分をクリックしてから編集 (E) メニュー属性の変更 (A) の順に選択してください ( 図 19) ( 図 19) ページ情報タブにあるページタイトル (P) に適当にタイトルを入力し OK をクリックしてください ( 図 20) タイトルを入力するタイトルが表示される ( 図 20) ここで入力した文字列が編集中のページのタイトルになりますページの背景色や表示文字の色の変更などもページの属性として指示することができます 11

11. ページを保存する保存はファイル (F) メニューから名前を付けて保存 (A) を選択し USB メモリへ index.

html ( または index.htm) という名称のファイルを送り返しますたとえば http://www.kisc.meiji.ac.

12 11. ページを保存する保存はファイル (F) メニューから名前を付けて保存 (A) を選択し USB メモリへ index.html という名前で保存してください保存する場所を指定しないと MyDocs の Documents にページが保存されてしまうので注意してください ( 図 21) 1. ドライブの指定 2. 保存するフォルダを開く ( 図 21) index.html という名前について明治大学で運用している WWW サーバーはあるクライアント ( ブラウザ ) からページ閲覧のリクエストを受け取ったときにページの名前が省略されていると index.html ( または index.htm) という名称のファイルを送り返しますたとえば /manuals/ というファイルの閲覧要求を受けた場合を送り返しますページに付けるファイル名パソコンではファイルやフォルダの名前にはアルファベットや数字だけでなくひらがなカタカナ漢字等さまざまな文字を使うことが可能ですしかしページの名前 ( ファイル名 ) に漢字等全角文字を使用するとページを公開する際にファイル名が文字化けを起こしたり別の形式の文字列に変換されてしまうことがありますよってページに付ける名前は半角英数字をのみを使うよう注意してください 12

12. リンクの設定 (1) リンク先の用意次はリンクの設定ですがその前にリンク先のページを用意しておきましょうもう一度ファイル (F) メニューから標準モードで新規作成 (B)

現在開いているページの一覧が表示されています複数のページを開いている場合はこの中から編集したいページを選択できますでは index.

13 12. リンクの設定 (1) リンク先の用意次はリンクの設定ですがその前にリンク先のページを用意しておきましょうもう一度ファイル (F) メニューから標準モードで新規作成 (B) を選択してください ( 図 22) ( 図 22) こちらのページは単純に index.html からのリンク先として用意するだけですので適当に文字を入力し sub.html という名前を付けて保存してください 10. ページにタイトルを付けるを参考にしてこちらのページにも任意のタイトルを付けてください ( 図 23) (2) 設定 ( 図 23) 保存できたら画面右側にあるページ一覧タブを見てください現在開いているページの一覧が表示されています複数のページを開いている場合はこの中から編集したいページを選択できますでは index.html を選択してください ( 図 24) ( 図 24) 最初に作成保存した index.html に sub.html へ移動するためのリンクを設定しましょう先ほど練習した箇条書きの後にカーソルを移動してくださいその場所に次のページへと入力してくださいさらに次のページへの部分をドラッグして色が反転した状態にしてくださいこのドラッグした文字列のどこかをクリックしたときに別のページへ移動する設定をします ( 図 25) ( 図 25) 13

このままの状態で画面左側ナビメニュータブからリンクの挿入を選ぶとリンク作成ウィザードが表示されますここでページや URL

ウィンドウではそのまま次へをクリックリンク作成ウィザード ( ページや URL へのリンク作成 ) ウィンドウでは選択

html を選択して開く完了の順にクリックしてください ( 図 26) ( 図 26) すると

プレビューのタブを選択し実際に設定したリンクの箇所をマウスでクリックしてみますクリックしたときに意図したページが表示されれば

14 このままの状態で画面左側ナビメニュータブからリンクの挿入を選ぶとリンク作成ウィザードが表示されますここでページや URL へのリンクを作成する (P) を選択して次へをクリックしリンク作成ウィザード ( 文字列画像ファイルの設定 ) ウィンドウではそのまま次へをクリックリンク作成ウィザード ( ページや URL へのリンク作成 ) ウィンドウでは選択ボタンをクリックしてファイルからを選択開くウィンドウが表示されるので sub.html を選択して開く完了の順にクリックしてください ( 図 26) ( 図 26) すると先ほどドラッグした箇所に下線が引かれますこれでリンクの設定は終了です ( 図 27) ( 図 27) 正しく設定できたか確認するにはプレビューのタブを選択し実際に設定したリンクの箇所をマウスでクリックしてみますクリックしたときに意図したページが表示されれば正しく設定がなされていることになります ( 図 28) ( 図 28) プレビューの状態では編集はできません設定が間違っていた場合などはページ編集のタブをクリックしリンクの設定した箇所を一旦クリックしてからリンク先の再指定をしてください ( 図 29) ( 図 29) 14

15 リンクは文字をドラッグして選択した状態で右クリックしメニューのリンクの挿入 (L) を選択しても同じ様に設定できます ( 図 30) 右クリックでメニューが表示される ( 図 30) 属性ウィンドウで先ほどのようにリンク設定を行うことができます ( 図 31) ( 図 31) 画像などをクリックした場合に別のページへ移動するようなリンクの設定も同じ方法で行います 15

13. 画像の貼り込み今度は画像を貼り込んでみましょう今回はホームページビルダーに添付されている素材集の画像を貼り込んでみます

32) ( 図 32) 素材集の中から好きな画像を選択して開く (O) をクリックすればカーソル位置にその画像が貼り込まれます ( 図 33)

著作権や肖像権に注意ページに貼り込む画像データの著作権やデジカメなどで撮影した写真に自分以外の人物が写っている場合の肖像権などには

jpg) PNG( 拡張子.png) といった形式の画像を用意しますがホームページビルダーでは BMP( 拡張子.

16 13. 画像の貼り込み今度は画像を貼り込んでみましょう今回はホームページビルダーに添付されている素材集の画像を貼り込んでみますカーソルを移動し枠が表示されていない状態にしてください次にナビメニュータブの写真や画像の挿入から素材集からを選択してください ( 図 32) ( 図 32) 素材集の中から好きな画像を選択して開く (O) をクリックすればカーソル位置にその画像が貼り込まれます ( 図 33) カーソル位置に画像が入る ( 図 33) 画面左側の素材タブからも画像ファイルを選択することができます ( 図 34) ( 図 34) 著作権や肖像権に注意ページに貼り込む画像データの著作権やデジカメなどで撮影した写真に自分以外の人物が写っている場合の肖像権などには十分注意してくださいページに貼る画像の形式通常ページに画像ファイルを貼る場合 GIF( 拡張子.gif) や JPEG( 拡張子.jpg) PNG( 拡張子.png) といった形式の画像を用意しますがホームページビルダーでは BMP( 拡張子.bmp) の画像でも貼り込むことが可能です ( ホームページビルダーが形式を変換してくれます ) ページに画像を貼る場合画質を保ちながらなるべくファイルサイズを小さくしてサーバー容量や閲覧者の通信負担を軽減する配慮も必要です 16

14. ページの保存 ( 画像ファイルも併せて保存する ) ページの用意ができたのですべてを保存しましょうすべてを保存するにはまず編集スタイルをスタンダードモードに変更します ( 現在の編集スタイルであるかんたんモードにはすべて保存 (V) の項目が無い為

からすべて保存 (V) を選択します ( 図 36) ( 図 36) 現在開いているページは index.html と sub.html の 2 つですが変更があったページについて保存の方法を尋ねてきますここで index.

同じフォルダに保存しようとします特に理由がない限りページと画像は同じフォルダに保存しておくとよいでしょう ( 特に素材集から画像ファイルを貼り込んだ場合など )( 図 37) Index.

17 14. ページの保存 ( 画像ファイルも併せて保存する ) ページの用意ができたのですべてを保存しましょうすべてを保存するにはまず編集スタイルをスタンダードモードに変更します ( 現在の編集スタイルであるかんたんモードにはすべて保存 (V) の項目が無い為この操作が必要になります慣れてくれば始めからスタンダードモードでページを作成しても構いません ) 表示 (V) メニューの編集スタイルの切り替え (O) を選択し編集スタイルをスタンダードに変え OK をクリックしてください ( 図 35) ( 図 35) ファイル (F) からすべて保存 (V) を選択します ( 図 36) ( 図 36) 現在開いているページは index.html と sub.html の 2 つですが変更があったページについて保存の方法を尋ねてきますここで index.html には先ほど画像を貼り込んだのでホームページビルダーはその画像ファイルをどこに保存するか尋ねてきます画像を含むページを作成した場合は画像ファイルの保存場所に注意してくださいホームページビルダーはページとそのページに使われている画像ファイルを同じフォルダに保存しようとします特に理由がない限りページと画像は同じフォルダに保存しておくとよいでしょう ( 特に素材集から画像ファイルを貼り込んだ場合など )( 図 37) Index.html と同じ場所 ( 図 37) 画像ファイルの名前を変更する必要がある場合にはここで変更しておきましょう画像ファイルを一つのフォルダにまとめて保存しておきたい場合はページと画像ファイルを無理に同じフォルダにする必要はありませんがページを転送公開する際には画像を保存してあるフォルダも併せて転送する必要がありますので注意してください以上でページの作成は終了です次にこれらのページをサーバーへ転送し実際にブラウザで表示してみましょう 17

15. ページのアップロード ( 転送と公開 ) 作成したページはサーバーへ転送して

ホームページビルダーにも作成したファイル ( ページ ) をサーバーへ転送するためのツール FTP ツール

に転送する必要がありますではスタートメニューからすべてのプログラム (P) を選択し FFFTP フォルダの

( 図 39) ( 図 39) 接続のためのユーザー名とパスワード ( 基盤サービス利用アカウントとパスワード )

40) 正しく接続できると転送先にあるファイル名フォルダ名 ( ディレクトリ名 ) が表示されます

18 15. ページのアップロード ( 転送と公開 ) 作成したページはサーバーへ転送して初めてインターネット上に公開されます転送には FFFTP というファイル転送のためのソフトを利用しましょうホームページビルダーにも作成したファイル ( ページ ) をサーバーへ転送するためのツール FTP ツールがありますがそちらについては付録で紹介します駿河台地区でページを公開する際には作成したページを suruga2 に転送する必要がありますではスタートメニューからすべてのプログラム (P) を選択し FFFTP フォルダの FFFTP を立ち上げてください ( 図 38) ( 図 38) suruga2 を選択し接続をクリックしてください ( 図 39) ( 図 39) 接続のためのユーザー名とパスワード ( 基盤サービス利用アカウントとパスワード ) を入力します一旦接続を切ってしまった場合などはユーザー名とパスワードの再入力が必要になります ( 図 40) ( 図 40) 正しく接続できると転送先にあるファイル名フォルダ名 ( ディレクトリ名 ) が表示されます画面の左側が使用しているローカルパソコン右側がサーバーになります ( 図 41) 自分の ID 現在使用している PC 側のファイル等が表示されるサーバー側のファイル等が表示される ( 図 41) 18

PC 側を USB メモリ ( この場合は F ドライブ ) に指定しページを保存した local_html フォルダをクリックして選択しアップロードボタンを押すとアップロードが開始されますファイルを直接ドラッグ & ドロップしてもアップロードは可能です ( 図 42) アップロードボタン F ドライブ (USB

必要に応じてサーバー側のフォルダの名前を変更してからアップロードしてください以上で転送は終了しました切断ボタンをクリックして FFFTP を終了してください ( 図 43) ( 図 43) ブラウザ ( インターネットエクスププローラーかネットスケープナビゲーター ) を立ち上げて http://local.

19 PC 側を USB メモリ ( この場合は F ドライブ ) に指定しページを保存した local_html フォルダをクリックして選択しアップロードボタンを押すとアップロードが開始されますファイルを直接ドラッグ & ドロップしてもアップロードは可能です ( 図 42) アップロードボタン F ドライブ (USB メモリ ) を選択しページを保存した local_html フォルダアップロードボタンを順にクリックする ( 図 42) サーバー側に local_html フォルダがない場合は自動的に作成されますすでにサーバー側に local_html ディレクトリがある場合は上書きされてしまいますので必要に応じてサーバー側のフォルダの名前を変更してからアップロードしてください以上で転送は終了しました切断ボタンをクリックして FFFTP を終了してください ( 図 43) ( 図 43) ブラウザ ( インターネットエクスププローラーかネットスケープナビゲーター ) を立ち上げて基盤サービス利用アカウント / にアクセスしてみてください作成したページが表示されたでしょうか最後にホームページビルダーなど起動しているソフトウェアを終了してくださいまた以下の事項にも注意してください USB メモリなどが PC に残ったままになっていないか? パソコンをシャットダウンしたか? 19

(O) メニューを開き指定したい内容を選択します指定できる内容は以下の通りです ( 図 45) 主な項目フォント(F) 文字飾り(M) 位置揃え(A) 指定できる内容文字の色大きさ形状 ( 太字

20 付録 A. 文字の書式の変更文中の文字の色や大きさ形を変更したい場合は以下の手順で行います変更したい文字列をドラッグして選択します ( 図 44) ( 図 44) このとき枠は段落全体にかかっているので右クリックをして表示されるメニューの属性の変更 (A) を選択すると段落に対しての属性が変更になってしまい文字の色や形状の変更はできませんよって文字列の選択後書式 (O) メニューを開き指定したい内容を選択します指定できる内容は以下の通りです ( 図 45) 主な項目フォント(F) 文字飾り(M) 位置揃え(A) 指定できる内容文字の色大きさ形状 ( 太字斜体など ) 太字斜体下線付などの指示右寄せ左寄せセンタリングの指示 ( 図 45) ここでフォント (F) を選択しフォントウィンドウ上 ( 図 46) で色を赤サイズを +2 と指定すると 20 ( 図 46)

右揃えを指示するボタン文字の大きさの指定について文字の大きさは 1~7 までの数字あるいは -2~+4 の割合で指示します特に指示がない場合文字の大きさは 3(0) になりますただし大きさの違いは実際にブラウザで表示しないとわかりませんので注意してください B.

21 このようになります ( 図 47) ( 図 47) これを再度変更したい場合は変更部分をドラッグするとその部分だけに枠が表示されるので右クリックで表示されるメニューから属性の変更 (A) を選択してください ( 図 48) A ( 図 48) なお書式 (O) メニューを開かずにツールバーのボタンを用いて書式を変更することも可能です左から太字斜体打ち消し線を設定するボタン ( 打ち消し線はかんたんモードでは表示されない場合があります ) 左から文字サイズ拡大文字サイズ縮小フォント ( 大きさ色形状など ) の変更を行うボタン左から左揃え中央揃え右揃えを指示するボタン文字の大きさの指定について文字の大きさは 1~7 までの数字あるいは -2~+4 の割合で指示します特に指示がない場合文字の大きさは 3(0) になりますただし大きさの違いは実際にブラウザで表示しないとわかりませんので注意してください B. リンクの設定 (URL で指定 ) リンク先にインターネット上の別のサイトを指定する場合は文字列をドラッグして右クリックしリンクの挿入 (L) を選択したあと属性ウィンドウで URL へタブを選択しリンク先の指定をしてください ( 図 49) ( ナビメニューのリンクの挿入からでも設定できます ) ( 図 49) 21

22 C. 表の作成表の作成は表 (A) メニューの表の挿入 (B) を選択するあるいは表の挿入ボタンをクリックします ( 表の挿入ボタンはかんたんモードでは表示されません )( 図 50) ( 図 50) 表の挿入ウィンドウが表示されますのでここで行数列数を指定して OK をクリックしてください ( 図 51) ( 図 51) カーソル位置に四角い枠が指定した数だけ表示されますあとはこの枠をクリックし文字などを埋めていけば表ができあがります ( 図 52) ( 図 52) 22

23 D.FFFTP でのサーバー側のファイル操作 (1) ファイルの削除たとえば転送の際にフォルダごと転送した場合フォルダ内のすべてのファイルが転送されるのでホームページビルダーが作成したバックアップ用ファイル ***.bak. といった不要なファイルも転送されてしまいますこれらを削除したい場合は不要なファイルを右クリックし削除を選択しファイル名を確認のうえはい (Y) をクリックしてください ( 図 53) サーバー側 (2) フォルダの作成 ( 図 53) サーバー側にフォルダを作成する場合は FFFTP のサーバー側で右クリックし表示されるメニューからフォルダ作成 (K) を選択し名前を指定して OK をクリックしてください ( 図 54) ( フォルダ作成ボタンをクリックしても作成できます ) サーバー側 ( 図 54) 23

選択不要指示をするならその他を選択します FTP サーバー名 (S) suruga2 FTP アカウント名 (U) 自分の基盤サービス利用アカウント FTP パスワード (P)

24 E.FTP ツールによるファイル転送ホームページビルダーに付属している FTP ツールを使用したファイル転送の手順は以下のとおりですホームページビルダーのツールメニューから FTP ツールの起動 (F) を選択します ( 図 55) ( 図 55) ファイル転送設定ウィンドウが表示されたら以下を入力します ( 図 56) サーバープロファイル名任意の名前プロバイダの選択選択不要指示をするならその他を選択します FTP サーバー名 (S) suruga2 FTP アカウント名 (U) 自分の基盤サービス利用アカウント FTP パスワード (P) なにも入力しないあるいは自分のパスワードを入力するここで入力しない場合接続を始めたときにパスワードをきかれるのでそのときに入力する任意の名前選択不要 suruga2 を指定自分の ID 入力不要 ( 図 56) 24

25 OK をクリックし接続ボタンをクリックし次いでパスワードを入力します ( 図 57) サーバープロファイル名サーバーとの接続または切断サーバープロファイル名 FTP サーバー名 ( 図 57) 左側には PC のファイルやフォルダが表示されるので必要なものを選択し上向き矢印をクリックすればそれがサーバーに転送されます ( 図 58) 必要なファイルを選択し転送ボタンをクリックする ( 図 58) 終わったら切断ボタンをクリックして終了してください ( 図 59) ( 図 59) 25

26 F. ロゴの作成ロゴは以下の手順で作成できますロゴを入れたい箇所にカーソルを移動します ( 図 60) ( 図 60) 画面左側ナビメニュータブのロゴ ( 飾り文字 ) の挿入からロゴ ( 飾り文字 ) をクリックします ( 図 61) ( 図 61) ロゴの作成ウィンドウが表示されるので文字列サイズ形状等を入力してください ( 図 62) ( 図 62) 完了ボタンをクリックするとカーソル位置にロゴが入ります ( 図 63) ( 図 63) 26

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

ホームページの作り方　講習会テキストホームページ作成ソフト ( ホームページビルダー ) 講習会テキスト 2014 年 4 月 1 日版明治大学メディア支援事務室目次目次... 2 --- 本テキストについて ---... 2 1. 概要... 3 1.1 ページ公開の仕組み... 3 1.2 HTML とタグ... 4 2. コンテンツ ( 素材 ) の作成... 4 2.1 準備... 4 2.2 ホームページビルダー

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

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