観光情報論　 2018年6月5日第9講　ブリストル・スタイルシート

Size: px

Start display at page:

Download "観光情報論　 2018年6月5日第9講　ブリストル・スタイルシート"

えりかあわび
4 years ago
Views:

1 観光情報論 2019 年 6 月 11 日第 9 講スタイルシート講義 : 期末プロジェクトグループ作成確認 CSS で civicpride.htm を編集自己紹介のファイル 1

2 スタイルシート (CSS) CSS とは (Cascading Style Sheets) 本来ホームページにデザインを加える機能のすべてスタイルシートとは CSS のことを指す CSS を使うと参考書できるホームページ HTML& CSS 入門 Windows 10/8.1/7 Page 102 にあるようにホームページの体裁が変わる 2

3 civicpride.htm を開いて 3

4 まず civicpride.htm を開くスタイルシート (CSS) CSS で書くことを宣言する <!DOCTYPE html> <html> <head> <meta charset= Shift_JIS > <title> シビックプライドのまとめ ( 自分の名前 ) 2019 </title> <style type="text/css"> スタイルシートはこの 2 つのタグの間に書いていく </style> </head> <body> 半角英数で書く <h1> シビックプライドのまとめ ( 自分の名前 ) </h1> 4

5 <!DOCTYPE html> <html> スタイルシート (CSS) 背景の色を変えるには <head> <charset= Shift_JIS > <title> シビックプライドのまとめ ( 自分の名前 ) 2019 </title> <style type="text/css"> Body { background: lightyellow; } h1 { background: green; } </style> インターネットエクスプローラ上で更新ボタン </head> をクリックして出来上がりを確認してください <body> はスペースという意味 5

6 スタイルシート (CSS) 文字の色を変えるには <!DOCTYPE html> <html> <head> <meta meta charset= Shift_JIS > <title> シビックプライドのまとめ ( 自分の名前 ) 2019</title> <style type="text/css"> Body { background: lightyellow; color: black; } h1 { background: green; color: white; } </style> </head> <body> またインターネットエクスプローラ上で更新ボタンをクリックして出来上がりを確認してくださいはスペース 6

7 <!DOCTYPE html> <html> スタイルシート (CSS) 見出し文字の大きさを変える <head> <meta charset= Shift_JIS > <title> シビックプライドのまとめ ( 自分の名前 ) 2019 </title> <style type="text/css"> body { background: lightyellow; color: black; } h1 { background: green; color: white; font-size: 1.5em; } h2 { font-size: 1.2em; } </style> emは今ある文字の~ 倍 </head> できるホームペ-ジ P269( 付録 6) を参照 <body> 7

8 スタイルシート (CSS) 行間 <!DOCTYPE html> <html> <head> <meta meta charset= Shift_JIS > <title> シビックプライドのまとめ ( 自分の名前 ) 2019 </title> <style type="text/css"> body { background: lightyellow; color : black } h1 { background: green; color: white; font-size: 1.5em; } h2 { font-size: 1.2em; } p { line-height : 1.5em; } </style> 横の棒線はスペースでパラグラフ ( 段落 ) の中の行の高さを通常の文字の1.5 倍分広げる 8

9 <!DOCTYPE html> <html> <head> <meta meta charset= Shift_JIS > スタイルシート (CSS) ページの左右に余白を作る <title> シビックプライドのまとめ ( 自分の名前 ) 2019 </title> <style type="text/css"> body { background: lightyellow; color: black; margin-left: 3em; margin-right: 3em; } h1 { background: green; color: white; font-size: 1.5em; } h2 { font-size: 1.2em; } p { line-height: 1.5em; } </style> </head> <body> 横の棒線はインターネットエクスプローラスペースで上で更新ボタンをクリックして出来上がりを確認する 9

10 一部の文字を強調する <body> <h2>4civic pride の事例ハンブルグのコミュニケーションの特徴とその感想 </h2> <p> ドイツ最大の都市ハンブルグ市街地から港湾地区に向かいその入り口に立つとかつて倉庫街として栄えたこのエリアの歴史を感じさせる情緒豊かな建物が私たちを迎えてくれる <br> そこは <em> ハーフェンシティ </em> と呼ばれる新しい都市である <em> ハーフェンシティ </em> には通常の都市と違い建築過程を市ハーフェンシティ民に見せるような仕掛けがいたるところにある <br> 建築現場は隠すものだとばかり思っていた私にとってこの <em> ハーフェンシティ </em> にあるインフォセンターやビューポイントなどは斬新で大変ユニークな発想だと感じた <br> 10

