...

View Full Version : Newbie question on website design



Subhash81
05-30-2007, 06:40 PM
I am totally new to building website although I have very very basic knowledge of html tags and syntax.

I want to build a website with two static sections and one dynamic section. The static section at the top to contain company name, logo, slogan etc. and the one at the left to contain navigation bar. I want all output from the hyperlinks to go to the 3rd section with the other two sections remaining visible all the time so the users can click on any link from where ever they are.

I had started by using frames and setting the "Target" attribute for every link to the "Name" attribute of the 3rd frame. But then I read some places that some browsers don't like frames and you will be better off staying away from it. I then decided to use a non-frame approach but don't know how.

Can someone please guide me step-by-step how to do it. I have downloaded some free CSS templates but can't figure out how to accomplish what I want to do.

Any help will be greatly appreciated....

Thanks.

Subhash

mlseim
05-30-2007, 07:40 PM
The top (banner) and left (nav) will be CSS <div> sections that appear
the same on all pages. The center part (content) will change from page
to page. That way, you don't need to use any frames, and every page on
your site has the same "look" and "layout".

As your page refreshes (from one page to another), the banner section and
nav section remain constant. Hard to explain, but see this site as an
example: http://www.cgrelayforlife.com

If your webhost allows PHP scripting, you can even do the content part
dynamically (like the example site). The "nav" part is also dynamic, in that
the current link changes color from page to page. All of the content is
inserted from text files (there are no static web pages).

You can view the HTML source and CSS source to see how the <div>
sections are layed-out. It's a fairly basic, plain layout.

Subhash81
05-31-2007, 02:06 PM
Thanks mlseim for your reply.

I looked at the html and css code. What I can't figure out is that what is there in the html and/or css code that tells the browser to send the output from hyperlinks to the div id "middle". I hope I got that div name right.

A sample navigation button code looks like this:

<div class='nav'>
<div class='navbutton'>
<a href='page.php?p=9'><span class='button'>How to Participate</span></a>
</div></div>

And the css code for the two classes is follows:

.nav{
padding: 0px 0px 0px 10px;
width:130px;
height:40px;
}
.navbutton{
background-color: #99FF00;
padding: 7px 5px 7px 5px;
}

Can you please help me figure out what piece of code directs the output to "middle" div. If it is the php code, then is there a way I can do that without coding php as I am comparatively new and would like to take things slowly.

Thanks again for your help....

Subhash.

mlseim
05-31-2007, 02:27 PM
Well, it is PHP, but it doesn't have to be.

If you had 10 pages, each page would have the same HTML and CSS.
The top banner part would be the same and the nav part would be the same
on every page. It's the part in the middle that would be different between
pages.

Each time you press a button (hyperlink), it actually reloads a new page.
It is a whole new page, but since the layout is the same, it appears that
only the middle changes.

Here are two test pages that link to each other, using no PHP scripting.
This will make it easier to see what I'm trying to explain:

http://www.cgrelayforlife.com/test1.html

Subhash81
05-31-2007, 02:59 PM
Thanks. I think I am getting the idea.

Now, my next question what if I need to change the navigation bar along the way, will I have to change the code in every page or is there is a better way to do it.

Subhash.

mlseim
05-31-2007, 03:18 PM
Unless you use PHP, you'll have to change it in every page.

That's the whole thing about PHP ... it's powerful and allows for dynamic
page creation. If your webhost allows PHP (which most do), you can use
PHP and we can help you with that.

The only thing I'm not sure of is how you are creating your pages. Using
PHP requires you to change the file extensions from .html to .php

So, if you're creating pages offline, they won't appear on your PC because
your offline browser can't process .php files. PHP is something that happens
on the webhost's server.

Tell us a little more about how you create your web pages. Are you using
Notepad (and doing it by hand), or some software like Dreamweaver?

