ホームページの 仕 組 み htmlを 要 求 ブラウザ htmlを 送 信 静 的 なホームページ WWWサーバー cgi Common Gateway Interface cgiへデータを 送 信 プログラム を 実 行 結 果 をhtmlで 送 信 ブラウザ 動 的 なホームページ WWWサー

ホームページビルダーを 使 った ホームページ 作 成 講 座 主 催 :つづきパソピア 2014.10.08~29( 全 6 回 ) 場 所 :みずきヶ 丘 集 会 所

ホームページの 仕 組 み htmlを 要 求 ブラウザ htmlを 送 信 静 的 なホームページ WWWサーバー cgi Common Gateway Interface cgiへデータを 送 信 プログラム を 実 行 結 果 をhtmlで 送 信 ブラウザ 動 的 なホームページ WWWサーバー

Webサーバーの 仕 組 み

Webサーバー(apache) 構 造 Http 接 続 はWebブラウザ(IE 等 )で FTP 接 続 はファイル 転 送 ツールで

ホームページの 種 類 静 的 なホームページ html css gif jpg 等 のファイルをサーバーに 置 いたもの 動 的 なホームページ 掲 示 板 スケジュール ブログ SNS CMS 等 サーバーの プログラムを 起 動 するもの 最 近 はこちらが 主 流 になりつつある でもオーソドックスな 静 的 なホームページにもメリットがあります

ファイル 構 成 c: homepage Index.html index01.html indexxx.html image 01.Jpg 0x.jpg 01.gif 0x.gif htmlファイルはhomepageフォルダに gifファイル jpgファイルはimgフォルダに 収 容 する

ホームページの 構 成 01.gif index.html index01.html ホームページの 文 書 はhtmlファイルを 基 本 ファイルとして 画 像 写 真 ロゴなどのファイ ルはタグで 呼 び 出 す 形 式 になっています 01.jpg 03.jpg 02.jpg 次 ページへ つづきパソピア 戻 る Word 文 書 のように1つ のファイルで 構 成 され ているわけではない 同 一 サイト 内 リンク 外 部 URLにリンク http://pasopia.velvet.jp/sub/index.html

はじめに 最 初 にホームページの 構 成 ファイルのフォルダ( 収 容 場 所 )を 作 成 します c: 今 回 はc: の 下 に 作 成 します まずフォルダのみ Htmlファイルは 後 で 作 成 します homepage Index.html index01.html indexxx.html img 01.Jpg 0x.jpg 01.gif 0x.gif 画 像 ファイル(jpg)は 用 意 してください 大 きさについては 縮 小 したもの 大 きくても 幅 320ピクセル 以 下 にしてくださ い 枚 数 は 各 自 判 断 で( 縮 小 革 命 Jtrem 等 で 縮 小 しま しょう)

ファイルとフォルダの 基 礎 知 識 ファイル 名 とフォルダ 名 は 半 角 英 数 字 機 種 依 存 文 字 は 使 わない 半 角 カナ 文 字 は 使 わない HTMLファイルは.html 画 像 ファイルの 場 合 GIF 形 式 は.gif JPEG 形 式 は.jpg PNG 形 式 は.png

( 参 考 )お 奨 めのフリーソフト お 奨 めのフリーソフト http://pasopia.velvet.jp/sub/soft/ TeraPad :フリーのテキストエディター(メモ 帳 ) http://pasopia.velvet.jp/sub/soft/terapad/index.html 縮 小 革 命 :Exifの 削 除 や 透 かし 合 成 などもあわせて 行 える 画 像 一 括 縮 小 ソフト http://pasopia.velvet.jp/sub/soft/syukukakumei/index.html JTrim:デジカメ 画 像 などを 簡 単 な 操 作 で 加 工 修 正 できるレタッチソフト(ペイント) http://pasopia.velvet.jp/sub/soft/jtrim/index.html ViX:エクスプローラ 風 の 画 像 ビューワー http://pasopia.velvet.jp/sub/soft/vix/index.html

HPビルダーの 初 期 設 定 最 低 限 ホームページビルダーの 設 定 を 行 っておきたいこと 作 成 するファイルの 拡 張 子 がhtmlになるようにする ヘッダ 部 分 にGENERATERとしてホームページビルダーが 表 示 されないようにしておく [ツール] メニューの [オプション] をクリックします [ファイルのオプション] グ ループの [HTML ソース に GENERATOR を 組 み 込 む] チェック ボックス を オフにします

