 HTMLファイルの編集・・・テンプレートページの作成サイトを形成するそれぞれのページ（HTMLファイル）のデザイン構成を統一するために、テンプレートとなるページを作りましょう。 |
|||||||||||
| [進む↓] | |||||||||||
|
■ テーブル（表）を用いたデザイン構成 ここでは、1列,3行のシンプルなものにしています。 ファイルを開く 「default.html」を編集します。  「フォルダー リスト」もしくは「サイト ビュー」の「default.html」を開く 「編集領域」の表示を[コード]から[デザイン]に切り替える テーブル（表）の挿入 [テーブル]→[テーブルの挿入]  「テーブルの挿入」から「行」を[3]、「列」を[1]、「幅の指定」のチェックを外す テーブル（表）の枠線を表示 編集し易いよう、枠線を表示しておきましょう。 [<table>] ON（表全体が選択される）→ツールバーの「枠線［下向き三角▼]」をクリック→[すべての枠線]をクリック  テキスト（文字）の入力と改行 表の一行目にカーソルを置く（クリック、もしくはキーボードの矢印[↑][↓][←][→]キーでカーソル移動） 「模型ジャーナル」と入力、[Enter]で改行、「サブタイトル」と入力  矢印[↓]キーで表の二行目へ移動 水平線の挿入 [挿入]→[HTML]→[水平線] 図では「ツールボックス」の[水平線]を右クリック→[挿入]  「水平線」が挿入されたら、[Enter]で改行して「工事中」と入力、[Enter]で改行  矢印[↓]キーで表の三行目へ移動 「水平線」を挿入、[Enter]で改行して「HaraHara WebSite」と入力、[Enter]で改行  表の中に表を作る テーブル（表）の中の一つの枠（セル）内に、新たなテーブル（1行,9列）を作ります。 [テーブル]→[テーブルの挿入]  枠線を表示しておきましょう。  |
|||||||||||
| [戻る↑][進む↓] | |||||||||||
|
■ イメージ(画像)の追加 他のWebサイトへリンクするボタン（バナー）を並べた、リンク集を作りましょう。 画像のコピー（「Internet Explorer 2022年6月15日サポート終了」での解説です） 下の画像をコピーして使ってください。ハイパーリンクの設定も合わせてコピーされます。 
  他のブラウザ（Microsoft Edge、Google Chrome）では、ハイパーリンクの設定は別途コピーしましょう。 Microsoft Expression Web 4 での操作は、「画像の挿入」及び「ハイパーリンクの挿入」を参照 画像の貼り付け セル内にカーソルを置く（クリック、もしくはキーボードの矢印[↑][↓][←][→]キーでカーソル移動）  「貼り付け」にはショートカット（[Ctrl]+[V]）を使うと便利です。 ファイルの保存 画像をサイトに保存するために、編集中のファイルを一旦保存しましょう。 [保存]→「埋め込みファイルの保存」  「保存する埋め込みファイル」の「フォルダー」が「image」になっていない場合は[フォルダーの変更] →「フォルダーの変更」から、サイト「模型ジャーナル」の画像用フォルダ「image」を開く ここでは四つ一度に保存していますが、多過ぎるとフリーズしてしまうことがあるようです。残りは一個ずつ保存しました。 ブラウザでプレビュー [Chrome でプレビュー] をクリック  ブラウザが起動します  |
