リストメニューで階層構造、絶対/相対パスを学ぶ

教科書161ページからの内容ですが、少し教科書と異なるので注意。

１．リストを作ろう

index.htmlに教科書162ページ、③のような<ul>のリスト（または以下）を作る。

<ul>
	<li>　<a href="03.html">　ばったになりたい魔法使い</a>
	<li>　<a href="02.html">　WordPressデザインワークブック</a>
	<li>　<a href="01.html">　Cafe Debut</a>
</ul>

２．同じリストを含むHTMLファイルを3つ作る

index.htmlをコピーして、01.html, 02.html, 03.htmlのファイルを作成する。

<title>の部分変更して違いが分かるようにする

３．全てindex.htmlと同じフォルダにいれる

ブラウザで確認するとindex.html以外では、相互リンクが行き来できるはず。

しかし、ファイルをフォルダ毎に分けて管理したいので、以下で階層構造を作っていく。

４．それぞれフォルダを作っていれる

index.htmlと同じフォルダに、
01.htmlを"about"、
02.htmlを"portfolio"、
03.htmlを"contact"というフォルダを作成して、入れる。 　

５．フォルダを考慮して、リンクを変更する

↓こんな感じに変更。

<a href="about/01.html">
<a href="portfolio/02.html">
<a href="contact/03.html">

６．01,02,03.htmlをすべてindex.htmlという名前にする

↓リンク名が省略可能になる。※webアドレスとしても省略可能になる。これで、大体教科書171ページ⑭と同じ階層構造になる（commonは除く）。

<a href="about/">
<a href="portfolio/">
<a href="contact/">

しかしこのままだと、相互リンクができていない（元のindex.htmlからはうまくいくが、逆ができない）。 portfolio, about, contactフォルダ に入っているindex.htmlのリンクは、以下のように変える。

<a href="../about/">
<a href="../portfolio/">
<a href="../contact/">

../は一つ上の階層への移動になる。 これで、階層構造内での相互リンクができたはず。

このように、自分のいる位置から相対的にみて、ファイルの位置をリンクするパスを 相対パス、 URL指定のリンクのパスを絶対パスという。

７．style.cssやnormalize.cssをリンクしなおす

教科書172ページ⑯の内容をする。

新たにcommonフォルダを作成し、その中にこれらの共通のファイルを入れて、各htmlファイルのリンクをし直そう。

宿題

1. 教科書を見ながら、今日学んだところまでのタグを全て使ってHTMLとCSSファイルを作成しなさい。ただし内容は教科書通りでなく、自分なりのコンテンツに変更してください。
2. 関連するファイル一式を、ウェブページとしてアップロードしなさい。
3. 関連するファイル一式を、自分の学籍番号のフォルダを作って授業フォルダに提出しなさい。
〆切：
授業のあった週の金曜正午

授業フォルダの場所：

\\nas002.term.usmc.dendai.ac.jp\授業用ワークスペース\千住キャンパス\前期\未来科学部\②情報メディア学科\FI1コンピュータプラクティス／Webページ制作(森本有紀)\第12回\提出