This is the official video that Tak and I at Alpha Organic created during the Christmas holidays to accompany the launch of  the band duo, Betanik Movement’s new album “Happening at Betanik” which can now be found on ITunes and Amazon.

This video was shot hand held on a 7D, at 60fps, 1080p, and was designed to resemble a “chilling” night in the city.  And in this case that city is Toronto.

The bokeh and blur shots give a nice painting feel to the video.

This particular version was rendered down to a file size of 500MB and 720p to meet the requirements of vimeo.

Feel free to check out the bands myspace: myspace.com/betanikmovement

Enjoy.

Betanik Movement – Just Chillin (official) from Alpha Organic on Vimeo.

Note: Please check out other CSS tutorials here if you are new to CSS programming.

Structuring Your Pages
The Box Model
Changing the Background
Setting the Height or Width for an Element
Setting the Margins and Padding Around an Element
Offsetting Elements In the Natural Flow
Affixing an Element to the Browser Window
Making Elements Float
Controlling Where Elements Float
Positioning ELements in 3D
Setting the Border
Changing the Cursor
Determining Where Overflow Should Go
Aligning Elements Vertically

There are pretty much two ways to layout your webpage, CSS and Tables. In this tutorial we will be learning how to layout a webpage with styles (CSS). A great thing about CSS is that you can create styles that will allow your web page to expand and contract with the size of the browser that is displaying it. This makes your webpage more liquid. CSS will also allow you to apply the exact same style to other webpages in order for you webpages to be more consistent with each other. Nowadays, most browsers will support CSS so I would highly recommend using it.

If you are using CSS it is because you want to separate the formatting and styling rules from the content of your page. This makes you page look cleaner and frees it other directives that may make your page look more rigid and less flexible.

To structure your page:

Divide logical sections of your page into div elements. A div should look something like this..

<div id="banner">

Make sure you put your div elements in an order that would be most useful to a user who will not be using CSS in there browser. What I mean by this is make sure your page content is in a logical order i.e. title at the top and content under. Also be sure to comment your code!

It is important to note that CSS will treat every element in your page as if it were enclosed in an invisible box. The space surrounding that area (padding), the outside edge (border) and the invisible space around the border (margin). CSS will also allow you to determine the position of each element’s box as fixed or relative to your browser and if some parts are to overlap you can tell CSS which order they should with th z-index.

When referring to and applying a background in CSS you are actually describing the background of a particular element rather than the entire page.

To use background images type: background-image: then type url(image.gif) where image.gif is the location of the image. Alternatively you can type none for no background image.

To repeat a background image type background-repeat: direction where direction is either repeat (x and y), repeat-x (horizontally), repeat -y (vertically).

You can also control if the background image will scroll with the browser or stay fixed by typing background-attachment: then fixed or scroll.

To specify the positional of the background image type background-position: x y where x and y can be a percentage or an absolute distance.

You can also us left, center or right for x and top center or bottom for y.

To change the background color you can type background-color: color where color is either transparent, color (i.e. red), or a RGB or HEX color code.

The result should be something like this:

#paragraph {background-image: url(http://images4.wikia.nocookie.net/uncyclopedia/images/c/c9/Noodledoodle_bg3.jpg); background-repeat: repeat-x; background-position: center;}

You may also choose just to type background: and specify any of the previous mentioned background properties.

This one is pie. To set the height or width for an element type width: w where w is the width of an elements content area and type height: h where h is the height of the elements content area in percentage or absolute values.

#paragraph {width: 75%; height: 200px;}

Note: auto will be used if no width or height is set. Play around with this setting. In block level elements these values can be much different. This will take a bit of trial and error to learn completely.

A great thing about CSS is that you can set the margins around any element. The margin is the space between one element and the next in addition to any padding around the element.

To set the element’s margins type margin: x where x is the amount of space you want to surround your element. X can be expressed as a length, a percentage of the width or auto. This is applied to all four sides of the element. You can type i.e. margin-left: x to apply the margin to the one side. This equally applies to right, top and bottom.

The same rules apply to adding padding around an element. The difference is instead of the word margin you will use the word padding.

#sidebar {
margin-top: 10px;
padding top: 1px;
}

In addition to having a natural location on your page, a position function in CSS will allow you to move an element relative to this location without affecting any of the surrounding elements.

To offset elements within the natural flow type position: relative. If you like you can also type top, right, bottom, or left. next type :v where v is the desired distance that you want to offset. V values can be an absolute or percentage as well as relative.

.tophead {
position: relative; top: 2.2em;
}

I am sure you have experienced before when browsing other websites, elements that seem to stay fixed on the screen, even when scrolling up and down side to side. But be careful when doing this and make sure your fixed element has a suitable purpose. Some developers do this as a marketing technique but only serves to annoy the user.

To affix an element to the browser window type position: fixed; and if desired you can type top, right, bottom, or left after the semicolon followed by :v where v is the desired distance you want to offset the element.

#sidebar {position: fixed;}

With CSS you can make elements in other elements. To make this more clear, which ever element you choose to float the rest of the content will flow to the opposite end.

