前回までのプログラミング学習コラムに続き8回目の勉強内容です。
今回でこの記事も最終回となります！
これまで
- HTML
- CSS
- jQuery
について解説してきました。
今回はその総まとめとして、Adobe Creative Cloud のDreamweaver CCを用いて実践練習をしていきたいと思います。
自炊をしない自分への訓戒として、男子ごはんについてのホームページを作成します（笑）
ではまず、ホームページのロゴを作成しましょう。
Fireworksなどのツールを用いて作成することも可能なのですが、初心者はロゴを自動で作成してくれるサイトを利用すると楽です。
例えば、ロゴジェネレーターというサイトでは、Twitterのロゴ風のロゴを制作できます。
TwitlogoでDanshi Gohan と入力しましょう。
すると、
というロゴが完成しました。
他にも、スタバ風のロゴ、AKB48風のロゴなどが作成できます。
それではHTML部分を記述していきましょう。先ほど作成したロゴを保存したら、HTMLファイルと同じ階層に置きます。
<body> <a href="http://engineer-intern.jp"> <img src="0601be66af2b3075cfa1b94ef5911a6b.png" width="300",height="150"></a> </body>
とbody部分に記述してください。これで、ロゴにリンクを貼ることができました。
それから、
<body> <a href="http://engineer-intern.jp"><img src="0601be66af2b3075cfa1b94ef5911a6b.png" width="300",height="150"></a> <ul> <img src="images/menu_top.png"><img src="images/menu_service.png"><img src="images/menu_event.png"><img src="images/menu_about.png"> </ul> <p>全男子に告ぐ・・・ メシをつくれ!!</p> <div id=”sb-slider” class=”sb-slider”> <img src="IMG_1340.JPG" width="600px" ,height="300px"> <img src="IMG_1360.JPG" width="600px" ,height="300px"> <img src="IMG_1552.JPG" width="600px" ,height="300px"> <img src="IMG_1666.JPG" width="600px" ,height="300px"> </div> </body>
と記述してください。
それからスタイルシート stylesheet.cssを作成して、
@charset "UTF-8"; /* CSS Document */
p{background-color:#000000; margin-right:200px; margin-left:200px; font-size:36px; color:#FDF9FA; font-weight:bold; text-indent:3em }
ul{margin-left:50px }
div{text-align:center }
とします。これをHTMLファイルとつなげるには、header部分に
<link href="stylesheet.css"rel="stylesheet"type="text/css">
と記述すればよいのでしたね。
これも、stylesheet.cssをhtmlファイルと同じ階層に保存する点に注意です。この時点で、ブラウザでファイル→ブラウザでプレビューをしてみると、
こんな感じです。
最後に、jQueryで４枚の写真のスライドをつくってみましょう。前回学んだ通り、jQueryプラグインを用いるのが手っ取り早いです。
Sliceboxという、３Dで回転するスライドを導入できるプラグインを使用します。
参考：http://tympanus.net/Development/Slicebox/
ダウンロード：http://tympanus.net/codrops/2011/09/05/slicebox-3d-image-slider/
ここからSliceboxをダウンロードしてください。
次にjQueryプラグイン本体をダウンロードしてください。
http://code.jquery.com/jquery-migrate-1.2.1.min.js
です。
これをCtrlキーを押しながらクリックして保存したら、それぞれのjsファイル、slicebox.cssをhtmlファイルと同じ階層に移動させ、headerタグ内に
<link href="slicebox.css"rel="stylesheet"type="text/css"> <script type="text/javascript" src="jquery-1.10.2.min.js"></script> <script type="text/javascript" src="jquery.slicebox.js"></script>
と記述してください。
それから、
<script>
$(function(){ $("#sb-slider").slicebox(); });
</script>
Slicebox実行の命令をscript内に記述したら完成です。divタグにはID名sb-sliderが付けられていることに注意が必要です。
これでホームページは完成です。あとは、できたホームページを公開すれば完成です。
WEBサイト公開というのは、ローカル（自身のPC）にあるフォルダ、ファイルを、サーバーに移動することです。保存する場所を変えるだけで、本質的にはデスクトップに保存するのと何ら変わりはありません。
Dreamweaverの場合には、メニューバーのサイト→サイトの管理と開いて、サーバーを選択し、
左下の方にある、＋ボタンをクリックしてください。そしてサーバーを設定したらファイルをアップロードする、それで完成です。
おつかれさまでした！！
