<837A815B B83578DEC90AC977697CC2E707562>

Transcription

1 ホームページ 講 座 その2 平 成 17 年 5 月 1 日 ホームページ ビルダーを 使 った ホームページ 作 成 要 領 ( 標 準 モード) 1. 編 集 スタイル 編 集 スタイルの 選 択 環 境 設 定 2.サイト 作 成 新 規 サイト 作 成 Topページ ファイル 名 3. 編 集 作 業 編 集 方 法 編 集 画 面 ナビ メニュー ツール バー 4.ページ 作 成 の 基 本 事 項 HTMLタグ タグの 属 性 ディレクトリー 構 造 カラー コード 単 位 5.テキスト 挿 入 改 行 段 落 フォントの 指 定 修 飾 Fontタグのオプション スペース ブラウザによる 違 い 6. 画 像 挿 入 レイアウト サイズ 画 質 調 整 ファイルの 種 類 7. 表 枠 挿 入 属 性 セル 追 加 削 除 セルの 統 合 解 除 表 枠 を 利 用 したレイアウト 8.その 他 リスト フォーム 入 力 部 品 フレーム スタイル シート 9.ホームページの 公 開 Webサイト 構 築 転 送 設 定 転 送 10.サーチエンジンへの 登 録 11. 質 問 サポート

2 1) 編 集 スタイルに 選 択 HPBを 起 動 すると ホームページ ビルダー8へようこそ 画 面 が 表 示 される 1. 編 集 スタイルの 選 択 かんたん 雛 形 を 使 って 簡 単 に ホームページが 作 れます が 後 のことを 考 えると お 勧 めしません スタンダード これをお 勧 めします 最 初 一 寸 苦 労 されますが 上 達 に 繋 がります エディターズ プロ 向 きですが スタ ンダード で 同 じことが 出 来 ます 左 下 の 次 回 から 起 動 時 にこの ダイアログを 表 示 しない に チェックマーク 必 要 の 時 には ファイル ようこそ 画 面 を 開 く で 開 ける 2. 環 境 設 定 ツール オプショ ン デフォルト で 使 用 して 問 題 ないが 使 い 勝 手 の 良 いように 変 更 でき る 例 えば 一 般 パネル ; 起 動 時 に 前 回 使 用 した サイトを 開 く にチェッ クを 入 れる フォントパネル ; 編 集 画 面 ページで 使 う フォントが 設 定 できる 2

3 2)サイト 新 規 作 成 : 起 動 時 にサイト 作 成 のウィザードが 開 かなかった 場 合 は ツールバーのサイトメニューの サイト 新 規 作 成 を 選 択 1.サイト 作 成 サイト 名 を 入 れる 名 前 は 自 由 ; 半 角 英 数 字 がのぞましい 2.トップページ 作 成 方 法 の 指 定 自 分 のホームページの 新 規 作 成 新 規 を 選 択 3.Topページファイル 名 半 角 英 数 字 ( 必 須 ) ( 通 常 ) index.html (プロバイダーの 指 定 がある 場 合 はそれに 従 う) トップページの 作 成 先 フォル ダーを 指 定 ( 参 照 ボタンで 予 め 準 備 し たフォルダー 選 択 ) 3 3

