Newbie questions for website

[dtforgione]

A friend and I have been putting together my webage, however we are both learning the software, and are having some difficulty figuring some things out. We tried looking in the help section, but we're not really sure what to look for... so here it goes..

The (WIP) web page is:
www.danforgione.com

1.On each of the pages there is some content, that when you resize the browser window (at least with Safari) the text/content stays static, while the rest of the page adjusts to the window. The content is a layer in dreamweaver, and it actually does the same thing inside the program, when I resize the window. How do i get it to all act uniformly?

2. If look at the "animation" page. right not I have a list of my work with thumbnails. When you click on them, it opens a new page with the movie. Is there a way to click on the thumbnail and then have the video load in that white space, without having to create an entirely new html page? i eventually want to do the same with the artwork section and have arrows to click through each of the videos/pictures as well as a back button to get back to the list.

3. How do I get the page to resize viewer's browesers automatically when it's opened so that the extra white space in the BG is cropped?

4. My last question is about search engines...How does my site get recognized by google, yahoo, etc. I already submited/indexed my site with googles webmasters tools, but i thought there was something else with meta tags?

Thanks in advance...and I apologize for all the questions...but like i said i am not sure exactly what to look for in the help section to get answers.

All the best

Dan

[danlefeb]

Hey Dan. Some of your questions are rather broad, so I'll do my best to give a simple explaination for each - let me know if you need more detail :)

1. Looking briefly at your HTML/CSS it looks like you have some conflicting IDs going on. Embedded in your source, your layer1 ID has different properties for width and height, etc. Also, for your container DIV, try using percent values rather than pixel-based numbers for your width/height. This'll make sure it sizes with the browser properly.

2. To get your movie to not go to a whole new page, don't link directly to the .mov file. Rather, embed the content into your current page.

3. I'd highly recommend not resizing the end user's browser. While you can do this, it annoys many people (myself included) when I am browsing a site and the site resizes my browser. I know what size I want my browser to be based on what I'm doing currently and if a site resizes my browser automatically, I generally just close the whole thing and leave don't go back to that site.

4. Scan through Google's webmaster tools for hints on tagging your site. You can add meta tags, but these days it's all about your content. Search engines like Google actually search the text on your site rather than the meta tags. So choose your content wisely!

Hope that helps!

[dtforgione]

Hey thanks for taking the time to replying, I appreciate it. But I have some follow up ?s if you dont mind.

1. Sorry but this went right over my head. I'm looking at my dreamweaver file, but I am not sure what to look for and or change. Should I be looking at the common.css file? or my index.html file? What should the ID's be? And as far as percents..where do I change those, and how do I know what to change them too.

2. Another over the head thing...I remember trying to read about embedding movie files in the help section, but it was really confusing. I think my main problem is when I tried to embed multiple quicktimes, they all loaded and played at once. And I actually have an updated design in a PSD, where the thumbnails are half the size of what they are now, so that you dont have to scroll as much....now its just a matter of setting it up so that clicking on the thumb nail with open the video iside that page with navigation back to the list or onto the next video.

3. After reading with you said, I totally agree. Never thought about it that way. My main concern was just having to see ALL that white.... So my new solution is to make the main BG black so that the page stands out...

4. Makes sense....i'll look into google's instrustions some more..


Thanks again!!

Dan

[danlefeb]

No problem, feel free to ask as many questions as you'd like - we're here to help! :) This may be long, sorry...

1. Personally I don't use Dreamweaver, so I don't know the buttons to click to get it done in there, but as far as the coding is concerned - open up your HTML file and take out all the CSS. That's anything in <style type="text/css"> </style> Since you have the file "common.css" linked, you don't have to have any embedded styles. So for the sake of simplicity, just take it out. :)

You can call the IDs whatever you want - just keep track of what you have where. You can click on where you want to edit in Dreamweaver and it should give you a breadcrumb-type links of where you are at in relationship to your code. For example, it should say html > body > News when you click on your news DIV.

The reason for using percentages is simple, really, and it falls into the whole point of developing a website -- making it look the best on all computers that you can. Unfortunately, not all computers are the same. For example, I have a desktop set to 1280x1024, a different desktop set to 1600x1200, my notebook is at 1024x768, my tablet is at 768x1024 and my computer at work is at 3200x1200. My point is that you have to think about different resolutions, different browsers, even different themes. Someone that has 1024x768 (the most common resolution these days) will view a page differently if they have a browser with tabs and a search bar then someone who doesn't have those things. Anyway, I'm getting a little off track....

