Another "making a webpage" thred : )

[@work]

Heya,

I'm doing a summer internship for a company that has asked me to convert a specifications book (essentially 100's of pages of designs and spreadsheets) into a easily navigated website.

So far I have the files all converted to .gifs and .html pages, so I know they will load easily, the problem I'm running into is my almost total lack of web design. They gave me a mac and a copy of Dreamweaver MX and have asked me to get it done, so I'm asking you for some ideas.

Originally I used a script I found at http://javascript.internet.com/navigation/menu-double.html and 2 frames to create a easily navigated site...the first menu would be my index of sections and the second changes by what you pick to list the pages in that section. My two issues with this system are
a) I have no idea how to automatically have the items in the menu creation array change when I move the site from its current folder onto the server so that the links are correct. Because of the sheer volume of pages, it would not be possible for me to change all those links by hand, even using a find/replace tool. How can I get links like the ones this script uses to update automatically?
b) Eventually my internship will be over, and the ideal system would allow someone with even less experience then me update the site. So, how can I set it up so that new menu items or even new sections can be added? If this isn't something I coudl do without advanced knowledge of programing and web design, thats ok...I can write a guide on how to do it by hand. My big hurtle is a) above.

Anyway if this isn't something you really want to work on with me I understand, I do have all summer ot learn this stuff and dont' want you to feel like I'm trying to get you to do my work for me. If you have any suggestions please let me know, I'll check the boards every day while I work on this.

Thanks agian!
Jim.

[spufi]

For a second I remembered a site that did exactly what you want, but I deleted the link some time ago. Thankfully there's Google and the site is still up. I looked at the JS you linked to, and it's junk. You don't even need to touch JavaScript to pull off what you want, if I'm right.

Look at the link below for the layout. Now, I will admit that I would code it differently because it doesn't validate, it uses tables for layout, etc...but it does give you what you need. The menu on the left is one single page and if you need to update it, that's all you need to update. The rest of it is the pages of info.

http://members.core.com/~dfrease/JGFrame.html

[Charles]

