Web Design Miftahul Huda Digital Signal Processing Laboratory Medayu Selatan XI/11 Surabaya

Web Design 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 -

Web Design 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 How to build a Web site: 1. Open CuteHTML and type the following: Robby's Page This is a picture of my cat, Lou. 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!

Web Design What is a web site? Text & Graphics Printable information available at user’s terminal Animation (Flash) Video & Sound

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?

Web Design Web Page Elements Structure The arrangement of content Navigation The means by which content may be found Context The connection between menu and content groupings Content The goal of Web browsing

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

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

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

Getting Started Title goes here Body goes here Make your own folder (your_name) and sub folder (gambar, dokumen, …)

Getting Started