CSS Tutorial. By Lily Olson
|
|
|
- Shanon Stafford
- 7 years ago
- Views:
Transcription
1 CSS Tutorial By Lily Olson
2 2 Table of Contents 1. The Basics a. What is CSS? b. Why Use CSS? c. CSS in Libraries i. Why should librarians learn CSS? ii. How is CSS helpful for libraries? 2. Getting Started a. How Do I Use CSS? i. Internal ii. External iii. Inline b. Syntax c. Tag, Id, Class, and Universal Selector 3. Styling your Webpages a. Fonts b. Text c. Backgrounds 4. Going Further a. Possibilities of CSS b. Selected Resources 5. Bibliography
3 3 Before You Begin Before beginning this tutorial, it is important to have knowledge of both HTML and XHTML. Don t know HTML and XHTML yet? W3schools.com provides great tutorials that will get you started. Follow the links below to find tutorials on HTML and XHTML. HTML XHTML The Basics What is CSS? CSS stands for Cascading Style Sheets. It is used within HTML webpages to help visually design and enhance the look and feel of the website. Why Use CSS? Though HTML and XHTML are great for adding content and setting up the structure of your website, they do not provide a great way to visually design your website. HTML is simply a way of carring content, where as CSS helps you to display that content in an aesthetically pleasing manor. CSS provides ways to design your website visually. CSS allows you to add borders, font colors, and add backgrounds in addition to many more visual features. Better yet, CSS allows you to create one file that dictates the design of your entire site. This way, changes can be made to your CSS file, without having to update each page individually. CSS can dramatically change the look and feel of a website. An example below shows two websites with the same content, but with different style sheets.
4 4 Why Should Librarians Learn CSS? It is very important for librarians to have knowledge of CSS. As the web presence of libraries becomes more important, so does the need to have the skills necessary for web design. CSS can help librarians better develop the look and feel of their library websites, blogs, and other online presences. How is CSS Helpful to Libraries? As we continue through the digital age, the online presence of libraries becomes more and more important. Many times, the first place a patron starts, even before entering the physical library, is online. Having a robust web presence for any library is very important for communication between the library and its patrons as well as for informational purposes. Creating a more visually appealing website will not only please patrons, but a better display will also help them better understand information on the library website Getting Started How Do I Use CSS? CSS is placed either within an HTML document, linked to an HTML document, or written within an HTML document itself. The following describes, internal, external and inline CSS. Internal Internal CSS is written within the HTML document. It appears in the HTML document between the head tags. To define your CSS information, place it between style tags. Example: <head> <style type= text/css > H1 {font-size: small; color: #blue;} H2 {font-size: large; color: #00ff99;} </style> </head> External External style sheets, a.css file, is linked from within the HTML document. All of the actual style information is then present in the.css. Example: <head>
5 5 <link rel= stylesheet type= text/css href= style.css > The information contained in the style sheet might read as follows: H1 {font-size: small; color: #blue;} H2 {font-size: large; color: #00ff99;} As shown above, it contains the same information as the internal style sheet, yet does not contain style tags. Because an external CSS file does not include any HTML, the style tags do not need to be present. Inline Inline CSS is written within the HTML of a document. Though it is recommended this method be used sparingly by W3 Schools, it can be performed on occasion. Example: <p style= font-size:small;color:blue >Hello.</p> External, Internal, or Inline: What to Choose? Now that you know more about what types of CSS can be implemented within your webpages, how do you decide which one is right for you? External CSS can be extremely useful when creating a large website. It can be linked to each page of your website and updated from the CSS file. All of the changes made to your CSS will be reflected in all of your pages. This is a fast and efficient way to make changes to your entire website all at once. External CSS also loads faster for your viewers, as your web browser will download the CSS files so it can be quickly accessed from your users cache. Though internal and inline CSS can be used in your websites for easy, visual boost to your HTML, they are not the most efficient way. When updating the visual style of your website, you will need to update the CSS within each HTML page. This makes for added work in the long run. CSS Syntax As with any programing language, CSS uses a very specific syntax. The syntax of CSS has two main parts: The Selector: the HTML element you want to style The Declaration: the style you are giving to the selector. Each declaration contains a property and value.
6 6 Property: the property you are changing Value: what change you are attributing to that property Comments are also often used in CSS to help those viewing the CSS explain code for others who might be viewing the CSS. CSS can also be helpful for the programmer as well as anyone else interested in the code. Comments do not show up on the webpage and are only seen within the code. They also do not effect the code in any way. Example: /*This element defines the HTML element paragraph*/ p {color:black;} /*This is another comment*/ Tag, Id, Class, and Universal Selectors Tag Selectors: Tag selectors are sometimes also called type or element selectors. They allow you to style HTML elements. For example, you can style the <p> tag to create a specific style for every paragraph that appears on your page. Universal Selectors: Want all of a certain element of your webpage to have the same look? You can easily do this with the universal selector. A universal selector is denoted by an asterisk (*). For example, if you wanted all HTML tags on your page to have a font color of purple, you could simply denote: * {font-color: purple;} Id Selectors: Id selectors are used for defining unique elements. Id selectors are defined in your CSS file by using a hash mark, #. For example, you could define an Id selector #navigation. #navigation { font-color: #EC1717} This would make anything identified in your HTML document #navigation, display in the color red. Id selectors are useful because they are unique and will never match more than one element in a document. Class Selectors: Class selectors are used to give elements different looks, without interfering with other tags on the page. For example, if you had many pictures, yet you wanted only
7 7 one to have a border, you could use a class selector. Class selectors are defined using a period, for example.border. This way, only images in your webpage with the class of.border will get a red border, not all images. Id Selector or Class Selector? A tag selector easily lets your control the overall look of any element of your HTML document. But what about when you want more control? Which do you choose Id or Class Selector? Below are some ways to help you decide: - Id Selector o For one unique element o Use when element only appears once on the page (header) - Class Selector o For a group of elements o Use when element appears more than once on the page (photos) Styling Your Webpages Fonts CSS provides many different style elements that can be implemented in your website. Here we will go over a few different properties that can be added and used. The properties in this section are only a select few of the properties that can be used in CSS documents. CSS is a great way for styling the text of your webpage. Styling your font is one great way to style your text. Without styling your font, the font will default to Times. Though Times may be preferred for some websites, usually you will want to determine your own fonts on your website. Within your CSS, you many choose a font-family. A font family provides a list of fonts, where the users browser will read the fonts and choose the first one that is installed on the users computer. font-family: Arial, Helvetica, sans-serif; In the example provided above, the browser will look through the list, and if the user does not have Arial installed on their computer, it will then look for Helvetica, and so forth. If a
8 8 user has neither of those fonts installed on their computer, the browser will choose a sansserif font. An example of a serif font and a sans-serif font is shown below. In addition to choosing the font family of your text there are also many other elements from which to choose. The elements you can assign to font are as follows: - font-family - defines what font-family to use - font-size - defines the size of the text - font-style - generally used to specify italic text - font-variant - allows you to style font in small caps - font-weight allows you to define weight of font (e.g. bold) Below is an example of a CSS document styling fonts: <style type="text/css"> h1{font-family:"times New Roman",Times,serif; font-style:italic; font-size:14px; font-variant:small-caps; } </style> Text In addition to styling the fonts in your webpage, you can also style the text in various ways. CSS has many text properties that can be added. Below are a few of the properties: - color specifies the color of text - direction specifies the writing direction of the text - text-decoration specifies a decoration (e.g. Underline, overline, etc.) - text-align specifies how to align the text (e.g. Center, right, left) There are 3 ways in CSS to define colors: - name the color o example: {color:red); - use RGB o example: {color: rgb(236,23,23); - use hexadecimal color notation o example: {color:#ec1717;
9 9 Each of the examples above, denote the color red. Using either a RGB or HEX value will display your color most accurately on a user s computer. Depending on how you define the value red, different computers will interpret their version of red differently. With programs such as Adobe Photoshop and GIMP, finding an RGB or HEX value is easy. The screen shot below shows where to find values for RGB and HEX values in Adobe Photoshop. Below is an example of a CSS document implementing different text properties: <style type="text/css"> h2{color: rgb(255,220,80); text-decoration:blink; test-align:center; word-spacing:30px; } </style> Backgrounds One of the best ways to enhance your website is to utilize the background property. CSS does a great job using background images in conjunction with its other properties to create stunning imagery for websites. Some of the properties that can be used to style backgrounds are as follows:
10 10 - background-color - background-image - background-repeat - background-position - background-attachment Now let s go over the background properties to see what each one does Background-color Background-color allows you to determine the color of your website s background. Just as in styling text, you are able to pick from a named color, RGB and HEX values. Again, RGB and HEX values will result in the most true and consistent colors across your viewer s computers. An example of background property being used is as follows: body {background color: rgb(255,220,80);} Background-image Background images used in CSS give great flexibility to websites, also. With CSS you are able to determine the body for different parts of your document. For example, you can style the background of the body as shown in the example below: body {background-image: url(images/img.gif); } In this example, the body is using the background img.gif. The url part of the statement above, tells you where to go to retrieve the image. Be mindful that the document path listed for the URL is in relationship to the style sheet, not the HTML page. Background-repeat The background-repeat property defines whether or not you would like a background image to repeat. The background-repeat property accepts four values: repeat, no-repeat, repeat-x, and repeat-y. Repeat and no-repeat are quite simple and tell your image to either repeat or not repeat. Repeat-x will repeat an image horizontally, and repeat-y will repeat an image vertically. Background-position Background-position determines the position of your background image. Working with the values, left, center (horizontal), right, top, center (vertical), and bottom you can position your image any where on the page. body { background-image: url(images/img.gif); background-position: center right; } The example above shows that the image will be placed horizontally in the center and vertically on the right. Using the attributes above, you can place an image anywhere on a page. The diagram below illustrates the different positions a document could be placed.
11 11 Background-attachment Background attachment allows images to remain stationary on a page. For example, when you are on a website, often images will scroll with the page. In order to make your background image stay put, you can use the background-attachment property. The background-attachment property has two values; scroll and fixed and they do just that. Scroll will allow your image to move with the page and fixed will make your image stay in place while the page is moving. Overall, backgrounds give you great flexibility when working with images in CSS. Below are examples of the kind of things that can be done just using backgrounds.
12 12 Going Further Possibilities of CSS This tutorial has covered syntax and basic styling techniques although there are endless possibilities with CSS. This tutorial only scratches the surface of what can be done with CSS. Nevertheless, the properties described in this document can help create more robust and visually engaging web pages. Other more advanced things that can be done with CSS are creating image galleries and using CSS positioning. CSS can also be used for visibility purposes. For example, images can be hidden or shown with the click of a button without any need to reload a page. Further Reading If you want to learn even more about CSS the following are great resources for continued learning. CSS Tutorial. (n.d.). Retrieved October 23, 2011, from Lemay, L., & Colburn, R. (2010). Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day: Includes New HTML5 Coverage (6th ed.). Sams. McFarland, D. S. (2009). CSS: The Missing Manual (New edition, Second Edition.). O Reilly Media. Meyer, E. (2010). Smashing CSS: Professional Techniques for Modern Layout (1st ed.). Wiley. Olsson, T., & O Brien, P. (2008). The CSS: The Ultimate Reference (1st ed.). SitePoint. Tittel, E., & Noble, J. (2010). HTML, XHTML & CSS For Dummies (For Dummies (7th ed.). For Dummies. Wyke-Smith, C. (2007). Stylin with CSS: A Designer s Guide (2nd ed.). New Riders Press.
{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:
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 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
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
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
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?
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,
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
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
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 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 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
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
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
Appendix H: Cascading Style Sheets (CSS)
Appendix H: Cascading Style Sheets (CSS) Cascading Style Sheets offer Web designers two key advantages in managing complex Web sites: Separation of content and design. CSS gives developers the best of
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
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
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
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
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
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
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
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
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
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
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
Website Builder Overview
Website Builder Overview The Website Builder tool gives users the ability to create and manage their own website, which can be used to communicate with students and parents outside of the classroom. Users
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
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
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.
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
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
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
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
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
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
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
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
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
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
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
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
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
How to Create an HTML Page
This is a step-by-step guide for creating a sample webpage. Once you have the page set up, you can add and customize your content using the various tags. To work on your webpage, you will need to access
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.
Google Sites: Site Creation and Home Page Design
Google Sites: Site Creation and Home Page Design This is the second tutorial in the Google Sites series. You should already have your site set up. You should know its URL and your Google Sites Login and
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
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
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
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
Website Development Komodo Editor and HTML Intro
Website Development Komodo Editor and HTML Intro Introduction In this Assignment we will cover: o Use of the editor that will be used for the Website Development and Javascript Programming sections of
Lesson Review Answers
Lesson Review Answers-1 Lesson Review Answers Lesson 1 Review 1. User-friendly Web page interfaces, such as a pleasing layout and easy navigation, are considered what type of issues? Front-end issues.
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
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
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
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
Virtual Exhibit 5.0 requires that you have PastPerfect version 5.0 or higher with the MultiMedia and Virtual Exhibit Upgrades.
28 VIRTUAL EXHIBIT Virtual Exhibit (VE) is the instant Web exhibit creation tool for PastPerfect Museum Software. Virtual Exhibit converts selected collection records and images from PastPerfect to HTML
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 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
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.
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
Advanced Web Design. Zac Van Note. www.design-link.org
Advanced Web Design Zac Van Note www.design-link.org COURSE ID: CP 341F90033T COURSE TITLE: Advanced Web Design COURSE DESCRIPTION: 2/21/04 Sat 9:00:00 AM - 4:00:00 PM 1 day Recommended Text: HTML for
Using and creating Crosstabs in Crystal Reports Juri Urbainczyk 27.08.2007
Using and creating Crosstabs in Crystal Reports Juri Urbainczyk 27.08.2007 Using an creating Crosstabs in Crystal Reports... 1 What s a crosstab?... 1 Usage... 2 Working with crosstabs... 2 Creation...
Лваполо. Customization
Лваполо Customization Table of contents Introduction to Customization... 1 Main Benefits of Techinline Customization:... 1 Reference Guide... 1 Client Box Setup... 4 Logo... 5 Caption... 5 Caption Style...
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
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
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
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
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
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
Dreamweaver. Introduction to Editing Web Pages
Dreamweaver Introduction to Editing Web Pages WORKSHOP DESCRIPTION... 1 Overview 1 Prerequisites 1 Objectives 1 INTRODUCTION TO DREAMWEAVER... 1 Document Window 3 Toolbar 3 Insert Panel 4 Properties Panel
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
Version 4.0. Unit 3: Web Design. Computer Science Equity Alliance, 2011. Exploring Computer Science Unit 3: Web Design 102
Unit 3: Web Design Computer Science Equity Alliance, 2011 Exploring Computer Science Unit 3: Web Design 102 Introduction The Web Design unit builds on the concepts presented in the previous units by having
Web Developer Jr - Newbie Course
Web Developer Jr - Newbie Course Session Course Outline Remarks 1 Introduction to web concepts & view samples of good websites. Understand the characteristics of good website Understand the importance
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...
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
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
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
Web Design Standards
Web Design Standards Contents Roles and Responsibilities... 3 Design Guidelines... 4 Page Layout... 4 Font and Styles... 4 File Types... 5 Page Names... 5 Images... 5 Academic Departments Required Content...
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,
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
Citywide User Experience Design Guidelines: NYC.gov Style Guide. Final 1.2 - Public 11/8/2013
CITYWIDE GUIDELINES Citywide User Experience Design Guidelines: NYC.gov Style Guide 1.0 Overview Final 1.2 - Public 11/8/2013 City of New York Department of Information Technology and Telecommunications
A send-a-friend application with ASP Smart Mailer
A send-a-friend application with ASP Smart Mailer Every site likes more visitors. One of the ways that big sites do this is using a simple form that allows people to send their friends a quick email about
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
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
UOFL SHAREPOINT ADMINISTRATORS GUIDE
UOFL SHAREPOINT ADMINISTRATORS GUIDE WOW What Power! Learn how to administer a SharePoint site. [Type text] SharePoint Administrator Training Table of Contents Basics... 3 Definitions... 3 The Ribbon...
Please select one of the topics below.
Thanks for choosing WYSIWYG Web Builder! In this section we will give a short introduction to Web Builder so you can start building your web site in (almost) no time. Please select one of the topics below.
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
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
Adobe Illustrator CS6. Illustrating Innovative Web Design
Overview In this seminar, you will learn how to create a basic graphic in Illustrator, export that image for web use, and apply it as the background for a section of a web page. You will use both Adobe
Unitel Direct Content Management System Version 2 - June 2012. Content Management System
Content Management System 1 Table of Contents Introduction To Your Content Management System...3 Logging In...4 Page Management...5 Adding Pages...5 Managing Pages...6 Removing Pages...7 Adding Text, Images
Mastering the JangoMail EditLive HTML Editor
JangoMail Tutorial Mastering the JangoMail EditLive HTML Editor With JangoMail, you have the option to use our built-in WYSIWYG HTML Editors to compose and send your message. Note: Please disable any pop
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
USD WEB SERVICES ADOBE DREAMWEAVER CSS DEVELOPMENT
WEB SERVICES ADOBE DREAMWEAVER CSS DEVELOPMENT INFORMATION TECHNOLOGY SERVICES UNIVERSITY OF SAN DIEGO DEVELOPED BY JOY BRUNETTI BRUNETTI@SANDIEGO.EDU X8772 APRIL 2006 TABLE OF CONTENTS DREAMWEAVER 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,
IE Class Web Design Curriculum
Course Outline Web Technologies 130.279 IE Class Web Design Curriculum Unit 1: Foundations s The Foundation lessons will provide students with a general understanding of computers, how the internet works,
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
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
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