PDA

View Full Version : web design


name
12-10-2003, 08:22 AM
Not sure if this is the correct forum or not...if not sorry...I just got some webspace and wanna teach myself to make a site.My problem isn't really design aspects so much it's more the actually getting my designs to work as a webpage.Are there any good links you know of that might point me in the right direction?I don't expect a handholding session but just something to get me started.Basically I wanna design it in photoshop and use golive and image ready from there on.One question I had now was I have this partial layout for a homepage...i took it into image ready and did some simple rollover stuff to it but when I view it in IE the page isnt centered...it's stuck to the left side of the page....is there a way to center it?The size I'm working with is 1024 x 768 which I'm not even sure is a good size to use to be honest.I just need something to get me started basically...any help would be greatly appreciated.Thx in advance.

theGuest
12-10-2003, 01:48 PM
Hiya...

Couple things to mention i have.

1) Google is a great search engine, look what i found: www.w3schools.com/ ;)
Here's a good one also: www.sitepoint.com/

2) Don't use 1024. The average puter user/surfer today runs in 8x6 display mode. But don't use 800px as your full width. That will not work. Because of the browser scrollbar and window borders, you should only go as high as 770px to be safe. And that doesn't include Macs who's resolutions are slightly smaller than a PC's. I usually use 760px max.

A full screen of type/pictures at 1024 will be hard to digest.
Anywho... i'm telling you things you could be learning yourself at the site i posted.

If you're using GoLive with PS & IR then you should have little problem making things work. Those apps work well together. Be sure to read the PS HELP! files too to learn how slicing will create your main bulk of html code for you. Open the HELP! files and do a search for "Webpage Design". After the slicing process, the design can then be tweaked to perfection in GoLive.

As for the centering of the design in the browser... you can't work on that type of coding with PS/IR. Wait til you have the sliced design in GL then center align the main table contining your page content.

Hope that gets you started.

:bounce:

name
12-10-2003, 03:02 PM
Thx very much for the reply...those sites are looking extrememly helpful...I just wanna make pretty pictures and not mess with code though...haha.

bumskee
12-10-2003, 08:47 PM
golive?? is that like the equivalent of DW with adobe? Never tried it. DW is also good!!!!

well, the guest already mentioned few things, google is a place to start! also 800X600 too. THe thing is what you see on your browser might not be what everyone else sees, the web page is browser dependent. So you can do a real slick kick ass web design but if some people can't see the damn thing it will be a great SHAME!

Thx very much for the reply...those sites are looking extrememly helpful...I just wanna make pretty pictures and not mess with code though...haha.

We all wanna make pretty things and not mess with the ugly stuff or leave it to some html geeks. But the truth is those ugly codes are part of web design. You would at least need some knowledge as to how html and web pages work.

singularity2006
12-10-2003, 10:38 PM
with regards to resolution
Dreamweaver, as well as most developer apps have options to set that define the physical dimensions for the site based on screen resolution. For 800x600, the actual size of the page cannot be larger than 760x420, no scrolling.

with regards to everything else
The way I generally start a web project is I take a screen shot of IE full screen, then paste it into Photoshop. I clear whatever page is there and begin designing my page in photoshop. When I have something that looks nice, I recreate the thing, but in a clean new file @ 760x420. I begin designing my menus, banners, and content such that it will look the way I want it to on initial load, rather than through scrolling. When I'm done designing it, I start slicing it and begin my work in Macromedia Dreamweaver MX.

Your greatest tool when it comes to really nice and compatible site design is the table! Always remember that. It has great flexibility if you know how to use it right and it will give you superior control of your design elements everywhere. Surely, there are more powerful tools, such as dHTML, but when you are designing a page with compatibility in mind, the table is the way to go. And be careful with using flash or any other fancy nick nacks here and there. Depending on the content you are design, it may be appropriate. In other cases, it may not be. I design pages that are generally viewed on lower end browsers and systems. Similarly, I have to take into account federal standards for accessibility (a real pain sometimes though because it does get complicated). But yeah, screen readers and other technologies are something to be aware of if you are developing a site that you expect to have a very broad user base.

Anyhow, that's just my two cents. Good luck to yah. :beer:

theGuest
12-11-2003, 07:12 AM
The way I generally start a web project is I take a screen shot of IE full screen, then paste it into Photoshop. I clear whatever page is there and begin designing my page in photoshop. When I have something that looks nice, I recreate the thing, but in a clean new file @ 760x420. Yes... excellent advice. This is also something i do as well. But i use XaraX for my initial design layout, and only have a shot of the browser in the 8x6 resolution. Vectors are much easier/quicker to work with for the initial layout/design stage. Then, once the basic design/layout is cemented, i export as PNG, open in PS, and finish up the design aspects there.

Good stuff. :thumbsup:

:bounce:

Leovenous
12-12-2003, 05:09 AM
Well I don't think for a moment I know more than TheGuest or Singularity, but here is my take:

Of all the people I know, only one has an 800x600 monitor. So I feel no shame in shedding that old convention. I am making my next site 1000px wide. But I also don't like making people scroll down, so it is very shallow.

I wouldn't call GoLive the equiv of Dreamweaver. I would say GoLive wishes it is the equiv of Dreamweaver.

I agree about tables. Their great. :thumbsup:

L.Edy
12-12-2003, 06:08 AM
mmm, u may just select the table in dreamweaver, then set the placement to center.
i mean select the whole table.
^^

name
12-12-2003, 07:46 PM
Originally posted by L.Edy
mmm, u may just select the table in dreamweaver, then set the placement to center.
i mean select the whole table.
^^

Hehe...i don't even know what a table is...like I said...I'm a complete noob when it comes to this...heres a start for a homepage i was working on...done in PS and IR...no slicing or anything yet...and its jpg with 60 quality...a friend said the rollovers were laggy...there fine to me but what do you guys think?How can i reduce the size without making it look like crap?I'm guessing slicing it would help but I don't really know...lemme know...thx.

http://s91352614.onlinehome.us/website2.html#

name
12-13-2003, 01:29 AM
i noticed that when you go over the rollovers its dling them every time instead of caching them so if you roll over them real fast its laggy...how could i fix that?

name
12-13-2003, 01:41 AM
ive been posting on another forum and they keep telling me Imageready creates crappy code and is worthless...is this true?

L.Edy
12-13-2003, 03:58 AM
emmmmm,
for table,
if u create a lay out image using photoshop or other graphic softwares, then u slice all of the image into smaller pieces ( u may do this step in photoshop or fireworks .. or maybe other softwares) then when u save your work into html extension, u should have your images put in table using html code ( this is done by the software u use for slicing ).

i think its fine to save your images in JPG or GIF in 60 quality,
just remember that if u want to create a roll over image, try to be efficient for the roll over image size,
to create rollover images, i recomend u to use dreamweaver.
choose the "preload image" option.

u can see a little use of rollover images for menus in my site also,
www.sawamura.tk

singularity2006
12-13-2003, 06:46 AM
Okay, don't take it personally, but I think you abused the use of the drop shadow, bevel, and emboss..... it looks... very "busy."

Anyhow, you're on the right track with your use of image sections and tables. However, you could use a bit of work with regards to size. In a lot of corporate or large campus networks that I have been to, their computers are clones on a network and use some really generic settings including a resolution no higher than 800x600. I really think you should use that as your standard. A lot of schools and libraries in the bay area still use 800x600 resolution for people with poor eye sight. Shrink the max width of your site to 760px. and design your side navigation to be no taller than 420px. In doing this, people using an 800x600 resolution, with a maximized browser window, will see your site navigation in full without the need to scroll about. If there is content, it'll be fine to scroll. Another option might be to embed the content into a single table cell and set that table cell to scroll such that your banner and your side nav is always in full view. And even with a 1024x768 resolution, something about the design as a whole looks too big as if it were trying to burst off the screen.... shrink things! your users will be happier, I am sure. =)

And as for the background..... that's very dark and will be difficult to manage text over. However, if that background area will only feature images and thumbnails, I guess it should be okay. But it is a bit too intense and draws too much focus to it and away from your design as a whole. Having good site functionality also means knowing how to draw the user's attention to the center of focus and knowing how to alternate color intensity or image color saturation to move their eye.

And the drop shadowed edge as a whole .... It's really distracting. I personally dislike pages with blurred edges strait down the left side, since that is where the majority of the text usually is. It gets hard to read the text with that shadow there.

Anyhow, there are quite a few tricks u can apply to make your site better. Hard to explain here, but what you will experience is the following. If you were to start putting thumbnails and text into your content area where that background is, how far can you go? You will reach a limit as a result of the image border you set for yourself @ the very bottom of the design. That might be difficult to work with. However, slicing images correctly and setting table heights as %'s instead of absolute values will help. I often design tables such that they use a combination of % values as well as absolute pixel values so things span nicely over the window and don't clip it funny places.... hmmm ah so much detail. But you'll have a lot of fun messing with the code, I am sure! :beer:

Have fun!

name
12-13-2003, 10:04 AM
Okay, don't take it personally, but I think you abused the use of the drop shadow, bevel, and emboss..... it looks... very "busy."

I'm not sure if you're talking about my site or the site posted right above your post...I didn't use any bevel and emboss...bevel and emboss...lol...The bubble thing was done with some inner glow to darken the edges then i made the glares myself...the inset shading is done by "hand" as well with a layer of white and a layer of black blurred and moved into position to make it look inset.I'm not a big fan of bevel and emboss really...

Also my site is gonna be a portfolio type of site displaying art so I'm not really concerned with making it display properly on a 800 x 600 res monitor...I'm not selling anything so if they can't view it without scrolling I don't really care.I may end up shrinking it maybe to about the width of this forum which I believe is 900 px.Also the dark background?I don't get how that would be hard to see text over...even though I'm not putting any text there to begin with.This is my first attempt at doing this so really I'm just experimenting right now.I'm not upset at your comments or anything...I guess I just see it differently is all.





