メディアデザイン演習3γ
06 ウェブサイトを作ろう1

実製作に向けて

前期は、ウェブサイトを表示するために必要なHTMLというプログラムを学びます。
前期合評時の製作目標は、自分が編集長となるウェブマガジンサイトをつくることです。

ウェブマガジンの企画を書き出してきましたか?
今週は、授業の半分をCSS(Cascading Style Sheet)の学習に、残り半分をヒアリングにあてて行こうと思うので、参考サイトやスケッチなどを見せて下さい。

ウェブサーバへのアップロード

登録されたアカウントを確認する

まずは、自分のウェブページがアップロードされるウェブサーバにログインするためのアカウントを確認しましょう。 アカウントとパスワードは絶対なくさない様に管理してください。 携帯のメモに登録しておく、手帳に書き込んでおくなどしておくと良いでしょう。

アップロードの方法

CyberDuckを起動する

ホスト www3.seian.ac.jp
ユーザーID あなたのアカウント
パスワード 発行されたパスワード

OKをクリック

工事中のページ「index.html」と、imageフォルダを、あなたのアカウントの「public_html」ディレクトリにドラッグ&ドロップする
もしくは、フォルダとファイルをPutを選択し、index.html、imageフォルダを選択してOKする。
 

確認する

ブラウザに
http://www3.seian.ac.jp/~自分のアカウント
と入力し、
・アップロードしたデータが無事に表示されているか
・画像は表示できているか
・リンクボタンは指定した先にリンクできているか
を確認して下さい。


結局URLって何?

URL Uniform Resource Locator
インターネット上に存在する情報資源(文書や画像など)の場所を指し示す記述方式。
インターネットにおける情報の「住所」にあたる。
情報の種類やサーバ名、ポート番号、フォルダ名、ファイル名などで構成される。

http://

http:// は、アクセスしているファイルの種類を示している。
ウェブでは、ほとんど例外無く、httpが最初に来ているが、
これは「HyperText Transfer Protocol」の略で、このプロトコルでウェブページが転送される。

その他には、
ftp(「File Transfer Protocol」の略で、通常はソフトなどの大規模ファイルの転送に使う)
telnet(遠隔コンピューターへのログインに使う、ほとんどが「チャット」のため)
file(ブラウザが遠隔サーバでなくて自分のコンピューターのファイルを読んでいることを示している)
が最初に表示される。

基本的なURLの次の部分は、インターネットという世界中のコンピューターのネットワークのどこに、探しているサイトがあるのかの「道案内」。
これには、Domain Name System (DNS) を使用する。

DNSについて:http://e-words.jp/w/DNS.html

DNSは、人間にわかりやすいwww.google.comなどのようなアドレスを、数字の204.62.130.25のようなIPアドレスに変換して、インターネット上でコンピューターがこれを使ってお互いを認識するためのもの。

自分のマシンで自分のサイトを始めようと考えているのではなければ、DNSのことは知っている程度でいいです。
参考:ドメイン登録サービス 「お名前.com」http://www.onamae.com/
とにかく、.com、.gov、.orgなど色々なドメイン名があるんだということさえわかればまずは大丈夫。

 


スタイルシート 発展編

準備:
デスクトップに、アルファベットで自分の名字を名付けたフォルダを出して下さい。
中にはindex.htmlやimageフォルダが入っているはずです。

CSSで使える!クラスとIDについて

クラス

クラスはスタイルの集合につける名前で、
複数のタグに同じクラス名を指定することが可能です。

<style type="text/css">
<!--

p.red {color:red;}
p.green {color:green}
.blue{color:blue;}
.bold{font-weight:bold;}

-->
</style>
</head>

<body>
<p class="red">これはredクラスです。</p>
<p class="green bold">これはgreenクラス+boldクラスです。</p>

<h1 class="blue">これはblueクラスです。</h1>
<p class="blue">これもblueクラスです。</p>

</body>
</html>

 

ID属性

クラスの代わりに ID を指定することもできます。
ID はそれぞれの要素につける名前でひとつのドキュメント中に、
複数の要素が同じ ID を持つことは許されません。

<html>
 <head>
  <title>sample</title>
  <style type="text/css">
  <!--
   #a001 { color: blue; }
  -->
  </style>
 </head>
 <body>
  <p id="a001">この中の色は青色です</p>
 </body>
</html>

どのような要素が設定できるのか、調べてみましょう。
参考ウェブ: とほほのスタイルシート入門
http://www.tohoho-web.com/css/index.htm

 

ボックス(div)の配置方法を指定する

<div>
この部分が<br / >
ひとつの面的範囲として<br / >
扱われます。
</div>

復習: divタグで囲まれた内容は面積をふくむ範囲を示します。

floatについて
float フロート、というスタイルを使います。
フロートとは「浮かぶ」という意味です。 :コーヒーフロート

