发新贴  快速回复

自己写的整站页面,希望老师点评。

唯美美
2013-05-31 14:24
 本帖最后由 唯美美 于 2013-6-3 15:04 编辑 

请求老师点评。

自学的XHTML+CSS2

http://pan.baidu.com/share/link?shareid=507105&uk=186865750

上面是网盘,整站的下载链接地址。 
 
monica
怎么才算点评的好、点评的不好呢?!呵呵~~来不来妙味学习,觉得不是取决我们的点评,而是你到底想不想学习这块知识哦~~{:soso_e121:} 
2013-06-01 18:09  回复本帖
 
创美易-miaov
 本帖最后由 创美易-miaov 于 2013-6-1 19:55 编辑 

来不来,是你的事。你做的东西,你自己知道什么水平哈。

跟点评没关系,而且你不符合用户体验了,还要人家去下载,凭啥哈,嘿嘿~~~
2013-06-01 19:54  回复本帖
 
jschuxue
你提的问题比较好笑!再问下 你多大了?
2013-06-01 22:30  回复本帖
 
leo
你好!

已经下载了你作品,里面有25个html文件、7个CSS文件、111张图片文件……OK,做的很辛苦,自学之路必不平坦,个中辛酸只有自己品味。

晚上没法把所有文件一一打开查看,就只说一些已经看到的比较浅层的问题,大家一起交流~~

首先看的文件,是index.html这个,看首页,是看一个整站整体的架构思想,首页写的规范,其他页面的思想和代码风格也就有了借鉴标准。

首页看到的第一个问题是:

整站都没有一个id名称,全部都是class,显然是一个恐惧id名称的作品

id虽然要求一个页面只能有唯一的一个,不可重名,但不是说整站网站就不能用id,

比如页面的头部、页面的尾部,这些地方是不可能出现两个一模一样的结构,即使以后网站维护、更新,

也不会让这两个地方出现重复的设计。

所以该用id的地方,仍然要用id,对于id元素而言,CSS选择符查找的性能肯定要略高于class的。

首页看到的第二个问题是:

对于网站的logo而言,最好的标签应该是用<h1></h1>,而不是用div包起来。

用h1标签的好处不仅在于标签语义化,而且有利于体现seo的权重,并且在命名上,你用h1标签,就可以通过包含选择符来省掉一个命名,

节省一些命名,代码就又少一点,精简的代码,相信所有人都喜欢。对了,给logo加上title吧,给个提示给用户,这不是坏事情。

在咨询电话的那个地方,虽然有图片显示,但是像400电话这样重要的信息,建议你还是在标签内容上有所体现,而不只是放一个图片在那儿。

要知道:万一因为网速的原因,用户在打开你页面的时候,没看到如此重要的400电话号码图片,那想联系你就联系不上……这事可不妙,还是把电话号码用一个标签包起来放到html文档中作为内容吧,一个可访问性网站的体现就在这些细节里。

首页看到的第三个问题是:

导航的代码量有些臃肿,比如导航的那个斜线,你完全可以把它作为每个li的背景来设置,然后多出的一个斜线,你也可以设置到ul里面做为背景,

而不是像现在这样,用一个单独的li来设置背景,这样一个导航你就至少省掉了4个li标签,节省一些字节。

首页看到的第四个问题是:

在“欢迎您,游客”这个结构里,你依然使用了ul-li这样的结构,并且在ul外面还多包含了一个div标签。

如果仅从设计图的角度来看,这样的结构是非常累赘的,ul的外面可以不必再嵌套一个div,外面的div是完全多余的。

再从ul-li这个结构来讨论,除非你的“登陆、注册……”这里的链接地址以后要加下拉菜单,否则此处的ul-li结构就是多余的,

直接用a标签来完成就可以了,既不影响效果图,也能让结构更加精简。

首页看到的第五个问题是:

在“选店铺”这个模板,因为有上下两个圆角形设计,你采用的结构是“上、中、下”,并且在这三层div外面再包了一个div,

