Web Design

1
Web Design
2
Internet What Is It?

• A matrix of networks that connects computers
  around the world. The internet is any
  interconnection of computer network, especially a
  global interconnection of government, education,
  and business computer networks, available to the
  public.

3
Intranet What Is It?

• A network that connects computers within a
  company or organization, perhaps around the
  world. An intranet is any interconnection of a
  computer network, that its access is limited to
  within that group or organization, and is not
  available to the public.

4
Networks

• LANS
• Local area network is a short-distance
  network used to link a
  group of computers together.
• WANS
• Wide area network can be made up of
  interconnected smaller networks (LANs) spread
  throughout a building, a state, or the world.

5
Client - Server Partnership

• The internet is a client - server relationship.
• You must have client and server software to
  communicate.
• If one is not available no communication can
  occur.
• The internet is platform independent.
• Different operating systems can access data.

6
What Is a Web Server?

• A web server is a computer that stores the web
  documents that the users access. Your internet
  service provider should have a web server on
  which you can up load your web pages
• The web server runs SERVER software such as
  APACHE or Microofts IIS (Internet Information
  Server)

7
What Is a Web Browser?

• A web browser is the software (Netscape, Internet
  Explorer or Opera) that accesses the internet and
  displays web pages, accesses e-mail accounts
  news groups and can be used to upload files.
• It is your CLIENT software.

8
Design for Most Browsers

• Parser is a program that interprets the markup
  tags in an HTML file and displays the results.
• Different generations of browsers can have
  conflicting interpretation of the way the HTML
  file is displayed.
• To ensure the work appears as you design it, test
  your work in many different browsers, including
  older browsers.

9
What Is a Web Page?

• A web page is an internet document that can be
  accessed by internet users with an HTML browser.
• By providing the browser with a unique address,
  or Uniform Resource Locator (URL), you open the
  page with that address. Web pages commonly
  provide text, pictures, or other graphics, and
  links to other pages.

10
URL What Is It?

• Uniform resource locator.
• A statement that specifies a transmission
  protocol and an internet identifying number
  (address), used chiefly for moving around on the
  world wide web.
• http//www.sandhills.edu/

11
URLs Three Parts

• Scheme the scheme describes the protocol that the
  client should use to access the resource.
• http // file/// ftp//
• mailto news https//
• Host the host is the domain name of the internet
  host.
• Path the path is the full path and possibly the
  file name of a document.
• http//www.sandhills.edu/resource.html

12
Protocols What Are They?

• http
• Hypertext transfer protocol The client/server
  protocol for displaying hypertext files on the
  internet.
• ftp
• File transfer protocol, allows sending
  retrieving files.
• mailto
• Used to send receive mail.

Protocol rules for exchanging information
between computers
13
Domain Names

• Typically when we see www.whatever.com that is a
  domain name.
• Domain names are the English like way of
  remembering web addresses.

14
First-Level Domain Names

• .com Commercial Organization
• .net Network Providers
• .gov Non-Military Federal Government Agencies
• .edu Educational Institutions
• .org Nonprofit Organization
• .mil U.S. Military Organizations

15
New Internet Domains

• .biz Business
• .info Informational Web Sites
• .name Personal
• .museum Museum Organizations
• .coop National Cooperative Business Association
• .aero Aviation
• .pro Certified Professionals
• To learn more about Internet Domains visit
  www.internic.com

16
Geographic Domains

• .us United States
• .au Australia
• .ca Canada
• .de Germany
• .dk Denmark
• .es Spain
• .fr France
• .gb Great Britain
• .hk Hong Kong
• .hu Hungary
• To learn more about Internet Domains visit
  www.internic.com

17
IP Addresses

• IP addresses are 32-bit numbers that we use in
  the dotted-notation, which means we use four
  octets separated by dots.
• 198.85.71.76
• The internet does not understand domain names.
• All domain names must be converted to IP
  addresses before a page request can be filled.

18
DNS

