• Some users have recently had their accounts hijacked. It seems that the now defunct EVGA forums might have compromised your password there and seems many are using the same PW here. We would suggest you UPDATE YOUR PASSWORD and TURN ON 2FA for your account here to further secure it. None of the compromised accounts had 2FA turned on.
    Once you have enabled 2FA, your account will be updated soon to show a badge, letting other members know that you use 2FA to protect your account. This should be beneficial for everyone that uses FSFT.

looking to do web design again, need help.

A

amdownzintel

Limp Gawd
Joined
Oct 24, 2004
Messages
201
So I've been asked by a few of my friends to make websites for them and I used to do it a lot in the past, but that was when most people used frames and things were very basic. I want to learn it all again so I'm not sure where to even start anymore.

The programs I have is iWeb(have a mac) and I have Dreamweaver CS4 with photoshop.

I'm curious how people even start to design a website now so does anyone have any tutorials, ideas, books I should buy?

Any info would be very helpful, thank you.

-Most websites will be basic and I would like to learn CSS it looks to be very nice, but also I keep hearing about html5 as well.
-In the end I wouldn't mind making a website that is pretty complex such as having a working shopping cart and all that stuff.

Thank you.
 
Learn CSS and HTML for a very good foundation for more basic websites (though they still can look great). Most of the other more complex stuff like XML, PHP, SQL, etc. gets to be more when you are doing things that are more advanced.

You can still integrate some of the more advanced stuff in snippets though if you have to (like forms and such) by following tutorials online.
 
Couple approaches...
1 - Start off with Photoshop to make the template, and slice as needed. Easier to tweak/update in Photoshop during early stages. Slice and split out among CSS sheet and supporting imagery.
2 - Find a free template online. There's also a ton for a reasonably inexpensive charge. Adjust however needed. This may give a quicker ramp-up to getting it online if you have a limited calendar timeframe.

Though I'd also want to know if this was a purely static site, or has any dynamic content or data-driven qualities. That might influence your design approach and tools used.
 
the websites designed will be used mostly just for simple text. Just simple layouts with nothing really important on them other than a basic easy to read layout and links.

Though I personally would like to learn how shopping carts work and all that stuff. I've used photoshop before to slice websites, but I've never understood after that how you incorporate CSS into that.

So when I cut and saved the website it's just one picture being displayed. So how do I put text over the image?

-------
| |
| | <--- text then over an image besides a link, like say the main content of a page.
-------

ok that was a terrible attempt of what a pic would look like, but say in the middle of the page is where I want text to go and I draw just a box or something using photoshop. I then slice that box, but how then using html would I write over that image?

ok here's a better sample, made this real quick

http://www.amdownzintel.com/images/template.jpg

should give you a better idea of what I'm talking about.
 
Last edited:
Saying all you need is a page with links, some lists, etc. sounds simple enough. But I haven't seen anything concrete to support this. In fact, I've seen the start of something bigger (even barring the desire to pickup an E-comm package). What you're asking for are simple CSS concepts, but keep in mind that this is new material for you. And I feel that pointing you toward the "float" and "background" keywords and suggesting to Google "CSS column layout" concept might have you biting off more than you can chew at this specific moment.

I'm going to reiterate my suggestion regarding delivery timeframe. If you're under a calendar time limit, then find a freebie or nominal-costing CSS template. Google is your friend for this.

If you're not under a calendar limit, then you got some reading/tinkering ahead of you. Hit up Borders and supplement with some Google searches. W3C Schools is also a good supplemental site. Re-evaluate your delivery timeframe after you've gotten your hands dirty and have something working. If you think you can still meet it, then press forward. Otherwise you have an alternative.
 
Most of my web design i do, i start with a few sketches on paper then jump straight to the HTML/CSS just depends on the style of the website you are trying to make most of mine are minimalistic.

Two great resources i've found help full are
CSS Tricks http://css-tricks.com/ and
Nettuts http://net.tutsplus.com/

and for quality Wordpress themes and html/css templates i would highly recommend http://themeforest.net/
 
There are also "Dummies" books for this kind of thing. I've read more than a couple in my life and they offered a lot of good insight.
 
If you want to pursue this properly, then drop the Photoshop slicing and WYSIWYG tools for now and learn how to do the basics by hand. When you know what the code is actually doing, it will make tools like Dreamweaver a LOT more useful and powerful.

There are tons of sites out there that will teach you the basics. I like to recommend http://www.w3schools.com, but I'm sure others have their favorites. It wouldn't hurt to buy an actual book, so that you'll have a structured learning experience instead of Googling your way through it.

You should be able to grasp XHTML basics over a weekend. CSS is kind of like chess, it's easy to learn the basics, but mastering it completely can take months or years. For what you're proposing right now, a basic understanding of CSS should be fine.

Don't worry about HTML5 right now, just concentrate on the established HTML4 or XHTML 1.0 specs.