实际上,你只要具备“滑动门”的思路,那么完成这样的设计图,做到高度自适应的话,最多用3个div足矣,比目前这个结构省了一层div嵌套,那么命名就又少一个,CSS样式就又精简一点点,但只是一点点,网站到处都少一点点,那一个整站的代码,就真的能不止是优化一点点……

“选店铺”模板还有一个问题,是你的form标签重复嵌套了太多,此处只有一个form标签即可,你要提交的数据放在这一个表单内,

后台的程序依然可以取到用户选择的数据,再次省掉3个多余的form标签,又省了一点点字节。

当然,最后的那个提交按钮,type类型为何不选择:submit?而是选用button类型?你希望让后台工程师自己加代码来完成提交动作?

首页的第六个问题是:

像是“服务类型”这种明显需要用h标签来包的元素,为何用div 包 p 标签再包文字?是为了“预留标签”给后期做类似商城设计模板的扩展么?

如果不是,那么此处的标签又用了过多标签嵌套,影响代码的简洁,并且这个结构首页就有5个,多用了5个标签,可以完全省掉、节省字节。

首页的第七个问题是:

列表用ul毫无疑问,问题是ul和div是同级元素,ul外面不需要加div——理由同上。

首页的第八个问题是:

“最新活动”下面是有序列表,得用ol-li标签,此处用ul-li标签语义化不符,得修改。哦,ol外面也不需要多余嵌套div,理由同上。

首页的第九个问题是:

“我们为什么选择艾多丽”——这个地方直接用a链接即可,不需要再嵌套div——理由同上。

首页的第十个问题是:

有“三保”,更安心!挑战4S店,我们<span style="color:#e4006e;">更快!更好!更省钱!</span>——页面出现了行间样式,不合理,请用class代替之。

首页的第十一个问题是:

“什么是艾多丽快修工场“三保服务”?”——这个模块的标签语义化完全不符合标准,应该是:
h标签、p标签、ol标签来完成,而你的是:span标签、p标签、ul标签。

首页的第十二个问题是:

“施工案例”模块,标签选择开始变的混乱,一个明显的列表结构,硬把dl结构塞在其中,并且把dt\dd的顺序颠倒,致使你不得不在dt里添加额外的span标签,运用样式把内容分割……好吧,也许写到这里,你累了,所以标签的选择和css的写法就开始随意了?

连同“店铺展示”的模块,也出现了dl用错的问题——dl这种定义列表的标签使用方法,不知道你是参照了哪里的使用原则,导致目前的理解错误?


首页的第十三个问题是:

底部的导航,再一次出现了行间样式:

<div class="nav" style="width:981px; height:51px; margin:0px auto;">

这个真心不好,并且,你测量的尺寸是一些奇数,好吧,我相信你测量的效果图真的就是奇数——但你要明白,设计师毕竟有粗心的时候,不可能把所有的尺寸都在PS里1像素不差的给你画准确,你大可以问问这位设计师:TA是故意把尺寸设计成981像素和51像素吗?请将这里的尺寸调整为一个整数吧,工作需要的是相互配合、相互理解的~

首页的HTML部分就看到这里,时间关系,没有再去细看你的CSS样式表是否合理、重用性好、写法够简洁、是否有管理;
图片文件夹中的每一张图片也没有细细推敲,但有些图片是必须要合并的,没有发现你的图片中有任何合并的迹象……

其实聊了这么些内容,是想和你一起交流:前端开发,难的不是技术本身,而是对待作品,有可能的情况下,要细致、再细致、更细致……

“设计精确到每一个像素、代码优化到每一个字节”——与你共勉、祝你的前端技能与日俱增、不断进步!




2013-06-01 23:44  回复本帖
qq7898383
粗略的看了下  细节方面确实不够,兼容性问题比较多,还有待提高~
2013-06-02 00:48  回复本帖
 
