Jump to content

New coder seeking mentor


Recommended Posts

Hello folks,First let me say the tutorial library you all have accumulated is impressive and I cannot wait to dig into them. But as you can see by the title of the thread, I am a total newb. I enjoy the symmetry of CSS , but my knowledge is limited to only a few div overlays on myspace. I have never tried to use CSS to build a full website, and especially a website like I have in mind.I am not even sure if I know how to frame what I want to do in my mind in such a way as to search for the relevant tutorials. So I wonder if I might be able to start here with a mentor who can help me to isolate what I am trying to do so I can then go do the necessary research.I would like to start with a mock up if I can and an explanation of the elements I need and hopefully someone can chime in with some direction.wishwh8.th.jpg1. Mogulus video player2. Flash animated banner3. Site Nav controls for box 44. Site content must operate independent of the rest of page5. Chat Box6. Schedule box (left right arrows through days of the week)So - I really don't know where to begin here - some guidance would be greatly, greatly appreciated.ThanksHank

Link to post
Share on other sites

Well, that looks fairly ambitious, but do-able.As for suggestions, here are mine.Begin by learning enough html and css to build a plain old single page web site. And make certain that you validate it early and often. Next, build single pages that include one, and only one, of the items you want to include on that page. That would include finding or developing each of the components. chat box, web calendar, etc. Make sure that the Navigation component can link to each of the single pages. Once you have the single pages built, start to learn about floats, Margins, padding and I-frames to then add several of the components onto fewer pages. Eventually, the entire design will 'come together', but you need to understand the nature of the task at hand. It will require some commitment on your part, and I don't think it will happen quickly. Be prepared for the time you must commit to the site and don't expect this design to happen in only a few days, unless you know more about this stuff than your post leads me to imagine.Hope this doesn't scare you off the plan. :)Keep posting here and there are many helpful and knowledgeable people around to answer your questions. I don't know exactly why they let me back in, but they do. :)

Link to post
Share on other sites

Well, I think I am familiar enough with CSS to get the hang of it fairly quickly. What I need is someone to look at that mock-up and tell me where and how to begin making that... gods, I know that sounds so newbish. I am aware of my newbitude.. lolLike I know in CSS you start with a style sheet and then make your divs to call back to the style sheet. What I don't know is.. is how to make the NavBox 3 control only box 4, and how to make several pages of content only appear in box 4. (I would love to have a forum on one page in box 4) And how to make the schedule box with left/right arrows so you can scroll through days of the week. I also don't really know how to make a website do what you say.. lol.. like I said, I have only ever coded myspace profiles and groups and I am sure real websites are nothing like that. All I do there is save blocks of code in the appropriate data fields.So I have some experience with style sheets and div overlays, and I even figured out how to do rollovers a few days ago... I just have missing pieces of the construction puzzle here and would appreciate a step by step. Like you don't have to tell me how to construct a style sheet - just drop "style sheet here" on the list where ever it goes ... man, I hope I am being clear enough.. it's hard to put this into words when I'm not familiar with how concepts are expressed in understandable terms...Like1. Get webspace2. Design website3. code style sheet-link to tutorials explaining how to do what I want with box 4-link to tutorials explaining how to do box 64. Upload code to server -link to tutorial on how to do that with a CSS siteYa know? Geez, I hate not having the right words... that sucks... poor Eliza Doolittle

Link to post
Share on other sites

For box 4, you could use AJAX to dynamically update it when someone clicks on the link in box 3. Have a look at the AJAX tutorial: http://www.w3schools.com/ajax/Basically all you need to do is use AJAX to call the different files that you want to put into box 4, and use the innerHTML property to update the content with responseText. You will understand once you read the tutorial :)You could also use AJAX for box 6, and have the buttons Javascript that calls the relevant backend file that could even draw the schedule from a SQL database before posting it to the main page. Relevant tutorials includeJavaScript tutorial: http://www.w3schools.com/js/PHP tutorial: http://www.w3schools.com/php/SQL tutorial: http://www.w3schools.com/sql/Also, don't hesitate to ask if you have any questions at all, even the most trivial.Err... what do you mean by "link to tutorial on how to do that with a CSS site" - do what?

Link to post
Share on other sites

1. Find a good web host that offers free hosting without ads. I use http://www.awardspace.com, it has worked great for me but there are other hosts you can use also. You can see more here: http://w3schools.invisionzone.com/index.php?showtopic=37702. Start > Run... > "notepad" Start here: http://w3schools.com/html/html_intro.asp When you go to save your work in notepad, Save As "index.html" You can have Notepad and your web page open at the same time. Every edit you do to your web page in code, you will have to refresh your page.3. CSS go in between the <head> and </head> tags on your page (MySpace is good at messing this one up). <div>, <p>, etc all go in between <body> and </body>. http://w3schools.invisionzone.com/index.ph...ost&p=814314. You can upload your code/pages manually by going to the site and using their upload page to put things on your site. But it's better if you have a text-editor that has FTP to upload pages to your site without ever having to go an upload page. HTML and CSS get uploaded the same way. I use UltraEdit-32 but it costs money to get passed the trial. You can look here for more options: http://w3schools.invisionzone.com/index.php?showtopic=760Good luck.

