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,

Slides:

Advertisements

Similar presentations

Symbaloo Save, access, and share all of your online resources in one central location!

Advertisements

HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.

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

Chapter 6 More CSS Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.

1 تقنيات الانترنت عال457 HTML. 2 HTML  HTML – HyperText Markup Language – The Language of Web Pages on the World Wide Web. HTML is a text formatting.

Presenter: James Huang Date: Sept. 26,  Introduction  Basics  Lists  Links  Forms  CSS 2.

Start menu -> all program -> Microsoft Visual SourceSafe-> Microsoft Visual Studio 2010 Click.

Slide 1 CMPS 211 Internet Programming Spring 2008 Dynamic Effects with Styles Chapter 12 2/6/08.

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

Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.

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.

HyperText Markup Language (HTML) Uses plain text to add markup instructions to a file. If you can't produce it with a standard keyboard, it can't go into.

Principles of Web Design 5 th Edition Chapter Nine Site Navigation.

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.

CSS BASICS. CSS Rules Components of a CSS Rule  Selector: Part of the rule that targets an element to be styled  Declaration: Two or more parts: a.

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

กระบวนวิชา CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.

Unit 20 - Client Side Customisation of Web Pages

Web Design with Cascading Style Sheet Lan Vu. Overview Introduction to CSS Designing CSS Using Visual Studio to create CSS Using template for web design.

X-Media V2.0 Healthcare Training Jayex Technology Limited X-Media V2.0 March 2010 v

Basics of Web Design Chapter 6 More CSS Basics Key Concepts 1.

Web Content Management System Website Maintenance Demonstration Introduction to Macromedia Contribute Jamie Uprichard.

This is our green header page durhamtech.edu Headline here >First Point >Second Point >Subpoint >Third Point >Fourth Point.

1 of 5 This document is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS DOCUMENT. © 2007 Microsoft Corporation.

Adding an Inline Style Sheet Page without Inline Style Sheet Page with Inline Style Sheet.

Cascading style sheets (CSS)

 HTML stands for Hyper Text Mark-up Language. The coding language used to create documents for the World Wide Web  HTML is composed of tags. HTML tags.

CSS My favourite ICT lesson By Federico Boschi Cascading Style Sheets.

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.

How to Create a Clean Website Layout in Photoshop Part 2.

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

Slide 1 of 24 1) Launch Fireworks 2) Under File, choose New 3) In the New Document dialog box, enter Width: 100, Height 160, Resolution 72, and choose.

Planning a website by Jake Snoad There are lots of things to think about when deciding about creating a website…

ALBERT WAVERING BOBBY SENG. Week 2: HTML + CSS  Quiz  Announcements/questions/etc  Some functional HTML elements.

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.

Forms and tables NOTE THAT FOR THE FORMS AND IFRAMED CONTENT TO BE RESPONSIVE THE CONTENT OWNER NEEDS TO MAKE THEM RESPONSIVE ACCORDING TO INTERNET RESPONSIVE.

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

ATEC 6331 Final Project by Annis Leung Nov 25, 2008.

Principles of Web Design 6 th Edition Chapter 9 – Site Navigation.

MIMOS Berhad. All Rights Reserved. Nazarudin Wijee Mohd Sidek Salleh Grid Computing Lab MIMOS Berhad P-GRADE Portal Heuristic Evaluation.

Microsoft Expression Web-Illustrated Unit F: Enhancing a Design with CSS.

11 JUMPSTART YOUR CASTING. Post your casting to professional agents/actors. Manage photos in one convenient place. How it worksFind actorsHelp/FAQMoreSign.

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.

READ ME FIRST All text boxes are placeholder text and can be directly typed into All image boxes are placeholders. Entrant should search for image by clicking.

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.

Web and Multimedia Development Copyright © Genetic Computer School 2007WM LESSON OVERVIEW  Use of Tables  Creating Tables  Try It – 1  Creating.

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.

Cheryl Wolfe Web Services Administrator Tampa-Hillsborough County Public Library James Day Electronic Services Librarian Embry-Riddle Aeronautical University.

1 R3 R1 R5 R4 R6 R2 B B A A Looking at the Code Under the View menu Select Source.

Week-11 (Lecture-1) Introduction to HTML programming: A web based markup language for web. Ex.

Microsoft Expression Web-Illustrated Unit G: Designing Site Navigation.

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,

LMEvents SharePoint Portal How-to Guide

How to customize your Microsoft SharePoint Online website

Click into your course. RedShelf.

Fixed Positioning.

Sample Date or Presenter Info

Basics of Web Design Chapter 6 More CSS Basics Key Concepts

Using Netscape Page Composer

PowerPoint template A template for Children’s presentations

How to customize your Microsoft SharePoint Online website

Creating and Linking New Pages

D4912 – Website Rebranding, Day 1 Impact clarification

Transitioning Opacity

Web4Labels 3.1 Colour and logo definition features

Facebook Facebook Timeline Specs Facebook “Page” Specs

Presentation transcript:

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, # Title text: Arial, 12 px, # Image: 64 x 64 Font: 12 px Icon colour: #3e6b1c Link colour: # Link hover: #F08C00 Button: Rounded corners: Radius 5 px Contact box Heading: Arial 15 px, # Link text: Arial, 12 px, # Background color: ? Icon colour: #3e6b1c Green teaser box

Summary links Title: Arial 16 px, # Background color: ? Link color: # Link hover: #F08C00 Icon colour #3e6b1c Link colour # Hover link #F08C00 and underlined Link text 12 px Rounded corners: Radius 5 px

Example of web parts 3 Content editor web part Twitter web part RSS feed web part

Alert box 4 Background: Background color #ec3700, Text color #ffffff, Rounded corners 5px Wide Desktop Title: Corporate A, Regular, font-size 20px Text: Corporate S, Regular, font-size 16px Link: Corporate S, Regular, font-size 14px / Hover: underline Desktop Title: Corporate A, Regular, font-size 18px Text: Corporate S, Regular, font-size 15px Link: Corporate S, Regular, font-size 13px / Hover: underline Tablet Title: Corporate A, Regular, font-size 18px Text: Corporate S, Regular, font-size 15px Link: Corporate S, Regular, font-size 13px / Hover: underline Mobile Title: Corporate A, Regular, font-size 18px Text: Corporate S, Regular, font-size 15px Link: Corporate S, Regular, font-size 14px / Hover: underline Wide DesktopDesktop Tablet Mobile

Tables 5 Fortum data table: Light green # E4F4D2 Fortum coloured data table: Light green # E4F4D2 Light grey # F2F1F1

User controls User Controls for redirecting, filtering and updating the filtering on a page should be designed so that the information is immediately updated as soon as the user has finished making all the selections. Single selection field For a single selection field, the information should be updated as soon as the user has made a selection. The user should immediately get a visual cue that the information is being updated. In specific cases it is also possible to update only after the user has pressed a button to confirm the selection. 6

Multiple selection field 7 If the user can make several selections, these should be grouped in an information container and the information should be updated when the user clicks the button.