スライド 1

Size: px

Start display at page:

Download "スライド 1"

みそらいしなみ
5 years ago
Views:

1 レイカディア大学同窓会ホームページ講座第 2 章ホームページビルダーの使い方 2018/6/11 29 年度 HP 管理班長教野弘孝教野メール hiro@kyouno.com

2 最初に説明しておく必要があることホームページを作成 / 運営していくツールとし最近全世界的に広まりつつある WordPress がありますソフトは無料初心者でもテンプレートからの作成が簡単サーバー上で直接修正ブログの感覚で作成更新などもちろん短所も多いですがホームページビルダーでも v17 から WordPress に対応するようになりました一から作る場合は WordPress もお勧めです

3 概要専用ソフト ( ホームページビルダー ) での作成 1ホームページビルダーとは 2 文章を入れる文字の色フォント大きさ修飾 3 画像のリサイズファイル名の変換 GIFアニメ透明化 4 画像ロールオーバー効果サウンド動画の挿入表の挿入 5リンクを入れるパスワードつきリンク 6BODYタグ背景フレーム内容が多いですが一応ひととおりの機能が分かるよう説明します重要なところは実習であまり使わない機能はデモで見ていただきます ( 過程は全て資料にありますので後で復習してください )

4 ホームページの構成トップページリンク外部ページページページページリンクリンクページページページ外部ページリンクページページページ

5 ページ遷移図とは地域活動発表会第 10 回地域活動発表会レイ大同窓会トップページ大津支部大津支部会報

6 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML lang="ja"> <HEAD> <meta name="generator" content="justsystems Homepage Builder Version for Windows"> <META name="keywords" content=" 滋賀県レイカディア大学同窓会 "> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta http-equiv="content-style-type" content="text/css"> <TITLE> 滋賀県レイカディア大学同窓会 </TITLE> </HEAD> <BODY text="#000000" link="#000099" alink="#400000" vlink="#004000" background="laca-wall.gif"> <DIV align="center"><font size="5" face="hgp 創英角ホッフ体 "><B> 滋賀県レイカディア大学同窓会 </B></FONT><IMG src="logo.gif" width="81" height="72" border="0" align="middle"><br> <FONT size="5"><b><font color="#ff0000" size="5"> 本部 </FONT></B></FONT><BR> <BR> <TABLE border="0" width="502"> <TBODY> <TR> <TD width="354" align="right"><font size="4"><b> 同窓会会員数 ( 平成 29 年 10 月 )</B></FONT></TD> <TD align="center" width="106"><font size="4"><b>1572 人 </B></FONT></TD> </TR> </TBODY> </TABLE> <BR> HTMLのソース <TABLE border="0" width="335"> <TBODY> <TR> <TD valign="top" align="left" width="404"><b><img src="kaichou.jpg" width="121" height="161" border="0" hspace="8" vspace="1" align="left"></b><font face="ms ゴシック "><B><BR> 同窓会会長 <BR> <BR> 堀江勇夫 </B><BR> </FONT><B><BR> <INPUT type="button" value=" 会長あいさつ " onclick="window.open('laca-dousoukaikaichou-speech.htm', '', 'width=1000,height=800')"><br> <BR> </B></TD> </TR> </TBODY> </TABLE> <BR>

7 エジターによりタグを駆使してホームページを制作するプロがいますが一般的にはホームページの新規作成維持管理には専用のホームページツールソフトを使います専用ソフトを使えば複雑なタグを覚える必要も無くスマートなホームページを制作維持管理できます

8 ホームページ作成ソフト主な市販のウェブサイト作成ソフト 1 万円 ~3 万円ぐらい Dreamweaver ダヴィンチカートホームページ制作王ホームページビルダーホームページ ZERO ID for WebLiFE Adobe IPC JUNGLE ジャストシステムソースネクストデジタルステージ企業プロ向けとしては Dreamweaver 個人初心者向けは圧倒的にホームページビルダーが使われるフリーのホームページ作成ソフトも多くあります

9 ホームページ作成ソフトの最新バージョンホームページビルダー 21 DreamweaverCC

10 表示 > ソースの表示

