CGI.com Style Guide 1. Colours Cherry #E31937 Beet #991F3D Pumpkin #FF6A00 Honey #F2A200 Cloud #A5ACB0 Ice # A1C4D0 Main text colour #333.

Slides:

Advertisements

Similar presentations

Drupal Basics Part 1 An Overview Login Information Edit the Homepage Using the theme Agricultural Communications Services Integrated Media Training Sessions.

Advertisements

Tutorial 3: Designing a Web Page with CSS

Drupal Basics Part 5 Understanding Blocks Using the theme Agricultural Communications Services Integrated Media Training Sessions

1 Lesson 5. 2 R3 R1 R5 R4 R6 R2 B B A A

Cascading Style Sheets

1 Cascading Style Sheets™ (CSS) Outline 5.1 Introduction 5.2 Inline Styles 5.3 Embedded Style Sheets 5.4 Conflicting Styles 5.5 Linking External Style.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.

Web Standards XHTML and CSS. Today’s Show ► Discuss web standards ► XHTML ► Layout Without Tables ► CSS ► Why Web Standards?

Very quick intro HTML and CSS. Sample html A Web Title.

Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

CSS Menus and Rollovers. Agenda foil Separating style from content 3 pages in one file Rollovers in CSS Horizontal drop-downs Vertical drop-downs.

Links.  Styling Links  Links can be styled with any CSS property (e.g. color, font-family, background-color).  Special for links are that they can.

Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.

Advanced Web Design Using Dreamweaver Robby Seitz 121 Powers Hall

Cascading Style Sheets By: Valerie Kuna. What are Cascading Style Sheets? Cascading Style Sheets (CSS) are a standard for specifying the presentation.

Today’s objectives  Element relations – tree structure  Pseudo classes  Pseudo elements.

Session 4: CSS Positioning Fall 2006 LIS Web Team.

SM5312 week 11: CSS Menus & Navigation Bars1 An Introduction to Cascading Style Sheets CSS Menus and Navigation Bars Nick Foxall.

Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.

1 Module 6. More on File Management. 2 Update banner.jpg file from File Management. The banner must be 940px wide. Step 1. Click on the File Management.

Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.

1 Web Developer & Design Foundations with XHTML Chapter 9 Key Concepts.

ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 6.

Advance CSS (Menu and Layout) Miftahul Huda. CSS Navigation MENU It's truly remarkable what can be achieved through CSS, especially with navigation menus.

Using CSS (Cascading Style Sheets) Effie Nadiv Edited by permission from author by Amir Kirsh.

Cascading Style Sheet CSS CS1520 Ali Alanjawi. 2 TA Information Ali Alanjawi Homepage: Office:

D4912 – Website Rebranding, Day 1 Impact clarification June 2006 V4.0.

Web Pages and Style Sheets Bert Wachsmuth. HTML versus XHTML XHTML is a stricter version of HTML: HTML + stricter rules = XHTML. XHTML Rule violations:

Diliev.com & pLOVEdiv.com  DIliev.com.

Robby Seitz 121 Powers Hall ADVANCED WEB DESIGN USING DREAMWEAVER

Class four: the box model and positioning. is an HTML tag which allows you to create an element out of inline text. It doesn’t mean anything! try it:

ADVANCED CSS William Neely CEO, Piecewise.com. CSS FONTS AND TEXT CSS ‣ Line-height allows to indicate the amount of space between lines; allows for equal.

Unit 20 - Client Side Customisation of Web Pages

Designing a Poster Difference between content, layout and styles Miss Allgar.

Difference between content, layout and styles Miss Allgar

First concept: This is the first concept of a colour is having a dark header as the logo that has to be used which is provided. This has got black for.

Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank.

CA Professional Web Site Development Class 23 - CSS Positioning, Image Replacement & Print Styles.

Creating A Site Using A Template In Dreamweaver CS6 Cakes R Us!

SITE ELEMENTS ASC CORP SITE DEV | 23 SEP THE CHOSEN TEMPLATE 2.

Web Development & Design Foundations with XHTML