创美易-miaov
难得老师给你检查了这么多问题,你得好好学。更何况你在北京,早该投入miaov的怀抱了。

我在深圳,想去都去不了。。。。
2013-06-02 19:20  回复本帖
 
hforlove
leo 发表于 2013-6-1 23:44 forum.php?mod=redirect&goto=findpost&pid=19771&ptid=6830
你好!

已经下载了你作品,里面有25个html文件、7个CSS文件、111张图片文件……OK,做的很辛苦,自学之路 ...

收获颇多的,真的,像这种评价式的方式好像更容易吸收知识,建议课程上可以采用一下这种模式。。。
2013-06-03 10:42  回复本帖
唯美美
monica 发表于 2013-6-1 18:09 forum.php?mod=redirect&goto=findpost&pid=19764&ptid=6830
怎么才算点评的好、点评的不好呢?!呵呵~~来不来妙味学习,觉得不是取决我们的点评,而是你到底想不想学习 ...

不是的,点评好与不好,都会来学习的。只是吓吓而已  - - W3C上的人,都不给我评价。所以来这里吓吓
2013-06-03 14:52  回复本帖
唯美美
创美易-miaov 发表于 2013-6-2 19:20 forum.php?mod=redirect&goto=findpost&pid=19781&ptid=6830
难得老师给你检查了这么多问题,你得好好学。更何况你在北京,早该投入miaov的怀抱了。

我在深圳,想去都 ...

一定投入这里,必须投入。我在赚钱攒学费。

晚上回家后看老师的这几个问题指导。
2013-06-03 14:56  回复本帖
唯美美
qq7898383 发表于 2013-6-2 00:48 forum.php?mod=redirect&goto=findpost&pid=19773&ptid=6830
粗略的看了下  细节方面确实不够,兼容性问题比较多,还有待提高~

我也这么觉得,所以才来提疑问的。果然有很大的问题。继续加油改进了。实在不行来妙味重新学习一下。

因为公司,每个月都有一天是周六值班。这个制度很讨厌 ....不能周六日学习 - -

迟早有一天辞职,换公司,然后周六日去上课。
2013-06-03 14:57  回复本帖
唯美美
jschuxue 发表于 2013-6-1 22:30 forum.php?mod=redirect&goto=findpost&pid=19768&ptid=6830
你提的问题比较好笑!再问下 你多大了?

好笑就笑吧。
2013-06-03 15:05  回复本帖
无为
好豪好豪 发表于 2013-6-3 10:42 forum.php?mod=redirect&goto=findpost&pid=19794&ptid=6830
收获颇多的,真的,像这种评价式的方式好像更容易吸收知识,建议课程上可以采用一下这种模式。。。
 ...

呵呵 ,Leo上面所提的问题,本来就是我们每一节课的练习要求,也是我们的结课标准,所以你的这个建议,我们早就已经在执行啦。
2013-06-03 17:06  回复本帖
 
创美易-miaov
唯美美 发表于 2013-6-3 14:52 forum.php?mod=redirect&goto=findpost&pid=19798&ptid=6830
不是的,点评好与不好,都会来学习的。只是吓吓而已  - - W3C上的人,都不给我评价。所以来这里吓吓 ...

{:soso_e113:} 小孩子吓大人的故事。。。。{:soso_e120:} 
2013-06-03 22:13  回复本帖
唯美美
leo 发表于 2013-6-1 23:44 forum.php?mod=redirect&goto=findpost&pid=19771&ptid=6830
你好!

已经下载了你作品,里面有25个html文件、7个CSS文件、111张图片文件……OK,做的很辛苦,自学之路 ...

好的,老师,谢谢老师的点评。下一次我会做到更细致,更细致。O(∩_∩)O~。一次比一次好,CSS样式我觉得我写的不怎么样。感觉好多。
2013-06-04 22:46  回复本帖
 
chengyu1988
老师真的不错 评价的非常认真 有想去课堂上学习 唉 没时间 地点也不自由
2013-06-05 20:30  回复本帖
 
