Web page help

Sean VanGorder

Hello to everyone!

This is my first post here at polycount.

Just a simple question for anyone who has time to answer.

I'm fairly new in the game art and design program here at the Art Institute of Pittsburgh, and I'd like to start my own web page to post all my 3D work and to show my progress throughout my time here.

The thing is, I don't know much about web pages or how to create them, so if anybody has any advice as to how make myself a simple site I would really appreciate it.

rollin

if you don´t want to put a lot of time in leraning html css php andwhatnot i would suggest to make it simple but good

different example pages

simple, not nice.. but still ok

simple but good

make a nice looking framework

pictures are what we want to see

too much work..

one page is enough..

Sage

Do a search for CSS and start with that. With CSS it's fairly simple to format your site. Find out the kind of work you want to do and feature that. If it's characters show that, if it's environments show that of or animation show that off. There is a sticky that talks about sites that repels jobs, read through it.

www.htmlgoodies.com

www.lynda.com have video tutorials. Just pay 20 bucks, cheaper than buying a book, and they will explain how the basics. It's worth it since you have access to all their videos. Then it just a matter of practice.

all you need to do is layout what you want your site to look like in photoshop. I usually just take a piece of paper and section things out and then try it photoshop.

You pick a screen resolution. I don't like to take up the entire width of the screen since I don't like it when websites force you to maximize my browser to properly see them. But in the end the choice is yours. Decide how big your thumbnails are going to be, and you line them up however you want. Then you figure out the code that will make your design work.

Decide the sections your site will have. When I went to school our professor had us define our site into a section that talks about you, for resume, artwork and where to contact you. You can combine it so your Resume, about you, and contact information is all one. If you have awesome 2d work show it off, if you don't, don't, just show your 3d stuff.

Go through the portfolios posted here for ideas.

Sean VanGorder

rollin - thanks for taking the time to post all the examples. they give me a really good idea of what i want the second one is kinda what i had in mind.

sage - thanks for all the tips. i'm a complete noob when it comes to web design and your advice really helps.

thanks to both of you for replying!

BuCC

sXe Seany wrote:

The thing is, I don't know much about web pages or how to create them, so if anybody has any advice as to how make myself a simple site I would really appreciate it.

Then I'd suggest you download a free web design template you like from www.oswd.com and edit it in dreamweaver. It's the simplest way I've come acoss.

Sean VanGorder

thanks BuCC, i'll have to check that out

Richard Kain

I subscribe to the old-school of webdesign. If you can't create a page with a text editor, you aren't ready to do it commercially. Programs like Dreamweaver and its ilk can be useful. But at the end of the day webpages always come down to code. If you can't write code, you shouldn't be in web design. Oh, you can design the layouts for pages without code. But that just makes you a graphic designer, not a web designer.

Table-less design will provide you with considerably greater design options. Learn the basics of CSS, and how it can be effectively applied to <div> elements. Learn the difference between absolute and relative positioning, and how div elements with these qualities can be nested within each other. Learn the basics of writing PHP, as this will allow you to add more interactive elements to your pages in the future. Eventually, learn some MySQL so that you can create your own database.

The quick-and-easy solution to web design will always provide you with fast and dirty results. Web design can be a decently dense subject to dive into. Stick with the basics for getting your first site up. You will need a considerable chunk of time to really push into the more advanced areas.

Sean VanGorder

yeah, i really don't wanna get into too much complexity and detail with the page and its design. i would just like something to put my work on to show the public. and i need my own site for my portfolio in a couple years in order to graduate. so simple is fine for me.
thanks Rich!

Richard Kain

Here's a small hint. One of the basics of most web pages is defining a content area that remains in the middle of the browser window regardless of width. You don't need to take this approach, but it is very common. For instance, the polycount website uses this design. The proper way to achieve this using CSS styles and DIV elements is as follows...

<html>
<head>
<title>Whatever you want your title to be.</title>
<style type="text/css">
#main_container{position:relative; width:920px; margin-right:auto; margin-left:auto; margin-top:20px;}
</style>
</head>
<body>
<div id="main_container">
</div>
</body>
</html>

This bit of code will create your webpage, and will create an area 920 pixels wide that will always remain in the center of the browser. This is a good start for a table-less designed page using CSS. The auto scaling for the right and left margins are how this is accomplished. The 20 pixel margin that I put on the top of the primary element is optional, take it or leave it.