11 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html lang="ja">  <head> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <meta http-equiv="x-ua-compatible" content="ie=emulateie7"> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="content-script-type" content="text/javascript"> <meta name="generator" content=" ソースネクストホームページ ZERO"> <title> </title> <link rel="stylesheet" href="02_white_a0_0010.css" type="text/css" media="all"> </head> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META name="keywords" content=" レイ大草津レイカディア大学草津校滋賀県レイカディア大学レイ大 "> <META http-equiv="content-type" content="text/html; charset=shift_jis"> <META http-equiv="content-style-type" content="text/css"> <META name="generator" content="justsystems Homepage Builder Version for Windows"> <TITLE> レイカディア大学草津校 </TITLE> </HEAD>

12 ホームページビルダーとは HTML 生成ソフトですから出来上がる物 (HTML) は同じでもバージョンによって使い方が大きく違いますバージョン1~バージョン21( 最新 ) と種類がありますみなさんそれぞれ違うバージョンですと細かい操作の説明は意味がありません各機能のボタンはどこかではなく機能単位に何ができるかの説明をします個別の操作はご自身の持っているソフトのバージョンで自習してください V10 以降はほぼ基本機能はそろっていると言われています

13 ホームページビルダーの最新バージョン V21 動画 ( 約 5 分 )

14 ホームページビルダー最新の V21 と旧バージョンの機能比較

15 ホームページビルダーの使い方を動画で解説している個人のサイト

16 実習それではホームページビルダーを使ってみましょう多くのテクニックや機能がありますが一通りできるようになったあとで個別に自分の感性で手直ししていってください詳しくは自習していただくことにして基本的な機能だけの説明としますホームページビルダーを起動します

17 ホームページビルダー V15 の初期画面実習

18 ツールバーの設定実習

19 ツールバーが設定された画面実習

20 新規作成実習

21 どこでも配置モード標準モードテンプレートを使って作成とありますが標準モードを選択して下さい標準モード普段からこのモードを使うようにしましょうどこでも配置モードスタイルシート文字や画像をポンポン好きな所に配置できたりと自由度が高いですがページが固定されるのでブラウザや設定によってはページがはみ出したり表示されない部分があり困る事が多いのでお薦めできません後で標準モードなどにしたいと思った場合などには新しく作成し直した方が良いくらい苦労します絶対このモードで作らないでくださいテンプレートを使って作成テンプレートというのは雛形とも呼ばれすでに色んな設定や形が出来上がっているものですバージョンによってはフレーム設定ページの作成もあります

22 実習教材の中から test.html をホームページビルダーで開いてください ( ファイル開く test.html)

23 実習

24 実習

25 上バーのページ編集をクリックホームページを作ってみよう! 実習上バーのプレビューをクリックホームページを作ってみよう! 上バーの HTML ソースをクリックホームページを作ってみよう!

26 上バーの HTML ソースをクリック実習 <HTML> <HEAD> <META http-equiv="content-type" content="text/html; charset=shift_jis"> <META http-equiv="content-style-type" content="text/css"> <META name="generator" content="justsystems Homepage Builder Version for Windows"> <TITLE> 例題 </TITLE> </HEAD> <BODY> ホームページを作ってみよう!</BODY> </HTML> 青い部分はホームページビルダーが自動的に生成した部分なので無視してください

27 マウスで選択して太字にする実習

28 上バーの HTML ソースをクリック実習 <HTML> <HEAD> <META http-equiv="content-type" content="text/html; charset=shift_jis"> <META http-equiv="content-style-type" content="text/css"> <META name="generator" content="justsystems Homepage Builder Version for Windows"> <TITLE> 例題 </TITLE> </HEAD> <BODY><B> ホームページを作ってみよう!</B></BODY> </HTML> 青い部分はホームページビルダーが自動的に生成した部分なので無視してください

29 新規に標準モードで作成実習ページ編集で文字を入れてみます XXXXXXXX のページ改行

30 実習

31 HTML ソース実習ページ / ソースプレビューで確認してください文字の装飾文字を大きく色をつける太字にするフォントを変える位置ぞろえなど一部の文字列だけも可能です背景の設定ページタイトルの設定 ( ページの属性 ) HTML ソースで見るとタグが自動的に入っています

