Tutorial 10 • Online Portfolio

An online portfolio is a good way to catalog and publicize your eBooks from one location. The graphic below shows the HTML tags and CSS styles used to make the sample portfolio.

The portfolio can contain links to online eBook files, such as Ryerson’s Pressbooks publishing platform, or to actual eBook files that you place on your server.

Procedure

To make the portfolio:

1. Save thumbnail-sized JPG or PNG images of your eBook covers. The size used here is 464×696px which were sized to 50% or 232×348px in Dreamweaver. These covers were designed in Adobe Illustrator and exported with the File > Export for Web dialog box, which enables the final resolution to be set and previewed.
2. The web page is a fixed-size page of 1228px wide by 921px high and with a light grey (“whitesmoke”) background.
3. Inside the “page” is an invisible <div> grouping tag labeled with the ID “flexbox,” 1228px wide, that uses the “flexible box [New Window]” layout (for the illustration, the <div> tag was outlined with a dashed border to make it visible). The flexbox layout enables you to add more thumbnails that will arrange themselves in order on the page, depending upon their number and size.
4. Each <img> tag with its thumbnail is grouped with its caption <figcaption> using a <figure> grouping tag, as shown at the middle right of the diagram. This enables you to put a brief description under each thumbnail.
5. All the <img> tags are linked using <a href> tags to their respective eBooks on the Ryerson Library’s Pressbooks system. You could also place .epub and other files on your server and link to the files so that readers could download the them. The tags are set to open in new tabs or windows so readers do not have to leave the catalog page.