1 / 53

Web Design Basics: Tools, Skills, and Terminologies

This course covers file naming conventions, web design tools, essential skills, common terminologies, HTML basics, color schemes, advanced technologies such as CGI, ASP, Java, static vs. dynamic sites, CSS, graphic file formats, and image creation methods. Learn practical skills to design websites effectively to create a professional online presence.

jana
Download Presentation

Web Design Basics: Tools, Skills, and Terminologies

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. OBJECTIVES • Learn file names, formats, and applications • Discuss tools used in designing Web sites • Identify 5 general skills in designing Web sites

  2. FILE NAMES • Determines what type of application will be executed

  3. TOOLS • Computer – 486 up to latest model • Modem – Internet access • Browser – Application to view Web sites • Notepad – Application to create plain text documents • FrontPage – Application designed to create Web sites • Photoshop – Application to create graphic images

  4. WEB DESIGN SKILLS • Copywriter • Graphics designer • Structural architect (site hierarchy) • Technology (HTML, CSS) • Creativity (interactive site, good user experience, good first impression)

  5. WEEK 2 • Identify common traits of good Web sites • Basic terminologies such as Web hosting and domain names • Basic HTML structure and code • Color scheme and hex representation

  6. TERMINOLOGY • Internet – The physical infrastructure such as computers and telecom cables • Web – The information that flows on the Internet. Information can be found on Web sites connected to each other via hyperlinks • ISP – Internet Service Provider, companies that connects you to the Internet

  7. TERMINOLOGY • Web hosting – Servers on the Internet, whose purpose is to “serve” Web pages • Domain names – Words that are used in place of TCP/IP address • www.webphil.com • www.webphil.net • www.webphil.org • www.webphil.com.ph

  8. HTML • HTML – HyperText Markup Language • Language used to create Web pages • Written in plain English • Tags, elements, and attributes

  9. HTML (Document Structure)

  10. HTML (Line Structure)

  11. COLORS • RGB – Red, Green, Blue

  12. COLOR CHART

  13. WEEK 5 • Basic discussion on advanced technologies such as CGI, ASP, Java, JavaScript, and Flash • Discuss static vs. dynamic Web sites • Learn the concept of Cascading Style Sheets

  14. CGI • Common Gateway Interface • CGI scripts are used to make interactive Web sites such as forms • Scripts can be created using Visual basic, C, or Perl • Resource intensive, may overload Web servers

  15. ASP • Active Server Pages • Alternative to CGI scripting without the performance degradation of CGI • ASP scripts are created using VBScript or Jscript, enclosed in <%…%> symbols • Allows Web sites to be dynamic • Works only on Microsoft’s IIS Web server software

  16. JAVA • Developed by Sun Microsystems • Programs that are hardware and operating system independent • Web browsers download Java Applets and is processed by the PC • Clocks, calculators, and games can be inserted on a Web page

  17. JAVASCRIPT • Developed by Netscape • Scripts are inserted into the HTML code • An interpreted language, executed line by line in real time • Detecting browser version, pop up windows, digital clock

  18. FLASH • Developed by Macromedia • Used to create animations and special effects • Works only on browsers that are compatible with Flash

  19. STATIC VS. DYNAMIC • Static Web sites display information that is hard coded into the HTML of a Web page • Dynamic Web sites display contents taken from a database • Different information can be displayed on a Web page without altering the HTML code • Microsoft’s Active Server Page

  20. CSS • Cascading Style Sheets • A Web standard that allows the separation of structure from visual presentation • HTML creates structured documents (e.g. paragraphs, headings) • CSS improves the visual presentation (e.g. colors, font types, positioning) • CSS adds “style” to an HTML document

  21. WEEK 8 • Overview of graphic file formats • How to get graphic images • Demonstration of a software used in creating graphic images

  22. GRAPHIC FILE FORMATS • Bitmap • JPEG • GIF • PNG

  23. GRAPHIC FILE FORMATS • BITMAP • Covers the entire class of graphics that stores image information as pixels in a grid. • JPEG, GIF, and BMP are bitmaps

  24. GRAPHIC FILE FORMATS • JPEG • Joint Photographic Experts Group • Compression scheme allows images to be 100 times smaller in file size • Higher the compression, the lower the quality of the image • Generally used for photos

  25. GRAPHIC FILE FORMATS 14,978 bytes 3,380 bytes 2,570 bytes

  26. GRAPHIC FILE FORMATS • GIF • Graphic Interchange Format • Limited to 256 colors • Generally used for images that have diagrams and text • Compression is achieved by reducing the amount of colors in an image • Can have a transparent background

  27. GRAPHIC FILE FORMATS 302 bytes 416 bytes 419 bytes 302 bytes 473 bytes 608 bytes

  28. GRAPHIC FILE FORMATS • PNG • Portable Network Graphics • Developed to replace GIF • Generally smaller in file size • Not fully supported by browsers • Does not support animation

  29. GETTING IMAGES • Scanning • Digital cameras • Photo CD • Graphic designer • Download or buy from Web sites • Create your own graphics

  30. WEEK 9 • Discuss Mid Term results • Demo how to create animated GIF • Analyze results of homework 1 and 2 • Analyze visual and technical difference of Web award winners vs. popular Web sites • Analyze Internet surveys (population, screen resolution, browser types) • Companies that offer template based Web sites • Topic: Discussion on home based Internet business

  31. HOMEWORK 1 Content – informative, up to date information, email, downloads Navigation – search capability, easy to navigate, information well organized Visual design – high quality images, colorful Functional – loads quickly, browser compatibility, live links

  32. HOMEWORK 1

  33. ANALYSIS

  34. OTHERS • Show word document on Internet survey • Show Web sites of companies that offer Web templates • Discuss home based Internet business

  35. PAGE LAYOUT • Position of logo • Position of navigation links • Visual impact (e.g. color scheme) • Screen setting of monitors (640x480, 800x600, 1024x768) • Screens of information • Typography • Page length

  36. SCREEN SETTINGS

  37. TYPOGRAPHY Serif fonts

  38. TYPOGRAPHY Sans serif fonts

  39. PAGE LENGTH • Short web pages • Homepage • Keep page size small • Content design to be read online • Long web pages • Easy maintenance • Easier to print and download content

  40. WEEK 10 • How to put up an e-store • Web site testing procedures • Case study: webphil.com • Web design tips • Analyze promotional techniques • Software (browser sizer, HTML code checker) • Film clip (CNN documentary on the dot com era 1999 – 2001)

  41. SPEED TIPS • Keep Web pages below 30KB • Include height and width attributes for images • Use only optimized JPEG or GIF, never BMP • Leave out unnecessary HTML attributes • Keep filenames short

  42. COMPATIBILITY • Design for all types of Web browsers • Design for different screen resolutions • Use standard HTML as defined in www.w3c.org

  43. COLORS • Limit color scheme to 3 to 4 different colors • Stick to the 216 Web safe colors • Define colors using the hex equivalent • Always define a background color, even if it is white

  44. TYPE • Use easy to read fonts such as verdana and arial • Try not to define the font size, but if must • Arial at font size = 2 • Verdana at font size = “8pt” • Limit the number of characters per line between 50 to 70 • Specify font alternates

  45. GRAPHICS • Save images at 72dpi • Use alt text tag for images • Compress images to the limit of acceptable image quality • Define height and width attribute • Create images in the exact size to be used in a Web page • Graphics to display the exact font

  46. HTML • Use HTML checker software to check for coding errors • Tables can be filled with colors • Use relative links • Remove unnecessary code • Use meta tags

  47. PAGE DESIGN • Ensure sufficient contrast between text and background • Use grids and tables for page layout • Design within image safe areas • Avoid the need for scrolling

  48. NAVIGATION • Use default colors for hyperlinks • Provide text hyperlinks • Consistency in placement • Provide links to the homepage on every page • Provide a cue as to where a user is in the Web site

More Related