Need help using CSS style sheets to create web pages in Word

D

Daiya Mitchell

Hi John,
Can we have a think about how we're approaching this?? :)
Sure.

The user has asked how to add a Cascading Style sheet to a Word HTML file.
If you know a better method than the one I use, then please share it.

Didn't know that trick. Well, had never considered/needed the Save As Text
trick to get the raw markup.
There are users out there who simply want to put photos of the cat and dog
on the web. Word is fine for that. And that's what they're asking...

So is Mozilla Composer (free, basic, designed for this type of user).
Now: OUR job is to help that user do what she wants, with the time,
software and training she has right now. Are WE doing the best WE can?

No job involved--and if I weren't a teacher as well, I wouldn't hang out
here. The best I can involves people increasing their understanding of a
topic.
'Scuse the rant :)

Scused. :)

Daiya
 
D

Daiya Mitchell

Whoops, wrote my response too quickly.
Didn't know that trick. Well, had never considered/needed the Save As Text
trick to get the raw markup.

Oops, that was a lie, cause I have seen raw Word markup. Save as WebPage
from Word, then opening in (free) TextWrangler works also. (TextEdit/Pages
don't. Hey, neat, I can open the same doc in two apps at once. Wonder what
would happen if I tried to make changes?)

Not this user.... She really does need something else.

Shelley has an existing CSS that gives her a design for a webpage. It will
depend greatly on the CSS and her Word doc whether adding it to Word's
markup gets her what she wants. If all she has is Word, she's going to be
totally unable to do any tweaking to make it work. If the CSS creates
tables, then she'll have nothing she can use to fill in the tables, cause
all she's got is raw markup that she doesn't understand. If she didn't use
heading styles in Word, then linking the CSS will fail even at that level. I
wonder what would happen with a CSS that uses divs?

Unless, of course, it's a CSS designed to be linked to Word-created
documents, and came with instructions on what to do in Word. Somehow I
doubt it.

I can imagine situations in which simply linking the CSS to the Word markup
and putting it up on the web would get the desired result--but many more in
which it fails.

Let me know if I missed something--it's not like I'm all that up on CSS and
web design.

Daiya
 
C

Corentin Cras-Méneur

Helpful Harry said:
I can't say I've tried it or Nvu though. There's probably other
shareware / freeware webpage editors around too.

Nvu is not that bad actually. The interface is not quite as Mac-like as
I would have liked, but it's hard to complain considering the price ;-)

Corentin
 
H

Helpful Harry

"John McGhie [MVP - Word said:
Now: OUR job is to help that user do what she wants, with the time,
software and training she has right now. Are WE doing the best WE can?

Yes, because Word (and AppleWorks, PageMaker, etc., etc.) are pig awful
at creating web pages. People are MUCH better off using a proper
application (even a free one) rather than wasting time using Word and
then discovering that the HTML it saves doesn't remotely match the
layout you had in Word.

The only exception, as stated, is when the web page you're making is
EXTREMELY simple with NO fancy bits at all, that includes CCS.

The problem is companies (not just Microsoft) who advertise their
products on the very margins of legal and sensible abilities. (Virtual
PC is another great example, "run PC software", but nowhere does it say
"not games".)

Yes, you "can" do web pages in Word, you "can" also use a high-heeled
shoe to bang nails into a wall or a spoon to tunnel out of a jail cell
.... the point is you shouldn't since they're neither designed to do it
and neither does the job remotely properly, easily or speedily.


Helpful Harry
Hopefully helping harassed humans happily handle handiwork hardships ;o)
 
H

Helpful Harry

Kurt said:
I actually think that GL will be downplayed.
Adobe goes for marketshare.

They're also trying to standardise the front ends of their
applications, so it may be easier to simply dump Dreamweaver rather
than re-program it to fit with Illustrator / Photoshop / InDesign
(although no doubt they'll steal ideas from it first to include in the
next version of GoLive).