shanshan
chengyu1988 发表于 2013-6-5 20:30 forum.php?mod=redirect&goto=findpost&pid=19850&ptid=6830
老师真的不错 评价的非常认真 有想去课堂上学习 唉 没时间 地点也不自由

可以看视频学习~~
2013-06-05 23:17  回复本帖
q1207526854
我也是个菜鸟   又学到了不少东西!


加油~~
2013-06-06 22:37  回复本帖
 
chengyu1988
shanshan 发表于 2013-6-5 23:17 forum.php?mod=redirect&goto=findpost&pid=19854&ptid=6830
可以看视频学习~~

正在看呢 哈哈 真是太棒的视频 真心谢谢你们的辛劳
2013-06-10 10:00  回复本帖
 
label2013
老师的点评好更!我得copy下来逐个逐个对照自己的页面来改!{:soso_e129:}
2013-06-18 23:22  回复本帖
 
创美易-miaov
不错,牛逼哈
2013-06-20 15:44  回复本帖
 
emi

点评的好的不能再好了!!!

 

2017-07-10 23:58  回复本帖
 
猫哆哩

leo 2013-06-01 23:44发表的内容:

你好!

已经下载了你作品,里面有25个html文件、7个CSS文件、111张图片文件……OK,做的很辛苦,自学之路必不平坦,个中辛酸只有自己品味。

晚上没法把所有文件一一打开查看,就只说一些已经看到的比较浅层的问题,大家一起交流~~

首先看的文件,是index.html这个,看首页,是看一个整站整体的架构思想,首页写的规范,其他页面的思想和代码风格也就有了借鉴标准。

首页看到的第一个问题是:

整站都没有一个id名称,全部都是class,显然是一个恐惧id名称的作品

id虽然要求一个页面只能有唯一的一个,不可重名,但不是说整站网站就不能用id,

比如页面的头部、页面的尾部,这些地方是不可能出现两个一模一样的结构,即使以后网站维护、更新,

也不会让这两个地方出现重复的设计。

所以该用id的地方,仍然要用id,对于id元素而言,CSS选择符查找的性能肯定要略高于class的。

首页看到的第二个问题是:

对于网站的logo而言,最好的标签应该是用<h1></h1>,而不是用div包起来。

用h1标签的好处不仅在于标签语义化,而且有利于体现seo的权重,并且在命名上,你用h1标签,就可以通过包含选择符来省掉一个命名,

节省一些命名,代码就又少一点,精简的代码,相信所有人都喜欢。对了,给logo加上title吧,给个提示给用户,这不是坏事情。

在咨询电话的那个地方,虽然有图片显示,但是像400电话这样重要的信息,建议你还是在标签内容上有所体现,而不只是放一个图片在那儿。

要知道:万一因为网速的原因,用户在打开你页面的时候,没看到如此重要的400电话号码图片,那想联系你就联系不上……这事可不妙,还是把电话号码用一个标签包起来放到html文档中作为内容吧,一个可访问性网站的体现就在这些细节里。

首页看到的第三个问题是:

导航的代码量有些臃肿,比如导航的那个斜线,你完全可以把它作为每个li的背景来设置,然后多出的一个斜线,你也可以设置到ul里面做为背景,

而不是像现在这样,用一个单独的li来设置背景,这样一个导航你就至少省掉了4个li标签,节省一些字节。

首页看到的第四个问题是:

在“欢迎您,游客”这个结构里,你依然使用了ul-li这样的结构,并且在ul外面还多包含了一个div标签。

如果仅从设计图的角度来看,这样的结构是非常累赘的,ul的外面可以不必再嵌套一个div,外面的div是完全多余的。

再从ul-li这个结构来讨论,除非你的“登陆、注册……”这里的链接地址以后要加下拉菜单,否则此处的ul-li结构就是多余的,

直接用a标签来完成就可以了,既不影响效果图,也能让结构更加精简。

