CSSの作成 – Kompozer

 css, ensyu-a, lecture, nyumon, PcTips, software, web-tips  CSSの作成 – Kompozer はコメントを受け付けていません。
11月 132015
 

まず、これからHPを作っていくにあたって、画像などのファイルを保存するフォルダを選びます。

  • サイトを編集をクリック。
    03
  • デスクトップに保存し、名前を変更したフォルダを選びます。
    04
    注)2つ目のサイトを作成するときなど、すでに公開サイトに登録されているときは、新規サイトをクリックしてから、フォルダを選択します。
    06b
  • サイト名の欄にわかりやすい名前を入力します。
  • OKをクリック。
    07

ここからスタイルシートの作成と設定に入ります。

  • CSSエディタをクリック。
    08
  • 新しいlink要素をクリック。
    09
  • URLの欄に、これから作るCSSファイルの名前(style.css)を入力。
  • スタイルシートの作成をクリック。
    08
  • style.cssをクリック。
    09
  • 新しい規則をクリック。
    10
  • 指定された種類の~が選択されているのを確認します。
  • 下の空欄の∇をクリック。
  • bodyをクリック。
  • スタイル規則の作成をクリック。
    11
  • bodyをクリック。
    12
  • 背景をクリック。
  • 選択をクリック。
    13
  • back.gifをクリック。
  • 開くをクリック。
  • 14
  • 水平方向に並べるをクリック。
  • Okをクリック。
    15
  • 背景画像の設定が完了。
    16
  • 表の作成-KompoZer に進む。

ファイルの作成-KompoZerの場合

 css, css, ensyu-a, lecture, PcTips, software, web-tips  ファイルの作成-KompoZerの場合 はコメントを受け付けていません。
11月 052015
 

<ファイルの作成>

  1. 問題 ← クリック。
  2. データ2級をデスクトップに保存。
  3. ダブルクリック(右クリック)し、(すべて)展開。
    展開
  4. フォルダの名前を変更します。
    名前
  5. KompoZerを起動。
  6. 「今日の一言」が表示されたら閉じます。
    hint
  7. 保存をクリックします。
    save
  8. タイトルを聞いてくるので、入力します。(ここでは染色工房あかねと入力します)
    title
  9. 次に、保存先を聞いてきます。
  10. デスクトップに展開したフォルダを選びます(開く)。
  11. indexと入力。
    index
  12. 保存をクリック。

つづいて、スタイルシートの作成にすすみます。

参照: CSSの作成-KompoZer

HP作成(2級)の手順-KompoZerの場合

 css, css, ensyu-a, lecture, PcTips, software, web-tips  HP作成(2級)の手順-KompoZerの場合 はコメントを受け付けていません。
11月 052015
 

KompoZerを用いて、HP作成検定試験の2級の問題を解いていく手順です。

まず、 KompoZerのインストール を見て、KompoZerの準備を済ませます。

全部で7stepあります。順番に作成・設定していくとページが完成します。

  1. ファイルの作成
  2. CSSの作成
  3. 背景の設定
  4. 表の作成
  5. 見出し1の設定
  6. 画像の挿入
  7. 見出し2の設定

KompoZerのインストール

 css, css, ensyu-a, lecture, PcTips, software, web-tips  KompoZerのインストール はコメントを受け付けていません。
11月 022015
 
  1. まず、KompoZerをダウンロードしますので、以下のサイトにアクセスします。
    http://kompozer.net/download.php
  2. 下にスクロールし、Japanese 日本語の行を探します。
    01
  3. zip archive の列のdownload をクリックします。
  4. デスクトップに保存します。
    02
  5. 展開します。
    a.Win7の場合、ダブルクリックすると自動的に展開します。
    b.Win8, 10の場合、Zipファイルを右クリックし、すべて展開をクリックします。
    03
  6. 展開先(フォルダ)を聞いてきますので、そのまま展開をクリックします。
    (もし、別のフォルダに展開したければ、参照をクリックし、展開先を指定します。)
    04
  7. 展開作業が進行します。
    05
  8. しばらく待つと、フォルダ(kompozer-0.8b3.ja.win32 )が作成されます。
  9. そのフォルダの中を開き、さらに KompoZer という名前のフォルダを開きます。
  10. kompozer.exe を探し、起動(ダブルクリック)しましょう。
    06
  11. セキュリティの警告が表示されるかもしれませんが、そのまま実行をクリックします。
    07
  12. 今日の一言が表示されたら、閉じるをクリックします。
    08

本文の作成‐3級-KompoZer

 css, css, ensyu-a, lecture, PcTips, software, web-tips  本文の作成‐3級-KompoZer はコメントを受け付けていません。
10月 212015
 

