Basic web designing

1. Basic web designing

2. What will you learn • Basic Html and css coding • Learn how to create a website from start • Learn how to use script for blog such as wordpress and might even have the time to design a template for wordpress • E-Commerce script for selling online and forum using phpbb • The standard for html coding for all browser and making it user friendly for common screen resolution

3. I want to learn more, how? • Well everything I learned is through www.google.com so believe me, google is your best friend! • There are MANY tutorials and e-book available for free • Good site recommend is http://www.w3schools.com/

4. What are the requirement • Domain name (EG: http://www.lzxe.net) with dns control • Sub domain will be used for this lesson • Web hosting • Ftp Client, smart ftp client will be used as educational purpose • Dreamweaver or notepad or relevant editor is required for web making

5. What are the prizes • Everybody will get a chance to create a website. • Regardless of using html or scripting • Top three awardie will receive • 1st free 1year .com or .net domain with 6 month free hosting by vishnu • 2nd and 3rd free 1 year .biz domain with 6 month free hosting by vishnu

6. Why create a website? • To share your knowledge with everybody on the world wide web • To earn reveune from advertisement such as google adsense. • To provide services such as selling goods or online services

7. What is domain name • Eg: www.lzxe.net, www.lalala.com, www.google.com • Sorry to say but domain names requires money. • Example for domain registration • Name.com, godaddy.com, aplus.net

8. Sub domains • As normal domain requires payment, we shall be using free sub domain • Example of subdomains are http://yoursubdomain.lzxe.net • Hosting will provided for this lesson • If you don’t like to use our sub domains, clock redirect domains are availed

9. Web Hosting • What is webhosting • A place to store your files at a server • Server are located at any country • Bandwidth and disc space are two of the most important factor • Common control panel are cpanel/plesk for linux, Helm/plesk/direct admin for windows • Therefore you might want to get a web host with a panel which you’re used to

10. Web Hosting cont • Web hosting located in Singapore will result in faster loading time for Singapore ISP but will result in slow for international user • It is recommend to get web hosting from other country such as US as its cheaper and faster for international users • Therefore it depends on your target of user • Bandwidth is the amount of data that can be carried from one point to another in a given time period • Example when you’re downloading file from the site, you’re using bandwidth

11. Web Hosting cont • Space requirement • A normal website for bogging requires less then 20mb if images are uploaded at external site like imageshack.us • Mysql are required for this lesson as we will be learning about scripting. • Basic html does not requires mysql database • For this lesson we will be using direct admin panel • For more information head down to www.webhostingtalk.com

12. Direct Admin

13. Accesing your ftp using smartftp • Under address type in ftp.lzxe.net or ftp.youraddress • Under login type in your login id • Under password type in your password • Now press enter

14. Ftp directory • As the webhost is linux, the directory is totally different from windows • /public_html will be main directory (this is where u place your files at) • Although not shown the full path directory Is /home/yourid/domains/youdomain/public_html • this will be used in some scripts

15. Html Lesson with dreamweaver • Standards • Index.html is the frontpage of the website, if index.html doesn’t exist index.php will be choosen • For example when accessing http://www.google.com your’re actually accessing http://www.google.com.sg/index.html • Index.html>index.php • However frontpage can be other file such as lala.html, you will be required to edit the .htacess file which we wont be teaching much on it

16. Introduction to dreamweaver • To create new site project click “site” then “new slide” • As we will be using our own ftp client, you may adjust the setting as shown

17. Introduction to dream weaver Cont • Setting your webpage properties • Title of the page can be adjusted at Title

18. Html Lesson with dreamweaver (images) • To decrease loading time we have to decrease files loaded on the site such as image • If a image is less then 256 colour, .gif is used to save space • Jpeg is commonly used for pictures more then 256 colour • Open the image with photoshop to edit the setting • Press “image” then “image size” (alt + Ctrl + I) to edit the image size • A monitor will not display more then 72 resolution, therefore we choose 72 to reduce size • (on to real example of showing)

19. Press “file” then “save for file and web device” and press 4up

20. Standard Screen resolution • What are the common resolution? • Currently In the world, most people are still using 800x600 screen resolution or 1024 x 768 • Therefore it was recommended for your site width to be around 768, we use 780 as some browser have problems with 768 on 800x600 • We will be using css style sheet to set fix width and auto centering the page

21. Css Style shit (where the hard part is) • First of all css stylesheet is one of the hardest among this tutorial. We will be learning how to do basic alighting style sheet and etc.