Week #11: Audio for Your Website!:

 

An easy way to add audio to your website using the object code (replace example with file name): 

 

<object height="50" width="100" data="example.mp3"></object>

 

Resource: http://www.w3schools.com/html/html_sounds.asp

 

Week #10: Password Protect Your Page:

 

When you want only a select few of people to see a page on your website, this would be a perfect method of making this happen. Here is the html code:

 

<!-- This Script is from www.htmlfreecodes.com, Coded by: Krishna Eydat-->
<script language="javascript">
<!--//
/*This Script allows people to enter by using a form that asks for a
UserID and Password*/
function pasuser(form) {
if (form.id.value=="TYPE A USERNAME") { 
if (form.pass.value=="TYPE A PASSWORD") {              
location="http://www.yoursite.com" 
} else {
alert("Invalid Password")
}
} else {  alert("Invalid UserID")
}
}
//-->
</script>

<center>
<table bgcolor="white" cellpadding="12" border="1" style="border: 0px dashed #FF0000">
<tr><td colspan="2" bordercolor="#FFFF00" style="border: 1px solid #FF0000"><center><h1><i><b>
 <font size="3">Login
Area</font></b></i></h1></center></td></tr>
<tr><td height="30" bordercolor="#FFFF00" style="border: 1px solid #FF0000"><h1><i><b>
 <font size="3">UserID:</font></b></i></h1></td>
 <td height="64" bordercolor="#FFFF00" style="border: 1px solid #FF0000"><form name="login"><input
name="id" type="text"></td></tr>
<tr><td bordercolor="#FFFF00" style="border: 1px solid #FF0000"><h1><i><b>
 <font size="3">Password:</font></b></i></h1></td>
 <td bordercolor="#FFFF00" style="border: 1px solid #FF0000"><input name="pass"
type="password"></td></tr>
<tr><td bordercolor="#FFFF00" style="border: 1px solid #FF0000" height="51"><center><input type="button" value="Login"
onClick="pasuser(this.form)"></center></td>
 <td bordercolor="#FFFF00" style="border: 1px solid #FF0000" height="51"><center><input
type="Reset"></form></td></tr></table></center>

<font face="Tahoma"><a target="_blank" href="/http://www.yoursite.com"><span style="font-size: 8pt; text-decoration: none">HTML Free Code</span></a></font>

 

Resource: www.htmlfreecode.com

 

Resource: Wiki 2010 O'Gorma

Week #9: How to Use Snippets (Dreamweaver):

 

Not a creative week today, as a took some vacation time from last week and wasted my creativity on my flyer. Anyways, today I will be giving a tutorial on snippets. A tool that has some great features, and can save you time. For example, do you need a footer for your website but don't want to waste time formatting one? Snippets is a great tool in Dreamweaver which has pre-formatted code. Here's an example:

 

Screen Recording.mov

 

Note: It can also be used to create your own snippets, as in if you have your own format for a footer you can save it as a snippet.

 

Resource: https://www.inkling.com/read/dreamweaver-cs6-missing-manual-david-sawyer-mcfarland-1st/chapter-18/snippets-and-library-tutorial

Week #7: Paint Brush Tool:

 

The paint brush tool is an effective tool if the person knows how to use it. This is a very basic tutorial even though it is far into the semester. There are many options for your paint brush. To actually make it so the different types of paint brushes appear, you must create a new empty layer. Not a shape layer, but a real blank layer.

 

Then you must select the paint brush tool. On the top left there should be different brushes you can choose from. 

 

 

And then.....

 

 

PAINT!

 

Resource: My struggles 

Week #6: Making GIFs From Video:

 

This process sort of crashed my Photoshop since I was doing a lot of things for my RAM to handle, but I grabbed one screenshot. So I'll have to explain the rest in words

 

Step 1: Obtain a video that you want to use to create a GIF (make it 20 seconds or less, or it gets messy)

Step 2: Create a new Photoshop file, using any size you need

Step 3: Go to File --> Import --> Layers from Video Frames

Step 4: Pick the file and wait for it to Import

Step 5: Should look like something like this:

     

 

Step 6: Edit it as much as you need, and use the Timeline tool to your advantage

Step 7: Save for Web --> GIF --> Save

 

Resource: http://www.youtube.com/watch?v=v79czy49kTQ

Week #5: Gettin' Artsy Up In Heah':

 

The ultimate editing in Photoshop: Black and White background with a color object. I will guide you through the steps like no other.

 

Get your original image!

 

 

After obtaining this image, import it into Photoshop. After that, you want to create a new Hue/Saturation Layer. This is done by clicking the Ying-Yang like button next to the new layer button on the bottom of the layer window.

 

 

After you do that, a window should pop up that gives you the saturation/hue options. Drag the arrow to -100 on the Saturation Scale

 

After you do that, select the paint brush tool. When you select the paint brush tool, click the little boxes on the window that have two different colors. You should get a dialog box like this:

 

 

Make the Foreground color Black! After you do that, use the paint brush tool on the object you want in color. After your finished, don't forget to save! You should end up with something like this:

 

