Website structure - beginners question

[confusedone]

Hi, as a few of you here may know from when I introduced myself, I enrolled on a multimedia college course to learn to make sites - about to start year 2 and still not covered it (??!). Over the summer I thought it would be a good idea to learn dreamweaver and make my own site. It is still in the process - but i honestly haven't a clue what i am doing. Few problems. You can see my portfolio in the making at ASC Digital Media Services - please dont rip me apart too much as it still is very much at the beginning!

I started teaching myself via youtube and other online vids - thing is i think i learned from vids made a few years ago, to go with the software - cs3. Spent a while trying to get my head around using tables for layout, then found out it is not practice any more, went onto frames - not good. Got some good advice on this forum to concentrate on css for styling and am working my way through learning this.

My question is about making multiple pages. You can see my site, if you click through the links at the top, the page moves on the screen as you arrive at the new screen - is this because i've made the pages individually. Or is the done thing to make a template and make each page from the template? Talk of uneditable and editable areas - are they like placeholders to enter content?

Basically im confused as to the basic steps to build a site. If someone can tell me the basic steps, then i can google and research the how to, but searching for things like 'should i use templates' or are 'frames used to design in dreamweaver' etc (for example), brings totally the wrong info really, hence why im asking here. Just for some basic steps to follow, ie make a template, then reuse, only use css and html for a and b, etc.

Also the site, something i think ive done wrong when uploading to server, but if you notice that alanwhitfield.co.uk is the page you go to when you first go to the domain, but if you click around the top navigation, the 'home' is different from the initial index.html - any thoughts?

Sorry if this sounds like i don't have a clue, but i honestly don't. Ive contacted college for advice but seems that that advice is for term time only, so this forum seemed like a good a place to get some basic answers.

Just a word on the portfolio - i am not offering design services so please dont groan when reading - this site is purely to practice making flash and learning how to integrate javascript and all the rest into my pages, and for submission for college work. Please im very open to other ideas, like 'why are you making your buttons in this manner, or this definitely is the wrong way to go about a site'. But if anyone even so much as chuckles at the scouse accent in the animation, i WILL hunt you down with the boys (see avatar) and will be mean business!

Thanks for taking the time to read and any help appreciated

Alan

[tosta]

i suggest you to browse template selling sites for ideas and see how they did it etc. I started once myself did sites like the beginners. just learn and try to make something, use css to design fonts, rollover images etc and beautiful table styles, don't use that long coding for simple things.

Dreamweaver is good for code writing and the functions are minimal that I use there. try to work outside Dreamweaver and look solutions on the web, this will work much better.

Don't use that much images, use css, you can design your text, buttons with that. I suggest you to use php for more or less complex things, anyways php is like everything you need and a little bit of javascript.

it's all about proper design, of course you can use one menu on ever page, example with php, but the website shows up exactly how you designed it.

just use css more and html. and make sure you place flash and other that kind of things to right place(insie table or smthing).

Easiest step is to create 1 table and make it 100% and inside it example make a table with 90% align center, start doing inside there something.

you can make paged individually it doesn't matter, if you design them the same way and with same width ... and so they look exactly the same. use valign='top' at tables etc.. all must be set


couldn't understand what you were looking for exactly but I hope this helps.

[TechnoBear]

My question is about making multiple pages. You can see my site, if you click through the links at the top, the page moves on the screen as you arrive at the new screen - is this because i've made the pages individually.

Well, sort of. If you look at the code for the navigation links on the various pages, the sizes of the images varies from one page to another. This is going to make the page appear to jump about as the menu bar resizes. Just change all the pages to use the same image size.

Also, on pages where the content extends below the viewport, the browser will add a scroll bar, which takes up a few pixels on the right and therefore makes the content shift slightly to the left. Some folk (like me) think this is normal behaviour and don't worry about it; other people go to great lengths to avoid it. It's up to you to decide how much it bothers you.

Or is the done thing to make a template and make each page from the template? Talk of uneditable and editable areas - are they like placeholders to enter content?

Everybody has their own way of working. I've never used templates as such, so I'm not really the person to answer this. I generally build a page with just those elements that are going to be common to all pages, such as header, navigation and footer, then use "save as" to give me the requisite pages. That way I know I'm starting off with all those areas the same and can then work on individual pages. I find this suits me, but I never have to work with large sites.

Basically im confused as to the basic steps to build a site. If someone can tell me the basic steps, then i can google and research the how to, but searching for things like 'should i use templates' or are 'frames used to design in dreamweaver' etc (for example), brings totally the wrong info really, hence why im asking here. Just for some basic steps to follow, ie make a template, then reuse, only use css and html for a and b, etc.

I don't know if this really answers your questions, but have you tried the on-line tutorials at W3 Schools?

Also the site, something i think ive done wrong when uploading to server, but if you notice that alanwhitfield.co.uk is the page you go to when you first go to the domain, but if you click around the top navigation, the 'home' is different from the initial index.html - any thoughts?

Well, alanwhitfield.co.uk implies that it's alanwhitfield.co.uk/index.html, (which it is), but your other links are in a sub-directory: alanwhitfield.co.uk/portfolio/pages/coding.html etc. When you click on the home link in one of these pages, it takes you to alanwhitfield.co.uk/portfolio/pages/index.html. In other words, you have two different index pages in two different directories.