4 3) 編 集 作 業 ; ツール バーのアイコンを 上 手 に 使 うのがコツ マウスをポイントすると アイコンの 説 明 がポップアップする 1. 編 集 方 法 編 集 作 業 用 に 編 集 画 面 :ページ 作 成 作 業 を 行 う HTMLソース :HTMLソースで 修 正 可 能 ページ/ソース: 編 集 /ソースを 並 べて 表 示 プレビュー :ブラウザに 表 示 して 動 作 表 示 を 確 認 の4っの 画 面 準 備 されいて 切 替 えて 使 う 作 業 支 援 の 為 の ナビメニュー がある 表 示 メニューから 起 動 ( 画 面 左 側 に 表 示 ) サイト/ 素 材 レビュー を 選 択 表 示 しておくと 便 利 2. 編 集 画 面 HTML 言 語 を 意 識 することなく ワープロ 感 覚 で テキストのタイプ 画 像 を 挿 入 表 枠 の 挿 入 リンクの 挿 入 等 が 出 来 る 自 動 的 にHTMLタグの 付 いた HTMLソース のテキストが 生 成 される 作 業 作 業 効 率 向 上 の 為 ツール バーが 準 備 されている 同 じ 作 業 が メニュー バーのメニュー 或 いは 右 クリック メニューからも 出 来 る 困 った 時 は 右 クリック ; 必 要 なメニューが 準 備 されている 3.ナビメニュー サイト/ 素 材 レビュー( 簡 単 ナビもあるが こちらがお 勧 め) 表 示 サイト/ 素 材 レビュー で 画 面 の 左 に サイト/ 素 材 レビュー のフレームが 表 示 される リンク(リンク フォルダ)パネルと 素 材 パネル( 素 材 フォルダ ブックマーク 履 歴 )が 切 替 られる サイト 登 録 済 みページは リンク 表 示 で ページのアイコンを 編 集 画 面 にドラッグ アンド ドロップすれば 表 示 出 来 る 画 像 等 は 素 材 パネルからドラッグ アンド ドロップで 挿 入 できる ( 同 じことが 最 下 部 の 挿 入 アイコンでも 可 能 ) 素 材 には HPBが 準 備 した 各 種 の 素 材 データ(イラスト アイコン 画 像 音 楽 等 ファイルが 格 納 されている 自 分 の 素 材 データを 使 う 場 合 は フォルダ のツリーからフォルダを 選 択 良 く 使 うHP 作 成 用 データ フォルダは ブック マークに 登 録 しておくと 便 利 各 ファイルの 表 示 は 一 覧 表 示 サムネル 表 示 切 替 可 能 (サムネルの 大 きさは 設 定 で 変 更 可 能 ) 音 楽 をここからページに BGM 又 は 音 楽 ファイルとして 挿 入 可 能 音 楽 ファイルは 通 常 MID スタイルのものを 使 う (ファイル 容 量 が 小 ) 4.ツール バー 別 紙 13ページを 参 照 4

5 4)ページ 作 成 の 基 本 事 項 1.HTMLタグ HTML 言 語 規 格 (HTML4)で タグの 名 称 が 決 められている 例 <FONT> </FONT> フォントの 属 性 をつける <A> </A> ハイパーリンク <TABLE> </TABLE> 表 挿 入 <IMAGE> </IMAGE> 画 像 表 示 <P> 改 行 ( 終 結 タグなし) <BR> </BR> 段 落 参 考 図 書 : HTMLタグ リファレンス ナツメ 社 1,800 円 + 税 金 2.タグの 属 性 一 部 のタグ(<P> <BR> 等 )を 除 いて 全 てのタグに 属 性 があり 変 更 可 属 性 には デフォルト 値 があり 指 定 しなければ デフォルト 値 が 有 効 になる 例 ; TABLE の 属 性 は BORDER COLOR WIDTH HIGHT] 等 属 性 を 変 えたい 対 象 を 選 択 し 属 性 変 更 の アイコン 属 性 ダイアログ 3.ディレクトリー 構 造 相 対 パス;ローカルサイト 内 でのパスを 記 述 する ローカルサイト 内 のファ イルへのリンクの 指 定 に 使 われる 絶 対 パス;Web 上 での 住 所 を 記 述 他 のサーバーへのリンクに 使 用 される 4.カラーコード:カラー 見 本 テーブルが 用 意 されている カラーネームによる 指 定 ; 赤 =red, 青 =blue etc BCG 値 による 指 定 ;R=Red G=Green B=Blue 光 3 原 色 (10 進 法 表 示 ) ; 白 = 黒 =0.0.0 (16 進 法 表 示 ) ; 白 =FFFFFF 黒 = ビットカラー :256 色 16ビットカラー :32,000 色 24ビットカラー ;1670 万 色 色 化 け ;MAC(216 色 )とWindows(256 色 )で 表 示 できる 色 が 違 う 色 化 けの 可 能 性 あり 共 通 の216 色 Webカラー と 呼 ぶ 5

