M5 Design Studio

Bootstrap’s Responsive Layout

M5 Design Studio — Thu, 18 Apr 2013 02:00:15 +0000

What is responsive web design?

Responsive web design responds to the user’s behavior and environment based on screen size, platform and orientation. It consists of a mix of fluid grids and layouts, responsive images and CSS media queries.

1. Turning On Responsive Features

1. Download bootstrap-responsive.css

2. Include the code below within the of the document:

The first line of code is the viewport metatag. In mobile devices it makes the browser use the real size of the device. This way a device with a width of 320px will not display a website like a device with a width of 1280px.

The second line of code is a link to bootstrap-responsive.css.

2. Understanding Bootstrap’s Grid

The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.

On the graphic below you can see that a fluid grid use percents instead of pixels for column widths. In a fluid grid, the addition of all the columns widths and the gutter should be 100%.

Adding a Container, Rows and Columns

To create a layout like this:

You must add the following tags and classes:


    
         
            
             Welcome Text
   
            
                   Column One
                   Column One
                   Column One

3. Bootstrap’s Media Queries

Media queries allow for custom CSS based on a number of conditions (ratios, widths, display type, etc) but usually focuses around min-width and max-width.

Without media queries, fluid layouts would struggle to adapt to the array of screen sizes on the hundreds of existing devices.

Bootstrap’s Media Queries:

Modify the width of column in our grid
Stack elements instead of float wherever necessary
Resize headings and text to be more appropriate for devices

Supported devices

