TA的每日心情 | 奋斗
2022-11-11 12:04 |
|---|
签到天数: 1 天 [LV.1]初来乍到
|
本帖最后由 cjnccjnc 于 2023-3-18 17:32 编辑 1 O+ H, `9 ?/ u9 r" j9 _' @
6 f) h1 ^( z3 [! }- B之前在XSVBM兄这里下来了Vocabulary.com这本词典的改版, 一段使用下来, 总的来说还算满意, 但心里总感觉有点不如意, 刚好在坛里也找到了bt4baidu,baidu大的原版,
6 d) b/ Z0 t4 O5 x0 @3 C. `; u! M! j两相比照, 进行了一番摸索和改装, 具体来说就是结合了两边我比较喜欢的地方, 来看下成果吧,6 ~) K+ D u; m9 M' I/ e% E, q! P
第一部分, 我没有动什么, 我感觉这里是比较满意的.
0 l, y# i" c. I/ {# y5 a7 u0 D4 g, f/ o4 P H$ J! o: z! R8 w
7 q- j3 @1 Q9 F- }
第二部分主要进行了3个改动:
+ x/ g8 B2 c6 j" j/ e. O其一是更换了背景色, 显得更突出, 因为我很喜欢这一块展开的部分, 单词的使用场景,词源和相关词都有,对单词掌握很有帮助, 如果有时间可以慢慢品味, 选择了一个和欧路比较搭的颜色, 因为我主要是用欧路来用的; 如果在欧路上使用会十分舒服, 这个淡淡的蓝色在其他词典上也不会违和, 对眼睛比较友好;# u# \ ?& W! a4 C% l1 p
其二,说到对眼睛友好, 所以我适当放大了一点这部分的字号, 与第一部分的字号相比, 因为字体不同, 所以整体看上来第二部分也没有喧宾夺主., X+ B B. s9 ], a" |0 l" _
其三是更换了部分字体, 对字体的显示效果进行了调整, 主要是参考官网把重点词进行了斜体处理, 并进行加黑, 学习的时候方便抓住要点/ R& |: k. j' ]$ f, p, m" M* K
, x+ {( j5 C( o/ W, o
再来说第三部分,word family这部分改动有4个:* ] i7 z9 M6 W
$ ~3 L2 r' m* G3 T
其一, 恢复对词族中支持跳转的词的颜色区分, + @: V. A9 L/ a8 N3 j
其二, 恢复词族中对重点词的加粗显示;! D% o/ w! o* R
1 Z' u* j" h Q/ r, h
其三, 恢复不同词族间起分隔作用的灰色斜线;" o7 c1 T% Q% { S# q# v/ u: O
* L4 N1 @- e; T1 F6 G. \' c( \9 q
其四, 对改版的css里自带的按钮外观进行了微调, 宽度调整为一致, 去掉第二个按钮的阴影, 并将按钮统一为灰色圆角边框, 使点按时的显示效果更加自然0 r; N7 @) `5 u G* k
7 s' N) f8 t% D& B5 N第四部分, 也是Vocabulary.com最为人所称道的部分, useage examples, 这部分我在改版中主要的改动是前面的两个按钮, 虽说就两个按钮, 却是我改版xsvbm兄这版css的主要动力, 也是我在整个改版里面耗时最多的部分,; E& T6 q3 E; c. b0 _) \
起初是因为我比较喜欢官网那两个按钮的的使用体验,(Vocabulary.com官网, https://www.vocabulary.com/dictionary/)
5 G0 P7 Z5 o0 f/ q* V) y# B, ~: K ) U6 K+ C! E" L! S5 H* \+ @
本来觉得很难在xsvbm兄这个版本中改成类似的效果, 幸好有baidu大原版, 里面的这两个按钮的显示效果就是我想要的那种, 想着有baidu大的成品放在这里, 能有多难, 于是就决心试一试, 一试不当紧, 毕竟没有弄过, 反复试来试去的花了这么久, 值得庆幸的是结果还可以, 自食其力的感觉确实很开心, 不过后面我肯定会避免花这么大精力去研究外观啊按钮啊等等这些东西了, 于我而言搞这种东西没有个半天功夫根本不能搞出来个让我满意的. 6 s0 a( k7 Y3 g5 M
做这个改版另一个原因是这个词典是我电脑上主要使用的欧路词典里面放第一位的词库, 做的好一点, 自己也舒心. 回顾做的过程, 我也由此了解一些基本的计算机语言甚至还巩固了几个单词, hover, ellipsis, 还有justify表示边缘对齐……也算得上做中学, 学中做了." X( p, s1 O5 U' ^
4 `7 n& J: b8 i" p. g8 Q
有人可能不了解上面说的两个按钮的显示效果具体是怎么回事, 我说明一下可能不容易被注意到但着实花了我一些时间的地方,2 p# r( R1 V$ k4 O' Z$ Y$ k* G
# s/ ^, R. \ I4 R+ g第一个按钮是选择例句分类, 点击之后会弹出下面这个选择面板, # m. t5 u* D5 w* k9 \1 Z) r' K$ U# t
4 @8 K/ x9 b; Z% s9 h4 c1 B这个面板我进行了3个调整, 一个是去掉左边的悬挂缩进, 将文字居中, 二是把面板的宽度和选择例句分类的按钮宽度调为一致, 做这两个改动是为了在点击按钮时显得更加流畅;三是调整了这几个选项的字体和字号, 使整体外观更加协调;" J$ f7 Z$ m- k* t# B5 E- Q
比较麻烦点的是第二个按钮,
v8 s: j/ I& \! W2 l$ m也是我比较喜欢的官网那种效果, 在鼠标点击按钮来翻页的基础上, 通过点击后按钮文字的颜色变化还可以指示例句加载情况 (按钮为蓝色则表示点击该按钮会加载新的例句, 若为黑色表示没有更多例句, 前进和返回两个按钮效果保持一致). 这个按钮稍微复杂一点, 因为由两个小按钮组成, 所以从baidu大那版移过来的时候, 各种调间距会比较痛苦. 最后终于恢复到了baidu大原版中的样子, 与官网版按钮的效果贴近. 为了跟词典整体色调一致起见, 把原版按钮中的蓝色更新为暗蓝;
( Y+ N$ {6 o6 k/ Q4 g! B
1 s; B5 l; M$ d, L/ x好了, 不知不觉介绍了这么多, 足以见得我对Vocabulary.com的喜欢, 推荐大家都来用这本好词典! 在此对做出原版词典的baidu兄, 和提供改版的xsvbm兄表示感谢, * a: a! X" @1 V# U' Z- _" J; B
bt4baidu兄原版的链接在这里,4 Y# I8 w$ y \: ]$ ]7 t8 U4 Q
【2017/01更新】联网真人发音！Vocabulary.com Dictionary绚丽发布!
: `1 W2 ]6 h$ W7 {# J3 fhttps://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=12743; e3 N# {- l2 p; K& q9 I0 ~
(出处: 掌上百科 - PDAWIKI),1 o3 T8 L1 u) o- J
XSVBM兄的改版的贴子,
# e. C" k% q0 Z0 [5 E【改版】Vocabulary.com Dictionary compact排版
1 U3 L; a0 v a9 ^https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=48423
% L# [8 Q$ Q1 m6 m4 J1 C- ] Q(出处: 掌上百科 - PDAWIKI),1 Y" p3 T7 a. C* A/ ^
+ Y- n/ Y0 o# c# l* \; g1 M/ ~/ m
说一下我推荐的词典配置, 结合我自己的使用经历,我同样建议大家用dfsfd兄这个帖子里给出的mdd文件,
: }2 B4 G9 W" J# E$ [6 O【2018/4/18】Vocabulary.com Dictionary联网发音，例句自动刷新版8 \7 X7 H4 f# |% @+ F( b3 ]+ O$ h- f5 P
https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=25782- q* H% a$ u6 P& e
(出处: 掌上百科 - PDAWIKI),5 u& J% R% u1 U" Y! W
据我观察, dfsfd兄这个mdd可以在词典页面的加载过程中把最新的arts/culture分项里的例句置顶显示, 其他分项的例句切换过去也是最新的例句在前, 虽然不知道是怎么在mdd里实现的, 还是要特别感谢一下;
4 H S& A/ F$ m* N6 omdx文件, 我在坛里找到了海上1212兄发布的比较新的本地语音版, 文件虽然有点大, 但是词条好像更新也更多, 于我而言是优秀之选, 我自己就是在欧路上用这个mdx, 和我改了之后的css一起搭配使用,我修改css也是搭配这个mdx一起修的
+ _ {" Z# \2 G这个是海上兄的原帖,同样表示感谢!2 [/ a, n4 ~' l8 ~+ ~
Vocabulary.com Dictionary 重制 本地语音库
1 q7 ^4 q2 c: m6 \- o1 k* j5 j" lhttps://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=37197 U) S( P8 q# a$ Z$ s
(出处: 掌上百科 - PDAWIKI),
0 l; r; A5 |! ^& w- v. F1 N
6 B; l) j1 b) H) [改版精修css下载:; X5 f# }1 w8 s
( W% j8 r3 n& H6 w1 Y
$ T: Q6 o" H$ L8 tps:第四个部分的第二个按钮不同状态的效果图,
: j0 M ^$ R. O+ d" L7 M: Z0 j8 d* p$ u; T" D$ i& E5 j/ \
/ i8 t# i4 O9 K7 W, \/ @( h% `# @, y, U$ L% Q
' G# `/ T, X* x |+ N |
本帖子中包含更多资源
您需要 登录 才可以下载或查看，没有账号？免费注册
x
评分
-
1
查看全部评分
-
|
发表于 
楼主
