课程更新

《网站》已经更新到了第十一集，完成了首页设计以后，已经开始制作产品页面了。第十一集完成了产品页的英雄区的设计，这部分内容跟之前首页的英雄区相近，不过还是做了一些改进，比如我们用了新的长度单位改进了英雄区的显示比例。现在它不但可以响应窗口宽度，还可以响应窗口的高度。英雄区现上可以显示静态图片，还可以是一小段视频背景，视频的播放会响应滚动行为，滚动到页面一定程度时自动停止或播放视频背景。

《网站》是宁皓网出品的系列课程，订阅以后您就可以在线学习整个系列课程了。

导航栏上的标志

在《 网站 》系列课程隐藏了大量的技巧，它又提供了一个清晰的路线，让你清楚的知道做成一个页面都需要哪些东西，哪里不太理解你可以再找相关的课程去补。第四集，会去把之前设计好的导航栏，用 html，css，javascript 的形式表示出来。

拿到一个界面的设计，作为 Web 设计师，你得了解这个界面应该会用到什么类型的标签（html）去组织这个界面里的内容，你需要设计这些标签之间的关系，谁是谁的爸爸，谁跟谁是兄弟。我们需要使用 css 去给这些元素应用样式，在为页面上特定的元素应用样式的时候，你要写好样式的选择器，定位到页面上的特定的元素，在上面应用你需要的样式。

这一集你会看到怎么样把一个界面组件用代码的形式表示出来，用 html 组织内容，用 css 去添加样式，用 javascript 为界面添加交互功能。几乎都是实践，每个视频你都可以跟着动手练习，节奏适中。如果之前你没有了解过 Web 技术，这一集将是一个非常好的入门课。

设计：导航 - 移动端

在《 网站 》这个系列里面，我们会一起设计与制作一些页面上常用的界面元素，导航是页面上必备的元素之一。主导航的功能就是展示网站的内容结构， 它是用户访问网站不同区域的一个入口。这一集会先使用设计工具，设计导航在桌面设备与移动设备上的样子。课程后半部分介绍了使用 sass 创建的样式。

导航栏在桌面尺寸的设备上会显示在页面的顶部，导航栏上一般会有标志，菜单，还有一些工具，比如搜索或登录。我们设计的导航栏有两个状态，一个是正常状态，还有一个是搜索状态，就是点击导航栏上的搜索图标以后，会把导航栏上的标志与菜单隐藏起来，显示一个搜索框。

导航栏在小尺寸移动设备上有不同的样式，导航栏上的菜单会被隐藏起来，导航栏左边会显示一个菜单图标（汉堡包），点击这个菜单图标会在页面左侧显示一个边栏，边栏上的内容就是导航栏上的菜单。在下一集，我们会介绍使用代码的形式表示这个导航栏的方法。

商业网站

线框图（Wireframe）就是抽象化以后的具体的页面。页面的线框图一般没有具体的设计元素，都是用一些图形来表示页面上即将要出现的元素。制作页面的线框图，一般是在确定了想法之后，在具体设计之前。用最简单的东西把你的网站或应用的界面表示出来，主要就是把页面的布局，或者框架先定下来。然后再去设计具体的元素。

《 网站 》第二集，我们用 Sketch 设计工具，为即将要设计与制作的网站首页先做了一张线框图，让你对页面的结构有个大概的印象。在做线框图的时候，你应该已经先确定了想法，就是要做的页面的功能是什么。比如一张产品介绍页面，它的主要功能就是介绍产品本身，你的设计要配合页面的功能来完成目的。

我们要先做一张网站的首页，假设网站属于一家生产汽车的公司。首页是最常用的登陆页（Landing Page）， 你的用户很可能是通过首页认识你的。首页也就经常是用户对你的第一印象。我们可以通过一些常见的元素来传达一些信息，我是谁，我能为你做什么，我提供了什么样的产品与服务，我的用户如何使用我们的产品，我需要你做些什么，比如下载试用版的应用，报名参加体验活动。

本地服务器

工欲善其事，必先利其器。

做什么都需要一套工具，你使用这套工具完成任务，这个过程就是工作流（Workflow）。我们要开始学习 Web 设计与开发，同样需要一套工具，也要有自己的一套工作流。在《 网站与应用：商业 》第一集里，介绍了 Web 页面设计与开发的一套工作流。了解自己要使用的工具可以更有效地工作。

我们一起学了很多，有时又会感觉什么也没学到，有天我听了一个广播受到点启发，这种迷惘地感觉其实是因为没有目标，没有终点，因为学习本身就是一件没有终点的事儿。我想我们可以阶段性地定一些目标，然后完成，这样感觉会好一些，可以验证所学，也可以接受一些挑战。

​学会自定义 Drupal 上的表格还有文本框的样式，了解 Drupal 的文件与图像。再看点关于函数式编程的东西。

JavaScript 函数式编程系列博客，更新了定制 Drupal 界面的课程，新发布了 Socket.io 的使用课程。

这礼拜给您准备了 Express 框架的使用，再了解一下 Windows 平台上的工作流程，还有继续了解自定义 Drupal 界面的方法。

更新

《Drupal：自定义界面》

继续了解自定义 Drupal 界面的方法。

• 找到需要的 template，hook 还有 API
• 在本地动作链接上添加 CSS 类：template_preprocess_menu_local_action
• 去掉元素上不需要的 CSS 类
• 禁用 Library里定义的资源

新的

《Express》

用 Express 框架创建一个小应用，快速了解一下这个框架的使用方法。

《我的工作流程：Windows》

我把自己在 macOS 平台上的工作流程，转换成了一套也可以在 Windows 平台上使用的方法。