LogoMark.png

特定演習|情報デザインA/2020/0520

第4回 Web制作環境の準備

特定演習|情報デザインA2020.05.20

第4回目の要件

受講生情報

以下、まずは目次を見て、授業の全体を把握してから、順に読み進めて下さい。


本日の目次


はじめに

第3回目以降の遠隔授業でも、受講生専用のページを利用します。
[ 氏名 ]/WebDesign というサブページの存在を確認して下さい。
今後の演習の成果については、そのページを使って公開します。



1. 学習環境の整備

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

テキストエディタ

ブラウザ

FTPクライアントは?

本授業では、GitHub という通常のレンタルサーバーとは異なる仕様のリポジトリ(データの溜池)を使ってWebサイトを公開するので、FTPクライアントソフトは不要です。



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

まずは、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. 大学院サイトの更新

本日の成果、あなた自身の制作環境の構築結果について、大学院サイトのサブページ WebDesign に記載された以下の部分を、各自の環境に合わせて修正して下さい。

**APPENDIX
***演習環境
-OS: macOS  10.14.6(MacBook Air)
-Editor:Atom
-Browser:Chrome, Firefox, Safari
~


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



APPENDIX

次回、第5回について

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



PAGES

GUIDE

DATA

Last-modified: 2020-05-20 (水) 11:56:34