Web Design

[igufed]

This is what I got from what I read.

http://igufed.com/test1

Basic concept here is having the image and text in a div that spans a certain area (in this case, 100% of the screen).  Then, float the image to the right using 'float:right;' for the id of the image.

The container div is set as 'width:100%;' and the image id (arch) is set as 'float:right;'.

[darkflash]

I am actually taking it right now. I'm doing my semester final where you make a website with a partner. If it's anything like my class you should just be familiar with photoshop and dreamweaver.

[sayers6]

Thank you very much, Igu. That is exactly what i needed.

@Darkflash we don't touch Dreamweaver until next semester, seeing that it is rather important to know how to code by hand. We have to make our own HTML and CSS files. I refuse to touch Photoshop, because I can't use it worth a damn. We've already made 3 websites by ourselves, and several web pages.


@Scotty and Igu, You're supposed to use CSS ONLY in a .CSS correct? My teacher had us put HTML at the top of it. Bugged me like hell because I had heard that you weren't supposed to.

[igufed]

My thought/experience is that you keep CSS in the style sheet (.css file), HTML in the .html, javascript in your .js file. This rule doesn't apply to php/asp.. you can (and most likely will) definitely have php/asp + html in your .php or .asp files, just as an fyi for later if you learn those.

I don't know the harm (if any) if you have html in your css file, as I've never met anyone who does that..

As for Dreamweaver or any other WYSIWYG applications out there, I think you need to have a very good foundation in html/css before you start even thinking about trying out those. 

This is just personal preference here, but I like to have complete control over what I'm making.  I feel Dreamweaver and the like take most of the control out of my hands.

[Scotty]

@Scotty and Igu, You're supposed to use CSS ONLY in a .CSS correct? My teacher had us put HTML at the top of it. Bugged me like hell because I had heard that you weren't supposed to.

That's correct, when you use <link> you have to specify rel="stylesheet" in it, so the browser interprets it as valid CSS, since javascript is entirely different, it'll bork the CSS.  Same goes for using the <script> tag, it'll bork your javascript.  What HTML did she have you put in it?  Did it bork the page?

When I first started screwing around with web design, I used Dreamweaver, but quickly grew frustrated with it, as I'd often go in and start doing what I could do with a plain text editor, and it liked to add in a lot of bulk comments, inline CSS/Javascript, and if I tried to embed PHP in the files, it would entirely screw up the design.  Got to be a bit too frustrating for me.  Now I just use vim for all of my work, and have 4-5 different browsers open and a finger ready to hit Ctrl-R.

[sayers6]

So is Dreamweaver CS5.5 worth the $140? Or should I just stay away from WYSIWYG programs? Or are there any good ones?

[Scotty]

So is Dreamweaver CS5.5 worth the $140? Or should I just stay away from WYSIWYG programs? Or are there any good ones?

I can see WYSIWYG editors as being a valuable training tool for designers who aren't too solid on CSS and would do better if they saw the code dynamically update as they manipulate the design through mouse clicks, but I've never made heavy use of them.  I guess I'm old school where I'll supplement heavy usage of the vi/gvim editors with an extra-large side order of Alt-Tab and F5 mashing, but that's my preference.

I would say though, at least from my financial position that $140 isn't a whole lot when considering Adobe's other prices, as well as the application's potential.  If you had to pick a WYSIWYG editor, Adobe Dreamweaver would probably be the best.  I don't know of any open source editors that compare in capabilities to Dreamweaver, but then again, I haven't bothered to look either, so I may be wrong.

Don't recall if I've mentioned this before, but if you aren't too spun up on CSS and need some good literature, I'd recommend the following two books:
http://www.amazon.com/CSS-Mastery-Advanced-Standards-Solutions/dp/1430223979/ref=sr_1_1?ie=UTF8&qid=1326387910&sr=8-1
http://www.amazon.com/Book-CSS3-Developers-Future-Design/dp/1593272863/ref=sr_1_2?s=books&ie=UTF8&qid=1326387933&sr=1-2

The first will get you introduced and well versed in common (and not so common) usage of CSS, the latter will show you were CSS is going in its next version, and do a spectacular job of accommodating all the browsers capable, as well as explaining all the compatibility issues with each.  Both are excellent reads that aren't overwhelming in size, and great for reference as well as educating.

My coworker did a good write up of the latter book referenced above:
http://patorjk.com/blog/2011/06/27/the-book-of-css3-book-review/

[sayers6]

I might actually get it in the near future, seeing that i can get the student addition rather cheap. Does it generate a lot of the useless crap code like Microsoft Word does when you use it? Where in hidden code, it lists all sorts of different things about Word, and the person who registered Word? We used that crap today in class and the code got in the way so much I couldn't hardly edit anything manually without screwing something else up it seemed. Then again it created a XML file, and a bunch of different non-CSS pages I've never seen or used before. I'm just wondering if it's nice and clean like normal CSS, JS, XML, and HTML files, or messy.




Also: Dreamhost vs Hostmonster? Which is better and why? I need cheap but reliable.

[Scotty]

I might actually get it in the near future, seeing that i can get the student addition rather cheap. Does it generate a lot of the useless crap code like Microsoft Word does when you use it? Where in hidden code, it lists all sorts of different things about Word, and the person who registered Word? We used that crap today in class and the code got in the way so much I couldn't hardly edit anything manually without screwing something else up it seemed. Then again it created a XML file, and a bunch of different non-CSS pages I've never seen or used before. I'm just wondering if it's nice and clean like normal CSS, JS, XML, and HTML files, or messy.




