VeeshanVault

Posted: **July 11, 2005, 9:13 pm**

Last week I decided to grab these apps and learn them in detail. Usually I just jump right in and go but this time I went with the more normal approach of actually taking some time to teach myself the basics.

I searched the newsgroups first and found some Lynda Tutorial CDs but I ended up getting the Dreamweaver Lynda tutorials I wanted off of the Pirate Bay Torrent site.

I must say, having never used this approach before to learn a program, that it's been great. Lynda Tutorials are a few hundred mini movies put together in chapters in a logical order. They are in .mov format so get the quicktime alternative app so you don't have to install the bloated PoS Quicktime on your computer.

The two Dreamweaver tutorials I grabbed are:

Learning Dreamweaver MX
Intermediate Dreamweaver MX

They total up to around 16 hours of video training in an easy to browse format.

For Photoshop CS2 I grabbed the Lynda Tutorial:

Photoshop CS2 for the Web: Essential Training

I haven't checked that one out yet but also grabbed a massive 3 DVD Photoshop CS2 training series called, "Total Training for Photoshop CS2"

It's 21 hours of video training and from watching the first chapter intro, looks to be worth the time to watch.

I have no desire atm to create a website or do anything more than edit pictures for VV contests (which only require paintshop skills) but Dreamweaver is an amazing app. It can't hurt to get a handle on how to use it.

I also grabbed a mega plug-in pack for Photoshop that has a bazillion of the latest plugins and also grabbed a huge extensions collection for Dreamweaver off the newsgroups.

With all of these tools at my disposal...mostly being cool ways to create menus...I plan on making a website that is just full of Menus that lead to other menus that lead to even more menus.

How'd everyone else learn Dreamweaver the first time? I know you can jump right in but I'm finding that there are some shortcuts to doing things I wouldn't have been using without the tips from the tutorials.

Posted: **July 11, 2005, 11:55 pm**

ugh, wysiwyg web design.... no comment.

Posted: **July 12, 2005, 12:15 am**

Fash wrote:ugh, wysiwyg web design.... no comment.

I respect the old coding ways but I'm only going to be observing the code in split screen mode. ...no plans here to write websites using notepad!

You must have liked the old HotDog HTML editor back in the day!

Posted: **July 12, 2005, 12:20 am**

Used to use mainly BBEdit in an old coding job I had in a small ISP. The owner asked me to start "messing" with Dreamweaver...he saw what it was capable of and told me to go back to BBEdit. I never understood that guy, but his company went from being local to covering a lot of the state. He was the only person I ever worked for that had a company rule stating that if his cat came near you for attention, you were to drop whatever you were doing to pet it. The office building even had ramps all over the place for the cat (company was named after that cat too) could go upstairs to the owner's apartment and downstairs to the office whenever it wanted.

Posted: **July 12, 2005, 12:45 am**

I got the DVD CS2 Total Training DVDs a bit ago. Haven't got around to installing them though. Photoshop Elements 3.0 seems to do everything I need at the moment.

Posted: **July 12, 2005, 4:05 am**

Aslanna wrote:I got the DVD CS2 Total Training DVDs a bit ago. Haven't got around to installing them though. Photoshop Elements 3.0 seems to do everything I need at the moment.

My dad uses Elements 3.0. He put together a picture that grouped several relatives together using multiple pictures and a different background and managed to make it look pretty realistic like we were all supposed to be in the picture. I looked around for a Photoshop Elements type Lynda tutorial I could send him as he seems to like that sort of stuff but couldn't find one or any other movie type tutorial for it.

Like Elements for you, Microsoft Digital Image Pro did pretty much all I wanted for photo manipulation and the FastStone Image viewer has excellent and easy to access single or batch resizing/cropping etc that I use for the comic covers I post.