6 5)テキスト 挿 入 1. 挿 入 改 行 段 落 ワードとほぼ 同 じ 方 法 自 動 折 返 ; 受 信 側 の 画 面 の 大 きさに 合 わせて 自 動 的 に 折 返 し 表 示 される 強 制 改 行 ; Enter+Shift キー 段 落 変 更 ; Enter キー 環 境 設 定 で 改 行 段 落 のキー 設 定 を 逆 にできる 回 込 み/ 画 像 位 置 の 下 まで 改 行 ; Enter+Ctrl キー ダイアログ 2.フォントの 指 定 指 定 しない 時 :ブラウザの 標 準 フォントで 表 示 される 指 定 したフォントが 無 い 場 合 ; 類 似 にフォントで 表 示 される 複 数 のフォントを 指 定 できる; 例 えば MS 明 朝 ( 日 本 語 ) Arial( 英 語 ) 3. 修 飾 ;3 種 類 のタグがある FONTタグ ;<FONT> </FONT> : 論 理 スタイルタグ: <Hn> </Hn> :Header ( 例 ) 物 理 スタイル ;<B> </B> :Bold ( 例 ) 4.Fontタグのオプション font -size= ; n+1 n-1 12pt font-family= ;MS 明 朝 Arial etc font-weight= ;フォントの 太 さ font-style= ;イタリック text-decoration= ;アンダーライン color = ; 色 5.スペース 半 角 英 数 字 ; 複 数 のスペースを 入 れても ブラウザ 上 では 一 つのスペースのみ 表 示 される 更 にスペースを 入 れる 時 は 空 白 文 字 (&nbsp)が 使 用 さ れる (ソースには 記 述 があるが ブラウザには 非 表 示 ) 日 本 語 ; 複 数 のスペースは 空 白 で 表 示 但 し 日 本 語 に 対 応 し ていないブラウザでは 文 字 化 けが 起 きる 例 ; 編 集 画 面 の 記 述 aaa bbb ccc 佐 藤 佐 藤 ソースの 記 述 <P>aaa bbb ccc</p> <P> 佐 藤 佐 藤 </P> 6.ブラウザによる 違 い ブラウザにより 初 期 設 定 値 が 違 う 例 えば IE :14pt NN:10pt 6

7 6) 画 像 1) 挿 入 ; 左 側 ナビメニューの 画 像 フレーム 又 は 別 の 画 像 ウインドから ドラッグ アンド ドロップで 編 集 画 面 のポインターの 位 置 に 挿 入 できる ページ 保 存 の 時 サイトフォルダーにコピーが 作 成 される 2)レ イアウト; 位 置 決 めは ホームページ 作 成 で 一 番 手 こずるところ 属 性 ダイアログ ; 右 揃 え 左 揃 え 中 央 揃 え の 選 択 画 像 の 周 囲 の 余 白 作 成 表 枠 の 活 用 ; 枠 の 中 に 画 像 を 挿 入 し 表 枠 の 位 置 調 整 表 枠 内 の 画 像 の 位 置 調 整 で 位 置 決 めを 行 う 裏 技 テクニックが 沢 山 あり 腕 の 見 せ 所 レイアウト 枠 により どこにでも 配 置 が 出 来 るが ブラウザにより 表 示 が 崩 れることがある 多 用 は 進 められない 3)サイズ 画 質 調 整 ;HPBの 画 像 属 性 ダイアログ 付 属 の ウエーブ アートデザイナー で 出 来 るが 機 能 が 限 定 され 別 の 画 像 専 門 ソフト PhoptShopEl] 等 を 使 うのがお 勧 め 4)ファイルの 種 類 ;ホームページに 使 用 する 画 像 は ページ 容 量 削 減 の 為 圧 縮 画 像 ファイルが 使 用 される 描 写 方 法 圧 縮 方 法 により 沢 山 の 種 類 があるが Jpg 又 は Gif が 一 般 的 Bamp は 重 くてダメ JPEG; 色 が 連 続 して 変 化 する 写 真 向 き 不 可 逆 性 処 理 による 劣 化 あり 7

8 7) 表 枠 表 枠 は 本 来 Excelの 様 な 表 を 挿 入 する 為 のタグであるが HTMLファ イルの 不 得 意 な レイアウトの 位 置 決 めに 利 用 することが 出 来 るの で 表 とその 中 のセルの 作 成 操 作 をマスターしよう 1. 表 枠 の 挿 入 表 枠 のアイコンをクリックすると ダイアログが 表 示 され 列 数 行 数 を 指 定 すると ポインターの 位 置 に 最 小 の 表 が 挿 入 される 2. 表 枠 の 属 性 属 性 ダイアログで 表 幅 高 さ 表 枠 非 表 示 背 景 色 等 の 指 定 可 編 集 画 面 表 属 性 ダイアログ 3.セル 追 加 削 除 追 加 又 は 削 除 したい 列 行 を 選 択 追 加 削 除 のアイコンをクリック 4.セルの 統 合 解 除 統 合 したいセル 選 択 右 統 合 下 統 合 のアイコンで 統 合 解 除 アイコン 5. 表 枠 を 利 用 してレイアウト 表 枠 自 体 の 左 右 中 央 揃 え セル 内 の 文 字 画 像 の 左 右 中 央 揃 えの 属 性 を 利 用 して 配 置 する 透 明 画 像 空 白 文 字 ( 半 角 英 数 字 でスペース: )を 使 って 微 細 調 整 す る ( 裏 技 ) 8