CSS3 Media Queries:

 /* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
 @media (max-width: 480px) { ... }

Example:

To change the background color of a website to red only on devices with a max-width of 767px use the code:

Note how 2 sets of curly braces are necessary (maroon and pink). When working with media queries extra caution is necessary to properly close the curly braces of the queries and of the styles.

IE 8 and below do not support CSS3 media queries:

For IE 8 and below that do not support media queries and/or HTML5 use the code below in between the tags:

a. CSS3-MediaQueries-js

A JavaScript library that supports the full range of media queries introduced in CSS3.

b. Respond.js

A fast & lightweight (only 3kb minified) polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more).

4. Flexible images

In responsive web design you can make the image auto resize to the max width of the boundary by using max-width:100% and height:auto.

img {
	max-width: 100%;
	height: auto;
    }

Bootstrap will automatically resize an image if it is wrapped within a

tag with a class “span1″ through “span12″.

Image without a span wrap, just floated left in a viewport of 800px. It doesn’t resize:



Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Image wrapped in a “span3″ and text wrapped in a “span9″ in a viewport of 800px. It resizes:





Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Using custom classes to resize images in Bootsrap:

If you need the text to wrap the image but the image to be responsive you can use custom classes.

Image without a span wrap, floated left and with a custom class in a viewport of 800px. It resizes:



Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Then set the width of the image in percents

.myclass {
    width:20%
}

5. Responsive Classes

Bootstrap comes with 6 ready-to-use classes to show and hide elements in desktop, tablets and phones:

Class	Phones 767px and below	Tablets 979px to 768px	Desktops Default
`.visible-phone`	Visible	Hidden	Hidden
`.visible-tablet`	Hidden	Visible	Hidden
`.visible-desktop`	Hidden	Hidden	Visible
`.hidden-phone`	Hidden	Visible	Visible
`.hidden-tablet`	Visible	Hidden	Visible
`.hidden-desktop`	Visible	Visible	Hidden

6. Relative Margins and Padding

If you need to add margins or padding to any element in responsive web design do not use a fixed pixel value, use percents instead.



Cras justo odio, dapibus ac facilisis in, egestas eget quam.

.myclass {
    width:30%;
    margin: 0 2% 2% 2%;   
}

Customizing Bootstrap

M5 Design Studio — Tue, 02 Apr 2013 17:32:39 +0000

Orlando Web Design & Development

Twitter’s Bootsrap is a powerful front-end framework for faster and easier web development.

You can customize Bootsrap’s CSS the following ways:

1. Customize before downloading:

Go to the Official Bootstrap Website and add your own custom CSS before downloading the Bootstrap files.

2. Add your own CSS:

Create your own CSS document and place it below the Bootsrap CSS file in the of the HTML document.

The last declared styles are the heaviest and they override any styles declared before.

a. Example one: Modify Existing Styles

To create a button in Bootstrap you will use the code:

      This is a button

Bootstrap buttons have a round corners. These are the styles that give the buttons the round corners:

.btn {
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
      border-radius: 4px;
}

In your CSS file “mystyles.css”, you can override the round corners by adding the code:

.btn {
     -webkit-border-radius: 0px;
     -moz-border-radius: 0px;
      border-radius: 0px;
}

b. Example Two: Add New Styles

You can create new styles to customize the way your website looks. For example, if you want to create a custom contact button, follow these steps:

1. Create a new class in the CSS file “mystyles.css”:

.contactB{
      -webkit-border-radius: 25px;
      -moz-border-radius: 25px;
      border-radius: 25px;
      background-image:none;
      background-color:hotpink;
}

2. Add the new class to the html

 This is a contact button

The great thing about having your custom styles in a separated CSS document is that it will make upgrading Bootstrap a breeze since your new styles will not get overridden when you replace the old Bootsrap files with the new.

3. Bootstrap Third Party Generators

Styling Generators:

Buttons Generators:

Color Generators:

Theme Generators:

4. Using LESS

Bootstrap is build with LESS. LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.

Orlando Web Design: CSS Page Layout – Understanding CSS Positioning

M5 Design Studio — Sat, 23 Feb 2013 23:50:29 +0000

Orlando Web Design & Development

CSS Page Layout: Understanding CSS Positioning

There are 3 ways of creating CSS layouts:

Using floats & margins
Using absolute positioning
Using relative positioning

So, what technique should you use? Without a doubt the easiest & cleanest way to create a layout is using floats & margins.

Using floats and margins requires less code than using relative and absolute positioning and this technique also takes advantage of the cascading properties of CSS.

One layout 3 techniques:

Let’s take a simple HTML page like this:

And change the layout like the image below using:

Floats & margins
Absolute positioning
Relative positioning

1. CSS Page layout using floats & margins:

2. CSS Page layout using absolute positioning:

2. CSS Page layout using relative positioning:

Orlando Web Design: Defining a site in Dreamweaver

M5 Design Studio — Tue, 19 Feb 2013 20:24:23 +0000

Orlando Web Design & Development

Dreamweaver is used to create and edit web pages on your local computer. Once the web pages are done, using FTP (file transfer protocol) the final files are uploaded to a remote web server (web hosting) were they become available for users to view online.

In this tutorial you’ll learn how to:

Set up your project files (local computer)
Define a local root folder (local computer version of your site)
Setup and connect to a remote server (web hosting server)
Upload files to the remote server using FTP

1. What is a Dreamweaver “site”?

A Dreamweaver “site” is the local or remote storage location for all the documents that belong to a website (HTML pages, CSS styles, Scripts, images, audio, video, etc.). A Dreamweaver site provides a way to organize and manage all of your web documents, upload your site to a web server, track and maintain your links, and manage and share files.

A basic Dreamweaver site consists of two parts:

Local root folder: Dreamweaver refers to this folder as your “local site.” This folder is located on your local computer and it stores all the files that your website uses.
Remote folder: Dreamweaver refers to this folder as your “remote site“. This folder is located on your web hosting company’s server and it stores all the files that users access on the Internet.

2. Understanding local and remote folder structure

Set up a “website” folder in your local computer:

Name conventions:

lowercase
No spaces

Image files:

Do not upload PSD files to the remote directory
Image files should only be JPG, PNG or GIF

3. Setting up the “Local Root Folder: or “Local Site”

To set up a local version of your site, all you need to do is specify the local folder where you store all of your site files.

a. In Dreamweaver, choose Site > New Site.

b. In the Site Name text box, enter a name for your site. This name is for reference only; it does not appear in the browser.

c. In the Local Site Folder text box, click on the folder icon, browse your computer, and select the folder that stores your website and all its files.

d. Click “Save” to close the Site Setup dialog box.

4. Connect to a remote server via FTP/SFTP

Once you’ve specified a local site in Dreamweaver, you can specify a remote server for your site as well. The remote server (often referred to as the web hosting server or web server) is where you publish your site files so that people can view them online.

Dreamweaver refers to the specified remote folder as your remote site.

a. In Dreamweaver, choose Site > Manage Sites

b. Select the Dreamweaver site you would like to connect via FTP/SFTP and click “Edit”

c. In the Site Setup dialog box, select the “Servers” category

d. Click the Add New Server button

e. Enter the FTP/SFTP information

Use Secure FTP (SFTP) if your firewall configuration requires use of secure FTP. SFTP uses encryption and public keys to secure a connection to your testing server.
Enter the FTP/SFTP address
Enter username
Enter password
Root Directory enter public_html
Check “Save”
Click on “Test”

If Dreamweaver successfully connects to your server click “OK”.
If Dreamweaver cannot connect to the server double check that the information you entered is accurate.

5. Click “save”

6. Click “done”

5. Transferring files

A. Put files on a remote server:

You can put files from the local site to the remote site

1. Open the Files panel toolbar:
From the main menu go to Window> Files

2. Click on the “Expand” button

3. Click on the “Connect” button

Do one of the following to put the file on the remote server:
a. Select the file and click the “Put” button (blue arrow going up) in the Files panel toolbar

b. Select the file and drag and drop it into the remote folder

Now you should see the file on the remote folder

B. Get files from a remote server

Use the Get command to copy files from the remote site to your local site.

Do one of the following to get the file:

Select the file and click the “Get” button (green arrow going down) in the Files panel toolbar
Select the file and drag and drop it from the remote server to the local server

Orlando Web Design: Absolute Vs. Relative CSS Positioning

M5 Design Studio — Tue, 19 Feb 2013 19:21:05 +0000

Orlando Web Design & Development

1. Position property:

The “position” property specifies the type of positioning method used for an element

PROPERTY	POSSIBLE VALUES	EXAMPLES
position	absolute, relative, fixed, static, inherit	div { position: absolute}div { position: relative}

2. The coordinate plane

The position property uses a similar system to the coordinate plane in order to position an element in a web page.

The coordinate plane has two axes (the x-axis and y-axis) and one origin.

Points on the plane are located using two numbers – the x and y coordinates. These are the horizontal and vertical distances of the point from a specific location called the origin.

X axis

The horizontal scale is called the x-axis. As you go to the right on the scale from zero, the values are positive. As you go to the left from zero, the values are negative.

Y axis

The vertical scale is called the y-axis. As you go up from zero the numbers increase with a positive value. As you go down from zero the numbers increase with a negative value.

2. The browser’s coordinate plane

One of the differences between the coordinate plane and the browser is that in the browser the the origin (0,0) is on the top left corner an that the horizontal X values and vertical Y values are both positive.

In order to see the negative values we need to add negative rulers on the left & top sides of the origin.

Depending on the position property value used, the origin of the coordinate plane can change, let’s see some examples.

3. Top, Bottom, Right & Left Properties

You can set the position of an HTML element with the top, bottom, right, & left properties. The values can be set with a lenght measurement like pixels or with a percentage value.

4. Absolute CSS Positioning without a parent

When you place an element with absolute positioning, you can give it exact positioning values to place it on specific coordinates on the browser.

If the absolute positioned HTML element does not have a parent element holding it, it will use the whole browser window to position it’s origin.

In order to position an element, you must use the CSS “position” property in conjunction with the properties “top”, “bottom”, “right”, or “left ” .

Example:

The above yellow div tag that holds an image with the styles:

div{ 
    width: 100px;
    height: 150px;
    background: yellow;
    }

If we want to absolute position it on the left top corner of the browser window, we will use the styles:

div{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100px;
    height: 150px;
    background: yellow;
    }

If you want to move the position of the div tag to the left so that only half of the image shows in the browser, you’ll need to use left negative values.

div{
    position: absolute;
    left: -50px;
    top: 0px;
    width: 100px;
    height: 150px;
    background: yellow;
    }

If you want to move the div tag up so that only half of the image shows in the browser, you’ll need to use top negative values.

div{
    position: absolute;
    left: 0px;
    top: -75px;
    width: 100px;
    height: 150px;
    background: yellow;
    }

You can use the properties “top”, “bottom”, “right”, or “left ” to absolute position an HTML element with negative or positive values in the browser window

Example 2:

If you want to position the div tag on the bottom right corner, you can use the styles:

div{
    position: absolute;
    bottom:0px;
    right:0px;
    width: 100px;
    height: 150px;
    background: yellow;
    }

5. Relative Positioning

When you place an element with relative positioning, the element is positioned relative to its normal or default position.

In order to relative position an element, you must use the CSS “position” property in conjunction with the properties “top”, “bottom”, “right”, or “left ” .

Example 1:

The HTML page below has 2 paragraphs and one image.

When you move an HTML element with relative positioning, the origin is located on the top left corner of the element itself. Regardless of where the element is positioned by default, the origin will always be located on the top left corner of the element itself.

If you want to move the image to the right 200px using relative position you will use the styles:

img{
    position: relative;
    top: 0px;
    left: 200px;
    }

Example 2:

If you want to move the image up 50px using relative position you will use negative top values:

img{
    position: relative;
    top: -50px;
    left: 0px;
    }

When you place an element with relative positioning, the browser preserves the original space that that element occupied. Below you can see the gap preserved between the paragraphs.

The image has the styles:

img{
    position: relative;
    top: -50px;
    left: 200px;
    }

6. Absolute CSS Positioning within a parent element

The real power of absolute positioning is when it’s combined with a relative positioned parent.

Example:

In the HTML page below we have 2 div tags:

Gray div tag: the parent element that holds a yellow div tag with an image
Yellow div tag: the child element that holds an image

The gray div tag is positioned relative and has these styles:

div.gray{
    width:500px;
    height:500px;
    margin:100px auto;
    background-color:gray;
    position:relative
}

The yellow div tag is positioned absolute and has these styles:

div.yellow{
    width:100px;
    height:150px;
    background-color:yellow;
    position:absolute;
    left: 150px;
    top: 50px;
}

Since the yellow div tag is now within the gray relative positioned parent, the origin to position the yellow div tag has changed.

The coordinates for the yellow div tag now start on the parent’s left and top corner, and not on the HTML page itself.

When you place an element with absolute positioning, the browser does not preserve the original space that that element occupied.

Orlando Web Design: HTML5 for Beginners Lesson 4

M5 Design Studio — Tue, 12 Feb 2013 21:21:42 +0000

Orlando Web Design & Development

1. The box model

In CSS, the term “box model” is used when talking about design and layout:

Margin – Clears an area around the border. The margin does not have a background color, it is completely transparent
Border – A border that goes around the padding and content. The border is affected by the background color of the box
Padding - Clears an area around the content. The padding is affected by the background color of the box
Content – The content of the box, where text and images appear

Width and Height:

To know the full size of the element, you must also add the padding, border and margin.

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

2. Inspecting with Firebug

Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

3. Creating a basic layout with CSS

PROPERTY	POSSIBLE VALUES	EXAMPLES
margin	Lengths, percentages, and the predefined value auto.	margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px;
margin	Shorthand: declare all the margin properties at once. margin: Topvalue Leftvalue BottomValue RightValue	margin: 10px 20px 5px 15px; margin: 0px auto;
padding	Lengths, percentages, and the predefined value auto.	padding-top:100px; padding -bottom:100px; padding -right:50px; padding -left:50px;
padding	Shorthand: declare all the margin properties at once. padding: Topvalue Leftvalue BottomValue RightValue	padding: 10px 20px 5px 15px; padding: 10px 20px;

a. Tag

body{ 
margin: 0px;
padding: 0px;
background-color:#cccccc
}

b.
tags

The

tag defines a division or a section in an HTML document. The

tag is used to group block-elements to format them with CSS.

Centering a
tag

tag can be used as a wrapper to contain a webpage. To center a

tag use left and right margin “auto”:

#wrapper{
width:960px;
margin: 0 auto;
height: auto; 
overflow:hidden
 }

c. Display Property

The display property defines how a certain HTML element should be displayed.
Please note: Elements using the property display “none” will not take up space on the page.

PROPERTY	POSSIBLE VALUES	EXAMPLES
display	none, block, inline, inline-block	div { display:none; } div { display:inline; }

PROPERTY

POSSIBLE VALUES

EXAMPLES

display

none, block, inline, inline-block

div { display:none; }

div { display:inline; }

d. Float Property

The float property specifies whether or not a box (an element) should float.
Note: Absolutely positioned elements ignores the float property.

PROPERTY	POSSIBLE VALUES	EXAMPLES
float	left, right, none	div { float:left; }

e. Clear Property

The clear property specifies which sides of an element where other floating elements are not allowed.

PROPERTY	POSSIBLE VALUES	EXAMPLES
clear	left, right, none, both, inherit	div { clear:left; }

f. Overflow

The overflow property specifies what happens if content overflows an element’s box.

PROPERTY	POSSIBLE VALUES	EXAMPLES
overflow	visible, hidden, scroll, auto, inherit	div {overflow:scroll;}

g. Visibility Property

The visibility property specifies whether or not an element is visible.
Please note: Invisible elements take up space on the page.

PROPERTY	POSSIBLE VALUES	EXAMPLES
visibility	visible, hidden, inherit	div { visibility:hidden; }

h. Styling a Horizontal Menu

To style a horizontal

tag add the following styles:

nav ul{
margin: 0px;
padding: 0px;
list-style-type: none;
}

nav li{
display: inline;
margin: 0px;
color: white;/*Color of the text*/
font-weight: bold;
font-size:14px;
font-family: Verdana, Helvetica, sans-serif ;
}

