{"id":196,"date":"2020-04-11T16:34:32","date_gmt":"2020-04-11T16:34:32","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/ebooks\/chapter\/__unknown__-2\/"},"modified":"2020-09-05T17:55:49","modified_gmt":"2020-09-05T17:55:49","slug":"tutorial-4-special-effects","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/chapter\/tutorial-4-special-effects\/","title":{"raw":"Tutorial 4 \u2022 Adding Special Effects with HTML\/CSS and Sigil","rendered":"Tutorial 4 \u2022 Adding Special Effects with HTML\/CSS and Sigil"},"content":{"raw":"Sigil (https:\/\/sigil-ebook.com) is a free, open-source app for editing ePubs that was developed by Google. An ePub is actually a compressed file with separate folders for its contents. The compressed file can be opened, edited, and saved using Sigil.\r\n<h2>Open ePub in Sigil<\/h2>\r\n<ol>\r\n \t<li>Copy the ePub file that you created in Tutorial 1.<\/li>\r\n \t<li>Launch Sigil and open the .epub file.<\/li>\r\n \t<li>Note the structure of the ePub file:<\/li>\r\n<\/ol>\r\n<ul>\r\n \t<li>Separate folders contain the HTML files, CSS, images, fonts, and media.<\/li>\r\n \t<li>The text is identified with HTML tags, classes, and IDs.<\/li>\r\n<\/ul>\r\n[caption id=\"\" align=\"aligncenter\" width=\"1710\"]<a href=\"http:\/\/pressbooks.library.ryerson.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2020\/04\/image1-1.jpg\"><img src=\"http:\/\/pressbooks.library.ryerson.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2020\/04\/image1-1.jpg\" width=\"1710\" height=\"1474\" alt=\"image\" \/><\/a> Epub opened in Sigil to show file structure and use of HTML tags and CSS styles.[\/caption]\r\n<h2>Style the ePub<\/h2>\r\n<ol>\r\n \t<li>Using your knowledge of HTML and CSS to identify objects, apply some innovative styles to the ePub, e.g.:<\/li>\r\n<\/ol>\r\n<ul>\r\n \t<li>Create a text wrap by adding a \u201cfloat\u201d style to the image.<\/li>\r\n \t<li>Create a dropcap on the first paragraph using the p::first-letter selector.<\/li>\r\n<\/ul>\r\n<span style=\"font-size: 14pt\">Save your styled ePub and open in iBooks. Compare its appearance with the original.<\/span>\r\n<h2>Instructional Video<\/h2>\r\n[embed]https:\/\/youtu.be\/h7y5v3HcQr0[\/embed]\r\n","rendered":"<p>Sigil (https:\/\/sigil-ebook.com) is a free, open-source app for editing ePubs that was developed by Google. An ePub is actually a compressed file with separate folders for its contents. The compressed file can be opened, edited, and saved using Sigil.<\/p>\n<h2>Open ePub in Sigil<\/h2>\n<ol>\n<li>Copy the ePub file that you created in Tutorial 1.<\/li>\n<li>Launch Sigil and open the .epub file.<\/li>\n<li>Note the structure of the ePub file:<\/li>\n<\/ol>\n<ul>\n<li>Separate folders contain the HTML files, CSS, images, fonts, and media.<\/li>\n<li>The text is identified with HTML tags, classes, and IDs.<\/li>\n<\/ul>\n<figure style=\"width: 1710px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/pressbooks.library.ryerson.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2020\/04\/image1-1.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"\/\/pressbooks.library.ryerson.ca\/ebooks\/wp-content\/uploads\/sites\/38\/2020\/04\/image1-1.jpg\" width=\"1710\" height=\"1474\" alt=\"image\" \/><\/a><figcaption class=\"wp-caption-text\">Epub opened in Sigil to show file structure and use of HTML tags and CSS styles.<\/figcaption><\/figure>\n<h2>Style the ePub<\/h2>\n<ol>\n<li>Using your knowledge of HTML and CSS to identify objects, apply some innovative styles to the ePub, e.g.:<\/li>\n<\/ol>\n<ul>\n<li>Create a text wrap by adding a \u201cfloat\u201d style to the image.<\/li>\n<li>Create a dropcap on the first paragraph using the p::first-letter selector.<\/li>\n<\/ul>\n<p><span style=\"font-size: 14pt\">Save your styled ePub and open in iBooks. Compare its appearance with the original.<\/span><\/p>\n<h2>Instructional Video<\/h2>\n<p><iframe loading=\"lazy\" id=\"oembed-1\" title=\"GCM 802 \u2022 Tutorial 4 \u2022 Creating Special Effects with XHTML and CSS\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/h7y5v3HcQr0?feature=oembed&#38;rel=0\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n","protected":false},"author":6,"menu_order":4,"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-196","chapter","type-chapter","status-publish","hentry","contributor-richardadams"],"part":175,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-json\/pressbooks\/v2\/chapters\/196","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":7,"href":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-json\/pressbooks\/v2\/chapters\/196\/revisions"}],"predecessor-version":[{"id":466,"href":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-json\/pressbooks\/v2\/chapters\/196\/revisions\/466"}],"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\/196\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-json\/wp\/v2\/media?parent=196"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-json\/pressbooks\/v2\/chapter-type?post=196"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-json\/wp\/v2\/contributor?post=196"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/wp-json\/wp\/v2\/license?post=196"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}