Helpful Harry
Hopefully helping harassed humans happily handle handiwork hardships ;o)
 
R

Russs

If you know HTML or some other markup language, than any text editor can
work.

But it sounds like you need a program where you can say "I want it to look
this way" and the program handles putting together the HTML or other markup
language to make it look that way. Is that right? These are usually called
WYSIWYG editors. If so, then the Mozilla Suite includes a Composer module
that will help you with that. It's free, so that might be a good place to
start. I know the manual includes some tutorials.
http://www.mozilla.org/products/mozilla1.x/

The market leader is Dreamweaver, and it's competitor is Adobe GoLive, but
those are both pretty expensive, though they do have 30 day trials. I'm not
sure which programs are in the middle--others may have better suggestions.

What do you mean by "take a design"? Where is this design coming from?

Any text editor or web design program should let you link an existing CSS
file to the page you create. Some will offer a "link CSS" command--if they
don't, you might have to learn 1 line of markup language to link it.

There's a whole lot of info on the web--the resources here
http://webdesign.about.com/
I've found to be pretty helpful (skim the left sidebar for tutorials, etc)

Another great website for web design with tutorials from kids/beginners to
experts is:
http://webmonkey.wired.com/webmonkey/
 
K

Klaus Linke

Hi John,

Thank you, I couldn't agree more!

BTW, in WinWord I can download samples (HTML and CSS file) say from
http://www.csszengarden.com/?cssfile=/170/170.css&page=1, open the HTML
file, attach the CSS file in "Tools > Templates and Add-Ins", and the page
will look in Word much like the original did in the web browser.
The same HTML file with CSS attached doesn't look too good in MacWord2004,
though :-(

Regards,
Klaus
 
K

Klaus Linke

The same HTML file with CSS attached doesn't look too good in MacWord2004,
though :-(

It does look fine in "File > Web preview" though... Seems like the Mac BU
took some shortcuts in implementing CSS support.

Klaus
 
K

Kurt

Helpful Harry said:
"John McGhie [MVP - Word said:
Now: OUR job is to help that user do what she wants, with the time,
software and training she has right now. Are WE doing the best WE can?

Yes, because Word (and AppleWorks, PageMaker, etc., etc.) are pig awful
at creating web pages. People are MUCH better off using a proper
application (even a free one) rather than wasting time using Word and
then discovering that the HTML it saves doesn't remotely match the
layout you had in Word.

The only exception, as stated, is when the web page you're making is
EXTREMELY simple with NO fancy bits at all, that includes CCS.

The problem is companies (not just Microsoft) who advertise their
products on the very margins of legal and sensible abilities. (Virtual
PC is another great example, "run PC software", but nowhere does it say
"not games".)

or that it runs painfully slow...
Most would be better off buying a cheap Wintel machine.
 
J

John McGhie

Hi Kurt:

or that it runs painfully slow...
Most would be better off buying a cheap Wintel machine.

Ain't that the truth :) If VPC and Word 2003 are the only
applications running, VPC 6 is quick enough to write a book in Word. i
know, I did it on a 477 MHz iBook :)

I have the latest iBook now, and VPC 7 is barely survivable. One of
the tricks is "don't give the Virtual PC more than 256 MB of memory"
:) Anyone knows that Windows XP runs like treacle in only 256 MB on
a physical WinTel, but in VPC, that's where it's at its fastest. Give
it any more memory and VPC starts paging and it will really grind...

Sorry about the "games". It will run "some" games. It just can't do
3-D graphics emulation. If the game will run without that, it'll run
in VPC.

The performance problem is related to the lack of support for
pseudo-little-endian mode in the G5. VPC had to be re-written to flip
almost every number! That slows things down quite a lot. On a G4,
VPC 6 is noticeably faster than VPC 7, and under OS 9, it's an order
of magnitude faster because it can hog the processor :) Expect a
large performance boost on the MacIntel :)