|||||||||||
| [戻る↑][進む↓] | |||||||||||
|
■ スタイルの設定 ページ（HTMLファイル）に記述されたスタイルの削除 「水平線」で区切り、文字と画像が配置され、テーブルの構造が分り易くなりました。枠線の表示を止めましょう。 「スタイルの適用」パネルから、「スタイル」を削除します。  「作業中のページ」の[auto-style1]の上で右クリック→[削除]  「このスタイルを削除してもよろしいですか?」→[はい] 残りも同様に[削除]してください。 ブラウザでプレビュー  スタイルシート（CSSファイル）にスタイルを記述する 次の三つのスタイルを設定します。 (1) ページを画面の中央に表示 (2) 文字をページの中央に表示 (3) 文字の行間を1.5倍にする ［style_1.css］を開く→「スタイルの適用」パネルの［新しいスタイル］をクリック  作成中のサイトのページは、テーブル（表）で構成されています。スタイルは table のみに記述しましょう。 「新しいスタイル」の「セレクター」を［table］にする (1) 「カテゴリ」の［ボックス］を選び、「margin」の「right」と「left」を［auto］にする  (2),(3) 「カテゴリ」の［ブロック］を選び、「text-align」を［center］、「line-height」を［（値）150%］にする  スタイルシート（CSSファイル）を［保存］して［閉じる］  スタイルシート（CSSファイル）の適用 作業中のページ「default.html」に保存したCSSスタイルを適用します。 「スタイルの適用」パネルの［スタイル シートの適用］をクリック→「スタイル シートの適用［参照］」  「スタイル シートの選択」から「style_1.css」を選び［開く］→「スタイル シートの適用［OK］」  ブラウザでプレビュー  |
|||||||||||
| [戻る↑][進む↓] | |||||||||||
|
■ 文字に対する設定 見出し 見出しのレベルによって文字の大きさが違います。 「模型ジャーナル」を［見出し1］にする (1) 図の位置でクリック→1行選択 (2) ツールバーの「スタイル［下向き三角▼]」をクリック (3) ［見出し1］をクリック  同様に「サブタイトル」を「見出し2」にする  ハイパーリンク ここでは、OS:windows 7、ブラウザ:internet explorer 11で解説しています。 |
|||||||||||
| ********** 次の操作のために、下のページを一度開いて（ブラウズして）ください。 ********** ↓ 工事中 文字をクリックすると、ページ「工事中につき関係者以外立入禁止」が新しいタブで開きます。 |
|||||||||||
「工事中」の文字を選択→［挿入］→［ハイパーリンク］→「ハイパーリンクの挿入」 「ファイル、Webページ」の「ブラウズしたページ」から、［工事中につき関係者以外立入禁止］を選択 ［ターゲットフレーム］をクリック→「ターゲットフレーム」の「共通のターゲット」から［新しいウインドウ］を選択→［OK］,［OK］ 当方の環境（Windows 10 Home Ver.21H1）では、「ブラウズしたページ」に閲覧したページのURLが表示されなくなっています。 リンクの確認 ［表示］→［サイト］→[ハイパーリンク]→「ハイパーリンクビュー」  同じく［サイト ビュー］から、［ハイパーリンク］→「ハイパーリンクビュー：ページ間のハイパーリンクを表示します。」  画像（バナー）にもリンクを設定しています。 「特殊文字」の記述 著作権を明記してみましょう。ここでは初めに「Copyright」と入力（記号を記すので必要ではないが）しています。 ［挿入］→［記号］  「記号（Symbol）」から、ボタン（ここでは「著作権記号（Copyright Sign）」）をクリック→［挿入］→［閉じる］  図では新たに「見出し」を設定しています。  |
|||||||||||
| [戻る↑][進む↓] | |||||||||||
|
■ HTMLコードの編集 コードが冗長になってもブラウザでの表示は変わりません。ここではHTMLの理解のためにいじってみましょう。 「編集領域」の表示を［デザイン］から［コード］に切り替える CSSモード 自動作成をOFF（手動）にしておきます。 ステータスバーの「CSS モード［下向き三角▼]」をクリック→［手動］  削除 図では、内容が重複している行を削除しています。 置換 ページに自動で作成されたスタイル（削除済み）の名前が残っています。使わないので削除（"何もない"に置換）しましょう。 図の文字列「 class="auto-style1"」を選択→キーボードから［Ctrl］+［H］ ショートカットを使うことで、環境の違いによる不具合を回避しています。  「検索と置換［置換］」、「検索オプション［作業中のページ］」  「検索する文字列」に選択した文字列が表示されていることを確認、「置換後の文字列」には入力しない→［すべて置換］  結果が表示される→［OK］、「検索と置換」→［閉じる］ 同様に、図の文字列「 class="auto-style2"」をすべて削除（置換） 文字列を選択→キーボードから［Ctrl］+［H］  「検索と置換」→［閉じる］ 検索 図の文字列「 （空白の意）」を選択→キーボードから［Ctrl］+［F］ 「検索と置換［検索］」、「検索する文字列」に選択した文字列が表示されていることを確認→［すべて検索］  「一致したテキスト」「…2件見つかりました。」 1件目は、改行後の空白（空白行が設定されている） 2件目は、以下に続く文字列が途中改行されて表示されることを避ける空白（記号）←不要 2件目のうえでダブルクリック→当該文字列が選択されるので［Delete］キーで削除→［閉じる］  完成見本はコチラ→「default.html」、ページ「（「マジックの世界」改め）模型ジャーナル」が新しいタブで開きます。 |
|||||||||||
| [戻る↑] | |||||||||||
|
【 トップへ｜目次へ｜前へ←｜→次へ｜この章の始めへ 】 HaraHara WebSite
Copyright© 2017 SAKAEPC |
