HTML Help

[Aiken]

Id like to redesign my webiste, and as part of the design id like to incoporate a seamless banner/navigation bar in the top left corner.

For example, what they're sporting over at Ctrl Alt Del

Can anybody tell me how i would go about doing this, or failing that point me in the direction of a good tutorial.

Thanks in advance.

[Black Sparrow]

As far as I can tell, from looking at the page source of CAD... it's just a bunch of sleekly used tables and images.

I googled these up; maybe they can help:

http://www.webdevelopersnotes.com/
http://www.2createawebsite.com/newsletters/issue13.html
http://www.hypergurl.com/sidenav.html

[Dr Neo Lao]

You can also "cheat" and use an imagemap. There's a nice tutorial for imagemaps here.

Basically, you make an image for the bit that you want (banner and nav buttons) and the image map makes specific areas of the image (ie: the nav buttons) into a hyperlink.

They're fairly easy to use, but some people get confused with them. Have a go and see if you like it.

[Aiken]

thanks guys, looks like there's some pretty helpful stuff here.

[House]

Okay.. I kinda need your help, folks! We have our website done and all.. but the **todays_comic** Tag.. doesn't seem to be working right.. when I upload the website.. it just shows the tag. What's up with that? Sorry if this is a repeted question, I don't mean to look like an idiot.

Thanks

[Black Sparrow]

You made one of the most common mistakes in the book. The tag's actually ***todays_comics*** with two "s"s.

[Gubbin]

This is sort of a related question, how do I edit the index template?

i want to add some tags and make my site look pretty, but i cant even figure out how to edit it.

If i open it in word or something, can i edit it and then save it as .html again?
c'mon. help a guy out.

[Black Sparrow]

First things first. Do not edit in Microsoft Word. Word adds all this extra stuff to your coding and messes it up. Edit in notepad instead.

Standard procedure for editing your indextemplate is like this:

1. Download your indextemplate.html in your FTP to your computer.
2. Save an extra copy of the original, as backup in case you mess up.
3. Open the html file you just downloaded. View the page source. This is under View/Source in IE and View/Page Source in Mozilla.
4. Edit the source to your heart's content. You can save it as an html file and refresh the browser window showing the file to view your progress.
5. When you're done, save your final result (again as html) and close it up.
6. Go back into your FTP and delete the indextemplate in the workspace folder.
7. Upload spankified version.
8. Rinse and repeat with your dailytemplate.html.

Also, to upload additional pages (cast and info pages), just open a new notepad file and follow steps 4-7, uploading the workspace/webpages folder.

When you're done with everything, run a manual update. Regular should do it, although full would be appropriate if you had any "extras" pages.

[Halcogeth]

Is there any way to get the tags for previous day and next day navigation buttons to work with an image map? Or maybe another automatic way to get the links to point to the right comics?

[Moonshadow]

I suppose you could do it as a "fake" image map, where you create your main graphic, and slice it into four pieces (for first, previous, next, last); when it loads up, I think they should align against each other and create one full image again. Though I haven't tried it so I can't say for sure...

[Dr Neo Lao]

Yeah, you can "fake it", but then it's not an imagemap, it's just a regular table with links.

An imagemap works great for 'static' links for navigating around your site (links to things like the archive, cast pages, about info etc) but not for dynamic links (meaning: that change each update). If you want your comic navigation buttons (back / forward) then the best way would be with a table.

Note that with a table you will have to do a lot of messing around to get a seamless look. It's not really hard, you just need to spend time "tweaking it" to get it to look right.

The easiest way would be to use a program (such as Adobe Image Ready) that will let you cut up an image into a webpage, then pull out the relevant bits of code and discard the rest.

If you can't work it out, make the complete image, pm it to me and I'll cut it up for you and send you the pieces and the code to make it work.

[Halcogeth]

Yeah. I gave up on the image map in the end and used a table. However, something weird happens on the index page. The ghosted next button image doesn't show up and i don't know why. I suppose i'll have to take out the dynamic link and insert the image in the main page.
...
Which template's for the main page and which one's for the individual comics? I forget.

[Black Sparrow]

You may have the ghosted image labelled wrong (such as a capitalized extension. It's finicky that way)

Your indextemplate is for your indax/main page. The dailytemplate is for your archived (non-current) pages.

[Oualawouzou]

It is a known bug, ghost images for "next day" and "today" do not appear on the index. Simply replace the two ***tags*** with the appropriate HTML code to show the images on the indextemplate.html only (leave the ***tags*** on the dailytemplate.html). After all, you shouldn't have to have the non-ghosted buttons on your index, provided you do things the classic way (i.e. with the homepage showing the latest comic).