|
|
本帖最后由 henices 于 2017-4-16 21:23 编辑
. M y t9 C$ H
5 Z% @& h0 g8 s+ x# b, O. q陆陆续续地重排了一系列词典，一些心得和大家交流一下。
, k7 T$ A5 S! l6 K! e( T. d9 L4 m: J$ B+ k- M7 f
说起排版这个活，有些同学不太看重，和制作mdx 相比，似乎门槛低些。其实排版正是入门易，精通难的典型代表。
" i4 `' @' C5 t0 oA大说为了排牛津8，大致排了一年多才排出了一个比较满意的版本，Hugh牛也说排最长的花费了一年半的时间，
" L6 N$ ?$ E; _. pB大则说排版一如既往地花费了许多心思，由此可见要做好不容易，是个大活。7 x9 O! h6 z9 P3 b
/ d; N0 ?2 `# r( i, }+ f论坛里说排版的文章不多，@wa1314159 常委写过一篇 《CSS美化词典教程》，非常不错，没有看过的可以去看看。7 L8 v6 A8 B/ u4 E' ?& v
https://www.pdawiki.com/forum/thread-17781-1-1.html
! b1 @1 W: q+ z6 X# B! z. R w$ u! S5 J) Q( p2 h
wa1314159常委的文章点出了排版的三大穴位，字体，行间距，配色。其实mdx 排版过程中这些都要反复调整，直到% |4 t1 n6 o, _- f
一个比较协调的状态。
% `$ M) _( {' D# z7 z- f5 ^3 D3 n
字体将直接影响显示效果，有的系统字体渲染效果不好，字体就更加关键了，字体发虚基本上就废了。关于字体的选择8 r7 ^! h7 \( u: |: a8 n
大家参考上面几位大大的css即可，不理解关系也不大，可以先抄袭一下 ：） 有兴趣的可以看看下面这篇：9 j% x+ s( ~( `+ J
n4 x% O- q+ t/ H% `5 ]' ^6 m
https://segmentfault.com/a/1190000006110417- j+ q, }7 a& ^& f3 j
2 w+ o+ R) M* P* G) T/ V
行间距这个问题就众口难调了，有人是紧凑控，有人是宽松控，可以按照自己的口味适当调整。（关键字 line-height）9 J0 B' T" C( ?) o! C% ]- p0 ^
个人还是比较喜欢紧凑风格，因为基本大家的词典都不少，又有在手机上查词典的习惯，自然紧凑的适用范围广些。$ b, f0 e- P! O {6 J/ l
9 n' h0 }8 s) X4 D) ]. a% A
最难的可能就是配色了，配不好就是花花绿绿，要不就是死气沉沉，我建议还是先模仿再创新，经典配色都是反复实验# g! A# l- K8 O- N
得来，节省时间，效果好，专业的UI/UE 除外，你们是专业的。个人在这块也是不行，完全没有想象力。
- z; x9 V1 B5 I: U# A
: M' B4 s2 ]+ F3 p/ g8 _! FCSS3 色彩名字: http://www.cssportal.com/css3-color-names/! M, s3 Y: Y5 o: @
" i. J6 n* X0 ?0 a
最后还有一个对齐的问题，这个问题其实相对好些。可以简单粗暴地先来一段 * {margin:0;padding:0}
+ c8 v6 M& }/ _
% U! M/ W+ {6 F$ P$ f, c. v上面说了很多，但是没有说心法总纲。那就是内容为王，不能拘泥于形式，也就是内容大于形式，因为词典是要用来读
+ f: ~# D) h; J( v9 p的，排版是为了辅助阅读。
8 a3 a( n5 Y/ J' y% f4 \% \# k! | {. e2 ^3 w
所以好的排版应该有下面几个特点，重点突出，结构清晰，简单明了。
$ M z, `' l- n. l6 {: P: `, c# L, O6 V$ [; T, Q G
其实我自己的排版也是不行，改进空间巨大。写这篇也不是好为人师，论坛上比我合适写这篇的人多了去了，写这篇一是, g- f/ \2 W% {5 y3 f: _2 O- U
为了做个总结，二是希望能给大家一些参考，毕竟这是一个前端外行写的速成手册。
4 k0 K" B7 y* Z0 A/ ]- Q! j% e) @& O9 v6 ~( h
最后补充一点，如何看大大们的css怎么写的呢？ GoldenDict 右键，Inspect
3 l- \* L# J9 \* i3 \9 ?! v
- M: F, \/ y8 L关于作品风格：https://www.pdawiki.com/forum/thread-19248-1-1.html
7 q) R7 Y) v u9 E0 z2 f( w% `" e$ l. v$ e& K% J
! g0 |: p+ C) Z) s. Y' A x
# k4 j2 Z$ Z" I! G H+ U |
评分
-
3
查看全部评分
-
|
发表于 2017-4-15 23:50:12
发表于 2017-4-16 00:04:15
楼主
