Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Website Overview


Published on

Introduce to website overview.

Published in: Technology, Design
  • Be the first to like this

Website Overview

  1. 1. We b si te o ve r v i ew
  2. 2. We b si te o ve r v i ew <ul><li>What is website (or web site)? </li></ul><ul><ul><li>A website is a collection of related web pages , images, videos or other digital assets that are hosted on one web server, usually accessible via the Internet. </li></ul></ul>
  3. 3. We b si te o ve r v i ew <ul><li>Website styles? </li></ul><ul><ul><li>Actually we can design a website in two different ways: </li></ul></ul><ul><ul><ul><li>Static website: is one that has web pages stored on the server in the format that is sent to a client web browser . It is primarily coded in Hypertext Markup Language (HTML). </li></ul></ul></ul>
  4. 4. Static website <ul><li>Advantages </li></ul><ul><ul><li>Quick and easy to put together, even by someone who doesn't have much experience. </li></ul></ul><ul><ul><li>Ideal for demonstrating how a site will look. </li></ul></ul><ul><ul><li>Cache friendly, one copy can be shown to many people. </li></ul></ul><ul><li>Disadvantages </li></ul><ul><ul><li>Difficult to maintain when a site gets large. </li></ul></ul><ul><ul><li>Difficult to keep consistent and up to date. </li></ul></ul><ul><ul><li>Offers little visitor personalization (all would have to be client side). </li></ul></ul>
  5. 5. We b si te o ve r v i ew <ul><li>2. Dynamic Website: is one that changes or customizes content automatically and/or frequently based on certain criteria. The page composition is usually data-driven and collates information each time a page is requested. </li></ul>
  6. 6. Dynamic Website <ul><li>A website can be dynamic in one of two ways. The first is that the web page code is constructed dynamically. The second is that the web page content displayed varies based on certain criteria. The criteria may be pre-defined rules or may be based on variable user input. </li></ul><ul><li>The main purpose of a dynamic website is that it is much simpler to maintain a few template pages and a database than it is to build and update hundreds or thousands of individual web pages and links. </li></ul>
  7. 7. We b si te o ve r v i ew <ul><li>What is webpage (or web page)? </li></ul><ul><ul><li>A web page is a document, typically written in (X)HTML, that is almost always accessible via HTTP , or less often HTTPS , a protocol that transfers information from the web server to display in the user's web browser. </li></ul></ul>
  8. 8. Web Design Tools <ul><li>​​​​ What tools are required to design a website quickly, error reducibility and to be a web professional?    There are a lot of development tools that they’ve used to design websites. Let’s see some Top Web Design Tools as the following: </li></ul>
  9. 9. Web Desi gn T ools <ul><li>Dreamweaver: is a commercial application for web development that’s available for the Mac and Windows operating systems. Its featured-packed suite of tools and options include: syntax highlighting and very smart Code Hinting, a built-in FTP client, project management and workflow options that make team work effortless, and Live View - which shows you a preview of your source code. </li></ul>
  10. 10. Web Desi gn T ools <ul><li>Photoshop: is a very popular commercial graphics editor available for the Mac and Windows operating system. Created for professional photographers and designers, it is the ideal application for manipulating images and creating web graphics. </li></ul>
  11. 11. Web Desi gn T ools <ul><li>Adobe Flash : is a popular method for adding animation and interactivity to web pages. Flash is commonly used to create animation, advertisements, and various web page components, to integrate video into web pages. </li></ul>
  12. 12. Web Desi gn T ools <ul><li>Firebug : Firebug is a free, open source in-browser web development tool for the Firefox web browser. It’s many features include: on-the-fly HTML and CSS editing for tweaking or debugging, a Console for logging, analyzing and debugging JavaScript, and an intuitive Document Object Model (DOM) inspection tool to help you quickly see how the elements of a web page relates to one another. </li></ul>
  13. 13. Web Desi gn T ools <ul><li>And: </li></ul><ul><li>Web Developer (FireFox Extension) </li></ul><ul><li>Aptana </li></ul><ul><li>Web Load </li></ul><ul><li>Web Page Analyzer </li></ul>M: What are you doing, boy? B: I am browsing my interested website.
  14. 14. Glossary <ul><li>HTTP: H yper T ext T ransfer P rotocol - the technology used to communicate between web servers and web users. </li></ul><ul><li>HTTPS: is &quot; H yper T ext T ransfer P rotocol&quot; with an added dash of &quot; s &quot;, or Secure Sockets Layer, another protocol primarily developed with secure, safe Internet transactions in mind. </li></ul><ul><li>HTML: H yper T ext M arkup L anguage. </li></ul><ul><li>XHTML: E Xtensible H yper T ext M arkup La nguage. </li></ul><ul><li>CSS: C ascading S tyle S heet. </li></ul><ul><li>DOM: D ocument O bject M odel. </li></ul><ul><li>WWW: W orld W ide W eb. </li></ul>
  15. 15. Next… <ul><li>Briefed by: Mr. Hy ChanHan, 7hours </li></ul><ul><li>Contact: [email_address] </li></ul><ul><ul><ul><ul><ul><li>011 711 756 </li></ul></ul></ul></ul></ul><ul><li>Follow me on Twitter </li></ul><ul><ul><ul><ul><ul><li> </li></ul></ul></ul></ul></ul>