ホームページ講座 その２ 平成17年5月1日 ホームページ・ビルダーを使った ホームページ作成要領 （標準モード） １．編集スタイル ・編集スタイルの選択 ・環境設定 ２．サイト作成 ・新規サイト作成 ・Topページ ・ファイル名 ３．編集作業 ・編集方法 ・編集画面 ・ナビ・メニュー ・ツール・バー ４．ページ作成の基本事項 ・HTMLタグ ・タグの属性 ・ディレクトリー構造 ・カラー・コード ・単位 ５．テキスト ・挿入・改行・段落 ・フォントの指定 ・修飾 ・Fontタグのオプション ・スペース ・ブラウザによる違い ６．画像 ・挿入 ・レイアウト ・サイズ・画質調整 ・ファイルの種類 ７．表枠 ・挿入 ・属性 ・セル追加・削除 ・セルの統合・解除 ・表枠を利用したレイアウト ８．その他 ・リスト ・フォーム ・入力部品 ・フレーム ・スタイル・シート ９．ホームページの公開 ・Webサイト構築 ・転送設定 ・転送 １０．サーチエンジンへの登録 １１．質問・サポート １）編集スタイルに選択 HPBを起動すると「ホームページ・ビルダー８へようこそ」画面が表示される。 １．編集スタイルの選択 ・「かんたん」 雛形を使って、簡単に ホームページが作れます が、後のことを考えると お勧めしません。 ・「スタンダード」 これをお勧めします。最 初一寸苦労されますが、 上達に繋がります。 ・「エディターズ」 プロ向きですが、「スタ ンダード」で同じことが 出来ます。 左下の「次回から起動時にこの ダイアログを表示しない」に チェックマーク。 必要の時には、 「ファイル」⇒「ようこそ画面 を開く」で開ける。 ２．環境設定 「ツール」⇒「オプショ ン」 「デフォルト」で使用 して問題ないが、使い勝 手の良いように変更でき る。 例えば 「一般パネル」； 「起動時に前回使用した サイトを開く」にチェッ クを入れる。 「フォントパネル」；編 集画面、ページで使う フォントが設定できる。 2 ２）サイト新規作成： 起動時にサイト作成のウィザードが開かなかった場合は、ツールバーのサイトメニューの 「サイト新規作成」を選択 １．サイト作成 サイト名を入れる 名前は自由； 半角英数字がのぞましい ２．トップページ 作成方法の指定 自分のホームページの新規作 成⇒新規を選択 ３．Topページファイル名 半角英数字（必須） （通常）「 index.html 」 （プロバイダーの指定がある 場合はそれに従う） トップページの作成先フォル ダーを指定 （参照ボタンで、予め準備し たフォルダー選択) 3 ３ ３）編集作業； ・ツール・バーのアイコンを上手に使うのがコツ。 マウスをポイントすると、アイコンの説明がポップアップする。 １．編集方法 ・編集作業用に 編集画面 ：ページ作成作業を行う。 HTMLソース ：HTMLソースで修正可能。 ページ／ソース：編集／ソースを並べて表示。 プレビュー ：ブラウザに表示して動作・表示を確認。 の4っの画面準備されいて、切替えて使う。 ・作業支援の為の「ナビメニュー」がある。 「表示」メニューから起動。（画面左側に表示） 「サイト／素材レビュー」を選択・表示しておくと、便利。 ２．編集画面 ・HTML言語を意識することなく、ワープロ感覚で、テキストのタイプ、画像を 挿入、表枠の挿入、リンクの挿入等が出来る。 ・自動的にHTMLタグの付いた「HTMLソース」のテキストが生成される。 ・作業作業効率向上の為、ツール・バーが準備されている。 ・同じ作業が、メニュー・バーのメニュー、或いは右クリック・メニューからも 出来る。 ・困った時は、「右クリック」；必要なメニューが準備されている。 ３．ナビメニュー サイト／素材レビュー（簡単ナビもあるが、こちらがお勧め） ・「表示」⇒「サイト／素材レビュー」で画面の左に「サイト／素材レビュー」 のフレームが表示される。 ・リンク（リンク、フォルダ）パネルと 素材パネル（素材、フォルダ、ブックマーク、履歴）が切替られる。 ・サイト登録済みページは、「リンク」表示で、ページのアイコンを、編集画面 にドラッグ・アンド・ドロップすれば表示出来る。 ・画像等は､素材パネルからドラッグ・アンド・ドロップで挿入できる。 （同じことが最下部の挿入アイコンでも可能） ・「素材」には、HPBが準備した各種の素材データ（イラスト、アイコン､画 像、音楽 等ファイルが格納されている。 ・自分の素材データを使う場合は「フォルダ」のツリーからフォルダを選択。 ・良く使うHP作成用データ・フォルダは、ブック・マークに登録しておくと便 利。 ・各ファイルの表示は、一覧表示、サムネル表示切替可能。 （サムネルの大きさは、「設定」で変更可能） ・音楽をここからページに、BGM、又は音楽ファイルとして挿入可能。 音楽ファイルは、通常「MID」スタイルのものを使う。（ファイル容量が小） ４．ツール・バー ・別紙13ページを参照。 4 ４）ページ作成の基本事項 １．HTMLタグ HTML言語規格（HTML4)で、タグの名称が決められている。 例 ＜FONT＞・・＜／FONT＞ フォントの属性をつける ＜A＞・・＜／A＞ ハイパーリンク ＜TABLE＞・・＜／TABLE＞ 表挿入 ＜IMAGE＞・・＜／IMAGE＞ 画像表示 ＜P＞ 改行（終結タグなし） ＜BR＞・・・・＜／BR＞ 段落 参考図書：「HTMLタグ・リファレンス」ナツメ社1,800円＋税金 ２．タグの属性 一部のタグ（＜P＞、＜BR＞等）を除いて、全てのタグに属性があり、変更可。 属性には、デフォルト値があり指定しなければ、デフォルト値が有効になる。 例； 「TABLE」の属性は 「BORDER 」「COLOR」「 WIDTH」「HIGHT] 等 ⇒属性を変えたい対象を選択し、属性変更の「アイコン」⇒属性ダイアログ ３．ディレクトリー構造 ・相対パス；ローカルサイト内でのパスを記述する。ローカルサイト内のファ イルへのリンクの指定に使われる ・絶対パス；Web上での住所を記述。他のサーバーへのリンクに使用される。 ４．カラーコード：カラー見本テーブルが用意されている。 ・カラーネームによる指定 ；赤＝red, 青＝blue ｅｔｃ ・BCG値による指定 ；R=Red G=Green B=Blue 光3原色 （10進法表示） ；白＝25.256．256 黒＝0．0．0 （16進法表示） ；白＝FFFFFF、黒＝000000 ・8ビットカラー ：256色、 16ビットカラー ：32,000色、 24ビットカラー ；1670万色 ・色化け ；MAC（216色）とWindows（256色）で表示できる色が違う。色 化けの可能性あり。共通の216色「Webカラー」と呼ぶ。 5 ５）テキスト挿入 １．挿入・改行・段落 ・ワードとほぼ同じ方法 ・自動折返；受信側の画面の大きさに合わせて、自動的 に折返し表示される。 ・強制改行；「Enter＋Shift」キー ・段落変更；「Enter」キー 環境設定で改行・段落のキー設定を逆にできる。 ・回込み／画像位置の下まで改行；「Enter+Ctrl」キー⇒ダイアログ ２．フォントの指定 ・指定しない時：ブラウザの標準フォントで表示される。 ・指定したフォントが無い場合；類似にフォントで表示される。 ・複数のフォントを指定できる；例えば、MS明朝(日本語） Arial（英語) ３．修飾；3種類のタグがある。 ・FONTタグ ；<FONT>・・・</FONT> ： ・論理スタイルタグ: <Hn>・・・＜/Hn> ：Header （例） ・物理スタイル ；<B>・・・</B> ：Bold （例） ４．Fontタグのオプション ・font -size= ； n＋１・・ n－１・・、１２ｐｔ・・ ・font-family= ；MS明朝、Arial etc ・font-weight= ；フォントの太さ ・font-style= ；イタリック ・text-decoration= ；アンダーライン ・color = ；色 ５．スペース ・半角英数字；複数のスペースを入れても、ブラウザ上では一 つのスペースのみ表示される。 ・更にスペースを入れる時は、「空白文字」（ ）が使用さ れる。（ソースには記述があるが、ブラウザには非表示） ・日本語；複数のスペースは空白で表示、但し日本語に対応し ていないブラウザでは文字化けが起きる。 ・例； 編集画面の記述 aaa□bbb□□ccc 佐藤□□佐藤 ソースの記述 <P>aaa bbb ccc</P> <P>佐藤 佐藤 </P> ６．ブラウザによる違い ブラウザにより初期設定値が違う。例えば IE ：１４pt NN：１０pt 6 ６）画像 １）挿入；左側ナビメニューの画像フレーム、又は別の画像ウインドから ドラッグ・アンド・ドロップで編集画面のポインターの位置に挿入できる。 ページ保存の時、サイトフォルダーにコピーが作成される。 ２）レ イアウト；位置決めは、ホームページ作成で一番手こずるところ。 ・「属性ダイアログ」；「右揃え」「左揃え」「中央揃え」の選択 画像の周囲の余白作成 ・「表枠」の活用；枠の中に画像を挿入し、表枠の位置調整、表枠内の画像 の位置調整で、位置決めを行う。 ・裏技テクニックが沢山あり､腕の見せ所。 ・「レイアウト枠」により「どこにでも配置」が出来るが、ブラウザにより 表示が崩れることがある。多用は進められない。 ３）サイズ、画質調整；HPBの「画像属性ダイアログ」、付属の「ウエーブ アートデザイナー」で出来るが、機能が限定され、別の画像専門ソフト 「PhoptShopEl]等を使うのがお勧め。 ４）ファイルの種類；ホームページに使用する画像は、ページ容量削減の為、 圧縮画像ファイルが使用される。 描写方法、圧縮方法により沢山の種類があるが、「Jpg」又は「Gif」が一般 的。「Bamp」は重くてダメ。 JPEG；色が連続して変化する写真向き。不可逆性、処理による劣化あり。 7 ７）表枠 表枠は本来Excelの様な表を挿入する為のタグであるが、HTMLファ イルの不得意な、レイアウトの位置決めに利用することが出来るの で、表とその中のセルの作成操作をマスターしよう。 １．表枠の挿入 ・表枠のアイコンをクリックすると、ダイアログが表示され、列数、行数を指 定すると、ポインターの位置に最小の表が挿入される。 ２．表枠の属性 ・属性ダイアログで表幅、高さ、表枠非表示、背景色等の指定可 編集画面 表・属性ダイアログ ３．セル追加・削除 ・追加又は削除したい列・行を選択⇒「追加」「削除」のアイコンをクリック ４．セルの統合・解除 ・統合したいセル選択⇒「右統合」「下統合」のアイコンで統合。 ・解除アイコン ５．表枠を利用してレイアウト ・表枠自体の左・右・中央揃え、セル内の文字・画像の左・右・中央揃えの属 性を利用して配置する。 ・透明画像、空白文字（半角英数字でスペース： ）を使って、微細調整す る。（裏技） 8 ８）その他 １．リスト ・リストタグを使って、行頭記号を付けたリストを作成出来る 例 Disc=● circl=○ sgusre=□ ・リスト作成アイコンのメニューで記号を選択 ２．フォーム ・FORMタグで、ユーザーに情報を書き込んで貰う為の記入フォームを作成 する事が出来る ・Mailto；送信先を指定して送信画面（標準で使用している）を呼び出す。 ・伝言板、アンケート板等、プロバイダーの準備したものを使う。 ３．入力部品 ・リストボックス、ラジオボタン、プッシュボタン等を挿入 ４．フレーム ・FRAMESETタグで、画面を分割して、複数のHTMLを表示できる ・HTMLファイルは､表示するHTMLファイル数＋１ ・FAMESET HTMLはフレーム構造の指定のみ ・例 サイド・ナビバー、トップ・ナビバーとか、趣向を凝らした画面作成 ５．補足言語（デザインの補強、動的画面作成） １)スタイル・シート ・HTML言語の弱点のデザイン面の補強の為の言語。規格；CSS2.0 ・IE4.0 NN4.0以降はサポート ・但し、IEとNNでは対応が違うので、表示が違う場合がある（要注意） ・HPBにスタイルシートの設定ダイアログが準備されいて、Sマークのアイ コンで呼び出す。 ・スタイル・シートには （１）外部のスタイル・シートにリンクして、スタイルを付ける。 （２）ページ全体にスタイルを付ける。ヘッダー部に書き込む。 （３）ライン（テキスト、画像）にスタイルを付ける。 の三つの方法があるが、３、２、１の順序で優先する。 ・専門的知識を要するので、スタイルシートの専門解説書での勉強が必要。 （ある程度ホームページが作成できるようになったら、デザインが 格段に向上するので、是非勉強されることをお勧めします） ２)ＪａｖａＳｃｒｉｐｔ ・動的なページにする為の、HTMLに埋め込み可能な、テキストで書かれた プログラム言語。 ３）ＪａｖａＡｐｐｌｅｔ ・ブラウザ側がJava仮想マシンがインストールされていることを前提とした 小さなJavaプログラム。高度な動的機能を持たせたり、柔軟性のあるユー ザーインターフェイスを実現することができる。 ・ＪａｖａＡｐｐｌｅｔを実行する為の、特別な中間ファイル「.jar」を作成 し、画像ファイルと同様に画面に張り込む。 ・プログラムファイルの作成は、素人には不可能で、HPBに準備されたファ イルを使うか、或いは、インターネットから有料・無料のダウンロードし て使う。 9 ９）ホームページの公開 １．Webサイトの構築 ・プロバーダー（ISP）へ、Webサイト借用申請； 許可されれば、通常10－50MBサーバースペースを無料で借用できる筈。 ・サイト転送関連情報の取得（重要）； 許可が下りると、下記項目のサイト転送関係情報が送られて来る。 URL http://・・・・ FTPアカウント ダウンロードサーバー ftp・・.・・・ パスワード 等 ２．転送設定； HPB編集画面⇒メニュバーサイト⇒転送設定⇒転送設定の新規作成⇒転送設定ダイアログ １）転送設定の名前（自由、プロバイダーの略称でも入れておくと判り安い）を記入 ２）転送設定の情報を記入 一度設定すれば、後は転送設定名称を選択すれば、自動的に転送できる。 リストにプロバイダー名があれ ば、それを選択。無ければ自分 でタイプ 複数サイト転送の登録も可能複数サイト転送の登録も可能 例えば、ｉｔｓｃｏｍ(個人ホームページ）、ｍｍｓｏｈｏ（湘南） 10 ３．ファイル転送 Webサイトへの転送は、二つの方式が準備されている。 １）サイト転送：編集画面のサイト転送アイコンをクリック⇒転送ダイアグラムが 表示され、サイトのファイル全部が転送される。2度目以降は更 新分のみ転送される。 通常この方法で転送すればよい。 ２）ファイル転送：「ツール」⇒「ファイル転送ツール」を起動⇒下記メイン画面 エックスプローラツリーを使って個別ファイルを選択し転送で きる。 個別のファイルを転送したい時使う。ローカルサイトのファイ ルとWebサイトのファイルに不整合が出来たり、Webサイトの 不要ファイル（ごみ）を削除する時に便利。 11 １０）サーチエンジンへの登録 インターネットの有力な武器の検索サイトに、公開したページを登録する方 法。 １．サーチ・エンジンの種類 ・登録型 ；Yahoo他 サイトで登録申請、審査のうえ登録される。 ・ロボット型；Google、goo、infoseek 他 サーチ・エンジンの検索ロボット（コンピュータ）がインター ネット上の全てのホームページを定期的に巡回して、自動的に ページの先頭200文字から、概要を読み取りタイトルを付けて 登録する。 検索した場合、アクセスの多い順に一覧表で表示される。 ホームページは、現在全世界で20億サイト以上と言われ、検索 ロボットが訪れるの は３－６ヶ月に１回位か。 ２．ロボット型サーチ・エンジンへの登録のテクニック ・サーチ・エンジンサイトに申請（検索ロボットの訪問の手助け。どの程度有 効か不明） ・検索ロボットが、ページの先頭200文字を読み取るのを利用して、ページの ヘッダー情報の中にある、<META>タグの“Keyward”に、サーチ・エンジ ンに読み取って貰いたいキーワードを書き込む。（コンマ区切りで複数可） ・HPB編集画面の「ファイル⇒ページの属性⇒ダイアログ⇒メタ情報パネル」 で書き込み出来る。日本語可。 １１）質問・サポート ・不明の点、行き詰まった時、メールでの質問歓迎。 ・質問の時は次の事項を含んだ、出来るだけ詳しく書いてください。 １．現在の状態；例えばページ編集中で、表枠作成中 ２．行っている操作、及びその手順 ３．出来れば、その時の画面の画像を添付して貰えると、状態が把握し易い 画像の作り方； アクティブなウインドウの画像をキャプチャーするには １）「Alt」キー＋「PrtSC」キーを同時に押す 一番前面のwindowがクリップボードにコピーされる。 「PrtSc」キーのみの場合は、全画面がキャプチャーされる。 ２）「ペイント」を起動（スターメニューのアクセサリにある。デスク トップにショートカットキーを作っておくと便利） ３）「ペイント」の「編集」⇒貼り付けで、コピーした画面が張り付く ４）「保 存」画 像 を 保 存 す る。フ ァ イ ル 形 式 は デ フ ォ ル ト で は 「Bmp」になっているが、メール転送を考えると「Jpg」又は 「Gif」画像が望ましい。 12
© Copyright 2024 Paperzz
