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

Size: px

Start display at page:

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

ときなまるこ
5 years ago
Views:

1 ホームページ講習会テキスト明治大学教育の情報化推進本部 2018 年 9 月版

2 1. 概要ページ公開のしくみ HTML とタグコンテンツ ( 素材 ) の作成準備ホームページビルダー 21 の起動新たにページを作成する文字の入力 ( 見出しの作成 ) 文の入力 ( 段落の作成 ) フォントの変更水平線の入力箇条書きの入力壁紙の挿入ページにタイトルを付けるページを保存するリンクの設定画像の挿入ページの保存 ( 画像ファイルも合わせて保存する ) WEB サーバーへのアップロードページのアップロードホームページをブラウザ上で見る付録 A. 表の挿入 B. ロゴの作成 C. サイト機能... 50

3 --- 本テキストについて --- このテキストはホームページビルダー 21 クラシック ( ホームページ作成ソフト ) を利用してホームページの元となる形式のドキュメントを作成後大学の Web サーバーへファイル転送ソフトを用いて転送してホームページを公開するまでの基本的な手順を記しています使用環境は Windows10 となりますがパソコンの基本的な操作ウェブブラウザ (Microsoft Internet Explorer や Mozilla Firefox Google Chrome 等 ) の操作に関する詳細は本テキスト中では省略させていただきます

1. 概要 1.1. ページ公開のしくみホームページは WWW というシステムを利用して情報を発信する際に作成します作成したデータを Web サーバー上に用意することでインターネットに接続したコンピューターからそのデータが閲覧できるようになります WWW:World Wide Web( ワールドワイドウェブ ) Web サーバー : 情報を実際に発信するコンピューター

4 1. 概要 1.1. ページ公開のしくみホームページは WWW というシステムを利用して情報を発信する際に作成します作成したデータを Web サーバー上に用意することでインターネットに接続したコンピューターからそのデータが閲覧できるようになります WWW:World Wide Web( ワールドワイドウェブ ) Web サーバー : 情報を実際に発信するコンピューター明治大学の利用者がホームページを公開する場合下記の 4 つの手順が必要です 1. MyDocs(X:) に local_html( 学内向けの場合 ) public_html( 学外向けの場合 ) という名前のフォルダを作成します 2. そのフォルダの中に作成したホームページのファイルや画像を保存します 3. ホームページを保存したフォルダをファイル転送ソフト FFFTP を利用して学内のファイルサーバーにアップロードします 4. ブラウザのアドレスバーに下記の URL を入力することで公開されていることを確認します学内のみの公開ユーザー ID/ ファイル名学外への公開ユーザー ID/ ファイル名ユーザー IDは学部生の場合以前の英数文字になりますファイル名を指定しない場合は通常 index.html を読み出しこれがトップページとなります ( 後述ページを保存する ) この講習会では最終的に 46 ページの図のようなホームページを完成させます 1

なおホームページを公開するに当たっては MIND 利用基準を遵守しなければなりません以下を参照してください学校法人明治大学総合情報ネットワーク

html 学校法人明治大学総合情報ネットワーク (MIND) 運用基準 http://www.meiji.ac.

html 学内インターネットパソコンで作成各端末へアップロードファイルサーバー WEB サーバーページ公開のしくみ参考 : ユーザー ID

5 なおホームページを公開するに当たっては MIND 利用基準を遵守しなければなりません以下を参照してください学校法人明治大学総合情報ネットワーク (MIND) 利用基準学校法人明治大学総合情報ネットワーク (MIND) 運用基準学内インターネットパソコンで作成各端末へアップロードファイルサーバー WEB サーバーページ公開のしくみ参考 : ユーザー ID 前の [ ~ ]( チルダ ) は [Shift] キー + [ へ ] キーを半角で入力したものです [Shift] キーを押さずに [ へ ] キーを押すと [ ^ ]( キャレット ) が入力されますまた [ _ ]( アンダーバー ) は [Shift] キー + [ ろ ] キーを半角で入力したものです 2

