{"id":365,"date":"2020-04-30T00:04:56","date_gmt":"2020-04-30T00:04:56","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/ebooks\/?post_type=chapter&p=365"},"modified":"2021-07-20T13:47:29","modified_gmt":"2021-07-20T13:47:29","slug":"tutorial-10-online-portfolio","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/chapter\/tutorial-10-online-portfolio\/","title":{"raw":"Tutorial 10 \u2022 Online Portfolio","rendered":"Tutorial 10 \u2022 Online Portfolio"},"content":{"raw":"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.\r\n\r\nThe portfolio can contain links to online eBook files, such as Ryerson\u2019s Pressbooks publishing platform, or to actual eBook files that you place on your server.\r\n

Procedure<\/h2>\r\nTo make the portfolio:\r\n
    \r\n \t
  1. Save thumbnail-sized JPG or PNG images of your eBook covers. The size used here is 464\u00d7696px which were sized to 50% or 232\u00d7348px 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.<\/li>\r\n \t
  2. The web page is a fixed-size page of 1228px wide by 921px high and with a light grey (\u201cwhitesmoke\u201d) background.<\/li>\r\n \t
  3. Inside the \u201cpage\u201d is an invisible <div> grouping tag labeled with the ID \u201cflexbox,\u201d 1228px wide, that uses the \u201cflexible box [New Window]<\/em><\/a>\u201d 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.<\/li>\r\n \t
  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.<\/li>\r\n \t
  5. All the <img> tags are linked using <a href> tags to their respective eBooks on the Ryerson Library\u2019s 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.<\/li>\r\n<\/ol>\r\n\"An<\/a>","rendered":"

    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.<\/p>\n

    The portfolio can contain links to online eBook files, such as Ryerson\u2019s Pressbooks publishing platform, or to actual eBook files that you place on your server.<\/p>\n

    Procedure<\/h2>\n

    To make the portfolio:<\/p>\n

      \n
    1. Save thumbnail-sized JPG or PNG images of your eBook covers. The size used here is 464\u00d7696px which were sized to 50% or 232\u00d7348px 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.<\/li>\n
    2. The web page is a fixed-size page of 1228px wide by 921px high and with a light grey (\u201cwhitesmoke\u201d) background.<\/li>\n
    3. Inside the \u201cpage\u201d is an invisible <div> grouping tag labeled with the ID \u201cflexbox,\u201d 1228px wide, that uses the \u201cflexible box [New Window]<\/em><\/a>\u201d 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.<\/li>\n
    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.<\/li>\n
    5. All the <img> tags are linked using <a href> tags to their respective eBooks on the Ryerson Library\u2019s 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.<\/li>\n<\/ol>\n

      \"An<\/a><\/p>\n","protected":false},"author":6,"menu_order":10,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":["richardadams"],"pb_section_license":""},"chapter-type":[],"contributor":[57],"license":[],"class_list":["post-365","chapter","type-chapter","status-publish","hentry","contributor-richardadams"],"part":175,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-json\/pressbooks\/v2\/chapters\/365","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-json\/wp\/v2\/users\/6"}],"version-history":[{"count":9,"href":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-json\/pressbooks\/v2\/chapters\/365\/revisions"}],"predecessor-version":[{"id":561,"href":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-json\/pressbooks\/v2\/chapters\/365\/revisions\/561"}],"part":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-json\/pressbooks\/v2\/parts\/175"}],"metadata":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-json\/pressbooks\/v2\/chapters\/365\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-json\/wp\/v2\/media?parent=365"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-json\/pressbooks\/v2\/chapter-type?post=365"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-json\/wp\/v2\/contributor?post=365"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-json\/wp\/v2\/license?post=365"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}