Can you upload your existing template (even if it's not done) to a website
and provide a URL to your page?

Subhash81
05-31-2007, 04:11 PM
I am using Dreamweaver 8. It is a great software and allows you to create just about any document including html, css, php etc. I am working offline to create my pages and will upload once I am done.

So, if my browser will not process php files, that means I am limited in that way. I have just started on my Home page and still on my top banner div. I would have uploaded my template but it is really not much in there right now.

However, I can give you the link to my partially completed website which I did in frames. I had not finished it before I decided to do away with the frames. However, that is the look and feel I want for my website.

Here is the link:

http://www.torontogtahomes.com/

Thanks for your help...

Subhash.

VIPStephan
05-31-2007, 04:31 PM
If your host doesnít support server side scripting, yes, you are a little limited as you canít have real dynamic websites. However, youíd still build your site like it was and with the search and replace function of Dreamweaver (Ctrl+F or Option+F (Mac)) you can easily change parts on all pages of your site (like your menu if it looks the same on all pages).

If you have server side scripting you can use SSI (server side includes) or PHP includes to put your menu code in its own file and include it on every page where the menu should appear. This way you only have to change it once and itís automatically changed on every page.

As to the dynamic content section and links going there this is also a very basic, yet powerful PHP thing. There is a thread (http://codingforums.com/showthread.php?t=115114) with a very similar question.

Hope that helps.

Oh and by the way: You might be interested in becoming member at http://sharetoronto.com, eh? :) Itís still in development and not really official yet but keep it in mind for near future. ;)

Subhash81
05-31-2007, 04:41 PM
Thanks VIPStephen for your help. I will look into that thread and see what I can learn from there.

And for mlseim, I think I screwed up something while uploading the latest version of my website in frames before I posted the link in this thread. Please forgive me if you get different behaviour everytime you visit my site. I am trying to fix it and bring it to the stage it was before.

Thanks.

Subhash.

P.S. I fixed it now. (11:07 AM EST)

mlseim
05-31-2007, 06:38 PM
torontogtahomes is using 1and1.com as their webhost.

Do you know which package they have? Linux or Windows, and
what account package they have? beginner, home, business, etc.

Interesting to note that only the business level and above allow SSI,
and I don't see PHP listed anywhere, but MySQL is listed ... very strange.

Subhash81
05-31-2007, 07:17 PM
They do support php3, php4 and php5. Go to http://order.1and1.com/xml/order/Hosting;jsessionid=681A369D339F7D20D734036710B2D7CD.TC60b?__frame=_top&__lf=Static and click on "more...' under Site Building Tools. You will see it. They have both Windows and Linux hosting.

I have taken Home package.

mlseim
05-31-2007, 09:24 PM
Create a new directory called "test" and then create a new
webpage that has the banner on the top and nothing else.
Call that page "index.php". Upload "index.php" into the "test" directory.

You can start with this basic format:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Your Title Here</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="key1, key2" />
<meta name="description" content="Describe Your Site." />
<link rel="stylesheet" href="style.css" id="folio" type="text/css" media="all" />
</head>
<body>
<div id="content">
<div id="banner">
Put your banner HTML here
</div>

<div id="content_wrapper">

<div id="left">
Your navigation will go here
</div>

<div id="middle">
Your content will go here
</div>

</div>

<div id="bottom">
Your Footer will go here
</div>

</div>

</body>
</html>


Create a 2nd file called "style.css" and create a simple style sheet that
defines your new page colors, etc. You can start with this:


/* ----------------------------------------------------------------+
| Cascading Style Sheet |
-----------------------------------------------------------------*/

html, body {
background-color: #FFFFFF;
cursor: default;
font-family: "Arial", arial, "MS Sans Serif", Geneva, sans-serif;
font-weight: normal;
font-size: 10pt;
line-height: normal;
margin: 0px auto;
width: 775px;
padding: 0px 0px 0px 0px;
min-width: 775px;
text-align: center;
}

a:link,a:active,a:visited {
background-color: transparent;
color:#000;
text-decoration: none;
FONT: 13pt "Arial","Arial",sans-serif;
TEXT-ALIGN: left;
}
a:hover {
background-color: transparent;
color: #000;
text-decoration: underline;
FONT: 13pt "Arial","Arial",sans-serif;
TEXT-ALIGN: left;
}

img, img a {
border: none;
}

h1 {
background-color: #transparent;
padding: 0px 0px 10px 0px;
margin: 0px auto;
font-family: "Arial",sans-serif;
font-size: 14pt;
color: #5e6563;
text-align: left;
}

/*
---------------------------------------------------------------------
| ID's and Classes
---------------------------------------------------------------------
*/
#content {
background-color: #FFFFFF;
margin: 0px auto;
padding: 0px 0px 0px 0px;
width: 775px;
text-align: center;
border: 1px solid #aaa;
}
#wrapper {
width: 775px;
}
#banner {
margin: 0px auto;
width: 775px;
height: 200px;
text-align: left;
}
#content_wrapper{
width: 775px;
text-align:center;
}
#left {
background-color: #transparent;
margin: 0px auto;
padding: 0px 5px 0px 5px;
font-family: Arial, "MS Sans Serif", Geneva, sans-serif;
font-weight: normal;
font-size: 13pt;
color: #eee;
line-height: 14pt;
width: 150px;
/* height: 600px; */
text-align: center;
float: left;
border-right: 1px solid #eee;
}
#middle {
background-color: #transparent;
font-family: Arial, "MS Sans Serif", Geneva, sans-serif;
font-weight: normal;
font-size: 13pt;
color: #333;
line-height: 14pt;
margin: 0px auto;
padding: 0px 0px 0px 30px;
width: 550px;
text-align: left;
float: left;
}
#bottom {
margin: 0px auto;
width: 775px;
clear: both;
padding: 0px 0px 10px 0px;
font: 11px Arial,Arial,sans-serif;
color: #bbb;
text-align: center;
position:relative;
bottom: 0px;
}


