一歩、一歩、歩みながら「一人前のwebデザイナーを目指して」トレーニングをかさねています

Illustratorにてカンプ作成後、Dreamweaverのコードビューを使って手打ちで制作しました

≪制作ポイント≫

• 初めてのお客様でも安心していただけるサロンをイメージして制作しました
• HOME／CONCEPT／MENU／STAFF／ACCESS／CONTACTの6ページを作成しました

≪JavaScript≫

• グローバルナビゲーションの画像置換は「rollover.js」を使用しています
• パングスリストは「jquery.jBreadCrumb.js」を使用しています
• ページ内をスムーズにスクロールできる「jquery.page-scroller-306.js」を使用しています

2008年8月に私が初めて制作したオリジナルサイトです

≪制作ポイント≫

• 愛犬と一緒に楽しんで、くつろいで頂けるようなドッグカフェをイメージして制作しました
• Home／メニュー／お友達紹介／アクセス／お問合わせ／サイトマップ／グッズコーナー／マナー＆ルールの８ページを作成しました
• Home（Top）ページ画像は、訪問するたびに画像が変わる「JavaScript」を使用しました

1. IKEAサイトのキャプチャーを撮り、Photoshopで画像をスライスして保存します
2. htmlコーディング
   ・文書構造、マークアップ、グループ化と順番に手打ちでコーディング
3. CSSでレイアウト
   ・リセットを設定後、全体の設定、各要素の設定、微調整をします
4. 文法チェックをします

≪制作ポイント≫

• CSSレイアウトで制作されているサイトですがIKEA様のサイトお借りして、Photoshopで画像をスライスをしてCSSレイアウトで作成しました。
• グローバルナビゲーションの画像置換はJavaScriptの「rollover.js」を利用しました

1. POLA　企業情報｜文化活動｜ポーラ文化研究所サイトのキャプチャーを撮り、Photoshopで画像をスライスして保存します
2. htmlコーディング
   ・文書構造、マークアップ、グループ化と順番に手打ちでコーディング
3. CSSでレイアウト
   ・リセットを設定後、全体の設定、各要素の設定、微調整をします
4. 文法チェックをします

≪制作ポイント≫

• 元々テーブルレイアウトで制作されているサイトですが、POLA｜企業情報｜文化活動｜ポーラ文化研究所様のサイトお借りして、Photoshopで画像をスライスをして必要な画像は加工をおこないフルCSSで作成しました。
• グローバルナビゲーションの画像置換はJavaScriptの「rollover.js」を利用しました

1. 銀座掌｜GINZA TANATANAGOKOROサイトのキャプチャーを撮り、Photoshopで画像をスライスして保存します
2. htmlコーディング
   ・文書構造、マークアップ、グループ化と順番に手打ちでコーディング
3. CSSでレイアウト
   ・リセットを設定後、全体の設定、各要素の設定、微調整をします
4. 文法チェックをします

≪制作ポイント≫

• 元々CSSレイアウトで制作されているサイトですが、銀座掌様のサイトお借りして、スタイルシートを役割ごとに分けて適用するコンポーネント化「@import」を使用してリ・コーディングしました
• グローバルナビゲーションの画像置換はJavaScriptの「rollover.js」を利用しました
• GINZA TANATANAGOKOROのロゴ画像は「.png」の拡張子を使用して「JavaScript」の「iepngfix.js」を使って画像を透過させています

1. ＧＩＮＺＡ　ＫＡＲＡＣＵ 【銀座菓楽】サイトのキャプチャーを撮り、Photoshopで画像をスライスして保存します
2. htmlコーディング
   ・文書構造、マークアップ、グループ化と順番に手打ちでコーディング
3. CSSでレイアウト
   ・リセットを設定後、全体の設定、各要素の設定、微調整をします
4. 文法チェックをします

≪制作ポイント≫

• 元々CSSレイアウトで制作されているサイトですが、ＧＩＮＺＡ　ＫＡＲＡＣＵ 【銀座菓楽】様のサイトお借りして、web標準を意識しながらCSSレイアウトで作成しました
• グローバルナビゲーションは、CSS側に「a:hover」を記述して画像置換を設定

1. ＺＥＲＯＩＮ（ｾﾞﾛｲﾝ）サイトのキャプチャーを撮り、Photoshopで画像をスライスして保存します
2. htmlコーディング
   ・文書構造、マークアップ、グループ化と順番に手打ちでコーディング
3. CSSでレイアウト
   ・リセットを設定後、全体の設定、各要素の設定、微調整をします
4. 文法チェックをします

≪制作ポイント≫

• 元々CSSレイアウトで制作されているサイトですが、ＺＥＲＯＩＮ（ｾﾞﾛｲﾝ）様のサイトお借りして、CSSレイアウトで作成しました
• グローバルナビゲーションは、DreamweaverのビヘイビアにてJavaScriptロールオーバーを設定

1. 商品のご案内|活性ウコン|ハウス食品サイトのキャプチャーを撮り、Photoshopで画像をスライスして保存します
2. htmlコーディング
   ・文書構造、マークアップ、グループ化と順番に手打ちでコーディング
3. CSSでレイアウト
   ・リセットを設定後、全体の設定、各要素の設定、微調整をします
4. 文法チェックをします

≪制作ポイント≫

• 元々テーブルレイアウトで制作されているサイトですが、商品のご案内|活性ウコン|ハウス食品様のサイトお借りして、画像のスライスからテーブルレイアウトで作成しました
• グローバルナビゲーションは、DreamweaverのビヘイビアにてJavaScriptロールオーバーを設定

参照サイト「商品のご案内|活性ウコン|ハウス食品」

1. 「箸」銀座夏野サイトのキャプチャーを撮り、Photoshopで画像をスライスして保存
2. htmlコーディング
   ・「teble（tr,th,td）」でコーディング
   ・文書構造、マークアップ、グループ化と順番に手打ちでコーディング
3. CSSでレイアウト
   ・リセットを設定後、全体の設定、各要素の設定、微調整をします
4. HTMLソースとCSSの文法チェック

≪制作ポイント≫

• 元々テーブルレイアウトで制作されているサイトですが、「箸」銀座夏野様のサイトお借りして、画像のスライスからテーブルレイアウトで作成しました
• グローバルナビゲーションは、DreamweaverのビヘイビアにてJavaScriptロールオーバーを設定
• 「地図を表示」は、サブウィンドウが開いて表示します

参照サイト「「箸」銀座夏野」