2020年ウェブサイト作成講習会

実習内容

リンクの設定

同じ階層のページへリンク

  1. 「odekake.html」を作成し「text」フォルダーに保存します。
  2. このファイルから「text」に既存の「report.html」に下記によりリンクを設定します。
  3. <p> <a href="report.html">2019年6月 USJ</a> </p>
    同じ階層へのリンクは hrefの内容はファイル名のみ記載します。

下の階層のページへリンク

  1. 「text」フォルダー内に「diary」フォルダーを作成します。
  2. 「diary」フォルダー内に「park.html」を作成します。
  3. 「diary」フォルダー内に「text」に既存の「zoo.html」をコピペし「zoo2.html」として保存します。
  4. 「zoo2.html」の画像の参照先を修正します。
  5. 「odekake.html」を作成し「text」フォルダーに保存します。
  6. 下記により「odekake.html」から「park.html」及び「zoo2.html」へのリンクを設定します。
  7. <p> <a href="diary/zoo2.html">2018年12月 動物園</a> </p>
    <p> <a href="diary/park.html">2017年10月 公園</a> </p>

上の階層のページへリンク

  1. 下記により「zoo2.html」から「odekake.html」」へのリンクを設定します。
    <a href="../odekake.html">お出かけ日記へ戻る</a>
  2. 下記により「park.html」から「odekake.html」」へのリンクを設定します。
    <a href="../odekake.html">お出かけ日記へ戻る</a>

他サイトへリンク

  1. 「hatsumoude.html」を作成し「text」フォルダーに保存します。
  2. ブラウザで「明治神宮」、「成田山新勝寺」及び「川崎大師」の公式サイトを開きそれぞれのURLをコピーします。
  3. 下記によりそれぞれのサイトへのリンクを設定します。
    <a href="http://www.meijijingu.or.jp/" target="_blank">明治神宮</a>
    <a href="http://www.naritasan.or.jp/" target="_blank">成田山新勝寺</a>
    <a href="http://www.kawasakidaishi.com/" target="_blank">川崎大師</a>
    「target="_blank」を追記することにより新しいタブで開くようになります。

画像へのリンク設定

  1. 「odekake.html」のライオン画像から「zoo2.html」
  2. <a href="diary/zoo2.html"><img src="../images/lion.png" alt="動物園へ"></a>

文書の中の特定の場所へリンク

  1. 「text」フォルダーの直下に「dict」フォルダを作ります。
  2. 「it.html」を作り「dict」フォルダに保存します。
  3. 「it.html」の各h2要素無いのa要素にリンクの目印としての「ID」を設定します。
  4. 「terms_index.html」を作り、「text」フォルダに保存します。
  5. 「terms_index.html」のリンク元のa要素のhrefには、「it.html」のURLに続けて設定したID名を「#」の後に記載します。
    <a href="dict/it.html#homepage">ホームページとは</a>
    <a href="dict/it.html#browser">Webブラウザとは</a>
    <a href="dict/it.html#html">HTMLとは</a>

トップページからリンクを張る

  1. 当講習会で作成してきたファイルをトップページから辿れるようにリンク設定しました。
    見出し「スタイル指定作品」を追加し、作品一覧を並べ、該当のファイルへリンクを張ります。
    見出し「リンクの設定作品」を追加し、作品一覧を並べ、該当のファイルへリンクを張ります。
  2. トップページへ戻るリンクを入れる。
    作成したページの最下部にトップ「index.html」ページへ戻るリンクを挿入しました。
  3. 参加者一覧ページへ戻るリンクを張る
    トップページ「index.html」から参加者全員の名前が表示されているページへのリンクを張ります。
    <p> <a href="../../text/member.html">参加者一覧ページへ戻る</a> </p>
    注：各自のローカルサイトには「member.html」は存在しないので、リンク外れになります。サイトに転送したときに有効になります。

トップページからリンクを張る

  1. Bracketsの拡張機能「SFtpUpload」でローカルサイトをアップロードします。
    「SFtpUpload」がインストールされいない場合は「拡張機能マネージャー」から「SFtpUpload」を検索してインストールします。
  2. Brackets画面下部に「SFTP Upload」ボタンをクリックします。
  3. SFTP Settingsダイアログボックスに必要事項を入力します。
    Type FTP
    Host ftp.gmobb.jp
    Port 21
    User Name pasobora04@kanto.me
    RSA Key Path (optional)
    Password ********
    Server Path 20/attendant/****/

    Server Pathの****は参加者個人に割り振られた名前

  4. ファイルをサーバーに転送するには以下の方法を取ります。
    • ファイルと保存すると「SFTP Upload」パネルにファイル名が表示されるのでライブプレビューで正しく記載られていることを確認して「Upload」ボタンをクリックします。（注：「Upload All」をクリックすると保存されたすべてのファイルが転送され不必要なファイルも転送されるので使わない方が無難です。）
    • 画面左のパネルでファイルを右クリックし、「Upload via SFTP」をクリックします。