You haven't told us anything about this company or much about this project but be careful. You may have a legal obligation to ensure that these specifications follow accessibility guidelines. For instance if you are in the United States then the Americans for Disabilities Act applies if the company employs 15 or more persons and any of them might have to use this spec. (Title I), if this spec. is being provided to a government agency (Title II), or if this spec. is being provided to customers (Title III). (For what it's worth, I have a tendency to do stuff that falls under Title II.) And note, the US Department of Justice, Civil Rights Division is on the record as believing that "Covered entities under the ADA are required to provide effective communication, regardless of whether they generally communicate through print media, audio media, or computerized media such as the Internet." (http://www.usdoj.gov/crt/foia/tal712.txt)

Here's what I'd do and have done. Start with a no frills version of everything. Just the facts as it were but in valid XHTML 1.1 and following the Web Content Accessibility Guidelines 1.0 (http://www.w3.org/TR/WCAG10/). And make good use of the LINK element, designating home, index, contents, search, first, previous, next, last and up pages. If you know that your users are going to use Opera 7 then you could just stop there, because those those links will show up as buttons across the top of the page.

The next step is to learn XSLT. It's not as difficult as it seems. The learning curve is steep, but short. You can master it pretty quickly but you cannot do much until you have mastered it. XSLT is a grammar for describing how to transform XML (and XHTML is a type of XML) into XHTML of HTML or something else. The idea is that once you have properly marked up your spec. all you have to do is change the XSLT style sheet to produce different versions. You can give your boss the spec. with a half a dozen different navigation schemes. Or if somebody decides to change the company logo, you only have to change the style sheet. And if you go the extra mile and learn formatting objects then you can use a formatting objects processor (available free) to generate a printer friendly, PDF version.

But none of this answers your question and I'm afraid that I can't without knowing the spec. and how the different parts relate to each other. Keep in mind the an effective navigation is one that makes it easy to find stuff, not one that makes the user think that you were a cleaver web author. Personally, I rather like the navigation used with the HTML 4.01 Spec. See http://www.w3.org/TR/html4/. Across the top of every page you have links to pages previous and next and to the contents and three different indices. Note also that they have provided two different tables of contents. One is just the H1 headings on each sub page and the other shows all of the headings.

[@work]

Charles - The company I work for is the Graphic Design center for a number of printing plants. We print everything from wrappers to bags, and at this design center we do all of the artwork construction. Basically you could come here with nothing but a name for your, lets say, water bottle and we could design and print your packaging. We design the bottle, output the film, and ship the film to the print plant to get made into a plate and printed.

The spec book I'm working on converting to a digital format is a listing of what each of our printing plants needs us to do to the artwork before we send it to them for printing. Plant A might require us to layout the artwork in one way, and Plant B in another. An example of both layouts would be in this book. Essentialy the book is 3 ring binder, divided into sections by Plant, and containing information that is easily converted into 1 page .gif's or .html pages. The entire site will be in house only, it will only reside on the intra-net, and it does not have to be compatible with anything other then IE.

As for accessibility, I'll talk to my boss, but for now its safe to assume no extra measures will have to be taken.

Spufi- I looked at the page you linked and I see what they did, essentially, but I have a few questions. First off, what is validation? Is it checking your webpages compatability with other browsers or soemthing else? Second, I had used a two frame layout like this one, and was drawn to that script simply because it provided very quick navigation for a book that will reach about 10 sections and 800 pages. My worry is that if I use the listing that this page does, I will have something that is inconviently long to scroll through. Is it possible to make a navigation like the one I had linked without using javascript? The key for me is that it needs to be easily updatable, I have to have the ability to add new pages or new sections at will, and I need to be able to move the entire site from folder to folder and have the links update when I do.

Anyway if you have any ideas let me know, in the meantime I'm going to look over that webpage some more and discuss accesibility with my boss as per your suggestions.

[spufi]

First of all, I read the JavaScript incorrectly. I thought they had multiple <body> tags and the instructions kind of were incorrectly worded, but I went back and tried out the code. I'll get to that in a second.

Validating is making sure your page is valid against W3C standards. You can take a look at my sig to see what Doctype you can use. That link only list ones for HTML 4.01, XHTML 1.0, and HTML 1.1. Those are the most current. Going to XHTML isn't that big of a leap, so if you are willing to do it, go for it. XHTML is more restricted in terms of rules, but it's also a lot easier to make sense of the code due to it being well formed. This also makes it nice for having other people read your code which you said you are having somebody take this project over at some point. I personally use XHTML 1.1 like Charles mentioned above. However, XHTML 1.1 doesn't have a frameset DTD. Anybody know if it allows iframes? I don't really use frames, so that's one of my weak areas. If iframes are a no go in XHTML 1.1, then you can use the Doctype for XHTML 1.0 Frameset. Beyond a Doctype, you will need a <meta> tag setting your charset. Here's one I use. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

Like Charles mentioned above, there might be accesibility issues. One is if a person has JavaScript disabled. If you use your JavaScript menu, then a person is stuck in terms of navigation. Not to say you can't use JavaScript, you need to have a work around incase a person can't use JavaScript. You also don't have to use JavaScript to pull off a menu like that, but you will need some kind of script language to do so.

Ok, let's weed through your questions based on the frame navigation, and JavaScript one. First, let's handle moving the pages to the server. If you have absolute links, then this can make a move tougher because the links can be no longer valid. What's an absolute link? It has the complete path of where you are linking to in the URL. An example on a person's PC. <a href="C:\mysite\index.html">My Home Page</a>. This would work on your PC, but that doesn't mean it would work on the server, or another person's PC. They would have to have the same files and folders stored in the exact same place. I only use absolute links when I am linking to a page that is outside of my website. Everything else is a relative link.

Now, a relative link is showing the path relative to where you currently are. Let's say you are making for home page and you want a link back to your home page. Kind of silly, but just about eveybody does it. Since we know the person is already looking at the index page in the "mysite" folder, the link looks like this. <a href="index.html">Home Page</a> Taking this a step further. Let's say you have all your pages that relate to chapter one on your specs in a folder called chapone. Now you want to link to the index page of it from your home page. Here's the code. <a href="chapone/index.html">Chapter 1</a>. To get back to your home page while in chapter one, all you have to do is link it like this. <a href="../index.html">Home Page</a>. To simplify things you are going to want to create folders for all of you images, and each chapter of the manual. This way you aren't weeding through hundreds of files in one directory just to find the one you want.

This now leads to the frame vs. JavaScript comparison. The frame version will add more scrolling on the users part. However, all you have to do is update the menu frame to link to any new addtional pages, and add those pages. You don' have to worry about where you are at in terms of which folder becasue the menu frame is always at the same position. It's pretty basic really.

The JavaScrpit version get slightly trickier. It will be more clean in terms of design. However, handling links and updating can be a bigger pain. Since your JavaScript would be used on every page, if you put pages in folders, your postion in the directory will change and your menu links will need to be different that what they were when you were in the main directory. You also might be thinking, "but if I have the JavaScript menu on every page and I have to update it, that means I have to update every page." Thankfully no. You can put all of your JavaScript code in file with a .js extension and link to it from your web page. This means whatever page has it linked, brings in that code. All you have to do is edit the JavaScript file and the change happens to all of the pages that linked to it. Even of you have a JavaScript file for each folder's menu, it wouldn't be that bad to update them.

In terms of updating all you need to do is add the option amoung your list and then provide the link to where it needs to go if somebody selects it. For the two option menu like you are thinking of using, add an option into the first one, create a new list of categories in the second option, and give the link to where it needs to go after selecting the second part.

If you have any questions let me know. If you want to see a site done with relative links and folders, just click on the link to my site, not that it's the greatest thing in web design, but you can see how I have like four slight variations of my menu for my site. In other words I don't use the same exact menu on all of my pages.

If you do want to get into XHTML, XSLT, etc., I highly suggest getting a book called "Inside XML." It's a great intro book that covers numerous topics, some of which can be their own book.

[@work]

Ok I asked and all the computers that will be accessing this website,as of now, are running the same version of IE with scripts enabled. I will however look into the valadation thing as you explained it, incase at some point they expand to a online site.

I read what you said about updating the JS menu's, but it doesn't seem to work for this particular script. Now, there is a very good chance that I either don't understand what your saying or that I am doing this wrong, a side effect of my minimal experience with this stuff. In Dreamweaver when I select the menu/list form items and select "List Values" what I see is soemthing like

List Item Value
Choose a Plant /
Plant B /
Plant C /

and
List Item Value
Choose a Page /
/
/
I dunno but it looks like the actual values for the 2nd menu at least are stored within the JScript itself, in the part where you see something like

if(j==1) { // 1st category items
a=new Array();
O("Choose a Page","/");
O("Pg1","Pages/Page1.gif");
}

I'm not sure, but with the actual link information is stored in this array, inside of the JScript....is there any way that Dreamweaver is gonna recognize the link is there? I mean, how could I change this information around without having to actually edit each of these arrays to change pages and create a whole new one whenever I needed to add a Plant. Could it be done some other way, or should I just start looking into other methods of creating the menu's I need. I'd really hate to lose this style of menu, its very easy to navigate, but the way its created makes it really really hard to update. You had mentioned that you don't need to use JavaScript to make a menu like this one, what are the other ways?

Anyway thanks again for your help, and I'll keep trying to figure it out on my own if I can. Thanks again!
-Jim

[spufi]

OK, I see what your problem is in terms of ease of updating. There's a quick and dirty way of doing it, but I'll go see if I can find a site that does it in the way I was thinking and that way it will be a lot cleaner way of doing it. I thought my JavaScript book had an example of it, but it wasn't 100% what I wanted.

[@work]

I brought this problem up with my boss, and he said that unless I can figure out a way of making it easeir to update, as long as I show him what to do he will take responsibility for doing it once I'm done with my internship. That being the case, if you can't find the script that you were thinking about don't worry too much...but if you can that would still be awsome.

On a compleatly different note, if your uploading pages to a remote server using dreamweaver I've noticed it does not automatically delete a file on the remote server if you delete it on your computer. Any way to make that happen automatically?

[@work]

Oh and one more thing....does anyone have a good script for printing a main frame from a top frame? It would be nice if I coudl have a button on my navigation frame that would let me print whats being displayed in the main frame, but since all our computers are Mac's most of the scripts I've tried seem not to work....something about Mac's not having print button capabilities.

Also, is there any way to change the header and footer information when you print a webpage other then doing so on the printer itself? Is there an option or a method in Dreamweaver that would tell the printer to include certain text in either the header or footer of a page someone prints form your website?

[Charles]

If you were to use the XHTML/XSLT method that I described above you would find that

1)it's way easy for someone to update existing or to make new pages,

2)you can use XSLT-FO to generate a "printer friendly" PDF version with whatever headers and footers that your heart desires,

