1 / 19

WEB デザイン基礎実験

NC-2　 情報通信基礎実験. 担当：清水，田代 副手：浦辺，石井. （ 1 日目）. WEB デザイン基礎実験. Web デザイン基礎実験：主題. Web ページにおける画面デザインの考え方および技術を実践する 今後利用する機会の多い XML を理解し，習得する. 実験日程および内容. 9/14 （ 1 日目）： HTML/CSS 演習 9/28 （ 2 日目）： XML/XSLT 演習 10/5 （ 3 日目） ： レポート作成日 10/12 （ 4 日目）：レポート確認日＆再提出 10/9 （金） 23:59　 レポート提出 〆 切.

kiara
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. NC-2　情報通信基礎実験 担当：清水，田代 副手：浦辺，石井 （1日目） WEBデザイン基礎実験

  2. Webデザイン基礎実験：主題 • Webページにおける画面デザインの考え方および技術を実践する • 今後利用する機会の多いXMLを理解し，習得する

  3. 実験日程および内容 • 9/14（1日目）：HTML/CSS演習 • 9/28（2日目）：XML/XSLT演習 • 10/5（3日目）：レポート作成日 • 10/12（4日目）：レポート確認日＆再提出 • 10/9（金） 23:59　レポート提出〆切

  4. 10/12　体育の日 平日扱い 出席必須 要注意

  5. 実験の準備 • Webデザイン基礎実験の1日目：配布資料のページから『シンプルな自己紹介（HTML）』をDownloadする • このフォーマットに沿って『自己紹介』を作成 • 各々の『自己紹介』をコンテンツとして，　HTML，CSS，XML，XLSTの作成および演習を進める

  6. HTML復習（演習） • HTML文法のおさらい • Webデザイン基礎実験ページよりHTML入門 • http://www.mlab.im.dendai.ac.jp/ic2/webdesign/web/html/

  7. HTML4.0(1997/12) XHTML1.0(2000/2) HTML4.01(1999/12) XHTML1.0第2版　　(2002/8) HTML2.x(1997/1) HTML2.0(1995/11) XHTML1.1(2001/5) Transitional Frameset Strict Transitional Frameset Strict HTML3.2(1997/1) HTMLについて • HTMLをXMLで再定義し，XHTMLへ ※現在はまだ，HTML4.01が多い

  8. HTMLについて • シンプルな自己紹介HTMLを作成する • ファイル名は『学籍番号(半角数字).html』 • 利用タグ • <!DOCTYPE HTML PUBLIC〜 • <HTML><HEAD><TITLE><BODY> • <H1><DL><DT><DD><LI><A HREF〜 • 余力のある人は，”名は体を表す”を<TABLE>タグで表示する

  9. HTMLについて • HTMLは文書を構造化するためのもの • 文書の構造化によるメリット • 情報が抜き出しやすい • 情報を要約しやすい • コンピュータに意味を伝える（検索エンジンなど） • HTMLは見え方の表現も可能 • 構造化以外の用途(TABLEタグによるレイアウト) • 例：Yahoo!のページなど

  10. Webページ CSSについて • スタイルシートは，文書の見え方を記述する枠組み HTML文書構造 CSS見え方

  11. CSS演習1　まずはやってみよう • シンプルな自己紹介ページの背景色を『緑色』に変更する • HTMLファイルの作成 • 学籍番号.html　→　学籍番号_CSS1.html コピーし，上記の様に名前を書き換えて作成する • HEADタグ内にCSSファイルへのリンクを追記する <LINK REL=”SYTLESHEET” TYPE=”text/css”　HREF=”css/CSS1.css”>

  12. CSS演習1 • CSSファイルの作成 • ファイルの作成 （cssフォルダの下にCSS1.cssファイルを作成） body{ background-color: green; }

  13. CSS演習1 • 学籍番号_CSS1.htmlをブラウザでリロード • 背景が緑色に変更されているか確認 • 自分の好みの背景色に変更 • 先程作成したシンプルな自己紹介ページを段階に分けて装飾していく • CSSファイルは，上書きしていくイメージ！

  14. CSSについて • CSSの文法：CSSの基本構造 • http://www.mlab.im.dendai.ac.jp/ic2/webdesign/web/css/ • ボックスモデル • Webデザイン基礎実験の1日目：配布資料のページ『ボックスモデルのサンプル（HTML&CSS）』をDownloadして動かしてみる

  15. CSS演習2　飾ってみる • シンプルな自己紹介ページを飾ってみる • HTMLファイルの作成 • 学籍番号.html　→　学籍番号_CSS2.html コピーし，上記の用に名前を書き換えて作成する • HEADタグ内にCSSファイルへのリンクを追記する <LINK REL=”SYTLESHEET” TYPE=”text/css”　HREF=”css/CSS2.css”>

  16. CSS演習2 • CSSファイルの作成 • ファイルの作成 （cssフォルダの下にCSS2.cssファイルを作成） • 一つ一つ定義していこう

  17. CSSについて • CSS1勧告：1996年12月 • （CSS2：1998年5月，CSS2.1：2004年2月） • CSS1から9年近くかかり，ブラウザのサポートが充実（IE5, NN6以降） • ブラウザ独自の拡張タグにより，既に見え方を整えることができていた（NNのFontタグなど） • ブラウザによりサポートレベルが異なった • 労力がかかる • 無難に作ると垢抜けない

  18. CSS演習3　段組み（応用） • 自己紹介ページを段組み表示 • HTMLファイルの作成 • 学籍番号.html　→　学籍番号_CSS3.html コピーし，上記の用に名前を書き換えて作成する • HEADタグ内にCSSファイルへのリンクを追記する • 段組構成（回り込み）の設定 <LINK REL=”SYTLESHEET” TYPE=”text/css”　HREF=”css/CSS3.css”>

  19. CSS演習3 • CSSファイルの作成 • ファイルの作成 （cssフォルダの下にCSS3.cssファイルを作成） • Floatを使った段組み • 余力のある人は『学籍番号_CSS4.html』および『CSS4.css』を作成し，さらに飾ってみる

More Related