iBooks Author Essential Training

Adding custom HTML


iBooks Author Essential Training

with Chris Mattia

Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now

Video: Adding custom HTML

Now let's have a look at perhaps the most powerful tool Apple has given us inside of iBooks Author, and that's the ability to add HTML5 Dashboard widgets directly into our iBooks Author documents. This opens up the possibility to have almost an unlimited amount of control and power to be able to add interactivity and content directly into our iBooks Author documents. Now, creating most interactive widgets is well beyond the scope of this course. You'd have to use tools such as Dashcode, which would require you to do a lot of programming.
Expand all | Collapse all
  1. 4m 48s
    1. Welcome
    2. Using the exercise files
      4m 0s
  2. 53m 58s
    1. Installing iBooks Author
      1m 47s
    2. Installing iBooks on an iPad
      1m 9s
    3. Creating a new document
      3m 25s
    4. Understanding the interface
      4m 48s
    5. Creating a book cover
      9m 26s
    6. Adding an intro video
      1m 48s
    7. Creating chapters
      8m 2s
    8. Creating sections
      3m 52s
    9. Creating pages
      2m 15s
    10. Adding visual interest
      4m 54s
    11. Customizing the table of contents
      5m 44s
    12. Creating a glossary
      2m 57s
    13. Previewing your work on an iPad
      3m 51s
  3. 27m 23s
    1. Understanding templates
      3m 18s
    2. Creating a blank layout
      3m 42s
    3. Modifying existing layouts
      5m 13s
    4. Creating a custom layout
      3m 57s
    5. Defining placeholder media
      1m 1s
    6. Defining placeholder text
    7. Adding auto-updating text
      1m 18s
    8. Creating a photo collage layout
      3m 26s
    9. Sharing a custom template
      1m 55s
    10. Creating a portrait-only book
      2m 43s
  4. 19m 25s
    1. Dragging and dropping plain text
      3m 16s
    2. Inserting text from Pages
      6m 51s
    3. Inserting text from Microsoft Word
      7m 11s
    4. Creating linked text boxes
      2m 7s
  5. 52m 14s
    1. Understanding how to format text
      2m 5s
    2. Formatting text
      8m 7s
    3. Creating lists
      5m 29s
    4. Creating custom styles
      9m 34s
    5. Controlling tabs
      5m 54s
    6. More on text control
      12m 37s
    7. Embedding equations with LaTeX
      3m 53s
    8. Embedding equations with MathType
      4m 35s
  6. 29m 14s
    1. Understanding objects
      7m 33s
    2. Adding objects
      2m 26s
    3. Manipulating objects on a page
      3m 24s
    4. Layering objects together
      1m 36s
    5. Changing an object's appearance
      7m 15s
    6. Adding titles, labels, captions, and descriptions
      5m 25s
    7. Adding accessibility text to objects
      1m 35s
  7. 21m 46s
    1. Adding images
      5m 33s
    2. Removing parts of photos with Instant Alpha
      3m 55s
    3. Cropping and masking images
      4m 0s
    4. Controlling image settings
      3m 0s
    5. Spanning an image across two pages
      5m 18s
  8. 16m 13s
    1. Understanding shapes
      2m 29s
    2. Adding shapes
      2m 29s
    3. Editing shapes
      3m 25s
    4. Drawing shapes
      3m 31s
    5. Creating a custom shape mask
      4m 19s
  9. 25m 52s
    1. Understanding tables
      2m 22s
    2. Creating tables
      2m 9s
    3. Adding and importing data into tables
      3m 3s
    4. Formatting table cells and data
      8m 37s
    5. Performing calculations
      3m 52s
    6. Using conditional formatting
      2m 52s
    7. Sorting table data
      1m 15s
    8. Adding a custom table description
      1m 42s
  10. 22m 33s
    1. Understanding charts
      2m 30s
    2. Adding charts
      3m 59s
    3. Editing chart data
      3m 51s
    4. Formatting charts
      5m 24s
    5. Changing the chart type
      5m 48s
    6. Adding chart descriptions
      1m 1s
  11. 45m 53s
    1. Understanding widgets
      4m 18s
    2. Creating an image gallery
      5m 18s
    3. Adding a movie
      4m 4s
    4. Adding a Keynote presentation
      5m 32s
    5. Adding a 3D object
      4m 24s
    6. Adding an interactive image
      7m 54s
    7. Adding custom HTML
      7m 57s
    8. Creating a scrolling sidebar
      3m 45s
    9. Creating a popover effect
      2m 41s
  12. 17m 4s
    1. Understanding review questions
      2m 26s
    2. Adding a review section
      2m 27s
    3. Creating multiple-choice questions
      7m 16s
    4. Creating matching questions
      4m 55s
  13. 27m 1s
    1. Preflighting on an iPad
      6m 21s
    2. Exporting a book in iBooks format
      2m 26s
    3. Exporting a book as a PDF
      2m 33s
    4. Exporting a book as a text document
      1m 49s
    5. Emailing a book
      2m 24s
    6. Getting ready to publish to the iBookstore
      4m 44s
    7. Publishing to the iBookstore
      6m 44s
  14. 32s
    1. Goodbye