Week #4: How To Use The Content Aware Tool:

 

This is the greatest tool that the world has ever seen. Alright, imagine you have a picture of a mountain. But there is this silly pole that is in the middle of the picture. Have no fear, Photoshop is here.

 

First. You start with a picture:

 

Next, you want to select the Polygonal Lasso Tool. Highlight the image you want to erase.

 

 

Then we want to right click it, or Control + Click it. Click Fill.

 

 

The screen above should appear. Select "Content-Aware", and hit OK

 

Bang Bang.

 

Resource:http://www.photoshopessentials.com/photo-editing/content-aware-fill-cs5/ 

 

Week #3: How To Add a Search Bar To Your Website (Google):

 

 

So I messed up the first time, and I deleted this entry so it might not be at the same quality. Anyways, I was sitting at my desk when I heard the news that we had to do a weekly wiki entry. I didn't know what to do, and as any good student would do, I turned to Baptiste, Ben Baptiste. We talked, and we decided to go on an adventure of finding old wiki entries and picking something out. S/O to Alexander Bice for the simplistic, yet useful, code. What I'm talking about it a Google Search Bar in your website. It might be not as useful since most browsers can search through the url bar or a built in search bar. So, without further adue, the code:

 

 

<!DOCTYPE html>
<html>
&lt;h<span class="mceItemHiddenSpellWord">ead</span>&gt;
&lt;title&gt;<span class="mceItemHiddenSpellWord">Google</span> Search&lt;/title&gt;
&lt;meta name="ROBOTS" content="NOINDEX, NOFOLLOW" /&gt;
&lt;!-- CSS styles for standard search box --&gt;
&lt;style type="text/css"&gt;
	#<span class="mceItemHiddenSpellWord">tfheader</span>{
		background-color:#c3<span class="mceItemHiddenSpellWord">dfef</span>;
	}
	#<span class="mceItemHiddenSpellWord">tfnewsearch</span>{
		float:right;
		padding:20<span class="mceItemHiddenSpellWord">px</span>;
	}
	.<span class="mceItemHiddenSpellWord">tftextinput</span>{
		margin: 0;
		padding: 5<span class="mceItemHiddenSpellWord">px</span> 15<span class="mceItemHiddenSpellWord">px</span>;
		font-family: <span class="mceItemHiddenSpellWord">Arial</span>, <span class="mceItemHiddenSpellWord">Helvetica</span>, sans-serif;
		font-size:14<span class="mceItemHiddenSpellWord">px</span>;
		border:1<span class="mceItemHiddenSpellWord">px</span> solid #0076a3; border-right:0<span class="mceItemHiddenSpellWord">px</span>;
		border-top-left-radius: 5<span class="mceItemHiddenSpellWord">px</span> 5<span class="mceItemHiddenSpellWord">px</span>;
		border-bottom-left-radius: 5<span class="mceItemHiddenSpellWord">px</span> 5<span class="mceItemHiddenSpellWord">px</span>;
	}
	.<span class="mceItemHiddenSpellWord">tfbutton</span> {
		margin: 0;
		padding: 5<span class="mceItemHiddenSpellWord">px</span> 15<span class="mceItemHiddenSpellWord">px</span>;
		font-family: <span class="mceItemHiddenSpellWord">Arial</span>, <span class="mceItemHiddenSpellWord">Helvetica</span>, sans-serif;
		font-size:14<span class="mceItemHiddenSpellWord">px</span>;
		outline: none;
		cursor: pointer;
		text-align: center;
		text-decoration: none;
		color: #<span class="mceItemHiddenSpellWord">ffffff</span>;
		border: solid 1<span class="mceItemHiddenSpellWord">px</span> #0076a3; border-right:0<span class="mceItemHiddenSpellWord">px</span>;
		background: #0095<span class="mceItemHiddenSpellWord">cd</span>;
		background: -webkit-gradient(linear, left top, left bottom, from(#00<span class="mceItemHiddenSpellWord">adee</span>), to(#0078a5));
		background: -moz-linear-gradient(top,  #00<span class="mceItemHiddenSpellWord">adee</span>,  #0078a5);
		border-top-right-radius: 5<span class="mceItemHiddenSpellWord">px</span> 5<span class="mceItemHiddenSpellWord">px</span>;
		border-bottom-right-radius: 5<span class="mceItemHiddenSpellWord">px</span> 5<span class="mceItemHiddenSpellWord">px</span>;
	}
	.<span class="mceItemHiddenSpellWord">tfbutton</span>:hover {
		text-decoration: none;
		background: #007<span class="mceItemHiddenSpellWord">ead</span>;
		background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
		background: -moz-linear-gradient(top,  #0095cc,  #00678e);
	}
	/* Fixes submit button height problem in Firefox */
	.<span class="mceItemHiddenSpellWord">tfbutton</span>::-moz-focus-inner {
	  border: 0;
	}
	.<span class="mceItemHiddenSpellWord">tfclear</span>{
		clear:both;
	}
&lt;/style&gt;
&lt;/h<span class="mceItemHiddenSpellWord">ead</span>&gt;
&lt;body&gt;
	&lt;!-- HTML for SEARCH BAR --&gt;
	&lt;div id="<span class="mceItemHiddenSpellWord">tfheader</span>"&gt;
		&lt;form id="<span class="mceItemHiddenSpellWord">tfnewsearch</span>" method="get" action="http://www.google.com"&gt;
		        &lt;input type="text" class="<span class="mceItemHiddenSpellWord">tftextinput</span>" name="q" size="21" maxlength="120"&gt;&lt;input type="submit" value="search" class="<span class="mceItemHiddenSpellWord">tfbutton</span>"&gt;
		&lt;/form&gt;
	&lt;div class="<span class="mceItemHiddenSpellWord">tfclear</span>"&gt;&lt;/div&gt;
	&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

   Here's what it should look like!

 

 

Resource: http://www.textfixer.com/tutorials/html-search-box.php 

 

Week #2: Today's Date on a Nice Calendar :) :

 

If you want a nice calendar on your website, here's a code for one:

 

<html>

 

<head>

<meta name="GENERATOR" content="Microsoft FrontPage 6.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

</head>

 

<body>

 

<center>

<script LANGUAGE="JavaScript">

 

<!-- Begin

monthnames = new Array(

"January",

"Februrary",

"March",

"April",

"May",

"June",

"July",

"August",

"September",

"October",

"November",

"Decemeber");

var linkcount=0;

function addlink(month, day, href) {

var entry = new Array(3);

entry[0] = month;

entry[1] = day;

entry[2] = href;

this[linkcount++] = entry;

}

Array.prototype.addlink = addlink;

linkdays = new Array();

monthdays = new Array(12);

monthdays[0]=31;

monthdays[1]=28;

monthdays[2]=31;

monthdays[3]=30;

monthdays[4]=31;

monthdays[5]=30;

monthdays[6]=31;

monthdays[7]=31;

monthdays[8]=30;

monthdays[9]=31;

monthdays[10]=30;

monthdays[11]=31;

todayDate=new Date();

thisday=todayDate.getDay();

thismonth=todayDate.getMonth();

thisdate=todayDate.getDate();

thisyear=todayDate.getYear();

thisyear = thisyear % 100;

thisyear = ((thisyear < 50) ? (2000 + thisyear) : (1900 + thisyear));

if (((thisyear % 4 == 0) 

&& !(thisyear % 100 == 0))

||(thisyear % 400 == 0)) monthdays[1]++;

startspaces=thisdate;

while (startspaces > 7) startspaces-=7;

startspaces = thisday - startspaces + 1;

if (startspaces < 0) startspaces+=7;

document.write("<table border=2 bgcolor=white ");

document.write("bordercolor=black><font color=black>");

document.write("<tr><td colspan=7><center><strong>" 

+ monthnames[thismonth] + " " + thisyear 

+ "</strong></center></font></td></tr>");

document.write("<tr>");

document.write("<td align=center>Su</td>");

document.write("<td align=center>M</td>");

document.write("<td align=center>Tu</td>");

document.write("<td align=center>W</td>");

document.write("<td align=center>Th</td>");

document.write("<td align=center>F</td>");

document.write("<td align=center>Sa</td>"); 

document.write("</tr>");

document.write("<tr>");

for (s=0;s<startspaces;s++) {

document.write("<td> </td>");

}

count=1;

while (count <= monthdays[thismonth]) {

for (b = startspaces;b<7;b++) {

linktrue=false;

document.write("<td>");

for (c=0;c<linkdays.length;c++) {

if (linkdays[c] != null) {

if ((linkdays[c][0]==thismonth + 1) && (linkdays[c][1]==count)) {

document.write("<a href=\"" + linkdays[c][2] + "\">");

linktrue=true;

      }

   }

}

if (count==thisdate) {

document.write("<font color='FF0000'><strong>");

}

if (count <= monthdays[thismonth]) {

document.write(count);

}

else {

document.write(" ");

}

if (count==thisdate) {

document.write("</strong></font>");

}

if (linktrue)

document.write("</a>");

document.write("</td>");

count++;

}

document.write("</tr>");

document.write("<tr>");

startspaces=0;

}

document.write("</table></p>");

// End -->

</script>

</center>

 

It creates a nice looking calendar, that looks like this:

 

Resource: http://www.htmlfreecodes.com/Todays_date_on_website_on_a_nice_calendar.htm

 

 

Week #1: How to Install Fonts for Photoshop:

 My friend asked me to help make his a photo using Photoshop, but the photo he wanted me to edit had text that didn't come with computers, you had to install it. My font that I was looking for was Mortal Kombat font, and you can actually find it on http://www.dafont.com. 

 

 

 

After installing the .zip file of your font of choice, you must extract it. After extracting, all you have to do is open the file and click install. Restart your Photoshop and you should see your new font. This a very simple but very useful tip that can help make your images more appealing.

Resource: http://www.fontspring.com/support/installing/how-do-i-install-fonts-on-my-mac