Basic Web Design
Download
Report
Transcript Basic Web Design
Web Design
Miftahul Huda
Digital Signal Processing Laboratory
[email protected]
http://lecturer.eepis-its.edu
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
-http://lecturer.eepis-its.edu/~huda/PJJ
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:
<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!
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
http://10.252.13.90
Fairly simple structure
and easily understood
Web Design
Web Design
Web Design
Web Design
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
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>
Getting Started