• Domain name system or domain name server
• Internet service for converting hostnames to
  internet addresses (domain names into IP
  addresses)

19
Standards for OS

• Character Exceptions
• Unix
• 255 characters
• Forward slash (/)
• Case Sensitive
• DOS Windows 3.X
• 8 characters
• - _at_ ! ( )
• Windows NT/98/XP
• 255 characters
• \ / lt gt
• Mac
• 31 characters
• Colon ()

20
Filenames

• File Extension
• HTML Files
• .htm
• .html
• Graphics Files
• .jpg (Joint Photographic Experts Group)
• .jpeg
• .gif (Graphics Interchange Format)
• .png (Portable Network Graphics)

• Main Page Names
• index.htm/html
• default.htm/html
• welcome.htm/html
• main.htm/html
• home.htm/html

21
File Organization

• Create folders/subfolders for different types of
  web files

22
Design the Whole Site

• Your Web site should reflect the impression that
  you or your organization wants to convey.
• Design unifying themes and structure.
• Create smooth transitions with consistency.
• Use a grid to provide visual structure.

23
Define the Purpose

• Your Web site should reflect the impression that
  you or your organization wants to convey.
• Design unifying themes and structure.
• Create smooth transitions with consistency.
• Use a grid to provide visual structure.
• Identify the topic
• Write a purpose statement

24
Identify the Audience

• Know your audience, and keep your design efforts
  centered solely around them.
• Develop and audience profile goals
• The look of the site must suit the audiences
  visual expectations, but you also should consider
  the ways in which users interact with the
  contentthe feel of the site
• Gather feedback

25
Planning the Content

• Select content that contributes to your
  objectives
• Text
• Images
• Audio
• Video
• Special Request Pages
• Do not include cutting-edge content just because
  you can

26
Planning the Structure

• Structure your information to achieve the Web
  site objectives
• Your web site should reflect the impression that
  your or your organization want to convey.
• Create a structural theme.
• Determine the position of your structure
• Use a grid to provide visual structure.
• Create smooth transitions.

27
Plan the Web Pages

• Organize your information
• Visual connection between your pages
• Create a unity within your site

28
Plan the Navigation

• Offer both major navigational paths and options
• Choose navigation elements your visitors can
  understand
• Place navigation elements in predictable, logical
  locations

29
Structure Navigation
Home Page (index.html)
Page 2
Page 3
Page 4
Home Page (index.html)
Page 2
Page 5
Page 3
Home Page (index.html)
Page 6
Page 2
Page 3
Page 4
Page 7
Page 4
Page 5
30
Navigation Guidelines

• Consistently place your primary navigation
  elements in the same location.
• The more common locations for navigation elements
  are at the top, bottom, or the side of a web
  Page.
• A common practice is to positions a graphic
  version of the elements at the top and a text
  version at the bottom of the Web page.
• All secondary pages should include a link back to
  the home page.
• Ensure the links on your Web pages are Functional
  (check external links frequently).
• Choose link terminology that give a realistic
  expectation of the content to be found.
• If you use graphics, as navigation elements,
  consider visitors who may have turned graphics
  off in their browsers.
• Use the ALT attribute (required, HTML 4
  standard).
• Provide text links in addition to the linked
  graphic elements.

31
Typography

• Restrict your type choices
• Stick with fonts users have installed
• Decide on font for each different level
• Page headings/titles
• Section headings
• Body text
• Font Families
• Serif Times New Roman, Times
• Sans Serif Arial, Verdana, Helvetica

32
Sample Viewing Patterns
33
Multiple Screen Resolutions

• Screen Resolution is the horizontal and vertical
  height and width of the computer screen measured
  in pixels.
• 640 X 480
• 800 X 600
• 1024 X 768
• Fixed Resolution Design the designer gives
  absolute widths
• Flexible Resolution Design the designer gives
  variable width

80 pixels to 1 inch Range from 72 96 pixels
34
Bandwidth

