WEB DESIGN

WEB DESIGN
 Web design is the process of creating websites.
 It encompasses several different aspects, including webpage layout, content
production, and graphic design.
 Web design is technically a subset of the broader category of web development.

Concept of web design
 A design concept is the idea behind a design.
 it’s how you plan on solving the design problem in front of you.
It’s the underlying logic, thinking, and reasoning for how you’ll design a
website.
Your concept will lead to your choices in colour and type.

TYPES OF LAYOUT
Static page layout
Dynamic page layout
Fixed design layout
Responsive design layout
Liquid or fluid layout
Single page design layout

PROCESS LAYOUT
In a process layout(also referred to as a job shop layout) similar machines
and services are located together.
 Therefore, in a process type of layout all drills are located in one area of
the layout and all milling machines are located in another area.
A manufacturing example of a process layout is a machine shop.
Example include hospitals, colleges, banks ,auto repair shop, and public
libraries.

THREE TYPES OF PRODUCT LAYOUT
 Product layout
 Process layout
 Fixed location layout

PRODUCT LAYOUT
 This type of layout is generally used in systems where a
product has to be manufactured or assembled in large
quantities.
 In product layout the machinery and auxiliary services are
located according to the processing sequence of the product
without any buffer storage within the line itself.

FIXED LOCATION LAYOUT
 In the type of layout, the product is kept at a fixed position and all other
materials; components, tools, machines, workers, etc... are brought and
arranged around it.
 Then assembly or fabrication is carried out.
 Example includes aircraft assembly,ship building, and most
constructions projects.

Adobe Photoshop
Adobe photoshop is a raster graphics editor developed and
published by adobe inc. for macOS and windows
 It was originally created in 1988 by Thomas and john knoll.

What is HTML?
 HTML stands for Hyper Text Markup Language
 HTML describes the structure of web pages using markup
 HTML are the building blocks of html pages
 HTML elements are represented by tags
 HTML tags label pieces of content such as “heading”, ”paragraph”, ”table”, and so on
 Browser do not display the HTML tags,but use them to render the content of the page

A SIMPLE HTML DOCUMENT
<!DOCTYPE html>
<html>
<head>
<title>page title</title>
</head>
<body>
<h1>my first heading</h1>
<p>my first paragraph.</p>
</body>
</html>

 XHTML is never than the old HTML
 XHTML has stricte r rules and does not allow some elements formerly used in HTML
 One benefit of using XHTML is that it helps make web pages look identical in
different browsers,such as internet explorer, firefox, safari, etc…
 XHTML is used to define and organize the page content but not to style it.
XHTML

DW & ITS TOOLS
DW:
Adobe dreamweaver is a proprietary
web development tool from adobe
inc..
It was created by macromedia in
1997 and developed by them until
macromedia was acquired by adobe
systems in 2005.
Adobe dreamweaver is available for
the macOS and windows operating
systems.
TOOLS:

CSS full form is Cascading Style Sheets.
CSS is used to describe how html elements are to be displayed on
screen.
CSS save as lot of work.
It can control the layout of multiple web pages.
CSS

Typesofcss
Inline css
Internal css
External css
TYPES OF CSS

 Variables names are case sensitive.
 JavaScript does not have typed variables.
 The varibles determines do not specify a data type for the variables
 When you declare a variables, always start with keyword var
var num =10;
var Num1=20;//this is ok because of case sensitivity
var color =‘c’;
var firstname=“david”
JAVA SCRIPT DOCUMENTS

 Most common conditional
if (somecondition) {
doThis();
} else {
doThat();
}
 Most common loop
for (var i=0; i<someCutoff; i++) { dosomestuff(); }
BASIC JAVA SYNTAX

<HTML>
<script type=“text/javascript”>
/**
*this is amultiple-
*line comment
*/
Var index=0;
Var arr =[];
Function push(elem) {
// this comment may span only this line
arr [index++]=elem;
}
</script>
</HTML>
USING JAVASCRIPT SYNTAX COLORING

WEB DESIGN

Recommended

Recommended

More Related Content

What's hot

What's hot (17)

Similar to WEB DESIGN

Similar to WEB DESIGN (20)

Recently uploaded

Recently uploaded (20)

WEB DESIGN