In your "index.php" file, right before </head> put this line:
<link rel="stylesheet" href="style.css" id="folio" type="text/css" media="all" />

Put everything into that "index.php" page to make it look like your original site.

When you go to: http://www.torontogtahomes.com/test
You should see your new webpage (index.php).

Adjust background colors in the "style.css" file to what you want.

Let us know when you get that far. So basically, you're create a new website on one
page without frames. Once you get the page looking correctly by coding in all of your
HTML, we can take it apart and do some PHP includes.

Subhash81
05-31-2007, 10:14 PM
Thanks mlseim.

I am working on this code but I need some more help in setting up my Banner section. Can I have more than one images in the Banner, one left aligned and one right aligned and then I want to put some text in the middle.

I put another div tag withing the Div Banner and inserted an image there. Then I tried to add another Div tag but that one shows below the previous image. If I try to add Float:Right property, the whole thing moves to the right.

I am not sure if I have been able to explain clearly or not. If I did, then please help me what I have to do to make it look like the way I want.

Thanks again....

Subhash81
05-31-2007, 11:45 PM
Sorry to bother you and I hope you will forgive my ignorance and stupidity. I am really going nuts here.

I have these two files index.php and style.css both in my test folder. I am trying to start from a very simple page here. I just want to add 2 images in the banner, one on the left and one on the right. That is giving me problem.

Then I went and added two links in the navigation bar without using either ul or ol. After adding the links, although I can see the html code added in the code window but the navigation bar is all black. I guess the background of the navigation bar as per style.css is black. I tried changing the color attribute to white but I still can't see the links.

What am I doing wrong here....

Thanks and please be patient with me.

mlseim
05-31-2007, 11:54 PM
Upload pages into some directory so we can see them too.
Don't worry about bothering us, we'll see what you have so far.


<div id="banner">
<img src="asdf.jpg" style="float:left;">
<div style="float:left; padding:0px 20px 0px 20px;">
this is my text
</div>
<img src="asdf.jpg" style="float:left;">
</div>


Here is the padding sequence:
padding: top right bottom left;

With the nav part, when we see the test site, we'll see what is happening.

Subhash81
06-01-2007, 12:15 AM
Thanks.

I have uploaded the pages to http://www.torontogtahomes.com/test/.

I can now see the links with my browser but in Dreamweaver, I can't see it.

Please have a look....

mlseim
06-01-2007, 02:51 PM
See my test site:
http://catpin.com/test/

Subhash81
06-01-2007, 03:54 PM
See my test site:
http://catpin.com/test/

That really looks cool. This was exactly what I was trying to do. You are the best. Thanks a lot.

Now for my learning process:

1. I copied the source index.php to my local drive and opened it in Dreamweaver. It all looks scrambled all over the place but in the browser it just looks great. For example, the Toronto Waterfront picture appears below the Century 21 logo right aligned. Why is not placed horizontally on the same line as the logo. I am so far used WYSIWYG types of development but with DIV's I guess you can't have that. Am I right ?

2. When I try to view in browser from within Dreamweaver, it asks me for a php server. What do I do there. I wanted to test all the links and see if the links open up in the middle.

A little more help and I think I will driving in 1st gear.....

ahallicks
06-01-2007, 03:59 PM
That really looks cool. This was exactly what I was trying to do. You are the best. Thanks a lot.

Now for my learning process:

1. I copied the source index.php to my local drive and opened it in Dreamweaver. It all looks scrambled all over the place but in the browser it just looks great. For example, the Toronto Waterfront picture appears below the Century 21 logo right aligned. Why is not placed horizontally on the same line as the logo. I am so far used WYSIWYG types of development but with DIV's I guess you can't have that. Am I right ?

