Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Need to learn? to design web page 6

Status
Not open for further replies.
rvnguy

rvnguy

Technical User
Apr 25, 2005
1,636
US
I have been reading many of the posts and know that I am in way over my head. Many of the posts here are from individuals that are much more accomplished than I. As I know that "HTML" is the basis for most web content I am posting here. But, hopefully, I can obtain some helpful direction.

I want to layout a web site and know that I want a top bar and a side bar (laid over "L" shape) that remains static. Side bar will contain links to information that will appear in the space under the "L".
The appearance I am looking to create is similar to that displayed in the Netscape browser 8.0 beta which I know is not a web page. My problem is that there appears to be soooo much in the way of languages that I know I do not have the time nor inclination to learn all of them and do not know specifically what I do need to learn. My expeience in programming is so outdated, (Assembler IBM 1105 vintage, COBOL IBM 360-390 and RCA Spectra, FORTRAN, Pascal and others) and I haven't kept up but would like to approach this with some sort of ordered plan. Your comments, and suggestions will be appreciated.
Thank You

rvnguy
 
Sort by date Sort by votes
rvnguy,

My experience with HTML and CSS goes back quite a while, and while I've learned quite a bit from reading good books and helpful web sites, I've learned much more by examining the code that produces various results.

If you have a site in mind that you'd like to design your site like, print out the HTML and CSS, and take the time to analyze how things fit together.

It's far easier to study HTML and CSS code that does what you want it than to write it from scratch. Once you understand why things work they way they do, you can modify the HTML/CSS to get the effect you're looking for.

Wishdiak
A+, Network+, Security+, MCSA: Security 2003
 
Upvote 0 Downvote
Wishdiak,

Thank you for the prompt post. I side triped to your site and it is good to know that you are also "experienced". I have studied copied code and find that some are compact and appear organized while others seem confusing, but they all seems to produce what I suspect is the desired result. Having perused the posts here and elsewhere, it appears that there is more than one way to skin a cat. Some prefer JS others hate it, some like CSS but there are other ways. Frames seems to be a controversial topic (as if they can be seen or not). Coming from an organized approach to coding (i.e. pascal vs "C") I am looking for a protocol that may or may not exist.
Basically, with all the selection, HTML, XHTML, XML, CGI, PHP, FRAMES, IFRAMES, JAVASCRIPT, ETC. I feel like a kid in a candy store for the first time and do not know what to pick.

rvnguy
 
Upvote 0 Downvote
well this is the approach i took and i hope it works for u.

1) learn HTML. Html is super easy
To create an html page, there is 3 tags that are mandatory. HTML,HEAD,BODY. With these tags understood, u have already created a web page. This is the baseic structure
Code: 
<html>
    <head>
    </head>
    <body>
    </body>
</html>

all tags are contained within '<' & '>'. You can close a tag by prepending '/' eg </body>.

The following tags are very important to learn...table,div,iframe,script,...etc

2) After learning the basic HTML and basic tags, give your html beauty by learning CSS. CSS is easy as well. I dont think there are many who suffer from css being too COMPLICATED.

3)Once you have reached that far, start learning javascript(The best part of course). During this tutorial try to understand the difference between browsers. When you have accomplished this your a DHTML coder. Javascript coding is very important because of its ability to intergrate with different web technologies eg XML,SVG,..etc

all the above do is give you presentation power and control(client side goodies), After u learn javascript, u'll get to see it cannot accomplish certain tasks for security reasons. that's when u dive for

4)server side coding, i would recommend PHP and mySQL. then ur done :)). This is really the guts of your web. once learnt, u can do almost or most things for a standard web page

---------------------------
WORD OR VOTE TO THE WISE IS ENUFF...;)
 
Upvote 0 Downvote
sirlojik,

Thank you for sharing your approach. While others might take exception to what you outlined, I appreciate you sharing your experience with me. I had not seen enough to know that there was "server side" executables for mainly security reasons.

ChrisHunt,

Great links!! (have only breifly looked at them) but will most likely spend much time at them. Thank You for pointing me in some very useful directions.

rvnguy
 
Upvote 0 Downvote
I would just add: XHTML is more structured and strict than HTML. So, I would learn XHTML.

I echo the suggestion that the next step is CSS, to make your XHTML "look good" in a browser.

Then JavaScript, which treats the browser and the XHTML document as a set of objects with properties, and gives you methods to manipulate them.

That's all "client-side".

For server-side code, I again echo the PHP choice. Stay clear of ASP.NET, it's a horrible way to do web development.

Server-side code is used to interact with databases, and conditionally/dynamically GENERATE all of the above.

Thomas D. Greer

Providing PostScript & PDF
Training, Development & Consulting
 
Upvote 0 Downvote
Slipping off tompic from the original thread, but relating to the replies....

I think that although you obviously need to "know" (x)html, css etc. By far the most useful things you can do is get a good understanding of the principles of contemporary web design techniques (tough one that) and how it is both akin to and different from design for other media.

Develop a good understanding of the more abstract concepts in web design and development - why you should do things in a certain way, why it's good to separate style from content, why accessibility is important, what Web Standards are all about, building search engine optimised sites... and other things of that ilk.

Get your head around all that and it all starts to come together.

For starters take a look at books