To wrap text around elements type float: position where position is right or left.

#nav {float: right;}

In order to prevent floating elements from floating next to an element you don’t want it to you can use the clear function.

To do this type clear: then type left to keep elements from floating to the left of the element or right for the same effect on the opposite side. Alternatively you can type both or none.

.par1 {clear: right;}

If you find your elements overlapping because of relative and absolute position you can always choose which element should appear on top.

To position elements in 3D type z-index: n where n is a number that indicates the elements level by number (highest number appearing on top).

#buttons {positions: relative; z-index: 2;}

You can create a border around an elements and apply a thickness, style and colour to it. Also, if you have specified any padding the border will enclose the content and the padding.

To define the border style type border-style: type where type is either dotted, dashed, solid, double, groove, ridge, inset, or outset.

To set the width of the border type border-width: n where n is the units of thickness.

To set the border colour type border-color: color where color is a colour name or rgb.

You can also type border and -top, -right, -left, -bottom followed -property where property is style, width, or color.

.par1 {border-style: solid;}

Play around with this one, lots of options available.

For the most part your browser takes care of the cursor shape. With CSS you can specify cursor shapes more specifically, i.e. making a hand appear on top of links.

To change the cursor type cursor: then type pointer for a hand, default for the arrow, crosshair for a + shape, move for a + shape with arrows, wait for a sand timer, help for a pointer with a question mark, text for the same pointer you would get in a word program, and progress which is a pointer with a sand timer.

Alternatively you can type auto to get what cursor typically appears and that situation.

a:hover {cursor: wait;}

Sometimes elements can get out of hand simply because the box containing them is not large enough or positioning was set absolute. For example you may only want to show one line of images instead of four, so you want to hide the other three. Well there is a solution for that.

To determine where the overflow should go type overflow: then type visible to expand the elements box so everything fits. Or type hidden to hide any contents that appear outside the box. Or type scroll to always add scroll bars to the element so that the visitor can access the overflow if they want. Auto will let you bring up scroll bars only when needed.

p.samples {height: 20px; overflow: scroll;}

This is just a list of aligning techniques using the vertical-align: function.

Basline aligns the elements baseline with the parent’s baseline.

Middle aligns the middle of the element with the middle of the parent.

Sub positions the element as a subscript of the parent.

Super positions the element as a superscript of the parent.

Text-top aligns the top of the element with the top of the parent.

Text-bottom aligns the bottom of the element with the bottom of the parent.

Top aligns the top of the elemenet with the top of the tallest element.

Bottom aligns the top of the element with the bottom of the lowest element.

---

That concludes this tutorial.  Thanks to “HTML, XHTML, & CSS” by Elizabeth Castro for the reference.

For previous tutorial “Format with Style” click here.  For next tutorial “Dynamic Effects with Styles” click here (coming soon).

This page is wiki editable click here to edit this page.

We are nearing the end of the basic HTML and CSS tutorials.  So,  instead of moving on to a different topic I have decided to give you the reader, a  choice.

And remember, we are always looking for authors to write their own tutorials!

Cheers,
Adrian.

CSS is a much more powerful tool than HTML when it comes to formatting. This tutorial will be looking mostly at formatting text but it doesn’t mean they only work with text. Later tutorials like “Layout with Styles” will continue with more CSS formatting options. To be honest, this tutorial is best for reference, you will be using a lot of these format styles so often they will become second nature.

Here is a list of the topics we will be covering in this tutorial:

Choosing a Font Family
Specifying Alternate Fonts
Creating Italics
Applying Bold Formatting
Setting the Font Size
Setting the Line Height
Setting All Font Values at Once
Setting the Color
Changing the Text’s Background
Controlling Spacing
Adding Indents
Setting White Space Properties
Aligning Text
Changing the Text Case
Using Small Caps
Decorating Text

Find all current special offers on Adobe products.

Choosing a Font Family

The first thing you may want to do when creating your Web Site is to choose the font that you will be using for your body and headlines.

To set the font family type font-family: name, where name is your first choice of font. Here is an example

h1, h2 {font-family: "Helvetica";}

p {font-family: "Arial";}

Specifying Alternate Fonts

There will be some users that cannot view your Web Site with the fonts you have specified so, you may want to provide an alternate font to display your content. You may want to choose a font that is installed with most operating systems like Arial Black or sans-serif.

To specify an alternate font, after typing the font-family: name as described above, type , name2 where name2 is your second font choice. Separate each choice with a comma nd a space like so:

h1, h2 {font-family: "Helvetica", Arial Black;}

p {font-family: "Arial" sans-serif;}

Creating Italics

There are various reasons you may want to include italics in your text. So to create italics first type font-style: followed by italic or oblique. To remove italics type font-style: normal.

h1, h2 {font-family: "Helvetica", Arial Black;}

p {font-family: "Arial" sans-serif;}

.emph {font-style: italic;}

The .emph in this code is referring to the class which would be included within the body of the text like so:

<p>This is the body of the text and <span class= "emph">this is the section I want to emphasize.</span>So cool right?</p>

Applying Bold Formatting

