web デザイン基礎 坪倉、伊藤 日本文理大学
Post on 05-Jan-2016
50 Views
Preview:
DESCRIPTION
TRANSCRIPT
BWD06-01 ~ 1~
Webデザイン基礎坪倉、伊藤日本文理大学
先週今週
–ガイダンス–Webの歴史–HTML基礎
BWD06-01 ~ 2~
シラバス(授業計画)• この科目の目的は、Webデザインに関する基礎的な知識と技術を演習形式で習得することにあります。演習は実際の開発現場と同様に、複数人でチームを組み、作業を分担しながらWebサイト構築を行なうスタイルを採用します。制作スタイルとして、まずテキストエディタを使ってHTMLのタグを直接記述する制作方法から出発し、次に、サイトビルダー (Macromedia Dreamweaver」 )を用いた制作方法を紹介します。デザイン手法としては HTML以外にも、CSS,JavaScriptについても取り上げます
• 出席、課題の提出について• 遅刻:授業開始15分以降(前期は30分としてた)• 遅刻3回=欠席1回• 出席、課題
– @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 ブラウザー
サイト キーワード 技術
第1世代 カタログ 静的 オンラインカタログ、企業の存在を示す HTTP,HTML
第2世代 簡単な対話性
動的 , 対話的 アンケート等 CGI
第3世代 高機能アプリケーション
ストリーミングマルチメディア、ソフトウエア工学 (開発モ
デル )
Java,ASP,ADSL
第4世代 オープンソース , ポータルサイト等 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~
Web ページの作成 (HTML)プログラミングの基礎
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~
Web ページの作成 (HTML)プログラミングの基礎
3. さて作ってみましょう(基本タグ)• 練習1(タグの詳細は後ほど)
1. 注意:タグ (<><>で囲まれる文字で囲まれる文字 )は必ず半角英数半角英数2. 練習1を入力3. z:\hypertext\emm\日付に、ファイル名 ex1.html で保存
• (ファイル名ファイル名は必ず半角英数半角英数 )
4. IEにて閲覧 (開いたページのタイトルを注目 )
• ブラウザーのファイルメニューから開く• ブラウザーのウィンドウに Drag&Drop
• 見れない時のチェック項目• ファイル名→半角英数• プログラム内のタグ→半角英数• タグの入力ミス
<html><head> <title>タイトル:練習1</title></head><body>本文</body></html>
練習1 ファイル名 ex1.html
BWD06-01 ~ 14~
Web ページの作成 (HTML)プログラミングの基礎
4. 確認してみよう
1. 規則性を見つけてください1. < >のついている文字はブラウザでは表示されていない2. < >と </ >が対になっている3. <title> から </title> の間が ページのタイトルに表示されている
4. <body> から </body> の間がページ内に表示されている5. 一番初めに <html>があって、一番最後に </html>がある
2. 規則性からタグの持つ役割を考えよう
<html><head> <title>タイトル:練習1</title></head><body>本文</body></html>
練習1 ファイル名 ex1.html
BWD06-01 ~ 15~
Web ページの作成 (HTML)プログラミングの基礎
3. さて作ってみましょう(基本タグ)1. ex1.html のページとソースを比較しながら、下記のタグの役割を埋める
(< >から </ >で囲まれるタグ )
• <html> </html> – HTMLで記述されたプログラムの範囲を示す
• <head> </head> – ページのヘッダー部分の範囲を示す
• <title> </title> – ページのタイトルを指定する
• <body> </body> – ページの内容物の範囲を示す
• <!-- --> – ページ内、コメントの範囲を示す <html>
<head> <title>タイトル:練習1</title></head><body>本文</body></html>
練習1 ファイル名 ex1.html
BWD06-01 ~ 16~
Web ページの作成 (HTML)プログラミングの基礎
• <h1> </h1> – 見出しの範囲を示すプレーンテキストの表示について確認<h1>~ <h6>まで、 6 種類のサイズの異なる文字の指定練習2 下のプログラムを入力し、動作を確認しなさい。違いを確認しメモしなさい
<html><head> <title>タイトル:練習 2 見出し</title></head><body><h1> 見出し1 </h1><h2> 見出し 2</h2><h3> 見出し 3</h3><h4> 見出し 4</h4><h5> 見出し 5</h5><h6> 見出し 6</h6></body></html>
練習 2 ファイル名 ex2.html
BWD06-01 ~ 17~
Web ページの作成 (HTML)プログラミングの基礎
• 準備– ファイルのあるフォルダを開く– IEでファイルを開く
• ファイルパス、URLについて(アドレスの読み方)– URL: Uniform Resource Locator
フォルダパス(ディレクトリパス)
ファイルパス
URL
Webブラウザ: Internet Explorer
Webブラウザ: Internet Explorer
フォルダのある場所
ファイルのある場所
インターネット上の場所
BWD06-01 ~ 18~
Web ページの作成 (HTML)プログラミングの基礎
4. ネットワーク構成と URLについて• nbuでは、 Z:\hypertext以下が個人のホームページ用領域として設定
• URL: http://www.nbu.ac.jp/ ~ ログインID /ファイル名– 例)– 学籍番号 0124001– ログインID ss124001– ファイルパス Z:\hypertext\bwd\20050410\index.html
– URL http://www.nbu.ac.jp/ ~s124001/bwd/20050410/index.html
• 練習 5のWeb ページの URLはどうなりますか?• ファイルパスからURLに変換してください• URL http://
\\→→//
フォルダパス(ディレクトリパス)
ファイルパス
URL
BWD06-01 ~ 19~
Web ページの作成 (HTML)プログラミングの基礎
• コツ– 全画面表示しない
• (沢山のウィンドウを一度に使う)• フォルダ、アイコンのウィンドウ• エディタ画面• Webブラウザの画面• (不要なウィンドウ、メニュー、ボタンは片付ける)
– 表示の確認に他のコンピュータも使う• 可能ならもう一台• 友達に確認してもらう
– URLのチェック– 他の環境でも表示できるか確認– (WebDesignerは他のブラウザ、 OSでも表示を確認する)
BWD06-01 ~ 20~
課題
– 提出課題– 紙にて練習1、練習2のURL、ファイルパス等、を提出
– 次回以降は@learnを利用
学籍番号:名前:日付:
練習1
ユーザーID
ファイル名
フォルダパス(ディレクトリパス)
ファイルパス
URL
練習2
ユーザーID
ファイル名
フォルダパス(ディレクトリパス)
ファイルパス
URL
Web 1デザイン基礎 第 回課題
※ :この紙は次回、返却します
top related