まずとにかくAを作成する。
A [確認参照] WEB第11回 5/31
B [確認参照] WEB第10回 5/27
メニューBをAに埋め込む方法
idとclassの違い
■[id] =１ページ内で１つのみ
それぞれの要素は1つのidしか持つことが出来ません。個々のページでそのidを使用した要素もまた、たった1つでなければなりません。
もし同じidを2つ以上の要素で使用すると、バリデーションチェックでエラーが出てしまいます。
例：バナー画像は１ページに１つしかないのでidで設定する
■[class]=1ページ内で複数
複数の要素で同じclassを使用することが可能。複数のclassを同じ要素内で使用することも可能。
もしページ上で何度も使用されるスタイル設定ならば、classを使う。
例：ページの中で複数箇所を赤文字表示にしたい場合はclassで設定する。
■要素ってなに？
idやclassに対しブラウザの初期設定はありませんが、要素にはブラウザの初期設定があり、設定の通りに表示されます。
------------[1学期にすでに習得した事になっている内容を復習]--------------------------
・WEBサイトはHTMLタグでできています。
・HTMLタグは開始タグと終了タグでできています。
(※imgなど終了タグがないものも一部あります)
[構造]
| < | a | href="http://www.7key.jp/hp/" | > | ここがハイパーリンク | </ | a | > | |
| １ | ２ | ３ | １ |
開始タグから終了タグまで全てが「要素」です。
・「１」はタグ名と先ほど紹介しましたが、正しくは「要素名」と呼ばれています。どんな意味を付けるのか、ということを決定するためのものです。
・「２」は「属性」と呼ばれる、タグに指定することができる追加情報です。
・「３」は「内容」と呼ばれ、実際に表示される部分になっています。
HTMLの勉強を進めていく上で、「要素」「要素名」「属性」「内容」といった用語は避けて通れないのでしっかりと覚えて下さい。
HTMLの基本構造
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ここにページタイトル</title>
ここにはscriptやmetaタグを入れる。場合によってはcssもココに記述
</head> <body> ここに書いたものしかブラウザに直接表示されません。 </body> </html>
------------------------------------------------------------------------------------------------
実践1 ★ ページにバナー画像を追加し、バナー画像にidを付けましょう。
１. <div class="container">を探し、その下の行に2.<div id="bana">バナーをココに入れる</div>
を追加してみましょう。(※正しい英語表記はbannerです)
※ 画面上のメニューから[挿入]→[レイアウトオブジェクト]→[Div タグ]を選択し、
idをbanaと設定しても同じ結果が得られる。
テンプレートの種類によって、すでにbana画像の記述がある場合はダブるので削除してから入れて下さい。
3.「バナーをココに入れる」の部分に以下の画像をダウンロードして挿入してみましょう。
4.挿入した画像にbanaimgという名前のidを付けましょう。
※プロパティのパネルを使うと簡単に画像にidを付けられます。
paddingとmarginの違い
把握しよう！！paddingとmarginの違い
マージン(margin)をつかったほうが良い場合
borderの外側にスペースが必要な場合。スペースに背景色(画像)を適用したくない場合。
上下に隣接したボックスにスペースを設ける場合、
マージンの相殺を期待して、大きいサイズを有効にしたい場合。
例：15px + 20px の場合、スペースは20px。
※ブラウザによって相殺されない場合もあります。
パディング(padding)をつかったほうが良い場合
borderの内側にスペースが必要な場合。スペースに背景色(画像)を適用したい場合。
上下に隣接したボックスにスペースを設ける場合、
上下に指定した合計の値を有効にしたい場合。
例：15px + 20px の場合、スペースは35px。
ブラウザによる問題
IE5.x, 6では、float指定したボックスにマージンを指定すると、左側が指定された値の2倍のマージンになってしまう場合があります。
その場合、「padding」を使用したり、ボックスに
「display:inline;」を指定することにより回避できます。
------------------------------------------------------------------------------------------------
実践2 ★ バナー画像にpaddingとmarginを設定する
5.
を押して、新規cssスタイルを追加し、名前を#banaimgとする6. 左右のマージン(margin=外側の余白)をauto(自動)に設定する。※中央揃え
7. 左右に０ピクセルの余白(padding=パディング=内側の余白)を設定する
8.上下のマージンを設定する(各自のデザイン予定に合わせて設定する)
9.上下のパディングを設定する(各自のデザイン予定に合わせて設定する)
10.ブラウザでデザインを確認する
これまでの操作でCSSファイルの中身がどう編集されたか見る
「すべてを保存」でCSSとHTMLを同時に保存する
11.ボックスのボーダーを設定する(各自のデザイン予定に合わせて設定する)
線の種類／線の太さ／線の色 を設定する
線の種類／線の太さ／線の色 を設定する
12.再びすべてを保存してアップロードする。
0 コメント :
コメントを投稿