Jump to content
  • Advertisement
Sign in to follow this  
drjulio2002

[web] Update of my web site.

This topic is 4924 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Advertisement
Open up Add/Remove programs, select FrontPage, and click uninstall. Also start reading A List Apart and Web Page Development: Best Practices

Aside from the egregious markup, the layout is overly complex and cluttered and you have hard line-breaks in the middle of paragraphs.

It would take about 30 minutes to an hour to redo the site by hand in clean, structured HTML without even using any fancy CSS tricks, and the result would be much easier to read and more professional looking.

Share this post


Link to post
Share on other sites
Yeah - colors were horrible - sorry dude. Christmas was over a few weeks ago.

Read up on CSS - it's easy to learn and will help you tremendiously with your formatting.

On the plus side - I really like your navigation bar. Keep it and use the same navigation bar in all child pages! I noticed that a few of your pages have little/no navigation between them. Good navigation is the KEY to good web design. You have an awesome navigation bar - so use it!

You also need to have some more content up before we can really rate your site. You seem to only have two links functional.

Ryan


Share this post


Link to post
Share on other sites
Frontpage generates messy code. There are better WYSIWYG editing packages available, but generally, the consensus is that it's better to write the code by hand using a text editor (such as Notepad, which comes with windows). There are plenty of tutorials around on writing HTML and CSS, just fire up Google. It's not overly hard to learn, and you'll probably find you'll have greater control over your designs.

Then it'll just be a matter of getting the aesthetics down. [wink]

Some good resources:
- W3 Schools: Learn HTML and CSS from the folks who set the standards.
- A List Apart: articles on various aspects of web-development.

Share this post


Link to post
Share on other sites
Try to pick on colour scheme and stay with it, so maybe use a few different variations of red, and blue for the title bars. Look at GDnet for example, it really only uses black and blue, and it works quite nice. If you fixed up the colours, then I think the site would look pretty good.

Share this post


Link to post
Share on other sites
Quote:
Original post by drjulio2002
So, don't use FrontPage 2000 anymore?


Yup.

The problem with using FrontPage or any other WYSIWYG editor is that you end up focusing more on getting the page to look the way you want it, rather than on the actual structure or contents of the page. The result is a lot of meaningless markup that slows the page loading time and makes sites more complicated to maintain in the long-run.

The key to a good layout and good HTML is a minimalist approach.

I said earlier that it would take 30 minutes to an hour to redo your site in clean HTML. To demonstrate this, I have redone the main components of your layout in strict HTML 4.01 by hand. If you skip past the stuff in the style tag, you will notice that the code for the actual page body is actually readable and makes sense. It took me just about 30 minutes to put this together, including the CSS. Feel free to copy and paste the code and play around with it.

I suggest you try deleting the stuff inside the style tags and seeing what the page looks like. A well designed web page should make sense and be easy to navigate without any style information whatsoever.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>NightDreamer</title>
<meta http-equiv="Content-Type" content="text/html">
<base href="http://www.geocities.com/drjulio2001/">
<style type="text/css">
html {
background-color: #ffcc66;
margin: 1em;
font-family: 'Verdana', serif;
font-size: small;
}
body {
border: 1px solid black;
background-color: #800000;
}

#masthead {
background-color: black;
color: white;
padding: 5px;
}
#navigation {
background-color: #003366;
color: white;
padding: 5px;
}
#content {
padding: 1em;
background-color: white;
}
#footer {
color: white;
padding: 5px;
}

#navigation ul {
margin: 0;
padding: 0;
}
#navigation ul li {
display: inline;
list-style-type: none:
padding: 0.25em;
}
#navigation a { color: white; }
#navigation img { border: 0px; }
</style>
</head>
<body>
<div id="masthead">
<img src="nightlogo.gif" alt="NightDreamer"/>
</div>
<div id="navigation">
<ul>
<li>
<a href="#" title="Home">
<img src="home.gif" alt=""/> Home
</a>
</li>
<li>
<a href="pro_utilities.html" title="Projects &amp; Utilities">
<img src="calendario.gif" alt=""/> Projects &amp; Utilities
</a>
</li>
</ul>
</div>
<div id="content">
<h1>Welcome to NightDreamer</h1>

<p> NightDreamer is a small research, and development team
consisting of learning new programming techniques in the objective
of creating computer games. Please, make yourselves at home and
join us in this tech. journey.</p>

<h2>Contents</h2>
<ul>
<li>
<p><a href="#">Program Analysis</a><br />Learn and
practice how to document your programs.</p>
</li>
<li>
<p><a href="#">Source Code</a><br />
Learn to write and modify programs.</p>
</li>
</ul>
</div>
<div id="footer">
&copy; 2004-2005 NightDreamer.
</div>
</body>
</html>





Look through the articles and tutorials at W3Schools and A List Apart and make sure you understand the above code. If there's something you don't understand or need advice on post here and I would be happy to help.

You might find that a good text editor with syntax hilighting will make hand-coding HTML much easier. I'm sure everyone on these boards has an editor of choice. I like TextPad and JEdit myself. Also, when you're first learning HTML you will probably make a lot of mistakes with syntax. You will find the W3C's Markup Validation Service an indispensible tool.

[Edited by - igni ferroque on January 18, 2005 1:00:07 PM]

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!