BWD06-01 ～ 1 ～ Web デザイン基礎 坪倉、伊藤 日本文理大学 先週 今週 – ガイダンス –Web の歴史 –HTML 基礎.

Presentation on theme: "BWD06-01 ～ 1 ～ Web デザイン基礎 坪倉、伊藤 日本文理大学 先週 今週 – ガイダンス –Web の歴史 –HTML 基礎."— Presentation transcript:

1 BWD06-01 ～ 1 ～ Web デザイン基礎 坪倉、伊藤 日本文理大学 先週 今週 – ガイダンス –Web の歴史 –HTML 基礎

2 BWD06-01 ～ 2 ～ シラバス（授業計画） この科目の目的は、Ｗｅｂデザインに関する基礎的な知識と技術を演習形式で習得することにあ ります。演習は実際の開発現場と同様に、複数人でチームを組み、作業を分担しながらＷｅｂサ イト構築を行なうスタイルを採用します。制作スタイルとして、まずテキストエディタを使って ＨＴＭＬのタグを直接記述する制作方法から出発し、次に、サイトビルダー (Macromedia Dreamweaver 」 ) を用いた制作方法を紹介します。デザイン手法としては HTML 以外にも、 CSS,JavaScript についても取り上げます 出席、課題の提出について 遅刻：授業開始１５分以降（前期は３０分としてた） 遅刻３回＝欠席１回 出席、課題 –@learn を利用（次週以降） – 出席登録 各自で登録 – 公欠 → 教員へ 成績 – 課題の提出状況 – 作品のクオリティ – （出席状況を含む）

3 BWD06-01 ～ 3 ～ 先人の夢と歴史 HyperText/HyperMedia Vannevar Bush ( 合衆国大統領の科学顧問 ) 概念の発表 記憶、連想について … 個人で使う未来のツールについて考えてみよう。そのツールは、 機械化された個人用のファイルや書庫のようなものだろう。この ツールには名前が必要だが、とりあえず memex と呼ぶことにする。 memex は、自分の本や記録、情報交換のやりとりなどを保存して おける装置で、機械化されているためにきわめて早く、かつ柔軟 に参照できるだろう。これは人の記憶を補助する大規模で詳細な 装置である。 As We May Think(1945,Atlantic)

4 BWD06-01 ～ 4 ～ 先人の夢と歴史 1966 アランケイ Dynabook 構想 ● 1962 ネルソン Hypertext 構想 /XANADU ● 情報と通信の進化

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

6 BWD06-01 ～ 6 ～ ホームページとは？？？ ホームページ【 home page 】 – インターネットの WWW サーバーに接続して最初に見える画面。個人 や企業・団体が情報の発信を行う。 WWW サーバーが提供する画面の 総称として使われることもある。 三省堂提供「デイリー 新語辞典」より – 正式にはウェブページと呼ぶが、日本ではホームページという単語が 先に広まった。ホームページは Web サイトの入り口を指す。また入り 口のページをトップページと呼ぶ場合がある –WWW ： World Wide Web ネットワーク上の複数の独立した情報を変更 することなく統合し，ハイパーテキストとして提供するシステム。 CERN （セルン）で開発された。 三省堂提供「大辞林 第二版」より – サーバー：コンピューター - ネットワーク上で他のコンピューターに ファイルやデータを提供するコンピューター、またそのプログラムを いう。三省堂提供「大辞林 第二版」より www サーバー インターネット 自分のパソコン ホームページ 製品 サポート 会社案内 求人 例：企業のサイ ト

7 BWD06-01 ～ 7 ～ 第 1 章 Web の背景と支える人々 第 1 課 Web サイトの進化（ NACSE まとめ） www サーバー インターネット 自分のパソコン 閲覧者 Web ブラウ ザー サイト キーワード 技術 第１世代カタログ静的 オンラインカタログ、 企業の存在を示す HTTP,HTM L 第２世代 簡単な対 話性 動的, 対話 的 アンケート等 CGI 第３世代 高機能アプリケーショ ン ストリーミングマル チメディア、ソフト ウエア工学 ( 開発モデ ル ) Java,ASP,A DSL 第４世代オープンソース, ポータルサイト等 XML,CSS,SMIL 略称に対する正式名称 は各自で調べ、コメ ントを入れる

8 BWD06-01 ～ 8 ～ コンピュータシステムと Web ページの閲覧 Web サイトの閲覧するソフト： Web ブラウザ 例： Internet Explorer, NetscapeNavigator, Opera, Firefox, etc 閲覧者は Web ブラウザを用いて、 Web サーバー上のページ ( ファイル達 ) を ダウンロード して 閲覧 www サーバー インターネット 自分のパソコン 閲覧者 HTML ファイル ＋ 画像ファイル ＋ ( サウンドファイル ) ＋ (( ムービーファイル )) Web ページ : 見た目 1 ページでも複数のファイルで構成 基本構成

9 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 ファイル ：設計図：ページ上の文字と＋ α の配置 ＋ 画像ファイル ＋ ( サウンドファイル ) ＋ (( ムービーファイル )) 拡張子：ファイル名の後ろに「.( ドット ) の後」に表示

