Download presentation
Presentation is loading. Please wait.
1
HP作成 そろそろまとめ編 担当：TAの人
2
今日のコンテンツ html書いてからCSS書けって言ってきたけど サイトの評価とか
3
なぜCSSがあるの？ ホームページ作成 文字を書く人 絵を描く人 レイアウトを決める人 クライアント やり取り
いつも一緒，仲良しこよしでは 仕事はできない
4
HP会社での役割分業 文字を書く人 絵を描く人 レイアウトを決める人 html ： 文字情報，文章の骨組み 別々のペースで 仕事がしたい
gif, JPG, Flash : Adobe御用達 CSS ： 各情報のレイアウト，デザイン
5
CSSの導入 <head>～</head>の間に以下のようなコードを書く ＋
style.cssファイルを作ってその中にレイアウト情報を書く <head> <meta http-equiv = "Content-Style-Type" content = "text/css" /> <link rel = "stylesheet“ href = "style.css" type = "text/css" /> </head>
6
CSSの書き方 style.css こういうcssファイルを 作って保存する body { margin : 0em;
color : #555555 } h1{ font-size : 1.2em; .news color : #55FFFF; style.css こういうcssファイルを 作って保存する ｛中かっこ｝でくくられている内容が，htmlのその属性タグ内で適用される
7
CSSの適用方法 <body>*****</body>などデフォルトで用意 されているクラスはCSSで書くだけで反映 自分で定義したクラスはclass = “名前”で指定 例えば， <body> <h1> 見出し<h1> <div class = “news” >「ニュースの記事」</div> </body>
8
詳しい使い方 Webを検索して探してください CSSレイアウト実践講座 とほほのスタイルシート入門 他多数のサイト
とほほのスタイルシート入門 他多数のサイト
9
文字化けの対応 <head> <meta http-equiv=“Content-Type” content=“text/html; charset=Shift_JIS“> </head> charsetの中身 Shift_JIS EUC-JP UTF-8 ISO-2022-JP miの上の部分で文字コードを確認しよう
10
評価の目安 サイトのコンテンツが面白い 他の人とは違う趣向で作っている 見た目が凝っている ユーザビリティを配慮している
どのページからもトップへ戻れる 文字の大きさを変えてもサイトの形が崩れない 階層がきちんと分かれている 一般的には２～4層位 文字化けや各種ブラウザへの対応 etc…
11
締め切り間近！ 期日：来週の月曜日（6月23日） PM20:00
条件 : *****/~学籍番号/(index.html) から辿れるページのみ評価 注意 : index.htmlの作り忘れに注意 見た目とソースと両方で評価します 時間厳守
Similar presentations
