Web デザイン基礎坪倉、伊藤日本文理大学

BWD06-01 　～ 1～

Webデザイン基礎坪倉、伊藤日本文理大学

先週今週

–ガイダンス–Webの歴史–HTML基礎

BWD06-01 ～ 2～

シラバス（授業計画）• この科目の目的は、Ｗｅｂデザインに関する基礎的な知識と技術を演習形式で習得することにあります。演習は実際の開発現場と同様に、複数人でチームを組み、作業を分担しながらＷｅｂサイト構築を行なうスタイルを採用します。制作スタイルとして、まずテキストエディタを使ってＨＴＭＬのタグを直接記述する制作方法から出発し、次に、サイトビルダー (Macromedia Dreamweaver」 )を用いた制作方法を紹介します。デザイン手法としては HTML以外にも、CSS,JavaScriptについても取り上げます

• 出席、課題の提出について• 遅刻：授業開始１５分以降（前期は３０分としてた）• 遅刻３回＝欠席１回• 出席、課題

– @learnを利用（次週以降）– 出席登録　各自で登録– 公欠→教員へ

• 成績– 課題の提出状況– 作品のクオリティ– （出席状況を含む）

2 文字書式、画像、ハイパーリン3 フレーム4 概論5 テーブル6 フレーム、フォーム78 概論9 レイヤー10 クラス11 概論12 変数と四則演算13 配列とシステム開発1415制作課題

Dream

weaver

オーサリングツール

調査分析：ナビゲーションスケルトン・サイトマップ

CSS

J avaScript

HTML概論

HTML

内容

1Webサイト概論

BWD06-01 ～ 3～

先人の夢と歴史

• HyperText/HyperMedia

• 　 Vannevar Bush(合衆国大統領の科学顧問 )

　概念の発表

• 記憶、連想について…

個人で使う未来のツールについて考えてみよう。そのツールは、機械化された個人用のファイルや書庫のようなものだろう。このツールには名前が必要だが、とりあえず memexと呼ぶことにする。 memexは、自分の本や記録、情報交換のやりとりなどを保存しておける装置で、機械化されているためにきわめて早く、かつ柔軟に参照できるだろう。これは人の記憶を補助する大規模で詳細な装置である。　　　　　　　　　　　　　　　　　　 As We May Think(1945,Atlantic)

BWD06-01 ～ 4～

先人の夢と歴史

1966 アランケイ　 Dynabook構想　●

1962 ネルソン Hypertext構想 /XANADU ●

情報と

通信の

進化

BWD06-01 ～ 5～先人の夢と歴史

BWD06-01 ～ 6～

ホームページとは？？？• ホームページ【 home page 】

– インターネットの WWW サーバーに接続して最初に見える画面。個人や企業・団体が情報の発信を行う。WWW サーバーが提供する画面の総称として使われることもある。　三省堂提供「デイリー新語辞典」より

– 正式にはウェブページと呼ぶが、日本ではホームページという単語が先に広まった。ホームページはWebサイトの入り口を指す。また入り口のページをトップページと呼ぶ場合がある

– WWW：World Wide Web ネットワーク上の複数の独立した情報を変更することなく統合し，ハイパーテキストとして提供するシステム。CERN（セルン）で開発された。三省堂提供「大辞林第二版」より

– サーバー：コンピューター - ネットワーク上で他のコンピューターにファイルやデータを提供するコンピューター、またそのプログラムをいう。三省堂提供「大辞林第二版」より

wwwサーバー

wwwサーバーインターネット自分のパソコン

ホームページ製品

サポート

会社案内

求人

例：企業のサイト

BWD06-01 ～ 7～

第 1 章　Webの背景と支える人々第 1課　Webサイトの進化（ NACSEまとめ）

wwwサーバー

wwwサーバー

インターネット自分のパソコン

閲覧者

Web ブラウザー

サイト　キーワード　技術

第１世代カタログ静的オンラインカタログ、企業の存在を示す HTTP,HTML

第２世代簡単な対話性

動的 , 対話的アンケート等 CGI

第３世代高機能アプリケーション

ストリーミングマルチメディア、ソフトウエア工学 (開発モ

デル )