3)all of the software is free.

[Vladdy]

Since this is intranet only application, and relying on javascript is acceptable, I have this script that I developed for an online learning center for course presentation (they insisted that client side scripting solution was OK):
http://www.klproductions.com/wdscp.html

The idea is that each page is presented by a separate HTML document and you have a "Table of Content" javascript file that can be edited to add/delete/rearrange pages. There are 4 hierarchy tiers that you can use. The presentation script itselt takes care of navigation, and TOC generation. All the styling can be customized using stylesheets.

If accessibility becomes a concern, a fall-back version can be made to generate the pages on the server. If you go with ASP the same "TOC" javascript file can be used since it only contains object declarations.

I would still recomend the approach suggested by Charles as it is more universal.

[@work]

In a more perfect world I would learn XSLT/XHTML, but as of a few days ago my bosses were hinting along the lines of "Get it done"....and I don't think I could take the days to learn XHTML and then create a new webpage based on that language. Once I get this done and finished, I may go back and do it if time permits.

I'll check out your script Vladdy, and see if it will make things significantly easier. If so maybe in my free time I can create an alternate website using that script and see which my bosses like more.

Thanks again everyone.

[@work]

Vladdy - I visited the site that you linked but I think it wasn't showing up correctly for me. I use IE5, and all the links when clicked would create a set of sliding bars that I think framed the content, but it was only about 1 inch in height. Some of the buttons would dissapear after a mouseover, so I was really able to tell how the sight looked or worked. Is this just my browser or was this site never compleated?

[Vladdy]

You need at least IE5.5, preferrably 6.0. Better yet, latest mozilla.