Bold formatting is probably the most common and effective way to make text stand out. To apply bold formatting first type font-weight: followed by bold. You can also type bolder or lighter to use a value relative to the current weight. Try also using multiples of 100 up to 900, 100 being light and 900 bold.

Remember you can also remove bold formatting by typing font-weight: normal.

h1, h2 {font-family: “Helvetica”, Arial Black; font-weight:bold;}

Setting the Font Size

There are generally two ways to set the font size with CSS. The first method would be to give a specific font size like so:

h2 {font-size: 16px;}

In this first method you can also choose to write, but not limited to 1em which would be the same as 16px or use the following keywords: xx-small, x-small, small, medium, large, x-large, and xxlarge.

The second way to set fond size is to set a size that depends on the parent element’s size like so:

h2 {font-size: 1.52em;}

You can also choose to use a percentage like 152%. Relative keywords like larger and smaller will also work in for this case.

Setting the Line Height

Setting the line height is almost the same as setting the line spacing in MS Word. This is a good technique to help make your text more legible on the end users monitor.

To set the line height type line-height: then type n where n is the number that will be multiplied by the element’s font size. An alternative to this is typing p% where p% is a percentage of the font size. OR type a, where a is an absolute value in pixels.

h2 {line-height: 1.5;}

Setting All Font Values at Once

Here is a useful tip to set the font style, weight, variant, size, line height, and family all at one.

First type font:

If desired type normal, oblique, or italic to set the style. (see creating italics)

If desired type normal, bold, bolder, lighter, or a multiple of 100 (up to 900) to set font weight. (see applying bold formatting)

If desired, type normal or small-caps to remove or set small caps. (see using small caps)

Next type the font size. (see setting the font size)

If desired type /line-height, where line-height is the amount of space between lines. (see setting the line height)

Type a space followed by the desired font family or families, in order of preference. (see choosing font family)

Just remember that you can do each of these properties separately and if you decide to put them together that you can omit the the style, font weight, and caps properties. However, the size and family properties must always be explicitly specified (size than family) and the line height, which is also optional, must come after the size and the slash.

Setting the Colour

This is how you would change the color of specific elements on your web page using CSS.

First type color: followed by the color name (see Style Sheet Building Blocks)