In the meantime, if you *do* have a cheap WinTel box lying around,
don't lose sight of a little piece of freeware named "Microsoft Remote
Desktop Client for Mac". You can download it, and use it to bring
your Windows desktop and all its applications to life on your nice big
Mac screen. That's how I do half the macro questions in here: running
Word 2003 over RDC on the WinTel. If you have a decent home network,
the response will be practically as fast as it is on the PC...

Cheers
 
K

Kurt

John McGhie said:
Hi Kurt:



Ain't that the truth :) If VPC and Word 2003 are the only
applications running, VPC 6 is quick enough to write a book in Word. i
know, I did it on a 477 MHz iBook :)

I have the latest iBook now, and VPC 7 is barely survivable. One of
the tricks is "don't give the Virtual PC more than 256 MB of memory"
:) Anyone knows that Windows XP runs like treacle in only 256 MB on
a physical WinTel, but in VPC, that's where it's at its fastest. Give
it any more memory and VPC starts paging and it will really grind...

Sorry about the "games". It will run "some" games. It just can't do
3-D graphics emulation. If the game will run without that, it'll run
in VPC.

The performance problem is related to the lack of support for
pseudo-little-endian mode in the G5. VPC had to be re-written to flip
almost every number! That slows things down quite a lot. On a G4,
VPC 6 is noticeably faster than VPC 7, and under OS 9, it's an order
of magnitude faster because it can hog the processor :) Expect a
large performance boost on the MacIntel :)

In the meantime, if you *do* have a cheap WinTel box lying around,
don't lose sight of a little piece of freeware named "Microsoft Remote
Desktop Client for Mac". You can download it, and use it to bring
your Windows desktop and all its applications to life on your nice big
Mac screen. That's how I do half the macro questions in here: running
Word 2003 over RDC on the WinTel. If you have a decent home network,
the response will be practically as fast as it is on the PC...

Cheers

Good tip! VP 7 is almost unusable on my G4 dual 867.
Wonder if I can install the XP Pro system that came with VP on a regular
PC.
I'm probably going to chuck VPC - want to see if i can at least salvage
the cost of the OS.
 
J

John McGhie [MVP - Word and Word Macintosh]

Hi Daiya:

I generally start a CSS for Word documents by using the one Word wrote for
me :)

If you save a Word document as HTML, then open it in a text editor, you will
see an extensive STYLE element up the top (sometimes, several hundred lines
of it).

I cut that out of the HTML and paste it into a text file, which I save as
the CSS. That way, I know that when I attach the CSS to the document, it
will work perfectly.

There seems no way to prevent Word from creating a new STYLE element each
time you save as Web Page, and when it does, the local style element will
override the CSS. So you have to take it out each time you go from DOC to
HTML. Once the file is in HTML, Word will edit the HTML version without
putting the Style tag back in.

Word uses DIVs and SPANs throughout its HTML, and the later versions of Word
will write them into their Style element. Word does not use CSS for tables
(at least, not in Mac Word). So having table elements in the CSS won't
display properly in Word (but it will in the browser).

I had forgotten about Netscape Composer -- You're right, I suspect it would
serve the user as well, and it does have an attractive pricetag :)

Cheers


Whoops, wrote my response too quickly.


Oops, that was a lie, cause I have seen raw Word markup. Save as WebPage
from Word, then opening in (free) TextWrangler works also. (TextEdit/Pages
don't. Hey, neat, I can open the same doc in two apps at once. Wonder what
would happen if I tried to make changes?)


Not this user.... She really does need something else.

Shelley has an existing CSS that gives her a design for a webpage. It will
depend greatly on the CSS and her Word doc whether adding it to Word's
markup gets her what she wants. If all she has is Word, she's going to be
totally unable to do any tweaking to make it work. If the CSS creates
tables, then she'll have nothing she can use to fill in the tables, cause
all she's got is raw markup that she doesn't understand. If she didn't use
heading styles in Word, then linking the CSS will fail even at that level. I
wonder what would happen with a CSS that uses divs?