Here's an update I'm working on...not done...and try not to laugh too hard at my n00bness at web design :)...any ideas would be great...tell me how long it takes to load and all that...does it seem efficient to you?I know the links aren't actually linked but do the rollovers seem to work nicely to you?Are they laggy at all?

I've got a massive headache from screwing with it and trying to read about web design.

Also I had a question about CSS...I noticed Imageready can output CSS and you could designate where your content lies on the page...absolute or relative...I tried to get it to make my page centered and stay in the center if you resize the browser but as you can see I couldn't quite get it to work...any ideas on that?Thx again.

http://s91352614.onlinehome.us/#

singularity2006
12-13-2003, 04:44 PM
yeah, the area around the ovalish bubbly things look like bevel and emboss.

Anyhow, as for the text, here's the issue. What color will you use? As the text runs from the top of the page to the bottom, the background goes from white to black (or rather, bright to dark). In that case, if you use white text, it'll be difficult to read half way through, or black, it'll be difficult to read half way through.

But yeah, I'd really recommend getting rid of all the drop shadows... they're really overpowering the design as a whole. I think it would look much nicer if you used a gray (grey?) line outline instead. Use hex #CCCCCC and use that to outline the shell of the design.... but get rid of that drop shadow. Try it. You'll see a big diff.

Oh yeah, ImageReady does produce crappy mouse over code. I don't really like Dreamweaver's either. They both produce funky results depending on the browser you use. Depending on your version of Dreamweaver, I think it switches over to dHTML instead of JavaScript; in that case, you should be good to go. Go to www.dynamicdrive.com and go through their scripts. There is one nice script in particular that does mouse over fade ins and fade out.... very spiffy.

And I really would reconsider the 800x600 issue. To most standards I work w/ you gotta be within that. You never know which employer might happen to be using 800x600. A lot of companies have design departments sure, but within each department, you may find that the person looking for the new employees are not the designers but some HR guy that is blind and must use 800x600 resolution. And when they pull up your site, it will look big big big and require lotsa scrolling - quite a chore.

And with regards to CSS
I don't like relying on CSS for simple layout issues. The code gets somewhat harry when dealing with it and there are still compatibility issues. I usually design my site to have as much support as possible for basic HTML and then I add the dHTML stuff in smaller sections that don't have heavy impact to the site as a whole if they don't work. Anyhow, here's what u do:

<table border="0" width="100%" height="100%"><tr><td align="center" valign="center">

<table><tr><td></td></tr></table> <--- this is your actual table with your site design.

</td></tr></table> <--- this table is used to center your above table. Regardless of how you change the browser window, it will always be centered. And as for CSS, I would recommend a book called "Visual Quick Start to CSS" ... can't remember the author. But it's part of the "Visual Quick Start" series. Have fun! :beer:

name
12-13-2003, 09:20 PM
Man I really appresciate your help...but I can't figure out where that goes goes exactly...or what it replaces in the original code I have...I R Noob.

singularity2006
12-14-2003, 04:04 AM
it goes into the body of your code.

A generic HTML page looks like this

<html>
<head><title>Title Goes Here</title><javascript>JavaScript stuff goes here</javascript></head>
<body>

web page goes here w/ all format coding etc

</body>
</html>

Just stick the code from the previous post between the body tags and work from there. You'll see how it works soon enough. And another good way to see is to find a simple web page designed by someone else and read their code.

Stroker
12-14-2003, 04:20 AM
This is what got me on my way to learning HTML:
http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html

It's not that hard and nearly essential to know at least a little bit of code.

theGuest
12-14-2003, 08:00 AM
ive been posting on another forum and they keep telling me Imageready creates crappy code and is worthless...is this true? No, that's completely wrong. ImageReady doesn't write complicated enough code to screw it up. It writes only the most basic code needed to do what it's supposed to; according to what YOU tell it to do.

Now if IR could write CSS or Dhtml, THEN folks might have something to complain about. But raw, simplistic, basic html... no way.

:bounce:

eevilmouse
12-15-2003, 04:58 PM
Imageready's Code is Crappy if you look at it from a Coders point of view. It dosnt do things as simply as a human could, but then no WYSIWYG editer does. That being said, Imageready does Decent code for a WYSIWYG editer, In some ways I think it is better than Go Lives Code (though Go Live can do more complicated things). If you plan on useing an Editor, the Best out there is Dream Weaver. Stay away from anything Microsoft when you are trying to do HTML, they do not write for Crossplatform.

On Design- I would also Recomend removeing the Drop shadows from the Buttons, But I would say Move the button background so it has a Drop shadow. This way you have some depth in the Picture, but its not to busy with all the buttons.

CGTalk Moderation
01-16-2006, 08:00 PM
This thread has been automatically closed as it remained inactive for 12 months. If you wish to continue the discussion, please create a new thread in the appropriate forum.