h2 {color: #000000;}

It’s pie.

Changing the Text’s Background

When using the background style format you are not changing the background of your Web Page, but you are changing the background of the specified element. In other words you can select what parts of your document you want to highlight with background color.

To change the text’s background color first type background: followed by transparent or color where color is the name of hex color (see Style Sheet Building Blocks).

h2 {background: #90210;}

You can also use a image as the background by specifying an image url rather than a color or transparent like so, url(image.gif). You may also choose to type repeat to tile the image like you would on your desktop wallpaper or type repeat-x (for horizontal tiling) or repeat-y (for vertical tiling). Alternately you can type no-repeat to not tile the image.

If desired, type fixed or scroll to determine whether the background should scroll with the canvas.

One more addition you can have to your style is adding x y to set the position of the background image, where x and y can be expressed as a percentage or an absolute. By default x and y would be the top-left position by you can use values of left, center, and right for x and top, center, or bottom for y.

My way of doing it:

h2
{

background: url(http://www.alphaorganicmedia.com/logo.jpg);

background-attachment: fixed;

background-position: center;

}

Controlling Spacing

You can add or reduce space between words, otherwise knows as tracking by typing word-spacing: length, where length is a number with units as in 0.3em or 3px.

p {word-spacing: 0.4em;}

You can add or reduce space between letters, otherwise known as kerning by typing letter-spacing: length, where length is a number with units as 0.3em or 3px.

p {letter-spacing: 0.5px;}

To go back to default use the value normal or 0.

Adding Indents

Adding indents will create a space that will precede the first line of a paragraph. To do this type text-indent: length, where length is a number with units as in 2.1em or 10px

p {text-indent: 1.5em;}

Setting White Space Properties

By default, multiple spaces and returns in the HTML script are either displayed as a single space or ignored completely. If yo want the browser to display those extra spaces use the white-space property.

To set up this property first type white-space: followed by pre to have all white space appear or nowrap to treat all spaces as non-breaking. To go back to default use normal.

p {white-space: pre;}

Aligning Text

You may like to align certain text elements to the left, right, center, or justify.

To align text first type text-align: then type left, right, center, or justify to align the text to your liking.

p {text-align: justify;}

Changing the Text Case

This format property is great for taking an element and capitalizing the first character of each word, transforming all the characters to upper case, or transforming all the characters to lower case.

To do this first type text-transform:

Next type capitalize to put the first character of each word in uppercase.

Or type uppercase to change all the characters to uppercase.

Or type lowercase to change all the characters to lowercase.

Type none to return to default.

p {text-transform: capitalize;}

Using Small Caps

Some fonts have a small caps variant that includes a smaller version of the same characters.

To apply this property type font-variant: followed by small-caps.

To remove this property type font-variant: followed by none.

p {font-variant: small-caps;}

Decorating Text

With style sheets you can apply underlines, overlining, lines through the text, and blinking text.

To decorate text first type text-decoration:

Next use the corresponding properties to apply to your selected element, underline, overline, line-through, or blink.

To remove text decorations type none.

p {text-decoration: blink;}

Is there something wrong with this tutorial? Let me know

Training Videos for Web Designers

That concludes this tutorial. For a list of other CSS tutorials click HERE.

For previous tutorial “Defining Selectors” click here. For next tutorial “Layout with Styles” (coming soon)

Defining selectors is the next step before you can go on to create the declarations in CSS with actual properties and values. This tutorial will be going over the most simple and relatively obvious examples in defining selectors.

Constructing Selectors
Selecting Elements by Name
Selecting Elements by ID or Class
Selecting Elements by Context
Selecting Part of an Element
Selecting Link Elements Based on Their State
Selecting Elements Based on Attributes
Specify Groups of Elements
Combining Selectors

Find all current special offers on Adobe products.
Selecting Elements by ID or Class‘>

Selecting Elements by ID or Class

If you have labeled elements with an id or class you can use that criteria in a selector to apply formatting to only those elements.

To select elements to format based on their id:

1. Type #

2. With no intervening space, immediately type id, where id uniquely identifies the element to which you would like to apply the styles.

Here is an example of what this would look like in code:

<div id="music">

<h2>Music Production</h2>

<p>Our team is built is a partnership of wanna-be rock stars who slowly realized that sex, drugs and rock and roll is not the reality for nerds like us. So we decided that TV and movies were the next cool thing. And why not commercial radio and web as well</p>

<h2>Audio/Video</h2>

<p>It is only natural to enhance a project and take it to the next level in creativity with some great audio and video editing combined with some cool visual fx and animation.Since we have the equipment, the skills, and work with film and television, it was a good idea to offer this service too.</p>

<h2>Interactive Media, Web, &amp; Design</h2>

<p>We surf the web, a lot. We see a lot of good design and a lot of bad design. We also make web sites and interactive media, and we do it the best.</p>

After adding div#music {color: red;}to the CSS the result should look something like this: Sample

To select elements to format based on their class:

1. Type . (a period)

2. With no intervening space, immediately type label, where label identifies the class to which you would like to apply the styles.

An example of this would be adding em.music {color: red;} to the css identifying all em (italic) elements in the music div (class).

Training Videos for Web Designers
Selecting Part of an Element‘>

Selecting Part of an Element

Sometimes it may come in handy to select only the first letter or first lone of an element and apply formatting to that.

To select first line of an element type the tag, where tag is the selector for the element whose first line you would like to format. Type the semicolon and type first-line like so:

p:first-child

To select the first letter of an element type the tag, where tag is the selector for the element whose first line you would like to format. Type the semicolon and type first-letter like so:

p:first-letter
Selecting Elements Based on Attributes‘>

Selecting Elements Based on Attributes

With CSS you can also apply formatting to those elements that have a given attribute or attribute value.

1. To select element, where element is the selector for the element whose attributes are in question. (i.e. div).

div

2. Type [attribute, where attribute is the name of the attribute that an element must have to be selected. (i.e. class)

div[class

3. At this point you can choose to type ="value", if you want to specify the value that the attribute must have for its element to be selected. (i.e. music)

An alternative would be to type ~="value", to specify a value that the attribute can contain for its element to be selected. Or type | (the pipe symbol) ="value" to specify that the attributes value in order for its element to be selected. But for the purpose of this tutorial we will stick to the more simple value.

div[class="music"

4. Close with ].

div[class="music"],{color: red;}

The code and the result should be.

<div id="music">

<h2>Music Production</h2>

<p>Our team is built is a partnership of wanna-be rock stars who slowly realized that sex, drugs and rock and roll is not the reality for nerds like us. So we decided that TV and movies were the next cool thing. And why not commercial radio and web as well</p>

<div id="av">

<h2>Audio/Video</h2>

<p>It is only natural to enhance a project and take it to the next level in creativity with some great audio and video editing combined with some cool visual fx and animation.Since we have the equipment, the skills, and work with film and television, it was a good idea to offer this service too.</p>

</div>

<div id="interactive">

<h2>Interactive Media, Web, &amp; Design</h2>

<p>We surf the web, a lot. We see a lot of good design and a lot of bad design. We also make web sites and interactive media, and we do it the best.</p>

</div>

</div>

Sample
Combining Selectors‘>

Combining Selectors

Finally, in CSS you can combine any of the techniques that I’ve explained in order to pinpoint the elements that you’re interested in formatting.

To combine selectors:

1. Define the context of the desired element. (see Selecting Elements by Context)

div.music

2. Next, spell out the element’s name or use the wild card character (see Selecting Elements by Name)

div.music p

3. Then, specify the class or id or the desired element(s). (see Selecting Elements by ID or Class)

div music p em:

4. Next, specify the psuedo-class or psuedo-element. (see Selecting Part of an Element and Selecting Links Elements Based on Their State)

div music p em:first-letter

5. Finally, specify which attributes and values must be present for the element ot be selected. (see Selecting Elements Based on Attributes)

div music p em:first-letter {color: red;}

The Best Deals on all of your Electronic Needs from TheNerds.net!

That concludes this tutorial. For a list of all CSS tutorials click here.

For previous tutorial “Working with Style Sheets” click here. For next tutorial “Formatting with Styles” click here

Is there something wrong with this tutorial? Let me know

This page is wiki editable click here to edit this page.

BEFORE STARTING, READ THESE THREE ITEMS:

- at many reboot steps, you need to hold down the c key to give you your boot options of hdd’s or dvd’s

- to work out a few driver issues in Windows (for older versions of OSX), use boot camp (free from apple) to create the windows drivers cd but DO NOT use it to partition your drive or any of that other jazz. Just make the cd which you’ll need later. If you have a later version of OSX all the drivers should be on your OSX install disk which you can put in after booting into your new OS.

Find all current special offers on Adobe products.

Lets begin!

1. Make sure you have OSX installed on your macbook. I should not have to tell you this.

2. Run the following diskutil resizeVolume command (with a leading sudo command) in the osx terminal (according to your hard drive size) which resizes your osx partition and adds 2 others with the windows partition last (osx: hfs linux: linux windows: ms-dos fat32…will be converted at Windows install) So, run it like the following (except you’ll need to split up the sizes according to “YOUR” hard drive… and don’t go over):
(before running this command, check the list of partitions.
disk0s2 is most likely the main partition name. To find out type: ‘diskutil list’ and verify the name as well as the fact that there should be one EFI partition (disk0s1) and then your OS X partition(disk0s2)

3. (while pressing c) Reboot with the Windows DVD in the drive. Install windows on the correct partition(should be sda4 or hda4) Don’t worry if Windows doesn’t finish all the way or won’t boot all the way yet. Just get as far as you can in the installation and then go to the next step. Preferably you get a chance to boot into Windows to make sure it is working.

4. (while pressing c) Reboot and install Linux OS from the dvd of your choice. Make sure it’s also installed on the right partition and during installation, install the grub bootloader when it asks. Make sure grub is installed on the linux partition and NOT the base of the hdd (for example: sda3 instead of sda)

6. Don’t worry about any problems with Fedora not working perfectly either because Windows and Linux OS most definitely won’t work or boot yet due to a range of problems between file systems, boot loaders, operating-system greediness and so on…(Unless you have installed rEFIt already which is how I did it, but other suggest to do it later. I don’t see the harm in installing it earlier in lets say step 0.  This way you will have the choice of booting into Windows right away to see if it works otherwise…)

7. Boot into OS X and download a program called rEFIt and extract the files to the root directory in OSX (for example: Macintosh HD, just put the “extracted” files right in there and then…

8. The new version of rEFIt will install itself (reboot after install and see if you get the boot menu) otherwise…open up the terminal (still in osx) and cd into /efi/refit directory and then run ./enable.sh, it will ask for your password and bam, you have the refit boot screen loader for your mac making it possible to see all your installed partitions at startup (by pressing the alt/option key and selecting the rEFIt logo) and OS’s (even though they’re not all working yet)

If you can not boot into any operating system yet from rEFIt: (or if you can at least boot into Linux OS skip to 19)

9. (while pressing c) Boot into the Linux OS DVD and run the command “linux rescue” Get to the prompt (skipping the disk check and the ethernet setup)

10. Once at the prompt, chroot to /mnt/sysimage

11. cd into /boot/grub and type: cp grub.conf grub.conf.backup(for a backup) and then type: nano grub.conf

12. In nano, add the following at the bottom(and don’t save just yet):

title Windows at sda4
rootnoverify (hd0,3)
savedefault
makeactive
chainloader +1

(this is where the magic occurs allowing grub to point to the windows MBR on boot… but we’re not done)
13. Make a few other minor changes to what was there already in the file – just make sure your grub.conf file matches this and you should be ok:

# grub.conf generated by anaconda
#
# Note that you do not have to rerun grub after making changes to this file
# NOTICE: You have a /boot partition. This means that
# all kernel and initrd paths are relative to /boot/, eg.
# root (hd0,2)
# kernel /vmlinuz-version ro root=/dev/VolGroup00/LogVol00
# initrd /initrd-version.img
#boot=/dev/sda3
default=0
timeout=50
color white/blue
foreground ffffff
background 0639a1
splashimage=(hd0,2)/grub/splash.xpm.gz
#hiddenmenu
title Linux OS
root (hd0,2)
kernel /vmlinuz-2.6.18-1.2798.fc6 ro root=/dev/VolGroup00/LogVol00 rhgb quiet
initrd /initrd-2.6.18-1.2798.fc6.img

title Windows at sda4
rootnoverify (hd0,3)
savedefault
makeactive
chainloader +1

14. Ctrl-x and confirm with ” y ” to overwrite the existing file

15. Go back to root ( cd / ) and type: fdisk /dev/sda (that’s a space after fdisk)

16. Enter option: ” t ” … and then partition number ” 4 ” (the windows partition number) and then the id number ” 7 ” (which changes the Windows partition to an HPFS/NTFS partition id) Then type ” w ” to write the changes to the drive – This will save you from a windows booting error when the filesystem ID’s clash -

17. Type exit twice to reboot

18. (while pressing c) Reboot and DO NOT ENTER THE rEFIt MENU and then… eject the linux OS dvd and insert the windows dvd.

This is all I had to do to make it work:

19. Boot into the windows dvd and after choosing the language, click on “repair” instead of install and just follow each step. It will automatically find a windows startup problem and fix it automatically (if it doesn’t detect the OS or the problem the 1st time, reboot and do it again…it didn’t detect the problem the first time on mine…if it does on yours…kudos!)

20. After windows is repaired and the computer restarts, take out the DVD, select the rEFIt menu, and if you did everything correctly (and in the right order)…choose any OS and VOILA! You should have a triplebooting machine!!!

For older OSX versions:

~ And now, for those windows drivers from the cd you made. This can be a little tricky but pretty necessary if you want Windows to be totally functional with your mac. First, put in the drivers cd and start the installation. It will then begin to install all the necessary files and drivers into a directory but then… the installation will fail (at least it did on mine several times) So what you must do is snatch the folder full of drivers before it quits. Luckily, Windows stops at the end of the drivers installation and asks for some kind of verification on something. That is the window of time to go to Program Files (assuming you know where that is) and then copy and paste the “macintosh drivers” folder that it installed to your desktop. After the verify window is closed, it fails and rips back all those files, but if you did it fast enough, then you’ll have a copy on your desktop. Then you simply go into the Device Manager and update any drivers you want in there. I also looked through the whole folder and installed anything that looked necessary (if it wasn’t compatible then it wouldn’t let me). Sometimes it would say, “do you want Windows to re-install that software with the recommended settings” and i’d just say yes and let it do its thing. But, it’s your computer and you can do it any way you please.

Training Videos for Web Designers

Other things worth mentioning:
- Linux OS will automatically install everything pretty nicely except for your wireless adapter, ACPI (sleep mode), and other little things, use the updater or other resources online to fix Linux OS the way you want them.

Many thanks to: http://tripleboot.is2.byuh.edu/

Is there something wrong with this tutorial? Let me know

I have decided to post this tutorial because I have an itch to constantly change the partitions on my hard drive and installing new and different operating systems.  So if you are like me you will want to know how to restore the MBR or Master Boot Record.

Lets begin!

The MBR holds information regarding the number of partitions in the hard disk, starting point of the OS and so on to help the processor to start correctly each time it is turned on. This makes sure that the processor always starts processing from the correct fixed position. Thus it helps in bootstrapping the system. Restoring the MBR will help you in booting to Windows 7 if you have been dual booting with Linux, or if you are like me triple booting or quad booting with plenty of other OS’s and want to remove it now.

To accomplish this follow these steps.

1 ) Insert Windows 7 DVD and boot to it

2 ) Select the desired language in the first boot screen and click Next button

3 ) Select the option “Use recovery tools that can help fix problems…..” option and click Next button

4 ) In the System Recovery Options window click Command Prompt link

5 ) You will be in the prompt X:\Sources>. Type D: and press Enter

6 ) Type DIR and press Enter key

7 ) See if there is a directory named boot