After seeing all the plug-ins (I know MS Image editor and probably Elements can use most of the plug ins as well) and power of Photoshop CS2, I want to learn that app and use it. If you do a quick install of the first Total Training DVD, his first lesson is sort of a demonstration of what Photoshop can do which is quite impressive and obviously shows that there are some powerful things in CS2 that would be helpful even to casual photo editors. The host seems to like what he's doing which helps keep your attention. Some of the stuff he was doing with the Clone Stamp Tool, Healing Brush and Burn Tool were a lot more effective than my little smart erase feature in Image Pro and easy to use after some initial video style training.

Back to the Lynda tutorials Im currently watching for Dreamweaver though, I'm hooked on the format as a way to learn apps. The way the .movs are structured in Chapter folders and topics within the folders like a book will make it a breeze to pull up a video later on on a particular topic if I need some reminding later on. Thankfully there's no goofy format or program I have to launch to view them quickly. Total Training has a cool interface though and I was able to run it virtually mounted although it did crash a few times (it didn't seem to like me switching back and forth to the actual Photoshop app) so I might try burning a copy when it's time to watch it. Total Training is all .mov files as well if you dig down in to the directory structure into the VIDEO folder you'll see L01 through L12 folders with the multiple movies in each folder for DVD 1 but they aren't titled in helpful ways (they match up exactly with this list though: http://www.totaltraining.com/prod/outli ... sp?mscsid= )...but that is the way to check out the last two "hidden" chapters that are on the third DVD about the Vanishing Point and Smart Objects.

Hmm, I just went to Total Training's website and see "Total Training Presents: Digital Photography & Adobe Photoshop Elements 3" http://www.totaltraining.com/prod/adobe ... sp?mscsid=

I think that may turn into a B-Day gift!

Edit: looks like there's an Advanced Photoshop Elements version as well hosted by the same guy that did the Photoshop CS2 DVDs:

http://www.totaltraining.com/prod/adobe ... sp?mscsid=

Posted: **July 12, 2005, 10:04 am**

Winnow wrote:
Fash wrote:ugh, wysiwyg web design.... no comment.
I respect the old coding ways but I'm only going to be observing the code in split screen mode. ...no plans here to write websites using notepad!

You must have liked the old HotDog HTML editor back in the day!

vi

Best editor evar!

Posted: **July 12, 2005, 1:33 pm**

I use MX2004 but I only use the code view and I really mostly use it for the built in ColdFusion syntax highlighting and FTP functionality.

Posted: **July 12, 2005, 1:54 pm**

Hoarmurath wrote:
vi

Best editor evar!

pico ><

Posted: **July 12, 2005, 6:20 pm**

something i can agree with miir on.... pico over ssh for the win.

9+ years of web design, and the only place that required me to use a wysiwyg editor (and boy was it horrible) was the first place.
/bong
i wonder if there's a market in teaching people real web design via VNC and teamspeak...

Posted: **July 12, 2005, 7:34 pm**

What's so bad about using CSS, layouts or tables via Dreamweaver MX? Is it that much better to actually type out all of those lines of code?

I can't picture why it's easier to input all those lines for making a complex table as opposed to just whipping one up in Dreamweaver.

Is it a manly thing? Or like owning a DE mask, old school like?

I see the code and understand it as it's explained to me but I still don't see why it would be easier for me to try and create all of those tables and measurements using anything other than a WYSIWYG type app. To me it seems like it would be going back to using a typwriter instead of a word processor in comparison. Fuck that! I make too many mistakes to be using a typewriter. Dreamweaver seems pretty precise and easy. What are you gaining from manually typing that stuff? I can guess one thing of probably cleaner code.

I'm not defending WYSIWYG but don't understand what I'm missing from not directly typing the code.

PS, I reserve the right for free VV Web Development Tech Support!

Posted: **July 13, 2005, 9:29 am**

Winnow wrote:What's so bad about using CSS, layouts or tables via Dreamweaver MX? Is it that much better to actually type out all of those lines of code?

For real work, I actually am all for the use of a nice, commercial editor like Dreamweaver. But I don't do real web work like that. All my web stuff is very simple, and other than that, it's all code and/or configuration files that lend themselves to being written in a simpler editor. I don't have anything against things like Dreamweaver, I just have an abnormal love affair with vi.

P.S.: If you're using pico, just stop and start using vi. It will suck at first while you learn your way around it, but the only CLI editor for UNIX/Linux that even comes close to it is emacs, but vi is universally available with the initial install of virtually every UNIX/Linux distribution ever made. I sucked at vi when I first started using it 10 years ago, but I never regretted dropping pico. Not that pico is all that bad, but it just can't hold a candle to vi.

Posted: **July 13, 2005, 10:01 am**

I started to play with Dreamweaver, everything I wanted it for (essentially) required learning PHP and SQL to do "properly". In the process of that now, don't think I'll ever be a great DBA but the basics aren't too hard. PHP is spiffy, have to love a bastardization of 5-6 other languages.

Hoarmurath wrote:vi

Best editor evar!

I use it every day

I like emacs better but don't use it nearly as much as I used to.
Edit-

Winnow wrote:I'm not defending WYSIWYG but don't understand what I'm missing from not directly typing the code.

Efficiency and security. The WYSIWYG editors dump huge amounts of crap into whatever you're making. To do a good job with them you need to know how to write it "manually" anyway and for most that seems faster in the end. If you write it "by hand" you get exactly and only what you want. Yes it's faster to churn something out that way, and not a real issue on a small page or site. If you're co-hosting a lot of content it'll kill a server though.

Somewhat along the lines of the Windows\UNIX "everything and the kitchen sink" vs. "only what you really need" views of the world. Why use 1000 lines to do something that requires 50?

Posted: **July 13, 2005, 3:42 pm**

I use Dreamweaver MX2004 almost every day. For people who aren't the die hard coders its the perfect program to build sites with. One thing I've learned about wysiwyg is that you'll very rarely come our right. It does put in a lot of uneccessary code, and even puts in code that it will tell you itself that is incompatible with older browsers (Netscape). I usually end up building the site in DW, then going back through with BBEdit and editing the code myself.

I also keep the file loaded on Firefox and just refresh when I save, or if its php I refresh after I upload. The integrated ftp system in DW can be a royal pain in the ass. The techs at my school are so paranoid of warez/hacks/illegal downloads, that ftp clients are forbidden on any of the school computers. It makes chmoding a fucking pain. Thank God my server has cpanel.

Global CSS's own, however, if you don't know what you're doing, don't use them. Just assign the css's in the header of every page. I once had to take over a project of designing a website for a local school district, and the person before me... well, I had no fucking clue how he set up his files. The code was confusing and conflicting. Every time I made an update and uploaded, somewhere it would get overwritten and revert back to the original. No one at my school could figure out why, and the guy who made it had graduated and moved on. We eventually wiped the project and started from scratch. Not fun.

Also, some people do not understand the beauty of comments in code. For the love of God.... USE THEM!

Posted: **July 13, 2005, 4:37 pm**

Sargeras wrote:Also, some people do not understand the beauty of comments in code. For the love of God.... USE THEM!

Lots of folks think no comments and arcane code = job security.

Ever look at the winners from the obfuscated perl contest?

Posted: **July 13, 2005, 4:46 pm**

I'm ok with the unclean code and possible security issues. Anything I eventually put on the web would be a small site for friends or family or something.

If a hacker broke in and drew mustaches on the pictures I think I could live with it!

Posted: **July 13, 2005, 5:04 pm**

Back in 96 I when on a rant to my then boss that he should never, EVER hire a Web designer who couldn't write code in Notepad or VI. He didn't listend and hired the worst web designer ever, could't code, lied all the time and had the big head...

Now almost 10 years later I'm not so sure that I would be as harsh about it. Hell back in the day I use to write code to draw pictures in my 16 shades of green (dots) IIe and Trash 80. I wouldn't do that today, I would use Photoshop. I do NOT think we is to that point yet but it's getting closers. I no longer look down as much on people who only use a GUI but rather encourage them to learn the code behind the "magic!" I think a great web deisgner is like any other professional, they know when to use the appropriate tool to get the job done correctly and on time. If you have a GUI that makes one part quicker and is the same asthetically, go for it but don't sacrafice quality...

Marb

Posted: **July 13, 2005, 5:54 pm**

I'd probably be even worse about it today, the various expenses of sloppy code have gone way up, it's a tough market. We'll fix it next rev doesn't work anymore unless your M$, and it's biting them pretty hard.

Average coders are cheap and on every corner, brilliant ones are still expensive and well worth it.

That's most of what sucks about working with overseas code millls. Technically sharp people with very limited experience, we're having the same problems we had 10-15 years ago all over again, and the customers expectations have gone way up.

Posted: **July 13, 2005, 7:30 pm**

Developing in PHP and building web applications instead of web sites.. I just have a much different view of what a web site should be at the base level. I don't agree with a 100 page web site containing 100 html files, and I don't agree with the quick fix 'template' scheme...

Instead of designing an html document that displays my intention... I write web sites as programs that output my display, using the following function library which encapsulates HTML & JavaScript, drastically cutting down on keystrokes, and allowing a lot of functionality very quickly.

Code: Select all

<?
// Easy Functions Library by Fosco

//The following 2 lines determine whether most of your HTML source code ends up on 1 line, the first one makes things easier for others to read.
//$easyread = "\n";
$easyread = "";

require_once('VDL.php');    // virtual data layer object
require_once('VTrack.php');  // vdl enabled cookie manager
require_once('VAccount.php');  //  vdl enabled account manager

function connect() {

	global $db;
	$db = mysql_connect('localhost','user','pw');
	mysql_select_db('dbname',$db);
	
}

/**
 * @return void
 * @desc Outputs opening HTML tag, Title tag, and Body tag, with your selected title and body tag options
 */
function head($title = "Hello, World!",$bodyopts) {
	echo "<html><title>$title</title><body link=#111111 alink=#111111 vlink=#111111 $bodyopts>";	
}

function closer() {
        echo "</body></html>";
} 

/**
 * @return void
 * @param $tcode string
 * @desc Outputs HTML Table code, optional parameter assumes border=0 cellpadding=0 cellspacing=0
 */
function table($tcode = "border=0 cellpadding=0 cellspacing=0") {
	global $easyread;
	echo "<table $tcode>" . $easyread;
}

/**
 * @return void
 * @param $tcode string
 * @desc Outputs HTML TR tag with optional code
 */
function tr($tcode = "") {
	echo "<tr $tcode>";
}

/**
 * @return void
 * @param $stuff text
 * @param $tcode string
 * @desc Outputs HTML TD Tag, both parameters optional.  If first parameter empty, closing tag is omitted.  
 */
function td($stuff="",$tcode = "") {
	echo "<td $tcode>";
	if ($stuff) { echo $stuff . "</td>"; }
}

/**
 * @return void
 * @param $stuff text
 * @param $tcode string
 * @desc Outputs HTML TD Tag and Bold tag, both parameters optional.  If first parameter empty, closing tags are omitted.  
 */
function tdb($stuff="",$tcode = "") {
	echo "<td $tcode><b>";
	if ($stuff) { echo $stuff . "</b></td>"; }
}

/**
 * @return void
 * @param $var text
 * @param $tcode string
 * @desc Does a Table Cell, but closes it even if nothing is passed.
function tdv($var="",$tcode = "") {

	if (!$var) $var = "&nbsp;";

	echo "<td $tcode>$var</td>";

}

/**
 * @return void
 * @param $tcode string
 * @desc Outputs HTML TD Tag with a Non Breaking Space inside, with optional TD commands.  Closing tag included.
 */
function tdnbsp($tcode = "") {
	echo "<td $tcode>&nbsp;</td>";
}

/**
 * @return void
 * @desc Outputs HTML closing TD tag.
 */
function tdx() {
	echo "</td>";
}

/**
 * @return void
 * @desc Outputs HTML closing TR tag.
 */
function trx() {
	global $easyread;
	echo "</tr>" . $easyread;
}

/**
 * @return string
 * @param $name string
 * @param $type string
 * @param $size int
 * @param $value string
 * @param $extra string
 * @desc Returns HTML input tag, Name it, Pick type (text, hidden, checkbox, radio), Size it, Pass either a starting value or to keep it persistent pass the current status of the variable, and any optional code.
 */
 
function input($name,$type,$size,$value,$extra="") {
	return "<input type=\"$type\" name=\"$name\" size=\"$size\" value=\"$value\" $extra>";
}

/**
 * @return string
 * @param $name string
 * @param $rows int
 * @param $cols int
 * @param $value string
 * @desc Returns HTML Textarea tags, Name it, Choose rows and columns, and Pass either a starting value or to keep it persistence pass the current status of the variable.
 */
function textarea($name,$rows,$cols,$value) {
	return "<textarea name=\"$name\" rows=\"$rows\" cols=\"$cols\">$value</textarea>";
}

/**
 * @return void
 * @param $name string
 * @param $action string
 * @param $method string
 * @param $extra string
 * @desc Outputs HTML Form tag, Name it, choose the target of the submit, and optionally, the method and any extra code.
 */
function form($name,$action,$method="POST",$extra="") {
	global $easyread;
	echo "<form name=\"$name\" action=\"$action\" method=\"$method\" $extra>" . $easyread;
}

/**
 * @return void
 * @desc Outputs HTML closing Form tag.
 */
function formx() {
	global $easyread;
	echo "</form>" . $easyread;
}

/**
 * @return void
 * @desc Outputs HTML closing Table tag.
 */
function tablex() {
	global $easyread;
	echo "</table>" . $easyread;
}

/**
 * @return string
 * @param $href string
 * @param $text string
 * @param $target string
 * @param $extra string
 * @desc Returns HTML Link tag, with $text linking to $href.  Optionally, $target specifying the frame, and any extra code in $extra.
 */
function lnk($href,$text,$target="",$extra="") {
	$b =  "<a href=\"$href\" ;
	if ($target) { $b .=" target=\"$target\; }
	$b .="  $extra>$text</a>";
	return $b;
}

/**
 * @return void
 * @desc Outputs HTML BR tag, multiplied by the optional $count parameter
 */
function br($count = 1) {
	for ($x = 1; $x ><= $count; $x++) {
		echo "<BR>";
	}
}

/**
 * @return void
 * @param $options string
 * @param $name string
 * @desc Outputs HTML Select tag with options, Persistent over page submits.  Options parameter can be simply options separated by the PIPE symbol, which will create a select box that passes the option text as the value, or the intended value and the display option separated by two exclamation points.  ie, 1.  YES|NO|MAYBE or 2. 1!!YES|2!!NO|3!!MAYBE
 */
function ezselectbox($options,$name,$extra="",$var="") {

	global ${$name};
	
	$tmp1 = explode("|",$options);

	echo "<select name=\"$name\" $extra>";
		
	while (list($key,$item) = each ($tmp1)) {

		$xx1 = $xx2 = $tmp2 = "";
		
		if (trim($item) != "") {
			
			if (strpos($item,"!!") > 0) {
				$tmp2 = explode("!!",$item);
				$xx1 = $tmp2[0];
				$xx2 = $tmp2[1];
			} else {
				$xx1 = $item;
				$xx2 = $item;
			}
				
			if (${$name} == $xx1 || $_POST[$name] == $xx1 || $var == $xx1) {
				echo "<option selected value=\"$xx1\">$xx2</option>";
			} else {
				echo "<option value=\"$xx1\">$xx2</option>";
			}
		
		}
			
	}
		
	echo "</select>";

}

function center($stuff) {
	return "<center>" . $stuff . "</center>";	
}

function img($name,$src,$extra="") {
	return "<img name=\"$name\" src=\"$src\" border=0 $extra>";	
}

function font($color,$size,$stuff) {
	return "<font color=\"$color\" size=\"$size\">$stuff</font>";
}

function jsinclude($js) {
	echo "<script language=JavaScript src=\"$js\"></script>";
}

function fmmo($name,$img0,$img1,$img2,$href,$linkextra="",$imgextra="") {

	return "<a href=\"$href\" onmouseover=\"document.images.$name.src='$img2';\" onmouseout=\"document.images.$name.src='$img1';\" $linkextra><img name=\"$name\" src=\"$img0\" border=0 $imgextra></a>";
	
}

function style($style) {

	echo "<style type=\"text/css\">$style</style>";
	
}

function stylelink($sheet) {

        echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"$sheet\">";

}

function nlayer($name,$mov,$mou,$stuff) {
	return "<ILAYER><Layer name=\"$name\" width=100% onMouseover=\"$mov\" onMouseout=\"$mou\" >$stuff</layer></ilayer>";
}

function jscript($stuff) {

	echo "<script language=JavaScript>
	<!--
	$stuff
	-->
	</script>";
	
}

function mso($name,$off,$on,$link,$xt = "") {

	return "<a href=\"$link\" $xt onmouseover=\"document.images.$name.src='$on';\" onmouseout=\"document.images.$name.src='$off';\"><img name=\"$name\" border=0 src=\"$off\"></a>";
	
}

function frameset($row="",$col="",$opts="border=0 frameborder=0 marginheight=0 marginwidth=0 hspace=0 vspace=0") {

	echo "<frameset rows=\"$row\" cols=\"$col\" $opts>";

}

function frame($name,$page,$opt = "marginwidth=0 marginheight=0") {

	echo "<frame name=\"$name\" src=\"$page\" $opt>";

}

function framesetx() {

	return "</frameset>";

}

?>

without considering what functionality the extra 3 includes at the top might give you, and ignoring all the nice persistant form functions... what would an example page look like?..

Code: Select all

<?
require('functions.php');

head("Example","marginheight=0 marginwidth=0 hspace=0 vspace=0 leftmargin=0 topmargin=0");            
table();
for ($y = 0; $y <10; $y++) {
        tr();
        for ($x = 0; $x < 10; $x++) {
                echo td();
                        echo fmmo("etcha_$x" . "_" . $y,"black.gif","red.gif","red.gif","#");
                echo tdx();
        }
        trx();
}
tablex();
closer();
?>

Here is what that generates... play the etcha sketch, and then view the source.

forms are persistent.. if you create a form with a link to the current page, the values of the fields repopulate themselves allowing many form interactions like field validation with improved security.

can't finish this atm... will finish later if anyone is interested.

edit:

i think the following older piece of code is a better example..

Code: Select all

<?
require('functions.php');
connect();

head("Design your Floor with Marmoleum Click!","bgcolor=white topmargin=0
leftmargin=0 hspace=0 vspace=0");
br(3);
echo center(img("logo","img/design_your_floor.gif"));
br(2);
echo center(img("room_dimensions","img/please_enter.gif"));
br();
echo "<center>";
form("launchdesigner","designer.php");
table("border=0 cellpadding=4 cellspacing=0");
tr(); td("","align=center");
        ezselectbox("3|4|5|6|7|8|9|10|11|12|13|14|15","width","",10);
tdx(); tdb("X"); td("","align=center");
        ezselectbox("3|4|5|6|7|8|9|10|11|12|13|14|15","height","",10);
tdx(); trx();
tr();
        td("<input type=image src=img/submit.gif>","colspan=3
align=center");
trx();
tablex();
echo "</center>";

Posted: **July 13, 2005, 8:01 pm**

Fash wrote: can't finish this atm... will finish later if anyone is interested.

That's beyond the scope of my Intro to Dreamweaver tutorial!

I agree that someone doing this stuff as a profession should be paying attention to the details.

I'll be asking you questions if/when I attept anything PhP-ish etc.

VeeshanVault

Dreamweaver MC 2004 and Photoshop CS2

Dreamweaver MC 2004 and Photoshop CS2