nav li a:link{
float: left;
display: block;
text-decoration: none;
margin: 0px;
padding: 15px;/*padding inside each tab*/
border-right: 2px solid white; /* line divider between tabs*/
color: white;/*color of the link*/
background-color: black; /*background of the tabs */
height:20px;
}

nav li a:visited{
color: #eeeeee;
}

nav li a:hover{
background-color: gray; /*background of tabs for hover state*/
}

nav li a:active{
color: white;
}

Orlando Web Design: HTML5 for Beginners Lesson 3

M5 Design Studio — Tue, 05 Feb 2013 21:17:04 +0000

Orlando Web Design & Development

1. What is CSS?

CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
Styles are normally saved in external in a CSS document with the extension .css

2. CSS Benefits

Separate content from presentation
Reduce file size
Cleaner Code
External Style Sheets save time
A webpage can have different styles for different devices like screen, mobile, and print
Accessibility

3. CSS Syntax

4. Kinds of CSS Styles

a. Inline Styles

Style specified inside an HTML element tag
Affect only that HTML tag.

Example:

This is a paragraph.

b. Embedded Styles

Use to style only one page
Style specified in the head section of the HTML page

Example:

c. External Styles

An external style sheet is ideal when the style is applied to many pages.

Step1: Create a link to the CSS file