8 ) If the boot is not present then switch to E: drive and repeat steps 6 and 7 above for E: until you find the boot directory. Repeat this step for other letters of your drive until you find boot directory.

9 ) Once boot directory is found type CD boot and press Enter key

10 ) You will be switched to boot directory i.e. E:\boot>, for example.

11 ) Type bootsect /nt60 SYS and press Enter key

12 ) Wait till the process is successful

13 ) Type exit and press Enter key

14 ) Now click Shut Down button in the System Recovery Options window

15 ) Restart your system to Windows

It is important to note that this technique is similar for fixing the MBR is all windows systems using the windows install or recovery disk.

Many thanks to: http://www.itechtalk.com/thread6519.html

Is there something wrong with this tutorial? Let me know

Welcome to programming with C.  This tutorial is the first of many to come in C programming and is important to learn for the foundations of other programming languages, mostly for the syntax and logic of programming with computer languages.

Before we begin lets talk about what tools we will need a compiler.  You can Google c compiler to find any but I recommend Borland C++ compiler.  Be sure to read the instructions on how to use this program as I will not be referring to any specific program how how to compile and execute.

Lets begin.

Lesson 1: First C Program

Usually when using a compiler program and opening a new C file you will be given:

# include <stdio.h>

main()
{
printf("Hello, world\n");
}

