LogoMark.png

Webデザイン基礎B/2020/0921

第2回 HTML+CSS サンプル体験

Webデザイン基礎B/2020|造形短期大学部|2020.09.21対面
情報共有シート特設サイト

AGENDA


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



本日のメニュー


1. 学習環境の確認

あなたのPC上に、Web制作の環境が必要です。以下の2種類のツールを使います。前回同様に、目の前のPC上で利用できる状態にして下さい。

テキストエディタ

ブラウザ

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>


以上、第2回目は、学習環境の準備とサンプル体験をもって終了とします。

第3回は「GitHubアカウント取得」作業を行うため遠隔授業となります。
教室(同一のIP)から全員一斉にアカウント作成は、相手から「攻撃」とみなされるらしく、うまくいかないことがわかっています。
次回の演習では、Webサイトの公開方法についてご説明します。
練習用に大学のサーバーも用意されていますが、学内ネットワークでしか閲覧ができません。そこでWeb配信の機能をもつ GitHub のアカウントを取得して、そこからWebサイトを相互に閲覧できるようにします。




PAGES

GUIDE

DATA

Last-modified: 2020-09-21 (月) 10:00:07