Lugia Tamer
< Is friggin awesome
I use the good old HTML. Also a good editor would be HTML kit, google it.
Btw, what does SPP stand for?
Btw, what does SPP stand for?
-
Hi all. We have had reports of member's signatures being edited to include malicious content. You can rest assured this wasn't done by staff and we can find no indication that the forums themselves have been compromised.
However, remember to keep your passwords secure. If you use similar logins on multiple sites, people and even bots may be able to access your account.
We always recommend using unique passwords and enable two-factor authentication if possible. Make sure you are secure. -
Be sure to join the discussion on our discord at: Discord.gg/serebii
Web Design General Tips
- Thread starter Dragonfree
- Start date
- Status
I'm still new to web design but I already know a few important things. Practice whatever you learn before moving onto the next thing. You'll remember what you're learning better AND you'll know how to use it. Second, if you're going to build a site do it from scratch. That's the only way to get things exactly how you want them. Third, NEVER use a site builder until after you've learned how to build a site on your own with something like Notepad. You would be shocked at how inefficient these programs are, especially the free ones.
I think it means Serebii Pokemon Page. I remember Serebii saying that a while ago.
Charizard_Millky
Punk Rock > You
Who cares?
Anyway, with layouts, when adding banners (for table layouts anyway,) don't put the URL inside the banner area (like you do with the content) but go to where the CSS is and do this:
HTML:
background-image: url('banner url');It makes it go from on top of the banner area and not covering it all, to covering it all.
Crepuscular
Surmounting~
One recommendation I have is never give broken links or images, especially on the main menu. I see it quite a lot, but really all it is is a false promise which irritates your viewers.
If you like to see what is planned for your next menu, put the links in HTML comments:
Or, better yet, have a menu plan in a .doc or .odt (or whatever) file on your computer, doing something like putting all things that aren't finished in say, italics. That way, you gain the benefit of seeing what's coming up, while your visitors don't have to guess which links are broken or not.
If you want your visitor to see what is upcoming, just have one page: "What's coming up", or "What's planned". I reiterate, all links on your site should work.
If you like to see what is planned for your next menu, put the links in HTML comments:
HTML:
<!-- This is a comment and is not viewable on the web page. -->Or, better yet, have a menu plan in a .doc or .odt (or whatever) file on your computer, doing something like putting all things that aren't finished in say, italics. That way, you gain the benefit of seeing what's coming up, while your visitors don't have to guess which links are broken or not.
If you want your visitor to see what is upcoming, just have one page: "What's coming up", or "What's planned". I reiterate, all links on your site should work.
Disgruntled Goat
has his moments
Don't confuse design with layout, they kinda different. For example, Serebii has a decent design - the pictures and shell structure and colours are good. But the layout of some of the content is pretty bad, for example there is no space (padding) between the nav on the left and where the text starts in the middle grey bit.
And the tables (eg here) make the content quite difficult to read sometimes. I think the borders are too bold - if they were fainter they still separate sections without getting in the way.
That's my two cents, anyway.
SilverFlame
png = PwNaGe
I'd like to say don't do table layouts, but then again they are very popular.
Oh, and try using CSS for the layout, not HTML. HTML can do it's job with content, CSS does it's job with looks. Keep them that way.
Oh, and try using CSS for the layout, not HTML. HTML can do it's job with content, CSS does it's job with looks. Keep them that way.
Hmm...
Firstly, your layout is really important. Make sure it's visually appealing. If you can't do that, get someone else to make one for you until you can learn how to. You don't need to have the best layout, just one that doesn't hurt my eyes and/or looks crap. >P
Secondly, so is design. Make your pages clean and don't ever use marquees. I know my site at the moment hsa a marquee, but when I get the time I'll be making a new DIV layout with absolutely no marquees.
Thirdly, stay the hell away from Freewebs, Piczo and other such - quite frankly, crap.
Fourthly, rather than starting with HTML, start by using mainly HTML, but using XHTML tags such as <strong>, <em> and always including the alt attribute in <img> tags.
Finally, stay the hell away from generic anything. Don't have generic content, layouts, anything. Generic is horrible. Die die die. I know my site at the moment has a lot of generic content. I'm rewriting it.
Firstly, your layout is really important. Make sure it's visually appealing. If you can't do that, get someone else to make one for you until you can learn how to. You don't need to have the best layout, just one that doesn't hurt my eyes and/or looks crap. >P
Secondly, so is design. Make your pages clean and don't ever use marquees. I know my site at the moment hsa a marquee, but when I get the time I'll be making a new DIV layout with absolutely no marquees.
Thirdly, stay the hell away from Freewebs, Piczo and other such - quite frankly, crap.
Fourthly, rather than starting with HTML, start by using mainly HTML, but using XHTML tags such as <strong>, <em> and always including the alt attribute in <img> tags.
Finally, stay the hell away from generic anything. Don't have generic content, layouts, anything. Generic is horrible. Die die die. I know my site at the moment has a lot of generic content. I'm rewriting it.
SilverFlame
png = PwNaGe
Freewebs is okay imo for beginners, and if you just want something small. Atm I'm using it, only because I'm still thinking if I'm willing to pay for a real host.
And to add the my helps, don't just use random colors everywhere. Like my site's layout is using blue and green, don't go and mix 10 or 20 different colors to make something, unless it all makes sence.
And to add the my helps, don't just use random colors everywhere. Like my site's layout is using blue and green, don't go and mix 10 or 20 different colors to make something, unless it all makes sence.
Unless you're making a stretching banner in which case it would be:
HTML:
<img src="/images/style/banner-left.png" alt="banner_left" style="float:left;" />
<img src="/images/style/banner-right.png" alt="banner_right" style="float:right;" />The CSS for the banner DIV/Cell would be something like this:
HTML:
#banner {
width:800px;
height:200px;
background-image:url(/images/style/banner-background.png);
}And you'd find you'd have a stretching banner for your stretching layout.
DOn top of that, always try to open your site after it has 50 pages and a respectable layout. Believe me, it works. Firstly, while you're making your 50 pages your graphic talents do become vastly better and then you can open with a really, really nice layout~
No, you should never, ever use Freewebs.
It doesn't offer any server-side scripting technologies unless you have a paid account, you have a limit of 50 pages, you're stuck with .htm and much more. Looking back, I'm really, really glad that I never ever used Freewebs.
And yet another thing - I don't see why so many people are buying domains before they even open their site?? Why don't people just go with free hosts which support PHP?
Last edited:
XHTML isn't constantly supported by webhosts. Some may not have the appropriate software for that. It could also take place that your browser does not support XHTML. I'm not really sure if XHTML is upgrade for HTML, or that is an entire new language.
____________________________________________________________
Infant Shoes, Women's Hair Accessories
____________________________________________________________
Infant Shoes, Women's Hair Accessories
Sketch out your Layout before you Code
This helps immensely when it comes to figuring out what goes where. I normally do this process with a pencil and a piece of scrap paper I keep with me when I code. First I decide where the main areas for content will go (the logo, menu, and main content areas) and draw them out with boxes. Then I go over the light sketch with a darker pencil to draw in little details that will be in the final design like unique shapes or other design quirks. Finally I show a little contrast between areas by lightly shading in some areas I want to be darker with pencil while keeping other areas light.
Keep a .txt file with Code Snippets
If you learned a cool trick you think you'll be using in the future or need some quick references for old code you should start keeping track of those codes in a Text File so you won't have to comb over the Internet looking for a particular code every time you need it. Have an example of the working code and what it does clearly labeled for easy use.
Have an External File for CSS and Javascript
This one's a given but I'll say it anyway. You'll be thankful you're only editing one line in a single .css file then one line in 100+ .html or .php files.
Finish Coding your Layout completely, THEN debug
To debug things as you go along is spiraling into the annals of insanity. Get your site looking right visually first and then start working out the kinks in the coding a step at a time. It's usually easier to spot your mistakes and fix things up near the end anyway.
Run your code through a Validator to make sure its up to snuff.
If there's something wrong with your code and you can't figure out what it is the Validator will probably detect it for you so you can fix it. Here's a very good Validator that can detect for multiple Document Types:
http://validator.w3.org/
There's also one for your CSS.
http://jigsaw.w3.org/css-validator/
Check your site in Multiple Browsers
Just because it looks fine in Internet Explorer doesn't mean it will in Firefox, or visa versa. Make a habit of testing them out in multiple browsers to see if it's displaying and functioning correctly. I downloaded a few extra Browsers just to make sure that my layouts work in the most browsers possible before uploading them. If you don't want to go through that much trouble in the least make sure they look good in both Internet Explorer and Firefox since they're the browsers people use the most by far.
This helps immensely when it comes to figuring out what goes where. I normally do this process with a pencil and a piece of scrap paper I keep with me when I code. First I decide where the main areas for content will go (the logo, menu, and main content areas) and draw them out with boxes. Then I go over the light sketch with a darker pencil to draw in little details that will be in the final design like unique shapes or other design quirks. Finally I show a little contrast between areas by lightly shading in some areas I want to be darker with pencil while keeping other areas light.
Keep a .txt file with Code Snippets
If you learned a cool trick you think you'll be using in the future or need some quick references for old code you should start keeping track of those codes in a Text File so you won't have to comb over the Internet looking for a particular code every time you need it. Have an example of the working code and what it does clearly labeled for easy use.
Have an External File for CSS and Javascript
This one's a given but I'll say it anyway. You'll be thankful you're only editing one line in a single .css file then one line in 100+ .html or .php files.
Finish Coding your Layout completely, THEN debug
To debug things as you go along is spiraling into the annals of insanity. Get your site looking right visually first and then start working out the kinks in the coding a step at a time. It's usually easier to spot your mistakes and fix things up near the end anyway.
Run your code through a Validator to make sure its up to snuff.
If there's something wrong with your code and you can't figure out what it is the Validator will probably detect it for you so you can fix it. Here's a very good Validator that can detect for multiple Document Types:
http://validator.w3.org/
There's also one for your CSS.
http://jigsaw.w3.org/css-validator/
Check your site in Multiple Browsers
Just because it looks fine in Internet Explorer doesn't mean it will in Firefox, or visa versa. Make a habit of testing them out in multiple browsers to see if it's displaying and functioning correctly. I downloaded a few extra Browsers just to make sure that my layouts work in the most browsers possible before uploading them. If you don't want to go through that much trouble in the least make sure they look good in both Internet Explorer and Firefox since they're the browsers people use the most by far.
Disgruntled Goat
has his moments
A lot of people (about 7%) use Safari since it's the default on Mac. You can get it for Windows, or use Chrome instead because they use the same back-end to display pages.
Please don/t try and give advice when you have no idea what you're talking about. XHTML has nothing to do with web hosts, it's just a slight variant on HTML. Any XHTML file will work in any browser, same as HTML.
Please don/t try and give advice when you have no idea what you're talking about. XHTML has nothing to do with web hosts, it's just a slight variant on HTML. Any XHTML file will work in any browser, same as HTML.
ferrywayes
New Member
Hey
Website's Layout is very nice.
But i m little bit stress from your website because it's color the back ground color is green,
Some font's color is white and some font's are in Black.
Because of this My eyes starching lot today.
It is just a suggestion.
Thank you.
Website's Layout is very nice.
But i m little bit stress from your website because it's color the back ground color is green,
Some font's color is white and some font's are in Black.
Because of this My eyes starching lot today.
It is just a suggestion.
Thank you.
Disgruntled Goat
has his moments
Who the heck are you talking to, ferrywaves?
Are you talking about serebii.net? If so, I agree. I'm not a fan of his design.
Are you talking about serebii.net? If so, I agree. I'm not a fan of his design.
Some of these are things that I’ve never seen or read anywhere but have learned from experience. Hopefully, you can glean something from my early mistakes.
A good rule of thumb is this: Keep It Simple But Nice. Complicated pages are tough to maintain and leave lots of room for errors. Also, too much stuff on the page can bog down your visitor’s computer. For example, instead of a background image, try a background color; it looks nice and loads more quickly. Or try a text link instead of an image link. If you do use image links (and I use a few myself), don’t overdo it with large files or too many of them.
For goodness’ sake, use good HTML! A lot of us write our own, and it’s easy to mess it up and never be aware of it. Not all browsers will render your page properly if it has errors in it. Internet Explorer is generally pretty forgiving.
Most elements require both start and end tags, so be sure to use both if required, or your page may look wrong.
A word of caution if you write your own HTML: always put attribute values in "quotes" if they contain anything other than alphanumerics (letters or numerals). And DON’T forget the end quote, or your entire page may be messed up! Even Internet Explorer won’t forgive you for that.
=======================================
alcohol rehab Doctor Reviews
A good rule of thumb is this: Keep It Simple But Nice. Complicated pages are tough to maintain and leave lots of room for errors. Also, too much stuff on the page can bog down your visitor’s computer. For example, instead of a background image, try a background color; it looks nice and loads more quickly. Or try a text link instead of an image link. If you do use image links (and I use a few myself), don’t overdo it with large files or too many of them.
For goodness’ sake, use good HTML! A lot of us write our own, and it’s easy to mess it up and never be aware of it. Not all browsers will render your page properly if it has errors in it. Internet Explorer is generally pretty forgiving.
Most elements require both start and end tags, so be sure to use both if required, or your page may look wrong.
A word of caution if you write your own HTML: always put attribute values in "quotes" if they contain anything other than alphanumerics (letters or numerals). And DON’T forget the end quote, or your entire page may be messed up! Even Internet Explorer won’t forgive you for that.
=======================================
alcohol rehab Doctor Reviews
Disgruntled Goat
has his moments
You should always quote attribute values, that's easier than remembering some weird rules.
- Status