Welcome! Please sit in alternating rows
|
|
|
- Noah Edwards
- 7 years ago
- Views:
Transcription
1 Welcome! Please sit in alternating rows
2 Day TWO: CSS 101
3 What are we going to do? Today will be all about CSS: Day one: HTML 101 Introduction to websites HyperText Markup Language (HTML) Making our first few pages Day two: CSS 101 Introducing Cascading Style Sheets (CSS) Styling HTML elements Day three: Application & Integration Use knowledge from day 1 and 2 to make a functioning website
4 RECAP: FINAL Assignment Please share with us your experiences on the final assignment. Did you encounter problems, or came up with a kick-ass menu? Raise your hand!
5 Let s Start!
6 Introduction to CSS CSS is used to style web pages. CSS is an abbreviation of Cascading Style Sheets. Cascading implies that style rules are passed on to the children of the parent element If the font size of a certain DIV element is set to 12px, all the P elements inside the DIV will inherit the font size of 12px. However, cascading also implies that properties can be overwritten by a more specific selector (lower in the cascading hierarchy)
7 Introduction to CSS <body> <div class= content > <p>content goes here</p> </div> </body> selector { property: value; } Selectors are used to declare which part of the markup a style applies to Elements of a specific type, e.g. H2 headers Elements specified by attribute ID Class
8 Introduction to CSS <body> <div class= content > <p>content goes here</p> </div> </body> body { font-family: arial; font-size: 12px; }.content { position: relative; } p { } padding-bottom: 10%;
9 Introduction to CSS To recap what we have seen on the previous pages: Selectors Are used to declare which part of the markup a style applies to Properties The property is the style attribute you want to change Values Each property has a value Comments Used to explain your code. Comments are opened with /* and closed with */
10 introduction to css You can use a selector to directly target an HTML-element, like so: element { property: value; } You can also use more specific selectors, for example a parent-child relation, like so: parent child { property: value; } You can target more than one element by using a comma, like so: element1, element2, element3 { property: value; }
11 linking HTml and css There are three ways of inserting a style sheet: External style sheet (YAY) <link rel= stylesheet type= text/css href= filename.css > Internal style sheet (BOO) <head> <style> p {margin-left:20px;} </style> </head> Inline style (YAY... sort of) <p style= color:sienna;margin-left:20px; >This is a paragraph.</p>
12 Assignment 1: link stylesheet We ask you to link a given CSS file to all of the four given HTML pages using the technique we mentioned earlier. Download the relevant files from
13 CSS: CLASSES AND ID s We can reference elements specified by two types of attributes. Classes Used to specify a style for a group of elements. Most often used on several elements. This allows to set a particular style for many HTML elements with the same class. Uses the HTML Class attribute, is defined with a. ID s Used to specify a style for a single, unique element Uses the ID attribute of the HTML element, is defined with a # NOTE: It is not allowed to use multiple ID s with the same name on a single page.
14 Basic CSS properties: background One property of CSS is the background. It s often applied to the body, but can be applied to other elements as well. The background property consists of four parts: background-image tells the browser where to find an image background-repeat tells the browser whether to repeat the background image background-position tells the position of the background to the browser background-color describes the background color of an element
15 Basic CSS properties: background The background-image needs to be specified using an url value: body { background-image: url( filename.jpg ); } The linking to the file works the same as in HTML: folder/filename for a file in a folder in a lower level,../filename for a higher-level folder. The background-repeat property has 4 preset values, you need to use either of them: no-repeat For a non-repetitive background repeat-x For a background repeat along the x-axis repeat-y For a background repeat along the y-axis repeat For a background repeat in both directions
16 Basic CSS properties: background The background position is a little more complex. It has preset values, as well as custom values which can be combined as well. The preset values are as follows: left, center and right top, center and bottom for a position relative to the screen on the x-axis for a position relative to the screen on the y-axis The custom values can be percentual or pixel-based values. The distances are measured from the top-left of the element. background-position: Xpx Ypx; or background-position: X% Y%; As said, you can combine the values, for example, like so: background-position: center 50px;
17 Basic CSS properties: background The background-color needs to be specified using color values, like hexadecimal codes: body { background-color: #5275bb; } All four background-properties can also be summarised using shorthand CSS. Using just one property with multiple values, like so: body { background: url( filename.jpg ) center top repeat-x #5275bb; }
18 Assignment 2: USING BACKGROUNDS Using the given files on apply a background to some of the HTMLelements using CSS. Make sure you use the following properties at least once: background-color background-image background-position background-repeat HINT: Try to use shorthand CSS using the background property HINT: Try to make use of classes and ID s
19 basic CSS properties: Border Elements can be given a border by using the border property. The border property consists of three parts: border-style Describes the style of the border (solid, dotted, dashed, etc) border-width Describes the width of the border (either in pixels or thin, medium, thick) border-color Describes the colour of the border (RGB or HEX) NOTE: The border-style property is mandatory and always needs to be set.
20 basic CSS properties: Border Elements can be given a border by using the border property. border-style solid dotted dashed double NOTE: The border property can also be used as shorthand CSS border: 1px solid black;
21 Assignment 3: BORDER Using the files given on apply borders to some of the HTML-elements using CSS Make sure you use the following properties at least once: border-color border-style border-width HINT: Try to use shorthand CSS using the border property HINT: Try to make use of classes and ID s
22 Basic CSS properties: fonts There are a lot of properties that are associated with editing the appearance of text. The ones we re going to discuss are: font-family font-size color line-height text-decoration font-weight and font-style
23 Basic CSS properties: fonts The font-family tells the browser what font to use. p { font-family: arial, verdana, sans-serif; } As you can see, we ve used three values. This is a hierarchy of fonts, where every font lower in the hierarchy is a fallback. The last fallback should be either serif or sans-serif. Sans-Serif Font Serif Font NOTE: Not every font is installed on every computer. Use safe fonts!
24 Basic CSS properties: fonts The color of the text is defined by the color property. The size of the text is defined by the font-size property. The value of a font is defined in pixels, and is often inherited from a parent-element. The space between the lines of the text is defined by the line-height property. The value can be either absolute or relative. p { line-height: 18px; } or p { line-height: 1.5; } A line-height of 1.5 is relative to the font-size. This means a font-size of 12 pixels will generate a line-height of 1.5 * 12 = 18px.
25 Basic CSS properties: fonts The last property that can be used to style fonts is the text-decoration property. This property has a few preset values: underline for a line below the text line-through for a line through the text overline for a line above the text none for normal text. This is default The font-weight property is used to change the font s thickness. p { font-weight: bold; } The font-style property is to give the text a certain style, such as italics. p { font-style: italics; }
26 Assignment 4: USING fonts Using the given files on change the fonts of the HTML-elements using CSS. Make sure you use the following properties at least once: font-family font-size color text-decoration line-height font-weight & font-style HINT: Try to make use of classes and ID s
27 basic CSS properties: dimensions The CSS dimension property is used to control the height and width of an element Set the width and height of a paragraph.content { height:100px; width:100px; } The dimensions can be set either with: pixels percentages auto
28 Assignment 5: dimensions Using the files given on add dimensions to the HTML-elements in CSS. The classes and some colour have already been applied to the divs. Make sure to play with both the width and height, and with different units such as percentages and pixels.
29 Basic CSS properties: spacing In CSS there s basically two ways to space an element: margins and paddings. To understand the difference, we must take a look at the box model: top margin border padding actual element right bottom
30 Basic CSS properties: spacing To conclude: a margin is spacing outside the element-border, while padding contributes to space inside the element-border. top margin border padding actual element right bottom
31 Basic CSS properties: spacing The values of margins and paddings work exactly the same, they can be either be defined in pixels or percentages. There s 4 different places where one can apply a margin or padding: margin-top padding-top margin-right padding-right margin-bottom padding-bottom margin-left padding-left These can be typed using shorthand CSS as well, following the ways of a clock starting at the top: margin: top right bottom left; There s one special value: auto. This automatically fills in and equally divides the amount of margin, often used to center an element by using margin left/right with auto as value.
32 Basic CSS properties: spacing The margins and paddings can be written using shorthand CSS as well: margin: 10px 5px 0px 15px; Outputs a margin-top of 10px, margin-right of 5px, margin-bottom of 0px and margin-left of 15px. Or even shorter: margin: 10px 5px 0px; Outputs a margin-top of 10px, margin-right of 5px, margin-bottom of 0px and margin-left of 5px. And even shorter: margin: 10px 5px; Outputs a margin-top of 10px, margin-right of 5px, margin-bottom of 10px and margin-left of 5px. And the shortest form: margin: 10px; Outputs a margin-top of 10px, margin-right of 10px, margin-bottom of 10px and margin-left of 10px.
33 Assignment 6: POSITIONING WITH spacing Play with margins and paddings using the given files on make sure you understand the box model correctly! Also, place the wrapper-div in the center using margins. HINT: Center the wrapper using automatic values HINT: Try using CSS shorthand
34 basic CSS properties: display The display property specifies if / how an element is displayed. Basically there are two types of elements: Block A block element is an element that takes up the full width available. The element also has a link break before and after it. <h1> <p> <div> Inline An inline element only takes up as much space as necessary. The element does not force line breaks. <span> <a>
35 basic CSS properties: display Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way, but still follow web standards. Display list items as inline elements li { display: inline; } Display span elements as block elements span { display: block; }
36 basic CSS properties: display The display property can also be used to not show an element at all. Using the value hidden the element will be hidden and not take up any space. The page will be displayed as if the element is not there. Hide an element p { display: none; } NOTE: Setting the display property of an element only changes how the element is displayed, NOT what kind of element it is. So, an inline element with display:block is not allowed to have other block elements inside of it.
37 basic CSS properties: FLOAT Using the float property an element can be pushed to the left or right, allowing other elements to wrap around it. Float is very often used for images, but it is also useful when working with layouts. Elements are floated horizontally, this means that an alement can only be floated left or right, not up and down. A floated element will move as far to the left or right as it can. Most of the time this means all the way to the left or right of the containing element. The elements after the floating element will flow around it while the elements before the floating element will not be affected. If an image is floated to the right, a following text flows around it to the left.
38 basic CSS properties: FLOAT If you place several floating elements after each other, they will float next to each other if there is room. We can create a image gallary using the float proparty:.thumbnail { float: left; width: 110px; height: 90px; margin: 5px; }
39 basic CSS properties: FLOAT Floated elements lose their heigth. Therefore elements that follow the floated element will flow around that. This can be unintended, for example with text. In order to avoid this we use the clear property. Turning off Float.text_line { clear: both; }
40 Assignment 7: FLOAT AND DISPLAY Using the files given on position the image inside the paragraph tag right of the text. Also, make sure the red and blue divs are positioned at the same height, one at the right and one at the left of the page. Besides that, make sure the anchor starts on a new line, using CSS only and no additional HTML.
41 THE FINAL ASSIGNMENT
42 THANKS! See you tomorrow morning in auditorium 3 at 9.00!
43 It s TIme for a break!
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
{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:
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 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
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?
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,
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
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 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
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...
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
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
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
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,
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
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
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
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
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
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
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
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
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,
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
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
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
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
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
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.
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Using Adobe Dreamweaver CS4 (10.0)
Getting Started Before you begin create a folder on your desktop called DreamweaverTraining This is where you will save your pages. Inside of the DreamweaverTraining folder, create another folder called
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
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 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
LaGuardia Community College 31-10 Thomson Ave, Long Island City, New York 11101 Created by ISMD s Dept. Training Team. Overview
Overview Dreamweaver gives you many options when it comes to setting the properties for your webpages. Within the "Page Properties" dialog box, you can set the appearance of your page, name your page and
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
Intro to Web Design. ACM Webmonkeys @ UIUC
Intro to Web Design ACM Webmonkeys @ UIUC How do websites work? Note that a similar procedure is used to load images, etc. What is HTML? An HTML file is just a plain text file. You can write all your HTML
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
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
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
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
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
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
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
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
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
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.
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
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
KOMPOZER Web Design Software
KOMPOZER Web Design Software An IGCSE Student Handbook written by Phil Watkins www.kompozer.net CONTENTS This student guide is designed to allow for you to become a competent user* of the Kompozer web
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
Create Webpages using HTML and CSS
KS2 Create Webpages using HTML and CSS 1 Contents Learning Objectives... 3 What is HTML and CSS?... 4 The heading can improve Search Engine results... 4 E-safety Webpage... 5 Creating a Webpage... 6 Creating
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
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...
Designing portal site structure and page layout using IBM Rational Application Developer V7 Part of a series on portal and portlet development
Designing portal site structure and page layout using IBM Rational Application Developer V7 Part of a series on portal and portlet development By Kenji Uchida Software Engineer IBM Corporation Level: Intermediate
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
HTML TIPS FOR DESIGNING
This is the first column. Look at me, I m the second column.
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,
HTML, CSS, XML, and XSL
APPENDIX C HTML, CSS, XML, and XSL T his appendix is a very brief introduction to two markup languages and their style counterparts. The appendix is intended to give a high-level introduction to these
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
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
Joomla! template JSN Mico Customization Manual
Joomla! template JSN Mico Customization Manual (for JSN Mico 1.0.x) www.facebook.com/joomlashine www.twitter.com/joomlashine www.youtube.com/joomlashine This documentation is release under Creative Commons
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
Click on the links below to find the appropriate place in the document
Index Click on the links below to find the appropriate place in the document Masthead Masthead is the large line of colour at the top of the Service Manager Screen. The Masthead also includes; The Customer
Colgate University Website Content Style Guide
University Website Content Style Guide Website Color Palette Maroon #862633 Dark Orange #e7810b Blue #365777 Gray #58595b Light Orange* #e39615 NOTE: No other colors are to be used within colgate.edu.
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
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
Creating Web Pages with Microsoft FrontPage
Creating Web Pages with Microsoft FrontPage 1. Page Properties 1.1 Basic page information Choose File Properties. Type the name of the Title of the page, for example Template. And then click OK. Short
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
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
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
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
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
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
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
Email Creator Coding Guidelines Toolbox
Email Creator Coding Guidelines Toolbox The following information is needed when coding your own template from html to be imported into the Email Creator. You will need basic html and css knowledge for
Joomla! template JSN Boot Customization Manual
Joomla! template JSN Boot Customization Manual (for JSN Boot 1.0.x) www.facebook.com/joomlashine www.twitter.com/joomlashine www.youtube.com/joomlashine This documentation is release under Creative Commons
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
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
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
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
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
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 for Print Designers WEB DESIGN FOR PRINT DESIGNERS: WEEK 8
Web Design for Print Designers With CSS, you can use background images to replace linked text to make creative-looking links. This is the idea behind using sprites as we discussed last week. There are
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