Today's web is highly dependent on scripting languages for both the UI and back-end stuff. The days of the purely static web are long gone. So you'll eventually want to pick up some Javascript/AJAX for front-end (user-interface) stuff, and a scripting language (ASP.NET, PHP, Ruby on Rails, etc..) as well as SQL for communicating with a "back-end" database. But that's way down the road right now, don't start messing with these technologies until you have a very thorough understanding of HTML and CSS first, otherwise you'll just drive yourself insane!
 
amdownzintel said:
So I've been asked by a few of my friends to make websites for them and I used to do it a lot in the past, but that was when most people used frames and things were very basic. I want to learn it all again so I'm not sure where to even start anymore.

The programs I have is iWeb(have a mac) and I have Dreamweaver CS4 with photoshop.

I'm curious how people even start to design a website now so does anyone have any tutorials, ideas, books I should buy?

Any info would be very helpful, thank you.

-Most websites will be basic and I would like to learn CSS it looks to be very nice, but also I keep hearing about html5 as well.
-In the end I wouldn't mind making a website that is pretty complex such as having a working shopping cart and all that stuff.

Thank you.
Click to expand...

I normally build the layout and design in photoshop, splice the images and begin exporting it. I use Visual Studio 2008 to put the site together, mainly because I do ASP.NET dev. but even when I don't - I still prefer VS2008.

Learn CSS like the back of your hand, understand DIVs and tables and when and when not to use them.
 
Forget the old way. Learn CSS and use Drupal or Joomla and you'll be a pro in about 2 weeks.
 
Earley said:
Forget the old way. Learn CSS and use Drupal or Joomla and you'll be a pro in about 2 weeks.
Click to expand...
That's funny... To be a "pro" in Drupal or Joomla with CSS, you'd still have to understand "the old way". :rolleyes:
 
Earley said:
Forget the old way. Learn CSS and use Drupal or Joomla and you'll be a pro in about 2 weeks.
Click to expand...

There is some merit to this advise. Content Management System (CMS) tools like Drupal, Wordpress, Joomla, etc.. are excellent turnkey solutions to getting a full-fledged website up and running in very little time with very little experience.

However, if you want to pursue web development as a career then just knowing a CMS isn't going to get you far. There is a LOT more in the web dev world besides CMSs.
 
thanks for all the replies. I've been reading a lot lately.

I made this website just trying things and see how they look. There is actual content on my end of the pc that I have yet to update, but you understand the look.


www.amdownzintel.com/thepctechstop

tell me what you think, thanks

Also that was made completely through iWeb.

Again thanks for all the help so far, I'm still trying to figure out what apps I want to use and still learning all about CSS.
 
Looks very rough. I can't tell what is placeholder and what is real. Are those images going to be on the live site?

If you want to get some good subjective analysis, then you'll need to present a version with realistic text/imagery/style/content. As it is right now, there's nothing more than preliminary CSS and niche geek fanfare.
 
I would suggest just reading the w3c schools tutorials and work your way through a few. then just keep the css2 reference open and play around.
 
Just my 2 cents on this to help you out.

To start, open up Photoshop (contrary to what some people say, I think this is an essential step). Take a screenshot of a blank page in your browser if it helps you visualize. But you want to layout your page exactly as you want it to appear. Use layers, start creating basic logos or whatever else you feel you need. A sample layout that I've done is here (this page does not exist yet, I'm currently coding it):

newlayout2.png


The point of the whole photoshop exercise is 2 fold. First, it forces you to visualize your website as you want it to look. Not just a mockup, but a solid look of what you want the end-product to be. Second, it allows you time to create logo's and some assets that you will use in the final product. You can play with different design elements without ever touching 1 piece of code.

Once you've created this layout, you need to isolate what you think are the key design elements of your page. On my sample, I found the following:

Header, Image Rotator, Primary Navigation, Secondary Navigation (Game Specific), Events, Blog, Forum, RSS News, Vent Server, Ad Space, Footer (not shown), Body (the entire page), Wrapper (your central content area).

Now all you need is something simple like Notepad or a plain text editor. Using reference at w3schools.com is a good place to start picking up on common web languages. XHTML is a great language for laying out webpages, but you can choose what you like. In general, you'd just lay out your basic page with a div tag for each of the key design elements you've noted. You'd start with a body div with a nested wrapper div. You'd also start throwing in any javascript or other things you'd need (like the image rotator in my sample).

Once you're done, you're gonna end up with a web page that's pretty much a white background with a bunch of text/content elements going straight from top to bottom without much structure.

Now you put your layout together with CSS. This is when the site really comes to life. You can use something like the Firefox Web Developer Toolbar to do it in real-time or you can just make adjustments and load your page to see how they go. It's really a matter of preference. This is probably the trickiest part. You start by styling your body and wrapper divs to set up your general look and feel with your background etc, then you can start styling individual elements, messing with placement and sizing, etc. You will play with your CSS, adjust your layout a bit. It will take some time, but once you're done, you'll pretty much have a functional page (assuming no CMS or active content).

This is by no means a fully fledged guide...but it can serve to be a good starting point =).
 
You must log in or register to reply here.
Back
Top