please wait ...
Watch the Online Video Course iBooks Author Essential Training
6h 3m Appropriate for all Jul 03, 2012 Updated Feb 18, 2013

Viewers: in countries Watching now:

In this course, author and educator Chris Mattia demonstrates how to use the Apple iBooks Author application to create and publish your own ebook, without extensive design or publishing experience.

Follow along with Chris as he assembles, refines, and publishes a dynamic and engaging ebook for distribution on the iPad using the iBooks app. The course demonstrates the process of adding all of the components of a dynamic ebook, including engaging text, images, audio, video, 3D models, and dynamic web content. It also shows how to customize the iBooks Author interface and leverage built-in templates to produce a beautifully designed and polished ebook. The course wraps up with a review of the iBookstore publishing process.

Topics include:
  • Installing iBooks Author
  • Creating a book cover
  • Creating pages, chapters, and sections
  • Adding visual interest
  • Creating a table of contents and a glossary
  • Working with templates and placeholders
  • Importing text from Pages or Microsoft Word
  • Formatting text
  • Adding objects such as titles, labels, and captions
  • Inserting images
  • Adding tables and charts
  • Working with widgets such as movies, 3D objects, and interactive images
  • Creating review sections with multiple choice and matching questions
  • Exporting a book as an iBook, PDF, or text document
  • Publishing to the iBookstore
Design Education + Elearning
iBooks Author
Chris Mattia

Adding custom HTML

Now let's have a look at perhaps the most powerful tool Apple has given us inside of iBooks Author, and that's the ability to add HTML5 Dashboard widgets directly into our iBooks Author documents. This opens up the possibility to have almost an unlimited amount of control and power to be able to add interactivity and content directly into our iBooks Author documents. Now, creating most interactive widgets is well beyond the scope of this course. You'd have to use tools such as Dashcode, which would require you to do a lot of programming.

Hype, which is a great tool for creating interactive HTML5 objects. But I found a web site that will help us create some interactive widgets that we can add directly into our iBooks Author document. Let's begin by going ahead and creating the widget, and then we'll add it into our document. Go ahead and open up your favorite web browser and go to classwidgets.com. This is a great site that offers free widgets that you can create right on their web site and they'll export the widget, so you can add it directly into your document. For this movie, I'd like to create an interactive Google Map.

So we'll come over to the Widgets Wizard section and click on Google Maps. Now, this is how easy it is. All we have to do is give a map title and a URL. So in order to get the URL, we'll come over to Google Maps. You can access that by going to maps.google.com. Then simply go ahead, drag the map to the location that you want, you can double-click to zoom in to an area. I'm going to zoom in to the area of the Channel Islands National Park. I'll get my zoom set the way that I want it. I can use the plus and minus arrows or the slider to zoom in or out, and I can drag the image around until I get the map showing exactly where I want.

Next, I'll simply come up to the Link tool, which as of the recording of this movie, is up here in the upper-left corner of the image. The URL is automatically selected for us and all we have to do is press Command+C on our keyboard to go ahead and copy that. We can then go back over to the Class Widgets page, and in the Map Title, we'll go ahead and title our map, Channel Islands Excursion. For the Map URL, click inside the box and simply press the Command+V key on your keyboard to paste the text in. All right, we're all set. Go ahead and click the button that says Create Widget.

Your web browser should attempt to download the file, and you may get the Widget Installer that pops up and asks, Do you want to install this widget? Do not install the widget. Just simply click the Cancel button. We don't want to install the widget, we just want to get a hold of the widget. Now, we'll go ahead and minimize our browser, and we'll open up our Finder to our Downloads folder where the widget is located. We'll go ahead and click one time on the widget to select it, then click again to select the text of the name of the widget, and then we'll go ahead and edit the name down to simply just Google Map.

We'll then go ahead and drag that widget on to our Desktop where it'll be a little bit easier to work with. Next, let's go ahead and add the widget into our document to see what it looks like. Now, of course, we could go in our document and go up to the Widgets menu and add an HTML widget. But we've already seen that method in several other movies. Let's go ahead and simply drag the Google Map widget and drop it directly in to our document. The HTML Widget object is automatically created for us. Now, when we look at the default widget that Class Widgets gives us, it's fully functional.

