LogoMark.png

Webデザイン演習/2021/0413

第1回 ガイダンス + 最初のサンプル公開

Webデザイン演習/20212020.04.13

AGENDA

CONTENTS




はじめに

演習の進め方


サンプルの整理と公開方法

学習のキーワード




1. 学習環境の整備

はじめに Web制作の環境を準備します。以下の2種類のツールを使いますので、アプリケーションフォルダから見つけてドックに登録して下さい。いずれも OpenSource です。無料でダウンロードして使えるので、自宅のPCにも準備しておいてください。

テキストエディタ

ブラウザ


2. WebサイトとHTML

2.1. Webサイトの構成

folder.jpg

一般にWebサイトは複数のファイルから構成されます。Web制作では、はじめにWebサイト用のフォルダを作り、関連するファイルを、すべてそのフォルダで管理するようにします。

注)フォルダ名、ファイル名は必ず半角英数で
images page01.html page-01.html page_01.html logoMark.jpg など、
Webサイトを構成するフォルダやファイルの名称は、すべて英字ではじまる半角英数で命名します。日本語や特殊記号、またスペースも不可です。


2.2. HTMLとは

HTML(HyperText Markup Language)とは、ページの内容を記述するためのマークアップ言語です。文章や画像はもちろん、リスト表記や表組み、他のドキュメントへのハイパーリンクも設定できます。
 HTMLファイルは、ごく普通のテキストファイル(文字が並んだだけのもの)なので、テキストエディタ(メモ帳のようなもの)で書いて、保存するだけで完成します。

以下、よく使うHTMLタグを列挙します。詳細後日、眺めるだけでOK。


2.3. はじめの1ページ

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Sample Page</title>
  </head>
  <body>
    <h1>見出し</h1>
    <P>
      本文|適当に文章を書いて下さい。
    </P>
  </body>
</html>


2.4. HTMLをブラウザで表示するには

このHTMLのソースコードは、ブラウザというWeb閲覧ソフトによって画面上に描き出されます。index.html の表示を確かめるには、ブラウザのウインドウに、当該ファイルをドラッグ&ドロップしてみて下さい。

2.5. 基本のタグについて解説します。

2.6. きれいなソースコードを書くために

ソースはそれ自体、見やすく書くのが基本です。

2.7. 文字コードについて

3. GitHub を用いたサンプルの公開

当演習では、制作したサイトのサンプルを GitHub で公開します。

3.1. そもそも、GitHubとは?


3.2. アカウントの作成


3.3. リポジトリの作成

リポジトリとは、Webサイトやファイルセットなどを GitHub 上で管理するためのプロジェクトフォルダ・・とご理解下さい。リポジトリはいくつでも作ることができるので、その数だけサイトを作ることができます。

index.html ファイルが一つだけしかない小さなWebサイトでも、1サイト = 1プロジェクトになるようにして下さい。「いくつかのサイトをグループにまとめて1つのリポジトリに入れた方がわかりやすい?」と思うかもしれませんが、カテゴリー分けというのは、そこからはみ出したり、どちらに入れるか迷うものも出てきます。グルーピングは、後からリンク集でまとめればいい・・と考えて、シンプルな構成を考えて下さい。

以下、リポジトリの作成手順です。GitHub上にフォルダをひとつ作る・・という感覚でイメージして下さい。


GitHubPagesNew.png
GitHubPages01.png


3.4. ファイルのアップロード

GitHubPages02.png
GitHubPages03.png


3.5. 公開設定

サイトのファイルは、アップしただけでは公開されません。以下の設定操作によって公開されます。

GitHubPagesSettings.png
GitHubPages05.png


設定変更から公開まで数分かかることがあります。


3.6. 不要なリポジトリの削除

作業の過程で、間違った名称のリポジトリを作ってしまった場合は、以下の手順で削除可能です。

GitHubPagesDelete.jpg


付記:サイトの更新方法

ソースコードの更新には、以下の2つの方法があります。

いずれの場合も、Commit changes をクリックして更新が完了します。

リモートとローカルという言葉について

4. 本日の成果の書き込み

学科サイトの氏名/WebSample のページに以下の情報を書き込んで下さい。

4.1. 本日制作したWebサンプルを報告

以下のパターンで、HTML のサンプル(最低1件)をリンク掲載して下さい。

**HTML
-BASIC SAMPLE:https : //JohnSmith.github.io/html_sample_01/
~


4.2. 現在の作業環境についての報告

ページの一番下に、以下のような書き込みを加えて下さい。

**APPENDIX
***制作環境
-OS: macOS  10.14.6(MacBook Air)
-Editor:Atom
-Browser:Chrome, Firefox, Safari
-ImageEditor:Adobe Photoshop CC
~

***公開リポジトリ
-GitHub:https : // github.com/JohnSmith
~


以上で、本日の授業は終了です。お疲れさまでした。


PAGES

GUIDE

DATA

Last-modified: 2021-04-20 (火) 13:49:35