webサイト
Dreamweaverのコードビューを使って文書構造から手打ちで制作しています
HTMLの検証は「Another HTML-lint gateway」
CSSの検証は「CSS Validation Service」
オリジナルサイ
美容室 hair design Natural|ナチュラル
(オリジナル架空サイト)
総作業時間:30時間(6ページ)
Illustratorにてカンプ作成後、Dreamweaverのコードビューを使って手打ちで制作しました
- ≪制作ポイント≫
-
- 初めてのお客様でも安心していただけるサロンをイメージして制作しました
- HOME/CONCEPT/MENU/STAFF/ACCESS/CONTACTの6ページを作成しました
- ≪JavaScript≫
-
- グローバルナビゲーションの画像置換は「rollover.js」を使用しています
- パングスリストは「jquery.jBreadCrumb.js」を使用しています
- ページ内をスムーズにスクロールできる「jquery.page-scroller-306.js」を使用しています
DogCafe dooby|ドッグカフェ ドゥービィー
(オリジナル架空サイト)
総作業時間:50時間(8ページ)
2008年8月に私が初めて制作したオリジナルサイトです
- ≪制作ポイント≫
-
- 愛犬と一緒に楽しんで、くつろいで頂けるようなドッグカフェをイメージして制作しました
- Home/メニュー/お友達紹介/アクセス/お問合わせ/サイトマップ/グッズコーナー/マナー&ルールの8ページを作成しました
- Home(Top)ページ画像は、訪問するたびに画像が変わる「JavaScript」を使用しました
お問合せフォーム(CGI)
作業時間:2時間
KENT WEB - 掲示板より「PostMail」のデータをダウンロードして作成しました
入力項目内容は
- お名前
- メールアドレス
- 確認用メールアドレス
- ご感想・ご意見等をご記入ください
の4項目に設定
その他に
- 入力内容の確認画面
- 送信完了の画面
- 入力内容にエラーがあるの画面
を作成しました
ブログ「しろうさぎのwebnotebook」もどうぞ。。。
練習課題|リ・コーディング
IKEA|イケア
(CSSレイアウトでリコーディング)
総作業時間:5時間
- IKEAサイトのキャプチャーを撮り、Photoshopで画像をスライスして保存します
- htmlコーディング
・文書構造、マークアップ、グループ化と順番に手打ちでコーディング - CSSでレイアウト
・リセットを設定後、全体の設定、各要素の設定、微調整をします - 文法チェックをします
- ≪制作ポイント≫
-
- CSSレイアウトで制作されているサイトですがIKEA様のサイトお借りして、Photoshopで画像をスライスをしてCSSレイアウトで作成しました。
- グローバルナビゲーションの画像置換はJavaScriptの「rollover.js」を利用しました
参照サイト「IKEA|イケア」
ブログ「しろうさぎのwebnotebook」もどうぞ。。。
POLA|企業情報|文化活動|ポーラ文化研究所
(テーブルレイアウト → CSSレイアウトへリコーディング)
総作業時間:5時間
- POLA 企業情報|文化活動|ポーラ文化研究所サイトのキャプチャーを撮り、Photoshopで画像をスライスして保存します
- htmlコーディング
・文書構造、マークアップ、グループ化と順番に手打ちでコーディング - CSSでレイアウト
・リセットを設定後、全体の設定、各要素の設定、微調整をします - 文法チェックをします
- ≪制作ポイント≫
-
- 元々テーブルレイアウトで制作されているサイトですが、POLA|企業情報|文化活動|ポーラ文化研究所様のサイトお借りして、Photoshopで画像をスライスをして必要な画像は加工をおこないフルCSSで作成しました。
- グローバルナビゲーションの画像置換はJavaScriptの「rollover.js」を利用しました
参照サイト「POLA 企業情報|文化活動|ポーラ文化研究所」
ブログ「しろうさぎのwebnotebook」もどうぞ。。。
銀座掌|GINZA TANATANAGOKORO
(CSSレイアウトでリコーディング)
総作業時間:19時間05分(7ページ)
- 銀座掌|GINZA TANATANAGOKOROサイトのキャプチャーを撮り、Photoshopで画像をスライスして保存します
- htmlコーディング
・文書構造、マークアップ、グループ化と順番に手打ちでコーディング - CSSでレイアウト
・リセットを設定後、全体の設定、各要素の設定、微調整をします - 文法チェックをします
- ≪制作ポイント≫
-
- 元々CSSレイアウトで制作されているサイトですが、銀座掌様のサイトお借りして、スタイルシートを役割ごとに分けて適用するコンポーネント化「@import」を使用してリ・コーディングしました
- グローバルナビゲーションの画像置換はJavaScriptの「rollover.js」を利用しました
- GINZA TANATANAGOKOROのロゴ画像は「.png」の拡張子を使用して「JavaScript」の「iepngfix.js」を使って画像を透過させています
参照サイト「銀座掌|GINZA TANATANAGOKORO」
ブログ「しろうさぎのwebnotebook」もどうぞ。。。
GINZA KARACU 【銀座菓楽】
(CSSレイアウトでリコーディング)
総作業時間:20時間(8ページ)
- GINZA KARACU 【銀座菓楽】サイトのキャプチャーを撮り、Photoshopで画像をスライスして保存します
- htmlコーディング
・文書構造、マークアップ、グループ化と順番に手打ちでコーディング - CSSでレイアウト
・リセットを設定後、全体の設定、各要素の設定、微調整をします - 文法チェックをします
- ≪制作ポイント≫
-
- 元々CSSレイアウトで制作されているサイトですが、GINZA KARACU 【銀座菓楽】様のサイトお借りして、web標準を意識しながらCSSレイアウトで作成しました
- グローバルナビゲーションは、CSS側に「a:hover」を記述して画像置換を設定
参照サイト「GINZA KARACU 【銀座菓楽】」
ブログ「しろうさぎのwebnotebook」もどうぞ。。。
ZEROIN(ゼロイン)
(CSSレイアウトでリコーディング)
総作業時間:9時間30分
- ZEROIN(ゼロイン)サイトのキャプチャーを撮り、Photoshopで画像をスライスして保存します
- htmlコーディング
・文書構造、マークアップ、グループ化と順番に手打ちでコーディング - CSSでレイアウト
・リセットを設定後、全体の設定、各要素の設定、微調整をします - 文法チェックをします
- ≪制作ポイント≫
-
- 元々CSSレイアウトで制作されているサイトですが、ZEROIN(ゼロイン)様のサイトお借りして、CSSレイアウトで作成しました
- グローバルナビゲーションは、DreamweaverのビヘイビアにてJavaScriptロールオーバーを設定
参照サイト「ZEROIN(ゼロイン)」
ブログ「しろうさぎのwebnotebook」もどうぞ。。。
商品のご案内|活性ウコン|ハウス食品
(テーブルレイアウト → CSSレイアウトへリコーディング)
作業時間:10時間
- 商品のご案内|活性ウコン|ハウス食品サイトのキャプチャーを撮り、Photoshopで画像をスライスして保存します
- htmlコーディング
・文書構造、マークアップ、グループ化と順番に手打ちでコーディング - CSSでレイアウト
・リセットを設定後、全体の設定、各要素の設定、微調整をします - 文法チェックをします
- ≪制作ポイント≫
-
- 元々テーブルレイアウトで制作されているサイトですが、商品のご案内|活性ウコン|ハウス食品様のサイトお借りして、画像のスライスからテーブルレイアウトで作成しました
- グローバルナビゲーションは、DreamweaverのビヘイビアにてJavaScriptロールオーバーを設定
参照サイト「商品のご案内|活性ウコン|ハウス食品」
「箸」銀座夏野
(tebleレイアウトでリコーディング)
作業時間:8時間
- 「箸」銀座夏野サイトのキャプチャーを撮り、Photoshopで画像をスライスして保存
- htmlコーディング
・「teble(tr,th,td)」でコーディング
・文書構造、マークアップ、グループ化と順番に手打ちでコーディング - CSSでレイアウト
・リセットを設定後、全体の設定、各要素の設定、微調整をします - HTMLソースとCSSの文法チェック
- ≪制作ポイント≫
-
- 元々テーブルレイアウトで制作されているサイトですが、「箸」銀座夏野様のサイトお借りして、画像のスライスからテーブルレイアウトで作成しました
- グローバルナビゲーションは、DreamweaverのビヘイビアにてJavaScriptロールオーバーを設定
- 「地図を表示」は、サブウィンドウが開いて表示します
参照サイト「「箸」銀座夏野」