It's got a default image though of this generic map, and it'll be nice to be able to replace that map with something a little bit more custom. Let's go ahead and select the widget in iBooks Author and Delete it, and then we'll go back to our web browser and go back to our Google Map. We'll close the little pop-up window, now let's make a custom image that we can insert. We'll go ahead and click the small triangle to hide the sidebar, and we can readjust our image so that we get the map showing up into the middle section with as much information showing as possible. You can then press Command+Shift+4 on your keyboard.

You'll notice that your cursor turns into small crosshairs. You can then click and drag a large selection of the map and then release your mouse. Now you want to make sure that the selection that you create is at least 1024 x 768 pixels. I like to try and capture more information than I need, and then I'll typically open that image up in an image editing program, such as either Photoshop or Fireworks, and then crop the image down to exactly 1024 x 768 pixels.

It might take a little trial and error to get your screenshot to be just right. But you need to make sure that the screen size is set correctly. All right, let's go ahead and minimize our browser, and I'm going to go ahead and minimize my iBooks Author document as well, so we can see our Desktop clearly, and we can see the file that we've got. When we take a screenshot using the Command+Shift+4 keyboard command, you'll have a screenshot that'll appear on screen, and it's formatted as a .png file. Which is the exact right type of file that we need to replace inside of our Google Map widget.

To get in to the widget itself, hold down the Ctrl key on your keyboard and click one time on the widget. From the pop-up menu, select Show Package Contents. The widget is a special type of folder that contains a lot of different documents and one of the documents inside of this folder is a PNG file called Default.png. It's got a capital D on it, and this file is exactly 1024 x 768 pixels. With that file selected, go ahead and press the Command key on your keyboard and then press the Delete key that'll throw that document in the trash.

We can then click on our screenshot and click one time on the text of the screenshot, and then re-title it to be the same Default.png. We can then copy and paste this document directly into our widget. To do this, simply select the widget and press Command+C on your keyboard and then click inside of the widget and press Command+V, the Default.png file is pasted directly into our document. Now, we can close our Widget window, we can open up our iBooks Author document again, we may need to minimize it a little bit, and then we'll simply drag our Google Map widget directly into our document, and when we release, the widget is created for us.

We can maximize our window again, now we can place and resize our widget. I'll go ahead and drag it over to the right-hand side until my alignment guides let me know that I've snapped into the correct location. Then I'll grab the lower left-hand corner, and I'll start dragging the widget out until I get the widget to an appropriate size so that the rest of the text on this page flows down to the very bottom on my screen. The last thing I'll do is I'll go ahead and change this to a Floating image. With the page with only one screen of text, it doesn't really matter a whole lot, but I like having all of my images set to Floating so that they'll remain on the page where I place them. Unless I really want the image tied to a particular bit of text.

All right, let's go ahead and add some customizations to our widget. Since we simply dragged the HTML5 Widget onto the page, we'll need to do a little customization. We'll need to open up our Widget Inspector, which was not opened up for us. The Widget Inspector, for an HTML5 widget under the Interaction tab, simply gives us the ability to choose another widget if we wanted to. Since our widget is set up properly, we'll then go ahead and click on the Layout tab and make sure that our Title Label matches all of the other Title labels throughout our document. So we'll go ahead and change this from Interactive to Figure.

We want to have our Caption set on here, and we also want to have a Background, and we'll go ahead and change the background fill color to this nice gray color so that it stands off the page a little bit more. Finally, we'll go ahead and edit the text for our title. We'll click one time on the Title and then select the text. We'll type in Map of the Channel Islands. And for the text at the bottom, we'll click one time on it and then double-click it, and then triple-click it to select all of the text. Here, we'll let our users know that this is a custom interactive Google Map created with classwidgets.com.

Custom Interactive Google Map created from www.classwidgets.com. All right, our HTML5 widget is looking fantastic. We've got all the different components that we need, and we have a clickable Google Map that our users can interact with directly inside of our page. And we didn't even have to write any code.

Find answers to the most frequently asked questions about iBooks Author Essential Training .

Expand all | Collapse all
please wait ...
Q: This course was updated on 02/18/2013. What changed?
A: This update covers changes included with iBooks 2.0. We added movies to address portrait-only book templates, embedded equations, scrolling sidebar and popover widgets, and updated movies on publishing to the iBookstore.
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.

Mark all as unwatched Cancel


You have completed iBooks Author Essential Training.

Return to your organization's learning portal to continue training, or close this page.

Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.