V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
sola97
V2EX  ›  问与答

学完学校的网页设计课,已经不知道怎么做网页了

  •  
  •   sola97 · 2016-06-11 11:50:17 +08:00 · 4349 次点击
    这是一个创建于 3091 天前的主题,其中的信息可能已经有所发展或是发生改变。
    这学期学了 html+css
    练习是仿照这个网站做一个静态页面

    按照平时老师的指点..html 这么写

    做 logo 是直接给一个 h1 标签加个 background,然后把文本缩进设为无限大隐藏文字..
    sidebar 是 h3 和 p 竖着排一列,理念是能不用 div 就不用 div

    位置不对加 margin 调一调,由于没学 js,各种效果全用 hover 做,css 里面全用#id 加派生选择器
    不写后端就各种 value 123456 一路到底
    (专科学校)
    顺带求推荐本书吧
    35 条回复    2016-06-12 11:25:03 +08:00
    s0f
        1
    s0f  
       2016-06-11 11:57:57 +08:00
    尽量用 class ,而不是用 id 。不写后端就各种 value 123456 ,你是指命名?
    书呢,推荐<<Head First HTML 与 CSS>>
    loveuqian
        2
    loveuqian  
       2016-06-11 11:59:25 +08:00
    斋写界面的确是很累的一件事
    sola97
        3
    sola97  
    OP
       2016-06-11 12:02:21 +08:00 via Android
    @s0f 吐槽同学的代码习惯,就跟谭浩强的 C 语言一样
    Laynooor
        4
    Laynooor  
       2016-06-11 12:03:50 +08:00
    已经很不错了。我这里上的网页设计直接拿 Dreamwave 6 可视化制作。教的页面风格都是上世纪的
    sola97
        5
    sola97  
    OP
       2016-06-11 12:04:53 +08:00 via Android
    看了一些网站的布局,就感觉自己写的是不是各种不规范
    seki
        6
    seki  
       2016-06-11 12:05:06 +08:00
    logo 那个没啥问题吧
    BGLL
        7
    BGLL  
       2016-06-11 12:05:48 +08:00
    入门的话,看书不如先看看 w3school 再说
    JiShuTui
        8
    JiShuTui  
       2016-06-11 12:06:29 +08:00   ❤️ 1
    做 logo 是直接给一个 h1 标签加个 background,然后把文本缩进设为无限大隐藏文字..

    这是为了 SEO ,豆瓣就是这样做的,知乎也是类似的做法,很多站都是这样的,可以说你老师教的是目前流行的做法。
    gdtv
        9
    gdtv  
       2016-06-11 12:07:48 +08:00
    想当年上了学校选修的网页开发课程,期末作业是做一个投票系统。我心想学校的课程要求肯定很低,老师的水平应该也不高,所以就没加任何防刷票的功能。结果被老师一眼看出来了:你丫的我怎么可以随便投 N 次票?!
    sola97
        10
    sola97  
    OP
       2016-06-11 12:08:13 +08:00 via Android
    @JiShuTui 原来如此
    gdtv
        11
    gdtv  
       2016-06-11 12:08:35 +08:00
    @JiShuTui +1 ,看到这样的教程,感觉老师很接地气
    maplerecall
        12
    maplerecall  
       2016-06-11 12:12:36 +08:00 via Android
    h1 加 background 然后无限大缩进并不是一个坏的作法,因为即可以显示 logo ,又不会影响屏幕阅读器或者 seo ,标签的使用也基本正确,使用符合语意的标签比清一色 div 要好,能用 hover 实现的东西就尽量不要上 js 。另外 css 尽量使用 class 而不是 ID , ID 最好只提供给 js 用~
    只能说专科学校教的都比我那渣渣本科的网页设计强…我大学上的网页设计课都不知道教的是什么鬼,特么作业都是用 IE6 看的…
    _(:з」∠)_
    JiShuTui
        13
    JiShuTui  
       2016-06-11 12:13:53 +08:00
    能用语义标签当然是用标签,而不是 div 。

    另外,在页面中尽量靠近 body 标签开始位置写 h1/h2/h3 这是 SEO 老手的做法。

    知乎靠 SEO 流量年增 900% (值乎上爆出来的,但不知是哪一年的流量数据),相当于节省了几千万的广告费用。
    DoraJDJ
        14
    DoraJDJ  
       2016-06-11 12:19:40 +08:00
    @JiShuTui 我很好奇这么做会对 SEO 有什么影响?若是直接用 img 定义 logo 又会有什么区别?
    JiShuTui
        15
    JiShuTui  
       2016-06-11 12:22:06 +08:00
    @DoraJDJ 百度谷歌现在不看重 meta 里的 keywords ,主要还是看正文内容。
    如果你的页面中有 h1/h2/h3 ,搜索引擎更容易理解你这个网页的主题。
    JiShuTui
        16
    JiShuTui  
       2016-06-11 12:24:30 +08:00
    @DoraJDJ 而如果 h1 里边放图片,图片又不加 alt 的话,搜索引擎无法轻易知道你的网页主题是什么,只能通过其他方法(如识别图片、语义分析正文等)来得知网页的主题。
    loading
        17
    loading  
       2016-06-11 12:25:41 +08:00 via Android
    我觉得你们老师水平不错。
    troywith77
        18
    troywith77  
       2016-06-11 12:39:26 +08:00 via Android
    相比我们之前老师还是在用 dreamweaver 所见即所得,你们老师水平已经高到不知道哪里去了
    ceoimon
        19
    ceoimon  
       2016-06-11 12:43:28 +08:00
    不是使用 Dreamweaver 也不是 table 布局,挺不错的了。其实很多老师比想象中的要好,我们的 Java Web 老师还知道 ES6 :)
    入门的话可以去慕课网,单纯看 w3school 还是略枯燥,实际上还是要自己多写。
    XianZaiZhuCe
        20
    XianZaiZhuCe  
       2016-06-11 12:44:18 +08:00
    ID 我都是留给 jquery
    hggg
        21
    hggg  
       2016-06-11 12:46:27 +08:00
    莆田系的学校?
    cdlnls
        22
    cdlnls  
       2016-06-11 12:46:59 +08:00 via Android
    还有一种用 table 布局的方法
    Pastsong
        23
    Pastsong  
       2016-06-11 12:52:28 +08:00
    除了滥用 ID 和命名可以吐槽下,其他还可以啊,能用有含义的标签就不要用 div
    sola97
        24
    sola97  
    OP
       2016-06-11 12:55:26 +08:00
    主要是有个代课老师说我们做的网页很多地方是错的,出去工作不能这么写。
    让我们少用 margin ,要规范命名,还讲了 a 标签不继承 等问题,还以为我们老师教学水平不行...
    dangge
        25
    dangge  
       2016-06-11 13:50:43 +08:00
    羡慕,我校网页设计老师说 360 安全浏览器对网页规范支持比较好,建议使用
    都不知道说什么。。。
    webcjz
        26
    webcjz  
       2016-06-11 13:52:37 +08:00 via Android
    已经很好了,我校网页设计选修课还用表格做网页噗
    popu111
        27
    popu111  
       2016-06-11 13:53:31 +08:00
    @dangge 起码比 IE8 强
    mawing
        28
    mawing  
       2016-06-11 15:18:47 +08:00
    至少不用 table 布局了,先用色块把整个布局做出来,然后慢慢塞内容吧

    推荐
    学习 Web 设计(第 3 版)
    YvesX
        29
    YvesX  
       2016-06-11 16:25:54 +08:00
    我的老师专注于教授用 DW 画表格布局, CSS 由于时间关系直接略去。
    ……所以他到底教了什么。
    21grams
        30
    21grams  
       2016-06-11 16:28:11 +08:00
    这种东西需要在学校里学吗? 随便找本书看看就会了
    yuann72
        31
    yuann72  
       2016-06-11 17:01:20 +08:00
    我所在的专科 现在还在用 DW8 教 我教同学用代码写他们还觉得写代码麻烦
    大一这一年 网页设计和 C 语言到现在教的 我要么早会了要么看一下书就会了
    plqws
        32
    plqws  
       2016-06-11 17:02:46 +08:00
    @hggg 从哪里看出来的?
    g0thic
        33
    g0thic  
       2016-06-11 17:09:54 +08:00
    可以用 html5 里的标签代替一些没意义的 div
    xiaonengshou
        34
    xiaonengshou  
       2016-06-11 18:00:56 +08:00
    @dangge 虽然开发的时候不是用 360 ,但是测试的时候第一个测得还得是 360 啊。。。。。。
    ikaros
        35
    ikaros  
       2016-06-12 11:25:03 +08:00
    除了 id 的使用外感觉基本没有什么可以吐槽的啊
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5372 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 01:19 · PVG 09:19 · LAX 17:19 · JFK 20:19
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.