Member Avatar for Funkynassau

I am working on a webpage for our car club and a column by a member that would normally have gone in our printed newsletter now needs to be on this website. It's done in Word, in 2 and 3 columns and contains graphics. I've been trying to figure out how to put it on the website, saving it as a web page ruins the formatting on it, some of the graphics are missing, some of the boxes are moved around, some text overlaps other text. How do I do this?

Thanks
Funkynassau the confused

  • 7 Contributors
  • 11 Replies
  • 363 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by Funkynassau

Dani AI

Generated

Brief summary and recommended approach for a newsletter-style Word column with columns and graphics: recreate the article as semantic HTML + CSS for the best, most portable result, and offer the original layout as a downloadable file (PDF or .doc) as a fallback. ’s quick plain-text fix is the pragmatic lowest-effort option; ’s warning about Word’s generated HTML is correct — that output is bloated and fragile. ’s download suggestion and ’s template/SSI idea are good secondary strategies.

Practical workflow (step-by-step)

  • Extract artwork: in Word use “Save as Picture” or open the document in a viewer that can export images; save images to an /images folder and run an image optimizer (resize and compress).
  • Strip Word formatting: paste text into a plain-text editor to remove inline Word markup.
  • Mark up semantically: use headings, paragraphs, lists, and figure/figcaption for images.
  • Lay out with CSS columns (keeps the newsletter look, responsive and simple):
<div class="article">
  <figure><img src="images/photo.jpg" alt="caption"><figcaption>Photo credit</figcaption></figure>
  <p>Article paragraphs...</p>
</div>
.article { column-count: 2; column-gap: 2em; }
.article img { max-width: 100%; display: block; margin-bottom: 1em; break-inside: avoid; }

Fallbacks, hosting and accessibility

  • For exact-print fidelity also provide a PDF (Word → Save as PDF) linked for download. Host the file on the server and link to it from the page.
  • Use includes (SSI or PHP) for header/footer and drop the article content in a single file to simplify future updates:
<?php include 'header.php'; ?>
<?php include 'article-html-fragment.html'; ?>
<?php include 'footer.php'; ?>

Final tips

  • Add descriptive alt text and captions, keep images web-optimized, and preview in several browsers. If HTML-Kit (or any editor) is installed but no desktop icon appears, look under Start → Programs or the Program Files folder for the executable and create a shortcut, or re-run the installer to recreate shortcuts.

Recommended Answers

All 11 Replies

Member Avatar for samaru

Saving a Word document as a web page is a no-no. It adds so much unnecessary HTML and other bloat that makes it unmanageable. I recommend you recreate the page from scratch by hand or use Dreamweaver or even FrontPage. The HTML code that Word generates is a train wreck and it's not standard.

Member Avatar for Roberdin

Alternatively provide it as a download on your site so that when opened it opens in the browser window.

Member Avatar for Funkynassau

Thanks for your reply. The author of the article re-did it for me in plain text and I added the tags and away we went. It's not as fancy looking as the original that we put in our newsletter, but in reality it didnt need to be.

I have Arachnophilia, a freebie, but not Dreamweaver or Front Page. Are there any freebies that are particularly good? I dont need to do clever stuff very often, but this time it would have been handy to know how!

Thanks
Funkynassau

Member Avatar for rixius

DreamWeaver has a free trial, but if you're going to be working with web pages I recommend you learn to code the old fashioned way, via text editor like Notepad or something of the like. ALSO, if you sign up for the Microsoft Beta of the Microsoft Visual .NET studio, that works like a dream too. :) *until last week had forgotten he had 2002 dev edition, and lovin it*

Member Avatar for samaru

Thanks for your reply. The author of the article re-did it for me in plain text and I added the tags and away we went. It's not as fancy looking as the original that we put in our newsletter, but in reality it didnt need to be.

I have Arachnophilia, a freebie, but not Dreamweaver or Front Page. Are there any freebies that are particularly good? I dont need to do clever stuff very often, but this time it would have been handy to know how!

Thanks
Funkynassau

I suggest you learn to work with the basic tags first. For this you can use Notepad. Once you know what the basic tags do, and know what it takes to create a simple web page, move to an editor. It saves so much time as your web pages get more complex. Here are some free editors:

http://www.evrsoft.com/1stpage2.shtml

You can just search for "web editor", "html editor", "html gui", "html ide"

I've only tried a few free ones, but none compare to Dreamweaver or GoLive.

Member Avatar for alihamilton

Alternatively provide it as a download on your site so that when opened it opens in the browser window.

This interests me...I have to develop a form which can be used on a website too. How do I provide it as a download on the site as you have suggested above. Please remember that I need lots of guidance and give simple instructions!

Member Avatar for samaru

This interests me...I have to develop a form which can be used on a website too. How do I provide it as a download on the site as you have suggested above. Please remember that I need lots of guidance and give simple instructions!

If you just want the document for download, upload the document to your web server, and create a hyperlink to it. Make instructions to "right click and save as..."

Member Avatar for alihamilton

Thanks! I have often wondered how that was done...and it is so easy!! I learn something every day!

Member Avatar for floris

A word document saved as .html page results in a 500kb file.
Make this in any other html editor and the page results in a 100kb file.
It is amazing how many useless and none-working code is inserted to try and emulate the design.

Create a template and include the txt as a ServerSideInclude file.txt and have your stylesheet.css mark it up. And offer the .doc as alternative for download.

That would be the quickest way for a non-dynamic site to include text from third parties.

Member Avatar for Member #2466

I have Arachnophilia, a freebie, but not Dreamweaver or Front Page. Are there any freebies that are particularly good? I dont need to do clever stuff very often, but this time it would have been handy to know how!

I like htmlkit 1.0

Much more functionality than arachnophilia. Try http://download.com.com/3000-2048-4687625.html?tag=lst-3-1

the page for the product is:

Hope this tool works as well for you as it did for me. Of course, I use dreamweaver now along with fireworks, swishmax, go live, photoshop, photoshop elements, and frontpage for quick fixes. But htmlkit will get you going in the right direction and the price is just right! :cheesy:

Member Avatar for Funkynassau

I just dowloaded html kit and it looks really good. The only problem (and I know this sounds stupid!) is how on earth do I start the program? It didnt put an icon on my desktop and a look around in windows explorer didnt clue me into what to click to get it going! I feel dumb asking this as it ought not to be difficult!

Thanks
Funkynassau

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.