真是不好意思自从换宿舍以来还没更新一篇文章.实在是受不了了,新宿舍不但环境恶劣还外带没网的情境.算是闲了两天,也没什么意思就想模仿个山寨版的网易163首页,断断续续4天搞定的,现在写点感受和大家分享一下.
其实最大的感触还是那句"当你想要做好一件事情的时候,你会发现任何事都决非你想像的那样简单".最重要的是以前写CSS,xhtml都是比较轻量级的诸如博客皮肤,主题等等,但是一个大型的门户网站的前端架构肯定比你想像的要复杂的多,而这些东西你不去实践的话你永远也不会理解.比如为了更友好的SEO你要选择用div还是p去标记一段文字.在写大型网站的xhtml结构的时候你个很小的问题都可以让你思考很长时间来取舍.
这可以算是一次设计稿的还原,而我可以利用的资源就是我从163上扒下来的一个屏幕截图.有兴趣的可以下载下来亲手试试.|源文件*PSD素材|
下面我将我遇到的比较重要的几点列出来,大家有意见写意见,想批评就批评^!^
- 1.xhtml的合理布局
-
一个符合标准的,合理的布局会使你的页面设事半功倍.你可以选择用浮动定位和绝对定位,前者(浮动定位在使用的时候一定要注意在适当的地方用好clear属性,要想发挥浮动定位的优点就得用好clear;后者(绝对定位)最重要的是你得知道绝对定位元素是脱离标准流的,当你改变窗口大小的时候它不会像浮动元素一样去"帮你"自适应.
我在布局的时候在总体结构上多用了标准的流布局,因为个人感觉这样会避免很多兼容性的问题 - 2.样式表的维护
-
这个往往是新手写样式表最不注重的地方,比如说css的命名规则,用"column_N"这样的id来写xhtml框架时显然没有"content_left","content_right"这样更有意义;比如说id和class的选择,这一点上我一直坚持一个原则:外围xhtml框架用id,内部表现性的样式用class
- 3.搜索引擎优化
-
你做的网站显然是想让更多人看到的,这个主要体现在xhtml上面.比如hN标签的应用必须要体现出层次及其重要性,img的alt,标签的合理嵌套,尽量不要使用xhtml不提倡的标签如"i","b"等.
- 4.样式表的优化
-
用最少的css实现最多最合理的页面表现形式,这一点将是区分高手和新手的标志哦(My opinion).我们可能做不到尽善尽美,但是一定要做到竭尽全力.我在做这个页面的时候并没有进一步优化目地是为了让有兴趣研究的同学更清楚的了解我的思维过程
今天偶然看到你的作品，确实很不错！向你学习！
这个兄弟版 163，偶也很不客气地下载了下来！
@365hope 要做研究和么？
大家都忙，所以很正常的
试着告别没有网络的日子呢.其实也挺好！
一开始层次分明
后来折腾，修修补补
不成样子了
也没心思去整理这些
技术角度上费再大的周章不如经济上的一点支出手段。
矛盾么,XHTML做的再好的站或者页面的SEO.归根到底不如靠money换流量或者本身有很多敏感话题的入门网站的权重高…
真正的SEO是用Money做推广换不来的吧^!^
做的挺牛的啊！~还有psd文件，以后必定大有前途！
呵呵！我只是从新浪抓了个截图然后自己整理了一下^!^
超强的模仿效果!赞!
有时候我控制不了样式的时候（比较懒，不愿意认真查看原因所在），我就会直接加在HTML里，直接改变样式，这样比较轻松。- -！
其实写css之前最好是想清楚布局的条理然后再去样式化，这样出现问题的机率会小很多 ^!^
那个首页做的真不错，以后我要向你看齐:D
呵呵。谢谢。我只做了实际163的N分之一。不过中间都是重复的我想也没必要写了。
没有网的生活别有意思==
都崩溃掉了。总之新宿舍环境恶劣至极^^^
好认真 刻苦的童鞋啊！！ 不错 ， 小子 前途无量啊！！
有前途，没钱途啊^!^
童鞋啥意思，经常看到这样的话
就是”同学”的意思吧。是斜音.
博主很用心啊，有时候实际应用的时候就和理想的不一样了，特别是多次修改后的代码。
呵呵！慢慢来。太复杂的东西得一点点做..
呵呵。。我也想啊，但是已经上了计算机这条船了，以后也就告别不了上网啦^!^