Comments
Description
Transcript
講義資料
2003 06 18 ToC 情報処理（12）クラス 第9回の巻 •Ｔｕｔｔ •バックアップの仕方 •ＨＴＭＬの復習 •スタイルシートの復習 •スタイルシートの外部リンク •ソースを見る方法 •画像を貼る方法 Masayuki Iwai [email protected] •読みやすいＨＴＭＬ – 構造化 1 復習：編集 2 復習：ファイルのバックアップ 編集のしかた 人間は必ず間違える動物です。最悪の時代に備 えるためファイルのバックアップの方法を知りま しょう。 [1]カレントディレクトリを移します。 [2]バックアップ用のディレクトリを作成します。 [3]作成したディレクトリを他人から見えないように パーミッションをかけます。 [4]ファイルの名前を変えてコピーします。 % cd public_html/[dirname] public_html/[dirname] %emacs [filename] 絶対パスでは /home/[login_name]/public_html/[dirname]/[filename /home/[login_name]/public_html/[dirname]/[filename]] 相対パスでは public_html/[dirname]/[filename] public_html/[dirname]/[filename] ＷＥＢでは http://web.sfc.keio.ac.jp/~[login_name]/[dirname]/[filename http://web.sfc.keio.ac.jp/~[login_name]/[dirname]/[filename]] 問題： index.htmlをバックアップしましょう。 3 答え 4 実際ファイルが変になたら？ • CTRCTR-_(コントロールアンダーバー)でundoできるか [1]% cd public_html [2]%mkdir [2]%mkdir backupfiles …..mkdir =引数のファイル名のディレクトリを作成 ..mkdir= • Ｓａｖｅしないで保存できるか するコマンドです。 • ~ファイルとして、一個前の保存にもどれる。index.html~ index.html~ [3]%chmod [3]%chmod ogog-rwx backupfiles …..o=other g=group …....-rwx= rwx=読み(ｒ)書き(w)実行(x)を不許可にする [4]%cp index.html backupfiles/20030618index.html …..cp [コピー元ファイル] [コピー先ファイル] などがないか確認 %more index.html~ index.html~ • それでもだめなら %cp backupfiles/20030618index.html ./index.html ./index.html 5 6 1 復習：ＨＴＭＬの構造 HTMLバージョン <!DOCTYPE HTML PUBLIC ""-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> 開始タグ ヘッダー開始 ヘッダー 日本語文字コード指定 <meta httphttp-equiv="Contentequiv="Content-Type" content="text/html; charset=iso charset=iso--20222022-jp"> <meta http”> http-equiv=“ equiv=“ContentContent-StyleStyle-Type” Type” contnt= contnt=“text/css text/css” スタイルシートを使う <title>My Test Home Page</title> タイトル </head> ヘッダー終了 <body> 文章始まり ….ここにいろいろ書くよ。 </body> 文章終わり </html> 終了タグ 内容 HTML 復習：リンク %emacs index.html index.htmlを編集し <body> ….. <a href= href=“plan.html” plan.html”>企画書へのリンク</a> …… </body> 7 8 ヘッダーに定義 class <html> <head> … <style type="text/css "> type="text/css"> p { color: black; fontfont-size: 16pt; } p.note { color: red; backgroundbackground-color: gray; fontfont-size: 10pt; } </style> …. </head> <body> … <h1>class属性</h1> <p>これは普通の文章</p> <p class="note">註釈</p> …. </body> </html> <head> <style type="text/css "> h1 {color: red; texttype="text/css"> textdecoration: underline; textalign: center} text </style> </head> <body> <h1> H1をスタイルシートで赤くした</h1> </body> 9 10 文字自体に関する属性 色に関する属性 color fontfont-size – color: blue – color: #0000FF 文字の大きさ – font-size:12pt fontfont-weight 文字の太さ background – font-weight: bold、normal等 fontfont-style 背景色(文字や画面の背景) – background-color: red – background-color: #FF0000 文字の傾き – font-style: italic、oblique、normal等 texttext-decoration 前景色(文字の色) 文字の飾り（下線など） – font-decoration: underline、overline、line-through等 texttext-align 文字の水平位置 赤の濃さ – text-align: leftかrightかcenter 緑の濃さ 青の濃さ それぞれ16進数で指定します。 11 16進数では、一桁あたり16個の数 を使います。ですが、世の中には 10個の数（0∼9）しか文字で表現 できないので、残りの6個にA∼F を使います。例えば16進数では、 十進数の10は A 十進数の15は F です。で、 十進数の16が 10 です。 十進数の31は 1F です。 12 2 自分で考えてつくって見ましょう 答え http://www.ht.sfc.keio.ac.jp/~tailor/classes/2003ipls/ppt/9/try.html http://www.ht.sfc.keio.ac.jp/~tailor/classes/2003ipls/ppt/9/try.html を開きます。 MozillaのメニューからＶｉｅｗSourceを選択します。 ヒント text-decoration:line-through 13 14 cssファイル 定義の仕方 HTMLファイルとは別に共通で指定したいスタイル だけをまとめて書いた，CSSファイルを作り保存し ておきます． • タグに直接定義する方法 – あまり使わないほうがよい • ヘッダーに定義する方法 %emacs pagestyle.css – 中規模サイト開発に適しています。 編集して • 別ファイルに定義する方法 span.blue {color: blue} div.center {text{text-align: center} – 大規模サイト開発に適しています。 を書きます 15 外部cssファイルの読み込みこみ方 16 今週の目標 <head> … <link rel=" stylesheet"" href="./ pagestyle.css"" type="text/css "> rel="stylesheet href="./pagestyle.css type="text/css"> … </head> <body> <div class="center"> <p>この段落は中央に寄っている．</p> <table border="1"> <tr ><td>この表も中央に寄っている．</td></tr > </table> <tr><td> </td></tr> </div> <p>ここは普通の文章 <span class=“ class=“blue” blue”>ここだけ青い文字</span>そしてもとに戻る． </p> ディレクトリを使ったリンク構造をつくることができ る ナビゲーションを考慮したサイト構造を設計するこ とができる アクセシビリティのガイドラインに従った際と設計を 行うことができる </body> 17 18 3 WWWページの全体設計 サイト内のディレクトリ構成 •グループ間／ページ間の関係を図にまとめてみる •必要なリンクを線でつないでみる •物理的なサイトの管理構造を考える •サイトは複数のHTMLファイルや画像ファイルから成る •ディレクトリ一つに複数のファイルが固まるとゴチャゴチャする •HTMLページや画像を、整理しやすいように適当にディレクトリを切る •グループを1ディレクトリにまとめる •複数の画像を1つのディレクトリにまとめる 19 Webページに画像を表示 全体設計で重要なこと 内容のグループ分け ナビゲーション <img src="image/ photo.png"" alt="特別教室の風景"> src="image/photo.png – 自分が一番伝えたい情報に、読み手をうまくいざな う。 – 読み手が迷子にならないように工夫する。 – 他のページに行きやすいように工夫する。 – http://www.ht.sfc.keio.ac.jp/~tailor/treasure/nothing/ – http://www.ht.sfc.keio.ac.jp/~tailor/treasure/withbar/ ナビゲーションバー 20 表示したい画像のURL 画像を表示できないブラウザを 使っている人のための解説 例：/home/t03000aa/public_html/me.jpg を表示 <img src=" me.jpg"" alt="私です。"> src="me.jpg 例：/home/t03000aa/public_html/image/me.jpg を表示 <img src="image/ me.jpg"" alt="私です。"> src="image/me.jpg 21 22 第9回課題（締め切り6月24日火AM9:00） Webサイトの作成と著作権の注意 テキストの第9回の最後のページの練習問題を行 いなさい。 ファイル名はkadai9.htmlとしなさい。 著作権とは、 著作物: 文学・音楽・美術などの分野で、思想や感情で表現した創作物 創作物 - 小説・音楽・絵画・映画・写真・Webページ... 官公庁の統計データや、純粋に事実のみを伝える報道は著作物ではない 著作物は、他の人が勝手に 使ってはいけない 著作物は、他の人が勝手に使ってはいけない ただし、 – 著作権の有効期限は50年 – 正当な引用の範囲内であればかまわない – 著作者に了解を得た上であればかまわない • TO:ipl TO:[email protected] CC:自分のCNSのメールアドレス Subject:第9回課題 -------------------------------------- 画像ファイル、音楽ファイルなどを無断利用しない 自由に利用して良いと明記してある素材集サイトなどを利用する 関連するさまざまな権利 – 肖像権: 誰かの写真を本人の許諾なく公開？ – 商標権: 商品やサービスを表すマークを勝手に利用？ – キャラクタ(権?): あるアニメキャラの自作イラストを勝手に公開？ 学籍番号： 氏名： URL: 23 24 4