1 / 16

Web Design

Web Design. Miftahul Huda Digital Signal Processing Laboratory huda@eepis-its.edu http://lecturer.eepis-its.edu Medayu Selatan XI/11 Surabaya. Content: Target : Develop your own personnel Web Site and upload all files to the free web hosting (Geocities, 100Webspace.net, co.cc, dll)

michi
Download Presentation

Web Design

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. Web Design • Miftahul Huda • Digital Signal Processing Laboratory • huda@eepis-its.edu • http://lecturer.eepis-its.edu • Medayu Selatan XI/11 Surabaya

  2. Content: • Target : Develop your own personnel Web Site and upload all files to the free web hosting (Geocities, 100Webspace.net, co.cc, dll) • Topics: • Basic WEB Design • Introduction To HTML • CASCADING STYLE SHEETS • Photo editing using PhotoShop • Evaluation • -Homework + Project (30%) • -Mid Test (30%) • -Final Test (30%) • Lecture Materials • -http://lecturer.eepis-its.edu/~huda/PJJ Web Design

  3. Tools • Low-end web editors • CoffeCup HTML, • CuteHTML, etc • Higher-end web design software—e.g., • DreamWeaver • Highly flexible • More difficult to use • MS FrontPage • Easier to use • Automatic standard formatting • By default somewhat less sophisticated Web Design

  4. Web Design How to build a Web site: • 1. Open CuteHTML and type the following: • <html> • <head> • <title>Robby's Page</title> • </head> • <body> • This is a picture of my cat, Lou.<br /> • <img src="cat.jpg“ /> • </body> • </html> • 2. Save the file as test.html on your desktop. • 3. Double-click the file’s icon on the desktop and, if you have a picture called cat.jpg, you should see a page similar to this one. • Thanks for joining!

  5. Web Design What is a web site? • Text & GraphicsPrintable information available at user’s terminal • Animation (Flash) • Video & Sound

  6. Web Design Who is your audience? How do they expect to get it? How do you know?Consider surveying your current visitors. Take inventory: • What information do you already have and what do you have to create? • Graphics... create, steal, or borrow? • How much information should you give? Any security issues?

  7. Web Design Web Page Elements • StructureThe arrangement of content • NavigationThe means by which content may be found • ContextThe connection between menu and content groupings • ContentThe goal of Web browsing

  8. Web Design Structure • Layout is not just decorative – it can also provide visual organization for your content. Google News http://10.252.13.90 Fairly simple structure and easily understood

  9. Web Design

  10. Web Design

  11. Web Design

  12. Web Design

  13. Web Design Things you can’t control • User's browser (type, version, plug-ins, etc.) • User's network speed • User's monitor • Browser window size • Image loading • Color • Fonts (type, size, character set) • ETC

  14. Web Design Things you can’t control User’s Language

  15. Getting Started Make your own folder (your_name) and sub folder (gambar, dokumen, …) <HTML> <HEAD> <TITLE>Title goes here </TITLE> <META name="description" content=""> <META name="keywords" content=""> <META name="generator" content="CuteHTML"> </HEAD> <BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#800080"> Body goes here </BODY> </HTML>

  16. Getting Started

More Related