Step 2: Create the styles in the CSS document

 p {color:red;}

5. Cascading Order

Style precedence from higher to lower priority:

User defined
Inline style (inside an HTML element)
Embedded style sheet (in the head section)
External style sheet
Browser default

An inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the tag, or in an external style sheet, or in a browser.

If the link to the external style sheet is placed after the internal style sheet in HTML , the external style sheet will override the internal style sheet!

Within the external sheet or the embedded styles the last style declared is the strongest and it can override a previous declaration.

6. Document Tree

,
& :

Are siblings to each other because they share the element as their common parent

Are descendants of the element, which is their ancestor.

7. Style Inheritance

Some values can be inherited by the children of an element.

If one of these values is left unspecified the HTML element will inherit the style setting from its parent.

Example:

If you specify that your tag has a font size of 14px. The paragraphs will inherit the size unless you specify a size for paragraphs.

8. ID’s Vs. Classes:

In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called “id” and “class”.

a. The ID Selector:

The id selector is used to specify a style for a single, unique element.

The id selector uses the id attribute of the HTML element, and is defined with a “#”.

Example:

Step1: Assign the ID

text

Step 2: Create the styles in the CSS document

#products {color:red;}

b. The Class Selector:

The class selector is used to specify a style for a group of elements.

The class selector uses the HTML class attribute, and is defined with a “.”

Example:

Step1: Assign the class

text

Step 2: Create the styles in the CSS document

.products {text-align:center;}

9. CSS Reset Vs. Normalize CSS

CSS Reset & Normalize CSS are needed to ensure a more or less “identical cross-browser” presentation of your web-sites. By default different browsers use different values for margin, padding or line-height.

CSS Reset & CSS Normalize help most browsers to render sites more similar.

Popular CSS Resets:

Eric Meyer’s Reset CSS
http://meyerweb.com/eric/tools/css/reset/

Yahoo’s CSS Reset
http://developer.yahoo.com/yui/3/cssreset/

Normalize CSS is a new HTML5-ready alternative to CSS resets.

Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.

Normalize.css:

preserves retains many useful default browser styles.

fixes common desktop and mobile browser bugs that are out of scope for resets. This includes display settings for HTML5 elements & correcting font-size for preformatted text, SVG overflow in IE9.

doesn’t clutter your debugging tools

is modular, broken down into relatively independent sections, making it easy for you to see exactly which elements need specific styles.

10. CSS3

CSS3 is split up into “modules”. The old specification has been split into smaller pieces, and new ones are also added.