Also: Dreamhost vs Hostmonster? Which is better and why? I need cheap but reliable.

From what I recall with using it back half a decade ago (I think that was CS2 or 3?)  was that it was good about keeping things clean.  I can imagine that if it was good about it back then, it's good, if not even better about it now.  I do recall it adding a lot of comments in the CSS and a few in the HTML.  I don't know about Javascript since I wasn't designing that much with Dreamweaver, but I do recall how you would have two pains to work in, one for straight code, another for your WYSIWYG editor.  Update one, and the other dynamically updates.  What I would like to see of it, is some sort of compressor for Javascript, CSS, and HTML.  Design it as you please, however you please, but as soon as you go to deploy to production, have it compress the code down to one line, and output it.  That alone cuts down on your page weight so freakin' much.  Add on some server side gzip compression and your page weight could very well be under 100k.  That and good mobile development capabilities. 

My main concern, and maybe this is a non-issue with their newer versions, is browser compatibility.  There is no way their one WYSIWYG editor is going to act like all the different browsers all at once.  Maybe you can toggle between browser modes, but I doubt it's going to have that support for IE, since it's proprietary.  I recall still having to jump out to Firefox, IE, Opera, etc... to see how the CSS would cooperate with all the browsers.  I'd suggest doing some research before purchasing it, see if it fits your needs, or if it's just a convenience that you can save yourself the money on.

Also, Dreamhost.  Hostmonster seems to have intermittent hiccups (this site being a good example since it's hosted with Hostmonster) as of late.  Dreamhost offers so much more and I haven't had any issues with connectivity like I've had in the past with Dreamhost/Bluehost.

[sayers6]

Also, Dreamhost.  Hostmonster seems to have intermittent hiccups (this site being a good example since it's hosted with Hostmonster) as of late.  Dreamhost offers so much more and I haven't had any issues with connectivity like I've had in the past with Dreamhost/Bluehost.

I'm going to assume you mean Hostmonster there, but anyways good. Cause I was planning on using Dreamhost and helping out igu by using his referral thing.  I'll do some more research on Dreamweaver, seeing that we're about to use CS3 in class. I finally get to get my feet wet with JavaScript which I've been waiting for. :D

[Scotty]

Also, Dreamhost.  Hostmonster seems to have intermittent hiccups (this site being a good example since it's hosted with Hostmonster) as of late.  Dreamhost offers so much more and I haven't had any issues with connectivity like I've had in the past with Dreamhost/Bluehost.

I'm going to assume you mean Hostmonster there, but anyways good. Cause I was planning on using Dreamhost and helping out igu by using his referral thing.  I'll do some more research on Dreamweaver, seeing that we're about to use CS3 in class. I finally get to get my feet wet with JavaScript which I've been waiting for. :D

You are correct in your assumption.

Honestly, Javascript is going to frighten you at first.  It's unlike many (if not all) "common" programming/scripting languages out there.  It uses prototypal inheritance, doesn't support traditional object oriented programming like Java, yet allows for classes and many constructs of OO programming, it can be perceived as a mess at first.  Once you get your feet wet though, and you do some heavy research on how to use it, it is really, and I do mean REALLY powerful.

I don't often say this about libraries/frameworks, but get into jQuery as soon as possible.  I often tell folks to at least have a decent understanding of the language before they start using shortcuts through libraries and frameworks, but jQuery is the one exception.  The problem you're going to encounter without it is that every browser has its own way of incorporating many different javascript methods.  Instead of trying to do all of them by hand, screw it, and just use jQuery which will handle a lot of the low level compatibility issues for you.  Don't fight it, you won't win.  Even if you do "win" though, you'll have wasted so much time that you could have spent elsewhere.

If you want good literature.  O'Reilly provides a lot of great books on things like Javascript, CSS, HTML, everything.  If you want the frightening large, yet all inclusive Javascript bible, try:

http://www.amazon.com/JavaScript-Definitive-Guide-Activate-Guides/dp/0596805527/ref=sr_1_1?ie=UTF8&qid=1326434902&sr=8-1

It'll likely work out better for you as a reference book, more than a book to read from cover to cover, but it has everything, and is widely regarded in the web development community as the standard to which all other Javascript books are compared to.

EDIT: Also, if you buy Javascript literature, search Amazon for highly rated and new books.  Javascript is one of the most quickly evolving languages out there.  New stuff is getting added monthly, and honestly, something from 2009-2010 is considered old for Javascript.  It's one of those intimidating factors.  Try to go as recent as possible.

[sayers6]

Ughhhh ran into a speed bump, is there no way of doing dreamhost by just monthly, rather than a year of pre-pay?

[Scotty]

Ughhhh ran into a speed bump, is there no way of doing dreamhost by just monthly, rather than a year of pre-pay?

Not that I've seen.  I should have mentioned that before, as it did cross my mind when comparing the two.  Dreamhost requires payment up front for one year, while Hostmonster will accept monthly payments at a higher cost than buying one year up front.

[Scotty]

For the designers that would love to see what what WebGL can do, and actually have it help out with design, check out:

http://hacks.mozilla.org/2011/07/tilt-visualize-your-web-page-in-3d/

[sayers6]

Anybody know anything about Microsoft expression? I have to use it for a contest, and can't supplement it with anything else :/