This is a C program that displays one line. “Hello, world!”

The first line in this program is #include <stdio.h> is the code that will tell the following function where to find the library of all the definitions the program will be asking for. This declaration is important because without it your program will not function.

The next section main() declares where the main part of the program begins.  (note the main is spelled all in lower case, all programs written in c are case sensitive.)

Next lets look at the printf(“Hello, world\n”); line.  Here we learn that in proper C syntax you typically end a statement with a semi-colon (;), in contrast to the English language where you would end a sentence with a period(.).  This particular statement is a printf statement, which in C means that something is to be displayed.  In other words printf is telling your computer to create an output on to your screen or “print” on to your screen.  It is unsure to what the meaning of the f at the end of the statement means.  Some speculate that it means you have some control over the format of what gets displayed where others say it is there just to make the program look more intimidating!.

The bracket after the printf contains the data that is to be displayed.  In this case the data is contained within double quotation marks (“), which is used to tell the C compiler that what is between the quotes is not C, but a bunch of characters to be displayed, or a character string.

The \n at the end of the character string is an technique for including special characters that are not part of the output.  These special techniques always begin with a backwards slash (\) and are followed by one or more characters.  In this case, the special character \n is  called the newline character and causes the display to advance to the beginning of the next line.

Here is a list of some other commonly used characters:

