情報演習A

  • 1枚だけのページ作成の場合　-　alphaEdit
  • 複数のページ作成の場合 – kompozer
  • スタイルシート（CSS）の読み込みと作成
  • Javascript
  • イメージマップ
    1. 課題　、　データ　、　kompozer-0.8b3.ja.win32.zip
  1. HP作成の基礎知識
    1. HTMLタグでよく使うもの
    2. タグの書式
    3. リンク-HTMLタグ　参照　：　リンクを装飾する－みんなのタグ辞書
    4. alphaEDITの初期設定
    5. HP作成練習（4級）、データ、完成図、ソース
    6. ソースの確認
      画像へのリンクを確認　<img src=
      ファイルへのリンクを確認　 <a href=
    7. 保存
    8. 背景画像とマージンの関係：HTMLタグ、背景画像

  2. alphaEDITでは、直接HTMLで入力します　－　style.cssの読み込み

  3. blueGriffonでは、メニューから読み込みます。　-　style.cssの読み込み
    注）style.cssを読む文があっていても、正しく表示されない時があります。
    保存して、閉じて、もう1度、起動してから開くとうまくいく時があります。

  4. KompoZerを用いた作成手順
  5. alphaEDITではCSSを直接外部ファイルにすることができないのに対し、
    KompoZerやBlue Griffonでは、それが可能です。
    ここでは、CSS（スタイルシート）の設定（作成）方法を学びます。

    1. KompoZerでCSSを作成
      HP作成（２級）の手順-KompoZer
    2. 参考　：　Blue GriffonでCSSを作成
      HP作成（２級）の手順 – BlueGriffon -　問題とデータ2級(1)
  6. 画像挿入まで
    1. 文字入力、水平線、メールリンク
    2. 検定試験問題（2級） 　-　データ2級、css
    3. 演習問題２　-　CSSの作成例
    4. 検定試験問題（2級） 　、データ2級　、　css
  8. 画像の編集とスタイルシート（CSS）の作成
    1. ソースの修正　　削除するところ　、　削除後
      テーブルタグ‐みんなのタグ辞書
    2. 画像の種類
      「画像ファイル形式の種類を理解しよう」　ちょっとまめ知- 121ware.com
    3. sizeの変更とペイントによる編集
    4. Jtrimで画像の編集　、　サンプル画像
      参考：Jtrimのインストール
  9. 画像の編集とスタイルシート（CSS）の作成
    1. 問題とデータ2級(2)
      css項目、css文
    2. 番号なしリストの設定
      リストの作成、　テキストの設定、　listの設定
  10. JavaScriptとイメージマップ
    1. 文字のスクロール　-　（JavaScriptを用いた場合）
      JavaScript1　の前半を</head>の上の行に、後半を<body>と</body>の中に貼り付けます。
      ・文字の抜出し（切り出し）-substring-Javascript
      ・setTimeout(関数名,時間) – 設定した時間（単位はミリ秒）が経過すると、関数を呼び出す。
      ・clearTimeout(ID名) – 一定時間後に処理を開始する「setTimeout」メソッドの処理を停止する
    2. 文字のスクロール　-　（alphaEditのmarqueeを用いた場合）
      a、挿入からマーキーをクリックします。
      b、スクロールしたい文字列を入力して、OKをクリックします。
    3. 時間の表示（計算）　：　JavaScriptを使ったHP作成
      Javascript2　の前半を</head>の上の行に、後半を<body>と</body>の中に貼り付けます。
    4. イメージマップ
      手順の3ページ以降を参考に、usemapの使い方を学びます。
      参考 – イメージマップ-HTMLタグ
      データファイル、問題、topページ作成手順
  11. HP作成の応用と演習
    1. フロート ２段組 , ３段組
      参考：
      2段組：基礎編1 フロートを使ってみる
      3段組：3カラム（3段組）レイアウト
    2. 問題演習

— 参考サイト —

alphaEDITでの操作

  1. メモ帳でCSSを作成
    スタイルシートのファイルを別のファイルに作成する場合
    CSSの作成（メモ帳）
  2. alphaEdit を用いて、CSSを読み込む場合
    1. style.cssの読み込み（alphaEdit）
    2. コンテンツ（メニュー）の作成‐HP検定3級
    3. 本文の作成‐HP検定3級
  3. alpha EDITで直接、htmlファイルの中にスタイルを設定する場合1
    alphaEDITのメニューからCSSを作る１、　2　、　データ2級
    外部ファイルに変更する場合　3
  4. alpha EDITで直接、htmlファイルの中にスタイルを設定する場合2
    資料(1-1)文字サイズほか、資料(1-2)リンクと外部スタイルシート
  5. 資料(2)マーキーとスクロールバー
    参考：ホームページの作り方 教えます。、CSSの基本

Blue Griffonでの操作
CSSを読み込む場合

  1. 問題（3級） 　-　データ3級
  2. HP作成（読み込み）手順
    参考：style.cssの読み込み（blueGriffon）
  3. HP作成（２級）の手順　-　問題とデータ2級(1)
  4. HP（２級）作成時の注意