9 8)その 他 1.リスト リストタグを 使 って 行 頭 記 号 を 付 けたリストを 作 成 出 来 る 例 Disc= circl= sgusre= リスト 作 成 アイコンのメニューで 記 号 を 選 択 2.フォーム FORMタグで ユーザーに 情 報 を 書 き 込 んで 貰 う 為 の 記 入 フォームを 作 成 する 事 が 出 来 る Mailto; 送 信 先 を 指 定 して 送 信 画 面 ( 標 準 で 使 用 している)を 呼 び 出 す 伝 言 板 アンケート 板 等 プロバイダーの 準 備 したものを 使 う 3. 入 力 部 品 リストボックス ラジオボタン プッシュボタン 等 を 挿 入 4.フレーム FRAMESETタグで 画 面 を 分 割 して 複 数 のHTMLを 表 示 できる HTMLファイルは 表 示 するHTMLファイル 数 +1 FAMESET HTMLはフレーム 構 造 の 指 定 のみ 例 サイド ナビバー トップ ナビバーとか 趣 向 を 凝 らした 画 面 作 成 5. 補 足 言 語 (デザインの 補 強 動 的 画 面 作 成 ) 1)スタイル シート HTML 言 語 の 弱 点 のデザイン 面 の 補 強 の 為 の 言 語 規 格 ;CSS2.0 IE4.0 NN4.0 以 降 はサポート 但 し IEとNNでは 対 応 が 違 うので 表 示 が 違 う 場 合 がある( 要 注 意 ) HPBにスタイルシートの 設 定 ダイアログが 準 備 されいて Sマークのアイ コンで 呼 び 出 す スタイル シートには (1) 外 部 のスタイル シートにリンクして スタイルを 付 ける (2)ページ 全 体 にスタイルを 付 ける ヘッダー 部 に 書 き 込 む (3)ライン(テキスト 画 像 )にスタイルを 付 ける の 三 つの 方 法 があるが 3 2 1の 順 序 で 優 先 する 専 門 的 知 識 を 要 するので スタイルシートの 専 門 解 説 書 での 勉 強 が 必 要 (ある 程 度 ホームページが 作 成 できるようになったら デザインが 格 段 に 向 上 するので 是 非 勉 強 されることをお 勧 めします) 2)JavaScript 動 的 なページにする 為 の HTMLに 埋 め 込 み 可 能 な テキストで 書 かれた プログラム 言 語 3)JavaApplet ブラウザ 側 がJava 仮 想 マシンがインストールされていることを 前 提 とした 小 さなJavaプログラム 高 度 な 動 的 機 能 を 持 たせたり 柔 軟 性 のあるユー ザーインターフェイスを 実 現 することができる JavaAppletを 実 行 する 為 の 特 別 な 中 間 ファイル.jar を 作 成 し 画 像 ファイルと 同 様 に 画 面 に 張 り 込 む プログラムファイルの 作 成 は 素 人 には 不 可 能 で HPBに 準 備 されたファ イルを 使 うか 或 いは インターネットから 有 料 無 料 のダウンロードし て 使 う 9

10 9)ホームページの 公 開 1.Webサイトの 構 築 プロバーダー(ISP)へ Webサイト 借 用 申 請 ; 許 可 されれば 通 常 10-50MBサーバースペースを 無 料 で 借 用 できる 筈 サイト 転 送 関 連 情 報 の 取 得 ( 重 要 ); 許 可 が 下 りると 下 記 項 目 のサイト 転 送 関 係 情 報 が 送 られて 来 る URL FTPアカウント ダウンロードサーバー ftp. パスワード 等 2. 転 送 設 定 ; HPB 編 集 画 面 メニュバーサイト 転 送 設 定 転 送 設 定 の 新 規 作 成 転 送 設 定 ダイアログ 1) 転 送 設 定 の 名 前 ( 自 由 プロバイダーの 略 称 でも 入 れておくと 判 り 安 い)を 記 入 2) 転 送 設 定 の 情 報 を 記 入 一 度 設 定 すれば 後 は 転 送 設 定 名 称 を 選 択 すれば 自 動 的 に 転 送 できる リストにプロバイダー 名 があれ ば それを 選 択 無 ければ 自 分 でタイプ 複 数 サイト 転 送 の 登 録 も 可 能 複 数 サイト 転 送 の 登 録 も 可 能 例 えば itscom( 個 人 ホームページ) mmsoho( 湘 南 ) 10