11 <!DOCTYPE html> <html> <head> <meta meta charset= Shift_JIS > <title> シビックプライドのまとめ ( 自分の名前 ) 2019 <style type="text/css"> スタイルシート (CSS) 強調文字の見た目を変える </title> body { background: lightyellow; color: black; margin-left: 3em; margin-right: 3em; } h1 { background: green; color: white; font-size: 1.5em; } h2 { font-size: 1.2em; } p { line-height: 1.5em; } em { font-style: italic; font-weight: bold; color: red; } </style> </head> <body> 更新ボタンをクリックして出来上がりを確認しましょう! ドイツ最大の都市ハンブルグ市街地から港湾地区に向かいその入り口に立つとかつて倉横の棒線は庫街として栄えたこのエリアの歴史を感じさせる情緒豊かな建物が私たちを迎えてくれるスペースで <br> そこは <em> ハーフェンシティ </em> と呼ばれる新しい都市である <em> ハーフェンシ 11 ティ </em> には通常の都市と違い建築過程を市ハーフェンシティ民に見せるような仕掛

12 <!DOCTYPE html> <html> <head> <meta meta charset= Shift_JIS > <title> シビックプライドのまとめ ( 自分の名前 ) 2019 </title> <style type="text/css"> body { background: lightyellow; color: black; margin-left: 3em; margin-right: 3em; } h1 { background: green; color: white; font-size: 1.5em; } h2 { font-size: 1.2em; } p { line-height: 1.5em; } em { font-style: normal; font-weight: bold; color: red; } a:link { color: blue; } a:visited { color: darkgreen; } a:hover { color: magenta; } </style> </head> <body> 2019/6/11 スタイルシート (CSS) リンクの設定された文字の色を変えるインターネットエクスプローラ横の棒線は上で更新ボタンをクリックしスペースでて出来上がりを確認する 12

13 自己紹介のホームページ ( 新規作成 ) 13

14 演習 2. 自己紹介のページ (6/25 の授業で使用 ) 自己紹介の HP を作り自分のフルネーム ( 例 : ryukyutaro.htm, ryukyuhanako.htm) で名前を付けて保存 1 写真あるいは自分のイメージ画像を入れる 2 自己紹介 ( 趣味将来の夢サークルアルバイト等 ) を書く 3 civicpride.htm へリンクを付ける 4 onsite_info.htm へリンクをつける 5 ideal_trip.htm へリンクを付ける 6 月 11 日はここまで 6 あなたのページで紹介すること ( グループ分担の一部 ) を述べる例 : 私のページでは首里の観光リンケージについて紹介します 7 グループのトップページ ( 表紙 ) 満の観光リンケージへリンクをつける <a href = grouptop.htm > 首里の観光リンケージはココ </a> <a href=../grouptop.htm> 首里の観光リンケージはココ </a> フォルダーの外に grouptop.htm がある場合 9 観光情報論のホームページへのリンクをつける例 : <a href= 14

15 個人のページ ( フォルダーに名前を以下のようにつけてください ) ryudaihanako ryudaihanako.htm civicpride.htm onsite_info.htm ideal_trip.htm 15

16 1. 自己紹介の HTML ファイルを提出課題 9 2. 期限 :2019 年 6 月 16 日 ( 日 ) 11:59 pm 3. 件名 : 観光情報論 _ 課題 9_Civic Pride と自己紹介ファイル 4. メール先 :kaorukom@eve.u-ryukyu.ac.jp 5. 今までに作成した自己紹介のページ ( 例 :ryudaihanako.htm) と個人の課題のページ全てをアップロードできるよう USB に保存しておく 6 月 18 日にアップロードします 16

17 期末グループ HP 発表 17

18 期末グループホームページの内容グループでホームぺージを作成! 内容はオリジナルでフィールド調査にもとづいたものであり観光情報にふさわしいものであること例えば住んでいる地域の紹介閲覧者を特定して ( ターゲットを決めて ) 観光情報を作成授業で紹介されたフレームワークをもとに分析する ( シビックプライドのコミュニケーションポイント観光リンケージその他 ) 観光情報に関する比較や分類沖縄で出版されている観光関係のフリーペーパー出版されている観光ガイドブック外国人向けの観光情報センターその他観光情報に関係していると思うもの 18