Unless, of course, it's a CSS designed to be linked to Word-created
documents, and came with instructions on what to do in Word. Somehow I
doubt it.

I can imagine situations in which simply linking the CSS to the Word markup
and putting it up on the web would get the desired result--but many more in
which it fails.

Let me know if I missed something--it's not like I'm all that up on CSS and
web design.

Daiya

--

Please reply to the newsgroup to maintain the thread. Please do not email
me unless I ask you to.

John McGhie <[email protected]>
Microsoft MVP, Word and Word for Macintosh. Consultant Technical Writer
Sydney, Australia +61 4 1209 1410
 
J

John McGhie [MVP - Word and Word Macintosh]

Hi Kurt:

Yes, you can. You need to examine the CD carefully. You got three CDs? I
believe one of them contains a plain vanilla installation copy of Windows XP
Pro.

Cheers


Good tip! VP 7 is almost unusable on my G4 dual 867.
Wonder if I can install the XP Pro system that came with VP on a regular
PC.
I'm probably going to chuck VPC - want to see if i can at least salvage
the cost of the OS.

--

Please reply to the newsgroup to maintain the thread. Please do not email
me unless I ask you to.

John McGhie <[email protected]>
Microsoft MVP, Word and Word for Macintosh. Consultant Technical Writer
Sydney, Australia +61 4 1209 1410
 
S

Shelley

John-
You are a life saver. This is exactly the answer I was looking for
(didn't know the details) to the question I was asking. I am fully
appreciative of all the answers people gave me about using Dreamweaver
vs. GoLive. You are correct and perceptive in your response to the
list. I was just about to give up and unsubscribe. I do appreciate all
the comments about how poor Word's HTML editor is, but I am not in the
web design business and was just trying to find a simple solution to a
little problem. So, should I disregard the Microsoft Word instructions
on their website and follow your advice?

One other thing- While not a sophisticated web designer or builder, I
am fairly computer savvy and can tell the difference between windows
and Mac (LOL).In fact, I have one of each in my world. I would not have
posted to this group if I was a Windows user, so I was a bit insulted
by the initial posts to me that I perceived as rude. I'm a good online
community builder, and didn't get a warm reception here.

You are a hero- thank you.

Shelley
 
D

Daiya Mitchell

I must be one of the people that's aimed at, so I'll certainly apologize for
making you feel unwelcome, Shelley. I assumed that anyone who spoke of
FrontPage as an alternative choice must be using a Windows computer, since
there is no FrontPage for the Mac.

If John doesn't check back soon, yes, you should follow his advice instead
of the website ones. Apparently those were written for WinWord only, as you
said.

Would you mind sharing the link to the CSS you downloaded? I'd kinda like
to experiment to see how this works.
 
J

John McGhie [MVP - Word and Word Macintosh]

Hi Shelley:

Sorry to be late getting back. I've been sitting on Jetplanes getting from
Sydney, Australia to Los Angeles. We're all on our way to the annual
conference at Microsoft :)

One of the functions of an MVP, which you may regard as valuable although it
tends to be Microsoft's least favourite aspect of us, is to reset
Microsoft's expectations and remove their delusions of adequacy. We do this
once a year: as Daiya's students may tell you, this year Microsoft should be
afraid. Very, very afraid :)

Since you are computer-savvy, let me approach your question a little
indirectly. I get extremely frustrated by all the well-meaning "advice" I
see out here about Microsoft, Word, and HTML. Much of it has more to do
with religious conviction than technical reality, and a proportion of it is
completely devoid of business practicalities such as "How long will this
take, and just exactly what will this all COST?"

1) Hypertext Markup Language is an encoding standard that stores "text".
Not "web pages" -- 'text'. It is commonly used for web pages, but that's
only one of the zillion kinds of text it can describe. People who miss this
somewhat fundamental point really have not grasped the basics of HTML, and
you need to treat whatever follows their intake of breath with some reserve
:)

