LogoMark.png

リカレント講座/Webデザイン/第3回

福岡商工会議所x九州産業大学 リカレント講座

Webデザイン基礎講座 第3回


事後の補足説明

講習、お疲れ様でした。24日の授業終了後、サーバーへのアップロードについてのご質問「何をどうアップすればいいのか」を多くいただきました。第1回の授業では、十分なご説明ができておりませんでしたので、以下、説明記事を再掲載いたします。


以下、第1回の 6.3 - 6.5 の説明を再掲載します。
X-Free レンタルサーバーを前提とした説明になっています。
参考:X-Free レンタルサーバーの利用手順



6.3. FTP接続情報について

レンタルサーバーを使ったWebの公開で、最終的に必要となるのは、FTP接続情報です。これは、当該サービスのサイトで「管理画面」ログインすると「サーバー管理情報>FTP接続情報」で確認することができます。FTP接続には、一般に以下3つの情報が必要です。

6.4. サーバーへの接続

FileZilla1.jpg
FileZilla2.jpg
FileZilla3.jpg
手順2手順3・4手順6


6.5. サーバーへのアップロード

FTPクライアントツールは、一般に左にローカルマシン(自分のPC)のディレクトリ、右にリモートサーバー(レンタルサーバー)のディレクトリーが見えます。ローカルにあるサイトの中身をそっくりそのまま(相対的な位置関係を変えずに)リモートにアップする・・というかたちで、Webサイトは公開されます。

つまり、サーバー(ディレクトリ)がひとつあれば、フォルダの数の分だけ複数のWebサイトを持つことができる…ということになります。

付記

X-Freeサーバーの場合、ドキュメントルート直下に見える index.htmlとPNG画像は、「このウェブスペースへは、まだホームページがアップロードされていません。」というメッセージを表示するためのものなので、通常、これを削除して、その代わりに、制作した index.html 以下のファイル群をそのままアップします。結果は、以下のようになります。
http://opensquarejp.html.xdomain.jp


CONTENTS




はじめに

本日の講習内容

Googleアカウントの確認

お手元のパソコンで Googleにログインしていただき、Gmail等の閲覧ができることをご確認ください。
https://www.google.co.jp/

レンタルサーバーの確保方法

事例:X-Free レンタルサーバーの場合 > RentalServer/Account




1. 前回の続き

CSSによるレイアウトの手法

以下のリンクから、第2回のページをご覧ください。
CSSによるレイアウトの手法

演習:テンプレートの展開

補足:Aタグ href属性の応用

2. クラウドストレージの活用

GoogleDriveを事例に説明します。GoogleDriveとは、Googleが提供するオンラインストレージサービスで、ファイルの保存・管理のみならず、GoogleDocsアプリケーションを活用した共同編集などが可能になります。
 必要なものは、Googleのアカウントのみ。Chrome 等の Webブラウザから利用することができます。 Google にログインして、以下にアクセスして下さい。

https://drive.google.com/
注)はじめて利用する場合は、説明が表示されるので、読み進めて下さい。

2.1. 概要と基本操作

2.2. Google Docs

GoogleDocs は GoogleDrive を主たるストレージ(保存場所)とするオフィス系のアプリケーションです。Googleアカウントでログインすることで、ブラウザから利用することができます。
 作成したデータは、GoogleDrive 上に保存されるだけでなく、自分の手元に様々な形式でダウンロードすることもできます。
https://www.google.com/docs/about/

2.3. ファイルの共同編集

GoogleDocs で作成したファイルは、そのリンク先を知っている複数の参加者によって共同編集することができます。

演習:共同編集シートの作成

Googleドライブ上に共同編集可能なスプレッドシートを作成し、ご自身のWebページから誘導リンクを作成してみましょう。

3. 最後に

入門書購入のキーワード

学習に必要なキーワードは以下です。DreamWeaver や HomePageBuilder といった単語がある書籍は、当該ソフトウエアの使い方に多くの紙面を割いていますので、ご注意下さい。「本書では、テキストエディタを使います」といったスタンスの書籍がおすすめです。

トラブルシューティングについて

開発中によく生じる問題とその解決方法について記載しています。

ブラウザの分析ツールについて

ブラウザにはページのHTML構造や、CSSの内容を分析ツールがあります。

レスポンシブデザインについて

JavaScript について

CMS について

その他

情報共有のための意識改革について

以上をもって本講座は終了です。お疲れ様でした。


同様の講座のページとの混乱を避けるため、本講座のページの公開は、2020年12月31までといたします。以後もご利用されたい場合は、当該ページを>印刷>PDFとして保存・・などの方法でお手元に残して下さいますようお願い申し上げます。複製、流用等ご自由に扱っていただいて構いません。



PAGES

GUIDE

DATA

Last-modified: 2020-11-24 (火) 15:00:37