The best way to optimize a site for the largest audience is with percentages. If you set your site to fill 100% of the screen then it doesn't matter if they have 1600x1200 or 1024x768, 100% is 100%. Taking that one step further, if you create a wrapper DIV that makes sure it's always 100% of the browser, then if you center your site in that 100% - it'll always stay in the middle. Make sense?

2. You can choose whether or not you want the Quicktime to play as soon as it's loaded or not. The easiest way to do something like that (without making this post WAY too long) is to put a simple iFrame into your DIV and link to an HTML page with the Quicktime on that page. Granted, it's not the best way, but it'll work.

That should give you something to chew on for a little while....Let me know if you have anymore questions!

Edit: By the way, it may be beneficial for you to develop your site with tables first -- just to give you an idea of how things work. Tables are much easier to set up when you begin; I wouldn't advise using them a lot on your final productions but when you're getting started with percentages and absolute values, etc. it's easier when you can see things like tables :)

[dtforgione]

Ok so i tried removing the CSS on the index file, but then the text on my index page ended up outside of everything else, and i couldnt do anything to select it and place it back in the center of my white space....

How do I make a wrapper div? Thats what i would like and what I think I meant to say when i wanted something to resize the browser.

And forget about the Div tag/ iFrame for the QT....totally missing that HAHA

I think my biggest problem is i dont know with div's are, and how they differ from layers.....usually i can dive right into a program and break it down pretty easily. But for some reason dreamweaver is in a league of it's own.

Maybe I should go back and start from square one. I saw dig tutots has a DVD for Dreamweaver 8....maybe that will help?


dan

[danlefeb]

Well your questions aren't really Dreamweaver-related. As I mentioned before, I don't use Dreamweaver either :) Your questions are all HTML/CSS-based questions. So really if you wanted to, you could use Text Edit or Notepad.

A "wrapper DIV" is simply a DIV that is called "wrapper". It's a common name a lot of web developers use, but if you wanted to you could call it "myFunLittleDIV" or something. The name doesn't matter.

Also, there is no difference between a layer and a DIV. A layer is a DIV that has the z-index property applied to it.

Regarding the Dreamweaver kit, I think it'd help you get a jump start on some of the tricks in Dreamweaver. It doesn't go into extensive detail of HTML, CSS, etc. but on the other hand you may not even care to know all the intricate little details! :)

[dtforgione]

right...how do I apply the wrapper div though?

Yea i understand my questions relate more to the coding than to the software...unfortunately i cant afford to spend time the learning it in detail, especially since i have no plans of building another site other than my own. so I am tryin to just get a basic handle on dreamweaver, just so i can get my site up and maintained.

however i have afeeling it would probably take more time to fiddle around with what i have than it would to get more familar with coding.

oh well...


thanks for you help!!

Dan

[danlefeb]

For your purposes, if you only want to create your personal website then yeah - I think the Dreamweaver kit will help you out a lot.

To build a generic wrapper DIV you'd put something like this in your HTML:
<div id="wrapper">Your content</div>

Then the fun CSS would be something like:

#wrapper
{
margin-left: 10%;
margin-right: 10%;
}


What that does is makes sure the margin on the left and right of the DIV is 10% of the browser window. That means the DIV itself will always take up 80% of the screen, right in the middle.

[dtforgione]

ok, so where does that fc css go in relation to the rest of the code?

would it be in conjuntion withthe div coding you have above? or its own line of code? for example would it be something like this?

<div id="wrapper">#wrapper
{
margin-left: 10%;
margin-right: 10%;
}Your content</div>

[danlefeb]

No, sorry...your CSS goes in your .css file (I think yours is called "common.css", right?). Then the <div id="wrapper"></div> goes in the HTML file. They're linked together through the <link> tag in the header of your HTML file :)

[dtforgione]

gotcha....does it matter where in the css file the wrapper goes?

[danlefeb]

CSS files, like HTML, will read top to bottom. So while it doesn't matter where it goes in the file - if you have another ID called wrapper below it with the same properties, the properties at the top will be voided in place of the new properties.

[dtforgione]

ok cool...thanks!