Java,ASP,ADSL

第４世代オープンソース , ポータルサイト等 XML,CSS,SMIL

略称に対する正式名称は各自で調べ、コメントを入れる

BWD06-01 ～ 8～

コンピュータシステムとWeb ページの閲覧

Webサイトの閲覧するソフト：　Webブラウザ　　　　　　例： Internet Explorer, NetscapeNavigator, Opera, Firefox, etc

閲覧者はWebブラウザを用いて、　　Webサーバー上のページ (ファイル達 )を　ダウンロード　して閲覧

wwwサーバー

wwwサーバーインターネット自分のパソコン

閲覧者

　 HTMLファイル　　＋　画像ファイル　　＋　 (サウンドファイル )　　＋　 ((ムービーファイル ))

Web ページ :　見た目　 1 ページでも複数のファイルで構成

基本構成

BWD06-01 ～ 9～

Web ページで用いるファイルの基本構成

名称 ( 拡張子 ) 内容利用ソフト

HTML, HTM HTML ソース

エディタ ( メモ帳 ,TeraPad,Jedit 等 )

JPG,GIF 画像ペイント ,Photoshop,Illustrator 等

MID,WAV 音 Sol,Protools,TWE,GarageBand 等

MOV,WM,SWF 動画像 Flash,Premier,FinalCutPro 等

Webサーバー上のファイル：

基本構成　 HTMLファイル　：設計図：ページ上の文字と＋ αの配置

　　＋　画像ファイル　　＋　 (サウンドファイル )　　＋　 ((ムービーファイル ))

拡張子：ファイル名の後ろに「 .( ドット )の後」に表示　

BWD06-01 ～ 10～

Web ページの制作と閲覧• HTMLファイルは、閲覧者とデザイナーでは異なる見方をします

• 通常の閲覧者はWebブラウザでの閲覧• Web制作者は、

– Webブラウザでのページを想像して、 HTML ソースの記述を行なう• HTML ソース　 HTMLで記述されたプログラム　• HTMLファイル　 HTMLで記述されたプログラムをファイルに保存した

モノ。WebブラウザでWeb ページとして閲覧できる

Webブラウザで閲覧テキストエディタで閲覧

Webデザイナー

BWD06-01 ～ 11～

Web ページの作成 (HTML)プログラミングの基礎

• 作る前に…– 環境の確認– 拡張子の表示

• マイコンピュータを開く• フォルダ→フォルダオプション• 「表示」タブ• 詳細設定：「登録されている拡張子は表示しない」のチェックを外す外す

BWD06-01 ～ 12～


1. HTMLの概要• Web ページの設計図• HTML： Hypertext Markup Language)

2. Web ページの作成1. 準備

• Z ドライブにフォルダの作成– 「 hypertext」フォルダ（ Z ドライブの直下に作ってください。）– 上記フォルダに「 bwd」フォルダの作成：講義用フォルダ– 上記フォルダに「日付フォルダ」の作成：（その日の作業、記録用）» ルール（年月日）» 例： 2005 年 4 月 10日→ 20050410» フォルダパス　 Z:\hypertext\ bwd \ 20050410

日付フォルダ：各授業が始まったときに、各自で作っておくこと

2. 利用アプリケーション：（デスクトップにショートカットを出しておくと便利）1. terapad(テキストエディタ：プログラムの作成 )2. Internet Exlorer(Webブラウザー：制作ページの確認 )

BWD06-01 ～ 13～


3. さて作ってみましょう（基本タグ）• 練習１（タグの詳細は後ほど）

1. 注意：タグ (<><>で囲まれる文字で囲まれる文字 )は必ず半角英数半角英数2. 練習１を入力3. z:\hypertext\emm\日付に、ファイル名 ex1.html で保存

• (ファイル名ファイル名は必ず半角英数半角英数 )

4. IEにて閲覧 (開いたページのタイトルを注目 )

• ブラウザーのファイルメニューから開く• ブラウザーのウィンドウに Drag&Drop

• 見れない時のチェック項目• ファイル名→半角英数• プログラム内のタグ→半角英数• タグの入力ミス

