• ログインログイン
  • 新規登録新規登録

MENU

初心者の初心者による初心者のためのWEBサイト制作入門 第8回

連載初心者の初心者による初心者のためのWEBサイト制作入門

プログラミングが全くわからない!そもそもホームページの作られ方からよくわかっていない、という学生必見のコンテンツです。今となっては周りに聞きづらい、タグの説明やCSSの書き方まで、初心者が一番知りたい内容が盛りだくさんです。

前回までのプログラミング学習コラムに続き8回目の勉強内容です。

今回でこの記事も最終回となります!

これまで

  • HTML
  • CSS
  • jQuery

について解説してきました。

今回はその総まとめとして、Adobe Creative Cloud のDreamweaver CCを用いて実践練習をしていきたいと思います。

自炊をしない自分への訓戒として、男子ごはんについてのホームページを作成します(笑)

ではまず、ホームページのロゴを作成しましょう。

Fireworksなどのツールを用いて作成することも可能なのですが、初心者はロゴを自動で作成してくれるサイトを利用すると楽です。

例えば、ロゴジェネレーターというサイトでは、Twitterのロゴ風のロゴを制作できます。

TwitlogoでDanshi Gohan と入力しましょう。

すると、

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で4枚の写真のスライドをつくってみましょう。前回学んだ通り、jQueryプラグインを用いるのが手っ取り早いです。

Sliceboxという、3Dで回転するスライドを導入できるプラグインを使用します。

Slicebox

参考:http://tympanus.net/Development/Slicebox/

ダウンロード:http://tympanus.net/codrops/2011/09/05/slicebox-3d-image-slider/ 

ここからSliceboxをダウンロードしてください。

次にjQueryプラグイン本体をダウンロードしてください。

jQueary ダウンロード画面

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の場合には、メニューバーのサイト→サイトの管理と開いて、サーバーを選択し、

Dreamweaver 管理画面

左下の方にある、+ボタンをクリックしてください。そしてサーバーを設定したらファイルをアップロードする、それで完成です。

おつかれさまでした!!

オススメ記事一覧

もっと見る
完全無料!

1で登録完了!

エンジニアの仕事・年収や選考ノウハウ記事が読めるほか、
会員にはプログラミング講習やES・面接対策などリアルな無料サポートも充実。
ここだけの求人情報も多数。

今すぐ新規会員登録
Page Top