Continued BrokersLink Redesign. General Changes All Headlines, Main Nav options and Sub Nav options will be in the Google font Roboto Slab (Normal 400.

Today’s objectives  Review  CSS | Rules | Declarations  HTML Structure document  Class asignment.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.

Content Typography & colours. Typography principles The objectives for typography in our web appearance are to help us maintain consistency with our overall.

Icons, links and buttons We have a unique icon design principle. Our icons are based on the same irregular circle shape with a clear graphic pictogram.

Cascading Style Sheets (CSS) Within the Enterprise Architecture Framework (EAF) Wes Ziegeler August 3, 2006.

AWESOME THINGS FOR YOU TO DO 1Direct Relief International.

House Styles for ICT How we expect your work to be presented……

Web Design I Spring 2009 Kevin Cole Gallaudet University

Web parts, elements and user controls Width: 350 px / Height: 125 px Rounded corners: Rounding 6 px Background color: ? Name text: Arial, Bold, 12 px,

By Lauren Mayer WEBSITE RESEARCH. NYLON MAGAZINE WEBSITE Header, this is the title of the website and should be the main attraction. This example had.

Main page banner area Navigation bar area Main area for information content Look at a simple page from the Waitrose supermarket site. It has three main.

1 Preparation for site Create a folder in MyDocuments: beavercheese. Create a subfolder, images Classes, career, DW beginner Download.

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.

WEB DESIGN PRINCIPLES Dale Blasingame School of Journalism & Mass Communication Texas State University.

Navigation Typography– Mega Drop Down Menu 1 Wide Desktop Login: Arial, Regular, 14 px, #f08c00 Hover: Underline Toolbar link: Arial, 11 px, #999999, underline.

1 of TOTALwww.ednovo.orgPage 1 of TOTAL Gooru UX Style Guide 8/3/2011.

Review First – on your own... Go to Day 5 Grab the contents of position review file Place in DW Add styles to recreate – get something close to

Navigation grid – Wide desktop 1 Main navigation bar maximum width 890 px (= 4 content columns) 3 text columns, each 256 px wide 51 px margins in between.

VLSC 6.0 Style Guide. downloads & keys: final comp.

Log in – Header area 1 Lock icon size 14 x 18px. Mobile: Lock icon Tablet, Desktop and wide desktop: Lock icon + text ”Logg in” Log in text: –Font: Arial,

Unit 15 – Web Authoring Website Proposal Purpose of Website: Target Audience: House Style: (colours to be used) Text Styles: Example: Font-Family – Arial,

Your GIMP Portfolio Navigation Menu.

Layout - you need to understand that a simple navigation bar:

Fixed Positioning.

D4912 – Website Rebranding, Day 1 Impact clarification

Presentation transcript:

CGI.com Style Guide 1

Colours Cherry #E31937 Beet #991F3D Pumpkin #FF6A00 Honey #F2A200 Cloud #A5ACB0 Ice # A1C4D0 Main text colour #333

Header & Footer styling #site-slogan 13px # a 12px # a:hover #E31937 Input 10px # Uppercase 14px #FFF uppercase a #FFFFFF uppercase a:hover #FFD8A6 11px #FF9900 bold a 11px #ffffff a:hover #ffdba6 H2 17px #ffffff 11px #ffffff

12px #991f3d uppercase #333 12px #ffffff Navigation styling

Homepage slider styling 740x x119

#991F3D uppercase 13px Landing page styling

H1 20px #991F3D H2 arial-black 24px # H3 bold 16px #991F3D H3 arial-black 18px # H4 bold 13px #E31937 a #991F3D a:hover underline p # px p # px a 11px #991F3D a:hover 11px #E31937 a.active 11px #E31937.nolink 11px # first a 11px #991F3D Content page styling

Standard banner 1280x150 en/sites/cgi.com/the mes/cgi/images/bck- nav-grey.png Small masthead styling

Special banner 1440x240 en/sites/cgi.com/the mes/cgi/images/bck- nav-grey.png Bg colour #cccccc High masthead styling

Image in left or right menu max 150px wide Sidebar images styling