見 やすいホームページを 作 ろう! 跡 見 学 園 女 子 大 学 公 開 講 座 文 学 部 准 教 授 福 田 博 同 平 成 23 年 5 月 7 日 14 日
目 次 5 月 7 日 1. ショートカットキー 2. HTMLの 仕 組 み 3. XHTMLとCSS 4. W3C 標 準 5. 見 本 に 書 き 込 む 6. 単 語 登 録 5 月 14 日 1. ブログを 試 そう 2. スタイルで 変 更 3. 画 像 を 作 る 4. 音 を 作 る 5. アップロードする 6. まとめ 7. ブログ 等 の 準 備
見 やすいホームページを 作 ろう 2011 年 5 月 7 日 レジュメ 1. ショートカットキー 入 力 の 効 率 化 のため 高 齢 者 障 害 者 でマウスを 見 づらい 人 のため Office のバージョンで 操 作 が 違 う 人 のため よく 使 うショートカットキー( Ctrlキー とかAltキーとかShiftキーにCキーなどを 組 合 す) を 示 します 2. HTMLの 仕 組 み ホームページの 仕 組 みを 理 解 します 3. XHTMLとCSS 休 憩 HTML 文 書 と 見 栄 え( 色 とか 文 字 の 大 きさなど:CSS といいます)の 違 いを 学 びます 1. W3C 標 準 高 齢 者 障 害 者 にやさしい 世 界 標 準 の XHTML 文 書 のチェック 方 法 を 学 びます 2. 見 本 に 書 き 込 む 見 本 のページの 必 要 部 分 を 書 き 直 すことで ホームページをつくります 3. 単 語 登 録 長 い 文 字 を1 文 字 で 呼 び 出 す 単 語 登 録 を 学 びます 4. ブログ 等 の 準 備 ブログやホームページなどができるよう 準 備 します
見 やすいホームページを 作 ろう 2011 年 5 月 14 日 レジュメ 1. ブログを 試 そう ブログに 書 いてみましょう 2. スタイルで 変 更 スタイルシートで 背 景 色 を 変 えてみましょう 3. 画 像 を 作 る 1. 音 を 作 る マイクで 録 音 してmp3ファイルを 作 ります 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. ブラウザで 読 む プロバイダ 見 る 人 サイト 開 設 者 インターネット 見 る 人 目 次 へ
元 の 文 書 サイト 開 設 者 サイト 開 設 者 EditorでHTML 文 書 を 書 く 保 存 HTML-Editorで 書 く 保 存 ワープロソフトで 書 く 保 存 変 換 プレゼンテーションソフトで 書 く 保 存 変 換 表 計 算 ソフトで 書 く 保 存 変 換 ブログやMedia 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,WMA 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の 仕 様 を 決 める 団 体 ) 国 際 標 準 ユーザビリティ / 筆 者
Topへ HTML, CSSのW3C 標 準 チェック W3C Markup Validation Service Another HTML -lint gateway / 石 野 恵 一 郎 氏 W3C CSS Validation Service 色 覚 チェック / 岡 部 正 隆 氏 伊 藤 啓 氏 adesigner / 浅 川 千 恵 子 氏 グループ
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= 2011 年 5 月 7 日, 更 新 :2011 年 5 月 14 日 " /> <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"> <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> <div id="main"> <p><span class="chu">ここはトップページの 名 </span> </p> pは 段 落 <h2>このページの 見 出 し</h2> 箇 条 書 きを 書 くときはulを 使 います 下 をみましょう<br /> <ul> <li> 趣 味 </li> <li> 日 記 </li> </ul> </div> </body> </html> DIVは 一 区 切 り 図 が 出 来 たらファイル 名 を 変 えます a hrefはリンク 必 ず 閉 じる /body /htmlで 閉 じます hは 階 層 spanは ある 部 分
単 語 登 録 ( 良 く 使 うフレーズ) 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%T 右 インデックス 紺 地 に 白 文 字 120% 紺 地 に 白 文 字 120%T 肌 色 地 に 黒 文 字 120% 肌 色 地 に 黒 文 字 120%T
ブログを 試 そう 1. メールアドレスが 必 要 2. 安 全 な 無 料 サイトから 選 ぶ Blogger Hatena Diary Yahoo!ブログ 等 ( 見 本 : 筆 者 ) ( 見 本 : 筆 者 ) ( 見 本 yahoo! Japan) 3. 申 し 込 み メールで 確 認 開 設 4. 管 理 や 設 定 でプロフィール 設 定 5. 日 記 を 書 く 投 稿 する 6. コメント トラックバックに 返 信 スパム 管 理
ブログ 作 成 画 面 1. Blogger 手 順 :Bloggerに 入 る 1. Tabキー5 回 で アカウント 開 始 Enterキー 2. Googleアカウント 作 成 Tabキーでメールアドレス 等 を 入 れ Enterし メールで 確 認 する アカウントを 得 る(メモしておこう) 3. ブログを 作 成
ブログ 作 成 画 面 1. Yahoo! ブログ 手 順 :Yahoo! ブログに 入 る 1. 新 規 取 得 Yahoo! IDの 取 得 記 入 利 用 規 約 に 同 意 して 登 録 2. ブログを 作 成 プロフィールの 作 成 新 規 ブログ 投 稿
ブログ 作 成 はてなダイアリー 手 順 :はてなダイアリーに 入 る 無 料 ブログ 開 設 登 録 内 容 確 認 メールアドレス 入 力 登 録 完 了 ダイアリー 開 設 ブログの 作 成
元 ファイル 作 成 方 法 図 :ペイントで 描 く 拡 張 子 pngとかjpg 図 :ドローソフトで 描 く 図 : 携 帯 カメラ 等 で 写 す jpgで 送 る 動 画 :Flashで 描 く 動 画 :ビデオをReal 形 式 やFlash 形 式 で 変 換 音 :MIDIソフトで 作 る 音 : 録 音 mp3 変 換 Excel, Access Webページで 保 存 電 子 文 書 :wordや 一 太 郎 やPowerPointを Acrobatで 印 刷 =PDF 文 書
元 ファイル 作 成 方 法 : 図 ペイントで 描 く スタート(Windowsキー) プログラム(pキー) アクセサリー ペイント
ペイント キャンバスサイズ 円 の 書 き 方 キャンパス 色 とサイズ 円 や 四 角 等 の 書 きかた
ペイント スプレーとバケツ スプレー バケツ 円 と 色
ペイント 保 存 ファイル 別 名 保 存 保 存 場 所 デスクトップ 自 分 のフォルダ zuのフォルダ ファイル 種 類 すべてにして 拡 張 子 jpg!bmpではない 動 画 等 様 々な 作 り 方 はArtNaviの インターネットプレゼンテーション 入 門 を
静 止 画 像 の 埋 め 込 み 方 ArtNavi ユーザビリティ Webサイト 作 成 HTMLファイル 作 成 図 の 埋 め 込 み を 参 照 静 止 画 の 作 成 ペイントソフト ドローソフト カメラで 撮 影 OCRで 読 み 込 む パソコン 画 面 を 複 写
元 ファイル 作 成 方 法 : 音 ファイル ArtNavi 芸 術 工 房 音 楽 作 ろう インターネットで 芸 術 音 楽 を MMLで 作 曲 MIDIで 作 曲 音 の 編 集 (マイクで 録 音 )
音 声 動 画 の 埋 め 込 み 方 ArtNavi ユーザビリティ Webサイト 作 成 HTML ファイル 作 成 音 動 画 の 埋 め 込 みを 参 照 リンク 再 生 音 (MIDI) 埋 め 込 み 音 (MP3) 埋 め 込 み 動 画 の 埋 め 込 み 動 画 (RealMedia) 埋 め 込 み 動 画 (Flash) 埋 め 込 み 動 画 (YouTube) 埋 め 込 み
アップロードする 1. メールアドレスが 必 要 2. 安 全 な 無 料 サイトから 選 ぶ Yahoo! Geocities google apps 等 3. 申 し 込 み メールで 確 認 開 設 4. 管 理 や 設 定 でプロフィール 設 定 5. ファイル 転 送 (FFTP 等 を 利 用 )