PC研修会14＆15 HTMLを記述 作成 更新１ 更新２ ホームページ 基本設計 便利な使い方 匠ボタン 使い方 練習問題 フラッシュメーカー3 練習問題 練習問題 スケジュール スケジュール Web道場 �V

練習問題の模範解答 （匠ボタンバージョン）を作成。 練習問題 「ちょいと ジャム勝 に行ってきました」 の、模範解答です。 今回は「かんたんページ作成」で模範解答を作成してみた ホームページビルダーを立ち上げて、ファイル⇒かんたんページ作成を選ぶ ・ ページの種類 - ＰＣページ ・ カテゴリー - サークル ・ ページ構成 - 文章型トップページ ・ ページのデザインで ロゴ文字 - 「ジャム勝に行ってきました」 ・ ページのデザインで リンクメニュー - 左メニュー ・ ページのデザインで イメージ - エレガント ・ 保存場所は今回の作品用に作成したフォルダ mes の中の フォルダ ＰＣ15 を指定 ・ 「新しいサイトを作る」は作らないので、チェックを外した 出来上がったページを 「名前をつけて保存」で 模範解答Ｖｅｒ.1 が、作成された ◆ かんたんページ作成が、簡単でないことを始めて知った。 これから、設計図（イメージ）どおりに仕上げる作業に入る ・ 最初に中央部の「商店会バスツアー」の文字列と鉛筆の写真のバランスが気に入らない ・ 削除する表の上で 右クリック して、表の削除（注1）を決行した。 ・ ここに写真を挿入 左袖の富士山マーク（注2）で、写真の挿入を選ぶ ・ ファイルから で、挿入する写真を選択して 次へ 、大きさを幅600 縦横比を保持する 写真の不要部分を削除するために、写真上で 右クリックし → 画像の編集 → 画像の編集 ・ 「切抜き」を選択して、必要部分に四角枠を合わせて 再度「切抜き」をクリック ・ 表示サイズで画像を保存にチェックを入れて、ＯＫです （ 気に入らない時は、写真をクリックして 直接 四角枠を 大小してください ） ・最下部の表の写真に、エンゼルマークを入れて 商店会名を記述した ★ 最上部の花の写真と 左メニューが気になるが、この２つのパーツは統一デザインなので 最終に上書きして完了とするので後回し、今の所は放置を選択した ファイル名 index なので、上書き保存。 模範解答Ｖｅｒ.2 に、更新された サブページの作成に取りかかります 行程表 ・ 配布物 ・ ゲレンデ状況 ・ バス中の状況 ・ 感想 をサブページに織り込む sub1 sub2 sub3 と ３種のサブページが自動作成されている。 左側のメニュー �@ギャラリー �AＷｅｂマガジン �B記事解説 がる それぞれを 右クリック→リンク先ページを開くで 開きデザインを確認 この３種をテンプレートのように利用することにした ３つのゲレンデ、バラエティーサイト・ファンタジーサイト・イリュージョンサイト、 ゲレンデ状況の紹介ページを、ギャラー（sub1）ページのデザインから作成する sub1ページを開きましょう。 最初に 「写真」の解像度をみます。「写真」の上で右クリックし、属性をクリック。 ファイル名 - hpb_i_dp02.gif 幅 - 285 高さ - 214 （注3） これ以下のサイズに写真を編集して、挿入することにした コース名を記入して写真を挿入し、説明文を書き加えた ４コースを紹介するので、表を２個から４個に増やした（注4） ファイル名 sub1 なので 名前をつけて保存 、ファイル名を course にした index を開き、リンクメニューのギャラリーを コース紹介に変更した（注5） 模範解答Ver.3 に更新された 4の作業を繰り返し、以下の内容をサブページに作成した ・ 2006年1月22日 定員40名 参加費3000円（交通費・保険料・お弁当・飲み物等含む） ・ 朝５時集合出発、８時半にジャム勝に到着 ・ 配布物として、お菓子・缶ビール・缶コーヒー と、たこむす + 柿の葉寿司 ・ アクアプラザで入浴して、帰路につく。 ・ バス中はいつも「釣りバカ」 ・ 21時半に市役所前で解散となる カチカチしているうちに、下記の８個のページが出来ました。 ファイル名 見出し名 course.html 滑走コース diary.html こんな１日 flash.html Flashだと index.html トップ kakinoha.html お弁当 1 sasayuri.html ご入浴 staff.html スタッフ紹介 takomusu.html お弁当 2 左側の共通デザイン、リンクメニューの整理です。数と並び方リンク先を変更します。 上の表の見出し名が見出しで、ファイル名がリンク先です。 indexを開いて、リンクメニューの上で右クリックし「リンクメニューの編集」を選びます。 項目の追加・編集で見出し名とリンク先を設定して、削除・上へ・下へでレイアウトを整えます。 完成したリンクメニューに、追加項目削除項目がないか再度確認しましょう。（注6） 完成したリンクメニューをコピーして、残り７個のサブページに貼り付けていきます。 １個をきっちりと仕上げて、コピー＆貼り付け作戦です。（注7） ヘッダー部の花の写真を、雰囲気の合う写真と置き換えましょう。（注8） 最後に、キーワードとディスクリプションを記述して各ページのタイトルを確認して完成（注9） 模範解答Ver.4 が、完成品となった。 編集タブより、「スタイリッシュエフェクトの設定」を選びテンプレートを変えてみましょう。 また｛スタイリッシュエフェクトの調整」から文字等のデザインを変えてみましょう。 お疲れ様でした。＠自称師範代 2006年６月10日記述 最後にスタイルシートを書き換えた。（注10） （注1） 解説 表を削除します。表の上で右クリックして、表の削除をクリックします。 『右クリックを制する者は、ウインドウズを制する』 です。 （注2） 解説 左側に表示される「かんたんナビ」 メニューバーの表示から、表示と非表示を選らびます。 使いこなせば便利でしょう （注3） 解説 画像・写真の上で右クリック ⇒ 属性の変更を選ぶと↓画面が表示します。 選択した画像の内容が表示され、その他の設定もここで可能です。 （注4） 解説 表を２個から４個に増やします 下図のように、改行マークから改行マークを選択し、コピーして貼り付けてみましょう マウスで選択しにくい時は、始点をクリックした後、shiftキー を押しながら ↑↓キーで選択可です （注5） 解説 ◆ リンクメニュー書き換えでの注意点 ◆ リンクメニューの文字を選択すると、枠が付きます。 この金色四角枠に、リンク、スタイル、文字色等が設定されています。 この枠中で文字を書き換えると、同じ書式で書き換えられます。 1、ギ ャ の間に カーソルをあてます。 2、変更後の文字「コース紹介」を 先に入力します。 3、不要文字「ギャラリー」を 後から消去します。 すると、きれいに書式をひらってくれます。 4、リンク先を変更する時は、最初に リンクの解除 の習慣をつけてください。 「コース紹介」の上で右クリックし「リンクの解除」を行います。 5、解除するとリンク文字の書式が解除されました 6、続いて 新しいリンク先を設定すると、書式が復活します 7、プレビューで確認します スタイルが解除されいます。 8、正しいスタイル「Webマガジン」の上で右クリックして、スタイルの設定をクリック。 設定されているスタイルの番号を確認します。 9、タグ A に大して、hpb-vmenu1-link1 のクラスが設定されています 10、コース紹介 を右クリックして同じスタイルを設定します 下のように、白文字の同じスタイルに設定されました。 （注6） 解説 リンクメニューの編集画面で、リンクメニューの設定をします。 Webマガジンを選択して「項目の編集ボタン」を押すと下の画面が開きます。 文字列に見出し名に入力、リンク先を参照で選び、ターゲットと階層とハイライトを決めます 不要な見出しや、空の見出しは、項目の削除ボタンで 整理します。 ↓が完成図です。 （注7） 解説 ソース画面でリンクメニューをコピーして、残り７個のページに貼り付けてみましょう。 indexを開きます。トップの文字をクリックしてから、HTMLソースをクリックします。 すると、HTMLソース画面でも同じトップの文字の上にカーソルがあります。 リンクメニューは表なので、<TABLE>で始まり</TABLE>で終わります。 トップの行から ↑矢印キーを 6回ほどおします。 表の始まりタグ <TABLE> が見えてきます。ここが始点です。 同じく、Flashだとの↓６行ほどに </TABLE>があります。ここが終点です。 始点から、終点までを選択して、コピーしてください。（下図左側） courseを開いて同様に選択して ここで貼り付けを押すと、選択部分が入れ替わります。 ページ編集とプレビューやIEで、仕上がりを確認して上書き保存をします。 ⇒ ⇒ （注8） 解説 保存先のフォルダを開き、メニューバーの 表示 ⇒ 縮小版 にします。 ファイル名；logo.jpg サイズ；760×136 を発見しました。 同じサイズの背景画像を用意します。 ヘッダー部の花の写真の上で右クリック ⇒ ロゴの編集を選びます。 右下部の背景の設定で、、760×136の用意した写真をしていします。 （注9） 解説 META情報やMETAタグ、と呼びます。検索サイトが表示する時に、使ったりします。 上の行がキーワード、下の行が検索後表示される言葉です。 <META name="Keywords" content="松原駅前商店会青年部,スキージャム勝山"> <META name="Description" content="商店会青年部でスキージャム勝山に行ってきました"> 上の２行を、ソース画面上部のMETA情報の中に貼り付けてください。 ページタイトルがすぐ下にあります、正しく入っているか 同時に確認してください。 タイトルの例 <TITLE>松原駅前商店会 青年部 スキースノボツアー</TITLE> （注10） 解説 文字サイズ・文字色・背景色・余白 等、お気に召さない場合は、 右クリック ⇒ スタイルの設定 ⇒ スタイルの編集より 思い切って編集してみましょう。 ↓のスタイルは、フォントが サイズが80％に設定されている事を示しています。