2007年01月15日

職業訓練webデザイン25日目の授業ノート<Dreamweaver応用>

職業訓練webデザイン25日目の授業ノート



<Dreamweaver応用>

法事やなんやらで更新が遅れてしまいましたが、今まで進んだ授業ノートを続けてアップします。
winのディスプレイのバックライトが寿命で今は使えない状態です。
Macだと複数の画像をアップできないようなので、画像は割愛します。



使用ソフト:Dreamweaver MX 2004(最新版はこちら→Dreamweaver 8 日本語版

テキスト:「Dreamweaver MX 2004マスターブック」毎日コミュニケーションズ


Dreamweaver MX 2004でのホームページの作り方の解説本です。
テーブルレイアウトが中心となっていて、スタイルシートの内容があまり無いのがちょっと残念ですが、初心者向けに一から丁寧に解説しています。


以下、授業ノートです。


◆1.2.3限目

○本日の予定
・先週の制作課題続き〜完成まで(ショッピングサイト)
・テキスト
スタイルシート(P162〜)
ポップアップメニュー作り方(P236〜)

制作課題(南部鉄器販売サイトの制作)→トップ+1ページ(何でも:会社概要、ショッピングページなど)
来週の火曜までに。←重要!

○制作課題の続き...(ショッピングサイト)
11:00まで。
→できている人が少ないので...12:00までに延長。

完成したものを皆で鑑賞しあう。

◆4限目

・素材データ配布

○CSS(P162)
文字色や背景色など、外部スタイルシートファイルにすることで、一括して色を変更したりすることが可能。
DreamweaverMX2004から使えるようになった。

スタイルを適用したい文字列などを選択してプロパティのスタイルポップアップから任意のスタイルを選択→HTML内か外部CSSファイルにスタイルシートを記述しておく必要がある。

・スタイルシート解除
スタイル適用されている任意の文字列を選択し、メインウインドウの下にあるステータスバーのspanタグを右クリックでポップアップから選択。

○CSSスタイルの定義(P164)
・CSSパネルを開き、パネルのメニューか、下部のアイコンから新規作成

○コンテキストセレクタとは(P166)
特定のタグに内包されているタグを指定してスタイルを適用する。
Pタグに含まれるstrongなら、
新規cssファイルを選択し、セレクタ名をp storong、セレクタタイプを詳細に設定。
→組み合わせたタグのみに適用される。

○背景設定(P167)
・CSS新規作成で任意のタグに背景を設定。
全画面繰り返しだけでなく、画像の繰り返し方向の指定もできる。

◆5限目

○フロートテキスト
・CSS新規作成でセレクタに「#任意の名前」、タイプを詳細でOK。
→設定ダイアログでボックス、ボーダーで囲腺を設定。
→任意の文字列などを選択して、CSSパネルの適用したいスタイルを右クリック→適用で、スタイルが設定される。

○スタイルシートの外部CSSファイルへ書き出し
・CSSスタイルパネルの最上階層の<style>を選択。
→ファイルメニューの書き出しからCSSスタイルを選択し、任意の名前、場所に保存。

○スタイルシートのリンク(P170)
新しく作成したページに書き出したcssファイルにリンクさせる。

CSSスタイルパネル下部のスタイルシート添付ボタンをクリックしてダイアログから任意のCSSファイルを選択。

・外部スタイルシートファイルへのリンクさせるタグ

★=ファイル名

※1つのCSSファイルで複数のページに適用できるので、効率よくサイト制作が可能。

◆6限目
○ポップアップメニュー

任意の画像などを選択し、ビヘイビアパネルの+アイコンからポップアプメニューを表示を選択。→ダイアログで外観などを設定。

○残り時間制作課題

以上、終業。

◆メモ
休み時間に先生が見てたサイト
HTMLクイックリファレンス→http://htmq.com

使用ソフト:Dreamweaver MX 2004

web制作の超定番ソフトの最新版です。結構いい値段ですが、プロ使用なので仕方ないですね。先生の話だと、プロの現場の7割くらいはこれを使っているということです。

ついでですが、DreamweaverにFireWorksや、FlashがセットになっているStudio 8というのも出ています。


posted by の〜♪ at 16:57 | TrackBack(0) | 職業訓練webデザインノート | このブログの読者になる | 更新情報をチェックする
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/31458878
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。