首页看到的第五个问题是:

在“选店铺”这个模板,因为有上下两个圆角形设计,你采用的结构是“上、中、下”,并且在这三层div外面再包了一个div,

实际上,你只要具备“滑动门”的思路,那么完成这样的设计图,做到高度自适应的话,最多用3个div足矣,比目前这个结构省了一层div嵌套,那么命名就又少一个,CSS样式就又精简一点点,但只是一点点,网站到处都少一点点,那一个整站的代码,就真的能不止是优化一点点……

“选店铺”模板还有一个问题,是你的form标签重复嵌套了太多,此处只有一个form标签即可,你要提交的数据放在这一个表单内,

后台的程序依然可以取到用户选择的数据,再次省掉3个多余的form标签,又省了一点点字节。

当然,最后的那个提交按钮,type类型为何不选择:submit?而是选用button类型?你希望让后台工程师自己加代码来完成提交动作?

首页的第六个问题是:

像是“服务类型”这种明显需要用h标签来包的元素,为何用div 包 p 标签再包文字?是为了“预留标签”给后期做类似商城设计模板的扩展么?

如果不是,那么此处的标签又用了过多标签嵌套,影响代码的简洁,并且这个结构首页就有5个,多用了5个标签,可以完全省掉、节省字节。

首页的第七个问题是:

列表用ul毫无疑问,问题是ul和div是同级元素,ul外面不需要加div——理由同上。

首页的第八个问题是:

“最新活动”下面是有序列表,得用ol-li标签,此处用ul-li标签语义化不符,得修改。哦,ol外面也不需要多余嵌套div,理由同上。

首页的第九个问题是:

“我们为什么选择艾多丽”——这个地方直接用a链接即可,不需要再嵌套div——理由同上。

首页的第十个问题是:

有“三保”,更安心!挑战4S店,我们<span style="color:#e4006e;">更快!更好!更省钱!</span>——页面出现了行间样式,不合理,请用class代替之。

首页的第十一个问题是:

“什么是艾多丽快修工场“三保服务”?”——这个模块的标签语义化完全不符合标准,应该是:
h标签、p标签、ol标签来完成,而你的是:span标签、p标签、ul标签。

首页的第十二个问题是:

“施工案例”模块,标签选择开始变的混乱,一个明显的列表结构,硬把dl结构塞在其中,并且把dt\dd的顺序颠倒,致使你不得不在dt里添加额外的span标签,运用样式把内容分割……好吧,也许写到这里,你累了,所以标签的选择和css的写法就开始随意了?

连同“店铺展示”的模块,也出现了dl用错的问题——dl这种定义列表的标签使用方法,不知道你是参照了哪里的使用原则,导致目前的理解错误?


首页的第十三个问题是:

底部的导航,再一次出现了行间样式:

<div class="nav" style="width:981px; height:51px; margin:0px auto;">

这个真心不好,并且,你测量的尺寸是一些奇数,好吧,我相信你测量的效果图真的就是奇数——但你要明白,设计师毕竟有粗心的时候,不可能把所有的尺寸都在PS里1像素不差的给你画准确,你大可以问问这位设计师:TA是故意把尺寸设计成981像素和51像素吗?请将这里的尺寸调整为一个整数吧,工作需要的是相互配合、相互理解的~

首页的HTML部分就看到这里,时间关系,没有再去细看你的CSS样式表是否合理、重用性好、写法够简洁、是否有管理;
图片文件夹中的每一张图片也没有细细推敲,但有些图片是必须要合并的,没有发现你的图片中有任何合并的迹象……

其实聊了这么些内容,是想和你一起交流:前端开发,难的不是技术本身,而是对待作品,有可能的情况下,要细致、再细致、更细致……

“设计精确到每一个像素、代码优化到每一个字节”——与你共勉、祝你的前端技能与日俱增、不断进步!




难得可贵
前天01:18  回复本帖
登录 后才可以发表回复