>> Header & Footer in CSS

Slides:



Advertisements
Similar presentations
Chapter 3 – Web Design Tables & Page Layout
Advertisements

KompoZer. This is what KompoZer will look like with a blank document open. As you can see, there are a lot of icons for beginning users. But don't be.
MIS 425 Lecture 2 – HTML Navigation, Colors, tables and Styles Instructor: Martin Neuhard
Twitter Bootstrap Paul Frederickson. Tonight’s Objectives Learn how to set up a bootstrap based site Become familiar with bootstrap syntax Create a framework.
CREATE A WEBPAGE WEB DESIGN. EXAMPLE LAYOUT 2 WEB COMPONENTS Header Banner and logo Footer Copyright information or Address Horizontal Navigation For.
Government Web Template (GWT) for WordPress Updated 03/20/2015.
DIVISIONS FOR ALL WEB PAGES Web Page Elements.  All Web Pages should have the following 4 elements (Also called divisions).  header  navigation  content.
Good Websites. 2. Submit one good web interface. This website is a good because of it usability and appears of the website.
Best Practices for Website Design & Web Content Management.
Chapter 1 Getting Started With Dreamweaver. Explore the Dreamweaver Workspace The Dreamweaver workspace is where you can find all the tools to create.
Module: CS230 Web Information Processing Assignment: Presentation Facilitators: Mr. Adam Winstanley Mr. David Kaneswaren Team: C3 Student Names and Numbers:
Chapter Objectives Discuss the relationship between page length, content placement, and usability Complete Step 4: Specify the website’s navigation system.
XP New Perspectives on Microsoft Office PowerPoint 2003 Tutorial 2 1 Microsoft Office PowerPoint 2003 Tutorial 2 – Applying and Modifying Text and Graphic.
Apiitfreeware websites is about all free sources such as software, video, wallpaper, games in different categories We use different technologies for.
Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank.
Microsoft Expression Web - Illustrated Unit B: Creating a Web Site.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.
Slide 1 Consider the page layouts for: Layout design – does it look balanced and even Size of box relative to its importance – the Heading (or title) of.
Unit 12 LO3 Be able to design websites
Web Technologies Website Development Trade & Industrial Education
CSS Sprites. What are sprites? In the early days of video games, memory for graphics was very low. So to make things load quickly and make graphics look.
Website Development with Dreamweaver
WEBiT Adding a new page. 1. View a page like the one you wish to create a. Navigate to a page with a similar layout to the new page you wish to create.
 Word doc for you to download › Link at the beginning of class › 10 Questions › Answers to be added inline  Post to Sakai when completed › No resubmits.
INTRODUCTION TO HTML5 Semantic Layout in HTML5.  The new semantic layout in HTML5 refers to a new class of elements that is designed to help you understand.
>> HTML: Structure Elements. Elements in HTML are either Inline or Block. Block-level Elements – Begins on a new line – Occupy the whole width – Stacks.
Lecture 6 Title: Web Planning, Designing, Developing for E-Marketing By: Mr Hashem Alaidaros MKT 445.
The Care and Maintenance of J5 MAC New Look. Naming Conventions  Each graphic and include item is named by function_contract area_secondary identifier.
Web Design I Spring 2009 Kevin Cole Gallaudet University
Web Design Part I. Click Menu Site to create a new site root.
Chapter 1 Getting Started With Dreamweaver. Exploring the Dreamweaver Workspace The Dreamweaver workspace is where you can find all the tools to create.
INTRODUCTORY Tutorial 5 Using CSS for Layout and Printing.
Road Signs To know where you are and where you’re going.
3/30/15.  Who is Tim Berners-Lee? 1. Assessing needs 2. Determining content structure 3. Determining site structure 4. Determining navigation structure.
Web Site Development - Process of planning and creating a website.
Ecommerce Applications 2009/10 Session 41 E-Commerce Applications Step by step building of a shop in Shopcreator.
WHY DO YOU NEED IT? What is a wireframe?. A wireframe is… A wireframe is a simple visual guide to show you what a Web page would look like. Wireframes.
HTML LAYOUTS. CONTENTS Layouts Example Layout Using Element Example Using Table Example Output Summary Exercise.
INTRODUCTION ABOUT DIV Most websites have put their content in multiple columns. Multiple columns are created by using or elements. The div element is.
By Vicky Vickers Summarized by Mr. Parslow Webpage Design.
1. Storyboarding a Website. How to start a storyboard: Have Blank Squares!
Creating an Account on GLOW
Pre-Production Meet with the client to create a project plan:
>> Navigation and Layouts in CSS
CSS Layouts: Positioning and Navbars
>> Introduction to CSS
Concepts for fluid layout
Basics of Website Development
Tutorial 6 Topic: jQuery and jQuery Mobile Li Xu
>> PHP: HTML Integration
PBA Front-End Programming
Links. Links Links Need to define two things: The destination Something to click on to get there Tag is click here Can be text, special.
Getting Started with Dreamweaver
>> CSS Layouts.
Layout - you need to understand that a simple navigation bar:
Google Fonts Selective Formatting
Fixed Positioning.
Links.
Session I Chapter 18 - How to Design a Web Site
Table of Contents 1 – Header & Footer Design 2 – Homepage Design 3 – Category Page Design 4 – Subcategory Page Design 5 – Product Page Design 6 – Checkout.
HTML5 Level III Responsive Web Design (RWD) and Front-End Frameworks
Links.
Website production.
Common Page Design Elements
CMP Creating Your Personal and Small Business Web Sites
Objective Explain concepts used to create websites.
Multipage Sites.
Concepts for fluid layout
Monday, Sept. 24 Today we are going to update the html code to html5. It has some new features that we have not covered yet.
Presentation transcript:

