前回はサイトを閉じてＷｅｂ４を終了しましたので、再度Ｗｅｂ４を立ち上げるとワークスペースには何も表示されません。編集するサイトを開く必要があります。
サイトを開く操作
- メニュー[サイトを]をクリックします。
- 表示されるドロップダウンメニューの[サイトを開く]を押下します。
- 編集するＨＴＭＬファイルを開きます。
HTMLファイルの編集
HTMLファイルの編集にはいくつかの’パネル’を使用します、メニュー[パネル]を開き’ツールボックス’及び’スタイルの管理’にチェック印を付けます。
文字、画像等を思いのままにレイアウトする為にはスタイルの適用が不可欠です。このためCSSファイルを作る前に手書きのレイアウトを作成します。
この講座のホームページの手書きレイアウト
|
CSSファイルの作成
レイアウトをスタイルシートに記入します。
操作
- メニュー[ファイル]－[新規]－[CSS]をクリックします。
- 文字の入力ﾓｰﾄﾞは半角英字にする。
- ’{’入力以降のプロパティは’IntelliSense’機能を使ます。（’名前を付けて保存’でも可）
CSSファイルの内容を以下のように作成します。
- すべて記述したら、メニュー[ファイル]－[名前を付けて保存]で編集を終わります。
無題．css⇒base.css へ変更（HTMLファイル名変更を参照）
スタイルシートの適用
作業中のhtmlファイルにスタイルシートを適用します
操作
- メニュー[書式設定]－[CSSスタイル]－[スタイルシートの添付]を選択
- 表示される’スタイルシートの適用ダイヤログ’の[参照]をクリックします。
- 作成したCSSファイルを選択します。
- 適用対象を確認しOKを押下します。
● 下のイメージはスタイルシートが適用された状態です（コードタブで確認）
セクションの定義
セクションを定義し領域を確保します。
操作１
- メニュー[表示]－[視覚補助]で’表示’及び’ブロックの選択’をアクティブにする。
- ツールボックスの’div’アイコンをデサインタブにドラッグします
●デザインビューに<div>が構築される
- スタイルの管理パネルの’div#pagebody’をクリックします。
- 右クリックで表示されるメニューの’スタイルの適用’を選択します。
● デザインビューの’div’が’div#pagebody’に変わります.
ヘッダー定義
操作
- 改行を入れます。
- カーソルを改行前に移動#pagebodeyと同じ要領で#headerを作成します。
メインメニューを’記号付きリスト＜ｕｌ＞’で作成
メインメニューの各項目を記入
操作
- カーソルを#headerセクションの次の改行マークの前に移動
- メニュー[書式設定]－[箇条書きと段落番号]をクリックします。
- 箇条書きと段落番号ダイアログで記号タブを選択
- ’●’ 記号のアイコンを選択します。
- [ＯＫ]を押下します。
- リストデータを記入します。（右図）
- 最後は未記入とし、アイコン[スタイル]の’（なし）’を選択します。
写真を貼り付けるセクション及び、見出し定義
写真領域
- 再びアイコン’スタイル’を展開し’（なし）’を選択します。
- ツールボックスから<div>アイコンをドラック
ｈ１見出し（”お知らせ”）の作成
- 写真の下に改行を入れます。
- 最後の改行の前に文字”お知らせ”と入力します。
文字に色をつける
- ”お知らせ”と記述した文字を選択します。
- メニュー[書式設定]－[フォント]をクリックします。
- フォントダイアログの’色’を赤にしＯＫを押下します。
- アイコン[スタイル]を展開し[見出し１] をクリックします。
インラインフレームの作成
テーブルを作成しその中にインラインフレームを構築します。
テーブル作成操作
- コードタブの<h1>・・・</h1>の次の行にカーソルを移動しツールボックスから改行を挿入します。
- デザインタブをアクティブにします。
- メニュー[テーブル]－[テーブル挿入]をクリックし”テーブルの挿入”ダイアログを表示します。
- 右図のように入力します。
- OKを押下します。
●右図のように表示されます。
セルのプロパティ変更
- 初期表示されるtdをクリックし、プルダウンメニューの[セルのプロパティ]をクリック
- ”セルのプロパティ”ダイアロググが表示されるので１，２列は図の通り入力します。
- ３列目は幅のみ’0’で編集します。
- ２行目は３つのセルを選択しメニュー[テーブル]－[変更]の’セルの結合’を選択します
↓ 作成されたテーブル
テーブルの２行目にインラインフレームを挿入します。
操作
- ツールボックスよりインラインフレームタグを結合されたセルにドラッグします。
- 「初期ページ設定」 「新しいページ」と表示されます。
- 表示で[新しいページ]をクリックします。
- index.htmlを保存します。
’名前を付けて保存’ダイアログが表示されます。
- ファイル名に’inf.html’と記入します。
- [保存]を押下します。
●以下のインラインフレームが設定されたデザインタブが表示されます
最後にフッターセクションを設定します。
操作
- カーソルをテーブルの次に移動します
- ツールボックスの<div>タグをドラッグします。
- スタイルの管理パネルの’div#footer’をクリック
- 右クリックで表示される[スタイルの適用]を選択します。
- ’div#footer’に文字等を入力します。
イメージの貼り付け
全部で４枚のイメージを貼り付けます。
ヘッダーセクションにイメージを貼り付ける
操作
- フォルダーリストの’images’フォルダーの＋記号をクリックしフォルダーを展開します。
- ’top_logo.png’を選択します
- デザインタブの’div#header’にドラッグします。
- ’アクセシビリティのプロパティ’が表示されるのでの代替テキストに’top_logo’と入力します。
- OKを押下します。
注意：フォルダーに＋記号が無い場合
- ’images’フォルダーをクリックします。
- メニュー[表示]－[更新をクリックします。]
● 以下はイメージを貼り付けた状態です。
Ｄｉｖセクションに３個横に並べます
複数枚横に並べるににはセクションのwidthが並べるイメージの横幅の合計より大きいか等しくならなければなりません。セクションの{ width＝（イメージ１のwidth）＋（イメージ２のwidth）＋（イメージ３のwidth）}が必要で{セクションのwidth＞（イメージ１のwidth）＋（イメージ２のwidth）}ではマージンによる調整が必要です。
操作
- はじめのイメージ（web4logo.png）をdivセクションにドラッグします。
- 連続でイメージ（haru.png)(design4logo.png)の順に右横にドラッグします。
ここまでのホームページデザイン画面(下図）