10 BWD06-01 ～ 10 ～ Web ページの制作と閲覧 HTML ファイルは、閲覧者とデザイナーでは異なる見方をし ます 通常の閲覧者は Web ブラウザでの閲覧 Web 制作者は、 –Web ブラウザでのページを想像して、 HTML ソースの記述を行なう HTML ソース HTML で記述されたプログラム HTML ファイル HTML で記述されたプログラムをファイルに保存した モノ。 Web ブラウザで Web ページとして閲覧できる Web ブラウザで閲覧 テキストエディタで閲覧 Web デザイナー

11 BWD06-01 ～ 11 ～ Web ページの作成 (HTML) プログラミングの基礎 作る前に … – 環境の確認 – 拡張子の表示 マイコンピュータを開く フォルダ → フォルダオプション 「表示」タブ 外す 詳細設定：「登録されている拡張子は表示しない」のチェッ クを外す

12 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 ブラウザー：制作ページの確認 )

13 BWD06-01 ～ 13 ～ Web ページの作成 (HTML) プログラミングの基礎 3. さて作ってみましょう （基本タグ） 練習１ （タグの詳細は後ほど） <> で囲まれる文字半角英数 1. 注意：タグ (<> で囲まれる文字 ) は必ず半角英数 2. 練習１を入力 3.z:\hypertext\emm\ 日付に、ファイル名 ex1.html で保存 ファイル名半角英数( ファイル名は必ず半角英数 ) 4.IE にて閲覧 ( 開いたページのタイトルを注目 ) ブラウザーのファイルメニューから開く ブラウザーのウィンドウに Drag&Drop 見れない時のチェック項目 ファイル名 → 半角英数 プログラム内のタグ → 半角英数 タグの入力ミス タイトル：練習１ 本文 練習１ ファイル名 ex1.html

14 BWD06-01 ～ 14 ～ Web ページの作成 (HTML) プログラミングの基礎 4. 確認してみよう 1. 規則性を見つけてください 1. のついている文字はブラウザでは表示されていない 2. と が対になっている 3. から の間が ページのタイトルに表示されてい る 4. から の間がページ内に表示されている 5. 一番初めに があって、一番最後に がある 2. 規則性からタグの持つ役割を考えよう タイトル：練習１ 本文 練習１ ファイル名 ex1.html

15 BWD06-01 ～ 15 ～ Web ページの作成 (HTML) プログラミングの基礎 3. さて作ってみましょう （基本タグ） 1.ex1.html のページとソースを比較しながら、下記のタグの役割を埋める ( から で囲まれるタグ ) –HTML で記述されたプログラムの範囲を示す – ページのヘッダー部分の範囲を示す – ページのタイトルを指定する – ページの内容物の範囲を示す – ページ内、コメントの範囲を示す タイトル：練習１ 本文 練習１ ファイル名 ex1.html

16 BWD06-01 ～ 16 ～ Web ページの作成 (HTML) プログラミングの基礎 – 見出しの範囲を示す プレーンテキストの表示について確認 ～ まで、 6 種類のサイズの異なる文字の指定 練習２ 下のプログラムを入力し、動作を確認しなさい。 違いを確認しメモしなさい タイトル：練習 2 見出し 見出し１ 見出し 2 見出し 3 見出し 4 見出し 5 見出し 6 練習 2 ファイル名 ex2.html

17 BWD06-01 ～ 17 ～ Web ページの作成 (HTML) プログラミングの基礎 準備 – ファイルのあるフォルダを開く – ＩＥでファイルを開く ファイルパス、ＵＲＬについて（アドレスの読み方） –URL: Uniform Resource Locator フォルダパス （ディレクトリ パス） ファイルパ ス URL Web ブラウザ： Internet Explorer フォルダのある場 所 ファイルのある場 所 インターネット上の 場所

18 BWD06-01 ～ 18 ～ Web ページの作成 (HTML) プログラミングの基礎 4. ネットワーク構成と URL について nbu では、 Z:\hypertext 以下が個人のホームページ用領域として設定 URL: http://www.nbu.ac.jp / ~ ログインＩＤ / ファイル名 – 例） – 学籍番号 0124001 s – ログインＩＤ s124001 – ファイルパス Z:\hypertext\bwd\20050410\index.html –URL http://www.nbu.ac.jp/ ~ s124001/bwd/20050410/index.html 練習 5 の Web ページの URL はどうなりますか？ ファイルパスからＵＲＬに変換してください URL http:// \→/\→/\→/\→/ フォルダパス （ディレクトリ パス） ファイルパ ス URL

19 BWD06-01 ～ 19 ～ Web ページの作成 (HTML) プログラミングの基礎 コツ – 全画面表示しない （沢山のウィンドウを一度に使う） フォルダ、アイコンのウィンドウ エディタ画面 Ｗｅｂブラウザの画面 （不要なウィンドウ、メニュー、ボタンは片付ける） – 表示の確認に他のコンピュータも使う 可能ならもう一台 友達に確認してもらう – ＵＲＬのチェック – 他の環境でも表示できるか確認 – （ WebDesigner は他のブラウザ、 OS でも表示を確認する）

20 BWD06-01 ～ 20 ～ 課題 – 提出課題 – 紙にて練習１、練習２のＵＲＬ、ファイルパス等、を提出 – 次回以降は @learn を利用