Workflow: Match Dreamweaver styles to Word Styles

In the previous installment, I urged you to use style sheets to format your Word document and the argument I used is that it makes it easy to format and reformat your document. And I also mentioned that if the Word style sheets are named identically to Dreamweaver stylesheets, then life will be one sweet song, but perhaps you are wondering:

Why do I need Dreamweaver? Can’t I do everything I want in Word?

• No you can’t do everything in Word. Admittedly Amazon will take a Word document and make a Kindle (MOBI) document tout de suite, but Apple and Barnes & Noble and Google want epub documents and you generally build those from HTML files and that’s Dreamweaver’s bread and butter.
• Creating HTML files means you can use the power of a separate Cascading Style Sheets file.
• Creating HTML files means you can specify encoding, ensuring that any special characters you type, such as typographic quotes, will properly display in your ebook.

So it’s time to accept the fact that a professional looking ebook will require you to create HTML files. (Sadly I don’t have the time or energy to teach you how to create stylesheets in Dreamweaver. You’ll have to learn this on your own.)

What are Dreamweaver stylesheets?
HTML documents can use Cascading Style Sheets that are very similar to Word stylesheets, but the CSS stylesheets must be named identically to the Word stylesheets and the process is case sensitive.

For example from the previous document, you’ll remember we created a first paragraph style called “first.” Well, in Dreamweaver, I’ll want to create this entry in an external stylesheet document — I’ll name it styles.css — to which all the HTML files in my ebook link:

.first {
text-indent: 0px;
}

In fact, I’ll need to duplicate all the Word styles with the appropriate formatting, so I might easily end up with these styles: first, body, letter, poem, etc. The style called body is the style used by the majority of the paragraphs in my document, letter is used wherever I am quoting from a letter, poem is a style used to reproduce the look of a poem, and so on.

Back in Word, I’ve applied these styles appropriately and when it’s time to start building my ebook, my workflow looks like this:

1. Select and copy the text in Word that I want to use in Dreamweaver. Generally I’ll copy all the text from an entire chapter.
2. Create a new Dreamweaver HTML file that links to my external stylesheet (the smartest thing to do is to create a template).
3. Paste the copied text into the Design View — not the Code View.
4. Save the document and repeat.

Magically the text pasted into the HTML file will look like the text copied from the Word file, but it’s really not magic, which you’ll see once you look at the Code View. For instance, you might see:

<p class="body">He felt old and sad as he replied to Sunderland&rsquo; email and gave her the name of the man he suspected and his reasoning. He promised he&rsquo;d give her any help she needed.</p>

When it’s pasted into the Design View, Dreamweaver realized that in Word a style called body had been applied to the paragraph and it accordingly assigned a class style called body in the opening <p> tag.

And I said before the pasted text looks just like it did in Word, but it doesn’t have to and usually won’t. The Dreamweaver style might specify a different font or size than the corresponding Word style (for reasons why, read the previous installment).

In the next article, I’ll talk about encoding and the magic that ensures a typographic open double quote you type in Word retains it’s appearance when pasted into Dreamweaver.

PS I’ve included the CSS file from my book. You can see it is a mixture of class styles — styles that I have specifically created and can be identified by the period before the name — and standard tags, like <p> and <h1> that I have redefined.


p {
font-family: "Times New Roman", Times, serif;
margin:0;
padding:0;
}
.body {
text-indent: 1em;
}
.first {
text-indent: 0em;
margin-top: 1em;
}
.article {
font-size: .9em;
margin-left: 1em;
margin-right: 1em;
text-align:justify;
text-indent: 1em;
}
.articlefirst {
font-size: .9em;
margin-left: 1em;
margin-right: 1em;
text-indent: 0em;
text-align:justify;
}
.articlelast {
font-size: .9em;
margin-left: 1em;
margin-right: 1em;
margin-bottom: 1em;
text-indent: 0em;
text-align:justify;
}
.emphasis {
font-style:italic;
}
h1 {
font-family: "Times New Roman", Times, serif;
font-size:2em;
font-weight: normal;
}
h2 {
font-family: "Times New Roman", Times, serif;
font-size:1.5em;
font-weight: normal;
}
.chat, .email, .blog, .emailquote, .excerpt {
margin-left: 1em;
margin-right: 1em;
font-family:Arial, Helvetica, sans-serif;
font-size:0.9em;
text-align:left;
}
.emailquote {
margin-left: 3em;
font-size:0.8em;
text-align:left;
}
.chatfirst, .emailfirst, .blogfirst, .excerptfirst {
margin-left: 1em;
margin-right: 1em;
font-family:Arial, Helvetica, sans-serif;
font-size:0.9em;
margin-top: 1em;
text-align:left;
}
.chatlast, .emaillast, .bloglast, .excerptlast {
margin-left: 1em;
margin-right: 1em;
font-family:Arial, Helvetica, sans-serif;
font-size:0.9em;
margin-bottom: 1em;
text-align:left;
}
.chatsingle, .emailsingle, .blogsingle, .excerptsingle {
margin-left: 1em;
margin-right: 1em;
font-family:Arial, Helvetica, sans-serif;
font-size:0.9em;
margin-top: 1em;
margin-bottom: 1em;
text-align:left;
}
.chatname {
font-weight:bold;
}
.title {
font-size: 3em;
text-align: center;
padding-top: 2em;
}
.copyright {
font-size: .8em;
text-align: center;
margin-top:4em;
}
.author {
font-size: 1.5em;
text-align: center;
}
.toctitle {
font-size: 2em;
text-align: center;
margin-top: 3em;
margin-bottom: 1em;
}
.tocchapter {
text-indent: 0;
margin-bottom: .5em;
}
.divider {
text-align:center;
text-indent:0;
}


.screenplayscene {
margin-top:2em;
margin-right:1em;
margin-bottom:1em;
margin-left:1em;
font-size:0.9em;
font-family:"Courier New", Courier, monospace;
text-align:left;
}
.screenplaydescription {
margin-top:1em;
margin-right:1em;
margin-bottom:1em;
margin-left:1em;
font-size:0.9em;
font-family:"Courier New", Courier, monospace;
text-align:left;
}
.screenplaycharacter {
margin-top:1em;
margin-right:1em;
margin-bottom:1em;
margin-left:1em;
font-size:0.9em;
text-align:center;
font-family: "Courier New", Courier, monospace;
}
.screenplaydialogue {
margin-top:1em;
margin-right:1em;
margin-bottom:1em;
margin-left:2em;
font-size:0.9em;
font-family:"Courier New", Courier, monospace;
text-align:left;
}
.cover {
text-align:center;
}