分 かりやすいホームページを 作 ろう! 跡 見 学 園 女 子 大 学 公 開 講 座 文 学 部 准 教 授 福 田 博 同 平 成 24 年 4 月 28 日 5 月 12 日
目 次 4 月 28 日 1. ショートカットキー 2. ブログ 等 を 試 そう 3. ホームページの 仕 組 み 4. XHTMLとCSS 5. W3C 標 準 6. 単 語 登 録 5 月 12 日 1. 見 本 に 書 き 込 む 2. スタイルで 変 更 3. 画 像 を 作 る 4. 音 を 作 る 5. アップロードする 6. 分 かりやすいホームページ
分 かりやすいホームページを 作 ろう 2012 年 4 月 28 日 レジュメ 1. ショートカットキー 入 力 の 効 率 化 高 齢 者 障 害 者 用 Office のバージョンで 操 作 が 違 うので よく 使 うショートカットキーを 示 します 2. ブログ 等 を 試 してみます 3. ホームページの 仕 組 み ホームページ ブログ SNS 等 の 違 い HTMLの 仕 組 みの 理 解 休 憩 1. XHTMLとCSS XHTML 文 書 とCSSの 違 いの 理 解 CSS: 色 や 文 字 レイアウトを 指 定 する 文 書 2. W3C 標 準 高 齢 者 障 害 者 にやさしい 世 界 標 準 のXHTML 文 書 のチェック 方 法 を 学 びます 3. 単 語 登 録 長 い 文 字 を1 文 字 で 呼 び 出 す 単 語 登 録 を 学 びます
分 かりやすいホームページを 作 ろう 2011 年 5 月 14 日 レジュメ 1. 見 本 に 書 き 込 む 見 本 のページの 必 要 部 分 を 書 き 直 すことで ホームページをつくります 2. スタイルで 変 更 スタイルシートで 背 景 色 を 変 えてみましょう 3. 画 像 を 作 る 1. 音 を 作 る マイクで 録 音 してみましょう 2. アップロードする 出 来 上 がったホームページをアップしてみます 3. まとめ 画 像 の 作 り 方 を 学 びます
よく 使 うショートカットキー スタート: Windowsキー( 田 キー) エクスプローラ: 田 にEキー 画 面 切 り 替 え: AltにTabキー 漢 字 変 換 : スペースバー 決 定 : Enterキー ファイル 保 存 : CtrlにSキー 別 名 保 存 : AltにFキー Aキー 終 了 : AltにF, XキーかCキー 複 写 : CtrlにCキー 切 取 : CtrlにXキー 削 除 : 範 囲 選 択 Deleteキー 貼 付 : CtrlにVキー 復 活 : CtrlにZキー アドレス 取 得 : AltにDキー ハイパーリンク: CtrlにKキー パソコン 終 了 : 田 にUキー 色 盲 の 人 にもわかるバリアフリープレゼンテーション 法 より 岡 部 正 隆 伊 藤 啓 編
ホームページとブログ 1. 元 の 文 書 図 表 音 動 画 等 を 作 る 2. HTML 形 式 へ 変 換 3. 絵 も 音 楽 も 文 書 もリンクか 埋 め 込 み 4. プロバイダ 等 へファイル 転 送 5. ブラウザで 読 む つくる 人 プロバイダ 見 る 人 インターネット 見 る 人
ホームページとブログ 1. サービス 会 社 へメールアドレスで 登 録 する 2. プロフィール 等 を 設 定 3. 指 定 方 法 に 従 って 画 像 音 楽 動 画 等 を アップロード 4. ブラウザで 読 む プロバイダ 作 る 人 サービス 会 社 インターネット 見 る 人
ブログを 作 ろう サービス 会 社 比 較 信 用 度 セキュリティ アダルト 不 可 容 量 HTMLとCSSの 変 更 スクリプト 独 自 ドメイン モバイル 対 応 トラックバック (リンクの 自 動 通 知 ) 広 告 非 掲 載 宣 伝 可 RSS ( 更 新 情 報 公 開 ) などで 選 択 します
手 続 き 1. 安 全 なサイトから 選 ぶ 1. ブログ 例 : Hatenaダイアリー Blogger Yahoo!ブログ twitter 2. SNS 例 : mixi Facebook Myspace ( 音 楽 系 ) 2. 申 し 込 む メールで 確 認 開 設 3. 管 理 や 設 定 でプロフィール 設 定 4. 日 記 を 書 く 投 稿 する 5. コメント トラックバックに 返 信 スパム 管 理
Hatenaダイアリーで 試 してみよう 1. Hatenaダイアリー(リンク)に 行 く 2. 必 要 事 項 を 記 入
Hatenaダイアリーで 試 してみよう 3. 登 録 終 了 後 Hatenaダイアリーにログインする 4. ブログトップをクリックする
Hatenaダイアリーで 試 してみよう 5. 管 理 画 面 でデザインを 選 んだり 6. プロフィールを 書 きます 7. 記 事 を 書 きます 見 本
Bloggerで 試 そう 1. Blogger(link)に 入 ります Googleアカウントに 入 ります
Bloggerで 試 そう Googleアカウント 取 得 後 Bloggerに 入 ります レイアウトやテンプレートで カスタマイズします ブログを 表 示 してみましょう( 例 )
本 格 的 ホームページに 挑 戦 1. 元 の 文 書 図 表 音 動 画 等 を 作 る 2. HTML 形 式 へ 変 換 3. 絵 も 音 楽 も 文 書 もリンクか 埋 め 込 み 4. スタイルはスタイルシートファイル(CSS)で 5. プロバイダ 等 へファイル 転 送 し 公 開 見 る 人 プロバイダ サイト 開 設 者 インターネット 見 る 人
元 の 文 書 サイト 開 設 者 EditorでHTML 文 書 を 書 く 保 存 HTML-Editorで 書 く 保 存 ワープロソフトで 書 く 保 存 変 換 プレゼンテーションソフトで 書 く 保 存 変 換 表 計 算 ソフトで 書 く 保 存 変 換 ブログやSNSやWikiで 書 く Web 上 で 書 く
サイト 開 設 者 原 図 ファイル 拡 張 子 Web 用 ファイル ペイント 形 式 で 描 く ペイント bmp, tif gif, jpg, png ドロー 形 式 で 描 く Illustrator ai, pdf, svgなど jpg, pdf, png, svg, tif 等 Power Point ppt pdf に 印 刷 HTMLで 出 力 写 真 を 撮 る tiff, bmp, jpg jpgで 出 力 スキャナーで 写 す bmp, jpg, pdf jpg, pdf PC 画 面 を 写 す bmp, jpg jpgへ 変 換 詳 細 はノートを 参 照
サイト 開 設 者 音 ファイル 拡 張 子 Web 用 ファイル 録 音 マイク 録 音 WAV Web 用 に 変 換 MP3, RA, ディジタル 録 音 機 WAV, MP3 高 スペックPCと 編 集 ソフトで 変 換 FLV, MPEG4-AVC/H.264 等 DAW ソフトで 作 曲 Flashアニメーション FLA SMILアニメーション BMP 3Dアニメーション AVI SWF, アニメーションGIF 等 SMI SWF, MPEG, MOV, QT, WMV 等 ( 代 表 的 ファイル 形 式 例 を 記 載 )
サイト 開 設 者 動 画 ファイル 拡 張 子 Web 用 ファイル ビデオ 撮 影 通 常 STD 画 質 撮 影 MPEG2,AVI コンバーターや 編 集 ソフトで 変 換 QT, RM, SWF, WMV, H.264, MOV 等 ハイビジョンHVCSD 撮 影 MPEG4-AVC 高 スペックPCと 編 集 ソフトで 変 換 FLV, MPEG4-AVC/H.264 等 ソフトで 描 く Flashアニメーション FLA SMILアニメーション BMP 3Dアニメーション BLENDほか SWF, アニメーションGIF 等 SMI VRML, SWF,X3D 等 ( 代 表 的 ファイル 形 式 例 を 記 載 )
元 のファイル サイト 開 設 者 静 止 画 ペイントソフトで 描 く ファイル 名.jpg ドローソフトで 描 く ファイル 名.jpg 動 画 Flashで 描 く.swf Premiereで 変 換.mpgや.gif(アニメ) Realで 変 換.rm 音 Midiソフトで 作 る.mid 録 音 をmp3で 変 換.mp3 Excel 等 の 直 接 変 換 xml 形 式 変 換
サイト 開 設 者 HTML 文 書 (ファイル 名.html) <html> <head> この 文 書 の 属 性 ( 著 者 だとかキーワードとか スタイルとか) </head> <body> 見 える 部 分 図 とかはすべてリンクで 可 能 </body> </html>
HTML/XHTMLと CSS(スタイルシート) HTMLは 文 書 を スタイルはCSSを 使 う 理 由 : 文 書 と 見 映 えの 分 離 : アクセシビリティ SEO( 検 索 エンジン 対 策 ) メンテナンス 性 互 換 性 W3C(Webの 仕 様 を 決 める 団 体 ) 国 際 標 準 ユーザビリティ / 筆 者
HTML, CSSのW3C 標 準 チェック 1. W3C Markup Validation Service 2. Another HTML -lint gateway / 石 野 恵 一 郎 氏 3. HAREL / NTT data 4. W3C CSS Validation Service スタイルシートの 検 査 5. 色 覚 チェック / 岡 部 正 隆 氏 伊 藤 啓 氏 6. adesigner / 浅 川 千 恵 子 氏 グループ 7. W3Cフィード 検 証 サービス (RSS 等 の 検 査 ) 暗 号 化 したページ httpsはhttpを1から3 等 で 調 べましょう
Head 部 例 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> コメント 文 <title>ここにタイトルを 書 きます</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name= keywords content= キーワード1,キーワード2 /> <!-- 複 数 の 場 合,で 区 切 ります 漢 字 もOK --> <meta name= description content= ここにページの 説 明 文 を 書 きます" /> <meta name= author content= ここにあなたの 名 を 書 きます" /> <meta name= date content= 2012 年 4 月 28 日, 更 新 :2012 年 5 月 12 日 " /> <meta http-equiv="content-style-type" content="text/css" /> <link rel="stylesheet" type="text/css" href="konsiro120hdkotei.css" media="tv,screen,print /> </head>
Body 部 例 <body> <div id="header"> DIVは 一 区 切 り <img src= zunoname.jpg alt= 説 明 文 width= 44 height= 33 /><a href= index.html >ト ップページの 名 へ</a> <a href= shumi.html > 趣 味 </a> <a href= nikki.html > 日 記 </a> <span class= chu > 著 者 </span> </div> 図 が 出 来 たらファイル 名 を 変 えます spanは ある 部 分 a hrefは リンク <div id="main"> <p><span class="chu">ここはトップページの 名 </span> </p> <h2>このページの 見 出 し</h2> 箇 条 書 きを 書 くときはulを 使 います 下 をみましょう<br /> <ul> <li>ヘルプ 集 </li> <li> 日 記 </li> </ul> </div> </body> </html> pは 段 落 hは 階 層 br / は 改 行
階 層 の 理 解 フォルダ yourhome HTML 文 書 Index.html 図 ファイル: jpgやpng 音 : mp3やmid 等 フォルダ mihon <a href= mihon/index.html > 見 本 </a> <a href= mihon/oto/prelude1.mid > 音 楽 </a> HTML 文 書 Index.html HTML 文 書 link.html 等 フォルダ oto 等 フォルダ kyouzai <a href=../index.html >トップへ</a> HTML 文 書 Index.html PDF 文 書 accessiblewebsitemake.pdf
単 語 登 録 ( 良 く 使 うフレーズ) CtrlにF10キー W( 単 語 登 録 ) 単 語 を 入 れ 読 みを 入 れ ok <a href= > </a> あ (リンク) <img src= width= height= alt= align= left /> い ( 画 像 ;srcはファイル 名 altは 図 の 説 明 align 回 り 込 み) <ul> <li> </li> </ul> う ( 箇 条 書 きリスト) <ol> <li> </li> </ol> お ( 段 落 番 号 付 きリスト) <p> </p> ぴ ( 段 落 ) <hr /> ふ ( 罫 線 ) <br /> ぶ ( 改 行 ) <br clear= all /> ぶ ( 回 り 込 みクリアし 改 行 ) <li></li> り (リスト)
スタイルを 選 ぶ 作 る 紺 地 に 白 文 字 リンク 黄 色 文 字 120% 行 間 1.4 紺 地 に 白 文 字 リンク 黄 色 Ⅱ 型 文 字 120% 行 間 1.4 薄 肌 地 に 黒 文 字 文 字 120% 行 間 1.4 Header Header main menu main1 Main2 menu 詳 細 はスタイルシートを 勉 強 する 必 要 があります
元 ファイル 作 成 方 法 図 :ペイントソフトで 描 く 拡 張 子 pngとかjpg 図 :ドローソフトで 描 く 図 : 携 帯 カメラ 等 で 写 す jpgで 送 る 動 画 :Flashで 描 く 動 画 :ビデオをReal 形 式 やFlash 形 式 に 変 換
元 ファイル 作 成 方 法 音 :MIDIソフトで 作 る 音 : 録 音 mp3 変 換 データベース:Excel, Access Webページで 保 存 電 子 文 書 :wordや 一 太 郎 やPowerPointを Acrobatで 印 刷 =PDF 文 書
元 ファイル 作 成 方 法 : 図 ペイントで 描 く スタート(Windowsキー) プログラム(pキー) アクセサリー ペイント
ペイント キャンバスサイズ 円 の 書 き 方 キャンパス 色 とサイズ 円 や 四 角 等 の 書 きかた
ペイント スプレーとバケツ スプレー バケツ 円 と 色
ペイント 保 存 ファイル 別 名 保 存 保 存 場 所 デスクトップ 自 分 のフォルダ zuのフォルダ ファイル 種 類 すべてにして 拡 張 子 jpg!bmpではない 動 画 等 様 々な 作 り 方 はArtNaviの インターネットプレゼンテーション 入 門 を
静 止 画 像 の 埋 め 込 み 方 ArtNavi1 ユーザビリティ Webサイト 作 成 HTMLファイル 作 成 図 の 埋 め 込 み を 参 照 静 止 画 の 作 成 ペイントソフト ドローソフト カメラで 撮 影 OCRで 読 み 込 む パソコン 画 面 を 複 写
元 ファイル 作 成 方 法 : 音 ファイル ArtNavi1 芸 術 工 房 音 楽 作 ろう インターネットで 芸 術 音 楽 を MMLで 作 曲 MIDIで 作 曲 録 音 と 音 の 編 集
音 声 動 画 の 埋 め 込 み 方 ArtNavi1 ユーザビリティ Webサイト 作 成 HTML ファイル 作 成 音 動 画 の 埋 め 込 みを 参 照 リンク 再 生 音 (MIDI) 埋 め 込 み 音 (MP3) 埋 め 込 み 動 画 の 埋 め 込 み 動 画 (RealMedia) 埋 め 込 み 動 画 (Flash) 埋 め 込 み 動 画 (YouTube) 埋 め 込 み
アップロードする 1. メールアドレスが 必 要 2. 安 全 な 無 料 サイトから 選 ぶ Yahoo Geocities Google apps 等 3. 申 し 込 み メールで 確 認 開 設 4. 管 理 や 設 定 でプロフィール 設 定 5. ファイル 転 送 FFFTPなどのソフトで 転 送
セキュアページ : 緑 のhttps 等 ウィルスページの 被 害 にあわせないよう 口 座 番 号 や 本 人 特 定 情 報 を 暗 号 化 するサービスを 選 択 信 頼 できる 認 証 局 を 選 ぶ 信 頼 できる 認 証 局 も 偽 証 明 書 を 発 行 したことがある オランダのDigiNotar 事 件 ( 記 事 :INTERNET WATCHより) 偽 OCN 事 件 ( 記 事 :フィッシング 対 策 協 議 会 ) チェックする 習 慣 を
分 かりやすいホームページ ターゲットを 絞 る 日 常 日 記 だけ 多 趣 味 でも1つの 趣 味 だけ ほかの 趣 味 は それぞれ 違 うサイトに 1ページに 詰 め 込 まない ALTAIR(link)で 朗 読 してもらって5 分 以 内 授 業 終 了 :ご 不 明 な 点 はartnvi8200@yahoo.co.jp