WEBDESIGN WITH CSS. Cascading Style Sheets. Martina Semlak
|
|
|
- Rosalyn Patrick
- 7 years ago
- Views:
Transcription
1 WEBDESIGN WITH CSS Cascading Style Sheets Martina Semlak
2 What is CSS CSS stands for Cascading Style Sheets Control the design (e.g., fonts, colors, spacing) of multiple websites all at once HTML to structure the content Separation of content and layout Current version: CSS 3 CSS ZenGarden
3 CSS Syntax Selector h1 { font-family: Arial Property Value Declaration-block
4 CSS Syntax h1 { font-family: Arial ; color: red
5 CSS Syntax: Comments /* for headings use only fonts without serifs */ h1 { font-family: Arial
6 How to insert CSS
7 External CSS using <link> <!DOCTYPE html> <html> <head> <title>stefan George Digital</title> <link rel="stylesheet" type="text/css" href="css/edition.css" /> <meta charset="utf-8" /> </head> <body> <h1>stefan George Digital</h1> <p>at the moment three works...</p> </body> </html> html { background-color: #c0b7a8; body { background-color: #F8FBEF header { background-color: #32649c; padding-bottom: 1em CSS
8 Internal CSS using <style> <!DOCTYPE html> <html> <head> <title>stefan George Digital</title> <style type="text/css"> h1 { font-family: Arial; color: red </style> <meta charset="utf-8" /> </head> <body> <h1>stefan George Digital</h1> <p>at the moment three works...</p> </body> </html>
9 Internal CSS <h1 style="color:red">stefan George Digital</h1>
10 How to insert CSS? Element/Attribute Value Notes External CSS using <link> file STYLESHEET Internal CSS using <style> text/css Advantage: change the layout of multiple documents at once. Use for single documents Internal CSS declaration Use for individual cases; no separation of content and presentation
11 Selectors Selectors Description Example Universal Selector Matches all elements in the document. Type Selector Matches elements by their names. h1, h2, h3 { Class Selector Matches elements by it s class attribute. * {.stanza { div.stanza{ ID Selector Matches elements by it s id attribute. #content { Descendant Selector Child Selector Matches an element that is an descendant of the specified element Matches an element that is the direct child of an element p a { li > a {
12 Universal Selector Selector: * Matches all elements in the document * { margin: 0; padding: 0; font-family: Georgia, Times, serif; color: # CSS div * { margin: 0; padding: 0
13 Type Selector Selector: h1, h2, p Matches elements by their names h1, h2 { color: white; font-family: Arial, Helvetica, sans-serif CSS h1 { font-size: 2.4em
14 Exercise 1: Write your first CSS document Open a new CSS document in Oxygen Save your CSS document (edition.css) into the folder CSS Write your first type selector (h1), define the text color (red) Open index.html in Oxygen After the <title> element, add the reference to your external CSS document <link rel="stylesheet" type="text/css" href="css/edition.css" /> Open the index.html in a browser Add the reference also to the edition.html and about.html
15 Class Selector Selector:. Matches elements by the value of their class attributes span.red { color: red CSS.blue { color: blue <span class="red">w</span>ir HTML
16 ID Selector Selector: # Matches elements by the value of their id attributes section#content { width: 960px CSS <section id="content"> Text </section> HTML
17 Descendant Selector Selector: div p Matches an element that is a descendant of the specified element section p { font-family: arial, verdana, sans-serif section#content p { font-family: arial, verdana, sans-serif CSS <section id="content"> <p>text</p> </section> HTML
18 Child Selector Selector: div > p Matches an element that is the direct child of an element section > p { font-family: arial, verdana, sans-serif <section> <p>first paragraph</p> <div> <p>second paragraph</p> </div> </section> CSS HTML
19 Pseudo classes Selector: :link, :hover, :active, :visited Pseudo classes describe conditions of elements (e.g. hyperlinks) a:link { color: deeppink; text-decoration: none a:visited { color: black a:hover { color: deeppink; text-decoration: underline CSS HTML <a href="#">stefan George Digital (link)</a><br /> <a href="#">stefan George Digital (visited)</a><br /> <a href="#">stefan George Digital (hover)</a><br /> Browser
20 Color COLOR
21 How to specify colors RGB values values for red, green and blue expressed in numbers between 0 and 255 Hex codes amount of red, green and blue in a six-digits code, preceded by a # Color names 17 standard colors (e.g. blue, red) More colors (e.g. AquaMarine) /* rgb value */ p { color: rgb(127, 255, 212) /* hex code */ h2 { color: #7FFFD4 /* color name */ h1 { color: AquaMarine
22 Color: Properties and Values Property Value Description color rgb, hex, color names foreground color (text) background-color background color h1 { color: white; background-color: #32649c; font-family: arial, verdana, sans-serif CSS Browser HTML <h1>stefan George Digital</h1>
23 Color: Summary Color not only brings your website to life, but also helps convey the mood. There are three ways to specify colors in CSS: RGB values, hex codes, and color names. Color pickers can help you find the color you want. Make sure that there is enough contrast between the text and the background color CSS3 has introduced RGBA to indicate opacity.
24 Color FONT/TEXT
25 Typeface SERIF SANS-SERIF MONOSPACE The The The Georgia Times Times New Roman Arial Verdana Helvetica Courier Courier New
26 Font: Properties and Values Property font-family font-style font-size font-weight font-variant Value font family + generic typeface (serif, sans-serif, monospace) font-family: Arial, Verdana, sans-serif font-family: Georgia, Times New Roman, serif font-family: Courier, Courier New, monospace italic, oblique, normal px, percentage, em normal, bold normal, small-caps CSS h1 { font-family: arial, verdana, sans-serif; font-style: italic; font-weight: normal; font-size: 1.2em; Browser
27 Text: Properties and Values Property text-indent text-align text-transform text-decoration Value px, percentage, em left, right, center, justify uppercase, lowercase none, underline, overline, line-through p { text-indent: 1em; text-align: justify; text-transform: lower-case; text-decoration: underline CSS Browser
28 Measurement systems Relative measures are preferred. The user can fit the output to his needs Pixels Percentages EM s h1 32px h2 24px h3 18px body 16px h1 200% h2 150% h3 133% body 100% h1 2em h2 1.5em h em body 100% p 1em
29 BOXES
30 Box model Control the dimensions of boxes Create borders around boxes Set margins and paddings
31 Box model: borders, margin, padding content content box padding box border box margin box p { width: 275px; border: 2px solid red; padding: 10px; margin: 10px total width: = 319
32 Box dimensions Property width height min-width min-height Value div { width: 300px; height: 150px; background-color: green p { width: 75%; background-color: white px, percentage, em px, percentage, em px, percentage, em px, percentage, em CSS Browser <div> <p>at the moment three works </p> </div> HTML
33 Box model: padding, margin Property Value Description padding (shorthand) px, percentage, em padding-top, paddingright, margin (shorthand) px, percentage, em margin-bottom, marginleft p { width: 200px; background-color: #dddddd; padding: 10px; padding-left: 40px; margin: 10px; border: 3px dotted green CSS Browser <p>at the moment three works </p> <p>further works will follow </p> HTML
34 Box model: border Property Value Examples border (shorthand) border: 1px solid green border-width px border-width: 2px border-width: 2px 3px 2px 1px border-style border-color border-top-width border-bottom-style border-right-color solid, dotted, dashed, double RGB, HEX, Color Names border-style: solid border-style: solid dotted solid dotted border-color: green border-color: green yellow yellow green border-left-width: 2px border-bottom-style: solid border-right-color: #333333
35 LISTS
36 Lists: Properties and Values Property list-style-type list-style-position list-style (shorthand) Value none disc, circle, square for (ul) decimal (1, 2), decimal-leading-zero (01, 02), lowerroman (i, ii), upper-roman (I, II) for (li) outside, inside
37 Lists: Properties and Values ul li { list-style-type: square ol li { list-style-type: lower-roman; list-style-position: inside CSS Browser <ul> <li>start</li> <li>edition</li> <li>about</li> </ul> <ol> <li>at the moment three works of Stefan George are transcribed, encoded, and enhanced with corresponding facsimiles. </li> </ol> HTML
38 Color LAYOUT
39 Layout: Positioning schemes Positioning schemes allow for control the layout of a page Normal flow: every block-level element appears in sequence starting in a new line. Relative, absolute and fixed positioning Floating elements: take an element out of the normal flow and let the rest of the content flow around it.
40 Layout: Properties and Values Property display float clear Value none, inline, block none, left, right left, right, both, none
41 Lists: Horizontal navigation li { display: inline CSS Browser <ul> <li><a href="#">start</a></li> <li><a href="#">edition</a></li> <li><a href="#">about</a></li> </ul> HTML
42 Layout: Floating elements Take an element out of the normal flow and position it to the left or right edge of the containing box. Define the width of the floating element. img { float: left; width: 100px; padding-right: 5px; CSS HTML <img src="html/images/george.jpg" alt="stefan George" title="stefan George sitting in his studio in 1910" width="50" /> <p>at the moment three works of Stefan George are transcribed, encoded, and enhanced with corresponding facsimiles.</p> Browser
43 Layout: Clear elements Stop the floating with clear img { float: left; width: 100px; padding-right: 5px h2 { clear: left; CSS <img src="html/images/george.jpg" alt="stefan George" title="stefan George sitting in his studio in 1910" width="100" /> <p>at the moment three works of Stefan George are transcribed, encoded, and enhanced with corresponding facsimiles.</p> <h2>about</h2> HTML Browser
44 Multi-column layouts with float Navigation, contact information, blog posts 1. set the width of the columns 2. float to position the columns next to each other 3. margin to create a gap between the columns section { width: 200px; float: left; aside { width: 100px; float: left; margin: 10px CSS <section> This is the left column </section> <aside> This is the right column </aside> HTML Browser
45 Reset CSS Initial values for each property Reset predefined specifications Reset CSS by Eric Meyer css/reset/ /* reset distance for all elements*/ * { margin: 0; padding: 0;
46 Tutorial session See printout
47 Cascade Multiple styles and declarations can affect one element > this can cause conflicts find declarations importance and origin specificity user agent user author author important user important color: green!important order specified
48 Initial value & Inheritance Most values are inherited by their child elements Exceptions: tables, forms, Force inheritance with the value inherit <!DOCTYPE html> <html> <head> <title>stefan George Digital</title> <style type="text/css"> h1 { color: red </style> </head> <body> <h1>stefan <em>george</em> Digital</h1> </body> </html>
49 Specificity Selector Value Specificity * A=0 B=0 C=0 D=0 0,0,0,0 li A=0 B=0 C=0 D=0 0,0,0,1 li:first-line A=0 B=0 C=0 D=0 0,0,0,2 ul li A=0 B=0 C=0 D=0 0,0,0,2 ul ol+li A=0 B=0 C=0 D=0 0,0,0,3 ul ol li.red A=0 B=0 C=0 D=0 0,0,1,3 li.red.level A=0 B=0 C=0 D=0 0,0,2,1 #content A=0 B=0 C=0 D=0 0,1,0,0 style= color:blue A=0 B=0 C=0 D=0 1,0,0,0 A = attribute in the HTML document B = Number of ID attributes of a selector C = Number of all other attributes (classes, pseudoclasses) of a selector D = Number of element names and pseudo-elements of a selector
50 Specificity <!DOCTYPE html> <html> <head> <title>stefan George Digital</title> <style type="text/css"> h1 { font-family: Arial; color: red </style> <meta charset="utf-8" /> </head> <body> <h1 style="color:green">stefan George Digital</h1> <p>at the moment three works...</p> </body> </html>
51 Specificity <!DOCTYPE html> <html> <head> <title>stefan George Digital</title> <style type="text/css"> body h1 { font-family: Arial; color: red h1 { color: green </style> <meta charset="utf-8" /> </head> <body> <h1>stefan George Digital</h1> <p>at the moment three works...</p> </body> </html>
52 CSS 3: New Features Borders (rounded corners, border image) Backgrounds Gradients Shadows Text (overflow, word-wrap, word-break) Web Fonts Multiple columns
53 CSS Framework Bootstrap YAML Foundation Ulkit Semantic UI
54 Links CSS 3 Cheat Sheet W3 School Full property table W3C Cascading Style Sheets
{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:
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
Web Design for Print Designers WEB DESIGN FOR PRINT DESIGNERS: WEEK 6
Web Design for Print Designers CSS uses a variety of declarations for styling text. Many use the variations of the font declaration. Other styles are done using different declarations. The font declaration
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
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?
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
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
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
HTML5 and CSS3 Design with CSS Page 1
HTML5 and CSS3 Design with CSS Page 1 1 12 2 3 3 4 45 5 6 6 7 7 HTML5 and CSS3 DESIGN WITH CSS Styles in HTML Documents Styles provide a method of creating consistent formatting of elements throughout
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
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
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 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,
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,
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
Introduction to Adobe Dreamweaver CC
Introduction to Adobe Dreamweaver CC What is Dreamweaver? Dreamweaver is the program that we will be programming our websites into all semester. We will be slicing our designs out of Fireworks and assembling
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
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
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,
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
Style & Layout in the web: CSS and Bootstrap
Style & Layout in the web: CSS and Bootstrap Ambient intelligence: technology and design Fulvio Corno Politecnico di Torino, 2014/2015 Goal Styling web content Advanced layout in web pages Responsive layouts
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
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
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...
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
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
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
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
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
Advanced Editor User s Guide
Advanced Editor User s Guide 1601 Trapelo Road Suite 329 Waltham, MA 02451 www.constantcontact.com Constant Contact, Inc. reserves the right to make any changes to the information contained in this publication
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
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
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
Cascading Style Sheet (CSS) Tutorial Using Notepad. Step by step instructions with full color screen shots
Updated version September 2015 All Creative Designs Cascading Style Sheet (CSS) Tutorial Using Notepad Step by step instructions with full color screen shots What is (CSS) Cascading Style Sheets and why
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
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
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
Creating a Resume Webpage with
Creating a Resume Webpage with 6 Cascading Style Sheet Code In this chapter, we will learn the following to World Class CAD standards: Using a Storyboard to Create a Resume Webpage Starting a HTML Resume
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
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
HTML and CSS. Elliot Davies. April 10th, 2013. ed37@st-andrews.ac.uk
HTML and CSS Elliot Davies ed37@st-andrews.ac.uk April 10th, 2013 In this talk An introduction to HTML, the language of web development Using HTML to create simple web pages Styling web pages using CSS
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 publishing: An introduction to CSS
Web publishing: An introduction to CSS 1 1 How to Use this User Guide 1.1. The Exercises This handbook accompanies the taught sessions for the course. Each section contains a brief overview of a topic
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
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
Print all 18 Chapters - CSS Basics
Or you can also use the @import method as shown below Print all 18 Chapters - CSS Basics CSS Basics.com Chapter: 1 - Introduction to CSS A CSS (cascading style sheet) file allows you to separate your web
Cascading Style Sheets (CSS)
6 Cascading Style Sheets (CSS) Objectives To control the appearance of a Web site by creating style sheets. To use a style sheet to give all the pages of a Web site the same look and feel. To use the class
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
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
GUIDE TO CODE KILLER RESPONSIVE EMAILS
GUIDE TO CODE KILLER RESPONSIVE EMAILS THAT WILL MAKE YOUR EMAILS BEAUTIFUL 3 Create flawless emails with the proper use of HTML, CSS, and Media Queries. But this is only possible if you keep attention
Level 1 - Clients and Markup
Level 1 - Clients and Markup The design for the email we ll build In this level The skills you ll need to compete Power Moves HTML and CSS Media queries Signature Move Using external resources An HTML
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
CST 150 Web Design and Development I Midterm Exam Study Questions Chapters 1-3
CST 150 Web Design and Development I Midterm Exam Study Questions Chapters 1-3 Multiple Choice Identify the choice that best completes the statement or answers the question. 1. A host that provides storage
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
Full report on all 24 clients
1 of 6 3/15/2011 11:05 AM Campaign Monitor - Home Features Pricing Customers Resources Support Our Story Blog Sign Up Login Create an Account Tips & Resources Designing and building emails Designing an
Introduction to Cascading Style Sheets
Introduction to Cascading Style Sheets Welcome to the CSS workshop! Before you begin this workshop you should have some basic understanding of HTML and building web pages. What is CSS anyway and what will
Responsive Web Design for Teachers. Exercise: Building a Responsive Page with the Fluid Grid Layout Feature
Exercise: Building a Responsive Page with the Fluid Grid Layout Feature Now that you know the basic principles of responsive web design CSS3 Media Queries, fluid images and media, and fluid grids, you
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
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
Code View User s Guide
Code View User s Guide 1601 Trapelo Road Suite 329 Waltham, MA 02451 www.constantcontact.com Constant Contact, Inc. reserves the right to make any changes to the information contained in this publication
Learning Web Design. Third Edition. A Beginner's Guide to (X)HTML, Style Sheets, and Web Graphics. Jennifer Niederst Robbins
Learning Web Design Third Edition A Beginner's Guide to (X)HTML, Style Sheets, and Web Graphics Jennifer Niederst Robbins O'REILLY Beijing- Cambridge Farnham Koln Paris Sebastopol -Taipei -Tokyo CONTENTS
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
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
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
C:\wamp\www\webdok\07bootstrap\bootstrap-3.2.0-dist\css\bootstrap.css 2. juli 2014 13:18
/*! * Bootstrap v3.2.0 (http://getbootstrap.com) * Copyright 2011-2014 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/license) */ /*! normalize.css v3.0.1 MIT License
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
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
Creating Web Pages with Dreamweaver CS 6 and CSS
Table of Contents Overview... 3 Getting Started... 3 Web Page Creation Tips... 3 Creating a Basic Web Page Exercise... 4 Create a New Page... 4 Using a Table for the Layout... 5 Adding Text... 6 Adding
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:
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
Page layout & typography. graphic design
Page layout & typography graphic design first impressions lecture goals To help you better communicate the purpose of your web pages by visually emphasizing the most important features and relationships
Web Publishing Basics 2
Web Publishing Basics 2 HTML and CSS Coding Jeff Pankin pankin@mit.edu Information Services and Technology Contents Course Objectives... 2 Creating a Web Page with HTML... 3 What is Dreamweaver?... 3 What
Eloqua Email 101. What is this and why should I read it?
DR Who? Definitive Results is a boutique marketing consulting firm based out of Leesburg, Virginia that specializes in helping Marketers accelerate their efforts using the technologies available to them
Website Development. 2 Text. 2.1 Fonts. Terry Marris September 2007. We see how to format text and separate structure from content.
Terry Marris September 2007 Website Development 2 Text We see how to format text and separate structure from content. 2.1 Fonts Professionally written websites, such as those by Google and Microsoft, use
CS134 Web Site Design & Development. Quiz1
CS134 Web Site Design & Development Quiz1 Name: Score: Email: I Multiple Choice Questions (2 points each, total 20 points) 1. Which of the following is an example of an IP address? [Answer: d] a. www.whitehouse.gov
Introduction to web development and JavaScript
Objectives Chapter 1 Introduction to web development and JavaScript Applied Load a web page from the Internet or an intranet into a web browser. View the source code for a web page in a web browser. Knowledge
Website Builder Documentation
Website Builder Documentation Main Dashboard page In the main dashboard page you can see and manager all of your projects. Filter Bar In the filter bar at the top you can filter and search your projects
Introduction to Web Technologies
Introduction to Web Technologies Tara Murphy 17th February, 2011 The Internet CGI Web services HTML and CSS 2 The Internet is a network of networks ˆ The Internet is the descendant of ARPANET (Advanced
Microsoft Expression Web Quickstart Guide
Microsoft Expression Web Quickstart Guide Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program, you ll find a number of task panes, toolbars,
WordPress and HTML Basics
WordPress and HTML Basics Intro: Jennifer Stuart Graphic Design background - switched to Web Design (1998) Started blogging in 2001 Became Interested in Javascript, PHP, etc. 2004 - Moved to WordPress
Chapter 8 More on Links, Layout, and Mobile Key Concepts. Copyright 2013 Terry Ann Morris, Ed.D
Chapter 8 More on Links, Layout, and Mobile Key Concepts Copyright 2013 Terry Ann Morris, Ed.D 1 Learning Outcomes Code relative hyperlinks to web pages in folders within a website Configure a hyperlink
EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE WEB EDITING
EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE WEB EDITING The European Computer Driving Licence Foundation Ltd. Portview House Thorncastle Street Dublin 4 Ireland Tel: + 353
Mobile Web Design with HTML5, CSS3, JavaScript and JQuery Mobile Training BSP-2256 Length: 5 days Price: $ 2,895.00
Course Page - Page 1 of 12 Mobile Web Design with HTML5, CSS3, JavaScript and JQuery Mobile Training BSP-2256 Length: 5 days Price: $ 2,895.00 Course Description Responsive Mobile Web Development is more
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. Introduction... 2. Downloading the Data Files... 2
Creating a Web Page Using HTML Part 3: Multi-page Management and Uploading INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 1.1 Summer 2009 Contents Introduction... 2 Downloading
Responsive Email Design
Responsive Email Design For the Hospitality Industry By Arek Klauza, Linda Tran & Carrie Messmore February 2013 Responsive Email Design There has been a lot of chatter in recent months in regards to Responsive
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
<?xml version= 1.0?> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.
dhtml
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
MCH Strategic Data Best Practices Review
MCH Strategic Data Best Practices Review Presenters Alex Bardoff Manager, Creative Services abardoff@whatcounts.com Lindsey McFadden Manager, Campaign Production Services lmcfadden@whatcounts.com 2 Creative
Artisteer. User Manual
Artisteer User Manual Table of Contents What Is Artisteer?...4 How to work with Artisteer interface?...5 Quick Start Guide...6 Downloading Artisteer...6 System Requirements...7 Installing Artisteer...8
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
Table of Contents THE DESIGNER S GUIDE TO CREATING NEWZAPP DRAG AND DROP TEMPLATES... 6 THE NEWZAPP SYSTEM... 7
Version 4.0.1 Table of Contents THE DESIGNER S GUIDE TO CREATING NEWZAPP DRAG AND DROP TEMPLATES... 6 THE NEWZAPP SYSTEM... 7 HOW THE SYSTEM WORKS... 7 THE TWO MAIN HTML EMAIL DESIGN OPTIONS FOR NEWZAPP...
Course Information Course Number: IWT 1229 Course Name: Web Development and Design Foundation
Course Information Course Number: IWT 1229 Course Name: Web Development and Design Foundation Credit-By-Assessment (CBA) Competency List Written Assessment Competency List Introduction to the Internet
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
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
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.
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
Interactive Data Visualization for the Web Scott Murray
Interactive Data Visualization for the Web Scott Murray Technology Foundations Web technologies HTML CSS SVG Javascript HTML (Hypertext Markup Language) Used to mark up the content of a web page by adding