11 3.ファイル 転 送 Webサイトへの 転 送 は 二 つの 方 式 が 準 備 されている 1)サイト 転 送 : 編 集 画 面 のサイト 転 送 アイコンをクリック 転 送 ダイアグラムが 表 示 され サイトのファイル 全 部 が 転 送 される 2 度 目 以 降 は 更 新 分 のみ 転 送 される 通 常 この 方 法 で 転 送 すればよい 2)ファイル 転 送 : ツール ファイル 転 送 ツール を 起 動 下 記 メイン 画 面 エックスプローラツリーを 使 って 個 別 ファイルを 選 択 し 転 送 で きる 個 別 のファイルを 転 送 したい 時 使 う ローカルサイトのファイ ルとWebサイトのファイルに 不 整 合 が 出 来 たり Webサイトの 不 要 ファイル(ごみ)を 削 除 する 時 に 便 利 11

12 10)サーチエンジンへの 登 録 インターネットの 有 力 な 武 器 の 検 索 サイトに 公 開 したページを 登 録 する 方 法 1.サーチ エンジンの 種 類 登 録 型 ;Yahoo 他 サイトで 登 録 申 請 審 査 のうえ 登 録 される ロボット 型 ;Google goo infoseek 他 サーチ エンジンの 検 索 ロボット(コンピュータ)がインター ネット 上 の 全 てのホームページを 定 期 的 に 巡 回 して 自 動 的 に ページの 先 頭 200 文 字 から 概 要 を 読 み 取 りタイトルを 付 けて 登 録 する 検 索 した 場 合 アクセスの 多 い 順 に 一 覧 表 で 表 示 される ホームページは 現 在 全 世 界 で20 億 サイト 以 上 と 言 われ 検 索 ロボットが 訪 れるの は3-6ヶ 月 に1 回 位 か 2.ロボット 型 サーチ エンジンへの 登 録 のテクニック サーチ エンジンサイトに 申 請 ( 検 索 ロボットの 訪 問 の 手 助 け どの 程 度 有 効 か 不 明 ) 検 索 ロボットが ページの 先 頭 200 文 字 を 読 み 取 るのを 利 用 して ページの ヘッダー 情 報 の 中 にある <META>タグの Keyward に サーチ エンジ ンに 読 み 取 って 貰 いたいキーワードを 書 き 込 む (コンマ 区 切 りで 複 数 可 ) HPB 編 集 画 面 の ファイル ページの 属 性 ダイアログ メタ 情 報 パネル で 書 き 込 み 出 来 る 日 本 語 可 11) 質 問 サポート 不 明 の 点 行 き 詰 まった 時 メールでの 質 問 歓 迎 質 問 の 時 は 次 の 事 項 を 含 んだ 出 来 るだけ 詳 しく 書 いてください 1. 現 在 の 状 態 ; 例 えばページ 編 集 中 で 表 枠 作 成 中 2. 行 っている 操 作 及 びその 手 順 3. 出 来 れば その 時 の 画 面 の 画 像 を 添 付 して 貰 えると 状 態 が 把 握 し 易 い 画 像 の 作 り 方 ; アクティブなウインドウの 画 像 をキャプチャーするには 1) Alt キー+ PrtSC キーを 同 時 に 押 す 一 番 前 面 のwindowがクリップボードにコピーされる PrtSc キーのみの 場 合 は 全 画 面 がキャプチャーされる 2) ペイント を 起 動 (スターメニューのアクセサリにある デスク トップにショートカットキーを 作 っておくと 便 利 ) 3) ペイント の 編 集 貼 り 付 けで コピーした 画 面 が 張 り 付 く 4) 保 存 画 像 を 保 存 する ファイル 形 式 はデフォルトでは Bmp になっているが メール 転 送 を 考 えると Jpg 又 は Gif 画 像 が 望 ましい 12