Click on any phrase to play the video from that point.
[Learn - The How To series from Adobe]
[video2brain - World-Class Training]
An HTML article is a special type of layout and content in a DPS workflow.
Let's take a look at this type of article and how you work with it.
In the Digital Publishing folder, Articles Start,
you're going to find a folder called HTML Neighborhood Guide.
If you open this folder up, you're going to find a folder full of images
and an HTML file and a style.css, the cascading style sheet for this.
If you open the HTML file, you see the content of this.
There are links in here to navigate up or down,
you can scroll through the content, see the layout,
and this is what's going to go into the layout for an article.
So rather than converting this to an InDesign document, importing it,
doing the layout, we're going to take advantage of a feature of the folio system,
which will present this HTML dynamically.
When you're writing the HTML, use content and use coding that works with WebKit.
You're probably going to want to restrict yourself to the type of WebKit commands
that work well on an iPad or a tablet device.
So that means no SWF content and occasionally being a little conservative
in your design.
This folder, the HTML Neighborhood Guide folder,
is what we're going to load into a folio as an article.
I'm going to shift over to InDesign, and we'll go into the Folio Builder panel
and build a folio to hold this HTML article.
Let's give it a name. I'm going to call it Web Article.
Because an HTML article doesn't have a dimension,
the dimensions of this folio are not particularly critical,
so I'm just going to work with these defaults as I'm designing for the iPad.
I'm going to click OK, and now I'm at the articles level.
I'm going to be a little neat here, and let's give this a publication name.
This is going to be my HTML article, and I'm going to load some previews.
So I'll go into the desktop of my machine, Digital Publishing,
Folio Covers, and then I'm going to load the cvr_HTMLarticle_v for the vertical
and _h for the horizontal.
Once those 2 cover previews are loaded, I'm going to click OK.
And now we're going to go down into the article level
and we're going to import that HTML folder.
So the article name will be HTML Article,
and we're going to point to the folder that contains it.
So that's the desktop, Digital Publishing, Articles Start,
and I'm going to select the HTML Neighborhood Guide folder.
I click Open and OK, and while the Folio Builder is working,
I probably need to be patient and let it do its work,
build the previews it needs, and it's done now.
You might notice in the Folio Builder panel the HTML article is sort of grayed out a little bit.
The text is not black.
That's because an HTML article doesn't have layouts,
so there isn't another level to go down into to see a vertical and horizontal layout.
Because it's all HTML code, it's going to reorganize itself on the fly.
So I can't go deeper. That's why we see it as gray here.
To see the outcome, what I need to do is pick up a device. Here's my iPad.
I'm going to download the data to my device,
and once that download is done, I can simply open up this publication,
and now I can see the HTML here and I can scroll down through the page.
I can see that I've controlled the layout a bit with some larger text,
smaller text, and alignments.
And if I rotate the device, we see the layout adjust to the new orientation of my device.
The cool thing about an HTML article is it's 1 source file which is only code.
There's no design.
And it adapts automatically to both orientations of my device.
Maybe some of the articles in your publication make more sense to be HTML-based
than they are to be designed.
So experiment with this technology a little bit.
If you do a lot of HTML articles, also consider what pieces of artwork
and content are shared between these articles.
And if you have a DPS subscription, you can upload these shared assets
for all of the articles in your folio.