Some of the most important CSS3 modules are:

Selectors

Box Model

Backgrounds and Borders

Text Effects

2D/3D Transformations

Animations

Multiple Column Layout

User Interface

Useful resources for CSS 3

Gradient Generator

css3 Generator

11. CSS Properties

a. Comments

Comments are a great way to:

Keep styles organized

Troubleshoot when styles conflict

Example:

/*This is a comment*/

b. Measurement Values

Unit Description

%
percentage

in
inch

cm
centimeter

mm
millimeter

em
The size can be calculated from pixels to em using this formula: pixels/16=em

pt
point (1 pt is the same as 1/72 inch)

pc
pica (1 pc is the same as 12 points)

px
pixels (a dot on the computer screen)

c. Color Values:

HTML identifies color either by color name or color value (RGB & Hexadecimal).

147 color names are defined for HTML and CSS

Value Description

color_name A color name (e.g. red)

rgb(x,x,x) An RGB value (e.g. rgb(255,0,0))

rgb(x%, x%, x%) An RGB percentage value (e.g. rgb(100%,0%,0%))

#rrggbb A HEX number (e.g. #ff0000)

d. Text Properties

http://www.w3schools.com/css/css_reference_atoz.asp

Property Possible Values Examples

font-family Arial, Verdana, sans-serif, “Times New Roman”, Times, serif, etc. p { font-family: Arial; }

font-size Value in px, em or % p { font-size:14px;}

font-style Normal, italic, or oblique p { font-style: italic; }

font-weight Normal, bold, bolder, or lighter. p{ font-weight: bold; }

font in order : font-style font-variant font-weight font-size/line-height font-family P{font: italic small-caps bold 12px arial,sans-serif}

color Valid color names, RGB values, hexidecimal notation. p { color: green; }p { color: rgb(0,255,0); }

