 TOPページの作成・・・テンプレートから「index.html」をここでは、RiverTop さんが子供たちに簡単なマジックを教える「マジックの世界」を作っています。 TOPページのファイル名を「index.html」とし、文字通りサイトの索引とします。「default.html」を開いてください。 |
|||||||||||
| [進む↓] | |||||||||||
|
■ ファイルの作成と削除 「default.html」から二つのファイルを作成します。 ダウンロード↑は、右クリック「名前を付けてリンクを保存」 名前を付けて保存 「default.html（マジックの世界）」を「Expression Web 4」で編集しています。 ［ファイル］→［名前を付けて保存］→ここでは「ファイル名 k01.html」で保存  ファイル「k01.html」が作成されました。現在編集中です ［ファイル］→［名前を付けて保存］→「ファイル名 index.html」で保存  ファイル「index.html」が作成されました。現在編集中です。  「フォルダー リスト」からファイルを削除 サイト内に「default.html」と同じ内容の、「index.html」と「k01.html」が作成されました。 「k01.html」を他のページのテンプレートとするので、「default.html」を削除します。 「フォルダー リスト」から「default.html」を右クリック→［削除］→「削除の確認［はい］」  |
|||||||||||
| [戻る↑][進む↓] | |||||||||||
|
■ 他サイトの画像を転載 いわゆる"直リン です(^^;)。Webの有用な機能と考えますが、先方への配慮が必要です。 「FC2ホームページでは、直リンクによる画像の外部呼び出しを制限しています。」 ページの表示に関して | Q&A | FC2ホームページヘルプ 令和3年5月追記(=^x^;=) |
|||||||||||
********** 準備 ********** 下の文字列（元画像のURL）をドラッグ（選択）、右クリック［コピー］ http://kasibuton.web.fc2.com/image/hat.jpg |
|||||||||||
| 「index.html」を編集しています。 「サブタイトル」を「子供たちに教えています」に変更して「改行［Enter］」 画像を表示 図では「ツールボックス」の［イメージ］をダブルクリック メニューからは［挿入］→［HTML］→［画像］  図の位置（行頭：ポインタの矢印が右向きになる）でクリック、記号（非区切りスペース）が選択される→［Delete］  ［img］の上で右クリック→［画像のプロパティ］  「画像のプロパティ［全般］,［外観］」 「画像」に元画像のURLを貼り付け、「サイズ」の［幅］のみを220ピクセルに指定する→［OK］  画像を表示できました。  「サイズ」が「インライン スタイル」として追記されます。 「インライン スタイル［▼］」→［コードに移動］→［img］をクリック→「分割」上部に、コードが表示される 上図（［img］アクティブ）にて、「矢印キー［→］」でカーソルを図形の右に置き「改行［Enter］」 転載であることの明記 |
|||||||||||
| 「シルクハット」のイラストをギャラリー キヨシマよりお借りしています | |||||||||||
| 上の一行をドラッグで選択 コピー［Ctrl］+［C］（ハイパーリンクの設定も合わせてコピーされる）→図の位置で貼り付け［Ctrl］+［V］  ハイパーリンクが設定された文字列が、張り付きます。 |
|||||||||||
| [戻る↑][進む↓] | |||||||||||
| ■ セル内のレイアウト ページは1列,3行の表（三段のセル）でできています。真ん中のセルを区切ってサイトの目次として使いましょう。 水平線で区切る 現在、カーソルは表の一行目（セル）内の末尾にあります。 「ツールボックス」の［水平線］をダブルクリック  「水平線」が挿入されました。「水平線」はその機能上、改行されて表示されます。  次の操作のため、矢印[↓]キーで下の行（セル）に移動 テーブル（行,列,セル）の削除,挿入 ［テーブル］→［削除］→［行の削除（［セルの削除］も同じ）］  行（セル）が削除され、次の行（セル）がアクティブになっています。 ［テーブル］→［挿入］→［上の行］  行が挿入されました。図では矢印[↑]キーで、挿入された行に移動しています。  文字入力後、改行せずに水平線で区切る 図では、「簡単なもの」と入力しています。 入力後、改行せず［水平線］をダブルクリック  「水平線」が挿入されました。改行せず、引き続き文字を入力していきます。  図のように入力しています。  表で区切る 文字列と「水平線」の間に「テーブル」を挿入します。 図のように、文字列の後ろをクリック  図の位置にカーソルが表示される ［テーブル］→［テーブルの挿入］1行,1列,「幅の指定」なし  挿入されたテーブル（セル）内に、ここでは「kantan01」と入力して「改行［Enter］」しています。 引き続き、「テーブル」の挿入と文字入力とを行います。  図のように入力して［保存］  完成見本はコチラ→「index07.html」、ページ「マジックの世界」が新しいタブで開きます。 |
|||||||||||
| [戻る↑] | |||||||||||
|
【 トップへ｜目次へ｜前へ←｜→次へ｜この章の始めへ 】 HaraHara WebSite
Copyrightc 2017 SAKAEPC |