2) Microsoft Word employs HTML to describe Microsoft Word documents. A
Microsoft Word document is potentially vastly richer, more flexible and more
complex than even the most stupendous web pages. Or to put that another
way, a "web page" is a simplistic cut-down of a Word document.

3) The point I am trying to make is that Word is not trying to make "web
pages", and never was. Word is trying to store your document in a format
that can be read by a modern web browser. At this task, it tends to succeed
brilliantly: Word 2003 on the PC can save a document in such a way that if
you throw it up in a solid browser such as FireFox or IE 6, you seriously
may not be able to tell the difference between the document version and the
web version. Apple's Safari will struggle and wilt under the challenge: but
it had different design goals. In the computer industry we have a saying:
Small, Cheap, Powerful: pick any two... Safari is small and cheap :)

4) OK, so Word's "Users" WILL be trying to make "web pages". Word will do
this, but it's not designed to do so. We can force it, but we have to get
under its skin, and we have to help. All of the building blocks are there,
we just have to put them together.

So to make web pages in Word, the procedure is this:

1) Create your document

2) Save it as HTML

3) Use View>HTML Source to reveal the raw code

4) Select the whole of the STYLE element (on a small web page, this will be
a huge proportion of the code: maybe 80 or 90 per cent). The Style element
occurs just below the </xml><![endif]--> tag. Leave that there, and just
take the style element, all the way down to </Style> Cut it.

5) Create a new document. Paste in the Style element.

6) Remove the line at the top that says <style> and the one at the bottom
that says </style>.

7) Save the remainder as Text Only. Ensure the extension is .CSS. E.g.:
"stylestd.css"

8) Go back to your HTML document and add a line like the following:
<link href="stylestd.css" rel="stylesheet" type="text/css">

Make sure you specify the relative path from the web page to its stylesheet,
and use forward slashes for the path separators: colons are illegal in HTML.
Remember that in HTML, everything is case-sensitive: be careful how you
capitalise things.

9) Now come out of View Source, and Save the web page again: this time
check the checkbox that says "Save only Display information..."

Word will save the document again, this time stripping much of the
formatting. It will save a new Style Element. This time, go back into HTML
Code view and simply delete the Style element. Check that your stylesheet
line remains there, and SAVE. This time, save as text only :)

Word will now leave your style settings as you want them, and you have made
a web page relying on CSS formatting. Since the style sheet was
machine-generated by Word, it will be perfect :) Since you saved as Text
Only the last time, Word doesn't get a chance to fiddle with the code.

To make subsequent web pages using the same style sheet, you need only save
as Web Page with Display Only checked, then add the style sheet link line
and remove the style element (make sure these web pages come from the same
document or template, so their formatting is already in the stylesheet you
created above).

When you get more practiced, you will find that you can cut out half of the
style sheet's elements: Word writes a style sheet containing every kind of
formatting that "could" be in your document. Most of it "isn't", but Word
has no way to know that when it creates the Style element.

There's a more advanced technique you can use that splits a whole book into
its component web pages and saves the lot in one go. Come back if you need
that one: that's the one I use to create 800 page websites in four hours :)
No HTML editor will come anywhere NEAR that kind of throughput.

Which is why I say that Word, for certain specific purposes, is one of the
finest web editors there is :)

You just have to remember the first law of computing: "If at first you
can't find the answer, change the QUESTION!" Whenever people are trying to
persuade you you need a new computer, a new set of software, and years of
training to do something "perfectly" when all you wanted was "good enough
for now", two good questions to use are "How long will this take?" and "How
much will this cost?"

Ask those two questions in computer circles, and the answer will immediately
tell you whether the other person is giving professional advice or maybe
indulging in a little religious dogma :)

Hope this helps

