Basic Knowledge of Web creation

Computer graphic knowledge Graphic file has 2 types Raster Graphic A bitmap or raster image are comprised of pixels in a grid. Each pixel or "bit" in the image contains information about the color to be displayed. Bitmap images have a fixed resolution and cannot be resized without losing image quality. Most bitmap images can be converted to other bitmap-based formats very easily. Bitmap images tend to have much large file sizes than vector graphics and they are often compressed to reduce their size. Vector Graphic Vector graphics are made up of many individual objects. Each of these objects can be defined by mathematical statements and has individual properties assigned to it such as color, fill, and outline. Vector graphics are resolution independent because they can be output to the highest quality at any scale. Vector graphics tend to have much smaller file sizes than raster-based bitmaps.

Color Mode for Computer Graphic Color spaces RGB - This color space is based on the primary additive colors of Red, Green, and Blue. This is the most common color mode used in graphics software CMYK - This color space is based on the ink colors used in traditional full-color commercial printing: Cyan, Magenta, Yellow, and black.

Resolution Resolution is a measurement of the output quality of an image, usually in terms of samples, pixels, dots, or lines per inch. The terminology varies according to the intended output device. Pixel is the smallest display element that makes up the images you see on a computer monitor or television. In bitmap-based images, the more pixels an image contains, the higher its resolution

File Format that use for Web Design File Format that use Website +Gif (Graphic interchange format) This file can have an animation and also can have transparency background such as Emotion icon +Jpeg (Joint Photographic Experts Group ) This file is a very common file that use in many field of work. +Png (Portable Network Graphics) This file is a good quality for creating graphic with transparency background. +SWF ( Shockwave flash) This is Flash animation file that is created from Adobe Flash. Actually,it is the most common animation and interactive file on the internet

Common elements of a web page HEADER Header usually includes the logo or the name of the website. It can also have the main navigation links (home, contact us, gallery, about us, etc). We put the site’s identity and important elements on the header. See my header above, I have my links for navigation and logo. SIDEBAR We can put secondary links to a sidebar, advertisement, and other notes. You can have a sidebar on the left, on the right or both. You can see my sidebar on the right. It contains advertisements and other links to different pages of this site.

Common elements of a web page MAIN CONTENT This part gives what the viewer needs in your web page. It contains the articles and images, and any information that your offer in your website. You are reading this article in the main content. FOOTER Footer contains not so important links or information such as copyright and contact detail.

HTML HyperText Markup Language (HTML) is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS), and JavaScript. We are going to use HTML as a main language to create a website in our class(ca2013).

Web design process 1. Concept Define Target audience, Goal, Aim 2. Navigation Flowchart sitemap, design the navigation, How user navigate make process easy. Example: Navigation Flowchart (site map) 3. Design Look and Feel or Mood ,Tone, Color, Font, Attractive, and Theme Program : Photoshop, and Illustrator 4. Programming Design Program : Dreamweaver, Flash ,Word press, Joomla and etc.. 5. Upload Find server and create domain name – ftp upload (File Transfer Protocol) Example: FileZilla

Web design process 6. Testing find out the error Web browser : Internet Explorer , File Fox, Safari, and etc.. 7. Promoting Make Traffic, E-Marketing Example: Web community , Web board , Banner 8. Maintenance Always check an error, Google Analytic.

Navigation Flowchart (site map)