2. When I try to view in browser from within Dreamweaver, it asks me for a php server. What do I do there. I wanted to test all the links and see if the links open up in the middle.

A little more help and I think I will driving in 1st gear.....

DO NOT use Dreamweavers design view to build web pages, whatever you do! If you touch anything in the design view it will add random crappy code that you don't need. The design view of Dreamweaver also hates php and includes and will display text instead. I strongly advise you to ONLY use the code view in Dreamweaver.

As for the second part... because you can't view php files on your local machine you will need to upload them to a server, and refresh the live page, rather than preview in a browser which caches to your local machine, which you can't do with php files. You can set up a testing server, if you have a local php server at home, but if not just upload to your server and test from there.

mlseim
06-01-2007, 05:23 PM
Like ahallicks says, and I think a previous thread discussed that you
can't view PHP code on Dreamweaver. I actually don't use Dreamweaver
myself, I just use my FTP program (with Wordpad) to make changes,
upload the file and view it online.

But now, you can see where this is going ...

The part that is now between <div id="middle"> and </div> will be
a separate text files that will be "included" using PHP. So, when another
page is viewed, it will reload that part with different content.

For now, get everything exactly the way you want, and that includes
a couple of the other pages. Do it all with normal HTML, but make the
file extensions .php instead of .html ... when everything (color, fonts,
layout, position, etc) are just how you want, we can then go ahead and
get the PHP dynamic part done.

This leads me to asking you about how you will be updating the houses
on the main page. Will you be changing these every day? With PHP, it
will be easy to edit the houses without editing the web page.

Also, with PHP, you can actually grab information from another website and
create your "latest house" list ... something to think about. You can even
hot-link to photos from another site. You should get permission from the
other site owners asking them if you can hot-link images and text from
their site. If so, give us a link to where you might be grabbing information.

This would be similar to putting an RSS Reader on your page.

But, you're sort of getting the idea of it ... and hope you're learning some
new things - that's really the point of this forum.

Subhash81
06-01-2007, 06:05 PM
Thanks ahalicks and mlseim.

Now let me complete the website with whatever info I have at the present. As for updating the houses on the main page, I plan to do it on a weekly basis. I will be manually picking up the selected listings from all the listings with our company and then downloading the images and updating links to those listings. I am not sure if we can automate that process because there are no rules to follow what listings I want to show on my page. If I was to build a page showing all the listings then I think the automation will work. I will definitely look at that for "View all our Listings" link.

With regards to not being able to use Dreamweaver or any other software for php does scare me a bit. Since I am new to all this,in Dreamweaver I can get all the context sensitive help for css, php and html coding which is missing in Notepad. I will give it a shot for sure.

Thanks again and I know I will be back with more questions.

Subhash81
06-01-2007, 10:41 PM
Hi mlseim,

I have arrived at the basic look and feel of my website, the way I want it (at least for now). Please have a look at http://www.torontogtahomes.com/test2/index.php.

Any comments, criticism and/or opinions are more than welcome. In particular I want to you look at my Index.php and style.css and see if I could have done better in terms of keeping most of the style info in the css file. I have placed some inline styling info in the index.php. May be that could be done a better way but at the moment I found that method to be the quickest.

I know most of my linked pages are under construction but I will fill them up once the design is ready.

I need your help on two things:

1. How do we make all links to open in the #middle div.
2. How can I align the House Price Line with the bottom edge of the house pictures. You will notice they are at different vertical position in relation to the house picture. I also want to trim the spaces around the house prices.

Thanks a lot.

mlseim
06-01-2007, 11:55 PM
Subhash ...

See the Private Message I sent ...

The Private Message link is in the "welcome box"
in the upper right corner of this page.

============

See the test page now:

http://www.catpin.com/test

Click on the "Buyer Tips" link to see the PHP Include in action.

mlseim
06-02-2007, 12:04 AM
I just happened to see the classic movie: "The Godfather"

I'll do whatever Subhash says ... he looks like any of the
characters in that movie. Don't snuff me out please!

Subhash81
06-02-2007, 02:03 AM
I just happened to see the classic movie: "The Godfather"

I'll do whatever Subhash says ... he looks like any of the
characters in that movie. Don't snuff me out please!

Hey, I have seen Godfather too but it has been a long time. Which Godfather are you referring to I, II or III. I have not seen III.

I can not say for myself if I look like any of the characters in the movie but may be other people find resemblance of some kind.

Let me know if you find out....lol...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum