Вы находитесь на странице: 1из 22

A Presentation

on Web
Designing
-Ravi Kumar Sharma
Web Designing
Web Designing is the process of building and maintaining websites.Web
Designing includes different aspects like :

Front End Coding

Website Wireframe

Website layout design

Graphic Design

Webpage Interactions
Front End

Front End includes writing Mark up, Stylesheet, Images, Animated


Content, Interactions, and the Responsive Web Design.

Web Designing starts from HTML and CSS, used to build Website
Layout and then Javascript is used to add interactions and
functionality.
Website
Wireframe
Tools for Website
Wireframe:

● WireFrame CC
● iDoc
● Pencil Project
● Mockplus
Graphic Graphic design is the process of visual communication and
problem-solving through the use of Typography,
Design Photography, and Illustration.

This field is considered the subset of visual communication


and communication design.

Graphic designers create and combine symbols,images and


text to form visual representation of Ideas.

Common use of Graphic Design is:

● Corporate Design(Logos and Branding)


● Editorial Design(Magazine and Newspaper)
● Advertising
Web An interactive web design is a design for
Interactio websites which uses other inbuilt software,
modules or features aimed at creating an
n environment for a website or web application
user to be actively engaged during visit or use
as the case may be, thereby improving his or her
user experience (UX).
Building a
Web Page
HTML

HTML is a markup language, as it contains markup tags or tags. HTML Tags are used to
build structure of a website including paragraphs, headings, tables, lists, buttons, forms,
images, audio, video etc.

HTML build the structure of web pages. It is also known as Building Block of a website.
Browsers understand html tags and render content. HTML is Browser Interpreted language,
thus load fast as compilation is not required.

To learn web designing, one should starts with HTML first. HTML includes 140+ tags and
attributes to build webpage layout. The latest version of html is HTML5, which included
HTML, CSS and JavaScript. HTML and CSS are static, while JavaScript is dynamic.
Simple Form using HTML
Css(Cascading Style Sheet)
CSS or Cascading style sheet is the standard stylesheet language of web, used to style or
formatting of an HTML document. With CSS, it is easier to build a website as css can style
whole website using one single css file. CSS is a standard part of HTML5. It is compulsory
to use css in HTML5 as it is one of the core web technology.

HTML can only build webpage structure, Css can style HTML. Thus CSS is used to enhance
look and feel of HTML.

Based on how css is written in html page, css is divided into three types:

Internal CSS, external css and inline css


Internal CSS
JavaScript

Javascript is prototype based, client-side scripting language of web.

Javascript is used to build interactive websites with dynamic features and to validate form
data.

Javascript is high-level, dynamic and browser interpreted, supported by all modern web
browsers.

HTML can only create web page structure, css can style html, but to add functionality, we
need javascript. Unlike HTML and CSS, Javascript is Dynamic.
JavaScript (Programming language for Web Browsers)
Uses of Javascript

● JavaScript can build interactivity Websites.

● Javascript can put dynamic content into a webpage/html page

● Javascript can react to events like Click, mouse over, mouse out, form submit etc.
● Javascript can validate form data.
● .Javascript can detect user physical location using HTML5 geolocation API.

● Javascript can also be used in developing server side application using Node JS.

● Based on where javascript code is written, javascript is categorized in three parts. Internal
Javascript, External Javascript, and Inline Javascript.
Internal JavaScript

<!DOCTYPE html>
<html>
<body>
<h2>My First JavaScript</h2>

<button type="button"
onclick="document.getElementById('de
mo').innerHTML = Date()">
Click me to display Date and
Time.</button>

<p id="demo"></p>
</body>
</html>
JQuery
● JQuery is the most popular Javascript Library. Library means it is a collections of
multiple functions inside a single file named as Jquery.

● It is free, open-source software. Web analysis indicates that it is the most widely
deployed JavaScript library by a large margin, having 3 to 4 times more usage than any
other JavaScript library.

● jQuery, at its core, is a Document Object Model (DOM) manipulation library. The DOM is a
tree-structure representation of all the elements of a Web page.

● jQuery simplifies the syntax for finding, selecting, and manipulating these DOM elements .
For example, jQuery can be used for finding an element in the document with a certain
property (e.g. all elements with an h1 tag), changing one or more of its attributes (e.g.
color, visibility), or making it respond to an event (e.g. a mouse click).
Bootstrap

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first


front-end web development.
● It contains CSS- and (optionally) JavaScript-based design templates for typography,
forms, buttons, navigation and other interface components.

● The primary purpose of adding it to a web project is to apply Bootstrap's choices of


color, size, font and layout to that project. As such, the primary factor is whether the
developers in charge find those choices to their liking. Once added to a project,
Bootstrap provides basic style definitions for all HTML elements. The end result is a
uniform appearance for prose, tables and form elements across web browsers
● The most prominent components of Bootstrap are its layout components, as they affect
an entire web page. The basic layout component is called "Container", as every other
element in the page is placed in it. Developers can choose between a fixed-width
container and a fluid-width container.
Fixed
Layout

● Better Control on
looks and content
● Easier to read and
Style
● Might cause
horizontal scroll on
small screen
● Changing font size
might break
layout.
Fluid
Layout
Adapts to any
Screen Size

Handles Font Size


Change well.

Less control on
the placement of
Content

Content might be
stretched or
squashed
Adaptive
Layout
Layout based on
screen size of user

Websites with
such layout loads
pretty fast

Every Layout
should be
designed with
care and that
takes time and
effort
Adobe Photoshop
Photoshop is an application for manipulating imagery but it's also packed with tools for
building graphics from scratch.

Shape, vector, type, fills and effects, all of these (and more) lend themselves very well to
constructing graphic layouts.

Gradients, shadows, patterns, angles; all easy to create with Photoshop's tools - not too
easy to create with anything else.

Gradients, shadows, patterns, angles; all easy to create with Photoshop's tools.

Building for the web was also relatively complex (far less streamlined than nowadays) so
mocking up a layout in Photoshop was always going to be easier and quicker than
battling with Dreamweaver.
Thank You