Designing with web standards - Jeffry Zeldman, New Riders
Web Standards Solution - Dan Cederholm, Friends of Ed
Search Engine Visibility - Shari Thurow, New Riders

There are many sites out there too but they have been listed on this site many times over and googling will turn them up at the top of the results.



Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r
 
Upvote 0 Downvote
Sometimes a site's code can be generated from a database or script -- when this is a case it might look like spagetti where there is a huge lack of returns. Sometimes very neat and tidy (x)HTML is purposfully made to look unreadable to humans to stop them from plundering their "designs." Lastly, other times a site is just poorly written.

Remember some key rules to web design:
- Avoide mystermeat navigation.
If you have a link that is an image, make sure that the image has an alt tag, and that there is the original plain text version of the link to the same place. (see Web Pages That Suck for more information).
- Avoid using JS/Java/Flash for navigation and content
- Avoid using frames, unless you provide a no-frames version and the main frame has the navigation links on it as well (at the top and bottom of the page)
- Avoid making assumptions about how your audence browses. Some people have low screen resolution, some people browse with a million windows open so each window only takes up a fraction of the screen, and some use tabbed browsing.
- Avoid horizontal scroll, by using relitive positioning instead of absolute -- see above
- Avoid using pop-ups, especially for content and navigation

There are times to break each of these rules, but those times are rare.

[plug=shameless]
[/plug]
 
Upvote 0 Downvote
tgreer, Foamcow, jstreich,

Thanks to you for the pertinent info and conceptual approach guidelines. I favor a structured approach, mostly due to my early learnings and lang requirements and presently because if I do not do it this way I will never remember why I did it a certian way, much less, someone else looking at it.

Specifically to jstreich,

What is your definition/reference to "MYSTERY MEAT NAVIGATION"

"AVOID USING FRAMES UNLESS" are there still that many individuals not using frame capable browsers?? I would have thought that simply by attrition these would be close to non-existant.

Ahhh Yes, I have gleaned enough from the posts that I am currently running a PC/win box, a LINUX box, and a Mac G4, with multiple browsers installed to preview any product that I might generate in addition to being able to see how other sites look under each environ. Which is the reason that led me to post this in the first place as I could see that there is much more to it than learning one or two lang's.

rvnguy
 
Upvote 0 Downvote
Mystery meat navigation" is a term coined by Vincent Flanders for his his "Web Pages that Suck" site, see . It's a site worth exploring, as it's difficult (maybe impossible) to learn the skills to be a good designer, but easier to learn what not to do if you don't want to be a bad designer.

On a different tack, this document is a good intro to the whole web standards thing - . There's lots more goodies on that site too, like this article on why not to use frames: .

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Choose a good text editor. I have not found a perfect one, they all have pros and cons. Pick one that has good syntax highlighting for all the methods you will be using to code (x)html, Java Script, PHP, etc. Make sure it runs on all platforms that you need to code with. I mainly use Linux but sometimes I get stuck and have to do something on a windows box. Having the same editor available for both platforms makes that easy. I keep a copy of my editor and some custom config files on my FTP server in case I'm away from my PCs and need to make a change to a site. Quick download and install and I'm back to work.

I dont want to start a war about whats best or worst. Look at the features and see what seems good for your needs. I do advise avoiding WYSIWYG editors. Stick with text editors. That keeps your code clean and lets you learn how everything works.


Good luck
Dave
 
Upvote 0 Downvote
I'd underscore Chris' reference to


Learn what DOESN'T work as well as what does.

Hope that helps!

Cheers,


[monkey] Edward [monkey]

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door
 
Upvote 0 Downvote
Hi, could someone expalin to me what is a text editor. I'm using Dreamweaver. Is that to do with source code like notepad.

Cheers,
spriggan2005
 
Upvote 0 Downvote
spriggan2005,

If you're comfortable with Dreamweaver, you could use it to create web pages.

You could also use Notepad or any other basic text editor, and you'd learn quite a bit more about HTML than you would using a WYSIWYG editor like Dreamweaver.

Wishdiak
A+, Network+, Security+, MCSA: Security 2003
 
Upvote 0 Downvote
If you're not going to use a WYSIWYG editor like dreamweaver (you become a better code if you don't use them), then I'd suggest downloading textpad. It supports text-highlighting and all that fun stuff and is highly customizable.

-kaht

...looks like you don't have a job, so why don't you get out there and feed Tina.
headbang.gif
[rockband]
headbang.gif
 
Upvote 0 Downvote
IMHO there is nothing wrong with WYSIWYG editors providing they produce nice code.
As far as I am aware the only one that does that is Dreamweaver.

I would still advocate learning to handcode, but tools such as DW are a great place to start so you can see how things fit together.

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r
 
Upvote 0 Downvote
Foamcow,

I don't really have any big issues with how Dreamweaver generates code. It's the first WYSIWYG editor I've used since the mid-90's. Since I'm forced to use it for web development at work, I find that Dreamweaver and a couple of good books are sufficient.

I still prefer other, more robust FTP clients, but that's just me.

Wishdiak
A+, Network+, Security+, MCSA: Security 2003
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
684
bdwilcox
bdwilcox
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
200
lmcate
lmcate
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
723
pmonett
pmonett
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top