3.ウェブサイトをつくる

ez-HTMLを使ってウェブページをつくる

  1. 新しいサイトをつくる
  2. ファイル→新規作成

    ページの新規作成

  3. ページにタイトルをつける
  4. タイトルは曖昧にならないようにわかりやすいものにすると良い。

    タイトル表示例

    タスクバー中のページタイトル

    タブ中のページタイトル

    <title>と</title>の間にタイトルを入れる。

    タイトル入力

    ここで一度保存。さきほど新規作成したフォルダ2006kouzaの中を保存場所にする。ファイル名をここではindex.htmlとする。

    ページ保存

    <body>と</body>の間にページの題名(ページタイトルと違っても良い)を入力

    プレビューし確認後,html編集に戻る

  5. 見出しをつける
  6. 見出し

    「見出し」指定するとこうなる。

  7. 見やすい文章にするための工夫
  8. 文章部分を入力する。1段落部分と2段落部分を1行開けて入力。

    プレビューし確認後,html編集に戻る

    1. 段落にする
    2. 段落

      文章が長くて読みにくいページ例(画像,だらだら長い文章例)

    3. リストをつくる
    4. リスト

      liの入力

      (例)

      ラーメン

      ギョーザ

      チャーハン

      1. ラーメン
      2. ギョーザ
      3. チャーハン

    5. 文字を強調する
    6. 文字の強調

      文字を強調させることで,文中から際立たせることができる。

    7. 文字に色をつける
    8. 文字に色をつける

      文字色を変更することで,強調や分類を示すことができる。

    9. 改行する
    10. 文の途中で折り返すには<br>(改行)を用いる。

      文の途中で折り返す
      には<br>(改行)を用いる。

  9. 画像を貼り付ける
  10. 画像の貼り付け

    (参考)著作権フリー写真

  11. 表をつくる
  12. 様々な項目を表にすることによって,わかりやすさを高めることができる。

    表の作成

    佐藤 鈴木 山田
    A組 B組 A組
  13. リンクを貼り付ける
  14. リンクの貼り付け

  15. サイトを公開し閲覧する
  16. ffftpを使って,サーバへコピーする。

    1. インストール
    2. 以下からダウンロードする。

      ffftp.zipのダウンロード

      デスクトップ上にあるffftp.zipをダブルクリックする。

      ffftpフォルダの中身

      (参考)ffftp作者のページ

      ffftp作者のページ

    3. 設定
    4. ショートカットからffftpを起動する。

      「新規ホスト」を選び,IDとパスワード,ローカルの初期フォルダ(自分のページを保管しているフォルダを選ぶ)を入力する。

      新規ホストボタン

      ffftp設定画面

    5. ファイルをコピー
    6. 左側に自分のつくったファイル,接続すると右側にサーバの中身が表示される。サーバ側はpublic_htmlを開いておく(public_htmlは講習時のみ)。

      フォルダ変更および接続後

      ファイルを全て選択し,サーバ側へドラッグするとコピーが完了する。

    公開講座でつくったページをブラウザで閲覧する際,URLはhttp://192.244.254.100/~配布されたログイン名/

  17. スタイルシートによるデザイン変更
  18. 最近はコンテンツとデザインの分離を行うため,スタイルシートが使われる傾向。

    デザイン変更の際,デザインを設定したスタイルシートを書き直すだけで済む。

    </title>の後に1行開け,標準→スタイルシート→埋め込みスタイルシートと選ぶ。

    埋め込みスタイルシート選択

    埋め込み後のソース

    h1と入力しその後にカーソルを置いておき,標準→スタイルシート→スタイルシートの編集と選ぶ。

    スタイルシート編集

    開いたウィンドウで出力フォーマットを7に変更,フォントの体裁を変えて,セッティングを押す。

    セッティング後

    デザインがまとめて変更された。

    デザイン変更前

    デザイン変更後


back home next