HPビルダーの 初 期 設 定 [ファイルのオプション] グループの [HTML ファイルの 拡 張 子 (S)] テキスト ボックス を html ( 書 き 込 む)にします これで 設 定 完 了 です [OK] ボタン をクリックします

これからホームページを 作 成 します [ファイル] メニューの [ 標 準 モード で 新 規 作 成 ] をクリックします [どこでも 配 置 モードで 新 規 作 成 ] は 絶 対 使 ってはいけない イン ターネットエクスプローラ(IE) 以 外 のブラウザで 表 示 が 崩 れる 場 合 が 多 い

文 字 の 入 力 適 当 にページの 中 に 文 字 を 書 いてみましょ う Word 等 と 同 じ 感 覚 ですね 書 いた 文 章 を 選 択 して( 青 く 選 択 される) [ 文 字 サイズ 拡 大 ] ボタン をクリックします すると 文 字 が 大 きくなります 段 階 的 に 拡 大 することができます これで 文 字 の 拡 大 が 出 来 ます

文 字 の 入 力 もう 一 回 [ 文 字 サイズ 拡 大 ] ボ タン をクリックすると 大 きくな りますね

文 字 の 入 力 次 は 文 字 の 縮 小 です 縮 小 したい 文 章 を 選 択 して[ 文 字 サイズ 縮 小 ] ボタン をクリックします すると 文 字 が 縮 小 されます これも 拡 大 と 同 じように 段 階 的 に 縮 小 されます

文 字 の 色 を 変 更 します 次 に 文 字 の 色 を 変 更 します 変 更 したい 文 章 を 選 択 しま す そして[フォントの 変 更 ] チェック ボックス をクリック します フォントを 変 更 するダイアロ グが 表 示 されます

文 字 の 色 を 変 更 します ピンク 色 に 変 更 出 来 ました つけたい 色 を 選 択 し ます[ 例 ピンク 色 ] のボタン をクリックし ます

背 景 色 を 変 更 してみましょう 次 に 全 体 の 背 景 色 を 変 更 して みましょう [ 編 集 ] メニューの [ 背 景 / 文 字 色 の 設 定 ] をクリックします

背 景 色 を 変 更 してみましょう 下 記 のようなダイアログが 現 れますので[ 色 指 定 ] グ ループの [ 背 景 (C)] ボタン をクリックします 背 景 に 色 をつける 色 を 設 定 するパレットが 現 れま すので そのパレットの 色 を 使 う 場 合 はその 色 をクリックする それ 以 外 の 色 の 場 合 は[その 他 ] ボタン をクリックします [ 色 の 設 定 ] ダイアログが 表 示 されます 背 景 色 にしたい 色 を 選 びます OKを 押 します

背 景 色 を 変 更 してみましょう すると 下 記 のダイアログが 現 れ ますのでOK をクリックします これで 背 景 色 が 変 わりました

背 景 を 壁 紙 で 表 す 次 に 背 景 を 壁 紙 で 表 すことにしましょう [ 挿 入 ] メニューの 画 像 ファイル [ 素 材 集 から 壁 紙 として] をクリックします ホームページビルダーに 用 意 している サンプル 壁 紙 が 現 れますので 適 切 な 壁 紙 を 選 択 します [SampleImagePane] をクリックします そして[ 開 く] ボタン をクリックします

背 景 を 壁 紙 で 表 す すると 選 択 した 壁 紙 が 現 れます これで 背 景 を 壁 紙 で 表 したことに なります

ページのタイトルを 入 力 してみよう ページのタイトルを 入 力 し てみよう [ 編 集 ] メニューの [ページ の 属 性 ] をクリックします ページタイトルにタイトルを 挿 入 します 例 ホームペー ジ 作 成 講 座 [OK] ボタン をクリックします これでページタイトルが 挿 入 されました

ページの 保 存 次 にファイルを 保 存 します [ファイル] メニューの [ 名 前 を 付 け て 保 存 ] をクリックします 下 記 のダイアログが 現 れますの で [ 新 しいフォルダの 作 成 ] ボタ ン をクリックします

