roy > naoya > 公益自由研究

公益自由研究

関連ファイルのダウンロード

先週、メニュー画像を作成し、商店街マップや店舗情報のページなどに新デザインを適用した。これら変更があったファイルのみを差し替えても良いが、画像ファイルなどは上書きをすると画質が劣化するという問題があるため、関連ファイル一式を以下から新たにダウンロードし、全て差し替える。

関連ファイル一式（新バージョン）

メモ（メニューの色設定）

  • 背景色1　#006600
  • 背景色2　#ff9900
  • 文字色 #ffffff
  • フォント　MSPゴシック
  • サイズ　12ポイント

店舗ページのデザインと内容の更新

本日は、武田先生の公益自由研究のクラスと合同で以下の作業を行う。

  • サイトのデザインについての確認（特に店舗のページ）
  • 武田先生のクラスの皆さんに行っていただいた調査結果を踏まえた情報の更新

議論のたたき台として、アルス美容院のページを暫定的に作り変えたので、これについて意見を出しながらデザインをフィックスする。

アルス美容院（新バージョン案）

参考までに、アルス美容院のページでは、600×40ピクセルの画像をメニューとして使用し、3つに分けて、店舗情報とオススメ商品、公益大生のコメントを書けるようにしている。

アルス美容院のページのソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS">
<meta http-equiv="content-style-type" content="text/css">
<meta name="author" content="TOHOKU KOEKI-U">
<meta name="description" content="酒田市もっけだの中通り商店街の公式ページです。店舗情報やイベント情報を随時更新しています。">
<meta name="keywords" content="酒田市,中通り商店街,店舗情報,イベント情報">
<link rel="stylesheet" href="../default.css" type="text/css">

<link rel="shortcut icon" href="../img/favicon.ico">
<title>もっけだの中通り商店街 | アルス美容院</title>
</head>


<body>

<!--外側の枠-->
<div id="container">


<!--トップの画像-->
<div id="header" style="background-color:#006600">
<p><a href="http://mokkedano.jp/">もっけだの中通り商店街</a></p>

</div>
<!--トップの画像ここまで-->

<!--左側メニュー-->
<div id="left">
<p>

<a href="../event/index.html"><img src="../img/event.jpg" onmouseover="this.src='../img/event2.jpg';" onmouseout="this.src='../img/event.jpg';" style="border-style:none"></a>

<a href="../shop.html"><img src="../img/shop.jpg" onmouseover="this.src='../img/shop2.jpg';" onmouseout="this.src='../img/shop.jpg';" style="border-style:none"></a>

<a href="http://mokkedano.jp/wordpress/"><img src="../img/blog.jpg" onmouseover="this.src='../img/blog2.jpg';" onmouseout="this.src='../img/blog.jpg';" style="border-style:none"></a>

<a href="../map.html"><img src="../img/map.jpg" onmouseover="this.src='../img/map2.jpg';" onmouseout="this.src='../img/map.jpg';" style="border-style:none"></a>

<a href="../access.html"><img src="../img/access.jpg" onmouseover="this.src='../img/access2.jpg';" onmouseout="this.src='../img/access.jpg';" style="border-style:none"></a>

<a href="../park.html"><img src="../img/park.jpg" onmouseover="this.src='../img/park2.jpg';" onmouseout="this.src='../img/park.jpg';" style="border-style:none"></a>

<a href="../job.html"><img src="../img/job.jpg" onmouseover="this.src='../img/job2.jpg';" onmouseout="this.src='../img/job.jpg';" style="border-style:none"></a>

<a href="../history.html"><img src="../img/history.jpg" onmouseover="this.src='../img/history2.jpg';" onmouseout="this.src='../img/history.jpg';" style="border-style:none"></a>

<a href="../link.html"><img src="../img/link.jpg" onmouseover="this.src='../img/link2.jpg';" onmouseout="this.src='../img/link.jpg';" style="border-style:none"></a>

<a href="http://mokkedano.jp/cgi-bin/cmfmail.cgi"><img src="../img/mail.jpg" onmouseover="this.src='../img/mail2.jpg';" onmouseout="this.src='../img/mail.jpg';" style="border-style:none"></a>
</p>
</div>

<!--左側メニューここまで-->

<!--中央カラム-->
<div id="main2">

<p class="center"><img src="../img/info.png" width="660" height="40" alt="基本情報"></p>

<table border=0 style="margin-right:auto; margin-left:auto">
<tr>
<td style="width:320px; vertical-align:top"><h1>アルス美容院</h1>

<ul>
<li>住所：酒田市中町1-10-20</li>
<li>営業時間：</li>
<li>定休日：月曜日、第3日曜日</li>
<li>電話：0120-22-2544</li>
<li>ファックス</li>
<li>外部HP：</li>
<li>ブログ：<a href="http://mokkedano.jp/wordpress/">http://mokkedano.jp/wordpress/</a></li>
</ul>

</td>
<td style="width:320px; vertical-align:top">
<p class="center"><img src="arusu1.png"></p>
</td>
</tr>

<tr>
<td colspan="2">
<p>美しく装う貴女を大切に<br>
ライフスタイル〜婚礼まで、アドバイス致します。</p>
</td>
</tr>
</table>


<p class="center"><img src="../img/reco.png" width="660" height="40" alt="オススメ商品"></p>

<table border=0 style="margin-right:auto; margin-left:auto">
<tr>
<td style="width:320px; vertical-align:top">
<p class="center"><img src="arusu2.png"></p>
</td>

<td style="width:320px; vertical-align:top">
<p>頭も体も美しくよみがえる<em>ジュバンストリートメント</em><br>
ぜひ、おためし下さい。</p>
</td>

</tr>
</table>

<p class="center"><img src="../img/com.png" width="660" height="40" alt="公益大生のひと言"></p>

<div style="width:640px; margin-right: auto; margin-left: auto">
<p>この文章はサンプルです。この文章はサンプルです。この文章はサンプルです。この文章はサンプルです。この文章はサンプルです。この文章はサンプルです。この文章はサンプルです。この文章はサンプルです。この文章はサンプルです。この文章はサンプルです。この文章はサンプルです。</p>
</div>






</div>
<!--中央カラムここまで-->



<!--footer-->
<div id="footer">

<p style="text-align:center">Copyright © 2007-2008 酒田市中通り商店街振興組合 All rights reserved. </p>
</div>
<!--footerここまで-->

</div>
<!--外側の枠ここまで-->

</body>

</html>