KAWANO's PukiWiki Plus! - Lecture/JouhouC2004/14th の変更点
*情報教育演習II 第14回 [#v5034255] **HTMLファイルの作成 (4) [#nb9ca811] 今回は、構造以外に、配色やレイアウト、Webページとして必要な情報なども設定していきます。 **Webサイトの作成 [#a22ef954] ***Webサイトの構成 [#q09d39e9] 今回作成しているサイトの全体構成は次のとおりです。 -「わたし」の街（&ref(Lecture/JouhouC2004/13th/index.htm);） --サイトの窓口（トップページ） -「わたし」について（&ref(Lecture/JouhouC2004/13th/profile.html);） --自己紹介とおすすめのリンク（3つ） -「街」について（&ref(Lecture/JouhouC2004/13th/town.html);） --自分の出身地の紹介 -「わたし」と「街」（&ref(Lecture/JouhouC2004/13th/memory.html);） --出身地での思い出や、将来への期待など #ref(site1.png,nolink,90%,サイトの構成); Webサイトや作成するときには、次のポイントが重要になります。 +出入り口となるリンクをつくる --情報のながれをつくることで、公開した情報にアクセスしやすくする --訪問者を迷い込ませないことで、悪い印象を持たせない +デザインやレイアウトを統一する --情報の場所や操作性を統一することで、訪問者を戸惑わせない --きちんと管理している印象を持たせることで、信頼感が増す &br; &br; &br; &br; &br; &br; &br; &br; **ファイルの更新方法 [#s73a9512] +Webサーバ上のファイルをパソコンへコピーする +パソコン上で編集・確認作業をする +できあがったらWebサーバへコピーする ***Webサーバ上のファイルのコピー [#ac04fb42] まず、「Webフォルダ」機能を利用して、 サーバの中のファイルをコピーします。 +デスクトップにある、「Internet Explorer」を起動 +メニューバーから、「ファイル」→「開く」を選択 ++「Webフォルダとして開く」のチェックボックスを、マウスをクリックしてチェック ++「開く」の入力欄に、「http://arena.hyogo-dai.ac.jp/joho2/」と入力 ++「OK」ボタンをクリック #ref(Lecture/JouhouC2004/13th/html00.png,90%,nolink); +ユーザ名とパスワードを入力したら、「OK」ボタンをクリック +自分の学籍番号のフォルダを開く +コピーするファイルを右クリックし、''「コピー」''を選択 次に、コピーしたファイルをパソコンの中に貼り付けます。 +''「マイドキュメント」''を開く +''「public_html」''を開く +ファイルのリストの開いている場所を右クリックし、''「貼り付け」''を選択 ++ファイルは「上書き」するように選択 ***Webサーバへのファイルのコピー [#ec8abad9] 編集や確認作業が完了したファイルを、 Webサーバへ転送します。 まず、パソコンの中にあるファイルをコピーします。 +''「マイドキュメント」''を開く +''「public_html」''を開く +ファイルのリストの開いている場所を右クリックし、''「コピー」''を選択 次に、サーバの中にファイルを貼り付けます。 +上記の『Webサーバ上のファイルのコピー』を参考に、 Internet Explorerを使って、サーバの中のファイルを開く +自分の学籍番号のフォルダを開く +ファイルのリストの開いている場所を右クリックし、''「コピー」''を選択 ++ファイルは「上書き」するように選択 &br; &br; &br; &br; &br; &br; **画像データの利用 [#z814f162] ***画像のフォーマット [#l2eb0a9f] 画像データのフォーマット（形式）には、次のようなものがあります。 :BMP（ビットマップ）(*.bmp)| --Windows標準の画像フォーマット（「ペイント」で作成できる） --ファイルサイズが大きい（24ビットカラーの場合） --Webページでは使えないので、ほかの形式に変換する必要がある :JPEG (*.jpg, *.jpeg)| --写真、イラスト向き（フルカラーが扱える） --ファイルサイズが小さい（圧縮率を変える） :GIF (*.gif)| --アイコン、バナー向き（最大で256色しか扱えない） --透過GIFやアニメーションGIFなど機能が豊富 :PNG (*.png)| --GIFファイルに代わるフォーマット（256色以上扱える） --GIFファイルに特許問題が生じたため、それ避ける目的で作られた ***素材集の利用 [#sd8d33bf] インターネットに公開されている「素材集サイト」にアクセスして、 アイコンや写真など、画像の素材を集めます。 ただし、次の点に注意すること。 :素材を利用する前に、利用上の注意事項をよく確認する| 「著作権フリー」のように、再利用が許可されているかどうか注意しましょう。 :ファイル名は半角文字にする| インターネットに公開するデータは、半角文字となります。 +Yahoo! JAPAN( http://www.yahoo.co.jp/ )にアクセス +「コンピュータとインターネット > インターネット > WWW > ホームページ作成 > グラフィックス、素材」の順にカテゴリを絞り込む +登録されているサイトにアクセスし、画像ファイルを探す +気に入った画像があったら、画像を右クリックする ++メニューから「名前をつけて画像を保存」を選ぶ ++ファイルの保存場所に、「マイドキュメント」→「public_html」を設定 ++「保存」ボタンをクリック ***著作権 [#j13a8fcb] -''著作物''：人がアイデアを「書いたり」「作ったり」「発表した」もの --小説、講演、楽曲、絵画、コンピュータのプログラム -''著作者''：著作物を作った人 ''「著作権」''とは、著作権法で定められた、 「著作者」が「著作物」に対して持つ権利です。 第三者は、著作者に無断で公開することはできません （私的な利用は条件を満たせば認められます）。 著作権は、手続きなしで創作した時点で発生し、 著作者の死後50年後まで有効となります。 -参考リンク --著作権情報センター : http://www.cric.or.jp/ --しゅんしゅんの著作権講座：http://www.geocities.jp/shun_disney7/ ***画像データの表示 [#pe434531] 画像データを表示するには、''<img>''要素を使います。 -<img src="画像データの位置" width="横の大きさ" hight="縦の大きさ" alt="代替テキスト"> --src属性には、画像の位置（ファイルの場所やURL）を指定します --alt属性には、画像が表示できない場合に表示させる説明文を設定します~ 何も説明がない場合は「alt=""」とします --width属性とheight属性には、画像の横・縦の大きさ（ピクセル値）を指定します~ 指定した大きさが画像データより大きい場合、画像は拡大して表示されます~ 指定した大きさが画像データより小さい場合、画像は縮小して表示されます <img src="gazou1.jpg" width="400" alt="絵本を読む園児の様子"> 背景として画像データを表示するには、''<body>''要素に''background''属性を指定します。 --<body background="画像データの位置"> <body background="kabegami.gif"> &br; &br; &br; &br; &br; &br; &br; &br; &br; &br; &br; &br; &br; &br; &br; &br; &br; &br; &br; &br; &br; &br; &br; &br; &br; &br; &br; &br; &br; **Webページのレイアウト [#k11b76f9] サイトの規模にもよりますが、Webページを構成する要素は、大きく分けると次のようになります。 -タイトル（ページのタイトルやタイトル画像） -メニュー、サブメニュー（サイト全体やページ内のメニュー） -コンテンツ（文章や画像など） -署名（著作権、連絡先、更新日時） これらの要素をどうレイアウトするかが、 使いやすいWebページ・Webサイトを考える上で重要になります。 よく使われるレイアウトは次のとおりですが、 コンテンツに応じて向いている・向いていないレイアウトがあります。 -全面：もっともシンプルなレイアウト |CENTER:140|c |タイトル&br;メニュー&br;コンテンツ&br;署 名| -縦分割：メニューが左（または右）にある |CENTER:50|CENTER:82|c |メニュー|タイトル&br;コンテンツ&br;署 名| -横分割：メニューが左（または右）にある |CENTER:140|c |メニュー| |タイトル&br;コンテンツ&br;署 名| ***表によるレイアウト [#z9203ef2] 表を表示する''<table>''要素を使えば、 ページ全体をブロック上に分解して、 レイアウトすることができます。 次のような属性を<table>や<td>要素に設定すれば、 ブロック上のレイアウトができます。 -<table align="表の表示位置"> --align属性で表の表示位置を指定します~ centerは中央、leftは左、rightは右 -<table border="外枠の太さ"> --border属性で表の外枠の太さを指定します（0にすると枠線が見えなくなる） -<table width="幅"> --widht属性で表の幅を、ピクセル値かページの横幅に対するパーセント(%)で指定します -<td colspan="結合するセルの数"> --colspan属性で、横に結合するセルの数を指定します さらに、次のような属性を<table>や<td>要素に設定すれば、 よりよりレイアウトを表現できます。 -<table cellspacing="セルの間隔"> --セルとセルの間隔を設定します（セルと外枠の間隔も設定されます） -<table cellpadding="セル枠と内容との間隔"> --セルの枠と内容の間隔を設定します <table border="2" cellspacing="1" cellpadding="5"> -<table bgcolor="背景色">&br;<tr bgcolor="背景色">&br;<td bgcolor="背景色"> --表や列やセルの背景色を設定します <table bgcolor="#ffcccc"> <td bgcolor="#ffff00"> 例えば、次のようなレイアウトができます。 #div(start) <table align="center" width="90%" border="0"> <tr> <td colspan="2"> ＜タイトル...＞ </td> </tr> <tr> <td> ＜コンテンツ...＞ </td> <td> ＜写真...＞ </td> </tr> <tr> <td colspan="2"> ＜署名...＞ </td> </tr> </table> #div(end) |CENTER:100|CENTER:60|c |>|タイトル| |&br;&br;コンテンツ&br;&br;|画像| |>|署名| #div(clear) // ** [#vc6d971b] // ***アクセシビリティ [#n03743f6] // タイトルのつけ方（お気に入り）（ＳＥＯ） // 単語の間にスペースや改行を入れない // 大きな画像には、サムネイルを入れる // 画像にはalt属性で代替テキストを入れる // // ***ユーザビリティ [#ad23dbd4] // タイトルのつけ方（お気に入り）（ＳＥＯ） // スクロールしなくても見える範囲に重要な情報（概要や結論を先に）（ＳＥＯ的には１００文字程度で） // 画面サイズの目安：８００ｘ６００ピクセルを基準に（ウィンドウ枠やスクロールバーなどの分を忘れずに） // 工事中にはリンクしない（閲覧側からすれば時間の無駄→ユーザの貴重な時間を無駄にしない） // 各ページには、サイト名、トップページのＵＲＬ、著作権、連絡先、更新日 // パンくずリスト（Ｙａｈｏｏを参考に） // サイト全体でレイアウトを統一（操作性を重視：操作や見方で迷わないように） // （きちっとした印象をあたえ、信頼感が増す） // データのサイズ **参考リンク [#x85f59e6] -とほほのWWW入門 --http://tohoho.wakusei.ne.jp/ -Academic HTML --http://www.tg.rim.or.jp/~hexane/ach/ -The Quick Color Table --http://www.kanzaki.com/docs/colortable-t.html -0からHTML --http://www.zerokara.com/html/ |
|
|
Founded by Minoru Kawano.
Powered by PukiWiki Plus! 1.4.7plus-u2-i18n. HTML convert time to 1.682 sec. |
|