ページの 保 存 フォルダ 名 を 例 :homepage としましょう homepageフォルダの 中 に 保 存 します ファイル 名 を index.html とします 1つのフォルダの 中 に 必 ずindex.html のファイルを 入 れておきましょう [ 保 存 ] ボタン をクリックします

ページの 保 存 下 記 のようなダイアログが 現 れ ますので 壁 紙 gifをhtmlと 同 じ フォルダに 入 れることにして [ 保 存 ] ボタン をクリックします ( 他 のフォルダに 保 存 するときは 参 照 をクリックして 保 存 すること ができます) これで1ページが 完 了 です

タイトルロゴの 作 り 方 次 にタイトルロゴの 作 り 方 です タイトルロゴとして 表 示 したい 文 字 を 入 れます 例 :タイトルロゴを 作 ろう この 文 字 を 選 択 します 次 に[ 挿 入 ] メニューの [ロゴ] をクリックします

タイトルロゴの 作 り 方 下 記 のようなダイアログが 現 れます のでタイトルロゴにふさわしいサンプ ルロゴタイプを 選 択 します 例 :002 番 文 字 の 大 きさ34にしました 文 字 の 大 きさを 変 えるにはインジケータ をマウスでドラッグしてスライスします [ 完 了 ] ボタン をクリックします

タイトルロゴの 作 り 方 これでタイトルロゴが 出 来 ました

表 を 使 ってみよう ここでは 行 と 列 を 指 定 します 行 数 4と 列 数 2にして [OK] ボ タン をクリックします [ 表 ] メニューの [ 表 の 挿 入 ] をクリックします

表 を 使 ってみよう 4 行 2 列 の 表 が 作 成 出 来 ました [ 表 の 外 枠 ] をクリックします 右 ボタンメニューか ら [コンテキスト] メ ニューの [ 属 性 の 変 更 ] をクリックします

表 を 使 ってみよう [レイアウト] グループ の [ 表 の 幅 (W)] テキ ストボックス をクリッ クします 表 の 幅 を760 ピクセルにし て[OK] ボタン をクリックしま す 幅 760ピクセルの4 行 2 列 の 表 が 出 来 ました

画 像 を 挿 入 してみましょう [ 挿 入 ] メニューの [ 画 像 ファイル] [ファイルから]をクリックします 挿 入 したい 画 像 ファイルを 選 択 します [kongo.jpg] をクリックします 選 択 したら[ 開 く] ボタン をクリックします

画 像 を 挿 入 してみましょう 左 上 の 表 の 中 に 画 像 が 挿 入 されました 同 様 に 次 に2 行 目 2 列 の 場 所 に 画 像 を 挿 入 します 2 行 目 2 列 の 場 所 を 選 択 します

画 像 を 挿 入 してみましょう 2 行 2 列 目 に 画 像 が 挿 入 されました

画 像 に 代 替 えテキストを 入 れます 画 像 に 代 替 えテキストを 入 れます 挿 入 した 画 像 をクリックしてマウスの 右 ボタン をクリックします 右 ボタンメニューから [コンテキスト] メ ニューの [ 属 性 の 変 更 ] をクリックします

画 像 に 代 替 えテキストを 入 れます [ファイル(&F) :] グループの [ 代 替 テキスト (A)] テキストボックス をクリックします 代 替 えテキストに 例 : 御 室 お 秋 の 写 真 を 書 き 込 みます [OK] ボタン をクリックします

表 に 行 を 追 加 します 表 を 一 行 上 に 作 ってタイトルをいれる 事 にしましょう 表 の 一 番 外 枠 をクリックします [ 表 ] メニューの [ 行 の 追 加 ][ 上 へ1 行 追 加 をクリックします

表 の 結 合 をします 一 行 追 加 出 来 ました 右 の 表 をクリックします ここでは 表 の 結 合 をします [ 表 ] メニューの [セルを 横 に 結 合 ] [ 左 のセルと 結 合 ]をクリック します

タイトル 文 字 を 入 れましょう 一 番 上 の 表 は1 行 になりました 次 にタイトル 文 字 を 入 れましょう タイトルとして 例 : 奈 良 の 紅 葉 と してみました 文 字 を 選 択 して 文 字 の 大 きさを 変 えます 標 準 の となりのタブをクリックしましょう

文 字 の 大 きさを 変 える リストの [ 見 出 し 1] をクリックします これで 文 字 が 大 きくなりました 見 出 し1はホーム ページ 作 成 基 準 で1 番 大 きな 文 字 になります 通 常 はタイトルに 使 います

文 字 を 中 央 揃 えにします タイトル 文 字 を 中 央 揃 えにしま しょう [ 奈 良 の 紅 葉 ] をマウスで ドラッグします [ 中 央 揃 え] チェック ボッ クス をONにします

表 に 色 を 付 けてみましょう 画 像 のとなりの 表 に 色 を 付 けて みましょう 2 行 2 列 の 表 をクリッ クします 右 ボタンメニューから [コンテキ スト] メニューの [ 属 性 の 変 更 ] を クリックします

表 に 色 を 付 けてみましょう [ 背 景 ] グループの [ 色 (C)] ボタン をクリックします [ 色 の 設 定 ] ダ イアログが 表 示 されます [ 色 ] をクリック します [OK] ボタン をクリックしま す [その 他 ] ボタン をク リックします [OK] ボタン をク リックします

表 に 色 を 付 けてみましょう 表 に 色 を 付 けるこ とが 出 来 ました

リンクを 貼 ってみよう( 同 一 サイト 内 ) 同 一 サイト 内 のリンクを 貼 ってみよう リンクを 貼 りたい 文 字 を 選 択 します [ 挿 入 ] メニューの [リンク] をクリックし ます

リンクを 貼 ってみよう( 同 一 サイト 内 ) タブファイルへを 選 択 する 通 常 デ フォルトで 選 択 されている [ファイル 名 (&N)] グループの [ 参 照 ] ボタン をクリックします リンクを 貼 りたいファイル 名 [index03.html] を クリックします ファイルの 選 択 [OK] ボタン をクリックします [ 開 く] ボタン をクリックします

リンクを 貼 ってみよう( 同 一 サイト 内 ) これで 同 一 サイト 内 のファイル へのリンクは 完 了 です

URLへリンクを 貼 ってみましょう 外 部 URL つづき 交 流 ステーション へリンク を 貼 る 場 合 つづき 交 流 ステーション を 入 力 して 選 択 しておきます 次 にホームページビルダーの[ 最 小 化 ] ボタ ン をクリックします 続 いて [Internet Explorer] を 起 動 します

URLへリンクを 貼 ってみましょう [アドレス] テキストボックス の http://www.city-yokohamatsuzuki.net/ コピーします つづき 交 流 ステーションのホーム ページにアクセスします 右 ボタンメニューから [コンテキスト] メニュー の [コピー] をクリックします

URLへリンクを 貼 ってみましょう 次 にホームページビルダーを 最 大 化 して [ 挿 入 ] メニューの [リンク] をクリックします [URL へ] タブ をクリックします 右 ボタンメニューから [コン テキスト] メニューの [ 貼 り 付 け] をクリックします

URLへリンクを 貼 ってみましょう [ターゲット(&T)] グループの [ターゲッ ト] テキストボックス をクリックします [OK] ボタン をクリックします これで 外 部 URLへのリンクは 完 了 です [ターゲット(&T)] グループの [ターゲット] テキストボックス を _blank にします

画 像 にリンクを 貼 ってみましょう 画 像 にリンクを 貼 ってみましょう 画 像 をクリックします [ 挿 入 ] メニューの [リンク] をクリックします

画 像 にリンクを 貼 ってみましょう [ファイル 名 (&N)] グループ の [ 参 照 ] ボタン をクリック します [OK] ボタン を クリックします リンクを 貼 りたいファイル [index03.html] を 選 択 し ます [ 開 く] ボタン をク リックします これで 画 像 へのリンクは 完 了 です

表 を 使 ってページレイアウト 実 際 のホームページを 作 成 する 場 合 ページのレイアウトを 検 討 する 必 要 が あります 表 を 使 って タイトル 記 事 写 真 ロゴ などの 配 置 を 作 成 していきます 作 成 しながら 表 の 変 更 画 像 の 大 きさ の 変 更 などを 行 います

表 を 使 ってページレイアウト レイアウト 案 ホームページビルダで 作 成

ファイル 転 送 ツールの 設 定

ファイル 転 送 ツールの 設 定 プロバイダーから 送 られてくるサーバー 情 報 アドレスはhttp://tsuzuki.tm.land.toです アカウントID:tsuzuki パスワード :xxxxxxx FTPホストアドレス:tsuzuki.tm.land.to ここは 任 意 の 名 前 を 入 れる ホームページURLです FTPアカウント 名 FTPサーバー 名 FTPパスワード 等 の 言 い 方 は 契 約 したサイトによって 違 う

サーバーにファイルを 転 送 する 接 続 ボタンをクリックして 接 続 する wwwサーバーと 接 続 した 状 態 PC サーバーへ 転 送 アップロード PC 内 サーバー 内 サーバー PCへ 転 送 ダウンロード

ホームページ 作 成 と 著 作 権 HPを 団 体 仲 間 複 数 の 人 々と 関 わりながら 作 成 する 場 合 ホームページ 作 成 者 に 帰 属 する 著 作 権 を, 団 体 名 ( 例 えば XXX 自 治 会 つづきパソピア 等 )に 譲 渡 する ということ 覚 え 書 き ( 契 約 書 )に 明 記 しておくこと それから 覚 え 書 きに, 著 作 物 の 翻 訳 権 翻 案 権 や, 二 次 的 著 作 物 の 利 用 に 関 する 原 著 作 者 の 権 利 を 譲 渡 する,と 明 記 しておく こと また 譲 渡 が 出 来 ない 著 作 人 格 権 については 著 作 者 人 格 権 の 行 使 をしない という 条 項 を 設 けること

著 作 物 とは? 著 作 権 法 によって 保 護 される 対 象 を 著 作 物 という 著 作 物 とは 人 の 思 想 や 感 情 を 創 作 的 に 表 現 したものであって 文 芸 学 術 美 術 音 楽 の 範 囲 に 属 するものをいう (2 条 1 項 1 号 ) また 著 作 物 あるいは 単 なるデータ( 著 作 権 が 発 生 しない 事 実 データ 等 )の 編 集 物 でその 素 材 の 選 択 や 配 列 に 創 作 性 のある ものは 編 集 著 作 物 とされている(12 条 ) 著 作 権 は 著 作 物 の 創 作 と 同 時 に 権 利 が 発 生 し 官 庁 による 事 前 審 査 登 録 というものはない (これはベルヌ 条 約 上 の 義 務 である)

写 真 の 著 作 権 と 肖 像 権 について 写 真 の 著 作 権 は 撮 影 者 にあります ではその 中 に 写 っている 人 ( 被 写 体 )にはどんな 権 利 があるでしょう まず 人 物 の 場 合 その 人 人 たちの 了 解 が 取 れているか?( 一 般 に 肖 像 権 ) 肖 像 権 というのは 当 人 の 承 諾 なしに 容 貌 (ようぼう) 姿 態 (した い)をみだりに 撮 影 されない 権 利 や 当 人 の 承 諾 なしに 顔 写 真 や 肖 像 画 を 公 開 されない 権 利 のことを 言 います 肖 像 権 は 明 文 規 定 がありませんので 憲 法 14 条 の すべて 国 民 は 個 人 として 尊 重 される 自 由 及 び 幸 福 追 求 に 対 する 国 民 の 権 利 については 公 共 の 福 祉 に 反 しない 限 り 立 法 その 他 の 国 政 の 上 で 最 大 の 尊 重 を 必 要 とする から 導 かれると 考 え られています 人 格 的 権 利 となります それらをホームページなどに 掲 載 する 場 合 には 被 写 体 である 本 人 の 許 諾 が 必 要 だと 考 えられます

人 格 的 権 利 侵 害 本 人 の 承 諾 なしで 写 真 を 撮 影 ホームページ 等 に 掲 載 すると 人 格 的 権 利 侵 害 として 親 告 罪 となります 親 告 罪 とは 被 害 を 受 けた 当 人 からの 親 告 ということになります 従 ってそれを 見 付 けた 第 三 者 はあくまで 本 人 に 知 らせてあげ ること 位 しか 出 来 ない それを 受 けて 親 告 するのは 本 人 になり ます (また 現 実 的 には 即 親 告 罪 で 訴 えるということではなく まず 掲 載 を 止 めてほしいという 申 し 出 それでも 止 めない 場 合 法 的 処 置 という 流 れですね) 本 人 から 掲 載 をやめて 欲 しい 等 の 申 し 出 があった 場 合 は 速 やかに 対 応 することで 良 いのではないかと 考 えます 本 人 が 親 告 する 場 合 は 名 誉 毀 損 誹 謗 中 傷 侮 蔑 プライバシーの 侵 害 等 の 理 由 での 訴 える ことになります ではどの 程 度 の 写 真 が 人 格 的 権 利 侵 害 になるか? 実 際 は 裁 判 に 問 うことになりますが 本 人 1 人 が 顔 もはっきり 判 る 程 度 に 写 っていて 名 前 住 所 等 が 判 るような 表 記 方 法 で 明 らかに 本 人 と 判 る 表 現 であれば 人 格 的 権 利 侵 害 と 認 定 される と 考 えられます

インターネット 上 に 存 在 する 主 な 著 作 権 著 作 権 の 存 在 するもの 像 権 (タレントや 芸 能 人 の 写 真 やTVのキャプチャ 画 像 ) JASRACが 管 理 している 音 楽 データ ホームページに 掲 載 している 文 章 ( 引 用 を 除 く)など 著 作 権 として 認 められないもの WEBサイト 全 体 のデザイン HTMLソース プログラムのソースコード リンクについて リンクは 自 由 に 貼 っても 良 い 該 当 HPの 管 理 者 に 禁 止 する 権 利 はありません (ただし 事 前 事 後 連 絡 を 取 った 方 が 良 い)

Webアクセシビリティの 配 慮 のポイント ページのタイトルは 必 ずつけましょう 画 像 等 には 適 切 な 代 替 テキストをつけましょう サイズの 指 定 には 相 対 的 な 単 位 を 使 用 しましょ う テーブルを 使 用 したレイアウトでは 並 べ 方 に 注 意 しましょう 単 語 の 途 中 にスペースを 入 れないようにしま しょう フレームを 使 用 した 場 合 はフレーム 対 応 出 来 て いないブラウザでも 表 示 出 来 る 配 慮 をしましょう

みんなが 読 めるホームページ 見 え 方 ホームページの 見 え 方 は 使 用 するブラウ ザによって 違 います ブラウザにはInternet Explorer Firfox Safari 等 がありますが テキストブラウザ 音 声 ブラウザもあります またブラウザの バージョン 使 用 しているモニターの 解 像 度 によって 見 え 方 が 違 うということを 認 識 し ておきましょう

ユーザビリティとアクセシビリティへの 配 慮 Webユーザビリティ (Usability) Webアクセシビリティ (Accessibility) WebユーザビリティとはWebサイトの 操 作 性 機 能 性 とデザイン( 見 映 え)のバランスを 保 ちつつ 訪 問 者 に 対 する 使 いやすさに 配 慮 することです Webライカビリティ (Likability) WebライカビリティとWebユーザ ビリティのバランスが 重 要 初 心 者 高 齢 者 障 害 者 など 幅 広 い 人 た ちに 等 しく 情 報 を 提 供 できるように 配 慮 す ることです Webサイトを 閲 覧 する 環 境 (ブ ラウザ テキストブラウザ 音 声 ブラウザ 携 帯 電 話 PDA 等 )への 配 慮 も 含 みます WebライカビリティとはWebサイトを 魅 力 的 だと 感 じる 度 合 いのことです Webを 制 作 する 上 で 非 常 に 重 要 な 概 念 です 例 えば 非 常 に 人 気 があり 訪 問 者 も 多 いWebサイトが 必 ずしもユーザビリティ 配 慮 したWebサイト とは 限 らないことです

Webアクセシビリティの 配 慮 のポイント ページのタイトルは 必 ずつけましょう 画 像 等 には 適 切 な 代 替 テキストをつけましょう サイズの 指 定 には 相 対 的 な 単 位 を 使 用 しましょう テーブルを 使 用 したレイアウトでは 並 べ 方 に 注 意 し ましょう 単 語 の 途 中 にスペースを 入 れないようにしましょう フレームを 使 用 した 場 合 はフレーム 対 応 出 来 ていな いブラウザでも 表 示 出 来 る 配 慮 をしましょう