John-
You are a life saver. This is exactly the answer I was looking for
(didn't know the details) to the question I was asking. I am fully
appreciative of all the answers people gave me about using Dreamweaver
vs. GoLive. You are correct and perceptive in your response to the
list. I was just about to give up and unsubscribe. I do appreciate all
the comments about how poor Word's HTML editor is, but I am not in the
web design business and was just trying to find a simple solution to a
little problem. So, should I disregard the Microsoft Word instructions
on their website and follow your advice?

One other thing- While not a sophisticated web designer or builder, I
am fairly computer savvy and can tell the difference between windows
and Mac (LOL).In fact, I have one of each in my world. I would not have
posted to this group if I was a Windows user, so I was a bit insulted
by the initial posts to me that I perceived as rude. I'm a good online
community builder, and didn't get a warm reception here.

You are a hero- thank you.

Shelley

--

Please reply to the newsgroup to maintain the thread. Please do not email
me unless I ask you to.

John McGhie <[email protected]>
Microsoft MVP, Word and Word for Macintosh. Consultant Technical Writer
Sydney, Australia +61 4 1209 1410
 
K

Kristina Conceicao

John said:
There's a more advanced technique you can use that splits a whole book into
its component web pages and saves the lot in one go. Come back if you need
that one: that's the one I use to create 800 page websites in four hours :)
No HTML editor will come anywhere NEAR that kind of throughput.

Hi John,

I would have a use for that technique, please. I have a large User's
Manual that I need to retain as a Word document to meet certain needs
(like maintaining a TOC), but I also want users to be able to quickly
access it as a series of web pages. I've written a macro that saves
each Section of the Word doc as a separate HTML file (there's about 30
of them), but some Sections are rather large and could conceivably be
broken up into several pages based on Heading styles or other criteria.

I use Dreamweaver to save each document as a php file, so that I can
"include" navigation menu and submenu files, as well as a standard HTML
header pointing towards a particular CSS file.

Any improvements on this technique would be much appreciated. I find
that major updates to the document are required about 4 times a year,
and I dread it! (For minor updates, I've resorted to updating the Word
and php docs separately.)

I use Word 2004 on a G5.

Thanks in advance for your help,

Kristina
 
C

Corentin Cras-Méneur

John McGhie said:
3) The point I am trying to make is that Word is not trying to make "web
pages", and never was. Word is trying to store your document in a format
that can be read by a modern web browser. At this task, it tends to succeed
brilliantly: Word 2003 on the PC can save a document in such a way that if
you throw it up in a solid browser such as FireFox or IE 6, you seriously
may not be able to tell the difference between the document version and the
web version. Apple's Safari will struggle and wilt under the challenge: but
it had different design goals. In the computer industry we have a saying:
Small, Cheap, Powerful: pick any two... Safari is small and cheap :)

I think FireFox and Safari would be happier if Word could add the proper
information for encoding in the headers (iso, UTF-8, UTF-16...). Most of
the rendering problems I've seen in browsers other than IE were with
accented and other special characters.


Corentin
 
J

John McGhie [MVP - Word and Word Macintosh]

Hi Corentin:

I think the trick is to specify the encoding you want in your Web Options
when saving the file. I get:
<meta http-equiv=Content-Type content="text/html; charset=utf-8">


Cheers


I think FireFox and Safari would be happier if Word could add the proper
information for encoding in the headers (iso, UTF-8, UTF-16...). Most of
the rendering problems I've seen in browsers other than IE were with
accented and other special characters.


Corentin

--

Please reply to the newsgroup to maintain the thread. Please do not email
me unless I ask you to.

John McGhie <[email protected]>
Microsoft MVP, Word and Word for Macintosh. Consultant Technical Writer
Sydney, Australia +61 4 1209 1410
 
C

Corentin Cras-Méneur

John McGhie said:
Hi Corentin:

I think the trick is to specify the encoding you want in your Web Options
when saving the file. I get:
<meta http-equiv=Content-Type content="text/html; charset=utf-8">


Indeed. It's very simple and I can't believe that even though the
problem has been reported ages ago no correction ever came for that.
That should definitively be added by Word.

Corentin
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top