Link to post
Share on other sites

Wow thanks for the replies guys. I will consider the advice and read those tuts. What do ya'll think about an i-frame for box4? I know my friend above advised AJAX but holy cow, I have NO freekin clue about the first thing about AJAX other than it cleans my sink and toilets.. lmao

Link to post
Share on other sites

You could use an iFrame for box 4, but frames are deprecated in XHTML so you won't be usign them for long. But until you learn more about AJAX I suppose you could use them. For frame 6, however, a AJAX / PHP / SQL solution would be better as it will be far easier for you to maintain the schedule by just updating the db, instead of creating masses of tables. Remember, a website has to be easy to upkeep as well as easy to make :)

Link to post
Share on other sites

What you should do is take it very slowly - say in learning AJAX, first start with a very simple page that loads a text file onto a div when you click a button. Then progress to integrating a server-side code like PHP using simple echo functions. Then practice simple common SQL SELECT, CREATE, UPDATE, and DELETE queries. Then slowly bring all the different technologies together. And post here if you run into trouble, or even if you are wondering about something.

Link to post
Share on other sites

Well I just about got the template built. And I have been experimenting with a tab menu for box4 for rather than a nav box - I would love a really cool tab flash set up there... wow that would be cool. And I'll need some help snazzing stuff up... going to get some web space and upload so ya'll can see.edit:This is hard - How do I get content to load in the div box I want it too. I don't know where to put javascript or anything like that... could someone code a sample for me?Here's what I got so far

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"><html><head>  <title>Ruckus</title><style type="text/css">p {font-size : 13px;font-family : times new roman;color : #c0c0c0;text-align : left;margin : ;}h3 {font-family : times new roman;color : #ffffff;text-align : center;}h2 {font-family : times new roman;color : #ffffff;text-align : center;}h1 {font-family : times new roman;color : #ffffff;text-align : center;}body {font-size : 13px;font-family : times new roman;color : #c0c0c0;background : #000000 url() fixed repeat;}blockquote {font-size : 10px;font-family : arial;color : #c0c0c0;text-align : left;}a:hover {font-weight : normal;font-size : 13px;font-family : times new roman;color : #c0c0c0;background : normal;text-decoration : bold;}a:visited, a:link, a:active {font-weight : normal;font-size : 13px;font-family : times new roman;color : #ffffff;text-decoration : normal;}.tv {background-color:000000; color:000000;border:1px solid; border-color:silver;width:300px; height:275px; overflow:auto;position:absolute; z-index:2; left:50%; top:0%;margin-left:-620px; margin-top:20px;visibility:visible;}.banner {background-color:000000; color:000000;border:1px solid; border-color:silver;width:500px; height:50px; overflow:auto;position:absolute; z-index:2; left:50%; top:0%;margin-left:110px; margin-top:20px;visibility:visible;}.content {background-color:000000; color:000000;border:1px solid; border-color:silver;width:500px; height:435px; overflow:auto;position:absolute; z-index:2; left:50%; top:0%;margin-left:110px; margin-top:115px;visibility:visible;}.tabs {background-color:000000; color:000000;border:0px solid; border-color:silver;width:500px; height:35px; overflow:none;position:absolute; z-index:3; left:50%; top:0%;margin-left:110px; margin-top:70px;visibility:visible;}.chat {background-color:000000; color:000000;border:1px solid; border-color:silver;width:410px; height:530px; overflow:auto;position:absolute; z-index:2; left:50%; top:0%;margin-left:-310px; margin-top:20px;visibility:visible;}.schedule {background-color:000000; color:000000;border:1px solid; border-color:silver;width:300px; height:250px; overflow:auto;position:absolute; z-index:2; left:50%; top:0%;margin-left:-620px; margin-top:300px;visibility:visible;}</style><style type="text/css">/*Credits: Dynamic Drive CSS Library *//*URL: [url="http://www.dynamicdrive.com/style/"]http://www.dynamicdrive.com/style/[/url] */.basictab{padding: 3px 0;margin-left: 0;font: bold 12px Verdana;border-bottom: 1px solid gray;list-style-type: none;text-align: left; /*set to left, center, or right to align the menu as desired*/}.basictab li{display: inline;margin: 0;}.basictab li a{text-decoration: none;padding: 3px 7px;margin-right: 3px;border: 1px solid gray;border-bottom: none;background-color: #B8B8B8;color: #2d2b2b;}.basictab li a:visited{color: #E0E0E0;}.basictab li a:hover{background-color: #DEDEDE;color: black;}.basictab li a:active{color: black;}.basictab li.selected a{ /*selected tab effect*/position: relative;top: 1px;padding-top: 4px;background-color: #E0E0E0;color: black;}</style></head><body><div class="tv">This is box 1.</div><div class="banner">This is box 2.</div><div class="tabs"><ul class="basictab"><li><a href="http://www.dynamicdrive.com">Headlines</a></li><li><a href="http://www.dynamicdrive.com/new.htm">Network</a></li><li class="selected"><a href="http://www.dynamicdrive.com/style/">TvGuide</a></li><li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li><li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Downloads</a></li><li><a href="http://tools.dynamicdrive.com/button/">Contact</a></li></ul></div><div class="content">This is box 4.</div><div class="chat">This is box 5.</div><div class="schedule">This is box 6.</div></body></html>