コンテンツ(メニュー)の作成(3級)‐KompoZer につづいて、ここからは本文の作成です。

  1. 1行目をクリックします。
  2. 画像をクリックします。
    画像
  3. ファイルを選択をクリックします。
    pic.jpgを選択
  4. pic.jpg をクリックし、開きます。
    pic.jpgを選択
  5. 代替テキストの欄に、大道芸フェスタの写真 と入力します。
    代替テキストの入力
  6. OKをクリックします。
  7. 写真が表示されます。
  8. 写真の右横をクリック。
    写真の右端をクリック
  9. Enterキーを押すと、そのまま2行目に移ります。
    ENTERを押して、次の行に移る
  10. 次の文章を入力します。
    お知らせ
    けん玉教室参加者募集
    けん玉を知っていますか?けん玉達人が上達のコツを指導!
    動体視力の訓練に効果的というけん玉をみんなで楽しみましょう♪
    開催日時
    テキストの入力
  11. お知らせをドラッグします。
  12. 見出し2に変更します。
    見出し2
  13. 開催日時も上と同様にドラッグし、見出し2に変更します。
    見出し完成
  14. 保存します。
  15. 【つぎに表の中に表を作ります。ただ、表の中に表が作れない場合があります。その際には、表の外に表を作っておいてから、表の中に移動します。】
  16. まず、表の中にそのまま表を作ってみましょう。作れない場合は、以下の図のように表の外をクリックし、外に作成します。
  17. テーブルをクリックします。
    テーブル
  18. 3行2列になるようにドラッグし、クリック(もしくは、OK)します。
    3x2
  19. それぞれのセルの中に次の文章を入力します。
    「開催日」 「11 月 9 日」
    「開催時間」 「午前 10 時から午後 4 時まで」
    「開催場所」 「来夢広場・駅前広場・なるみ小学校」
    テキストの入力
  20. ソースをクリック。
  21. 表の<td の中の styleから始まる文章をドラッグします。
  22. 右クリックコピーをクリック。
    コピー
  23. 編集から検索・置換をクリック。
    置換
  24. 検索文字列に貼り付け。
  25. すべて置換をクリック。
    すべて置換
    下のように、tdのタグがシンプルになります。
    td & table
  26. 前を検索をクリック。
  27. すべて置換をクリック。
    すべて置換(前方)
  28. 1つ目の表のtdもシンプルになります。
  29. <table の中は下図のようにドラッグし、青く選択した個所を削除します。
    表が2つありますが、2つとも削除します。
    td & table2
  30. ここから34までは、表の外に作った場合の手順です。
    2つ目の表をドラッグします。
    copy
  31. 右クリックし、コピーをクリック。
  32. 1つ目の表の<h2>開催日時</h2>の後の行貼り付けます。
    paste
  33. 1つ目の表の中に、2つ目の表が入りました。コピー終了
  34. 貼り付けが終わりましたので、コピー元のほうを削除します。
    削除
  35. 下図は表の中に表が入ったところです。
    表の移動終了
  36. デザインをクリック。
    design
  37. 表の下に1行あけます
  38. 次の文章を入力します。
    すばる市観光協会イベント課
    電話:052-904-3327
    メールでのお問い合わせ
  39. メールでのお問い合わせ をドラッグします。
  40. リンクをクリックします。
    design
  41. リンク対象の空欄にfesta@goukaku.ne.jp と入力します。
    電子メールアドレスとして扱うをクリック。
    プロパティ
  42. OKをクリック。
  43. 完成です。

コンテンツ(メニュー)の作成(3級)‐KompoZer

 css, ensyu-a, lecture, PcTips, software, web-tips  コンテンツ(メニュー)の作成(3級)‐KompoZer はコメントを受け付けていません。
10月 212015
 

CSSをページに反映する-Kompozer に続いて、中身の部分を作成していきます。

  1. テーブルをクリックします。
    01
  2. 2行2列になるようにドラッグし、クリックします。
    01
  3. 1行目の2つのセルをドラッグ(選択)します。
  4. 右クリックします。
  5. 選択されたセルを結合をクリックします。
    セルの結合
  6. 1行目大道芸フェスタと入力します。
  7. 大道芸フェスタを選択(ドラッグ)します。
    見出し1
  8. 見出し1に変更します。
  9. すぐ下の行(2行1列目)に目次を作成します。
    次の3行を入力します。
    日時
    催し物
    のみの市
  10. 入力した3行を選択します。
  11. 順序なしリストの作成 をクリックします。
    順序なしリスト
    参考: list-style-type -HTMLクイックリファレンス
  12. 日時をドラッグ(選択)します。
  13. リンクをクリックします。
    ハイパーリンク
  14. ファイルを選択をクリックします。
    ファイルの選択
  15. デスクトップの自分の名前をつけたフォルダ(例:HP3_14Z000_成徳太郎)から page1.html を開きます。
    page1にリンク
  16. リンク先を をクリックし、新しいウィンドウに開くを選びます。
    new window
  17. 同様にして、催し物を選択し、page2.html を設定します。
    page2にリンク
  18. 最後に、のみの市を選択し、page3.html を設定します。
    page3にリンク
  19. つづいて右側のセル(2行2列目)に移ります。
    この部分は、4級で作成したように画像と表の作成から成り立っています。
    本文の作成 を参考に問題をみながら作成しましょう。

見出し2の設定-KompoZer

 css, css, ensyu-a, lecture, web-tips  見出し2の設定-KompoZer はコメントを受け付けていません。
