Mindoro State University
College of Computer Studies
Web Design & Lay
outing
Prepared by:
LEE-MAR
Instructor I
M. ARCON
E-mail Address: [Link]@[Link]
Mobile Number: +639511177784
Bachelor
ITE 221 : WEB SYSTEMS AND TECHNOLOGIES of Science in
College of
College of
Computer
Computer Learning Objectives
Click to edit
Studies
Studies Master title style
At the end of the lesson, the learners should be able to:
1. created a basic site map and wireframe for a web page.
2. created site layouts using CSS layout techniques.
3. designed web pages that are responsive and can adapt to
different screen sizes.
4. understood color theory and its application in web design.
ITE 221 : WEB SYSTEMS AND TECHNOLOGIES TOPIC: Web Design & Lay outing
College of
College of
Computer
Computer What is Sitemap?
Click to edit
Studies
Studies Master title style
The sitemap of a website (of the first type) is nothing but a
block diagram of a website.
There are two types of sitemaps we use in website making:
◦ A sitemap to assist the building of the website.
◦ A sitemap to improve the SEO (Search Engine Optimization) of the
website.
ITE 221 : WEB SYSTEMS AND TECHNOLOGIES TOPIC: Web Design & Lay outing
College of
College of
Computer
Computer What is Sitemap?
Click to edit
Studies
Studies Master title style
ITE 221 : WEB SYSTEMS AND TECHNOLOGIES TOPIC: Web Design & Lay outing
College of
College of
Computer
Computer What is Wireframe?
Click to edit
Studies
Studies Master title style
A wireframe is nothing but a blueprint of the webpage. The
various elements mentioned in the sitemap are placed at proper
locations in the wireframe. Also, the space allotted to every item
is proportional to its actual size.
ITE 221 : WEB SYSTEMS AND TECHNOLOGIES TOPIC: Web Design & Lay outing
College of
College of
Computer
Computer What is Wireframe?
Click to edit
Studies
Studies Master title style
ITE 221 : WEB SYSTEMS AND TECHNOLOGIES TOPIC: Web Design & Lay outing
College of
College of
Computer
Computer Controlling the Position of Elements
Click to edit
Studies
Studies Master title style
CSS page layout techniques allow us to take elements
contained in a web page and control where they're positioned
relative to the following factors: their default position in normal
layout flow, the other elements around them, their parent
container, and the main viewport/window.
ITE 221 : WEB SYSTEMS AND TECHNOLOGIES TOPIC: Web Design & Lay outing
College of
College of
Computer
Computer Controlling the Position of Elements
Click to edit
Studies
Studies Master title style
Common CSS property for layouting:
Float – Originally for floating images inside blocks of text,
the float property became one of the most commonly used tools for
creating multiple column layouts on webpages.
Position – Positioning allows you to take elements out of
normal document flow and make them behave differently, for
example, by sitting on top of one another or by always
remaining in the same place inside the browser viewport.
ITE 221 : WEB SYSTEMS AND TECHNOLOGIES TOPIC: Web Design & Lay outing
College of
College of
Computer
Computer Controlling the Position of Elements
Click to edit
Studies
Studies Master title style
◦ Static – Static positioning is the default that every element gets.
◦ Relative – Relative positioning is the first position type we'll take a
look at. This is very similar to static positioning, except that once the
positioned element has taken its place in the normal flow, you can
then modify its final position, including making it overlap other
elements on the page.
◦ Absolute – fixes an element in place relative to its nearest
positioned ancestor. If there is no positioned ancestor, it will be
positioned relative to the initial containing block, which is usually the
<html> element.
ITE 221 : WEB SYSTEMS AND TECHNOLOGIES TOPIC: Web Design & Lay outing
College of
College of
Computer
Computer Controlling the Position of Elements
Click to edit
Studies
Studies Master title style
◦ Fixed – fixed positioning usually fixes an element in place relative
to the visible portion of the viewport.
◦ Sticky – hybrid between relative and fixed position. It allows a
positioned element to act like it's relatively positioned until it's
scrolled to a certain threshold.
ITE 221 : WEB SYSTEMS AND TECHNOLOGIES TOPIC: Web Design & Lay outing
College of
College of
Computer
Computer Controlling the Position of Elements
Click to edit
Studies
Studies Master title style
Common CSS property for layouting:
Display
◦ Flex – it is the short name for the Flexible Box Layout CSS module,
designed to make it easy for us to lay things out in one dimension
— either as a row or as a column.
◦ Grid – A grid is a collection of horizontal and vertical lines creating a
pattern against which we can line up our design elements. They
help us to create layouts in which our elements won't jump around
or change width as we move from page to page, providing greater
consistency on our websites.
ITE 221 : WEB SYSTEMS AND TECHNOLOGIES TOPIC: Web Design & Lay outing
College of
College of
Computer
Computer FLEX PROPERTY MODEL
Click to edit
Studies
Studies Master title style
◦ Main axis - is the axis running in the direction
the flex items are laid out in (for example, as a
row across the page, or a column down the
page.) The start and end of this axis are called
the main start and main end.
◦ Cross axis - is the axis running perpendicular
to the direction the flex items are laid out in. The
start and end of this axis are called the cross
start and cross end.
◦ Flex container - The parent element that
has display: flex set on it (the <section> in our
example)
◦ Flex item - The items laid out as flexible boxes
inside the flex container
ITE 221 : WEB SYSTEMS AND TECHNOLOGIES TOPIC: Web Design & Lay outing
College of
College of
Computer
Computer FLEX PROPERTY
Click to edit
Studies
Studies Master title style
ITE 221 : WEB SYSTEMS AND TECHNOLOGIES TOPIC: Web Design & Lay outing
College of
College of
Computer
Computer FLEX PROPERTY
Click to edit
Studies
Studies Master title style
ITE 221 : WEB SYSTEMS AND TECHNOLOGIES TOPIC: Web Design & Lay outing
College of
College of
Computer
Computer FLEX PROPERTY
Click to edit
Studies
Studies Master title style
ITE 221 : WEB SYSTEMS AND TECHNOLOGIES TOPIC: Web Design & Lay outing
College of
College of
Computer
Computer FLEX PROPERTY
Click to edit
Studies
Studies Master title style
ITE 221 : WEB SYSTEMS AND TECHNOLOGIES TOPIC: Web Design & Lay outing
College of
College of
Computer
Computer FLEX PROPERTY
Click to edit
Studies
Studies Master title style
ITE 221 : WEB SYSTEMS AND TECHNOLOGIES TOPIC: Web Design & Lay outing
College of
College of
Computer
Computer FLEX PROPERTY
Click to edit
Studies
Studies Master title style
ITE 221 : WEB SYSTEMS AND TECHNOLOGIES TOPIC: Web Design & Lay outing
College of
College of
Computer
Computer FLEX PROPERTY
Click to edit
Studies
Studies Master title style
ITE 221 : WEB SYSTEMS AND TECHNOLOGIES TOPIC: Web Design & Lay outing
College of
College of
Computer
Computer FLEX PROPERTY
Click to edit
Studies
Studies Master title style
ITE 221 : WEB SYSTEMS AND TECHNOLOGIES TOPIC: Web Design & Lay outing
College of
College of
Computer
Computer FLEX PROPERTY
Click to edit
Studies
Studies Master title style
ITE 221 : WEB SYSTEMS AND TECHNOLOGIES TOPIC: Web Design & Lay outing
College of
College of
Computer
Computer FLEX PROPERTY
Click to edit
Studies
Studies Master title style
ITE 221 : WEB SYSTEMS AND TECHNOLOGIES TOPIC: Web Design & Lay outing
College of
College of
Computer
Computer FLEX PROPERTY
Click to edit
Studies
Studies Master title style
ITE 221 : WEB SYSTEMS AND TECHNOLOGIES TOPIC: Web Design & Lay outing
College of
College of
Computer
Computer FLEX PROPERTY
Click to edit
Studies
Studies Master title style
ITE 221 : WEB SYSTEMS AND TECHNOLOGIES TOPIC: Web Design & Lay outing
College of
College of
Computer
Computer Grid Property
Click to edit
Studies
Studies Master title style
A grid is a collection of horizontal and vertical lines creating a
pattern against which we can line up our design elements. They help
us to create layouts in which our elements won't jump around or
change width as we move from page to page, providing greater
consistency on our websites.
ITE 221 : WEB SYSTEMS AND TECHNOLOGIES TOPIC: Web Design & Lay outing
College of
College of
Computer
Computer Grid Property
Click to edit
Studies
Studies Master title style
ITE 221 : WEB SYSTEMS AND TECHNOLOGIES TOPIC: Web Design & Lay outing
College of
College of
Computer
Computer Grid Property
Click to edit
Studies
Studies Master title style
ITE 221 : WEB SYSTEMS AND TECHNOLOGIES TOPIC: Web Design & Lay outing
College of
College of
Computer
Computer Grid Property
Click to edit
Studies
Studies Master title style
ITE 221 : WEB SYSTEMS AND TECHNOLOGIES TOPIC: Web Design & Lay outing
College of
College of
Computer
Computer Grid Property
Click to edit
Studies
Studies Master title style
ITE 221 : WEB SYSTEMS AND TECHNOLOGIES TOPIC: Web Design & Lay outing
College of
College of
Computer
Computer Grid Property
Click to edit
Studies
Studies Master title style
ITE 221 : WEB SYSTEMS AND TECHNOLOGIES TOPIC: Web Design & Lay outing
College of
College of
Computer
Computer Grid Property
Click to edit
Studies
Studies Master title style
ITE 221 : WEB SYSTEMS AND TECHNOLOGIES TOPIC: Web Design & Lay outing
College of
College of
Computer
Computer Grid Property
Click to edit
Studies
Studies Master title style
ITE 221 : WEB SYSTEMS AND TECHNOLOGIES TOPIC: Web Design & Lay outing
College of
College of
Computer
Computer Grid Property
Click to edit
Studies
Studies Master title style
ITE 221 : WEB SYSTEMS AND TECHNOLOGIES TOPIC: Web Design & Lay outing
College of
College of
Computer
Computer Responsive Design
Click to edit
Studies
Studies Master title style
Responsive web design allows websites to adapt and
respond to different viewport sizes, providing optimal viewing
experiences. CSS3 introduced a powerful feature called media
queries that enables developers to tailor stylesheets based on
various device characteristics. In this chapter, we will explore
what media queries are, how they work, and their significance
in creating responsive designs.
ITE 221 : WEB SYSTEMS AND TECHNOLOGIES TOPIC: Web Design & Lay outing
College of
College of
Computer
Computer Media Queries
Click to edit
Studies
Studies Master title style
Media queries are a CSS3 feature that allows developers
to apply different stylesheets or specific styles within a
stylesheet based on the characteristics of the device or
viewport. These characteristics include viewport width, height,
device type, orientation, resolution, and more. By utilizing
media queries, developers can create designs that adapt
gracefully to different devices and ensure the content remains
readable and usable across various screen sizes.
ITE 221 : WEB SYSTEMS AND TECHNOLOGIES TOPIC: Web Design & Lay outing
College of
College of
Computer
Computer Prerequisites for Responsive Layouts
Click to edit
Studies
Studies Master title style
1. Set your box-sizing to border-box to all of your html
elements.
*{
box-sizing: border-box;
}
2. configure the browser viewport's default width and scale
<meta name="viewport" content="width=device-
width, initial-scale=1.5" />
ITE 221 : WEB SYSTEMS AND TECHNOLOGIES TOPIC: Web Design & Lay outing
College of
College of
Computer
Computer Media Queries
Click to edit
Studies
Studies Master title style
@media (min-width: 500px){
ITE 221 : WEB SYSTEMS AND TECHNOLOGIES TOPIC: Web Design & Lay outing
College of
College of
Computer
Computer Breakpoints
Click to edit
Studies
Studies Master title style
A breakpoint in a responsive design is the “point” at which a
website’s content and design will adapt in a certain way to provide the
best possible user experience.
1920×1080 412×915 375×812
360×800 393×873 1600×900
1366×768 1280×720 2560×1440
1536×864 360×780 810×1080
390×844 360×640
414×896 1440×900
ITE 221 : WEB SYSTEMS AND TECHNOLOGIES TOPIC: Web Design & Lay outing
College of
College of
Computer
Computer Colors
Click to edit
Studies
Studies Master title style
Colors serve as vital elements that not only set the tone but also
effectively convey information and captivate users' attention. With the
advent of CSS3, a myriad of new color formats has emerged, offering
designers enhanced flexibility and expressive capabilities. This section
delves into the exploration of these innovative CSS3 color formats,
presenting practical examples that illustrate their utility and advantages
in the context of web design.
ITE 221 : WEB SYSTEMS AND TECHNOLOGIES TOPIC: Web Design & Lay outing
College of
College of
Computer
Computer Colors
Click to edit
Studies
Studies Master title style
RGBA and HSLA - Red Green Blue Alpha (RGBA) and Hue Saturation
Lightness Alpha (HSLA) are color formats that allow designers to specify
transparency or opacity levels for colors. These formats are particularly
useful for creating subtle gradients, overlays, and blending effects.
Hue Saturation Lightness – it is a color format that allows designers to
define colors based on their hue, saturation, and lightness. This format
provides greater control over color variations and makes it easier to
create harmonious color schemes.
ITE 221 : WEB SYSTEMS AND TECHNOLOGIES TOPIC: Web Design & Lay outing
College of
College of
Computer
Computer Colors
Click to edit
Studies
Studies Master title style
HEX with Alpha Channel - CSS3 introduced the ability to specify an
alpha channel for hex color values. The alpha channel controls the
transparency level of the color, allowing for versatile opacity
adjustments.
ITE 221 : WEB SYSTEMS AND TECHNOLOGIES TOPIC: Web Design & Lay outing
College of
College of
Computer
Computer Color theory
Click to edit
Studies
Studies Master title style
Color theory is a blend of artistic and scientific principles employed
to establish harmonious color combinations. Isaac Newton introduced
the color wheel in 1666, depicting the color spectrum in a circular form,
serving as the foundation of color theory by illustrating the connections
between different colors.
Complementary – Colors that are on the opposite side of the color
wheel. This combination provides a high contrast and high impact
color combination.
Monochromatic - Three shades, tones and tints of one base color.
Provides a subtle and conservative color combination.
ITE 221 : WEB SYSTEMS AND TECHNOLOGIES TOPIC: Web Design & Lay outing
College of
College of
Computer
Computer Color theory
Click to edit
Studies
Studies Master title style
Analogous – Three colors that are side by side on the color wheel.
Triadic - Three colors that are evenly spaced on the color wheel. This
provides a high contrast color scheme, but less so than the
complementary color combination — making it more versatile.
Tetradic - Four colors that are evenly spaced on the color wheel.
ITE 221 : WEB SYSTEMS AND TECHNOLOGIES TOPIC: Web Design & Lay outing