32 ホームページに載せる画像について一般に拡張子が jpg gif などを使用します

33 画像のリサイズデジカメで撮影した写真は容量が非常に大きくホームページに入れるとサーバー容量に大きく影響しますまた閲覧する場合も回線速度によってはなかなか表示が終わらないことになります ( 重いサイトという ) そこでホームページに載せる前に写真をリサイズしますリサイズした写真は当然解像度 ( 画質 ) は落ちます

34 リサイズして写真の容量を小さく実習 6000*4000(11MB) 800*600(130KB)

35 フリーソフトのリサイズ超簡単 proはファイル名画像のリサイズなどが可能実習リサイズ実習 > 大井川鐡道.jpg をドロー

36 実習反転してから横サイズに 800 と入力 ( 縦は比率で自動計算 ) [ 変換開始 ] Resize というフォルダーに変換後が入っている

37 ファイル名の一括変換実習ファイル名一括変換実習 > ファィルを全てドロー

38 ファイル名の一括変換実習名前一括変換にプレフィックスつけて [ 変換開始 ] Resize というフォルダーに変換後が入っている

39 GIF アニメデモツール > ウェブアニメーターの起動教材の GIF アニメ実習アニメーションウィザード

40 GIF アニメデモツール > ウェブアニメーターの起動教材の GIF アニメ実習複数の画像ファイルを使用してアニメーションを作成

41 GIF アニメデモツール > ウェブアニメーターの起動教材の GIF アニメ実習画像の追加 GIF アニメ実習の中のファイル全て選択開く次へ

42 GIF アニメデモツール > ウェブアニメーターの起動教材の GIF アニメ実習次へ

43 GIF アニメデモツール > ウェブアニメーターの起動教材の GIF アニメ実習次へ

44 GIF アニメデモツール > ウェブアニメーターの起動教材の GIF アニメ実習無限 1500 次へ

45 GIF アニメデモツール > ウェブアニメーターの起動教材の GIF アニメ実習完了

46 GIF アニメデモ XXXXX.gif で保存

47 画像の透明化 1ホームページビルダーで教材の中のgakusyuu.htmを開く背景模様だけの画面 2 教材の中から画像 laca-kousyou.jpg を取り込む白枠の画像ですこれを白い色を透明化します 3 画像の上で右クリックして画像の編集 4gif 形式で保存をチェック透明化をクリック 5スポイトアイコンを画像の白いところへ持っていきクリック 6OKで透明化が完了 7 保存するときは laca-kousyou.gif として保存されます画像ファイルの形式が jpg から gif になりますデモ

48 画像の透明化デモ

49 画像の透明化デモ

50 画像の透明化デモ同様に教材から engei.jpg でやってみてください

51 画像の挿入実習新規作成挿入したい場所に画像ファイルをドロー画像の四隅で大きくしたり小さくしたりで調整しますバージョンによっては画像の上でサイズを変更したり編集などができます教材の画像挿入実習の中の sl-001.jpg~sl-008.jpg をドロー画像ごとに改行を入れる素材集からいろいろな画像を挿入してみましょうホームページビルダーの素材 >images>photo

52 画像のロールオーバー効果の挿入 -1 画像の上にマウスが乗った時写真が変化します教材のロールオーバー実習 > ロールオーバー 1.jpg をドローします写真の上で右クリックして画像のロールオーバー効果の挿入をクリックしますファイル名を指定するでロールオーバー実習 > ロールオーバー 2.jpg を選ぶ次へ次へ完了実習プレビューで写真の上にマウスを置いてみてください

53 画像のロールオーバー効果の挿入 -2 画像の上にマウスが乗った時写真が大きくなります実習ロールオーバー実習 > ロールオーバー 3.jpg をドローします写真の上で右クリックして画像のロールオーバー効果の挿入をクリックしますファイル名を指定するでロールオーバー実習 > ロールオーバー 2.jpg を選ぶ OK 右クリック属性の変更その他マウスポインタが上にのチェックを外して OK プレビューで写真の上にマウスを置いてみてください

54 ロールオーバー効果の例ここにリンクを指定するとちょうどドアが開いて中を見るという動きになります教材の中の gifanime の中にあります

