| Asher Genius is not born , it is made....
Profil: Moderator | Currently working on the design of my first site 
What do you think?
Suggestions will be greatly appreciated  ---------------
Igloo <---> DeviantArt
| |
uttaresh The Penguin Master
Profil: Penguin Pro | It's a very good start.
About the background, it has a gradient. Keep in mind that your BG should be repeating, either horizontally or vertically. The aim is to minimise the size of the page as much as possible.  So linear and reflected gradients are OK, radial are not.
I don't know if this is a personal or professional website, but there is plenty of informal language or slang being used. 
The colour scheme, it's not the usual Asher theme, is it? The orange looks weird to me.
The buttons: While the glow on the selected page looks good, keep in mind that it is always better to use one background button image with browser text on each button. Loads quicker this way. In your case, you can take the left and right ends of the navigation bar, and then take a 1px wide portion from the middle, set it to repeat-x. This way you load the button images' loading time to almost 0ms. So remove the glow, and make sure the font is web-safe. 
Once again, make sure the fonts you're using are web-safe on all major operating systems, and try not to use more than three font-faces.
A rounded search bar is nice, but you cannot have one in Internet Explorer, unless you make it invisible and provide a background image, which is once again a bad web practice. So while it looks nice, it may be better to let it stay rectangular in IE.
The same goes for the basket's red background. In IE, it'll be rectangular by default. To give it round corners, you'll have to divide it into many DIV tags, and use separate images for the four corners. Or you can replace the entire thing as an image, but then you would have to make a new image for every item you feature there.
So yeah, a few minor improvements can be made to make the design more web-suited, but looks good overall. ---------------
Glomping the internet populace.
One forum at a time.
| |
Gruzz Profil: Moderator | uttaresh wrote :
To give it round corners, you'll have to divide it into many DIV tags, and use separate images for the four corners. Or you can replace the entire thing as an image, but then you would have to make a new image for every item you feature there.
|
Not completely true. You can do this by using just one image and no extra div's. For example, use this technique. It might look complicated at first, but it is very genius!  | |
Asher Genius is not born , it is made....
Profil: Moderator | | |
Tanshin Profil: Penguin Pro | I would also like to know about using images for search fields. I was planning to use that for my site, however if it won't work I will have to change it. ---------------
Glomping the internet populace. One forum at a time.
| |
Gruzz Profil: Moderator | For the three images, yes that's possible. You have to add a class to your body tags.
<body class="homepage">
Then in the css you have to use this class to support an 'active' state image. | |
uttaresh The Penguin Master
Profil: Penguin Pro | Gruzz wrote :
Not completely true. You can do this by using just one image and no extra div's. For example, use this technique. It might look complicated at first, but it is very genius!
|
That is a little smart, using one image and flipping it according to re-use it for all four corners. But once again, not the best web-design practice. It is, however, good for Internet Explorer. You know what, it would be smarter if you actually ignore Internet Explorer completely right now. You'll see that what works in Mozilla or Webkit browsers looks horrible in IE. Just focus on FF and Webkit, and then you can correct IE errors using a separate CSS. Now, for creating a rounded box, you can use the following CSS code:
Code :
- #header #newsbox { /* Where newsbox is the id of the container tag */
- -moz-border-radius:10px;
- -webkit-border-radius:10px;
- }
|
This is useful as it works with background images as well, and can support borders (the stroke effect) in the browser itself, which reduces loading time.
Asher wrote :
1. Uttaresh  thanks fyour time to write the suggestions 2. I'll put a single-color background removing other gradient effects since reflected one doesn't seem a good option to me. 3. The site is personal but I want to give it a professional look BTW, which part of the text seems to you informal?
4. For rounded images, what if I import them in Dreamweaver and link them like a PNG image?Will it not work?
5. I'd like to use three images for each navigation buttons i.e: normal, active, hover.Would that create problems? 6. All the fonts are web-safe, I haven't used any special fonts. 7. Can I use an image for search-field?
I am a so n00b to this stuff
|
1. No problem.
2. Well, I actually meant a very subtle gradient. Like from white to the lightest grey, or from lime green to a very close yellow. You know, like you do with your icons? It makes the screen look less 'flat'.
3. At the bottom, the various texts like: "Search the site for stuff you want". Stuff is kind of informal. Make it "Search site for files", or better yet "Search site" or "Search gallery". And overall, the text is also a little too long, if you know what I mean. The trend is to keep texts that are not the main item, that are miscellaneous descriptions for functions, should be kept short and clear -- quick to read. And the text "Other places to get in touch with me" can have two meanings, if you know what I mean. 
4. It will work, but it is not considered correct web development etiquette unless absolutely necessary. See my above explanation, in response to Gruzz's post.
5. It will increase load times. What I said earlier was that it would be better to make hover effects in HTML and CSS, and not link separate images. Like you can change text colours and styling, opacity of the background image, add a partially transparent colour image on top to make it change its colour, etc. But if you REALLY think that a glow will make your design look better and that that alone will, by all means go ahead.
6. OK, that's good.
7. Yes, you can, but the design you have included in the screenshot can be very easily recreated using CSS. Take this site I made a while back, for example: http://webtweaker.net/Designs/GreenLovers/index.html Rounded corners are very easy to achieve, but once again can be a problem in Internet Explorer. So like I said above, it's best you make a separate CSS for IE, as you will undoubtedly need to tackle several other major IE CSS and HTML errors and glitches. 
Tanshin wrote :
I would also like to know about using images for search fields. I was planning to use that for my site, however if it won't work I will have to change it.
|
Like I said above, best to do it in CSS without images, but if you insist on it, you can use the "background:url(imagename.png);" parameter on the <form> or <input> tag for the search bar, depending on the area you want the image to cover.
Gruzz wrote :
For the three images, yes that's possible. You have to add a class to your body tags. <body class="homepage"> Then in the css you have to use this class to support an 'active' state image.
|
Are you talking of the navigation bar buttons? For all pages except the active one, I think it would be better to use:
Code :
- <img id="gallery" src="galleryup.png" alt="Gallery" onmouseover="this.src='galleryhover.png'" onmouseout="this.src='galleryup.png" />
|
---------------
Glomping the internet populace.
One forum at a time.
| |
Gruzz Profil: Moderator | uttaresh wrote :
Are you talking of the navigation bar buttons? For all pages except the active one, I think it would be better to use:
Code :
- <img id="gallery" src="galleryup.png" alt="Gallery" onmouseover="this.src='galleryhover.png'" onmouseout="this.src='galleryup.png" />
|
|
Why would you use JavaScript when you can do the same with CSS?
Why would you use multiple images when you can use just one?
Lets say you have a header bar of 50 px height. Then you create an image with an height of 150px.
#main-nav dt a:hover {
background-position: 0 -50px;
}
There you go for hover effect. And for the active one:
body.contact dt#contact,
body.contact dt#contact a {
background-position: 0 -100px;
}
Just add a 'contact' style to the body tag on the contact.html page.
| |
uttaresh The Penguin Master
Profil: Penguin Pro | | |
ghostnatyphon To die would be a great adventure.
Profil: Penguin Pro | | |
Asher Genius is not born , it is made....
Profil: Moderator | It seems that I should have learned CSS before going to Dreamweaver you see, I just have some HTML knowledge (include XHTML if you want to) but not much knowledge about CSS.I am useing a book to understand Dreamweaver and have just passed through CSS which seems quite easy in the software.Would it be possible that I don't go for CSS coding at all and still get the same effects with Dreamweaver?I may start learning CSS after uploading the site ---------------
Igloo <---> DeviantArt
| |
ghostnatyphon To die would be a great adventure.
Profil: Penguin Pro | | |
uttaresh The Penguin Master
Profil: Penguin Pro | I only use Dreamweaver as a syntax checker, sort of like using Word for spell-check. There are other advantages of course, like FTP connectivity; but most of us can do without Dreamweaver altogether.
I'll give you a basic start in the right direction. CSS, or Cascading Style Sheets, is used for the design and layout of your webpage. As opposed to HTML, you cannot use it for defining the actual material, only to style it.
To use CSS, you can create a separate stylesheet.css and link it inside the <head> tag of your main HTML code like this:
Code :
- <link rel="stylesheet" href="stylesheet.css" type="text/css" />
|
Now, for each tag you want to modify using CSS, give the tag an ID or Class. If you think that that tag needs a unique formatting, give it an ID. If you think you will use the same formatting in many tags, i.e. if you think you will re-use the formatting, give it a class.
Let's take this for example:
Code :
- <div id="name">Kyo Tux</div>
- <div class="phone">987-45123</div>
- <div class="phone">923-26342</div>
|
Now go to the file stylesheet.css. You can change the properties of these tags by using their IDs and Classes.
Let's say you want your name to be red (#FF0000) and your phone numbers to be green (#00FF00). To do this:
Code :
- #name { color:#FF0000; }
- .phone { color:#00FF00; }
|
So as you can see, to modify the formatting of a tag referenced by ID, you use #tag_ID and for the class you use .tag_class
Now let's say you want to modify all div tags in the page to have a red background. Then you don't use # or . but simply use the tag:
Code :
- div { background-color:#FF0000;
|
Now let's say you want to modify all div tags that are of the class phone to have a green background:
Code :
- div.phone { background-color:#00FF00; }
|
Finally, what if you want to modify only <img> tags inside one specific class of div tags? Then you first specify the parent tag and then the child tag:
Code :
- div.phone img { margin-left: 0px; }
|
This code will only affect img tags that are inside div tags with class="phone"
Hope you understood that, it should help you comprehend most of the code on other sites as you read it. ---------------
Glomping the internet populace.
One forum at a time.
| |
Tanshin Profil: Penguin Pro | I'm not sure if it is published where you are Asher, but I found a great book for CSS called
"CSS Mastery
Advanced Web Standards Solutions" by Andy Budd. You should check it out! ---------------
Glomping the internet populace. One forum at a time.
| |
uttaresh The Penguin Master
Profil: Penguin Pro | You don't need books, I learned everything I know from online tutorials. ---------------
Glomping the internet populace.
One forum at a time.
| |
Tanshin Profil: Penguin Pro | Yes, but if you can't find things online then well...
One of the other things it focuses on is removing conflicts between elements and such, something that I found quite useful. ---------------
Glomping the internet populace. One forum at a time.
| |
Asher Genius is not born , it is made....
Profil: Moderator | | |
Tanshin Profil: Penguin Pro | | |
| |
Also means the image is already loaded and you don't get the flicker that you do with javascript rollovers 
I really appreciate that but I think I'll need to start it from beginning at w3schools.com, thanks BTW 