これと復習したCSSとの組み合わせによって、レイアウトに使える道具となります。

まずはこのページを見てください divsample.html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>DIV test</title>

<style type="text/css">
<!--
#wrapper {
height: auto;
width: 920px;
margin-right: auto;
margin-left: auto;
}
#wrapper #header {
background-color: #FF0;
height: 100px;
padding: 10px;
}
.menu {
color: #FFF;
background-color: #000;
float: left;
width: 200px;
padding: 20px;
}
.contents {
background-color: #F93;
float: right;
width: 640px;
height: 400px;
padding: 10px;
margin-left: 20px;
}
#wrapper div#footer {
color: #CCC;
background-color: #060;
clear: both;
height: 200px;
text-align: right;
}
-->
</style>
</head>

<body>
<div id="wrapper">
<div id="header">header</div>
<div class="menu">menu</div>
<div class="contents">contents</div>
<div id="footer">footer</div>
</div>
</body>
</html>

参考資料:
marginマージン、paddingパディング、borderボーダーの考え方:
http://css-eblog.com/csstechnique/css-course.html


上下左右の周囲があるものについての指定方法
 margin: 10px;   /*上下左右すべて10pxのマージン*/
 margin: 10px 20px; /*上下10px 左右20pxのマージン*/
 margin: 10px 20px 30px 40px; /*上 10px 左20px 下30px 左40pxのマージン*/

  1
4   2
  3


左右の中央にボックスを配置する

div#wrapper{
 width : 920px; /*任意のサイズ*/
   margin: 0 auto; /*上下0px 左右自動*/
}

  divの幅が決まっている場合(今回は920px)、margin : auto [自動 の意] と書くと、ウインドウ全体の幅から、920pxを引いて二分の一のサイズを左右均等にわける。
こうすると、ウインドウを大きくしたり小さくしたりしたとき、常に左右の中央に表示されるようになる。


ウェブマガジンの企画ヒアリング

HTMLを使ってレイアウトする
授業のはじめにやった基礎があれば、とにかくウェブサイトは作成できます。

自分の作りたいサイトは、どう作れば良いのか。
サンプルを作ってみて、出来るかどうかを試す。その後、実作にどれくらい時間がかかるかを考えて、そこから逆算したコンテンツ量を決めて作り始める。

ウェブサイトデザインは追加したり更新していけるので、まずはすっきりと出来る範囲のコンテンツ量を目指すと良いと思います。

※待っている間に
復習をかねて、宿題でつくってきたマガジンのタイトル画像を、ウェブ用に書き出してstudy.htmlに配置してみましょう。

ウェブサイト プロジェクトワークフロー[画像]
(via Webデザイン エンジニアリング - 第65回 [図解]Webサイト構築プロジェクト・ワークフロー:ITpro)
ひとつのウェブサイトをチームで作り上げるときにどのような順序でどのようなプロフェッショナルがかかわっていくのかが分かりやすく図示されているので紹介します。拡大して目を通してください。


誰のため?何のため?Webサイトを作り始める前に。
ウェブデザイナーがまとめた、ウェブサイトを作るときに考えたり調査が必要なことが書かれたブログ記事です。
順を追ってみて行くと勉強になると思います。

 

[todo] スケッチ用のノートをつくろう
これからつくるウェブサイトについての資料やスケッチをまとめるためのノートもしくはクリアファイル一冊を準備しましょう。
参考にしたいウェブサイトがあればプリントアウトして貼ったり、なにかアイデアを思いついたら書き込んだりします。
また、何か図形を書き込むときにはなるべく定規を使って書きましょう。

ウェブで参照できるHTML辞書など

ホームページの作り方教室 基礎編
http://www.urban.ne.jp/home/kibochan/html_1.htm
とってもわかりやすく親切なHTML解説サイト
何をしたらいいか迷ったら:基礎から調べましょう

逆引きHTMLリファレンス
http://www.hajimeteno.ne.jp/html32/index.html
HTML辞書サイト
詳しい説明と関連タグのリンクが良い。

とほほのスタイルシート入門
http://www.tohoho-web.com/css/
CSS辞書サイト
一覧性が高い。

スタイルシートリファレンス(目的別)
http://www.htmq.com/style/index.shtml
CSS辞書サイト
目的から探せる。



企画書作成/ヒアリング

どんなウェブマガジンを作るのか 


まずは基本的なことを決めましょう

ターゲット
コンテンツ/掲載するもの
構造/リンクなどの方法や見せ方
視覚的要素/全体的なグラフィックの方向性をスケッチ

来週の内容

引き続き要素と属性の紹介
来週はマガジン実製作編レイアウト編 後半です。
HTMLの辞書/参考書を手に入れておきましょう。
わからない事は早めに質問して下さい。