Organizing and planning
Upcoming SlideShare
Loading in...5
×
 

Organizing and planning

on

  • 449 views

Organizing & Planning for website or web product HTML & CSS

Organizing & Planning for website or web product HTML & CSS

Statistics

Views

Total Views
449
Views on SlideShare
449
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Organizing and planning Organizing and planning Presentation Transcript

  • Organizing and Planning HTML + CSS
  • HTML Introduction • HTML : Hyper Text Markup Language • HTML is not Programming Language - It's a Markup • Language is a set of markup tags to describe web pages • History of Markup Language Originally markup was used in the publishing industry.. margins, typeface, style and size, image
  • HTML Division • Structural (<Table>, <ul>, <ol>, <BR>, <HR>...) • Presentation ( <b>, <big>, <em>, <sup>, <sub> ... )
  • Benefits of Cascading Style Sheets • Powerful and flexible way to specify the formatting of HTML elements • Share style sheets across multiple documents or entire Web site • Rules are applied in a hierarchical manner • General form of rule selector { property: value }
  • Organising and Planning • • • • Understaning Project User workflow wrieframing Check all GUI / UI Screen Organizing HTMl + CSS – – – – liquid layout Fixed layout Gide Levels of Headings, Design Elemnts • Draw Diagrams • Make Calculations
  • Organizing and Planning • Grouping CSS – General Styles • • • • • Body style Reset Headings Links Others – Buttons – Helper Style • Forms elements • Notification • Error
  • Organizing and Planning • Grouping CSS – Page Components • • • • Sidebar Header Navigation Footer – Page Specification • Diffrent Type of layput - Price page – Overrides
  • Organizing and Planning • Semantic markup – Page Header – H1, H2, H3 – Naming convention – ID’s and Class • #body-container (width, background & color) • #head – – – – .logo .main-nav ul, .sub-nav ul .search
  • Organizing and Planning • Semantic markup • #content – .page-head h1 – .col-one » .col-one . subhead h2 » .list ul » .list ul li – .col-two – .col-three • #sidebar • #footer • Comments • Sprites
  • Use the Cascading • HTML multi class • CSS cascading in stylesheet
  • Benefits • • • • • Faster development Less effort to code, smaller files Easier to maintain Easy to add new elements Easier to hand over 
  • Resorcess • • • • http://alistapart.com/ http://960.gs/ html5boilerplate.com http://css-tricks.com
  • Thank you 