Style & Layout in the web: CSS and Bootstrap
|
|
|
- Stuart Farmer
- 8 years ago
- Views:
Transcription
1 Style & Layout in the web: CSS and Bootstrap Ambient intelligence: technology and design Fulvio Corno Politecnico di Torino, 2014/2015
2 Goal Styling web content Advanced layout in web pages Responsive layouts Libraries 2
3 Summary CSS Cascading Style Sheets The Bootstrap framework 3
4 Style & Layout in the web CSS CASCADING STYLE SHEETS 4
5 Cascading Style Sheets CSS: Cascading Style Sheet CSS 1: W3C recommendation (17 Dec 1996) CSS 2.1: W3C Recommendation (7 June 2011) CSS 3: Working Draft Resources: CSS 2.1 standard, W3C CSS Home: W3C CSS Tutorial, 5
6 CSS Syntax CSS is based on rules A rule is a statement about one stylistic aspect of one or more XHTML elements A style sheet is a set of one or more rules that apply to an XHTML document 6
7 Cascading Style Sheets The term cascading means that a document can include more than one style sheet In this case, visualization follows priority rules 7
8 External style Link to an external style sheet using the <link> element style.css h1 { font-size:17px; font-family:verdana; color:green; } h2 { font-size:18px; font-family:arial; color:red; } <head> <link rel=stylesheet type="text/css" href="style.css"> </head> <body> <h1>green text on verdana 17 pixel font</h1> <h2>red text on arial a 18 pixel font</h2> </body> 8
9 External style Alternative directive in the <style> element <head> url(style.css); </style> </head> <body>... </body> 9
10 Internal style <style> element inside the document header <head> <style type="text/css"> h1 { font-size:17px; font-family:verdana; color:green; } h2 { font-size:18px; font-family:arial; color:red; } </style> </head> 10
11 Inline style <style> attribute within an XHTML element <h1 style="font-size:17px; font-family:verdana; color:green; "> Green text on verdana 17 pixel font </h1> 11
12 Priority rules Rules can be marked as important h1 { color:red!important } 12
13 Tree structure and inheritance XHTML documents are trees Styles are inherited along trees When two rules are in conflict the most specific wins Example body {color: green} h1 {color: red} 13
14 Main Selectors Selector E.cc #uu HTML <E> <E class="cc"> <E id="uu"> 14
15 15
16 Pseudo class selector Used to style an element based on something other than the structure of the document E.g., the state of a form element or link /* makes all unvisited links blue */ a:link {color:blue;} /* makes all visited links green */ a:visited {color:green;} /* makes links red when hovered or activated */ a:hover, a:active {color:red;} /* makes table rows red when hovered over */ tr:hover {background-color: red;} /* makes input elements yellow when focus is applied */ input:focus {background-color:yellow;} 16
17 Meaningful XHTML Meanginful elements h1, h2,... ul, ol, and dl strong and em blockquote and cite abbr, acronym, and code fieldset, legend, and label caption, thead, tbody, and tfoot HTML5 adds many new semantic elements id and class names Allow to give extra meaning div and span Add structure to document 17
18 DIV element Stands for division Used to group block-level elements Provides a way of dividing a document into meaningful areas Use only if necessary and not redundant <div id="mainnav"> <ul> <li>home</li> <li>about Us</li> <li>contact</li> </ul> </div> <ul id="mainnav"> <li>home</li> <li>about Us</li> <li>contact</li> </ul> 18
19 SPAN element Used to group or identify inline elements <h2>where s Durstan?</h2> <p>published on <span class="date">march 22nd, 2005</span> by <span class="author">andy Budd</span></p> 19
20 The box model One of the cornerstones of CSS Dictates how elements are displayed and, to a certain extent, how they interact with each other Every element on the page is considered to be a rectangular box 20
21 The box model Content The content of the box, where text and images appear Padding Clears an area around the content The padding is affected by the background color of the box Border A border that goes around the padding and content The border is affected by the background color of the box Margin Clears an area around the border The margin does not have a background color, it is completely transparent 21
22 Example Padding, borders, and margins are optional and default to zero #mybox { margin: 10px; padding: 5px; width: 70px; } 22
23 The box model Total element width = width + left padding + right padding + left border + right border + left margin + right margin Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin Example W3Schools.com 23
24 Positioning schemes Three basic positioning schemes in CSS Normal flow Floats Absolute positioning Unless specified, all boxes start life being positioned in the normal flow The position of an element s box in the normal flow will be dictated by that element s position in the (X)HTML 24
25 Normal flow Block-level boxes will appear vertically one after the other <div> </div> The vertical distance between boxes is calculated by the boxes vertical margins Inline boxes are laid out in a line horizontally <span> </span> Their horizontal spacing can be adjusted using horizontal padding, borders, and margins Vertical padding, borders, and margins will have no effect on the height of an inline box 25
26 Display property Allows to control element visualization (block or inline) Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way Example W3Schools.com li {display:inline;} span {display:block;} 26
27 Box Positioning A block can be positioned in different ways to which correspond different positioning schemes Static: normal block Relative: the offset values are relative to the block position in the normal flow. If a relative block B follows a relative block A, the offset is respect to the position of A without the offset Absolute: the box position is determined by the top, left, right, bottom properties and is relative to the containing block Fixed: the box is fixed with respect to some reference (the ( example viewport as an 27
28 Relative positioning It is possible to shift one element relative to its starting point by setting a vertical or horizontal position #mybox { position: relative; left: 20px; top: 20px; } 28
29 Absolute positioning Takes the element out of the flow of the document, thus taking up no space Other elements in the normal flow of the document will act as though the absolutely positioned element was never there 29
30 Fixed positioning A subcategory of absolute positioning A fixed element s containing block is the viewport Allows to create elements that always stay at the same position in the window Note: in case of overlaps the z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others) 30
31 Fixed positioning Can be used to create complex frame-like presentations #header { position: fixed; width: 100%; height: 15%; top: 0; right: 0; bottom: auto; left: 0; } #sidebar { position: fixed; width: 10em; height: auto; top: 15%; right: auto; bottom: 100px; left: 0;} #main {position: fixed; width: auto; height: auto; top: 15%; right: 0; bottom: 100px; left: 10em; } #footer {position: fixed; width: 100%; height: 100px; top: auto; right: 0; bottom: 0; left: 0; } 31
32 Examples W3Schools.com The main problem people have with positioning is remembering which type of positioning is which. Relative positioning is relative to the element s initial position in the flow of the document, whereas absolute positioning is relative to nearest positioned ancestor or, if one doesn t exist, the initial container block. A. Budd, C. Moll, S. Collison, CSS Mastery: Advanced Web Standards Solutions, FriendsOfED,
33 Floating A floated box can either be shifted to the left or the right until its outer edge touches the edge of its containing box, or another floated box Often used for images and when working with layouts Example img { float:right; } 33
34 Floating Floated boxes aren t in the normal flow of the document, so block boxes in the regular flow of the document behave as if the floated box wasn t there 34
35 Floating If all three boxes are floated left Box 1 is shifted left until it touches its containing box Other two boxes are shifted left until they touch the preceding floated box Examples/chapter03/floating-boxes.htm 35
36 Floating If the containing block is too narrow for all of the floated elements to fit horizontally The remaining floats will drop down until there is sufficient space If the floated elements have different heights, it is possible for floats to get stuck on other 36
37 Line boxes and clearing Line boxes next to a floated box are shortened to make room for the floated box, and flow around the float Floats were created to allow text to flow around images 37
38 Line boxes and clearing To stop line boxes flowing around the outside of a floated box, you need to apply a clear to that box The clear property can be left, right, both, or none, and indicates which side of the box should not be next to a floated box p { clear: left } 38
39 Two-column floated layout 39
40 Two-column floated layout Better: #content add horizontal { padding width: 520px; float: right; } #mainnav { width: 180px; float: left; } #footer { clear: both; } #mainnav { padding-top: 20px; padding-bottom: 20px; } #mainnav li { padding-left: 20px; padding-right: 20px; } #content h1, #content h2, #content p { padding-right: 20px; } 40
41 Three-column floated layout (X)HTML framework similar to the two column layout, but two new divs inside the content div <div id="content"> <div id="maincontent"> </div> <div id="secondarycontent"> </div> </div> 41
42 Three-column floated layout Float the main content left and the secondary content right, inside the already floated content div Divides the second content column in two, creating a three-column effect 42
43 Three-column floated layout Better: remove the padding from the content #maincontent { element width: and 320px; apply it to the content of the secondary float: left; content } #secondarycontent { width: 180px; float: right; } #secondarycontent h1, #secondarycontent h2, #secondarycontent p { padding-left: 20px; padding-right: 20px; } 43
44 Three-column floated layout 44
45 References Andy Budd, Cameron Moll, Simon Collison, CSS Mastery, Advanced Web Standards Solutions 45
46 Style & Layout in the web THE BOOTSTRAP FRAMEWORK 46
47 Bootstrap Open Source CSS (and Javascript) framework Allows applying modern styles Sensible and nice-looking defaults Easy to apply custom themes Takes care of cross-browser issues Simplified layout model Developed by Twitter 47
48 Bootstrap philosophy Based on CCS classes Each class applies one effect Various classes may be combined in the same element Wide range of standard classes Wide range of additional components Ready-to use interactive elements or groups of elements Mobile-first Responsive 48
49 Using Bootstrap 3 files Bootstrap Theme Javascript support Or download locally 49
50 Page structure Start with Basic template Or, choose from published Examples 50
51 Buttons & Menus 51
52 Tables 52
53 Navigation bars 53
54 Grids & Columns 54
55 License These slides are distributed under a Creative Commons license Attribution NonCommercial ShareAlike (CC BY-NC-SA) 3.0 You are free to: Share copy and redistribute the material in any medium or format Adapt remix, transform, and build upon the material The licensor cannot revoke these freedoms as long as you follow the license terms. Under the following terms: Attribution You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use. NonCommercial You may not use the material for commercial purposes. ShareAlike If you remix, transform, or build upon the material, you must distribute your contributions under the same license as the original. No additional restrictions You may not apply legal terms or technological measures that legally restrict others from doing anything the license permits. 55
Using Style Sheets for Consistency
Cascading Style Sheets enable you to easily maintain a consistent look across all the pages of a web site. In addition, they extend the power of HTML. For example, style sheets permit specifying point
Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University
Web Design Basics Cindy Royal, Ph.D. Associate Professor Texas State University HTML and CSS HTML stands for Hypertext Markup Language. It is the main language of the Web. While there are other languages
Web Design and Databases WD: Class 7: HTML and CSS Part 3
Web Design and Databases WD: Class 7: HTML and CSS Part 3 Dr Helen Hastie Dept of Computer Science Heriot-Watt University Some contributions from Head First HTML with CSS and XHTML, O Reilly Recap! HTML
Outline of CSS: Cascading Style Sheets
Outline of CSS: Cascading Style Sheets nigelbuckner 2014 This is an introduction to CSS showing how styles are written, types of style sheets, CSS selectors, the cascade, grouping styles and how styles
Web Design with CSS and CSS3. Dr. Jan Stelovsky
Web Design with CSS and CSS3 Dr. Jan Stelovsky CSS Cascading Style Sheets Separate the formatting from the structure Best practice external CSS in a separate file link to a styles from numerous pages Style
Web Design & Development - Tutorial 04
Table of Contents Web Design & Development - Tutorial 04... 1 CSS Positioning and Layout... 1 Conventions... 2 What you need for this tutorial... 2 Common Terminology... 2 Layout with CSS... 3 Review the
HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL
![HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL](/thumbs/40/20611446.jpg "HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL")
HTML CSS Basic Structure HTML [Hypertext Markup Language] is the code read by a browser and defines the overall page structure. The HTML file or web page [.html] is made up of a head and a body. The head
Chapter 7 Page Layout Basics Key Concepts. Copyright 2013 Terry Ann Morris, Ed.D
Chapter 7 Page Layout Basics Key Concepts Copyright 2013 Terry Ann Morris, Ed.D 1 Learning Outcomes float fixed positioning relative positioning absolute positioning two-column page layouts vertical navigation
Last week we talked about creating your own tags: div tags and span tags. A div tag goes around other tags, e.g.,:
CSS Tutorial Part 2: Last week we talked about creating your own tags: div tags and span tags. A div tag goes around other tags, e.g.,: animals A paragraph about animals goes here
CREATING HORIZONTAL NAVIGATION BAR USING ADOBE DREAMWEAVER CS5
CREATING HORIZONTAL NAVIGATION BAR USING ADOBE DREAMWEAVER CS5 Step 1 - Creating list of links - (5 points) Traditionally, CSS navigation is based on unordered list - . Any navigational bar can be
What is CSS? Official W3C standard for controlling presentation Style sheets rely on underlying markup structure
CSS Peter Cho 161A Notes from Jennifer Niederst: Web Design in a Nutshell and Thomas A. Powell: HTML & XHTML, Fourth Edition Based on a tutorials by Prof. Daniel Sauter / Prof. Casey Reas What is CSS?
JJY s Joomla 1.5 Template Design Tutorial:
JJY s Joomla 1.5 Template Design Tutorial: Joomla 1.5 templates are relatively simple to construct, once you know a few details on how Joomla manages them. This tutorial assumes that you have a good understanding
Web Development 1 A4 Project Description Web Architecture
Web Development 1 Introduction to A4, Architecture, Core Technologies A4 Project Description 2 Web Architecture 3 Web Service Web Service Web Service Browser Javascript Database Javascript Other Stuff:
Web Building Blocks. Joseph Gilbert User Experience Web Developer University of Virginia Library joe.gilbert@virginia.
Web Building Blocks Core Concepts for HTML & CSS Joseph Gilbert User Experience Web Developer University of Virginia Library joe.gilbert@virginia.edu @joegilbert Why Learn the Building Blocks? The idea
Slicing and Coding the Navigation Background in CSS
CSS Template Tutorial Please take your time to visit http://www.freecss.info Table of Contents Step 1 Setting up. page 3 Step 2 Coding the basics.page 5 Step 3 Coding and slicing the header. page 9 Step
Essential HTML & CSS for WordPress. Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com
Essential HTML & CSS for WordPress Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com HTML: Hypertext Markup Language HTML is a specification that defines how pages are created
Web Authoring CSS. www.fetac.ie. Module Descriptor
The Further Education and Training Awards Council (FETAC) was set up as a statutory body on 11 June 2001 by the Minister for Education and Science. Under the Qualifications (Education & Training) Act,
COMMONWEALTH OF PENNSYLVANIA DEPARTMENT S OF Human Services, INSURANCE, AND AGING
COMMONWEALTH OF PENNSYLVANIA DEPARTMENT S OF Human Services, INSURANCE, AND AGING INFORMATION TECHNOLOGY GUIDELINE Name Of Guideline: Domain: Application Date Issued: 03/18/2014 Date Revised: 02/17/2016
CSS - Cascading Style Sheets
CSS - Cascading Style Sheets From http://www.csstutorial.net/ http://www.w3schools.com/css/default.asp What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements External
CSS for Page Layout. Key Concepts
CSS for Page Layout Key Concepts CSS Page Layout Advantages Greater typography control Style is separate from structure Potentially smaller documents Easier site maintenance Increased page layout control
CHAPTER 10. When you complete this chapter, you will be able to:
Data Tables CHAPTER 10 When you complete this chapter, you will be able to: Use table elements Use table headers and footers Group columns Style table borders Apply padding, margins, and fl oats to tables
ITNP43: HTML Lecture 4
ITNP43: HTML Lecture 4 1 Style versus Content HTML purists insist that style should be separate from content and structure HTML was only designed to specify the structure and content of a document Style
Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl. Web Design in Nvu Workbook 2
Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl Web Design in Nvu Workbook 2 CSS stands for Cascading Style Sheets, these allow you to specify the look and feel of your website. It also helps with consistency.
Web Development CSE2WD Final Examination June 2012. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards?
Question 1. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards? (b) Briefly identify the primary purpose of the flowing inside the body section of an HTML document: (i) HTML
CSS 101. CSS CODE The code in a style sheet is made up of rules of the following types
CSS 101 WHY CSS? A consistent system was needed to apply stylistic values to HTML elements. What CSS does is provide a way to attach styling like color:red to HTML elements like . It does this by defining
Web Design I. Spring 2009 Kevin Cole Gallaudet University 2009.03.05
Web Design I Spring 2009 Kevin Cole Gallaudet University 2009.03.05 Layout Page banner, sidebar, main content, footer Old method: Use , , New method: and "float" CSS property Think
Responsive Web Design Creative License
Responsive Web Design Creative License Level: Introduction - Advanced Duration: 16 Days Time: 9:30 AM - 4:30 PM Cost: 2197 Overview Web design today is no longer just about cross-browser compatibility.
Web Design and Development ACS-1809. Chapter 9. Page Structure
Web Design and Development ACS-1809 Chapter 9 Page Structure 1 Chapter 9: Page Structure Organize Sections of Text Format Paragraphs and Page Elements 2 Identifying Natural Divisions It is normal for a
Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates
Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates What is a DIV tag? First, let s recall that HTML is a markup language. Markup provides structure and order to a page. For example,
ICE: HTML, CSS, and Validation
ICE: HTML, CSS, and Validation Formatting a Recipe NAME: Overview Today you will be given an existing HTML page that already has significant content, in this case, a recipe. Your tasks are to: mark it
Using an external style sheet with Dreamweaver (CS6)
Using an external style sheet with Dreamweaver (CS6) nigelbuckner.com 2012 This handout explains how to create an external style sheet, the purpose of selector types and how to create styles. It does not
Web Design Revision. AQA AS-Level Computing COMP2. 39 minutes. 39 marks. Page 1 of 17
Web Design Revision AQA AS-Level Computing COMP2 204 39 minutes 39 marks Page of 7 Q. (a) (i) What does HTML stand for?... () (ii) What does CSS stand for?... () (b) Figure shows a web page that has been
Garfield Public Schools Fine & Practical Arts Curriculum Web Design
Garfield Public Schools Fine & Practical Arts Curriculum Web Design (Half-Year) 2.5 Credits Course Description This course provides students with basic knowledge of HTML and CSS to create websites and
How to Properly Compose E-Mail HTML Code : 1
How to Properly Compose E-Mail HTML Code : 1 For any successful business, creating and sending great looking e-mail is essential to project a professional image. With the proliferation of numerous e-mail
{color:blue; font-size: 12px;}
CSS stands for cascading style sheets. Styles define how to display a web page. Styles remove the formatting of a document from the content of the document. There are 3 ways that styles can be applied:
CST 150 Web Design I CSS Review - In-Class Lab
CST 150 Web Design I CSS Review - In-Class Lab The purpose of this lab assignment is to review utilizing Cascading Style Sheets (CSS) to enhance the layout and formatting of web pages. For Parts 1 and
How To Create A Web Page On A Windows 7.1.1 (For Free) With A Notepad) On A Macintosh (For A Freebie) Or Macintosh Web Browser (For Cheap) On Your Computer Or Macbook (
CREATING WEB PAGE WITH NOTEPAD USING HTML AND CSS The following exercises illustrate the process of creating and publishing Web pages with Notepad, which is the plain text editor that ships as part of
Positioning Container Elements
Advanced Lesson Group 3 - Element Positioning with CSS Positioning Container Elements The position: style property is used to move block elements to a specific location on the web page. The position style
Building a Horizontal Menu in Dreamweaver CS3 Using Spry R. Berdan
Building a Horizontal Menu in Dreamweaver CS3 Using Spry R. Berdan In earlier versions of dreamweaver web developers attach drop down menus to graphics or hyperlinks by using the behavior box. Dreamweaver
Creating the Surf Shop website Part3 REVISED
Creating the Surf Shop website Part3 REVISED Part 2 Recap: You should have the navigation completed for the website before starting Part 3. 1)Create a new DIV in index.html. It should come after banner
FETAC Certificate in Multimedia Production. IBaT College Swords. FETAC Certificate in Multimedia Production Web Authoring Dreamweaver 3
IBaT College Swords FETAC Certificate in Multimedia Production Web Authoring Dreamweaver 3 Lecturer: Cara Martin M.Sc. Lecturer contact details: cmartin@ibat.ie IBaT 2009 Page 1 Cascading Style Sheets
Principles of Web Design 6 th Edition. Chapter 12 Responsive Web Design
Principles of Web Design 6 th Edition Chapter 12 Responsive Web Design Objectives Recognize the need for responsive web design Use media queries to apply conditional styles Build a basic media query Create
CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions)
CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions) Step 1 - DEFINE A NEW WEB SITE - 5 POINTS 1. From the welcome window that opens select the Dreamweaver Site... or from the main
Create Your own Company s Design Theme
Create Your own Company s Design Theme A simple yet effective approach to custom design theme INTRODUCTION Iron Speed Designer out of the box already gives you a good collection of design themes, up to
Building Responsive Websites with the Bootstrap 3 Framework
Building Responsive Websites with the Bootstrap 3 Framework Michael Slater and Charity Grace Kirk michael@webvanta.com 888.670.6793 1 Today s Presenters Michael Slater President and Cofounder of Webvanta
SAULT COLLEGE OF APPLIED ARTS AND TECHNOLOGY SAULT STE. MARIE, ONTARIO COURSE OUTLINE
SAULT COLLEGE OF APPLIED ARTS AND TECHNOLOGY SAULT STE. MARIE, ONTARIO COURSE OUTLINE COURSE TITLE: Introduction to Web Development CODE NO. : SEMESTER: 1 PROGRAM: AUTHOR: IT Studies Dennis Ochoski DATE:
Development Perspective: DIV and CSS HTML layout. Web Design. Lesson 2. Development Perspective: DIV/CSS
Web Design Lesson 2 Development Perspective: DIV/CSS Why tables have been tabled Tables are a cell based layout tool used in HTML development. Traditionally they have been the primary tool used by web
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS) W3C standard for defining presentation of web documents (way documents are displayed or delivered to users typography, colours, layout etc) Presentation separated from content
CSS. CSS - cascading style sheets CSS - permite separar num documento HTML o conteúdo do estilo. ADI css 1/28
CSS CSS - cascading style sheets CSS - permite separar num documento HTML o conteúdo do estilo ADI css 1/28 Cascaded Style Sheets Por ordem de prioridade: Inline
Table of Contents. What is ProSite? What is Behance? How do ProSite & Behance work together? Get Started in 6 Easy Steps.
The Beginners Guide Table of Contents 03 04 05 06 34 35 What is ProSite? What is Behance? How do ProSite & Behance work together? Get Started in 6 Easy Steps See Live Examples Need More Help? What is ProSite?
WHITEPAPER. Skinning Guide. Let s chat. 800.9.Velaro www.velaro.com info@velaro.com. 2012 by Velaro
WHITEPAPER Skinning Guide Let s chat. 2012 by Velaro 800.9.Velaro www.velaro.com info@velaro.com INTRODUCTION Throughout the course of a chat conversation, there are a number of different web pages that
Fast track to HTML & CSS 101 (Web Design)
Fast track to HTML & CSS 101 (Web Design) Level: Introduction Duration: 5 Days Time: 9:30 AM - 4:30 PM Cost: 997.00 Overview Fast Track your HTML and CSS Skills HTML and CSS are the very fundamentals of
This document will describe how you can create your own, fully responsive. drag and drop email template to use in the email creator.
1 Introduction This document will describe how you can create your own, fully responsive drag and drop email template to use in the email creator. It includes ready-made HTML code that will allow you to
Designing HTML Emails for Use in the Advanced Editor
Designing HTML Emails for Use in the Advanced Editor For years, we at Swiftpage have heard a recurring request from our customers: wouldn t it be great if you could create an HTML document, import it into
Selectors in Action LESSON 3
LESSON 3 Selectors in Action In this lesson, you will learn about the different types of selectors and how to use them. Setting Up the HTML Code Selectors are one of the most important aspects of CSS because
Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence
Web Development Owen Sacco ICS2205/ICS2230 Web Intelligence Introduction Client-Side scripting involves using programming technologies to build web pages and applications that are run on the client (i.e.
Coding HTML Email: Tips, Tricks and Best Practices
Before you begin reading PRINT the report out on paper. I assure you that you ll receive much more benefit from studying over the information, rather than simply browsing through it on your computer screen.
Coding Standards for Web Development
DotNetDaily.net Coding Standards for Web Development This document was downloaded from http://www.dotnetdaily.net/ You are permitted to use and distribute this document for any noncommercial purpose as
Further web design: Cascading Style Sheets Practical workbook
Further web design: Cascading Style Sheets Practical workbook Aims and Learning Objectives This document gives an introduction to the use of Cascading Style Sheets in HTML. When you have completed these
Simply download Beepip from http://beepip.com and run the file when it arrives at your computer.
Beepip User Guide How To's: How do I install Beepip? Simply download Beepip from http://beepip.com and run the file when it arrives at your computer. How do I set up Beepip? Once you've opened up Beepip,
CIS 467/602-01: Data Visualization
CIS 467/602-01: Data Visualization HTML, CSS, SVG, (& JavaScript) Dr. David Koop Assignment 1 Posted on the course web site Due Friday, Feb. 13 Get started soon! Submission information will be posted Useful
Basic tutorial for Dreamweaver CS5
Basic tutorial for Dreamweaver CS5 Creating a New Website: When you first open up Dreamweaver, a welcome screen introduces the user to some basic options to start creating websites. If you re going to
Web layout guidelines for daughter sites of Scotland s Environment
Web layout guidelines for daughter sites of Scotland s Environment Current homepage layout of Scotland s Aquaculture and Scotland s Soils (September 2014) Design styles A daughter site of Scotland s Environment
Dreamweaver Domain 2: Planning Site Design and Page Layout
Dreamweaver Domain 2: Planning Site Design and Page Layout Adobe Creative Suite 5 ACA Certification Preparation: Featuring Dreamweaver, Flash, and Photoshop 1 Objectives Identify best practices for designing
Kentico CMS, 2011 Kentico Software. Contents. Mobile Development using Kentico CMS 6 2 Exploring the Mobile Environment 1
Contents Mobile Development using Kentico CMS 6 2 Exploring the Mobile Environment 1 Time for action - Viewing the mobile sample site 2 What just happened 4 Time for Action - Mobile device redirection
1 of 8 9/14/2011 5:40 PM
file:///z:/sites/gemini/public_html/westbendmarketingfirm.htm 1 of 8 9/14/2011 5:40 PM
Mobile Web Site Style Guide
YoRk University Mobile Web Site Style Guide Table of Contents This document outlines the graphic standards for the mobile view of my.yorku.ca. It is intended to be used as a guide for all York University
Base template development guide
Scandiweb Base template development guide General This document from Scandiweb.com contains Magento theme development guides and theme development case study. It will basically cover two topics Magento
Introduction to Web Design Curriculum Sample
Introduction to Web Design Curriculum Sample Thank you for evaluating our curriculum pack for your school! We have assembled what we believe to be the finest collection of materials anywhere to teach basic
Script Handbook for Interactive Scientific Website Building
Script Handbook for Interactive Scientific Website Building Version: 173205 Released: March 25, 2014 Chung-Lin Shan Contents 1 Basic Structures 1 11 Preparation 2 12 form 4 13 switch for the further step
<Insert Picture Here>
Designing the Oracle Store with Oracle Application Express Marc Sewtz Software Development Manager Oracle Application Express Oracle USA Inc. 540 Madison Avenue,
MAGENTO THEME SHOE STORE
MAGENTO THEME SHOE STORE Developer: BSEtec Email: support@bsetec.com Website: www.bsetec.com Facebook Profile: License: GPLv3 or later License URL: http://www.gnu.org/licenses/gpl-3.0-standalone.html 1
SAHARA DIGITAL8 RESPONSIVE MAGENTO THEME
SAHARA DIGITAL8 RESPONSIVE MAGENTO THEME This document is organized as follows: Chater I. Install ma_sahara_digital8 template Chapter II. Features and elements of the template Chapter III. List of extensions
Email Campaign Guidelines and Best Practices
epromo Guidelines HTML Maximum width 700px (length = N/A) Maximum total file size, including all images = 200KB Only use inline CSS, no stylesheets Use tables, rather than layout Use more TEXT instead
Responsive Web Design: Media Types/Media Queries/Fluid Images
HTML Media Types Responsive Web Design: Media Types/Media Queries/Fluid Images Mr Kruyer s list of HTML Media Types to deliver CSS to different devices. Important note: Only the first three are well supported.
The Training Floor s. Webmaster s. Bible
The Training Floor s Webmaster s Bible Host... 4 Login for WordPress... 4 Making Mistakes... 4 Email... 4 Retrieving Email... 5 Setting up Email on phones or computer... 5 Editing Pages... 5 Creating Email
We automatically generate the HTML for this as seen below. Provide the above components for the teaser.txt file.
Creative Specs Gmail Sponsored Promotions Overview The GSP creative asset will be a ZIP folder, containing four components: 1. Teaser text file 2. Teaser logo image 3. HTML file with the fully expanded
Stylesheet or in-line CSS CSS attributes, used in stylesheets or in-line, can define:
Stylesheet or in-line CSS CSS attributes, used in stylesheets or in-line, can define: body, div, p, h1 - h6, hr, table, thead, tr, th, td, blockquote, address, ol, ul, dl, dt, dd span, a, font class e.g..stylename
Professional & Workgroup Editions
Professional & Workgroup Editions Add a popup window for scheduling appointments on your own web page using HTML Date: August 2, 2011 Page 1 Overview This document describes how to insert a popup window
Creative Guidelines for Emails
Version 2.1 Contents 1 Introduction... 3 1.1 Document Aim and Target Audience... 3 1.2 WYSIWYG editors... 3 1.3 Outlook Overview... 3 2 Quick Reference... 4 3 CSS and Styling... 5 3.1 Positioning... 5
Website Planning Checklist
Website Planning Checklist The following checklist will help clarify your needs and goals when creating a website you ll be surprised at how many decisions must be made before any production begins! Even
Table of Contents Find out more about NewZapp
Table of Contents Why is email display an issue in email marketing?... 2 Expert Email Design... 3 Desktop PC and Apple Mac email applications... 4 Web and mobile device email readers... 5 Creating your
WEB PROGRAMMING LAB (Common to CSE & IT)
138 WEB PROGRAMMING LAB (Common to CSE & IT) Course Code :13CT1121 L T P C 0 0 3 2 Course Educational Objectives: The main objective of the lab course is to expose the students to different programming
WEB DEVELOPMENT IA & IB (893 & 894)
DESCRIPTION Web Development is a course designed to guide students in a project-based environment in the development of up-to-date concepts and skills that are used in the development of today s websites.
RESPONSIVE EMAIL DESIGN BY COMMUNIGATOR
RESPONSIVE EMAIL DESIGN BY COMMUNIGATOR RESPONSIVE EMAIL DESIGN According to stats from Litmus, in 2014 at least 53% of emails were opened on a mobile device. That is a huge increase from 2011 when the
Building Your First Drupal 8 Company Site
Building Websites with Drupal: Learn from the Experts Article Series Building Your First Drupal 8 Company Site by Todd Tomlinson July, 2014 Unicon is a Registered Trademark of Unicon, Inc. All other product
HTML Tables. IT 3203 Introduction to Web Development
IT 3203 Introduction to Web Development Tables and Forms September 3 HTML Tables Tables are your friend: Data in rows and columns Positioning of information (But you should use style sheets for this) Slicing
Why? Mobile. 0Your content is no more than 3 taps away from Angry Birds. 0 Many people access your website via smartphones and other mobile devices
Why? Mobile 0 Many people access your website via smartphones and other mobile devices 0Your content is no more than 3 taps away from Angry Birds Image src: http://www.angrybirds.com/ It is 2013? 0 Which
Website Login Integration
SSO Widget Website Login Integration October 2015 Table of Contents Introduction... 3 Getting Started... 5 Creating your Login Form... 5 Full code for the example (including CSS and JavaScript):... 7 2
CSS Techniques: Scrolling gradient over a fixed background
This is a little hard to describe, so view the example and be sure to scroll to the bottom of the page. The background is a gradient that fades into a simple graphic. As you scroll down the page, the graphic
Magento Responsive Theme Design
Magento Responsive Theme Design Richard Carter Chapter No. 2 "Making Your Store Responsive" In this package, you will find: A Biography of the author of the book A preview chapter from the book, Chapter
Basics of HTML (some repetition) Cascading Style Sheets (some repetition) Web Design
Basics of HTML (some repetition) Cascading Style Sheets (some repetition) Web Design Contents HTML Quiz Design CSS basics CSS examples CV update What, why, who? Before you start to create a site, it s
Web Development I & II*
Web Development I & II* Career Cluster Information Technology Course Code 10161 Prerequisite(s) Computer Applications Introduction to Information Technology (recommended) Computer Information Technology
Web Design for Programmers. Brian Hogan NAPCS Slides and content 2008 Brian P. Hogan Do not reproduce in any form without permission
Web Design for Programmers Brian Hogan NAPCS Slides and content 2008 Brian P. Hogan Do not reproduce in any form without permission Quick Disclaimers This is a crash course! Many topics are simplified
Contents. Downloading the Data Files... 2. Centering Page Elements... 6
Creating a Web Page Using HTML Part 1: Creating the Basic Structure of the Web Site INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 2.0 Winter 2010 Contents Introduction...
Building Responsive Layouts
Building Responsive Layouts by Zoe Mickley Gillenwater @zomigi August 28, 2012 Responsive Web Design Summit What I do Books Stunning CSS3: A Project-based Guide to the Latest in CSS www.stunningcss3.com
WRITE BETTER HTML BY WRITING BETTER CSS
WRITE BETTER HTML BY WRITING BETTER CSS THE ROYAL WE Chris Coyier @chriscoyier BETTER? 1 Less of it 2 More Semantic 3 More Accessible 4 Futureproof // Speed // Maintainability // SEO // Happy People 123
Responsive Web Design (RWD) Best Practices Guide Version: 2013.11.20
Responsive Web Design (RWD) Best Practices Guide Version: 2013.11.20 This document includes best practices around responsive web design (RWD) when developing hybrid applications. Details on each checklist
The Essential Guide to HTML Email Design
The Essential Guide to HTML Email Design Index Introduction... 3 Layout... 4 Best Practice HTML Email Example... 5 Images... 6 CSS (Cascading Style Sheets)... 7 Animation and Scripting... 8 How Spam Filters