1 / 18

学术网站幻灯

学术网站幻灯. 制作与鉴赏. How to Design and Appreciate the Slide of Academic Site. 2011-12- 19 @ HOPE Studio. 目录 鉴赏部分. 环境化学. 目录 鉴赏部分. 环境治理. 目录 鉴赏部分. 环境与能源化学. 目录 鉴赏部分. 清洁生产中心. 目录 鉴赏部分. 电子封装品电化学. 学术网站 Slide 特点. 1. 学科图片、符号 2. 专业文字、口号 3. 简约 4. 图解原理 5. 自然或科技背景. 设计流程.

vail
Download Presentation

学术网站幻灯

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 学术网站幻灯 制作与鉴赏 How to Design and Appreciate the Slide of Academic Site 2011-12- 19 @ HOPE Studio

  2. 目录 鉴赏部分 • 环境化学

  3. 目录 鉴赏部分 • 环境治理

  4. 目录 鉴赏部分 • 环境与能源化学

  5. 目录 鉴赏部分 • 清洁生产中心

  6. 目录 鉴赏部分 • 电子封装品电化学

  7. 学术网站Slide特点 1. 学科图片、符号 2. 专业文字、口号 3. 简约 4. 图解原理 5. 自然或科技背景

  8. 设计流程 1. 需求分析：主题、尺寸、布局、主色调、背景、特色图片、字体 2. 素材加工：文字精练、图片处理（抠图、调对比度等） 3. Slide图设计：FW/PS，统一尺寸、样式（保存源图，按序列命名） 4. Slide制作：在html中指定div，选择js，修改js、CSS参数

  9. Title 实例：清洁生产中心 Title 1. 统一尺寸：959px×233px

  10. 实例：清洁生产中心 教程：http://ce.sysu.edu.cn/hope/Item/66631.aspx

  11. 2. 行为控制：附件Demo的JS文件夹中slider.js 备注：tv2定义中，“959”是指Slide图片宽度，“2”是指Slider的数目。

  12. 3. HTML代码结构 id为idSlider2，放Slider图片。idNum12是1、2、3等小按钮。

  13. 3. HTML代码结构 若增至4张图片，在id为“idSlider2” 的ul标签下修改left： -959×4=-3836px

  14. 3. HTML代码结构 相应修改id"idNum12"的ul内的代码：

  15. 4. CSS样式代码 定位和控制表现形式：

  16. 回顾：页面重构三要素 http://sese.sysu.edu.cn/cpce/

  17. 网址：清洁生产与循环经济中心 http://sese.sysu.edu.cn/cpce/

  18. 谢谢欣赏！ Thank you for your attention.

More Related