<html><head>　 <title>タイトル：練習１</title></head><body>本文</body></html>

練習１　ファイル名　 ex1.html

BWD06-01 ～ 14～


4. 確認してみよう

1. 規則性を見つけてください1. < >のついている文字はブラウザでは表示されていない2. <　 >と </　 >が対になっている3. <title>　から　 </title>　の間が　ページのタイトルに表示されている

4. <body>　から　 </body>　の間がページ内に表示されている5. 一番初めに <html>があって、一番最後に </html>がある

2. 規則性からタグの持つ役割を考えよう

<html><head>　 <title>タイトル：練習１</title></head><body>本文</body></html>


BWD06-01 ～ 15～


3. さて作ってみましょう（基本タグ）1. ex1.html のページとソースを比較しながら、下記のタグの役割を埋める

(< >から </ >で囲まれるタグ )

• <html>　 </html>　– HTMLで記述されたプログラムの範囲を示す

• <head>　 </head>　– ページのヘッダー部分の範囲を示す

• <title>　 </title>　– ページのタイトルを指定する

• <body>　 </body>　– ページの内容物の範囲を示す

• 　– ページ内、コメントの範囲を示す <html>

<head>　 <title>タイトル：練習１</title></head><body>本文</body></html>


BWD06-01 ～ 16～


• <h1>　 </h1>　– 見出しの範囲を示すプレーンテキストの表示について確認<h1>～ <h6>まで、 6 種類のサイズの異なる文字の指定練習２　下のプログラムを入力し、動作を確認しなさい。違いを確認しメモしなさい

<html><head>　 <title>タイトル：練習 2　見出し</title></head><body><h1> 見出し１ </h1><h2> 見出し 2</h2><h3> 見出し 3</h3><h4> 見出し 4</h4><h5> 見出し 5</h5><h6> 見出し 6</h6></body></html>

練習 2　ファイル名　 ex2.html

BWD06-01 ～ 17～


• 準備– ファイルのあるフォルダを開く– ＩＥでファイルを開く

• ファイルパス、ＵＲＬについて（アドレスの読み方）– URL: Uniform Resource Locator

フォルダパス（ディレクトリパス）

ファイルパス

URL

Webブラウザ： Internet Explorer

Webブラウザ： Internet Explorer

フォルダのある場所

ファイルのある場所

インターネット上の場所

BWD06-01 ～ 18～


4. ネットワーク構成と URLについて• nbuでは、 Z:\hypertext以下が個人のホームページ用領域として設定

• URL: http://www.nbu.ac.jp/ ~ ログインＩＤ /ファイル名– 例）– 学籍番号　 0124001– ログインＩＤ　 ss124001– ファイルパス　 Z:\hypertext\bwd\20050410\index.html

– URL　 http://www.nbu.ac.jp/ ~s124001/bwd/20050410/index.html

• 練習 5のWeb ページの URLはどうなりますか？• ファイルパスからＵＲＬに変換してください• 　 URL http://

\\→→//


ファイルパス

URL

BWD06-01 ～ 19～


• コツ– 全画面表示しない

• （沢山のウィンドウを一度に使う）• フォルダ、アイコンのウィンドウ• エディタ画面• Ｗｅｂブラウザの画面• （不要なウィンドウ、メニュー、ボタンは片付ける）

– 表示の確認に他のコンピュータも使う• 可能ならもう一台• 友達に確認してもらう

– ＵＲＬのチェック– 他の環境でも表示できるか確認– （WebDesignerは他のブラウザ、 OSでも表示を確認する）

BWD06-01 ～ 20～

課題

– 提出課題– 紙にて練習１、練習２のＵＲＬ、ファイルパス等、を提出

– 次回以降は@learnを利用

学籍番号：名前：日付：

練習１

ユーザーＩＤ

ファイル名


ファイルパス

ＵＲＬ

練習２

ユーザーＩＤ

ファイル名


ファイルパス

ＵＲＬ

Web 　 1デザイン基礎第回課題

※ 　：この紙は次回、返却します

Documents

Web デザイン基礎 坪倉、伊藤 日本文理大学

Web デザイン基礎坪倉、伊藤日本文理大学