• Bandwidth is the amount of data that travels
  through a communications channel in a given
  amount of time.
• Telephone up to 56Kbps
• ISDN 64-128 Kbps (Integrated Service Digital
  Network)
• DSL 512 Kbps to 8 Mbps (Digital Subscriber
  Line)
• Cable Modem 512 kbps to 52 Mbps
• Most users simply will not wait longer than 10
  seconds for a page to be loaded.

35
What is HTML?

• HTML or Hypertext Markup Language, is a language
  that uses text and defined set of commands (know
  as tags) to create most of what you see on the
  WWW.
• The tags can serve two distinct functions
• The either tell the text how to behave, or make
  the text act as a command to insert a link,
  picture, or sound.

36
What Is an HTML Document?

• HTML documents are plain-text (also know as
  ASCII) files that can be created using any text
  editor.
• Notepad
• Simple Text
• If you use WORD you need to save the file as
  plain text then change the extension.

37
Explain Tags?

• Tags are an element that is a fundamental
  component of the structure of a text document.
• HTML tags consist of left (lt) and right (gt) angle
  bracket.
• There are two types of tags.
• Open tags.
• Container tags.

38
Three Parts to HTML Tags

• Tags
• Attributes modify the action of a tag
• Value are defining aspect of attributes and
  ultimately modify the tag
• ltA HREFhttp//ww.sandhills.edugtVisit Sandhills
  Community Collegelt/Agt
• ltIMG SRCsome.gif WIDTH50 HEIGHT15
  ALTSandhills Logogt
• ltFONT COLOR000000 FACEarial,helvetica,san
  serifgtWelcomelt/FONTgt

39
Container Tags

• They are paired to start and end the tag
  instruction. The end tag looks just like the
  start tag except a slash (/) precedes the text
  with the brackets (lt/gt).
• ltHTMLgt lt/HTMLgt
• ltHEADgt lt/HEADgt
• ltBODYgtlt/BODYgt
• HTML tags are not case sensitive.

40
Open Tags

• They are NOT paired to start and end the tag
  instruction.
• ltIMGgt
• ltMETAgt
• ltHRgt
• ltBRgt
• HTML tags are not case sensitive.

41
HTML Entities

• Are not tags and for the most part are case
  sensitive. They represent special characters that
  you may want to insert into your HTML code.
• nbsp Space
• gt Greater than sign
• lt Less than sign

More entities can be found at http//www.w3.org/TR
/REC-html40/sgml/entities.html
42
HTML Color

• HTML Color can be identified by the Hexadecimal
  notation with the RGB (Red, Green, Blue) value,
  or 1 of the 16 predefine colors.
• FFFFFF - White
• 000000 - Black
• FF0000 - Red

• Silver
• Gray
• White
• Black
• Maroon
• Red
• Green
• Lime

• Navy
• Blue
• Purple
• Magenta/Fuschia
• Olive
• Yellow
• Teal
• Cyan/Aqua

216 Web Save Colors Cross Platform No
Dithering
43
The Required Elements for an HTML Document

• For a basic HTML document
• ltHTMLgt
• ltHEADgt
• ltTITLEgt lt/TITLEgt
• lt/HEADgt
• ltBODYgt
• Document goes here
• lt/BODYgt
• lt/HTMLgt

44
Web Page Structure

• ltHTMLgtlt/HTMLgt denotes to the browser when the
  html page is starting and ending.
• ltHEADgtlt/HEADgt the head section of your html page
  is ignored/will not be displayed on your browser
  window. This section is for your title,
  javascripting, css, and meta.

• ltTITLEgtlt/TITLEgt the title to your web site goes
  here. The title will be displayed in the title
  bar area of the window. The title is also used as
  the bookmark/favorites of the website, and title
  searches.
• ltBODYgtlt/BODYgt everything you want to user to see,
  you place here (text, graphics, etc).

45
SCC Web Page DesignLaura Bartlett