TOPページの作成・・・テンプレートから「index.html」を TOPページのファイル名を「index.html」とし、文字通りサイトの索引とします。「default.html」を開いてください。 |
||||||||||
[進む↓] | ||||||||||
■ ファイルの作成と削除 「default.html」から二つのファイルを作成します。 名前を付けて保存 [ファイル]→[名前を付けて保存]→ここでは「ファイル名 k01.html」で保存 ファイル「k01.html」が作成されました。現在編集中です [ファイル]→[名前を付けて保存]→「ファイル名 index.html」で保存 ファイル「index.html」が作成されました。現在編集中です。 「フォルダー リスト」からファイルを削除 サイト内に「default.html」と同じ内容の、「index.html」と「k01.html」が作成されました。 「k01.html」を他のページのテンプレートとするので、「default.html」を削除します。 「フォルダー リスト」から「default.html」を右クリック→[削除]→「削除の確認[はい]」 |
||||||||||
[戻る↑][進む↓] | ||||||||||
■ 他サイトの画像を転載 いわゆる"直リン"です(^^;)。Webの有用な機能と考えますが、先方への配慮が必要です。 |
||||||||||
********** 準備 ********** 下の文字列(元画像の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 WebSiteCopyrightc 2017 SAKAEPC |