8月 302015
 

画像の挿入-kompozer が終わったら、つづけて本文を作成していきます。

  1. 「染め物体験」を見出し2に設定していきます。
    inputstr
  2. 染め物体験 を ドラッグ。
  3. 見出し2をクリック。
    h2
  4. css をクリック。
  5. style.css をクリック。
    style.css
  6. 新しい規則をクリック。
    new rule
  7. h2(見出し2)を選ぶ。
    h2
  8. スタイル規則の作成 をクリック。
    make rule
  9. テキスト をクリック。
  10. フォントサイズの から 0px を選ぶ。
    0px
  11. 36pxに設定。
  12. フォントスタイルをイタリックに設定。
  13. 前景色の横をクリック。
    italic
  14. Rを153に変更。。
    R=153
  15. 3か所を確認して、OKをクリック。
    ok
  16. メールで予約 をドラッグ(選択)。
  17. リンク をクリック。
    link
  18. リンク対象の空欄に akane@goukaku.ne.jp と入力。
  19. 電子メールアドレスとして扱う をチェック。
    address
  20. OKをクリック。
  21. css をクリック。
    css
  22. style.css をクリック。
    style.css
  23. 新しい規則 をクリック。
    new rule
  24. 空欄に a と入力。
  25. スタイル規則の作成をクリック。
    make rule of a
  26. テキストをクリック。
  27. 0pxを選ぶ。
    0px
  28. 24pxに設定。
    24px
  29. Kompozerサイトマネージャの2-1-染色工房の左横をクリック。
  30. style.css をダブルクリック。
    double click
  31. 以下のスタイルシートとあっているか確認します。
    check css
  32. 最後にソースをクリックして、余計な設定がされていないか確認します。
    chk source
  33. 下記の赤線で示した箇所のように余計な設定項目が記述されていた場合、削除します。delete

HP作成(2級)の手順-KompoZer : Menuへ

8月 302015
 

表の作成が済んだら、見出し1を設定していきます。

  1. 表の1行目に、染色工房あかねと入力。
    h1
  2. 見出し1をクリック。
  3. CSSをクリック。
    CSS editor
  4. style.css をクリック。
    style.css
  5. 新しい規則をクリック。
    new rule
  6. h1(見出し1)をクリック。
    h1
  7. スタイル規則の作成をクリック。
    make
  8. テキストをクリック。
  9. フォントサイズの▼をクリック。
  10. 1px をクリック。
  11. 72px に設定します。
    pixel
  12. 行揃えの▼をクリック。
  13. 中央をクリック。
    center
  14. 前景色の横 をクリック。
  15. Rの欄に問題にあるように153と入力。
    Red 153
  16. OKをクリック。
  17. 3か所の設定を確認します。
    center
  18. OKをクリックします。

画像の挿入-KompoZer に移ります。

11月 202013
 

スタイルシートで背景画像を表示します。

4行目の<titleの行の下に、以下 の 3行を追加 します。

<style type="text/css"><!--
body { background:#EEFFFF url(1.png) repeat-y }
--></style>

repeat-yと入力することにより、格子が縦に連続して表示されます。
右側 は、background で指定 した色(#EEFFFF) になります。

縦に連続して表示

ソース

repeat-xに変えると、格子が横に連続して表示されます。
横に連続して表示

repeat-xの後に、スペースで区切って、bottomを入力すると、
背景画像が上ではなく、下に並びます。

style.cssの読み込み(alphaEdit)

 css, ensyu-a, lecture, PcTips, software, web-tips  style.cssの読み込み(alphaEdit) はコメントを受け付けていません。
10月 242013
 
  • 3級以上の試験問題では、スタイルシートを読み込む課題が課されます。
  • alphaEDITでは、直接HTMLで入力します
  • 注1)style.cssを読む文があっていても、正しく表示されない時があります。
    保存して、alphaEditを閉じて、alphaEditを起動してから、もう1度開くとうまくいく時があります。
    それでも表示されない時は、次に進みましょう。
  • 注2)検定試験の模範解答では、次のことを前提としています。
    これに合わせるには、alphaEDITの初期設定 のように設定します。

    • Enterキーを押した時、<P>が挿入されること
    • 要素名を大文字で表示すること
  • また、表を作成した時、表の中に空白が入る設定になっていますが、解除したい場合も上のリンクを参照してください。

  1. データ(style.css等のファイル)をデスクトップに保存します。
    データ
  2. 展開します。
  3. alphaEDITを起動します。
  4. 展開したフォルダの中に、index.htmlという名前で保存します。
  5. titleとスタイルシートの設定をします。
    1.タイトル(ここでは、大道芸フェスタトップ)を<TITLE>と</TITLE>の間に入力します。
    2.<LINK から始まる行をその下に入力します。
    この1行は決まった文章として、覚えてしまいましょう。
    これだけで、style.cssに書かれた設定を反映させることができます。タイトルとCSSの設定

参考 : ソース  スタイルシートリファレンス(目的別) HTMLクイックリファレンス