6 1.2. HTML とタグ HTML とは Hyper Text Markup Language の略称です下図のようなものをソースコードと呼びますホームページはブラウザがソースコードを視覚化したものです <H1> ようこそ </H1> の部分ように < > 記号で囲まれた部分をタグと呼びます <HTML> が HTML 文書の開始タグ <BODY> がホームページ本文の開始タグ </BODY> が本文の終了タグと言うようにデータがどういう要素であるかを記述しています HTML のデータの中身はテキストデータですのでメモ帳秀丸 TeraPad などのテキストエディターでも作成可能ですがその場合はタグの種類意味を理解する必要がありますこの講習で使うホームページビルダー 21 はタグを知らなくても直観的な操作でタグを自動的に埋め込みながらホームページの作成を行えるものです <HTML> <HEAD> <TITLE> 私のホームページ </TITLE> </HEAD> <BODY> <H1> ようこそ </H1> <IMG SRC="my_face.gif"> <HR> このホームページの説明 </BODY> </HTML> 3

準備ドキュメントに local_html というフォルダを作成してくださいこれは明治大学における学内に公開するためのフォルダの命名規則ですレンタルサーバーなどでは自由に命名することができますウィンドウ上部メニューバーの [ ホーム ] タブを開くと見つかる [

7 2. コンテンツ ( 素材 ) の作成これからホームページの作成を行いますがまず命名規則の注意点について記述します特に注意することはコンテンツやフォルダの名前は全て半角英数で入力するということです全角文字半角カタカナ日本語等で名前を入力するとホームページを公開した時に正しく表示されないことがありますまた環境によっては大文字小文字をしっかり区別することが必要な場合もありますスペースも全角半角問わず混乱の原因になるので取り扱わないほうがよいでしょう 2.1. 準備ドキュメントに local_html というフォルダを作成してくださいこれは明治大学における学内に公開するためのフォルダの命名規則ですレンタルサーバーなどでは自由に命名することができますウィンドウ上部メニューバーの [ ホーム ] タブを開くと見つかる [ 新しいフォルダ ] をクリックしフォルダを作成しますエクスプローラー上の空いている場所で右クリックをし新規作成フォルダでも可能です半角英数で local_html という名前に変更します以後作成したページや画像はすべてこのフォルダに保存しますまたサーバーへの転送もこのフォルダをまるごと行います右クリック 4

8 注意 : ひとつのフォルダにすべてのコンテンツが入っていないとホームページを更新した時に画像が表示されないリンク ( 参照 ) が切れてしまうなどの不具合が生じますサイト機能の紹介 : ホームページビルダーには上記でフォルダを作成するのと同じ目的でサイト作成という機能を利用することもできますサイト作成をするとサイト単位でファイルの読み込みができまたサイト内のファイルのツリー構造が確認できます既存のホームページの構造を知るのにも便利な機能です詳細は付録 C. サイト機能を参考にしてください 5

9 2.2. ホームページビルダー 21 の起動ホームページビルダー 21 を起動してくださいスタートボタンからいちばん下にスクロールしホームページビルダー 21 フォルダホームページビルダー 21 クラシックをクリックすると起動できますホームページビルダーが起動します 6

10 各部名称ホームページビルダー 21 クラシックの各部名称ですメニューバーナビバーツールバーナビメニュービュー 7

11 2.3. 新たにページを作成する標準モードで新規作成メニューバーよりファイル標準モードで新規作成と選択してくださいここで一般的なページの作成が始められますこの講習会では主にこのモードでページの作成を行います 8

12 どこでも配置モードで新規作成ホームページビルダーでは様々なホームページの形式を設定することができますメニューバーよりファイルどこでも配置モードで新規作成を選択すると下図のような水色のグリッドが引かれたモードになりますこのグリッドに沿ってさまざまなレイアウトを簡単に作成することができます表を使用したレイアウトなどを作成するときに特に役立ちます 9

13 フレーム設定ページの新規作成画面が二分割されているホームページを見たことがあるでしょうか画面の分割はフレームという機能を使って実現できますある程度ホームページビルダーの機能や HTML について学んだらぜひ挑戦してみましょうしかしながらスマートフォンなどのモバイル端末ではレイアウトがうまく表示されないという欠点があり近年の使用率は減少していますフレーム機能もウィザードを使用して簡単にページを作成することができます 10

効率的に作成が行えますが作成されたホームページに変更を加える場合ホームページビルダーの基本的な操作や

14 フル CSS テンプレートの新規作成ウィザードに沿って作成を進めることでホームページビルダーで用意されている形式のホームページを作成することができますホームページ全体の構成が自動的に生成されるため効率的に作成が行えますが作成されたホームページに変更を加える場合ホームページビルダーの基本的な操作や HTML についての知識が必要となります中身の差し替えだけで気軽に高級なページを作成できますスマートフォン向けのテンプレートも豊富です 11

15 ホームページビルダー 21 SP ホームページビルダー 19 以降のバージョンには SP モードという新機能が搭載されています基本的にパーツの入れかえと文章の入れかえだけで気軽にサイトが完成できるというものでブログサービスなどの感覚で既存のデザインに加筆していく内容になります本テキストでは SP モードの使い方の説明はありません 12

16 2.4. 文字の入力 ( 見出しの作成 ) 標準モードで新規作成をしますはじめにページに見出しをつけましょうページ編集の画面内で適当な箇所をクリックして文字を入力する準備をしてください下図は入力した例です実際の入力は次ページから紹介します行が選択されている間ピンクの枠が表示されますこの枠が現在編集している対象あるいはページの部分を示しこの枠内の箇所に対して様々な設定を指示することが可能です 13

17 初めての作成と文字を入力してください文字を入力したらメニューバーより表示属性ビューを押して属性ビューを表示させます 14

18 赤枠の部分に属性ビューが表示されます段落タブ段落タブの中の見出し 1 を選択してくださいするとピンクの枠線内の文字が見出しのレベル 1 に設定されますこの操作は画面上部のツールバーから選択することでも可能です 15

19 見出しとは新聞の見出しと同じ意味で表示される文字の大きさについての指示とは少し異なります見出しがブラウザ上 (InternetExplorer や GoogleChrome MozillaFirefox など ) でどのような文字大きさで表示されるかという点については基本的には Web ブラウザの仕様に依存します極端に言えば見出し 1 が 24pt で表示されるブラウザもあれば 36pt で表示されるブラウザもあるかもしれないということです 16

20 2.5. 文の入力 ( 段落の作成 ) 見出しの設定ができたら通常の文章を入力してみましょうまず 2.4 文字の入力 ( 見出しの作成 ) で作成した見出し初めての作成の下をクリックしますこのときはじめての作成に表示されていたピンクの枠が消えその下でカーソルが入力待ちの状態になりますこのときカーソルがずれて見えますが気にしないでくださいそこにこれからホームページを作りますと入力してみましょう入力した文字が新しくできたピンクの枠に入りましたピンクの枠は段落ですひとつの文章は段落によってまとめられます 17

21 ホームページビルダーでは段落内の最下段の文字を編集中に下向きのカーソルキー ([ ] キー ) を押すと新しい文段落が開始され新たに文字を入力できますまた段落の途中で Enter キーを押しても行は変わりますが段落が変更になったとはみなされませんたとえば見出しにピンクの枠があり見出し文の最下段にカーソルがある場合に下向きのカーソルキー ([ ] キー ) を押すかピンクの枠の下方の余白をクリックしすることで段落を抜けて入力待ちの状態に移行できますこの位置で [ ] キーを押すと入力待ちの状態になる 18

22 ホームページ作成上の注意点段落と改行改行の指示は行を変えるという <BR> タグをページに埋め込みます一方段落の変更は <P> タグが埋め込まれますひとつの段落はひとつの枠内で完結しますが改行は段落内に何個も存在できますホームページやメールを作成する際に使わない方がよい文字世の中には様々なコンピューターがあり機種によっては表示できない文字 ( 機種依存文字 ) がありますたとえば丸付きの数字 : 上下左右など組み文字 : ミリキロセンチメートルクラムトンアールヘクタールリットルワットカロリートルセントハーセントミリハールヘーシ mmcmkmmgkgcc KK 明治大正昭和平成などそのほか : 半角カナ文字 ( アイウエオ ) ローマ数字 (ⅠⅡ ⅢⅣ ⅰⅱⅲⅳ) などホームページやメールを作成する際にはこのような文字の使用は避けましょう 19

23 2.6. フォントの変更フォントを変更してみましょう初めての作成の作成の部分をドラッグして選択しますメニューバーから書式フォントを選択します 20

24 フォントダイアログが開きますここで任意のフォントを設定することができますここでは色を赤 (#FF0000) サイズを 7 斜体にしてみましょうサンプルを確認したら OK ボタンをクリックしますフォントが適用されました 21

25 簡易なフォント機能はツールバーからも設定することが可能ですこのツールバーを利用することでもフォントを変更できます赤枠で囲んだアイコンをクリックするとさきほどのフォントダイアログが開きます段落の指定について : 文字列にピンク色の枠 ( どこでも配置モードの場合は水色の枠です ) が表示されている時は段落が選択されていますこの状態でメニューバーの編集属性の変更 ( または右クリックで出たメニューから属性の変更 ) を選択すると段落全体に対しての属性指定になってしまい個別の文字色や形状の変更はできません要所のフォントを調整するには必ず文字そのものの部分を選択してからフォント設定を行ってください文字の大きさの指定について : 文字の大きさは 1~7 までの数字あるいは -2~+4 の割合で指示します特に指示がない場合文字の大きさは 3 (+0) になりますただし大きさの違いは実際に各ブラウザで表示しないとわかりませんので注意してください 22

26 2.7. 水平線の入力次は水平線 ( 区切り線 ) を引いてみましょう新しく文章を入力する感覚でカーソルを進めてください次にメニューバーから挿入水平線をクリックするか画面左部分に表示されているナビメニューレイアウト部品の挿入から水平線ボタンをクリックしてください後者はダイアログが表示されて水平線のカスタマイズが可能です水平線が挿入されます 23

27 2.8. 箇条書きの入力箇条書きを作成してみましょう新しく文章を入力する感覚でカーソルを進めてください次にメニューバーから挿入リスト番号なしリストをクリックするか画面左部分に表示されているナビメニューリストの挿入ボタンをクリックしてください後者はダイアログが表示されてリストマークのカスタマイズが可能ですリストが入力できます 24

28 2.9. 壁紙の挿入背景に壁紙を設定しますメニューバーから挿入画像ファイル素材集から壁紙としてを選択してください好きなデザインを選択して開くをクリックしましょう背景に壁紙が設定されました 25

29 2.10. ページにタイトルを付けるタイトルとはホームページの名前のことですブックマークをつくったときなどに表示される部分です見出し ( 本文の文頭 ) とは異なります画面上で何も選択されていない状態でメニューバーから編集属性の変更を選択してください右下図属性ダイアログのページ情報タブにあるページタイトルに適当な名前を入力し OK をクリックしてくださいここで入力した文字列が編集中のページのタイトルになりますまたこのダイアログのほかのタブでページの背景色や表示文字色の基本設定を行うことができます 26

html というファイル名について明治大学で運用している Web サーバーはあるクライアント ( ブラウザ ) からページのリクエストを受け取ったときにページの名前が省略されていると index.

30 2.11. ページを保存するメニューバーのファイル名前を付けて保存を選択し local_html フォルダの中へ index.html という名前を半角英数で入力し保存します保存する場所を指定しないとドキュメントにページが保存されてしまうので注意してください補足 index.html というファイル名について明治大学で運用している Web サーバーはあるクライアント ( ブラウザ ) からページのリクエストを受け取ったときにページの名前が省略されていると index.html という名称のファイルを応答し表示します例えばという URL を入力された場合をトップページだと判断して応答し表示します Web サーバーではファイル名が省略された場合にこの index.html という名前のファイルを自動的に応答するという設定がされている場合がほとんどです 27

31 すると壁紙に使用した画像素材をどこに保存するかという確認画面が出てきます今回はそのまま設定し index.html ファイルと同じ場所に保存します注意 : 保存した html ファイルの編集画面を再度開く時はホームページビルダーを開いてから行なってくださいエクスプローラー上でファイルをクリックして開いてもファイルの編集画面を開くことはできません補足ファイル名は必ず半角英数でパソコンではファイルやフォルダの名前にはアルファベットや数字だけでなくひらがなカタカナ漢字など様々な文字を使うことが可能ですしかしファイル名に漢字や記号等を使用すると FTP ソフトや Web サーバーパソコンの種類や言語環境によってはページを公開する際に文字化けするなど正しく表示されないことがありますページや画像写真につける名前は半角英数字のみを使うよう注意してくださいまた大文字小文字の区別にも気を付けましょうスペースの使用もなるべく避けたほうが無難です 28

ファイルから標準モードで新規作成を選択し新しいページを作成してくださいこちらのページは index.

32 2.12. リンクの設定リンク先の用意リンクの設定をします最初にリンク先のページを用意しますリンクとは複数の文書を結び付ける役割を担う参照のことでありジャンプ先を指定し別ページに移動することを指しますメニューバーのファイルから標準モードで新規作成を選択し新しいページを作成してくださいこちらのページは index.html からのリンク先として用意するページです新規画面が開いたら編集領域にリンク先のページと入力してくださいその後 sub.html という名前を付けて保存してください 29

33 保存できたら右端のページ一覧アイコンをクリックしてください現在開いているページの一覧が表示されます編集中のページ欄に index.html と sub.html という 2 つのファイルが表示されています複数のページを開いている場合はこの中から編集したいページを選択できます右端のページ一覧アイコンをクリック青くなっている方が表示中のページ表示に少し時間がかかることがあるここでは index.html をクリックしてください 30

34 リンクの設定 index.html から sub.html へファイル移動するためのリンクを設定しましょう現在開いている index.html の画面上で先ほど記入した文字の後に新しく文章を入力する感覚でカーソルを進めてくださいそこに次のページへと入力してください次のページへの部分をドラッグしますこの次のページへの文字をクリックした時別のページへ移動する機能をリンクと言います次にメニューバーから挿入リンクを選択するか画面左部分に表示されているナビメニューリンクの挿入ボタンをクリックしてください後者はウィザードが表示されてリンクのカスタマイズが可能ですどちらの場合も参照ボタンファイルから... を選択します ( 次のページを参照 ) 31

35 メニューバーから操作する方法参考 : 属性ダイアログのファイルへタブはファイルにリンクする時に URL へタブは他のホームページへリンクする時に使用しますナビメニューから操作する方法 32

36 開くダイアログボックスが表示されますリンクしたいページを指定しますここでは sub.html を選択します 33

37 先ほど選択した次のページへの文字が青くなり下線が引かれますこれでリンクの設定ができました正しく設定できたか確認するためにはプレビュータブをクリックしてくださいするとページ編集画面と同様の画面が開きますこの画面上で次のページへをクリックし先ほど作った sub.html ファイルの画面が表示されれば OK です注意 : ページ編集を続けるにはページ編集タブをクリックして編集画面に戻ってくださいプレビュー画面では編集はできません 34

38 外部ページへのリンク明治大学トップページへのリンクを作成してみましょう先ほどの要領で明治大学へという文字列を入力し選択しますメニューバーから挿入リンクを選択してください 35

39 下図の属性ダイアログボックスが開くので URL へタブを開きます URL の欄に明治大学トップページのリンクを記述しましょう明治大学のホームページをブラウザで開きアドレスバーからコピー & 貼り付けしても構いません入力できたら OK ボタンをクリックします 36

40 プレビュー機能でリンクが機能しているか確認してみましょうプレビューが完了したらページ編集タブに戻しておきましょう 37

41 2.13. 画像の挿入画像を挿入します新しく文章を入力する感覚でカーソルを進めてください次にメニューバーの挿入画像ファイル素材集からをクリックするか ( 左図 ) 画面左部分に表示されているナビメニュー写真や画像の挿入から素材集からボタンをクリックしてください( 右図 ) 今回はホームページビルダーに添付されている素材集の画像を使用しますどちらの操作でも素材集から開くダイアログが開きます好きな画像を選択してみましょう選択したら開くをクリックします 38

42 選択した画像が配置されます画像の大きさを変えたい時は画像を選択し画像の周囲に表示されるハンドルという四角い点をマウスで操作しながら調節してください 39

43 参考 : ホームページビルダー 21 で使用できる画像ファイルは下記のとおりです GIF ( 拡張子.gif) : ジフ容量が軽いが色数が 256 色までしか使用できない動画を扱うことができる JPEG ( 拡張子.jpg) : ジェイペグサイズ画質のバランスがよく扱いやすい PNG ( 拡張子.png) : ピング容量が軽く画質も JPEG よりよい背景を透過できる BMP ( 拡張子.bmp) : ビットマップビーエムピーサイズがとても大きいホームページには基本的に使用しない画像フォーマットそれぞれに特徴があります必要に応じて使い分けましょうホームページに画像を掲載する際の注意ホームページ作成時には使用する画像データの著作権に十分気を付けましょうまた自分で撮影した写真でも個人を特定できる第三者が写っている場合は肖像権に触れる事があります友達や知り合いの写真を掲載する場合は必ず本人に確認を取りましょうまたネット上の画像検索された画像それぞれにも著作権は存在します著作権フリーとなっているもの以外をホームページに使用することがないよう気を付けてください Twitter や Youtube などに投稿された画像や動画なども保存して自らアップロードすると違法になりますどうしても紹介したい場合はリンクで参照しましょう 40

2.14. ページの保存 ( 画像ファイルも合わせて保存する ) ホームページ全体をまとめて保存しましょうメニューバーのファイルすべて保存を選択します先ほど挿入した画像をどこに保存するかと尋ねてきますページと画像は必ず全て local_html フォルダの中に保存します保存場所に (HTML ファイルと同じフォルダ ) が指定されている場合画像は local_html

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

ページのアップロード FFFTP を起動してくださいスタートボタンから F の項目にスクロールし FFFTP フォルダ FFFTP をクリックすると起動できます

45 3. Web サーバーへのアップロード作成したホームページを公開しますホームページは Web サーバーへ転送してはじめて公開されます FFFTP というファイル転送ソフトを使って samba00 というサーバーに転送することでホームページとして公開されます 3.1. ページのアップロード FFFTP を起動してくださいスタートボタンから F の項目にスクロールし FFFTP フォルダ FFFTP をクリックすると起動できますホスト一覧の画面が開くのでここで転送先のサーバー (samba00) を指定したら接続を選択してください Samba ( サンバ ) はマイクロソフトの Windows ネットワークを実装したフリーソフトウェアです 42

アノニマス ) とは匿名のことで名前を名のることなく FTP サーバーに接続することですユーザー名は通常の学部生であれば

46 参考 : 接続先のことをホストと呼びますここではホストは Web サーバーのことを指しています次に自分のユーザー ID パスワードと順に入力した後 OK をクリックしますこの時 Anonymous の欄にチェックを入れないでください Anonymous( アノニマス ) とは匿名のことで名前を名のることなく FTP サーバーに接続することですユーザー名は通常の学部生であれば MeijiMail 以前の英数文字列ですパスワードは MeijiMail 共通認証などのパスワードと共通です暗号化状態の保存について聞かれたらはいを選択します 43

47 samba00 に接続すると以下のような画面になります赤く囲んだ画面左側のフォルダが自分のフォルダで X:\ (MyDocs) が初期状態ですこちら側をローカル側のフォルダと呼びます対して緑で囲んだ画面右側のフォルダをホスト側のフォルダと呼びます表示されたローカル側のフォルダ一覧の中から local_html フォルダを選択しアップロードボタンをクリックすることでただちにアップロードが行われます注意 : ミラーリングボタンはローカル側のフォルダに表示されているものを無条件ですべてホスト側のフォルダにコピーするボタンです間違えないように気をつけましょう 44

48 下図のように local_html フォルダがホスト側のフォルダにコピーされていれば転送完了です最後に ( 切断 ) ボタンを押し FFFTP を終了します補足 : ファイル転送ソフトには FFFTP 以外にもいろいろなものがあります WinSCP FileZilla CarotDAV ホームページビルダー搭載のファイル転送機能 etc 自分の使いやすいものを選択して使用してください 45

3.2. ホームページをブラウザ上で見る教室の PC から Web ブラウザ (InternetExplorer か GoogleChrome) を起動してアドレスバーに下記アドレスを入力したのち Enter キーを押してください学校内のみ公開する場合 http://local.kisc.meiji.ac.jp/~ ユーザー ID/ 自分が作ったホームページが表示されましたか?

49 3.2. ホームページをブラウザ上で見る教室の PC から Web ブラウザ (InternetExplorer か GoogleChrome) を起動してアドレスバーに下記アドレスを入力したのち Enter キーを押してください学校内のみ公開する場合ユーザー ID/ 自分が作ったホームページが表示されましたか? 正しく転送されていれば下記のように自分が作ったホームページがブラウザ上に公開されますなおこのページは学内向けとして公開されているため学外から閲覧することはできませんスマートフォンなどでアクセスしてみると遮断されることがわかります学校外へ公開する場合は local_html フォルダを public_html フォルダという名前に変更してアップロードすることで可能となります FFFTP 上からホスト側のフォルダの名前の変更を指定してもかまいませんその際の URL は下記のようになります学校外にも公開する場合ユーザー ID/ スマートフォンなどで確認してみましょうお疲れさまでした 46

50 注意 : 学内学外向けにフォルダを分けるルールは明治大学独自の仕様ですレンタルサーバーなどを用いる場合はルールが業者ごとに異なりますので必ず仕様を確認してくださいまたユーザー ID パスワードもレンタルサーバー業者によって異なるものが発行されます 47

51 4. 付録 A. 表の挿入表を挿入したい場所にカーソルを移動してくださいメニューバーの表表の挿入を選択します画面左部分に表示されているナビメニュー表の挿入ボタンをクリックしても同様です表の挿入ダイアログが表示されますここで行数列数を指定して OK をクリックすると画面上に表が挿入されます表の中には文字のほかに画像も挿入できます表を作ったレイアウトを作成するときはどこでも配置モードの利用が便利です 48

52 B. ロゴの作成ロゴは以下の手順で作成しますロゴを入れたい箇所にカーソルを移動してください画面左部分に表示されているナビメニューロゴ( 飾り文字 ) の挿入からロゴ ( 飾り文字 ) ボタンをクリックするかメニューバーから挿入ロゴをクリックしてくださいロゴの作成画面が表示されるので文字欄に適当な文字を入力し文字の大きさ文字の形状を選択してくださいプレビューで確認し良ければ完了をクリックして完成です 49

53 C. サイト機能サイトとはひとまとまりのウェブページ群のことですホームページビルダーにはサイト機能がありホームページの中で使われるファイル画像などをまとめて管理 ( 保存 ) しサイト単位でファイルの読み込みができる機能ですサイトを作成する場合は新たにホームページビルダー 21 クラシックを立ち上げてくださいサイトの新規作成メニューバーよりサイトサイトの新規作成を選択してくださいサイト名を入力しますサイト名はページタイトルとなります次へをクリックします 50

$html を選択しますトップページの作成先フォルダの指定項目で参照をクリックしますフォルダの選択画面が表示されるのでサイトを作成する場所を指定してください学内の場合 (X:\) ドキュメントの中の$

54 新規にトップページを作成するを選択次へをクリックしますトップページのファイル名項目で index.html を選択しますトップページの作成先フォルダの指定項目で参照をクリックしますフォルダの選択画面が表示されるのでサイトを作成する場所を指定してください学内の場合 (X:\) ドキュメントの中の local_html フォルダを指定したら OK をクリックします local_html を選択 51

55 ページ作成方法の選択という画面が表示されますが今回は白紙ページを選択してください標準モードどこでも配置モードのどちらでも使いやすいほうで構いませんほかにもカスケーディングスタイルシート (CSS) の選択ができますがここでは省略しますもう少しホームページやインターネットの知識が身に付いたら試してみてください自習室の本も参考に勉強をしてみてくださいこれでサイトの作成は完了ですこのサイトに html ファイルを追加していくことでホームページを作成していきます ( 転送設定のメッセージが表示されますがいいえをクリックしてください ) 52

56 サイト単位で読み込むホームページ更新の依頼をされた場合などサイト全体の全貌をつかむことが重要ですホームページビルダーではホームページ単位でリンクをたどりつながりを視覚的に表示することが可能です自習室のパソコンは履歴が残らないため保存したサイトの情報が消えてしまいます今回は index.html をトップページとしたサイトを読み込む機能を説明しますメニューバーよりファイル開くを選択してくださいサイトの確認をしたいフォルダの index.html を選択しますサイトの確認を選択します 53

57 サイトの確認ダイアログボックスが開きます編集中のファイルをトップページにしたサイトを新規に作成するを選択します完了ボタンが次へボタンに変わりますのでクリックします下記画面も次へボタンをクリックしてください 54

58 適当なサイト名を入力しますデフォルトのままでもかまいません成功するとホームページの関連図が作成されます該当ファイルをダブルクリックすることでホームページを編集できます 55

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

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

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

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