55 サウンドを入れるレイカディア讃歌 >lacadia-sanka.htm を開く実習 laca-sanka.wav をドローしてくださいプレビューすれば演奏します

56 動画の挿入動画は AVI, Motion JPEG, AVCHD, MPEG, MP4, MOVなどカメラメーカーなどによって方式が違います ( デジカメビデオカメラも同様 ) 動画の編集 ( 一部カット合成など ) はネットで多くのフリーソフトが公開されています

57 動画の挿入 (youtube を利用 ) 動画をホームページに載せる場合 wmv flvなどいろいろの形式がありますが閲覧再生するパソコンによっては特別のソフトをあらかじめインストールしてある必要があるときがありますまた動画ファイルは容量が大きいためサーバーにアップロードするとサーバーのスペースに問題が発生します youtube( 無料 ) であればどんなパソコンでもスマホでも再生が可能ですネット上の動画はほとんどyoutubeですそこで動画はyoutubeでアップすることをお勧めします youtubeでは次の形式ならアップできますこれ以外の場合は変換ソフトにより下記のどれかの形式に変換してください MOV MPEG4 MP4 AVI WMV MPEGPS FLV 3GPP WebM

58 youtube の利用は無料です Gougle でアカウントを作成デモ

59 実際に短い動画を youtube にアップしてみましょう教材の動画の中の SL.mp4 をアップロードしますデモ公開をクリックします右クリックで埋め込みコードをコピー

60 動画の中の youtube-sl.htm を開くデモ <iframe????????????></iframe> の部分に埋め込みコードをペースト

61 教材の動画の中の youtube-sample.htm をダブルクリックしてみてください

62 後処理デモ動画再生のあと別の動画への画面になってしまうこれを防ぐために

動画の挿入 (youtube を利用 ) デモ <iframe width= 854" height= 480" src="https://www.youtube.com/embed/vozrbhxtaj8?

63 動画の挿入 (youtube を利用 ) デモ <iframe width= 854" height= 480" src=" frameborder="0" allowfullscreen></iframe>?rel=0 をうしろに挿入

64 表を入れるデモ表示がはみ出したくない場合のテキスト枠にも使います

65 リンクを設定実習教材のリンク実習 >laca-dousoukai-00-honbu.htmを開く

66 リンクを設定教材のリンク実習 >laca-dousoukai-00-honbu.htm を開く実習 2018/05/16 平成 30 年度定期総会を文字列選択し右クリック > リンクの挿入

67 リンクを設定リンク実習 >laca-dousoukai-00-honbu.htm を開く参照 >dousoukaisoukai-honbu-2018> _laca-dousoukai-honbu-soukai2018.htm ターゲットで同一ウィンドウ OK 実習

68 <table border="0" width="560"> リンクの構造 <TBODY> <TR> <TD width="739" align="left"><b><font color="#000000" size="4"> <a href="dousoukaisoukai-honbu-2018/ _laca-dousoukai-honbusoukai2018.htm" target="_self">2018/05/16 平成 30 年度定期総会 </a><br> <BR> <a href="../laca-dousoukai-kaihou/lacadousoukai-kaihou34/laca-dousoukaikaihou34-pdf.htm" target="_blank">2018/01/01 會報 34 号発行 </a><br> <BR> <a href="dousoukai-presen-2017/ _laca-dousoukai-presen2017.htm" target="_self">2017/07/21 同窓会入会勧誘プレゼン </a><br> <BR> <a href="laca-gakuchou-kondan-2017/ _laca-gakuchou-kondan htm" target="_self">2017/07/11 大学学長との懇談会 </a><br> <BR> <a href="cosmo-clean2017/ _cosmo-clean-2017.htm" target="_blank">2017/06/25 クリーンキャンペーン in 草津 </a><br> <BR> <a href="laca-pr / _laca-pr.htm" target="_blank">2017/06/13 レイカディア大学入学募集展示 </a><br> <BR> 実習

69 パスワードつきリンクリンク学習 >laca-dousoukai-00-honbu.htm を開く

70 パスワード付きリンクの挿入限られた人同士しか見せたくないページ

