博物館情報メディア論
博物館情報メディア論レポート３の補足事項
１．事前に用意するもの
１）本文 ７００−８００字
内容は実際に「インターネットで伝えたい／知らせたいこと」です。博物館に関係なくてよいです。おもしろ
い作品は、本人了解のうえで実際に公開します。ワードプロセッサ（ワードなど）やエディタ（メモ帳など）で
作ります。携帯やスマホで作ってメールで作業ＰＣに転送してもよいです。ただし、絵文字や顔文字は使えませ
ん。
２）写真または図 ２点
携帯やスマホの写真をメールでＰＣに送ればＯＫです。ただし拡張子が jpg または jpeg あるいは gif で保存可
能なデータです。
３）コンピュータ
ウィンドウズでもマッキントッシュのどちらでも可。図書館など学校のもので十分です。
２．使用ソフト
１）メモ帳
スタート＞アクセサリ＞メモ帳 本文にあたる html ファイルを作成します。
２）ペイント
スタート＞アクセサリ＞ペイント 写真の加工（サイズ変更＝リサイズ）などに使います。
３）インターネットエクスプローラー
作成した html を閲覧します。
３．作業手順１素材の準備
１）新規フォルダを作成
任意の場所、たとえば「ドキュメント」のなかに新規フォルダを作ります。フォルダ名はアルファベット小文
字にすること。
２）必要なファイルを新規作成
新規フォルダに下のファイルを作ります。ファイル名はすべてアルファベット小文字です。拡張子に注意して
保存します。
xxxx.html ウェブブラウザで研究室ウェブサイトから「レポート３参考ページ」を開き、ソースを表示してすべ
てをコピーして「メモ帳」に貼り付け、適当な名前を付けて保存。保存するときに一番下の窓にある日本語エン
コードは「UTF-8」を選択します。
xxxx1.jpeg 写真１。とりあえず元の写真を移動させて保存します。
xxxx2.jpeg 写真２。とりあえず元の写真を移動させて保存します。
design-1.css 研究室ウェブサイトから「design-1.css」をダウンロードします。
３）本文をコピペ
「レポート３参考ページ」と xxxx.html を見比べて、本文にあたる場所に作成した文章（本文）をコピペしま
す。ちゃんとできたかどうか、逐一ウェブブラウザ（インターネットエクスプローラーなど）で確認します。
４）写真をリサイズ
「ペイント」を使って元の写真を適切なサイズに変更し、名前を付けて保存します。縦横比に注意。
これで素材はそろいました。次はいよいよウェブページ本体 html ファイルに手を入れます。
４．作業手順２ HTML ファイルの加工（名称としては大文字を使う）
１）xxxx.html を「メモ帳」で開く
以下の作業は、何かを変更するたびに保存してください。また、失敗したときに備えて、もとのファイルは名
前を付けて保存しておくとよいでしょう。
２）写真１のタグを変更
<img src="hval3-1.jpeg" width="255" height="169" class="pright" alt="捕鯨者の像（サンデフィヨルド）">
これを変更します。注釈を赤字で示します。
<img src="hval3-1.jpeg" 写真１のファイル名に合わせる width="255" リサイズした写真１の横幅に合わせる height= 169 リサイズした写真１の高さに合わせる class="pright" 写真１の位置 pright：右、pleft：左、 alt="捕鯨者の像（サンデフィヨルド）"> 写真１の内容：画像検索はこの文字列を読みに行きます
３）写真１のタグを変更
<img src="hval4-1.gif" width="255" height="284" class="pright" alt="ノルウェー訪問地地図">
図なので gif データを使用しています。これも２）と同様に自分に合った内容に変更します。
４）見出しの変更
<h1>博物館情報メディア論課題３：参考ページ</h1>
<h2>季刊・北方圏129号掲載（2004）ノルウェーのクジラと捕鯨を巡る旅</h2>
見出しの文字を自分の文章にあった内容に変更します。
５）ページタイトルの変更
<title>博物館情報メディア論課題３：参考ページ</title>
最上部にあるページタイトルを変更します。
６）リンクの修正
下の方にあるリンクが教員のウェブページになっているので、適切に変更あるいは削除する。
<p><a href="http://www.h6.dion.ne.jp/ unisan/data/hval/hval1.html" target="_blank">本文とグラビア（別ペー
ジで開きます）</a></p>
５．スタイルシートの変更
１）design-1.css を「メモ帳」で開く
２）数字をいろいろ触ってみる
スタイルシートの指示事項をいじってみる。変化を見るには保存してからブラウザで見る。
body
{padding-left: 25px; padding-right: 25px; color: #000000; background-color: #ffffee} 文章全体の左
余白: 右余白: 文字色: 背景色
h1
{font-size:x-large;color:#990000;} 大見出しのサイズ: 文字色
h2
{font-size:small; padding:2px; background-color:#ffdead} 中見出しのサイズ: 見出し背景の余白: 背
景の色
h3
{font-size:small} span.name
{font-weight: bold} 小見出し→使っていない
p
{line-height: 160%} 本文の行間
hr
{height:2px;color:#cc9900} 水平線（罫線）の太さと色
img.pleft
{float: left; margin-right: 12px; margin-bottom: 6px} 写真の左寄せの定義
img.pright {float: right; margin-right: 12px; margin-bottom: 6px} 写真の右寄せの定義
たとえば、
中見出しに color: #xxxxxx を追加すると文字色が変わる、写真のセンタリングは
スタイルシートで img.pcenter {display:block; margin-left:auto; margin-right:auto} と定義、
HTMLの写真位置を class="pcenter" と変更すればできあがり。スタイルシートの保存も忘れずに。
© Copyright 2024 Paperzz
