跳至主要內容

网页设计

xmut-lby大约 5 分钟

网页设计

课程简介

我知道你们更关心怎么考试,但这里要说的是,这个课要做什么。

这要从专业的培养方案说起。

除去信息科学共同的基础课程之外,软件工程专业的培养方向是面向网页和移动应用开发。 举例来说,就是类似淘宝和京东之类的应用。后续的课程,基本都是以这个方向为引导的。

既然如此,我们就要问一个问题:要能参与这样的开发,我需要具备什么样的知识/能力呢?

你可能经常会听到这样一些词:“技术栈”,“全栈开发”,那么我们就要问这个技术栈到底是什么?

所谓栈,除了在计算机里有的专门的含义之外,也可以做:一堆东西堆叠起来的理解。

例如我们培养方案中预计培养的技术栈:

Vue是目前使用十分广泛的前端MVVM框架,Vue会把代码转换(编译)成js文件和html页面。这个部分称为前端。 前端一般负责数据的展示,换句话说,就是负责貌美如花的部分。这部分代码通常在用户的设备(你的浏览器、或者手机app)上运行。

后端一般负责数据和逻辑的处理。最后所有需要保存(持久化)的数据,都存放在数据库中。由后端负责写入或者读出。后端和数据库一般运行在远端的服务器上。

以一个双十一计算优惠为例。

  1. 前端:负责等待用户选择商品并提交优惠请求
  2. 后端:查数据库并根据提交的请求计算优惠并发往前端
  3. 前端:根据计算的结果展示最后的优惠结果

前端的开发可以分为两个部分:

  1. 展示界面,比如购物车里有哪些商品。
  2. 处理业务逻辑,比如让用户选择商品。

前一个部分一般被称为静态页面,因为页面内容一般不会根据用户的操作发生变化。后一个部分一般被称为动态部分,这个部分需要处理用户的输入和操作,并对页面的内容进行动态修改。

静态的部分一般通过html+css实现,动态部分需要通过javascript等动态语言实现。

这种分类方式并不十分严谨,但有助于初学者理解前端的运行逻辑。

课程目标

这里可以给出课程对应的课程目标:

  1. 能结合课堂讲解、讲义以及现代资料查询工具,根据具体要求实现基本页面功能。
  2. 有较强集体意识,遵守课堂纪律和作业要求。

请注意我们课程目标的要求,第一是要求你必须具备利用所学知识以及百度、bing等手段来实现基本页面功能的能力。

这里要再次强调,学习的主体是学生,不是老师,不是老师,不是老师。老师会提供基本的学习路线,学习资源,作业。但从始至终,都是你在学习。

第二点,作为一门大一下的课程,我们课程的一大作用是建立你们对学习和学术的正确观念!请一定不要抄袭!我们会用尽所有力气来找出作业抄袭的现象并给当事人一个深刻的教训。

如何学习?

F12、F12、F12!

编码!编码!编码!

计算机(广义的,软件工程当然也属于)是一门实践性学科。想通过背书学会是痴人说梦。只有积累足够多的编码,才能获得足够多经验,你才会进步。

学习资源

由于课时偏少,你可能希望有额外的学习资料。非常好,你开始理解我们课程的授课目标了。这节提供一些可以找到的资源帮助你学习。

首先是一本实体书

open in new window

这本书作为静态页面的入门书籍非常合格,只有唯一的缺点:贵、厚且啰嗦。但确实可以手把手教你进入静态页面的领域。

这本书大概覆盖本课程前1/3的内容。

本书的源码在github上有: 源码open in new window

再次强调,照着做,不然就等于没有学习。

视频学习网站

众所周知B站open in new window是中文网络(请不要问全网最好的学习平台是哪个)最好的学习平台,很多课程都可以在这里找到视频。再次强调!你如果不动手,看多少视频都没用

此外慕课网等在线教学网站也有资源,请自行搜索。

注意要懂得搜索,这也是一个非常重要的技能。你可以尝试搜索网页设计html+css+js前端开发等不同的关键字,看看有什么区别。

在线学习网站1

有两个非常著名的技术学习站点:

w3schoolopen in new window

菜鸟教程open in new window

w3school比较适合入门,而菜鸟教程的资料更为全面,但也更杂。

总的来说两者都适合小白入门。

在线学习网站2

有时候你可能会需要权威的指南和手册,那么MDNopen in new window是不二之选。

对于动态的内容,The Modern JavaScript Tutorialopen in new window是广受好评的JavaScript教程。这本教程有中文版:现代 JavaScript 教程open in new window,不过这本书的内容全面且复杂,建议先在上一节的两个教程里打怪升级后再来。