19 1. 最低限必要なファイルと内容期末プロジェクト提出の基準 1 グループの表紙ページ ( 日英 ) にその 1. 観光情報のコンセプト ( このテーマを選んだ理由 ), 2. 観光情報との関係性, 3. 研究方法 { 資料収集の方法 }, 4. このホームページのターゲット層を 400 字程度で示す 2 グループの中の個人としての表紙ページ ( 日本語英語 ) 3 リンク先のページ ( 内容のページ 3 枚以上 )( 日英計 6 枚以上 ) 4 ホームページ作成後の感想 ( 日英 ) 5 自己紹介ページ ryukyutaro.htm) ( 日英 ) 6 Reference( 参考文献 ) のページを載せる参考文献は Web だけでなく紙媒体から集める (2 つ以上の著書ガイドブック無料情報誌パンフレット等 ) 7 地域を表すときに何らかの地図を入れる 8 これまでに課題で作成したページ (onsite_info.htm, ideal_trip.htm, にもリンクを張る ) 9 授業で習っていない HTML を使って工夫する ( 追加点 ) 2. 個々のページに必要なリンク次のページに行くリンクボタンと前のページに戻るボタン Topに戻る自己紹介 ( 課題のページへのリンク含む Reference に行くボタン各ベージに英語のページへのリンク ( 英語のページには日本語へのリンク) 19 観光情報論のページに行くリンク

20 期末発表 Schedule (4~5 名 ) 昼間主発表日テーマ表紙ページの File Name 7 月 2 日 grouptop.htm 班長と副班長その他のメンバー 7 月 9 日 grouptop.htm 7 月 16 日 grouptop.htm 7 月 23 日 grouptop.htm 20

21 参考ホームページ観光情報論のホームページ地元の観光情報

22 Web architecture( 例 ) 題名 : 那覇における Civic Pride のコミュニケーション戦略 campaign.htm campaign_status.htm 現状 group1 grouptop.htm logo.htm font.htm pubspace.htm logo_status.htm 現状 logo_problem.htm 課題 logo_opinion.htm 住民の意見 font_status.htm 現状 font_problem.htm 課題 font_opinion.htm 住民の意見 logo_ryudaiakiko_opinion.htm 自分のページの紹介と自己紹介 font_ryudaihanako.htm 自分のページの紹介と自己紹介 campaign_problem.htm 課題 campaign_opinion.htm 住民の意見 campaign_ryudaijirou.htm 自分のページの紹介と自己紹介 pubspace_status.htm 現状 pubspace_problem.htm 課題 pubspace_opinion.htm 住民の意見 Pubspace_ryudaitaro.htm 自分のページの紹介と自己紹介 22

23 題名 : campaign.htm ryudaig_campaign_problem.htm 課題 grouptop.htm logo.htm ryudaih_font.htm pubspace.html ryudaia_logo_status.htm 現状 ryudaia_logo_problem.htm 課題 ryudaig_logo_opinion.htm 住民の意見 ryudaiakiko_opinion.htm 住民の意見 ryudaig_campaign_opinion.htm 住民の意見 ryudaijirou.htm 自己紹介 ryudait_pubspace_status.htm 現状 rudait_pubspace_problem.htm 課題 ryudait_pubspace_iken.htm 住民の意見 ryudaitaro.htm 自己紹介 23

24 喜名番所首里城から中頭国頭にいたる番所沿いに位置した 1853年ペリー提督調査隊一行も訪れた 1897年間切り役場読谷山間切ユンタンザマギリ 1908年読谷村役場 2005年観光案内所厳かなランドマーク情報発信機能観光案内所休憩機能(無料休憩所写真パネル地図検索機器トイレ多目的室畳ベンチ模型観光ガイド常駐読谷村役場職員午前９００６００村役場の職員が常駐月曜休館 24

25 日本最西端の道の駅! 読谷村の歴史をここで知る! 1908 年に存在していた当時の讀谷山間切番所 ( 役場 ) を 1993 年忠実に再現した木造建築物! 読谷村の歴史をガイドさんが親切丁寧に教えてくださいます! 25

26 26

27 27

28 28

29 29

30 30

31 31

32 情報センターとしての存在意義観光情報を提供している < 情報のリンケージ > ( 糸満西崎喜名番所嘉手納許田国頭 ) 魅力ある拠点の存在 < 経済のリンケージ > < 農産物海産物マーケットレストランカフェ博物館等 > ( 糸満西崎嘉手納許田国頭 ) Sense of Place の創出 < 視覚のリンケージ > ( 喜名番所嘉手納国頭 ) Authenticity の創出 < 視覚のリンケージ > ( 喜名番所嘉手納 ) 32

33 読谷の観光案内所? さあ入ってみましょう 33

34 34

35 35

36 36

37 37

38 38

39 39

40 40

41 41

42 42

43 43

スライド 1

スライド 1 観光情報論 2017 年 6 月 6 日第 9 講ブリストルスタイルシート課題 :Civic Pride:Bristol 講義 : 道の駅 ( 国頭大宜見 ) HP: Style Sheet (CSS) 期末プロジェクトグループ作成 1 スタイルシート (CSS) CSS とは (Cascading Style Sheets) 本来ホームページにデザインを加える機能のすべてスタイルシート

観光情報論 2018年6月5日 第9講 ブリストル・スタイルシート

観光情報論　 2018年6月5日第9講　ブリストル・スタイルシート