p{ color: #00FF00; }

line-height Numbers, percentages, lengths, and the predefined value of normal. p{ line-height:140%; }

letter-spacing Normal, length (px, em or %), or inherit p {letter-spacing: 2px}

text-align Left, right, center, or justify p { text-align: center; }

text-decoration None, underline, overline, line-through, or blink p { text-decoration: none; }

e. Lists Properties

Property Possible Values Examples

list-style-type disc, circle, square, decimal, decimal-leading-zero
lower-roman, upper-roman, lower-alpha, upper-alpha ul { list-style-type:square; }

list-style-position inside or outside ol { list-style-position:inside; }

list-style-image URL values. ul { list-style-image:url(image.jpg); }

list-style In order :list-style-type
list-style-position
list-style-image ul { list-style:disc inside url(image.gif); }

f. Border Properties:

Property Possible Values Examples

border-style(sets styles for all borders) none, dotted, dashed, double, groove div { border-style: dotted}

border-top-style div { border-top-style: dotted}

border-right-style div { border-rigt-style: dashed}

border-bottom-style div { border-bottom-style: double}

border-left-style div { border-left-style: groove}

border-width
(sets widths for all borders) The width is set in pixels, or by using one of the three pre-defined values: thin, medium, or thick. div { border-width: 5px}

border-top-width div {border-top-width: thin }

border-right-width div {border-right-width: medium }

border-bottom-width div {border-bottom-width: 2px }

border-left-width div {border-left-width: thick }

border-color
(sets color for all borders) The color can be set by name, RGB or Hexadecimal value div { border-color: red}

border-top-color div { border-top-color: #000}

border-right-color div { border-right-color: blue}

border-bottom-color div { border-bottom-color: #333}

border-left-color div { border-left-color: red}

border Shorthand: declare all the borders properties at once.border: width style color div { border: 1px solid red}

border-top div { border-top: 1px solid red}

border-right div { border-right: 4px dashed blue}

border-bottom div { border-bottom: 2px dotted red}

border-left div { border-left: 5px dashed pink}

g. Background Properties

Property Possible Values Examples

background-attachment fixed or scroll body { background-attachment:fixed; }

background-color Valid color names, RGB & Hex values, body { background-color:green; }

background-image URL values. body { background-image: url(img.jpg); }

background-position top left / top center / top right
center left / center center / center right
bottom left / bottom center / bottom right body { background-position:10px 50px; }body { background-position:top center; }

background-repeat Repeat , repeat-x , repeat-y or no-repeat body { background-repeat:repeat-x; }body { background-repeat:no-repeat; }

background In order:background-color
background-image
background-repeat
background-attachment
background-position body { background:green url(image.jpg) no-repeat fixed center center; }

h. Styling Links

Links must be style with the “LOVE HATE RULE”

a:link is used to indicate that the link has been unvisited.

a:visited is used to indicate that the link has been visited.

a:hover indicates that a cursor is pointing at the link

a:active pseudo-class indicates that the links are active.

Example:

a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF} a:active {color: #0000FF}

Common styles:

text-decoration: none or underlined

color: red

background-color: red

i. Styling

Some properties supported are:

background-color

height

width

border

More Examples on how to style the
tag

Unit	Description
%	percentage
in	inch
cm	centimeter
mm	millimeter
em	The size can be calculated from pixels to em using this formula: pixels/16=em
pt	point (1 pt is the same as 1/72 inch)
pc	pica (1 pc is the same as 12 points)
px	pixels (a dot on the computer screen)

Value	Description
color_name	A color name (e.g. red)
rgb(x,x,x)	An RGB value (e.g. rgb(255,0,0))
rgb(x%, x%, x%)	An RGB percentage value (e.g. rgb(100%,0%,0%))
#rrggbb	A HEX number (e.g. #ff0000)

Property	Possible Values	Examples
font-family	Arial, Verdana, sans-serif, “Times New Roman”, Times, serif, etc.	p { font-family: Arial; }
font-size	Value in px, em or %	p { font-size:14px;}
font-style	Normal, italic, or oblique	p { font-style: italic; }
font-weight	Normal, bold, bolder, or lighter.	p{ font-weight: bold; }
font	in order : font-style font-variant font-weight font-size/line-height font-family	P{font: italic small-caps bold 12px arial,sans-serif}
color	Valid color names, RGB values, hexidecimal notation.	p { color: green; }p { color: rgb(0,255,0); } p{ color: #00FF00; }
line-height	Numbers, percentages, lengths, and the predefined value of normal.	p{ line-height:140%; }
letter-spacing	Normal, length (px, em or %), or inherit	p {letter-spacing: 2px}
text-align	Left, right, center, or justify	p { text-align: center; }
text-decoration	None, underline, overline, line-through, or blink	p { text-decoration: none; }

Property	Possible Values	Examples
list-style-type	disc, circle, square, decimal, decimal-leading-zero lower-roman, upper-roman, lower-alpha, upper-alpha	ul { list-style-type:square; }
list-style-position	inside or outside	ol { list-style-position:inside; }
list-style-image	URL values.	ul { list-style-image:url(image.jpg); }
list-style	In order :list-style-type list-style-position list-style-image	ul { list-style:disc inside url(image.gif); }

Property	Possible Values	Examples
border-style(sets styles for all borders)	none, dotted, dashed, double, groove	div { border-style: dotted}
border-top-style	div { border-top-style: dotted}
border-right-style	div { border-rigt-style: dashed}
border-bottom-style	div { border-bottom-style: double}
border-left-style	div { border-left-style: groove}
border-width (sets widths for all borders)	The width is set in pixels, or by using one of the three pre-defined values: thin, medium, or thick.	div { border-width: 5px}
border-top-width	div {border-top-width: thin }
border-right-width	div {border-right-width: medium }
border-bottom-width	div {border-bottom-width: 2px }
border-left-width	div {border-left-width: thick }
border-color (sets color for all borders)	The color can be set by name, RGB or Hexadecimal value	div { border-color: red}
border-top-color	div { border-top-color: #000}
border-right-color	div { border-right-color: blue}
border-bottom-color	div { border-bottom-color: #333}
border-left-color	div { border-left-color: red}
border	Shorthand: declare all the borders properties at once.border: width style color	div { border: 1px solid red}
border-top	div { border-top: 1px solid red}
border-right	div { border-right: 4px dashed blue}
border-bottom	div { border-bottom: 2px dotted red}
border-left	div { border-left: 5px dashed pink}

Property	Possible Values	Examples
background-attachment	fixed or scroll	body { background-attachment:fixed; }
background-color	Valid color names, RGB & Hex values,	body { background-color:green; }
background-image	URL values.	body { background-image: url(img.jpg); }
background-position	top left / top center / top right center left / center center / center right bottom left / bottom center / bottom right	body { background-position:10px 50px; }body { background-position:top center; }
background-repeat	Repeat , repeat-x , repeat-y or no-repeat	body { background-repeat:repeat-x; }body { background-repeat:no-repeat; }
background	In order:background-color background-image background-repeat background-attachment background-position	body { background:green url(image.jpg) no-repeat fixed center center; }

Orlando Web Design: HTML5 for Beginners Lesson 2

M5 Design Studio — Tue, 29 Jan 2013 21:35:13 +0000

Orlando Web Design & Development

1. Website Organization & Structure:

A server is like a house because both store lots of things or information. In a house rooms help us keep everything organized, while in a server information is organized in directories.

For example, think about your room. In your room, you have lots of different furniture and each piece has a purpose. On your desk you might have your computer, books and office supplies. You can use a chest to store your clothes and on your nightstand you might keep your iPod & cellphone.

On a server directory you can store a website. Instead of furniture, the server uses sub-directories to store and organize all the media files (images, audio files, video, PDF’s, etc.) that belong to that website.

When you create websites you must always keep all the files organized by relevant sub-directories. It’s also important that you keep everything that belongs to a website together otherwise your links, images and scripts will not work.

A simple website structure looks like this:

2. HTML5 Structure

A simple HTML5 website uses the following semantic/structural elements:


Defines a header for a document or section


          Defines navigation links

         Defines content aside from the page content
Aside should only be used if its content is related to the content around the aside

    Defines a section in a document

       Defines an article

        Defines a footer for a document or section

3. Creating Links

The HTML tag defines a hyperlink. A hyperlink (or link) can be a word, group of words, or an image.

a. Tips To Create Effective Links:

Do not use “click here”

Use descriptive words, so users can know where they are going after they click.

If you are linking to a file, give the file format and size.

Do not use blank spaces. They render in the browser as %20.

b. Relative Links Vs. Absolute Links

Relative links are links within the website directory. Relative links do not need to include the http protocol or the website’s domain name.

Example:

My Page

Absolute links are links that go to other websites. Absolute links require the full URL (protocol, domain name, directory name and file name.

Example:

Link to Google

Always have absolute links open in a new page by adding the target attribute “_blank”. The target attribute specifies where to open the linked document.

Example:

Link to Google

c. Linking To A PDF File

To link to a file within the website’s directory add the file path to the hyperlink reference and use “_blank” for the target attribute. Don’t forget to specify the file type and file size.

Download Lesson 2 (PDF 94 KB)

d. Linking Within A Page

You can create links within a page using ID’s.

1. Give an ID to the section you want to link to

My Bio

2. Create the link to go to the ID. Please note that a pound sign must go before the ID name.

My Bio

e. Tooltips

A tooltip is a message that displays when when the mouse hovers above a link. To create a tooltip add the title attribute to the tag.

Example:

My Bio

f. Linking To An Email

To Link to an email use “mailto” on the hyperlink reference.

Example:

martha@gmail.com

4. Inserting An Image

The tag defines an image in an HTML page. The tag has two required attributes: src and alt. The alt specifies an alternate text for an image.

The HTML tag
specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. If the image has a caption, you can use the tag
to add a description.

This is the description of my image

5. Linking An Image

6. Using HTML Special Characters

Entities are used to implement reserved characters or to express characters that cannot easily be entered with the keyboard.

& & ©    © ™ ™ "    " à    à Non Breaking Space

HTML can render mathematical symbols, Greek characters, various arrows, technical symbols and shapes.

« « ♠ ♠ ♦ ♦ » » ♣ ♣ → → • • ♥ ♥

Please Note: Entity names are case sensitive.

Complete list of HTML Special Characters

Complete list of HTML Symbols

Orlando Web Design: HTML5 for Beginners Lesson 1

M5 Design Studio — Wed, 23 Jan 2013 19:27:00 +0000

Orlando Web Design & Development

What is HTML?

HTML is the universal markup language for the Web. HTML stands for Hyper Text Markup Language.

HTML specifications are set by the World Wide Web Consortium (W3C). The W3C was created in October 1994 by Tim Berners-Lee, the Inventor of the Web.

The World Wide Web Consortium (W3C) is an international consortium that provides web standards and guidelines for developers and designers to follow. Its mission is to ensure long-term growth for the Web & to make the Web accessible to all users (despite differences in culture, education, ability, resources, and physical limitations).

The WC3 also provides free tutorials in all web development technologies at www.w3schools.com

HTML5

On January 22nd, 2008, W3C published a working draft for HTML5.

Some of the new features in HTML5 are functions for embedding audio, video, graphics, client-side data storage, and interactive documents.

HTML5 also contains new elements like
,
,
, and
.

Would you like to see the power of HTML5? Checkout Apple’s Html 5 Showcase.

Browser Support for HTML5

HTML5 is not yet an official standard, and no browsers have full HTML5 support. But all major browsers (Safari, Chrome, Firefox, Opera) continue to add new HTML5 features to their latest versions.

Tools to check HTML5 Support:

Can I Use HTML5?

Find me by IP Web Developer tools

HTML5 & Internet Explorer

The html5shiv script tells Internet Explorer 8 and below to treat HTML5 tags as real tags. It enables styling of HTML5 elements in versions of Internet Explorer prior to version 9, which do not allow unknown elements to be styled without JavaScript.

To use the html5shiv insert the code below between the elements (after or before your CSS):

Rules for writing HTML:

Always close your tags

Indent mark up

Use white space and comments to make code easier to read

Follow naming conventions: Lowercase and no spaces

Validate you code

HTML5 Syntax

1. Two-sided tags Vs One-sided tags

HTML Tags are the building blocks of html.

a. TWO-SIDED TAGS:

Two sided tags have content in-between the opening and closing tags.

content

I love Web Design

a. ONE-SIDED TAGS:

One-sided tags are empty HTML Elements.

Line break:

Horizontal Rule:

2. Doctype:

A doctype declaration refers to the rules for the markup language, so that the browsers render the content correctly. The tag does not have an end tag. The declaration is NOT case sensitive.

3. Basic structure of an HTML5 Document

Body Content

3. The Section

The element contains information for the browser on how to render a document. It also provides important information for search engines.

a. HTML Metadata

The tag provides information about the HTML document for the browser and search engines

Metadata will not be displayed on the page

Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.

The tag always goes inside the head element.

b. Title tag

The title element:

defines a title in the browser toolbar

provides a title for the page when it is added to favorites

displays a title for the page in search-engine results

Title of the document

c. HTML Character Sets

To display an HTML page correctly, the browser must know what character-set to use.

ISO Character Sets: It is the International Standards Organization (ISO) that defines the standard character-sets for different alphabets/languages.

ISO-8859-1 Latin alphabet part 1
North America, Western Europe, Latin America, the Caribbean, Canada, Africa

The Unicode: UTF-8 is the preferred encoding for e-mail and web pages

4. Comment Tag:

The comment tag is used to insert a comment in the source code.

A comment will be ignored by the browser.

5. White Space:

HTML ignores blank spaces, tabs and line breaks

Use white space to organize your code and make it easier to read

To preserve spaces and line breaks you can use the Preformated Text Tag

Content Goes Here

6. The Tag

The tag defines the document’s body. It contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.

a. Block Level Elements:

Reserve space

Start a new line in the document

This is a heading

b. Inline Elements:

Don’t reserve Space

Can be placed within a level block element

Strong text

7. HTML Headings

HTML headings are defined with the
to
tags. Headings are used for the page’s titles,
defines the most important heading &
defines the least important heading.

This is a heading

This is a heading

This is a heading

8. HTML Ordered list

The
tag defines an ordered list. An ordered list can be numerical or alphabetical.

item 1

Item 2

Item 3

9. HTML unordered list

The
tag defines an unordered (bulleted) list.

item 1

Item 2

Item 3

10. Other HTML Tags

Emphasized text

Emphasized text

Bold text

Strong text

Subscript text

This text contains _subscript text.

Superscript text

This text contains ^superscript text.

Underlined text

Do not underline text if it is not a hyperlink!

Italic text

Italic text

11. HTML Validation

You can validate an HTML document at: http://validator.w3.org

You can validate by URL, direct input or file upload.

12. HTML5 Resources:

www.w3schools.com/html

www.w3schools.com/html5

www.html5rocks.com

WordPress Email Notification & Subscription Plugin

M5 Design Studio — Wed, 26 Dec 2012 08:00:11 +0000

Orlando WordPress Websites: Post Notification by Email

One of the most important tasks for a business is to maintain contact with its customers. Providing an email subscription option for your website is a great way to keep your customers up-to-date with informative content. WordPress plugins make it easy to automatically notify all your users by email (with a daily or weekly newsletter) about your latest posts.

Below you can find some of the most popular email alerts & notification solutions for WordPress.

WordPress Email Post Notifications Plugins:

Subscribe2 Plugin

Subscribe2 provides a comprehensive subscription management and email notification system for WordPress blogs that sends email notifications to a list of subscribers when you publish new content to your blog.

Email Notifications can be sent on a per-post basis or periodically in a Digest email. Additionally, certain categories can be excluded from inclusion in the notification and posts can be excluded on an individual basis by setting a custom field.

What is really great about this plugin is that if you manage user subscriptions with another plugin (for example, a membership plugin) you can still send email notifications to all registered users without requiring a separated subscription for email notifications.

Admins can also manually send email notices to subscribers, which is very handy when a notification is needed without having to create a post.

JetPack plugin

JetPack makes available all the WordPress.com features on self-hosted WordPress installs. With JetPack visitors can choose to subscribe to new posts, or to subscribe to new comments on a post they have already commented on, so they can stay involved in the conversation.

Jetpack will email them letting them know when there’s a new post, so they can return and give you more traffic.

RSS-To-Email Notifications:

RSS stands for “really simple syndication,” and it’s an easy way for people to follow updates to your blog without having to check in routinely to see if you’ve posted anything. It’s a great tool, but many people prefer to receive updates in their inboxes instead. MailChimp’s RSS-to-Email campaigns & Feedburner RSS Email alerts provide an easy solution for automatically sending your new content via email.

Feedburner Email Alerts

WordPress Feedburner plugins

MailChimp’s Rss to Email

WordPress Official MailChimp Plugin

MailChimp for bloggers

WordPress MailChimp Plugins

WordPress Theme Development Orlando: Contact me for a free quote!

WordPress Websites & WordPress Themes in Orlando FL

WordPress Development Orlando

M5 Design Studio

Bootstrap’s Responsive Layout

What is responsive web design?

1. Turning On Responsive Features

2. Understanding Bootstrap’s Grid

Adding a Container, Rows and Columns

3. Bootstrap’s Media Queries

Supported devices

CSS3 Media Queries:

Example:

IE 8 and below do not support CSS3 media queries:

4. Flexible images

Using custom classes to resize images in Bootsrap:

5. Responsive Classes

6. Relative Margins and Padding

Customizing Bootstrap

Orlando Web Design & Development

1. Customize before downloading:

2. Add your own CSS:

a. Example one: Modify Existing Styles

b. Example Two: Add New Styles

3. Bootstrap Third Party Generators

4. Using LESS

Orlando Web Design: CSS Page Layout – Understanding CSS Positioning

Orlando Web Design & Development

CSS Page Layout: Understanding CSS Positioning

One layout 3 techniques:

1. CSS Page layout using floats & margins:

2. CSS Page layout using absolute positioning:

2. CSS Page layout using relative positioning:

Orlando Web Design: Defining a site in Dreamweaver

Orlando Web Design & Development

1. What is a Dreamweaver “site”?

2. Understanding local and remote folder structure

3. Setting up the “Local Root Folder: or “Local Site”

4. Connect to a remote server via FTP/SFTP

5. Transferring files

A. Put files on a remote server:

B. Get files from a remote server

Orlando Web Design: Absolute Vs. Relative CSS Positioning

Orlando Web Design & Development

1. Position property:

2. The coordinate plane

X axis

Y axis

2. The browser’s coordinate plane

3. Top, Bottom, Right & Left Properties

4. Absolute CSS Positioning without a parent

5. Relative Positioning

6. Absolute CSS Positioning within a parent element

Orlando Web Design: HTML5 for Beginners Lesson 4

Orlando Web Design & Development

1. The box model

2. Inspecting with Firebug

3. Creating a basic layout with CSS

a. Tag

b. tags

Centering a tag

c. Display Property

d. Float Property

e. Clear Property

f. Overflow

g. Visibility Property

h. Styling a Horizontal Menu

Orlando Web Design: HTML5 for Beginners Lesson 3

Orlando Web Design & Development

1. What is CSS?

2. CSS Benefits

3. CSS Syntax

4. Kinds of CSS Styles

a. Inline Styles

b. Embedded Styles

c. External Styles

5. Cascading Order

6. Document Tree

7. Style Inheritance

8. ID’s Vs. Classes:

a. The ID Selector:

b. The Class Selector:

9. CSS Reset Vs. Normalize CSS

b.
tags

Centering a
tag