\a – beep (a stands for “alarm”)
\b – backspace
\f – form feed (usually only affects printer output)
\t – go to the next tab stop (usually every 8 columns)
\\ – output backslash

Why don’t you try out these other special characters and also adding a second printf function that will display “This program was made by yourname”.  Keep trying until it works out.

Here is a famous example of a c program.  The hello world program:

int main()

 {
        printf("hello, world");
        return 0;
 }

For more history click here.

Is there something wrong with this tutorial? Let me know

This tutorial will teach you how to create a style sheet file, and then apply that style sheet to an individual element,  a whole web page, or an entire web site.  This tutorial will also guide you to the appropriate tutorials that will show you how to define and format a style sheet.

Creating an External Style Sheet
Linking External Style Sheets
Offering Alternate Style Sheets
Creating an Internal Style Sheet
Importing External Style Sheets
Using Media-Specific Style Sheets
Applying Styles Locally
The Inspiration of Others:CSS

Creating an External Style Sheet

An external style sheet is great for giving a common look amongst the pages of your web site.  You can define these styles in a style sheet and then tell each page of your site to consult with this external style sheet to ensure that each page will have the same look.

The first step in creating an external style sheet create a new text document or if you are using a web development software tool like Dreamweaver, open up a new CSS file.

Find all current special offers on Adobe products.

The next step will be to define the style rules for your web pages as described in these tutorials:

Defining Selectors
Formatting with Styles
Layout with Styles
CSS for Handhelds (coming soon)
CSS for Printing (coming soon)

Once you have defined your style rules you can then save your document with the extension .css

Linking External Style Sheets

The simplest way to apply a style sheet’s rules to a web page is to link to the style sheet.

To link an external style sheet first type <link rel=”stylesheet” type=”text/css” where text/css indicates that the style sheet is written in CSS, in the <head> section of your page. Next type href=”url.css” where url.css is the name and location of your style sheet. Finally close the tag with />.

Here is one example:

<link rel="stylesheet" href="../../lightbox2.04/css/lightbox.css" type="text/css" />

Now your style sheet is linked to your web page.

Offering Alternative Style Sheets

You can link more than one style sheet and let visitors choose the styles they like best.  This allows for a default/base setting style sheet with rules that will stay consistent and then a preferred style rule which is applied regardless of choice and then a alternate style sheet setting which the visitor can choose from that will change over from the preferred style rule.

To offer alternate style sheet first designate the style that should be used as the base, regardless of the visitor’s preferences as described in the heading above, Linking External Style Sheets.

Next you want to designate the preferred style sheet which will contain only the style rules that will be changed by the alternate choice.  To do this add title=”preferred.css” where preferred.css is the name of the style sheet rule.  Do the same for the alternate style sheet except change “rel=”stylesheet” to “rel=”alternate stylesheet” again adding title=”alternate.css” where alternate.css is the name of the alternate external style sheet. Here is an example.

<link rel="stylesheet" href="../../lightbox2.04/css/lightbox.css" type="text/css" />
<link rel="stylesheet" href="../../lightbox2.04/css/lightbox.css" type="text/css" title="black borders" />
<link rel="alternate stylesheet" href="../../lightbox2.04/css/lightbox.css" type="text/css" title="no borders" />

The visitor can now select from his/her browser from the view drop down menu which style sheet they would prefer to use.

Creating Internal Style Sheets

Internal Style sheets let you set the styles at the top of the HTML document to which they should be applied.  This method is only useful if you do not plan on using the same style sheet more than once.

To create an internal style sheet, in the head section of your HTML document type, <style type=”text/css”> Then define as many style rules as desired as described in Intro to CSS. After all the style rules of been defined close the internal style sheet with </style>. Here is one example.

<style type=”text/css”> img{border:4px solid red;} </style>

It is important to realize that internal style rules will override any external style rules if the style tag comes after the link tag that links the external style sheet to the HTML document.

Importing External Style Sheets

One quick tip on using internal style sheets is to also import an external style sheet into an internal style sheet by typing @import”external.css”; where external.css is the name of your external css, into the style tag.  But be sure not to use the import function after any other style rules.

Using Media-Specific Style Sheets

You can designate a style sheet to be used only for a particular output. The three main outputs you may want to consider is screen, print, and handheld.

