首页  思维导图  详情

电子相册制作流程

2017-08-03 20:25:26   7  举报





AI智能生成

为你推荐

查看更多



1色素的时代噶山豆根大厦大噶DSAGDGDSGSDHDSHDGS

作者其他创作

大纲/内容

电子书制作

前期准备

确定主题

素材的收集与整理

图片

主题相关

图片处理

文字

字体合适

颜色合适

避免大段

视频

与主题相关

音频

项目实施

文件目录结构搭建

css目录 - 存放页面相关样式及字体文件

font - 字体文件

entry.css - 页面基础样式

magazine.css - 电子书页面样式

print.css - 打印电子书所需的样式

js目录 - 存放页面相关脚本文件及jQuery库

jquery.min.1.7.js - jquery基础库文件

magazine.js - 页面相关逻辑效果处理脚本

lib目录 - 存放第三方js插件及库

tippyjs - 悬浮提示框插件

hash.js - 根据url变化跳转到对应电子书页面脚本

turn.min.js - 翻页效果插件

pages目录 - 存放电子书页面

pics目录 - 存放页面相关图片文件

res目录 - 存放电子书所需的资源文件

index.html - 入口页面

map.html - 地图显示页面（供电子书内页iframe调用）

引入相关js插件

1. 将 jquery 基础库引入到 index.html；2. 在将第三方插件引入到 index.html；3. 最后将自定义magazine.js 文件引入。注意：引入的标签顺序要和上面引入的顺序一致

引入相关css文件

1. 在 index.html 文件的 <head></head> 标签下引入 entry.css 文件；2. 在 index.html 文件的 <head></head> 标签下引入 magazine.css 文件； 3. 在 index.html 文件的 <head></head> 标签下引入 print.css 文件。注意：引入的标签顺序要和上面引入的顺序一致

电子书页面制作

封面制作

在 pages 目录下新建一个 page1.html 文件，用 img 将封面图片引入即可

内容页制作

文件命名规则：pages 目录新建文件并命名为 page$.html，$ 这个表示对应页面码数，封面为1，依次累加

内容页模板：<div class=\"gradient\"></div><div class=\"section\"> <div class=\"entry\"> 这里插入电子书页面实际内容 </div></div>

封底制作

同封面，用 img 标签引入封底图片资源即可

注意：电子书页面应为偶数，如果完成时页面数为奇数，可在封底页面之前再新建一个空白模板页

项目部署与维护

测试

发布电子书