Link to post
Share on other sites
Read this. Or just check out the table that starts at about half way down, but I'd read the whole thing too, it can't hurt.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

totally - I get it. So it's a good idea to check the status of those things when you construct your doctype to make sure you are relevant to the most recent broswer changes and such? Thanks for the tip.One problem I have notice so far though is that the tabs menu I have up right now, displays higher up on the page in IE than in FF. What's that about and is it an easy fix?Also - I don't know how to make the tab buttons open up the pages in box4. I really need some step by step help with that because I don't seem to be able to keep up with the tutorials on W3 for some reason. They lose me.. *shrug*. I know Synook link some tuts up there, and I read a whole lot of the content in them, but it just wasn't making sense to me. But I think I am doing pretty good so far - I have a relative handle on the style sheets and plain html. AND I have a list for cleanup so don't worry.. lol. So far on that list is to-support FF and IE-Combine style sheets into one external file and call it rather than build it in the browser (I think - that's still new to me but I think I get it)-Customize the tabs and rollovers-Round out the corners, and learn how to make custom borders
Link to post
Share on other sites

ack... I tried to publish what I got so far but when I open the url I can see the directory.. what did I do wronghttp://dhost.info/theruckuz/edit:Oh wait... here we go, this has a url too I see.. lolhttp://dhost.info/theruckuz/ruckus.htmlBut how can I make what appears as the directory now, appear instead as te home page?FIXED! Home pagehttp://dhost.info/theruckuz/

Link to post
Share on other sites

You have to name the page you want to appear by default index.html (or index.php, etc.)

Link to post
Share on other sites
You have to name the page you want to appear by default index.html (or index.php, etc.)
ok.. cool. Can you give me any one on one help getting the tabs to open in box4? I have also started learning JavaScript today, but I'm a long way off from being at a place where I can know how to do box4.I'm also having trouble figuring out how to make rounded corners with my present style sheet
Link to post
Share on other sites

Have you decided to use AJAX or iFrames? I would suggest AJAX, because it is XHTML compatible, and more flexible. Though using iFrames would be easier.

Link to post
Share on other sites

AJAX then! :) Well dw if you learn AJAX then programming the "schedule" box will be much more efficient. Have you read the relevant tutorials yet?

Link to post
Share on other sites
AJAX then! :) Well dw if you learn AJAX then programming the "schedule" box will be much more efficient. Have you read the relevant tutorials yet?
I have read a lot yes. Do you read the posts I have been writing? Reason I ask is because I had mentioned that I did read a good portion of the tuts that you linked before on the 1st page and it wasn't making a lot of sense to me. But I have been moving through a real nice set of JavaScript tuts on my own and I am starting to make some sense of that. Starting to work out the syntax. Is AJAX similar?
Link to post
Share on other sites

AJAX is a combination of technologies, but the client-side is based in JavaScript. So, all you now have to learn is the AJAX parts of JavaScript. If you have read the AJAX tutorial, then you should know how to establish a xmlHttpRequest object. I would suggest first making a very simple test page with a single button, and a div. Then, when the button is clicked, load an external page into the div. Something like:index.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">	<title>AJAX Test</title>	<script type="text/javascript">		function load_div(ele) {				var xmlHttp;			try { xmlHttp=new XMLHttpRequest();			} catch (e) {				try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");				} catch (e) {					try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");					} catch (e) {						alert("Your browser does not support AJAX!");						return false;					}				}			}			xmlHttp.onreadystatechange=function() {				if(xmlHttp.readyState==4) {					document.getElementById('main').innerHTML = xmlHttp.responseText;				}			}					xmlHttp.open("GET","include.html",true);			xmlHttp.send(null);		}	</script></head><body><div id="main">include.html will be loaded into here when you click the button</div><input type="button" onclick="load_div()" value="Load include.html" /></body></html>

include.php

This is include.html. If you can see this text include.html was loaded successfully through AJAX.

Do you understand what that code does and how it does it?

Link to post
Share on other sites

Synook, I just want to thank you for being such a great help. I know your time is valuable and I appreciate that you have chosen to spend some on me. And I think I am starting to get the idea, I can now recognize the functions and variables, etc.. And I will go over the AJAX stuff again in context with what I now am finding familiar to see if it rings any new bells. I bet it does. Few questions tho, how do I make the div load from the tabs I've got? I see an input type designation there - how do I know what input type my tabs are? Also, where do I put the file names of the new content I want to load into the div? Is that represented by "include.html"?

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...