To designate media-specific style sheets add media=”output” to the opening link style tags, where output is one or more of the previously mentioned outputs.  Be sure to separate the values with commas.  Not defining a media output will leave the css default output to all.

<link rel="stylesheet" href="../../lightbox2.04/css/lightbox.css" type="text/css" media="screen" />

You can apply the output rule with the import rule by adding the output following the url/name of the style sheet being imported like so.

<style>@import “lightbox.css” screen;</style>

Applying Styles Locally

Applying styles locally is an easy, small scale and safe way to apply style rules to your web page.  This method is easy for editing however, it does not provide a centralized way of formatting your entire web site.

To apply styles locally type style= within the HTML tag that you want to format, whether it be the HTML tag itself or the img tag, td tag, and so on.  Create a style rule without curly brackets or a selector. The selector isn’t necessary since you are placing it directly inside the desired element.  To create additional style definitions type a semicolon ; after each definition and repeat. Type the final ” mark to close the style.  Your local style should look something like this.

 <td style="font-family: HelveticaNeueLT Std; font-size:14px">

It is also important to note that all local style rules will override any external linked or imported style rules.

Training Videos for Web Designers

The Inspiration of Others: CSS

By viewing the source code of a web page you can look and see how others have created their style sheets.  This is something I do often to help me create my own style sheets from other style sheets a come across that I feel are very inspiring.

To view other designers’ CSS code first view the page’s source by going to view > page source on your browser.  If the CSS is local/internal that you can see the CSS right away.  If the CSS is linked externally you can copy the url of the CSS file shown in the link element or the import rule.  Once you have copied the address of the style sheet paste this url into your browsers address box and hit enter.  If the style sheet address is relative you may have to rebuild the url by combining the page’s url with the style sheets url.

Here is a sample of an HTML e-mail we are putting together for broadcast e-mailing. “Email V2″

Click here for previous tutorial: Intro to CSS

That concludes this tutorial.  For a list of other CSS tutorials click HERE.

Is there something wrong with this tutorial? Let me know

I was recently told to make an HTML e-mail for Alpha Organic because HTML e-mails is a great marketing tool.  Little did I know scripting an HTML e-mail is not the same as scripting an HTML website.

Email Marketing and Online Surveys by Constant Contact make it easy to connect with your customers. Try it FREE for 60-Days.

The good thing is if HTML is good for anything these days it is good for e-mail because HTML web pages are a thing of the past.

Before we begin however, let me first say this. The way I learned and the way I am going to teach you does not include everything there is to know about HTML e-mail nor do I think it is the best way to do it.  But it is one way to do it and it is pretty simple.

I would also recommend that you learn a little about HTML and CSS if you do not know already as I will not be going into details.  If you are interested I have made more tutorials on HTML and CSS which you can find in this blog.

Step 1: Use Tables!

This is probably the best way to organize your HTML e-mail.  If you don’t know how to make tables with code “Dreamweaver” has an easy table function button. If you don’t have “Dreamweaver” you can make your HTML e-mail in “Word” which I am positive you most likely have.  Just save your word document as .html. (This should work and word is also really simple when using tables and images)

Find all current special offers on Adobe products.

Don’t forget you can also make tables within an existing table cell.

Step 2:Do Not Use CSS!

CSS will not work within HTML e-mails but don’t freak just yet.  There is an alternative and that is “Inline CSS”.

Inline CSS allows you to create CSS functions within an HTML tag.  This works by typing the CSS following your opening HTML tag and before closing with “style=” and a CSS function following it. You can add more by using “;” after each function.  So far your e-mail should contain something like this.

<td style="font-family: Helvetica Inserat LT Std; font-size: 17px"> PROFILE</td>

(I would not recommend using Helvetica, but I like it so much I used it for mine.  However, most would say stick to your basic fonts such as Arial)

Step 3: Do Not Use Background Pictures!

Simply because they won’t work.  Select a background colour for your table or for each cell instead.  I would also suggest you strictly define the size of each cell and your complete table to avoid a squished or expanded e-mail like so.

<table style="" width="550" border="0" align="center">

Step 4: Save  Received HTML E-mails

If you have received any HTML e-mails that you liked use this to your advantage.  Learn the code and mimic it.  This is probably the best advice I can give you in regards to scripting a really super nice HTML e-mail. (DUH!)

Step 5: Copy the Preview Into Your E-mail

I must of spent a week wondering why the e-mail I created would not send properly and this was my first step in learning how to code the HTML e-mail properly.  Rather then inserting the HTML code into the e-mail, preview the e-mail in your browser > press  ctrl-a > open a new e-mail > press ctrl-v >  send.

Training Videos for Web Designers

That concludes this tutorial.   I hope this was useful as I must of read a dozen other extremely detailed tutorials that did not get me far at all.  If you are still having troubles I will be happy to help me out, just send me an e-mail to adrian@alphaorganicmedia.com and I will be sure to reply to as soon as possible. Or you can visist  http://www.w3.org/TR/1998/NOTE-HTMLThreading-0105.htm.

That concludes this tutorial.  For a list of other HTML tutorials click HERE.

Is there something wrong with this tutorial? Let me know