1 / 20

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

Web デザイン基礎 坪倉、伊藤 日本文理大学. 先週 今週 ガイダンス Web の歴史 HTML 基礎. シラバス（授業計画）.

ajay
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

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

  5. 先人の夢と歴史

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

  7. Webブラウザー 自分のパソコン インターネット 閲覧者 wwwサーバー wwwサーバー 第1章　Webの背景と支える人々第1課　Webサイトの進化（NACSEまとめ） 略称に対する正式名称は各自で調べ、コメントを入れる

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

  9. Webページで用いるファイルの基本構成 基本構成 HTMLファイル　：設計図：ページ上の文字と＋αの配置 　　＋　画像ファイル　　＋　(サウンドファイル)　　＋　((ムービーファイル)) Webサーバー上のファイル： 拡張子：ファイル名の後ろに「.(ドット)の後」に表示　

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

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

  12. Webページの作成(HTML)プログラミングの基礎 • HTMLの概要 • Webページの設計図 • HTML： Hypertext Markup Language) • Webページの作成 • 準備 • Zドライブにフォルダの作成 • 「hypertext」フォルダ（Zドライブの直下に作ってください。） • 上記フォルダに「bwd」フォルダの作成：講義用フォルダ • 上記フォルダに「日付フォルダ」の作成：（その日の作業、記録用） • ルール（年月日） • 例：2005年4月10日→20050410 • フォルダパス　Z:\hypertext\ bwd \ 20050410 日付フォルダ：各授業が始まったときに、各自で作っておくこと • 利用アプリケーション：（デスクトップにショートカットを出しておくと便利） • terapad(テキストエディタ：プログラムの作成) • Internet Exlorer(Webブラウザー：制作ページの確認)

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

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

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

  16. <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 Webページの作成(HTML)プログラミングの基礎 • <h1></h1> • 見出しの範囲を示す • プレーンテキストの表示について確認 • <h1>～<h6>まで、6種類のサイズの異なる文字の指定 • 練習２　下のプログラムを入力し、動作を確認しなさい。 • 違いを確認しメモしなさい

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

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

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

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

More Related