直線上に配置
メニューを開く

資料小分類

  • トップページ作成
  • はじめに
  • 白紙ページを作成
  • ページタイトル設定
  • 個人名と戻り入力
  • 名前を付けて保存
  • 背景に色を付ける
  • レイアウトコンテナ
  • タイトルロゴ作成
  • 写真の挿入
  • 写真の切り抜き
  • ボタンの作成
  • 画像垂直隙間の調整
  • 文章を入力
  • コピーライト入力
  • 水平線を挿入
  • 文字サイズと色の変更
  • ブラウザーで確認
  • CSSファイル作成
  • フォントの種類設定
  • 全体を中央に配置
  • 背景に画像を設定
  • コンテナに背景色
  • コンテナに余白
  • フッターの中央配置
  • トップリンク設定
  • 勉強会リンク設定
  • 構文エラー対応

資料大分類

  • 資料トップへ戻る
  • 基礎編
  • 白紙からページ作成
  • HPを作成してみる
  • トップページを作成
  • サブページを作成
  • サイト管理
  • HTML/CSSを知る
  • Web ページ
  • HTML 練習
  • CSS 練習
  • レイアウト作成
  • レイアウト編集
  • 最新テクの活用
  • フルCSSテンプ基本
  • フルCSSテンプ応用
  • フォトモーション

リンク

  • サイト内検索
  • 問い合わせ
  • 参加者作品
  • HP勉強会トップ
  • A班ホームページ

トップページ作成 ~ 名前を付けて保存する ~

ページを白紙から作成した時には、ページに仮の名前が付けられています。編集を開始する前にページに適切な名前を付け、保存場所を指定しておくと、あとは時々ページを上書き保存するだけで良いなど、管理しやすくなります。

一方、サイトにはホームページの入り口となるページ、すなわちトップページが必要です。そのページのファイル名はサイトごとに指定されます。トップページ用に作成した白紙ページを、その指定されたファイル名で保存します。

ヒント勉強会での[トップページ]の名前
HP勉強会参加者のページを一覧で紹介するなどの場合は、トップページの名前に個人のイニシャルを付けた名前が使われることがあります。勉強会コーディネータの指示に従ってください。

名前を付けて保存する

➊白紙のページを開いたままにします。

➋メニューバーの[ファイル→名前を付けて保存]を選択します。

  • ▶[名前を付けて保存]ダイアログボックスが表示されます。

ヒント[上書き保存]ボタンでも同様にできます
これまで一度も保存したことのないページであれば、ナビバーの[上書き保存]を押すと[名前を付けて保存]ダイアログボックスが表示されるので、同様に名前を付けて保存できます。

➌保存する場所とファイル名を指定して、[保存]をクリックします。

  • 保存場所はサイトのトップフォルダー、ファイル名は top.html とする
    • 名前を付けて保存ダイアログ
    • ➊ページを開く。
    • ➋メニューバーの[ファイル]から[名前を付けて保存]を選択する。[名前を付けて保存]ダイアログボックス(右図)が表示される。
    • ➌保存する場所とファイル名を指定して、[保存]をクリックする。ここでは、保存するフォルダ―の場所はサイトのトップフォルダ―、ファイル名はtop.htmlとする。
  • ▼新しい名前のファイルtop.htmlが、トップフォルダ―に保存されました。
  • タイトルバー表示
    • タイトルバーに表示されるファイル名
    • タイトルバーも、「newpage1.html」から「top.html」に替わって表示される。

エクスプローラーで、保存したファイルの確認をする

➊エクスプローラを起動し、先に作成したサイト用のフォルダーに該当のファイルが表示されていることを確認します。

  • エクスプローラで[PC ▶ ドキュメント ▶ HPB ▶ 26秋 ▶ 26秋サイト]を表示する
    • 保存したファイルの確認
    • エクスプローラを使って、PC からのフォルダ構造をたどりサイト用に作成したフォルダー(ここでは「26秋サイト」)をクリックしてフォルダー内容を右側ウィンドウに表示する。
    • サイトフォルダー「26秋サイト」にファイル top.html が表示、すなわち保存されていることを確認する。

➋そのファイル top.html をダブルクリックして開きます。

  • ブラウザで白紙が表示され、タブには、入力したページタイトルが表示されるのを確認する。
    • タブにページタイトルが表示される
    • ブラウザで白紙の top.html が表示されるが、その時のタブに、入力したページタイトルが表示されるのを確認する。

➌ブラウザおよびエクスプローラを閉じる。

ここで一旦、サイト管理ーサイトの新規作成 へ飛びます。

サイト管理から戻ったら、レイアウトコンテナに進みます。

直線上に配置

| |