72 <a href="laca-page-pw-error.htm" target="_self" onclick=";return _HpbPwdWnd(this,'{%)% '+~r!)# '#v > %"s- BEAHMBCGFKALFIp$vvrDy# '+%) '$u 'D )# '#v CGFK? *!BIHG');">2018/05/16 平成 30 年度定期総会 </a><br>

75 BODY タグデモ <HTML> <HEAD> <TITLE> 文書のタイトル </TITLE> </HEAD> <BODY BGCOLOR= #ffffff TEXT= # LINK= #0000ff VLIN K= #ff00ff ALINK= #ff0000 BACKGROUND="laca-wall.gif" > 文書の本体 </BODY> </HTML> TEXT= 色文書中の文字の色を指定する LINK= 色まだ見ていないページへのリンク箇所の色を指定する VLINK= 色すでに見たページへのリンク箇所の色を指定する ALINK= 色リンクをクリックした時のリンク箇所の色を指定する BGCOLOR= 色文書の背景色を指定する BACKGROUND=" 画像 " 文書の壁紙を指定する

76 デモ laca-wall.gif 既読の色未読の色

77 フレーム表示エリアが複数ある構造デモトップ更新履歴メニューステージ

78 フレームデモ <html lang="ja"> <head> <title> レイカディア大学同窓会 </title> </head> <frameset rows="57,*"> <frame name="top" src="lacadia-dousoukai-top.htm" scrolling="no"> <frameset cols="160,760,*"> <frame name="left" src="lacadia-dousoukai-left.htm" scrolling="no"> <frame name="stage" src="lacadia-dousoukai-stage.htm"> <frame name="right" src="lacadia-dousoukai-coment.htm"> <noframes> <body></body> </noframes> </frameset> <noframes><p> このページを表示するにはフレームをサポートしているブラウザーが必要です </p></noframes> </frameset> </html>

79 フレーム表示エリアが複数ある構造デモ

80 フレームの設定メニューバーからフレームを選びます

81 ホームページビルダーの機能でフレームのページは簡単にできますただ最初に一度作ればいいわけですから時間的に実習は省略します一般に公開されているページを取り込んでアレンジするなどしてください

82 ホームページビルダーで標準モードで新規作成実習受講者教材データーから校章 (flag-1.gif) を取り込みます挿入図か別ウィンドウからコピーペースト画像が大きいので角をつまんで適当な大きさに小さくします校章の下にレイカディア大学校章と書いてください ( 文字サイズフォント変更太字色などいろいろ変更してください ) 図も文字もセンタリングしますページ編集モードで中央ぞろえタイトルをレイカディア大学校章のページとします HTML ソースモードで <TITLE></TITLE> に入れるかページ編集モードのページの属性

83 ホームページビルダーで標準モードで新規作成実習背景を入れます挿入 > 背景受講者教材データーから laca-wall.gif を選びます校章画像の右側に鳥の GIF アニメ (isohiyo3.gif) を下に入れます挿入図か別ウィンドウからドラッグ校章画像をマウス ON でセピアにします画像の上で右クリック画像のロールオーバー効果の挿入次へ効果の選択セピア >OK> 次へ > 次へ > 完了プレビューで確認してください

84 実習受講者教材データのホームページビルダーの素材の中にいろいろ見本がありますので自由にお使いください各種背景のデモをします

85 ロゴの作成ボタンの作成

86 特殊フォントがパソコンに入っていない場合は文字は標準 (MS ゴジックなど ) になります <FONT face= HGP 創英角ホッフ体 ><B> 滋賀県レイカディア大学同窓会 </B></FONT>

87 html の検証サービスネットで html を無料でチェック採点してくれます

88 第 2 章終わり第 3 章はサーバー更新ですが 5 月 29 日に説明しました

スライド 1

スライド 1 レイカディア大学同窓会ホームページ講座第 2 章 2015/7/7 広報部 HP 班長教野弘孝 ( 陶芸 32) 教野メール hiro@kyouno.com 授業用ファイルのコピー授業で使用するソフトホームページビルダー (Ver10 以上 ) みなさんのパソコンに教材をコピーしてくださいホームページ講座受講者教材データ USB メモリーでフォルダーごとデスクトップか C ドライブへ次のソフトは教材データに入っています