Developing a Website with H&M - HTML Back Ground Image

This forum is for the discussion of the business and craft of writing help. For example writing style, choices of HTML Help or WinHelp or browser-based and so on...

Moderators: Alexander Halser, Tim Green

Post Reply
bretwhiteley
Posts: 5
Joined: Fri Jul 30, 2010 6:41 pm

Developing a Website with H&M - HTML Back Ground Image

Unread post by bretwhiteley »

I am fairly new to HTML and Help and Manual. Have however, developed an awesome set of manuals (User, Technical and Developers) for some engineering software we developed. Help and Manual worked great for that, so i decided to try and use it to update my website. I spent about two weeks last Christmas break trying to get Dreamweaver to do this, and it was just more complicated that it needed to be! I am thus exploring using H&M to see if I can use its really simple authoring environment to develop my website.

What I want is going to just be a basic table layout, with graphics (borders, headers, footers, navigation menu's) and content in that table. However, i would like to insert a graphic background into the area "around" the table in the web browser. I think I should do this by editing the HTML source in the HTML Page Templates in H&M publishing options. Is this correct? also, any snippets I can use to get this going would be appreciated. Would be best if i could have the image either stretch across the whole page, or be centered and then use a colored background to provide the depth in the webpage appearance I am looking for.

Thanks for help, assistance anyone can provide.

Bret.
User avatar
Tim Green
Site Admin
Posts: 23155
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Developing a Website with H&M - HTML Back Ground Image

Unread post by Tim Green »

Hi Bret,

You can find a good set of tutorials that also explain how to do exactly this in the DHTML Examples tutorial project include with Help & Manual. You can find it in your Documents\My HelpAndManual Projects\Examples folder. The information on background images is in the Miscellaneous Features chapter, but the other chapters also contain a lot of useful tips. :)
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
bretwhiteley
Posts: 5
Joined: Fri Jul 30, 2010 6:41 pm

Re: Developing a Website with H&M - HTML Back Ground Image

Unread post by bretwhiteley »

Thanks Tim,

Went through that tutorial, some nice hints and info!

I was able to design a really nice website using just tables, and background images in tables nest in other tables. Really simple, if you follow a step-by-step routine for constructing the page, and best of all you don't have to mess with HTML, but just apply a back-ground to tables - really simple.

However, what I still need to do is make a customized Navigation Menu. I am going to do this with expanding & collapsing sections, nested in each other. However, I want to use CSS to add some bling to when a navigation button is up, down or hovered over. I saw in the tutorial you referenced in your reply how to do this with text, but can it be done with a graphic. I assume so, would you mind providing me the snippet? I will have for "sections" to the website:

About Us
Services
Projects
Software

I will make a separate graphics file for each of those and name it accordingly, i.e. About_Us_up.gif, About_Us_down.gif, About_Us_hover.gif,

Thanks for any assistance you can provide on this. I am really enjoying this HAT!! Great job.

Bret
User avatar
Tim Green
Site Admin
Posts: 23155
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Developing a Website with H&M - HTML Back Ground Image

Unread post by Tim Green »

Hi Bret,
However, what I still need to do is make a customized Navigation Menu.
For navigating in the topics I would just use the normal TOC. For navigating inside the topics there is something much better, just use our Premium Pack skins. Click here for an example of the Help & Manual help using this.

Click on the Image icon that is active on pages where there is a local drop-down navigation menu for the page to see how this works. It's easy to set up, you just need to use styles with a special letter sequence in their names for the headings you want to include in the menu. You can find out more about the Premium Pack here:

http://www.ec-software.com/products_hm_pluspack.html

There is a new version coming out shortly that also adds advanced javascript popups that are draggable and resizable by the user and a useful utility for copying your settings from one skin to another. :)
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
bretwhiteley
Posts: 5
Joined: Fri Jul 30, 2010 6:41 pm

Re: Developing a Website with H&M - HTML Back Ground Image

Unread post by bretwhiteley »

Hey Tim,

Thanks for the swift response. I Don't want to use the Nav TOC, as my site is only going to have 4 pages! So not really required. As I wont be using that the premium pack skins also won't help me, I don't think?

I am going to have 4 graphic buttons, one for each page. I would like the graphic button to appear depressed when the user is on that page. This should be done with CSS, but the actual programming is alluding me. Is this possible?

Bret.
User avatar
Tim Green
Site Admin
Posts: 23155
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Developing a Website with H&M - HTML Back Ground Image

Unread post by Tim Green »

Hi Bret,

You really need a good book on CSS and HTML for this, it goes beyond the scope of Help & Manual support... You might like to start with this tutorial on programming mouseovers for buttons, however:

http://helpman.it-authoring.com/viewtop ... f=2&t=4209
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
bretwhiteley
Posts: 5
Joined: Fri Jul 30, 2010 6:41 pm

Re: Developing a Website with H&M - HTML Back Ground Image

Unread post by bretwhiteley »

Tim,

Thanks - actually that link you provided will give me what I need. I am now playing with the expanding sections and have a question about that - but will read the current posts and start a new thread if needed.

Thanks again for you help,

Bret.
Post Reply