Sage

Richard just tell him how to use CSS to control how the layout of a list (ul) with images is done. I'll look it up and post what I mean if you don't beat me to it. LOL

Alex

Mark Dygert

PhotoShop > File > Automate > Web Gallery, upload to your site, call it a day.

Or go with some easy to use web based pages like wordpress.

BuCC

I agree with Vig. Keep it simple.. unless you want to be a web designer. I'm not saying learning web design is a bad idea, but as you said, you're enrolling in a new school and I suspect you might want to spend your time learning what they teach. Until you get more time on your hands I think it's perfectly fine for you to be a graphic designer ^^.

Yozora

You dont need to learn anywhere near as much as Richard claims you need.

A few hours of googling what you want to do is all you "need" to setup a simple website. If you havent got a few hours then just use something like this; http://www.carbonmade.com/

Richard Kain

(Scoff) Oh sure, you can take some of the easier, pre-made solutions. But then you will be slave to someone else's system. Far better to understand some of the basics and have control over your site long-term.

A major cause for the complexity of web design is the numerous browsers available, and the lack of standardization between them. Cross-browser compatibility and testing can be an absolute nightmare. If you aren't careful, your site can end up looking broken in a different browser. If browser standards had been nailed down properly, web design could have been much more effectively formalized. Instead we have a sloppy mess of standards that you have to trip over while working.

Using CSS to control images isn't too hard. You just have to specify the image element and its properties within a CSS class. Using this in conjunction with an unordered list is quite simple.

#your_class ul {position:absolute; left:0px; top:0px; width:640px;}
#your_class ul li {position:relative; float:left; width:48px; height:48px;}
#your_class ul li img {width:44px; height:44px; padding-left:2px; padding-top:2px;}
<div id="your_class">
<ul>
<li><img src="your_image_address" border="0" /></li>
</ul>
</div>

This should create an unordered list whose items will show up next to each other out to a width of 640 pixels. A normal unordered list is vertically oriented. I'm not certain that this will work, as I've never tried it before. Theoretically any image placed within one of the list items will automatically have a visible area of 44 by 44 pixels, and will have a two pixel padding from any of the other items in the list.

Yep, I tested it, it works.

Mark Dygert

He's trying to learn so much already in such a short amount of time, might as well keep it easy for now and when he has time later he should dig in like Richard suggests and really make the whole thing his own creation. But it is important to remember which job he's going for and what they will be looking at. They won't be viewing the source on his portfolio or dissecting his code unless that's the job he's going for.

However he gets to an easy to load and navigate portfolio is kind of a discussion for another time? At this point, he wants to toss some images up, use it to post and record his progress, it doesn't sound like he's ready to start in on a portfolio yet?

Sean VanGorder

i never knew there were so many ways to create a page. i posted this on game artisans too, and between the two forums i don't even know where to begin, haha. I appreciate the input from everyone though. I think Vig said it best. I don't really have the time to invest in creating a site from scratch right now, however, i would like to do that sometime in the future. That carbonmade.com seems pretty simple. I may end up doing something like that. Thanks to everyone who replied!

achmedthesnake

ahha Richard you code puritan - just wondering seriously, in any web-related job have you had to work without an app like dreamweaver to do your sites? i mean mannnnn arn't they meant to help with workflow and speed - meh

SXE - serioulsy, it's not that hard, keep your doc a xhtml strict and minimise any javascript and flash you want to make yr site look *fancy*, and this'll gurantee that it will work with the majority of browsers potential employers would use....

end of rant

Steve Schulze

I spent a long time looking into this fairly recently, going through all the simple options for building a website without wasting precious art making time trying to learn a scripting language that I'll A. never learn properly and B. very seldom use.

The best I came up with was Behance. The simplified version of the page (Without ads and extraneous, useless features) makes for a nice, clean page which is perfectly servicable as an online portfolio. Here's mine:
http://www.behance.net/SSchulze/frame

There is a lot of snobbery about web pages. It's something I've never really understood. Maybe it harkens back to studying graphic design in uni or some such. Just remember: as long as your art is quickly and easily accessible and presented in a fashion where it's easy to see the quality of the work, it'll do the job. The host really doesn't matter. You can spend lots of time noodling about, but pretty pages aren't going to land you a game art job in anything besides perhaps UI design.

Others will growl and gnash their teeth, but my philosophy is to just get it up there and get back to doing real work.

