ワイヤフレーム作成からWebサイト作成までの履歴です。
Webサイト作成後には、Webサイト作成テクニックの部品調査も実施しています。

Step1 : ワイヤーフレーム

Photoshopで作成したワイヤーフレームです。

Step2 : HTML・CSS化とリンク作成

まずは、ワイヤーフレームのマークアップとデザイン化を実施しました。

• ワイヤーフレームをHTML・CSSで忠実に再現
• ページ内リンク作成の実施

Step3 : レスポンシブ対応

タブレットやスマーフォンでも最適な表示ができるようにレスポンシブ対応を実施しました。

• 幅が960ドット以上、960ドット未満、760ドット未満のデザインを定義

Step4 : jquery対応

jqueryを用いてWebページの飾りつけを実施しました。

• スクロール時にメニュー部の固定表示
• トップへ戻るボタンの設置
• スマホ表示時にハンバーガーメニューの表示

Step5 : コンテンツ拡充

動物紹介と園長ブログのコンテンツを拡充しました。

• 動物紹介に12種類の動物を掲載
• 園長ブログに8匹の猫を掲載

Step6 : （参考）ファイル分割

ページを複数に分割しページ間リンクを設定しました。

• トップ、施設情報、園内、動物紹介、園長ブログの各ページを作成

Step7 : （参考）カラーメニュー

メニューをファイリングインデックスのようにしました。

• 通常メニュー、ハンバーガーメニューをファイリングインデックス化

Step8 : （参考）ドロップダウンメニュー

メニューをドロップダウンメニューにしました。

• 施設情報と動物紹介にドロップダウンメニューを設定

Step9 : （参考）スライダー

ヘッダの画像をスライダーにしました。

• ヘッダの画像を12種類の動物画像にしました。