I can sympathise with your problems. I took a college course when I was starting out and found I was being taught outdated methods and deprecated html tags. I learned far more from a couple of good books than I did from the course.

Stick to html for your markup and use css in a separate sheet for styling. Don't use tables for layout - keep them for actual tabular data and make sure they're marked up properly. Add in Javascript and Flash to enhance your pages, if you wish, but remember that some people and devices can't or won't use these, so don't rely on them for core functionality.

And keep asking questions, because it's a great way to learn.

Hope that helps

[Stevie D]

I started teaching myself via youtube and other online vids - thing is i think i learned from vids made a few years ago, to go with the software - cs3.

I'm afraid so. I'd be surprised that the people who made those videos even had opposable thumbs ... that's how far out of date we're talking here

My question is about making multiple pages. You can see my site, if you click through the links at the top, the page moves on the screen as you arrive at the new screen - is this because i've made the pages individually. Or is the done thing to make a template and make each page from the template?

Yes, in a nutshell it's because you've created each page separately, and so the layout is slightly different on each one. A much better plan is to set up one master page, and then every time you want to add a new page, go back to the master page, save it under a new name, take out the bits that you don't want and add the new content. That way you'll get much better consistency across the site.

If you have a repeated block of content that's used on multiple pages, such as the header bar and navigation menu, you can use server-side includes so that you code it up once, and then each page inserts that bit of code in the relevant place - that way, if you need to make any changes, you only have to make them on one file and not every page.

You should use a single CSS file to control the layout and formatting. This is far more efficient and powerful than inline formatting, and also helps to preserve the consistency across the site, because all pages are tapping into the same style information.

Dreamweaver is good for code writing and the functions are minimal that I use there. try to work outside Dreamweaver and look solutions on the web, this will work much better.
...
just use css more and html. and make sure you place flash and other that kind of things to right place(insie table or smthing).

Easiest step is to create 1 table and make it 100% and inside it example make a table with 90% align center, start doing inside there something.

you can make paged individually it doesn't matter, if you design them the same way and with same width ... and so they look exactly the same. use valign='top' at tables etc.. all must be set

No, no, no and no!

1. Dreamweaver is rubbish. All WYSIWYG editors are rubbish. It's built in to the way they work. No editor is capable of producing good quality code without massive intervention.

2. There's very rarely any need or reason to use Flash.

3. If it isn't tabular data, don't use a table. End of story. You should be controlling layout and positioning with CSS. Welcome to the 21st century, I hope you enjoy your time here.

4. Presentational attributes like valign="top" are even more outdated than using layout tables, and have no business whatsoever in any website today.

[molona]

Basically what's been said above is correct. Creating pages individually is not wrong per se, simply it is more work and when you're a professional, the one think that you lack of is ... time!

Creating a template is worth because it saves time. So every single area repeated in other pages will go in its own file (like the main menu). If you ever have to modify it for whatever reasons (let's say you add a new link to the main menu), by modifying one file, the others will be updated too.

One of the technologies used to include that file with the piece of common code to all pages is, as Stevie very well appointed, Server Side Includes. They have the advantage that they don't rely on other technologies, like server programming languages and it is very straight forward to use.

As an example, simply write

<!--#include virtual="header.html" -->

whenever you would write the html code that will create the header area. The exact code will be included there.

PS: if you use this technique, remember that the separated file do not need a doctype or a body. You simply separated part of the content to use it on various pages, and it will go inside a html document that already has doctype and body element and everything

PS2: include virtual means that the route for the file is referenced to the document root. You could use include file instead, which means that the route to the file is relative to the folder where the document is contained.

[confusedone]

Hi, many many thanks for getting back with the replies, really appreciated you taking your time to offer advice.

All the advice is making sense and think all my questions were answered. If (when) i get stuck i shall certainly be asking again here, and once the site is sorted and looks a bit more professional i will post for review.

Thanks again

Alan

[dawnalldread]

Hi, i was reading your advice with interest. I have a similar problem, I have used Flash to display images on my site, but now I have updated them they flash does not work and display my images when people login. The site is written in CSS and HTML, an although I am not an expert i am having to learn quickly how to update the code. What I wanted to know was how easy would it be to change the code from using flash to displaying in a window and the images sliding.. below is a snippet of the code that is in each html code page using the flash code... any help would be appreciated.

thanks

<td width="587" height="200"><OBJECT classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=7,0,0,0"
WIDTH="587" HEIGHT="200" id="slidesimple" ALIGN="">
<PARAM NAME=movie VALUE="slidesimple.swf?xmlUrl=newindeximages1.xml">
<PARAM NAME=loop VALUE=false>
<PARAM NAME=menu VALUE=false>
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#ffffff>
<EMBED src="slidesimple.swf?xmlUrl=newindeximages1.xml"

loop="false"

menu="false"

quality="high"

bgcolor="#FFFFFF"

WIDTH="587"

HEIGHT="200"

TYPE="application/x-shockwave-flash"

PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
</OBJECT></td>

[ralph.m]

You can just replace all that object code with an image element.

[dawnalldread]

thanks I will check this out.

regards

[ralph.m]

I should have added that, in that scenario, you'll need to know the location of the images so you can link to them. (I was mobile when making the last post.)