情報教育演習II 第14回HTMLファイルの作成 (4)今回は、構造以外に、配色やレイアウト、Webページとして必要な情報なども設定していきます。 Webサイトの作成Webサイトの構成今回作成しているサイトの全体構成は次のとおりです。
Webサイトや作成するときには、次のポイントが重要になります。
ファイルの更新方法
Webサーバ上のファイルのコピーまず、「Webフォルダ」機能を利用して、 サーバの中のファイルをコピーします。
Webサーバへのファイルのコピー編集や確認作業が完了したファイルを、 Webサーバへ転送します。 まず、パソコンの中にあるファイルをコピーします。
画像データの利用画像のフォーマット画像データのフォーマット(形式)には、次のようなものがあります。
素材集の利用インターネットに公開されている「素材集サイト」にアクセスして、 アイコンや写真など、画像の素材を集めます。 ただし、次の点に注意すること。
著作権
「著作権」とは、著作権法で定められた、 「著作者」が「著作物」に対して持つ権利です。 第三者は、著作者に無断で公開することはできません (私的な利用は条件を満たせば認められます)。 著作権は、手続きなしで創作した時点で発生し、 著作者の死後50年後まで有効となります。
画像データの表示画像データを表示するには、<img>要素を使います。
背景として画像データを表示するには、<body>要素にbackground属性を指定します。
Webページのレイアウトサイトの規模にもよりますが、Webページを構成する要素は、大きく分けると次のようになります。
これらの要素をどうレイアウトするかが、 使いやすいWebページ・Webサイトを考える上で重要になります。 よく使われるレイアウトは次のとおりですが、 コンテンツに応じて向いている・向いていないレイアウトがあります。
表によるレイアウト
<table>
例えば、次のようなレイアウトができます。
#div(start) <table align="center" width="90%" border="0"> <tr> <td> <タイトル> <td colspan="2"> <タイトル...> </td> </tr> <tr> <td> <コンテンツ> <コンテンツ...> </td> <td> <写真> <写真...> </td> </tr> <tr> <td> <署名> <td colspan="2"> <署名...> </td> </tr> </table> #div(end)
#div(clear) アクセシビリティタイトルのつけ方(お気に入り)(SEO) 単語の間にスペースや改行を入れない 大きな画像には、サムネイルを入れる 画像にはalt属性で代替テキストを入れるユーザビリティタイトルのつけ方(お気に入り)(SEO) スクロールしなくても見える範囲に重要な情報(概要や結論を先に)(SEO的には100文字程度で) 画面サイズの目安:800x600ピクセルを基準に(ウィンドウ枠やスクロールバーなどの分を忘れずに) 工事中にはリンクしない(閲覧側からすれば時間の無駄→ユーザの貴重な時間を無駄にしない) 各ページには、サイト名、トップページのURL、著作権、連絡先、更新日 パンくずリスト(Yahooを参考に) サイト全体でレイアウトを統一(操作性を重視:操作や見方で迷わないように) (きちっとした印象をあたえ、信頼感が増す) データのサイズファイルの更新方法
Webサーバ上のファイルのコピーまず、「Webフォルダ」機能を利用して、 Webサーバのファイルのアクセスします。 まず、サーバの中のファイルをコピーします。
Webサーバへのファイルのコピー編集や確認作業が完了したファイルを、 Webサーバへ転送します。 まず、パソコンの中にあるファイルをコピーします。
参考リンク
|