皆さんこんにちは。
今回はindex.htmlを編集してみたいと思います。
研究会発足当時はホームページビルダーのソフトを使っていましたが
今はhtmlファイルをエディターで編集することを教えています。
お渡ししたソースを、ホームページビルダーで編集すると形が崩れる場合が
ありますので、Notepad++で編集することをお勧めします。
１．上の画像のindex等ファイルを開きます。
①ファイル名にカーソルを当て、右クリックで・・・プログラムから開く
グーグルクロームorMSエッジ
②もう一度、ファイル名にカーソルを当て、右クリックで・・・プログラムから開く
Notepad++ で開きます。（Notepad++のダウンロード）
③ブラウザで開いておくのは、編集して保存したら結果を確認するためです。編集しながら
何度もこちらで確かめます。
※このテンプレートは、htmlファイルをいくつも作らないで、index.html一つで
動いているものです。galleryなどのメニューに飛んでも、画面右下に上向き矢印が
出てくるので、それで最初のメニューに戻るようになっています。
2.ファイルの中身・・・header部分より上は省略しています。
<nav>
<ul>
<li><a href=”#about”>ABOUT</a></li> メニュー部分
<li><a href=”#gallery”>GALLERY</a></li>
<li><a href=”#access”>ACCESS</a></li>
</ul>
</nav>
<ul class=”icons”>
<li><a href=”#”><i class=”fab fa-facebook”></i></a></li> ←facebokk
<li><a href=”#”><i class=”fab fa-twitter”></i></a></li> ←twitter
<li><a href=”#”><i class=”fab fa-youtube”></i></a></li> ←youtube
<li><a href=”#”><i class=”fab fa-instagram-square”></i></a></li> ←Instagram
facebook,twitter,youtube,instagramをもっている人は
上記のそれぞれの行の＃の部分に、自分のアドレスを入力します。
facebook,twitter,youtube,instagramをもっている人は
上記のそれぞれの行の＃の部分に、自分のアドレスを入力します。
</ul>
</div>
<!–/#text–>
</div>
<!–/#menubar–>
<!–スライドショー–>
<aside class=”mainimg-tate”></aside>
<aside class=”mainimg-yoko”></aside>
※imagesフォルダの中にあるtate_1.jpgから３までと、yoko_1.jpgから３までのスライとショー設定部分
</header>
<main>
<div id=”about”>
<section class=”up”>
※以下、お知らせ、東京深川周辺などの言葉を自分に合わせて書き換えます。
<h2>NEWS<span>お知らせ</span></h2>
※お知らせの文字だけを削除して、書き換えます。
※以下の部分も、撮影会やギャラリーサンプルなどの文字を書き換えます。
※その前後の<>などを間違って消さないように注意します。
※以下の部分も、撮影会やギャラリーサンプルなどの文字を書き換えます。
※その前後の<>などを間違って消さないように注意します。
<dl id=”new”>
<dt>2023/06/13<span>撮影会</span></dt>
<dd>東京都深川周辺</dd>
<dt>2023/06/17<span class=”icon-bg1″>ギャラリーサンプル</span></dt>
<dd>写真２０枚用作ってみました。(順不同）</dd>
</span></dt>
<dd>個人ギャラリー１</dd>
</dl>
</section>
※Notepad++で保存します。
※Notepad++で保存します。
※保存出来たら、1.の①と③で述べてあるように、ブラウザで保存された結果が
ちゃんと表示されるか、更新をクリックして確認します。
うまくいかない場合は、エディタに戻って書き直して繰り返し行います。
※自宅で出来上がったら,USBメモリー等に保存して定例会にお持ちください。
※研究会のサーバーにアップロードします。