HTML関連

  1. みんなのタグ辞書 シンプルで軽いHTMLタグ辞書サイト。
  2. 同じページ内にリンクする– ホームページ制作・運用を支援する タグインデックス Webサイト
  3. 同じページ内にリンクする（旧方式）– ホームページ制作・運用を支援する タグインデックス Webサイト
  4. ＜ＰＲＥ＞･････ソースを整形済みテキストとして表示する-HTMLクイックリファレンス
  5. ヘミングのホームページ講座
  6. 誰もが通る道…WEB初心者が犯しやすいHTML&CSSのミスと間違い

スタイルシート関連

  1. ホームページの作り方 教えます。
  2. CSSの基本
  3. CSS 3分コーディング
  4. ホームページの作り方　CSSを使ったスタイリッシュなページ作り(HTML/CSS入門)
  5. 16. WWWと情報発信
  6. Likno Web/HTML Tabs Builder 2.1.224
  7. EnjoyCSS http://enjoycss.com/
  8. SelfCSS http://selfcss.org/
  9. wysiwyg css editor
    http://en.softonic.com/s/wysiwyg-css-editor
  10. CSS　背景　-　ホームページ作成講座HAC Design
  11. スタイルシート　(CSS) の説明
  12. htmlの中にスタイルシートを作成する場合
    背景の連続を止める-CSS　-背景画像　、様々な画像を使って実験してみましょう。

問題

  1. 完成イメージ、データファイル、 問題
    menu側　： <a href=”top.html#t1″ target=”_blank”＞蒸気機関車</a>
    top側　： <a name=”t1″>蒸気機関車</a>
    nameは古いブラウザに対応するため使われますが、最近では、代わりにidを使い始めています。
  2. フォルダ（ディレクトリ）の説明
  3. 問題と解答、file(4)、手順、完成図
  4. ファイル(7)，資料(7)
  5. 問題(1)，ファイル(1)
  6. topの作成、frameの作成、問題、データ
  7. 参考
  8. 問題 　、データ
  9. 演習Aの注意事項
  10. データファイル、 問題、手順
    手順の3ページ、項目16番から23番を参考に、文字のスクロールとJavaScriptの使い方を学びます。
  11. 手順の4ページ、フォームページ(survey.htm)の作成を参考に、フォームの作成を学びます。
    データファイル、 問題、手順
  12. データファイル、問題、topページ作成手順
    ア．手順の項目4番から12番までを参考に、時間を表示します。
    イ．手順の3ページ以降を参考に、usemapの使い方を学びます。
    参考 – イメージマップ-HTMLタグ

その他

  1. ホームページ作成検定｜日本情報処理検定協会
  2. フリーソフトでホームページを作ろう！
    alphaEDITを使って作成からアップロードまでの工程を解説
  3. Expression Web 4 sp2
    無料版のダウンロードをクリック。
  4. Expression Web 4　-　ワニchanのうぇぶわーるど
  5. Lhaplus – Vector
  6. editor エディタ
    CSS作成
    １：　ページプロパティ作成エディタ　-　Web上で選択・作成し、コピーを○○.css に貼り付ける。
    ２：　AlphaEdit　-　ページ単体で作成していくのは簡単。
    しかし、CSSの作成は、まずHTML内部に作成してから、切り取って、○○.css に貼り付ける。
    ３：　CSSが扱える３つの作成ソフト
    Nvu から Kompozer（kompozer-portable）　と Blue Griffon　が開発された。
    ・kompozer は、表作成が簡単、外部CSSの作成にくせがある。
    ・Blue Griffon は、表作成にバグ、外部CSSの作成がわかりやすい。
  7. BlueGriffon ダウンロードページ
  8. KompoZer　http://kompozer.net/index.php
    KompoZerの日本語化　http://kompozer.sourceforge.net/l10n/langpacks/kompozer-0.8b3/
  9. 無料で作る簡単なホームページ
    alphaEDIT等のフリーソフトを使って簡単なホームページを作成する方法を紹介。
  10. 使って楽しいalphaEDITのすすめ
    SyunさんによるalphaEDITオンラインマニュアルページ。（alphaEDIT 旧バージョン向け解説）
  11. HTMLクイックリファレンスHTML言語でわからない言葉は、ここでチェック
  12. HYPERWORKBOOK
  13. エンジニアのためのWebデザイン教室
  14. 壁紙工房フリー素材集　Giggurat　Giggurat
  15. 簡単な表の作成
  16. <th>タグ、<td>タグにrowspan属性を記述すると、セルを縦方向に連結することができます。
    rowspan属性の値には、「つなげるセルの数」を数字で指定します。
    セルを横方向につなげる
    セルを縦方向につなげる　-　HTMLタグ辞典
    複雑な表（テーブル）の作り方　‐　MB-SUPPORT
  17. 演習（表の作成）、ソース
    ・bluegriffonで表を作成する場合、表の中に表を作れないときがあります。
    その場合は、表の外に1つ作成したのち、中に移動（切り取り、貼り付け）します。