LogoMark.png

Webデザイン/2020/0519

第3回 学習環境の準備

Webデザイン/2020造形短期大学部|2020.05.19

第3回目の展開と要件


以下、順に説明しますので、お読み下さい。



本日のメニュー


はじめに

第3回目以降の遠隔授業でも、受講生専用のページを利用します。
 受講生のページ ブックマークしておいて下さい。

1. 学習環境の整備

はじめに、あなたのPC上に、Web制作の環境を準備していただきます。以下の2種類のツールを使います。いずれもOpenSourceです。無料でダウンロードして使えるので、自宅の学習環境に準備しておいてください。

テキストエディタ

ブラウザ

FTPクライアントは?

1年次後期のWebデザイン基礎Bでは、FileZilla という FTPクライアントを使って、Webサイトの構成ファイルを大学のサーバーにアップロードする・・という作業を行いましたが、本授業では、GitHub という通常のレンタルサーバーとは異なる仕様のリポジトリ(データの溜池)を使ってWebサイトを公開するので(その作業は次週説明します)、FTPクライアントソフトは不要です。



2. 基本サンプルのダウンロードと動作確認

受講生の中には、Webデザイン基礎A, B の受講経験のない方もいるかと思います。そこで、まずは、Webサイトを構成するファイルを丸ごとダウンロードしていただき、それを改編しながら、各ファイルの役割を確認していただきたいと思います。

サンプルのダウンロードと解凍

HTML+CSS によるWebサンプルです。以下から丸ごとダウンロードして、フォルダを開けてみて下さい。

サンプルの表示確認

サンプルは以下と同じ形で表示されるはずです。
https://koichi-inoue.github.io/SampleSite/

サンプルのフォルダについて

3. ソースコードをテキストエディタで編集

では、さっそくサンプルを編集してみましょう。

本日は、みなさんの手元で作業を行なうのみです。演習の進捗確認については、次週以降、相互に閲覧可能となる仕組みをつくりますので、それ以後、毎週進捗確認を行います。今日の段階では、手元のWebサイトフォルダをしっかり管理しておくようお願いします。

Webデザイン 初心者の方へ

HTMLとCSSの説明は後日になります。今日は、あなたのテキストエディタの使い方に慣れていただくために、軽く触るだけです。

テキストエディタを起動して下さい

体験のプロセス

編集体験のプロセスは以下のとおりです。事前にご確認下さい。

index.html の編集体験

まず、はじめに HTMLファイルの編集を体験します。


style.css の編集体験

次に、CSSファイルの編集体験を行います。

以上、「ファイルを書き換えたらページの表示が変わる」ということが確認できれば、OKです。




4. テキストエディタの操作演習

次回以降の演習に備えて、あなたのテキストエディタの基本操作と、コードの書き方について、学習しておいて下さい。

あなたのテキストエディタで、以下の基本操作を確認して下さい。

ATOM をお使いの場合は、以下に解説を書いています。

ソースコードの書き方について

文字コードについて




5. 特設サイトの更新

本日の成果、あなた自身の制作環境の構築結果について、特設サイトの各受講生のページに、下記の雛形をコピー&ペーストした上で、各項目をそれぞれの環境情報に修正して下さい。

== APPENDIX ==
===私の演習環境===
* OS: macOS  10.14.6(MacBook Air)
* Editor:Atom
* Browser:Chrome, Firefox, Safari
<br>


第3回目は、以上をもって終了とします。お疲れ様でした。




APPENDIX

第4回について

次回の演習では、みなさんの進捗を確認するための、Webサイトの公開方法についてご説明します。
 通常の授業であれば、大学のサーバーが使えるのですが、大学サーバーは学習用のため、学内ネットワークでしか閲覧ができません。そこで、Webサーバーの機能をもつ GitHub のアカウントを取得して、そこからWebサイトを相互に閲覧できるようにします。
 では、次回も同様に進めますので、よろしくお願いします。



PAGES

GUIDE

DATA

Last-modified: 2020-05-18 (月) 18:21:37