Sage

you guys see code and think hard... the only reason I didn't post it is because I have to look it up since I don't use it. All it takes is an hour or two to do all the tutorials and learn the few lines of code if you can call it that, to do the site. There is nothing hard about it, after all I can do it. LOL I can easily tell you how to do it the old way with a table but it's so much faster and easier with css it's not worth the effort of writing the html. Anyway if you feel that writing a line of CSS is too hard, open photoshop help files any version of 7 and later and it tells you how to make a website with photoshop and Imageready for rollovers. Doing that is more work than the CSS bit. If you read the tutorials I told you to check it out would take maybe a day tops to understand it, if you don't fall asleep. I used anger to motivate me to learn the darn tags I needed to know. Do I know how to make forms work, no, don't care..... me don't listen.... LOL

Achmedthesnake I have used dreamweaver and notepad. Notepad is faster since you don't waste time going through user friendly interface that slows you down. Typing is way faster. All you are typing mainly is tags, over and over... Javascript sucks with or without dreamweaver soo it doesn't matter... If I was proficient with it I would type it and it would be faster than using dreamweaver.

Jackablade there is a lot of bs with web design. All this extra crap they have going on, but I guess web designers want their "respect"... There are all these new rules and shit required to make the web page meet "the standard". All that doesn't matter for a game artists site, but who cares. Mine doesn't meet the new standard. I miss the good all days

<html> tells browser this is html
<title> I bet you can guess what this does</title>
<body> not going to try to explain but it's needed LOL
I hate html!!!
<img src = "some image.jpg" > that lets you specify the path to where your images are. it tells the browser where to find your images so it can display them

</body>
</html>

end of story... Now you have to write all this extra shit saying what kind of language, blah... blah...so it's proper and standard. I'll see if I write up a quick example by the end of the week. Don't hold your breath though, I hate doing this crap! I don't know why, it just feels like doing the dishes to me, it blows. I might as well, I need to update my site as well.... You don't need to do any magic or anything....

Css that would help

hover command, gives some jazz to the site it's like a rollover... so when your mouse is over something usually text you can change it's properties like color to something else.

you can layer your images with css very cool

you can control how your images tile as well...

be back later...

Rens

you can keep it extreemly simple, or work your ass off to create something insane that is overkill for a portfolio

the way i buildup my site is oldschool and something like this, (in notepad)
takes 10 min to understand

<html>
<body>
<title=rensedeboer>

<center>
<table...>
<tr>

<br>
<br>

<img ....>
<img ....>
<img ....>
<img ....>

<br>

</tr>
</table>
</center>

</body>
</html>

this site has some cool and simple things that will help you out http://w3schools.com/html/default.asp

Peris

Rens wrote: »

you can keep it extreemly simple, or work your ass off to create something insane that is overkill for a portfolio

the way i buildup my site is oldschool and something like this, (in notepad)
takes 10 min to understand

<html>
<body>
<title=rensedeboer>

<center>
<table...>
<tr>

<br>
<br>

<img ....>
<img ....>
<img ....>
<img ....>

<br>

</tr>
</table>
</center>

</body>
</html>

this site has some cool and simple things that will help you out http://w3schools.com/html/default.asp

my website is basically exactly like this. I used to do fancy stuff with css and php but it will only take more time and give you headaches. Keep it simple and live a happy life

Richard Kain

I agree up to a point with most of the posts in this thread. It is true that web design can be a headache. In fact, it can be an outright migraine. And no, a beginner who isn't that concerned about web design doesn't need to learn everything. Just working with an existing pre-built solution will get the job done for the time being.

The reason why I am so particular about this is because it is my job. I don't work in game design or game art. I would like to, but I don't. So when I got out of college, I started working in web design, because I could at least find a job doing that. And now I am proficient enough at web desgin that when someone asks, I have the answers.

Achmedthesnake, yes, actually. I HAVE created entire web sites using nothing more than a code editor. In fact, that's become my MO for most web projects I take on by myself. If I ever do use DreamWeaver, I close the Layout view and just use the Code Editing window. For one of my former employers, I designed and built an entirely Flash-based website using NotePad++ and a command-line compiler. If you want to design web-layouts, you need a copy of Photoshop. (or whatever image / layout editor you favor) If you want to design web sites, you need to know how to code them. Dicking around with DreamWeaver will only get you so far. (and result in some piss-poor site structure)