Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Web Design

No description
by

Algel Pitos

on 6 December 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Web Design

Web Design
HTML/CSS
Adobe
Dreamweaver

Web Design and Development
FONTS
COLORS
LAYOUT
FUNCTIONALITY
PURPOSE
SIMPLICITY
What is the purpose
of my website?

Who is my main audience?

What information do I want
to present?
Adobe
Photoshop

WEBPAGE
a single HTML document
WEBSITE
a collection of (related) webpages

PHP/MySQL
GUIDELINES IN
DESIGNING
A WEBPAGE
A premier photo editing
software tool
Working on a web page,
Powerpoint presentation,
or a document to be printed
You will learn about
image file types,

cropping images,

compositing
(putting several images together),
ghosting images
(for use as webpage backgrounds),
using layers
,
creating masks, applying filters,
and

formatting text with bevels and other effects
Use
web safe
color/s.
Make the text
readable
.
Fill it with
interesting text
,
not just
graphics.
Limit
the
number of
multimedia.
Provide
navigations
and
site map
.
TOOLS
Organize
the layout
of the site.
DO: Keep your page structured
MOVE
MARQUEE
LASSO
MAGIC WAND
DON’T: Just place boxes everywhere
CROP
Always make a
wireframe
.
EYEDROPPER
DO: Choose the right color scheme
DON’T: Overdo it with 20 different colors.
Light over dark;
Dark over light.
HEALING BRUSH TOOL
BRUSH TOOL
DO: Choose the right fonts and sizes.
DON’T: Have 5 different fonts in 10 different sizes.
K e r n i n g

is important. Allow the letters to breathe.

CLONE STAMP TOOL
A web design tool
that will make it
so much easier for the
creation of your own
webpages.
You can use it to write
HTML, CSS,
JSP, XML,
PHP, JavaScript,
and more
HISTORY BRUSH TOOL
It allows you to decide how
you want your code to appear
ERASER TOOL
When you type texts in Adobe Dreamweaver, it automatically updates the Design part of your work
GRADIENT TOOL
WHAT IS
ADOBE
PHOTOSHOP?
BLUR TOOL
DODGE TOOL
PEN TOOL
HORIZONTAL TYPE TOOL
DO: Focus on what’s important.
DON’T: Place irrelevant ads across your page.
Be concise and straight to the point.
DO: Optimize your load times.
DON’T: Make everything on your page an image.
Design for low bandwidth.
DO: Set your navigation up properly.
DON’T: Make your readers search to find
something.
Design for interaction and accessibility.
PATH SELECTION TOOL
RECTANGLE TOOL
3D OBJECT ROTATE TOOL
3D ROTATE CAMERA TOOL
HAND TOOL
ZOOM
SAMPLE WORK FROM PHOTOSHOP
WHAT IS PHP?
PHP:
Hypertext Processor
widely-used, open source
scripting language
free to download and use
Contains
HTML, CSS,
JavaScript, and
PHP code
WHY USE PHP?
It can generate
dynamic
webpages
WHY USE
PHOTOSHOP?
Create original artwork.
Design graphics for a webpage or website.
Correct flaws and imperfections
in a photograph.
Create a photo collage:
a composition made up of
several different photos.

Make “ghost” images that
can be used as the
background for webpages.
Alter photographs for
propaganda purposes.

Design smashing layouts
for a classroom newspaper, brochure or flyer.
Have a ton of fun being CREATIVE!

collect
form data;
add, delete, modify
data in your
database
restrict users
to access
some pages on
your website
send and receive
cookies

create, edit,
and delete files
on the server
printing data and making
numeric calculations
(such as addition
or multiplication)

WHAT IS MySQL?
MySQL is a database system that uses a
Structured Query Language (SQL)* to run on a server.

It can also be used on the Internet.
*SQL is used to communicate with a database.
What is
Notepad++?
Fast, reliable,
and easy to use.
Free to download
HTML5
HOW DO PHP AND MySQL WORK TOGETHER?
Use
to generate your
<head>
</head>
codes.
<body>
</body>
Is a free source code editor and Notepad replacement that supports several languages.
What does
Notepad++
do?
Line numbering
Zoom in and out
Search and replace
It is tabbed
editing freeware,
to easily work with
multiple open files.
It can easily detect errors.
It contains the ability
to color format a
wide variety of
language choices.
can pass data to
which will store
the information in
provides the structure
CSS3
provides the layout and design
selector
property
value
selector {property: value}
body {
background: #eee;
font-family: Calibri, sans-serif;
}

p {
font-color: red;
font-size: 5;
text-align: left;
}
filename: style.css
<head>
<link rel="stylesheet" href="style.css" />
</head>
PHP and MySQL are already
in a bundle called
XAMPP
7 Main Parts
5 types of views
Code View
Split View
Design View
Live View
Live Code View
Application
Bar
Document
Tabs
Document
Toolbar
Document
Window
Property
Inspector
Insert
Panel
Files
Panel
END
Full transcript