Web Design Basic Training

Basic Web Design:

Requirements:

  • Computers – if possible at least 2 person share one computer or they can bring their laptop.
  • Software – Komeper
    • download at: http://downloads.sourceforge.net/project/kompozer/current/0.7.10/kompozer-0.7.10-win32.zip?r=http%3A%2F%2Fkompozer.net%2Fdownload.php&ts=1375559641&use_mirror=iweb

Session 1:

  1. Web design concept (5 to 10 min)– What is web design?
    1. web is actually called World Wide Web, it is a web of different computer in the world to share info with each other with a standard method. Therefore, there is three “W” in each web site.
    2. it is to share and show information (graphic / text / programs) through the web browser.
    3. These information is put into a file in order to share, and we called it HTML Files,
    4. These HTML files are viewed by web browser such firefox, internet explorer, chrome and etc.
    5. These HTML files is basically text files with special codes.
    6. These codes controls different things the texts, graphics and things that shows in the browser, such as:
      • the format of the text and graphic, such as, size, color, different shape of text or graphics
      • its location, left or centre or right, or a position in the web browser.
      • Where it is link to
      • Attach a program
    7. In order to create them, there are two ways to do that:
      • write the code directly, which you can control more things and do more things in here.
      • use a HTML editor to create it for you in a way of “what you see what you get”. It means what you type in and see, you will actually see it in the browser.
    8. There are so many HTML editor in the world and they have their differences and similarity between them. Today I teach one that is free and popular that’s called kompoZer.
    9. Let’s open kompoZer HTML editor and create a HTML document
  2. HTML creation using kompoZer HTML editor and demonstration (45min)
    1. Use HTML Elements and form
    2. Use HTML Links
      • HTML link
      • Email link
    3. HTML Images and linkage image
    4. HTML Tables
    5. HTML Lists
    6. HTML Layout – use DIVs
    7. HTML Forms
    8. HTML JavaScript – simple javascript demonstration

Session 2: (Around 50 min)

  1. File Transfer to server and browse in real world.
  2. We will use my version of wordless book as an example to do an exercise to use the skill that teaches in Session 1.
  3. The format is like the following:  wordless book
  4. Then we will upload to a location.