Transcript Web Design

Web Design
Tips






Basics of Web Design
Dreamweaver 8
CSS
Access 2003
Dynamic Website
Application Sample: Book Sales Website
Chapter1 Basics of
Web Design
Vocabularies







HTML超文本标记语言
WWW万维网
HTTP超文本传输协议
Domain Name域名
IP Address网络地址
TCP传输控制协议
IP网际协议





Top-down自顶向下
Bottom-up自底向上
Nest 嵌套
Static 静态
Dynamic 动态
Tips




Basics of Web
Dynamic Website Design
HTML
Tools for Web Design
1.Basics

Website
• A group of web pages made by HTML or
other tools to display specific related
content in Internet, according to certain
rules.
• Contains words, database, images,
animations, audios, videos and 3D.
• Such as Yahoo, the Facebook, blog and
wiki.
Types of Website
 Static Website
• Only can be used to display information
to client without interaction.

Dynamic Website
• Presented pages based on the needs of
client
• need database support.
• Implement the interaction between
client and web server.
(1)WWW(World Wide Web)

Internet service which provides information
browsing.

Information transmission format are generally
HTML, Hyper-text or Hyper-media.

Hyper-link means a connection from a page to
another object which may be a page, a image, a
file, a E-mail address even a program. If be
clicked, the object will operate. It is the
foundation of website.

Hyper-text=text + Hyper-link=web page

Hyper-media ＝ Hyper-text ＋Multimedia=web
page
Web Service Models
 C/S Model( client/server model)
The popular convention used for
web service. This model defines the
basic roles played by the computers
as either a client which makes
requests of other processes ,or a
server, which satisfies the requests
made by clients.
(2) Webpage
 The basic unit of website.
 Hyper-text file contains words,
images, animations, audios and
videos.
 Can be visited by browser.
Types
• Static page



Standard HTML file.
Without server script .
Can not interaction with user.
• Dynamic page


Full interaction with client.
Contains a lot of server script.

How to response the request of
browser as a static page.

How to response the request of
browser as a dynamic page.
(3)URL (Uniform Resource Locator)
 The address of resources on internet which
has been visited.
 The way to find the location of the resources
client want .
 format
protocol：//host address/file path/file name
http://news.sina.com.cn/w/20101215/043021642967.shtml
(4)IP Address
 In the Internet which are used to assign
an identifying address to each computer in
the system, these addresses are known as
IP Address.
 It is a pattern of 32 bits，IPv4.
 It has 2 part, network address and host
address and be divided to 5 classification.
 New version, IPv6, is a pattern of 128 bits.
A
network address 8bits
network address 16bits
B
C
network address 24bits
D Multicast use
E Not used
host address 24bits
host address16bits
host address 8bits
Classificatio Network
n
Adress
Range
Numbers Host
Numbers
A
1.0.0.0~12 128
7.255.255.
255
16,777,2
14
B
128.0.0.0~ 16,384
191.255.2
55.255
65,534
C
192.0.0.0~ 2,097,15 254
223.255.2 3
55.255
(5) DNS (Domain Name System)


A system that provides mappings
between the human-oriented names
of users and the machine-oriented IP
address in the network.
Structure
host name. organization name. network
name. top-level domain name
www.ynni.edu.cn
Top-level Domain Name
顶层域名
com
edu
gov
int
mil
net
org
域名类型
商业组织
教育机构
政府部门
国际组织
军事部门
网络组织或机构
各种非赢利性组织机构
(6)TCP/IP
The standard protocol of Internet
 TCP Protocol( transport control protocol)
It provides error-free delivery fo arbitrarily
long messages, with the data being
released to the host system in the same
order as the original transmission.
 IP Protocol( Internet protocol)
It provides a connectionless datagram
service, and a managed address structure
for data transmission.
(7) HTTP (Hyper Text Transfer Protocol)
 The protocol which define the rules
of hyper-text transmission.
 The rules of how to understand the
hypertext document structure
http：//www.sohu.com
2.How to design a website

Understand the needs of users

Gather informations

Make a plan

Website design

modify over and over

Publish website

Maintaining
(1)Design method
 top down design
 Bottom-up design
 Supplementing design
(2) whole design Plan

Goal

Style

Columns

Navigate

Hyper-link

Color Scheme

Folder Structure
(3)Layout Design
 Title
 Logo
 Header and Footer
 Navigate bar
 Login
 Searching
 Hot spots
 Main Content
(4)Database Design
 Link to website.
 Access, SQL Server, Oracle、DB2.
 Choose a right one
• Information
• Stability
• Security
• Handling

Tips of Database Design
• Requirement Analysis
• Concept Structure Design
• Logical Structure Design
• Physical Structure Design
3.HTML (Hyper Text Markup Language，
超文本标记语言)



HTML is the main tool to create and
typeset hyper-text file.
HTML files are ASCII text files with
embedded code to format hyper-text.
HTML files=Web pages
(1) Characteristic
 Simple, easy to learn and use
 interpretative language
 Text file, Platform independent
 Good Compatibility
(2)rules of grammar

Using makeup to define and control object.
– <makeup>object</makeup>
– <makeup attribute1＝parameter1
attribute2＝
parameter2……>object</makeup>
– <makeup/>
font face＝”黑体” size＝”6” color
＝”red”>网页设计</font>
Makeup Nesting
 A makeup can be nested in another
makeup.
<head><title>HTML 嵌套标记实例
</title></head >
 Makeup can not be crossed.
(3)The structure of a HTML file

<html>
<head>
Notes
<title> title of web </title>
</head>
<body>
content
</body>
</html>
Every makeup is a couple: a beginning and a
ending.

例1.3 设置文字格式。
<html>
<head>
<title>设置文字格式示例 </title>
</head>
<body>
<div align＝”center”><font face＝隶书 size＝6 color＝red>设
置文字格式示例</font><br></div>
<p>
<marquee bgcolor＝”#aaffaa”scrolldelay＝”5” width
＝”420” height＝”16”>
</ marquee ></p>
</body>
</html>
欢迎光临本网站！
4.Tool for Web Design

Dreamweaver

XML

CSS

Script Langrage

ASP.NET

JSP

PHP