CID GR2 WEB/DTP: WEB 第八〜十三回 2学期 [自分のサイトを作成する]

自分のサイトを作成する

作業内容

●完了していない課題がある人は課題を完成してアップロード
↓
●これまでの授業内容から自分のフローチャートに不具合が無いか確認
フローチャートを詳細に書き改める(参照P.201.210の図)
↓
●画像のパーツ作りや掲載する情報を集めて充実したサイトにする

サイト公開URLのトップページは

http://自分のユーザーID.web.fc2.com/index.html

http://▲▲.geocities.jp/自分のユーザーID/index.html

になるように公開する。

[WEB用のフリー素材の探し方]
web free フリー素材　などで検索して、素材集配布のサイトを見つけ、
そのサイト内を検索する。
(検索エンジンの画像検索などでフリーではない画像を勝手に取って来て使わないこと)

WEBデザイン用フリー素材まとめのまとめ（素材探しがめんどくさい人向け ...

素材屋・HP素材のおすそわけ。著作権フリーのweb素材屋

WEBデザイナーが作った超シンプル素材集

フリー素材「blue-green」 - シンプルかわいいWEB用フリー素材 ...

メニュー画像を下揃えにする

http://2010yoko14145.web.fc2.com/menu1108.html

Onmouseで画像の変わる

メニューを

HTMLで作成する

(テーブルタグとロールオーバーで可能)

http://2010yoko14145.web.fc2.com/menu1108-2.html

1学期の第11回目の授業の↓を使うともっと複雑なボタンのデザインが可能です。

課題が完成した人はメニューボタンを作成しよう！

css一覧と使い方を詳しく見る事ができるサイト

http://www.htmq.com/style/index.shtml
http://www.tagindex.com/stylesheet/
http://www.tohoho-web.com/css/
http://www.ink.or.jp/~bigblock/css/index.html
http://css.uka-p.com/
http://park16.wakwak.com/~html-css/css/

◆段組みレイアウトテンプレート

このテンプレートの使い方

1)リンク先へ移動
2)Safariの[表示]の[ソースを表示]でHTMLを表示し、全文コピーする。
3)Dreamweaverを起動し、[ファイル]の[新規]から新規HTMLファイルを作成し
4)[コード]または[分割]表示でコードを編集可能にし、
5)2でコピーしたHTMLを<body> ~ </body>の間へペーストする。
　　　　この段階で基本のデザインを一度完成する。完成したものを2ページ目以降に転用する。

Dreamweaver8[Mac版]の場合 -------教科書p.102~106の手順と同じ

6)CSSスタイルのウインドウの表示を[すべて]にする
7)<style>をcontrolキーを押しながらクリックし、
8)[書き出し]を選択し、ファイル名をつけて保存(ファイル名の例:style.css)
9)<style>を再度controlキーを押しながらクリックし、
10)[削除]を選択
11)CSSスタイルのウインドウの下の[スタイルシートを添付]をクリック
12)出てきたウインドウの参照ボタンをクリックし、8で保存したファイルを選択
13)追加方法[リンクさせる]を選択し、OKボタンをクリック

DreamweaverCS3[Mac版]の場合

6)CSSスタイルのウインドウの表示を[すべて]にする
7)<style>をcontrolキーを押しながらクリックし、
8)[CSSルールを移動]を選択し、ファイル名をつけて保存(ファイル名の例:style.css)

★DreamweaverCS3は自動で[リンク]されて[削除]は不要なので
Dreamweaver8では必要だった9~13の手順は要らない。

A　固定右サイドバー２列段組みレイアウト（可変横幅コンテンツ・固定横幅右サイドバー）
(編集用にsidebar_containerのフロートを右／contents_containerのwidthを80%にしているので
完成時にはsidebar_containerのフロートを解除／contents_containerのwidthを100%に戻す事)

B　固定左サイドバー２列段組みレイアウト（固定横幅左サイドバー・可変横幅コンテンツ）
(編集用にsidebar_containerのフロートを右／contents_containerのwidthを80%に／for_ie_wrapperのマージンの左を0にしているので
完成時にはsidebar_containerのフロートを解除／contents_containerのwidthを100%／for_ie_wrapperのマージンの左を200に戻す事)

C　可変右サイドバー２列段組みレイアウト（可変横幅コンテンツ・可変横幅右サイドバー)
(編集用にsidebar_containerのフロートを右にしているので
完成時にはsidebar_containerのフロートを解除に戻す事)

D　可変左サイドバー２列段組みレイアウト（可変横幅左サイドバー・可変横幅コンテンツ）
(編集用にsidebar_containerのクリアを左にしているので
完成時にはsidebar_containerのクリアを解除に戻す事)

E　固定両サイドバー３列段組みレイアウト（固定横幅両サイドバー・可変横幅コンテンツ)

(編集用にright_sidebar_containerのフロートを右に／contents_containerの横幅を60%のマージンの右を180／
left_sidebar_containerのフロートを左に／for_ie_wrapper のマージンの左右を180にしているので
完成時にはright_sidebar_containerのフロートを左に／contents_container の横幅を80%マージンの右をなし／
left_sidebar_containerのフロートを右に／for_ie_wrapper のマージンの左右をなしに戻す事)

F　可変両サイドバー３列段組みレイアウト（可変横幅両サイドバー・可変横幅コンテンツ）
(編集用にcontents_containerのマージンの右を40、上を180／right_sidebar_containerのフロートを右に、マージンの上を-490にしてあるので
完成時にcontents_containerのマージンの右をなし、上をなし／right_sidebar_containerのフロートを左に、マージンの上をなしに戻す事)