>> Header & Footer in CSS

Page Layout Header Content Footer Navigation

Web-based Systems | Misbhauddin Laying out a header in HTML using CSS Header Layout Web-based Systems | Misbhauddin

Web-based Systems | Misbhauddin Header Components Search/ Login/Cart/Social Logo Identity & Title Navigation Links Web-based Systems | Misbhauddin

Types of Header (Based on Layout) CONVENTIONAL Logo Left/ Menu Right UN-CONVENTIONAL Logo Right/ Menu Left FOCUS Logo Center/ Menu Left& Right Web-based Systems | Misbhauddin

Types of Header (Based on Design) 1. The Huge Header The “BAD” Takes up a lot of Space The “GOOD” More Impact if done correctly Web-based Systems | Misbhauddin

Types of Header (Based on Design) 2. The Web App Screenshots of the Product The “CALL TO ACTION” Try Now / Sign Up for Free Web-based Systems | Misbhauddin

Types of Header (Based on Design) 3. The Illustrated Character Popular Trend WHY They add character, personality and a sense of friendliness to your website Web-based Systems | Misbhauddin

Types of Header (Based on Design) 4. The Portfolio Screenshots For Services/Products Companies WHY Show different examples of work alongside a tagline introducing yourself Web-based Systems | Misbhauddin

Types of Header (Based on Design) 5. The Carousel (Slider) WHY Allow you to fit in more information into the header with a slider effect Web-based Systems | Misbhauddin

What To Include In Footers SITE MAP Detailed list of the pages on a website, divided into categories Helps users to navigate Helps Web Crawlers (Search Engines) to locate pages Web-Based Systems - Misbhauddin

What To Include In Footers SITE MAP Web-Based Systems - Misbhauddin

What To Include In Footers SITE MAP Web-Based Systems - Misbhauddin

What To Include In Footers QUICK “ABOUT” OR “CONTACT” INFORMATION Web-Based Systems - Misbhauddin

What To Include In Footers A SIMPLE CONTACT FORM Web-Based Systems - Misbhauddin

What To Include In Footers BACK TO TOP LINKS Web-Based Systems - Misbhauddin

What To Include In Footers Social media Web-Based Systems - Misbhauddin

What To Include In Footers Copyright statement / Links Web-Based Systems - Misbhauddin

Web-based Systems | Misbhauddin Pre-requisite Download the lec7.zip file It includes a folder called assets with all the resources you will need to do the exercise. The output-exercise.png shows the expected output. Except for the navigation bar (menu bar) in the header and the Join Button, do everything. Hint: The footer has four columns (divs) – recall last class. Web-based Systems | Misbhauddin

Feedback: Privacy Policy Feedback
Do Not Sell My Personal Information
About project: SlidePlayer Terms of Service

© 2025 SlidePlayer.com. Inc. All rights reserved.