医药计算机基础教程吴刚

好嘞，接下来咱们继续了，然后右侧的这个内容哈，右侧的内容啊，综合缴费系统，然后包括这个啊，面包蟹，嗯，这个面包蟹是啥意思呢？这里面我给大家稍微解释一下哈，这个面包蟹是什么意思？首先 他是首页产品中心义赛综合缴费系统，指的是什么呢？这是网站的首页是吧？然后进入到产品中心，产品中心里的综合缴费系统是这样的一个父子关系， 所以说这个面包蟹相当于是什么意思呢？是不相当于是一个导航，一个小标识，一个引导他，有点像什么呢？嗯，以前有这么一个小故事哈，什么故事呢？这个面包蟹的故事啊，一个小孩哈，走丢了， 走丢了，走散了，然后走散了之后，这父母很着急吗？就去找他，那么找他的时候找不到啊，这记着呀，这小孩啊，临走的时候啊，给他一个面包，是吧？然后呢，就从家里面看，这地上有这个小孩边走边吃的这个面包的这个面包蟹啊，然后沿着这个面包蟹 找到这个森林里，最后找到了这个迷路的这个小孩啊，把小孩带回家了哈。所以说面包蟹相当于是在二级啊，甚至三级啊，更深的页面当中，帮助我们快速的捋顺当前的页面 在网站当中的位置，以及尽快回到首页，或者回到主页的这么一个一个内容啊，一个区块，所以说咱们给他起个名叫面包蟹，其实就是什么呀，尤文 文字组成的按键是吧，由文字组成的这个按钮，那么接下来咱们 开始继续制作哈啊，上面的这一行文案是不是都跟产品中心是一个对齐的关系哈？所以说接下来咱们就直接给大家复制过去了，复制过去 综合缴费系统自动选择图层哈。综合缴费系统移过来， 移过来哈。然后接下来对齐了吧，是吧？技巧，三条线都出了，说明集中对齐了哈，集中对齐了啊，不能手抖。 然后是这几个文案，这个字号大家一眼就能看出来，应该是十二号字吧，是吧？移过来之后，三条线如果都有的话，说明就对齐了哈。哎， 对齐了是吧？右侧对齐了，嗯， ok， 那么接下来 ctrls 啊，咱们存储一下，然后接下来 看一下这块，这块我觉得还是没对齐哈啊，这个文案对齐，这块没对齐，向下再移一下好， ok， 这块这个对齐了， 然后接下来咱们再看一下啊。义赛综合缴费系统左面是什么呢？左面是配图是吧？右面是详细信息点，点击这个详细，是不是可以进入到内容页面是吧？ 咱们首先还是去找一下这个配图啊。配图，那么这个就是相关的这个配图哈，咱们拿过来，这个肯定是跟跟企业要，是吧？跟企业要给我们这个配图， 然后 ctrl a、 ctrl c 给他复制进来，复制进来之后呢，进入到这个产品中心， ctrl v 给他贴过来，贴过来之后咱们要注意一下。注意一下什么呢？他的这个大小和这个位置是吧？嗯，这个位置很重要，咱们可以 大体了解一下他的高度哈。整体的这个高度是多少呢？是个一百四十个像素的这样一个高度是吧？ ok， 那么接下来咱们就要把这个图给他适当的这个缩小一些哈，缩小一些，具体具体多大？具体多大呢？ 缩小一些啊，跟住 t 要进行缩小啊，这时候咱们看 h 啊， h 一定是比一百四还要小，差不多个一百二三左右是吧？这样的一个，呃，高度， ok， 确定，确定好了之后，咱们看一下哈，啊，他在整个画面当中的这个布局哈，要有这个文案信息是吧？有文案信息，文案和他们之间的这种布局关系啊，咱们首先还是给他移过来，都对齐哈，按住 shite 再向下移，向右移， 是吧？这样的一种关系哈，哎， ok， 然后适量的再缩小一些哈，然后接下来是吧，这个文案文案是一致的是吧？这些文案我给大家直接直接复制过来是吧？一赛，然后版本和 简介哈，这几个图层， ok， 我就给大家直接拖拽过来，同样的这个道理，是吧？首先还是 与他先贴住是吧？与他先贴住这样的一种关系哈，贴住，哎，都贴住了，按住这个键，哎，十二十， ok， 没问题吧？那么这个时候大家看一下哈，最右侧，最右侧是不是基本上已经 贴住了是吧？贴住到这个边缘的位置啊？说明什么呢？说明咱们这个配图是吧？稍微还是有点大的，是吧？所以说咱们接下来再给他 啊，缩小一下，缩小一下，这个配图缩小一下哈，然后接下来这些文案信息哈，这些文案 锁链链住他们的位置关系，咱们再进行重新的调整，移过来哈，和他对齐就可以了，然后按住 shift 键移动十个像素左右。 这条线啊，这条线怎么来的？这条线下面是不是开始有这个分割线哈？分割线怎么来的？这个大家应该应该都都知道，是吧？这个用用这个小点吧，英文状态下这个小点 打过来的是吧？嗯，咱们直接把它给移过来就可以了哈，这块既然咱们首页讲过，咱们就不叙述了啊，移过来之后还是哈，按照我们的这个原则，先给他贴住 改写的贴住哈，贴住之后，然后移动十二十，哎，这样就没问题了，是吧？然后 接下来接下来哈，咱们看一下这个内容区， 这个图 和这个线和这些字，这些 ctrl g 变一个组，咱们可以叫什么呢？叫 内容是吧？内容。然后呢这个啊，综合缴费系统等等这些圆角矩形，产品中心和这个矩形哈，这些可以给他变一个组，叫什么呢？ 列表是吧？列表，列表区域，然后啊内容区域是吧？列表区域的这个综合缴费系统首页这几个 咱们给他单独的拿出来哈，拿出来， 单独的拿出来哈，这个 ctrl 加右中框号键，单独的给他拿出来，然后这部分区域变成啊列表区域， 哎，这些东这些东西应该还是还是在列表里呢啊，刚刚我碰到了什么呢？咱们应该是 动这两个字，是吧？这两个字要拿出来哈，否则跟他们就黏在一起了。看一下哈这个列表当中的综合缴费系统 这几个字啊，和产品中心这几个字哈，咱们首先先移一下他们的这个位置，然后给他 ctrl g 编一个组，叫什么呢？叫这个标题， ok， 这回啊，应该没问题了哈。然后左侧的这个文案信息没有显示哈，我们看一下这个文案信息 长在哪了？肯定是被挡住了，是吧？被挡住了我们给移上来就可以了， ok， 这样的一种关系是吧？哎， ok， 然后这个内容区域包括内容 和列表两个块哈，内容和列表两个块，然后这个内容的标题 咱们给移出来，哎，这回关系就捋顺了，是吧？然后接下来咱们要复制的是什么呢？是复制内容这部分区域是吧？大家看一下我们复 是到什么程度呢？其实就是友情链接之前这块，咱们给他填满就可以了哈，有可能他一直往下排呀，排排很多哈，然后右侧加滚动条是不？都有可能，是吧？所以说咱们先 给他填满就成了。实际上在网页开发和制作的过程当中哈，很有可能他里面的实际内容会更替吧，是吧？比如说这是缴费系统，这是缴费系统一点零至二点零，是吧？那么但是大体的板式我们要先给他排好， 那么针对于这个内容区域自动选择勾选掉下，然后 ctrl 勾一个内容副本，然后接下来咱们移动一下他的位置，移动一下他的位置哈，首先先 贴住，是吧？贴住，然后一二三都选中之后， 嗯，然后接下来再副本一个 ctrl 勾，移动一下他的位置， 先贴住，先贴住，然后一二三，对吧？啊？这个时候在整 歌的这个产品中心的这个综合缴费系统当中，我们就能看到这样的这个啊，表单布局了哈，然后接下来可能在内容更新上的时候，有可能是怎么样的呢？比如说哈，这个，这个可能是这个啊，比如说二点零， 是吧？这可能是二点零哈。呃，假如说是二点零，那么嗯，这块调整 一下哈。这个文案，这个文案被练住了，是吧？这个文案他是要对齐的，比如说他是二点零，那他可能是这个一点零，他是三点零，是吧？然后内容简介 这些都是要更新和替代的哈。但是我们设计网页把这个图像和文案的这个格式的大体的把 是放到这规定好了之后，接下来具体的这个内容的图片的替换，是不是就由以后咱们再更新再迭代的时候，找一个图片直接放到这个位置，然后大小和 他们保持均等和一致就可以了哈。那么这个是啊，二级页面的这个产品中心页的一个制作过程，这块大家自己花时间练习一下。

来接下来咱们看一下哈扁平类的这个按钮如何去制作哈，那么制作方法，制作方法哈，我给大家尽可能的用比较快速快捷的这个方式去讲哈，讲整个这样的一个制作过程。那么首先咱们看一下 按钮其实分为两部分组成，第一部分是什么呢？第一部分其实就是这个底座，底座哈，底座这个基础底座，那么第二个部分就是上面飘出来的这个字哈，飘着一层文案， 那么有可能在文案的基础上还有什么呢？还有这个图形是吧？图形，比如说啊，点击下载，他可能会同时建一个下载的这个图形哈，基本上也就是这两部分组成的。那咱们看一下啊，如何去个性化去定义咱们的按钮，最终还是靠 这个底座来定义的哈，那么咱们看一下哎，矩形的这个底座到底是怎么制作的啊？首先咱们还是使用什么呢？使用形状工具，快捷键是 u， 咱们使用这个矩形工具来进行绘制哈，比如说这样的一个按钮，这样的一个按钮啊，这个长度和宽度咱们可以，咱们咱们是不是可以在他基础上去 去进行描膜，是吧？哎，这样的一个按钮的这个颜色就可以了哈，这个颜色呀，大小啊，是不是都没问题？ 接下来哈，咱们制作的时候，比如说哈，哪块大一点或者哪块小一点，咱们是不是可以 ctrl r 把这个标尺，把这个标尺调出来之后可以建立什么呢？可以通过这个建建这个参考线的方式哈，这个参考线 把它可以移走，通过见参考线的方式，大家看一下，我们就知道这个按钮的具体这个大小 应该是应该是什么样的一个大小的哈，然后接下来我们可以调整他的大小，调整到一个合适的程度， 然后再向上面飘这个文案，大家看哈，如果你通过啊文字工具去打文字的时候，大家看看这个时候有可能出什么呢？大家看哈，鼠标的箭头上有可能出一个字符的情况，周围有一圈 曲线哈，这个时候大家看，如果你在此基础上去打字，打字哈，比如说你去打一些这个文案，大家会发现啊，这个文案长在哪了？ 来看这个，这个文案是不是长在这个矩形的区域里的？大家能不能理解我说的意思啊，长在这个矩形的区域里相当于是什么呢？相当于是不是以这个矩形，大家看看这个文案，以这个矩形的这个形状 为一个小房子，相当于咱们制作一个，大家如果学 ps 的时候会知道啊，是不是相当于咱们做了一个这个啊，剪切蒙版，相当于把文案信息剪切到这个 这个嘴型区域里的啊，那这种制作方法对不对呢？一定是不对的，为什么呢？因为我们这个文案信息啊，我们的文案信息如果 对应这个矩形的底座，如果进行对齐的话哈，如果进行位置调整的话，那他可能就很难实现了哈，所以应该如何去制作呢？大家看啊， 虽然文案准备打在这个矩形这个区域上面，但是大家一定要知道哈，如果出现这样的一个小标志，说明什么呢？说明他即将进入到这个矩形区域的范围内，所以我们一般在在外面哈，在外部大家看在外部啊，看他没关 的地点一下之后，哎，然后开始输入我是什么呢？我是按钮，我是按钮这几个字哈，啊， 输入好了之后，然后再把这几个字给他移过来，移过来哈，然后加两个图层，加两个图层哈，选中之后对他进行这个水平居中和垂直居中啊，这样的一个效果，咱们就制作好了哈， 那么注意选择的时候这个字体哈，这个字体大家记着吧，这字体，比如说这样的字体是不是看起来文案就不太好识读了，是吧？所以这个字体一定要注意哈，尽可能的使用这个啊，比较看起来哈，比较常用的字体，比如说咱们这个使用这个微软眼黑， 微软雅黑这样的一个字体是吧？哎，使用这这样的一个，呃，这个， 这还不是为人眼黑哈，给给大家再调成为人眼黑字体哈，哎，这样的一个字体，那么接下来大家一定要注意哈，呃，字体选好之后，这里面要注意一个点是什么呢？要注意一个点，是这样的一个问题哈，大家看一下，我用这个选框工具，框什么呢？ 选框工具去框这个框，这个矩形哈，大家看一下这个矩形的宽度 是多少呢？这个矩形的宽度咱们看是这个幺二八， w 是幺二八是吧？这个 w 和这个 h， 大家要注意哈 啊，大家一定要注意，这个 w 和这个 h 一定要是偶数，一定要是偶数，同时这个字号呢？字号的大小也一定要是偶数，文案的字号也一定 要是偶数，为什么呢？大家这里面给大家讲一个点啊，比如说咱们这个按钮最后是在一个什么场景，什么雨境下去制作的呢？制作完之后咱们是不是应用到网页和网站的设计当中， 那么网页和网站设计我问大家哈，大家看一下他是一个平面的作品，还是一个 什么呀？可以与人之间发生交流，发生互动的这么一个信息的平台，是不是一定要与人发生互动哈？所以你会发现哈，你做完的这样一个整个的网页或者是网站的设计，做完了他之后，大家要知道哈， 他肯定不是一个平面展示给大家看的，而是要与人发生交互的，所以说所有的按钮也好，所有的自断也好哈，所有的这个 啊，一些图标也好等等，他是对用户而言，他是可点击的， 那么所以说这些可点击的东西是不是并不是咱们平面设计师或者是 ui 设计师设计出来的，而是什么呢？而是你设计出来的这个网站的这个平面最终要干嘛呀？是不是最终要拿进去写代码？ 写代码使什么呢？使我们的这个平面的这个网站的设计稿最后有什么呢？是不是有可以交互，可以发生 与用户之间交互交流的这种可能性，那么这个时候就会牵扯到用户去点击的这个问题。那么这个时候你要知道啊，你的这个作品，你的这个产品最后落地实现成这个产品的过程，并不是说你出来 一张网站的设计稿就完成了，同时他要由这个网站开发工程师写代码，最 后让他成为一个网站作品，那么这个过程当中他要写代码，这里边可能就会牵扯到一些什么呢？一些规范和规则哈，比如说咱们经常看到的这个居中这样的一种 啊，程序一种这个代码的应用，他会应用到什么呢？应用到所有的所有的这个网页网站设计当中来都会有可能应用啊，所以大家一定要知道啊，你的这个按钮的这个宽度和长度，如果是双数的话 啊，文案的这个字号的大小如果也是双数的话，或者咱们可以叫偶数哈，那么偶数和偶数在居中的时候，他就一直能够 实现一个绝对居中的这么一个状态。那么假如说有一天我这个文案信息啊，假如说是 四个字是吧？假如说变成三个字或者变成五个字的话，大家看看有没有这可能，当然也有这个可能吗？是不是？那么这个时候你会发现啊，只要字号，只要字号是偶数的同时什么呢？同时这个底座 底座的这个数值也是偶数的的话，那么这个时候你会发现哈，偶数和偶数，无论字，无论字符哈是基数还是偶数，偶数和偶数永远是可以集中对齐的吧，但偶数和基数就 就不太可能集中这些他往往可能只差一个像素就集中不了了，大家能理解我说的意思吧，所以大家一定要知道哈，咱们做这个网页或者网站元素的话，一旦牵扯到写代码和网站开发 工程师配合，或者是做 app 也好啊，同样的道理，和软件开发工程师要配合的话，你一定要尽可能将元素也好，字号也好设置成偶数，否则的话，你在找工作的时候，对方一看你的这个按钮什么做的都不错哈，但是 发现什么呢？发现你这里面有基数，一旦有了这个基数，就说明在这块你可能还不是不够专业哈。哎， 所以说你最后的什么呀，这个设计他要做细节的微调啊，所以说咱们一定要尽可能在最开始的时候，最早的时候就有这样的一种意识哈，在美观的基础上，在美观的基础上哈，咱们尽可能的 啊，让咱们的这个项目更加符合后期软件开发人员的实际的使用需要啊。这里面给大家讲到这，那么接下来咱们看一下哈， 那么一个按钮做好了之后，做好了之后怎么办呢？咱们可以是不是可以给给给他两个图层选中之后， ctrl 自己变一个组啊？咱们比如说给他变成一个扁平啊，矩形 按钮啊，那一个按钮就制作好了，那么接下来咱们看一下啊，制作这个下一个按钮啊，制作下一个按钮，咱们还是这一个这个参考线哈，然后大家看一下这个按钮是什么样的形式呢？他是圆角矩形的按钮，是吧？所以说咱们在 u u 形状工具下面按 shift you 切换到圆角矩形，接下来咱们看一下哈，这个圆角矩形，咱们首先在这里面去调半径哈，比如说半径是十个像素，指的是这个倒角的大小吧，是吧？然后接下来咱们进行绘制啊，绘制的时候咱们可以在上面啊，在上面绘制 绘制，大家看一下，看一下哈，哎，看一下，那么这个时候有可能出现的问题是什么呢？就我这个圆角调大或者调小的这么一个问题哈，那么我要跟大家说什么呢？无论这个圆角是调大了也好，还是调小了也好，这里面大家一定要注意哈， 你绘制完之后，如果大或者小你要干嘛呢？你要将原有的删掉之后重新调，大家能不能理解我说的意思啊？重新重新调，重新画，比如说十，大家觉得有点大的话，比如说调成八，然后再进行重新绘制，是吧？啊，以大家认为合适满意的为准啊， 哎，大家一定要注意哈，这块一定不能嫌麻烦。 ok， 那么比如说我绘制好了之后，那么接下来咱们是不是可以在原有的按钮之上吸一下这个颜色哈，然后我是按钮 这几个字是不是可以借用一下，借用一下哈， shift 加右中框号键，飘到最顶层，然后接下来，接下来，嗯， 把这个圆角矩形啊拿上来啊，拿上来，这是这是两个图层，这是两个图层哈，然后一起选中之后，移动工具状态下水平居中，垂直曲中啊，这样的按钮就 制作好了哈，然后接下来咱们再看一下啊，胶囊型的按钮，这底座如何去制作？那么在圆角矩形的基础上，这块大家注意下，圆角矩形基础上半径尽可能调一个特别大的数值，比如八八八相当于什么呢？相当于是不是咱们在做这个圆角的时候，他就是一个特别大的圆角， 两个圆角都重合到一起了，大到重合到一起，他就自然变成一个什么形呢？大家可以看一下，自然就变成一个胶囊形了，是吧？ ok， 没问题吧？然后上面的文案就不给大家做了哈，胶囊型的按钮。那么同样胶囊型的按钮在基础上是不是还有可能 去加一些什么呢？加一些这个小形状哈，小形状啊，这些可能都是配合按钮，配合按钮一起来实现的哈。所以说大家要注意什么呢？要注意他们的风格和形式，和文字和文案一定是统一的关系啊，统一的关系。

那么咱们找到刚才这个输出的这个呃文件哈，然后找到文件夹的位置，然后找到刚才这个生成的这个制服动画，然后咱们可以这个打开它哈，打开， 嗯，看一下哈，那么这个就是咱们生成出来的这个动画，那么浏览这个效果有什么作用呢？这个不光是看咱们这个效果生成的是不是理想哈，那同时 比如说哈，你觉得哎，那这个颜色，比如说配色哪块不好看？或者播放速度快了，或者播放速度慢了，或者是有任何的问题，是不是咱们可以在 ps 的软件当中进行重新的调整，是吧？重新的调整，再重新调，调好之后再三键加 s 去进行存储，那么最后应用，那么这个就是整个制服动画的制作过程，那么当然哈，那么各位实际制作过程当中可能会制作，比如说一个小人眨眼的过程哈，大家想一想应该怎么做？ 首先要有一个睁开眼睛的，有一个闭着眼睛的，那如果你想他的针数更多一些，过度更柔和一些，是不是？比如说微睁微闭的这个状态，就是睁和闭之间的这个状态，你还要再去做一些补充性的过渡针，那么最后使你的这个动画的这个效果看起来 尽可能的去啊，让他啊比较顺畅一些哈，那么最后生成好的啊制作效果。那么这里面还要跟大家再强调一点什么，就是制作动画一定要使他元素尽可能的去简洁，色彩去明快一些，那么千万不能在一个世 设计作品当中有太多的这个图层关系，或者说是太多的这个细节啊，这样生成出来的这个效果，可能会因为不同的这个计算机的这个播放的这个这个这个内存呢，或者是这个各种这个配置啊，播放起来效果可能会卡，那么就达不到呃， 咱们心目当中预期的效果了哈，就是大家一定要注意了哈，这个这个动画肯定不是像静态图一样给人盯着看去了解这个信息的， 而是本身通过这个动的这个过程，通过这个动向啊来去起到一个吸引人的作用，那么这个作用给他表现出来了，我们的动画就制作成功了哈，所以制 做技术动画要结合动画本身应用的特点和场景来选择制作什么样的内容。那么这块就给大家讲到这。

好了，各位同学，咱们从今天开始学习电商斑点广告的设计，那么大家都知道哈，这个电商广告 他有一个特点是什么呢？他的这个载体，电商广告的载体一般长在哪啊？是不是长在这个外边端居多是吧？外边端和移动端是吧？所以说我们最终 通过搬那的形式，通过搬那的形式去承载这个广告，那么这是一个点，另一个点就是我们如果做电商广告， 很明显我们最终是为了卖产品，因此针对于不同的产品，那么广告的特点， 广告的内容，广告到底是针对活动的，还是针对某款产品的？ 他们一定有他们自己独特的特殊性，那么所以这种不同的特殊性 目的、意义、价值，往往通过色彩配色的方式加以表现。那么咱们看一下电商广告的色彩到底由哪些方面构成的啊？大家通过 全面系统的了解电商广告的配色啊，相关颜色的使用，相关色彩构成，对用户不同的心理感受，对用户 和你的这个产品之间产生的这种关系进行一个深入系统的分析。那么在此基础上，各位同学在这块系统上的了解了，再去做电商搬那的广告，你就会知道不同 同的斑点会采取不同的色彩配色的策略，以达到你的最原始的设计这个斑点的初衷，咱们接下来看一下。 首先大家要了解色彩的基础知识，什么基础知识呢？第一点很重要的一点就是色彩的三个要素，色彩三要素， 色相明度、纯度，或者是叫饱和度哈，那么这是色彩的三要素，色相明度、纯度哈，那么有同学可能会有这样的一种感受哈，就是吴老师你说的这个三要素，乍一听我觉得他很专业，是吧？听起来很专业， 那么到底他们三个都指的什么东西？那么在实际的应用过程当中啊，他们 到底是什么样的表现形式？我应该如何去了解他们，如何用他们？那么咱们接下来进行详细的分析。首先，色相， 色相是什么呢？咱们解释一下色相的概念哈，色相就是各种色彩相貌的称谓哈，色彩的相貌也就是色相，比如说红色是一种色相 啊，蓝色是一种色相，黄色是一种色相啊，绿色是一种色相啊，紫色是一种色相，是吧？嗯，所以说色相是色彩的，色彩的首要特征是区别于不同色彩的最准确的标准， 是吧？所以说呢，大家会发现哈，实际上的任何黑白灰以外的颜色都有色相的属性，而色相呢，也就是由 基本的原色间色和复色来构成的。那么这里的原色间色和复色到底和色相之间有什么样的联系呢？比如说，我给大家举一个简单点的例子哈， 嗯，大家会发现哈，哎，红色的， 红色的红灯哈，然后这个黄色的，黄色的黄灯啊，然后这个绿色的绿灯，那么这个时候大家看一下啊，当各位同学看见这个交通灯的时候啊，交通指示灯的时候啊，红黄绿交通指示灯的时候，大家就会发现啊， 红灯就一定要停，绿灯才能走，是吧？停和行之间的关系，那么停和行是通过什么 来确定的呢？其实就是通过红色这种颜色的色相和绿色这种颜色的色相，告诉司机师傅们，告诉行人你是需要停还是需要走，那这里面哈，我跟大家说一下啊，这个色相 他本质属性到底是什么？大家会发现哈，假如说你开车也好哈，或者是你是行人不行也好，或者是你骑自行车也好哈，那么这里面有一个问题是什么呢？就是你去区分你到底该走 还是到底该平，是用什么来区分的呢？是由于红灯颜色更亮一些，或者是绿灯颜色更亮一些，或者是每个灯的灯泡的瓦数 更大一些，是根据这个来确定的吗？是不根本不是根据这个，而是根据不同的颜色来确定的。无论啊，这个城市的红灯的颜色更亮一些，还是那个城市的红灯颜色更亮一些，只要他是红色，你就必须要停下来。那么 红色的这种颜色代表的其实就是最基本的色相。所以大家会发现哈，我们的交通指示灯 是严格根据色相来区分的哈，跟这个灯本身的这个明度啊，跟这个灯本身的这个纯度啊，什么关系都没有哈，无论你去的那个城市的这个啊，红绿灯哈，他到底是大红色 还是啊深红色还是暗红色，只要是红色区别于黄色和绿色的这个红色就必 必须执行停的基本功能啊，那么这个就是基本的色相的概念。那么这里面说的啊，色相的概念分为几块哈，一块是原色， 什么是原色呢啊，大家看哈 rgb 啊，代表的是什么呢？就是这个红色啊， red， red g 代表的是什么呢？ g 代表的是德瑞，也就是绿色， b 代表的什么呢？ blue， 蓝色？ blue， rgb， 这些颜色共同构成了什么呢？共同构成了我们在电脑当中呈现的不同的这些 颜色哈，就是说有同学说哈，老师，我看见的这个，这块是橙色哈，这块是橙色，然后我看见这块呢，是这个青绿色哈，哎，这块呢，是这个 紫红色哈，然后这块是蓝紫色。所有的颜色啊，他们最原始的颜色都是这个 rgb 的这三个颜色，那么在此基础上，在此基础上哈，我刚才给大家指出的什么是金色呢？ 哎，比如说橙红色，比如说蓝绿色，比如说蓝紫色，比如说这个紫红色， 他们相当于是由这些原色，原色和原色之间哈，比如说橙色，是由，哎这个红色，然后里面稍微加一点黄色呀，然后再加一点其他的颜色配出来的这样的颜色。也就是说哈，如果一个颜色是纯，比如说 red 红色， 一个颜色来表现出来这个颜色的，那他就是原色。如果什么是金色呢？金色指的是两种颜色，比如说啊，这个是 啊，二是红色哈，然后呢，再加上另外一种颜色哈，比如说加上这个黄色，最后变成了橙色，那么这个橙色呢，就是金色。什么是肤色呢？比如说哈，大家能不能感受到哈，比如咖啡的颜色，咖啡的颜色什么颜色呢？ 哎，有点像橙色啊，橘黄色，有点像橙色啊，站在橙色的基础上呢，还没橙色看起来那么鲜艳哈，里面还加一些灰色啊，然后呢？还啊，加了一些这个浅灰色哈，然后呢，还加了一些啊，这十色哈，最后共同配出来的这个颜色 色是咖啡的颜色啊，所以你会发现咖啡的颜色由 n 多种颜色调和而成的，那么这种颜色就是复合色哈，复色，原色、间色和复色，但是无论他们是原色还是间色还是复色， 不同的颜色哈，只要他不是纯黑或者是纯白或者是灰色的，那么他就是有色相的哈，那么这就是色相的基本的概念。

那么咱们这个呃，做这个网站之前，咱们先参考一些这个企业站哈官网到底长成什么样哈，大家可以大体浏览一下这个企业站的这个气质 啊。大家首先要知道哈，我们做这个企业的官方网站哈，企业的官方网站，他最终啊， 他可能并不仅仅是宣传产品和服务的哈，最终还是要以宣传这个企业本身的这个形象和气质为主的哈，所以说相对而言，网站的这个建站 可能会要啊稍微的严谨一些哈，更多的去尊重网站和网页的这个设计规则，是吧？那这样的一种呃气质哈和格调，我给大家带大家打 看一圈啊，然后回头这些参考网站会给大家发过去哈，大家自己去呃详细的去研究啊，包括这种蓝色为主的这个色调，呃，可能有点像咱们即将展开的这个呃，个案分析的这个课堂案例的这种 这种这种效果啊，当然可能咱们呢会比他的稍微的复杂一些啊，大家可以感受一下这个气质啊，企业战的这种气质。其实我们做企业战就是在做企业的什么呀啊？ 网络版的宣传册是吧？所以说这个企业占本身给人的这种形象啊，气质啊，那么到底是一个什么样的这个啊，定调什么样的一个格局，这个是至关重要的，是吧？嗯，咱们答题看一下哈，浏览一下， 嗯，不同的这个企业站呢，给人的这种感受哈，呃，是不太一样的，但是总体上，总体上给人的感觉是吧，还是有一个格调在里面的是吧？无论他是做哪个行业的哈， 把这种气质给他做出来哈，那么 ok， 咱们大体先浏览到这哈，然后接下来咱们看一下我们想做的这个 啊，易赛软件的这个官网啊，这样的一个企业战的一个这个啊，首页啊，应该如何去制作？ 那么这个首页它分为哪些内容呢？其实首页分为的这个内容最重要的一点大家应该知道，应该是首屏，是吧？然后接下来这个第二 二平这个内容区域，内容区他是不是有可能有很多平组成啊？因为不光不，不仅仅是这些内容嘛，是吧，他可能有很多平组成，然后最下面这个叫啊版权信息页哈，版权信息区他一般是长在这个最后一页哈， 大体上是这样的一个格调，这样的一种关系哈，那么回过头来，咱们先分析什么呢？分析相关的网页元素和板块信息，在整个网页当中的布局到底应该是一个什么样的形态？那么这里面 啊，我给大家准备好了哈，首先大家看一下哈，这一页的信息，相当于是咱们即将做的这个驿赛啊，企业站官网的这一页，官网的 页面设计的一个布局规范啊，咱们可以看一下，咱们可以看一下哈啊，首先 这个八十到一百二十个像素的这个区的高度，我现在问大家他是一个什么样的高度啊？这个高度是放哪的？是不是放这个最重要的信息叫什么呀？企业的 logo 的是吧？ logo 放在这个区域， 然后这里面要求什么呢？要求各个板块之间哈，会分为 n 多个板块，板块之间最小间距是五个像素，比较常用的是十十五或者二十左右个像素，也就是说板块与板块之间的这个 还是要有一定的这个间距的缝隙的，是吧？那么导航哈，导航高多少呢？高四十个像素是吧？啊？ 以及这个头部区域，头部区域就这个区域，是吧？ logo 加导航，咱们叫头部区域哈，头部区域与斑那之间，这个这个长条的这个东西叫做斑那 啊，他们之间间距是三十到五十个像素，那么一定是三十还是五十嘛？也不一定，四十也可以，是吧？那么这是给大家一个大体的高度的取值范围，因为相当于他是一段空气，是吧？这个部分就是班那的那张图啊， 那么他的高度是四百到五百五十个像素左右，嗯，是吧，咱们设置成多少呢？设置成这个四百二十个像素啊，当然我们实际做的时候具体是多少个像素， 一定要及时的和甲方沟通啊，主要还是看我们甲方希望给我们的这个战定义成一个什么样的 这个气质，是吧？啊，以及一些比较通用的这个啊。文字颜色啊，相当于这些颜色呢？相当于各种灰是吧？啊，深灰啊，深灰，浅灰，各种灰哈，这个文字大家能感受到啊。嗯， 未被选中的文字，被选中之后的点击之后的文字的不同的这个颜色，给大家一些建议的颜色，嗯， 然后内容去用竖线之间进行板块与板块之间的划分啊。段落文字的 行行距是二十四个像素哈，新闻这边行距是三十个像素，相对来讲大一些，是吧？文案也相对的这个大一些啊。标题文字和内容文字的这个字号到底是多少是吧？呃，这个文字的行距是多少哈，那么等等啊，友情链接、版权信息页， 然后网站的这个末尾部分啊，等等的这个板块的布局和划分哈，那么大体有了之后，咱们回过头来就开始去对这个网站进行一个啊制作哈，咱们老师带大家从头至尾把这个企业站，企业官网带大家 啊做一遍，那么做的过程当中遇到什么样的问题，遇到哪些需要解决的问题哈，然后咱们随时给大家说哈，大家通过这么一个网站的设计， 最终了解什么呢？了解整个企业官网的一个见证过程啊。那么我现在问大家一个问题，我问大家哈，这个左右这段的距离，我们首先要设立一个画布，是吧？左右这段距离应该是多少？我就跟大家说过，一般情况下一千以上， 一千到一千五是不都可以是吧？那么这段的高度是多少呢？是不是可以无限高啊？为什么呢？因为手平可能这个高度是七百五到八百是吧？那么再往下内容区域， 除了手评之外的这个内容区域，这部分的区域，他是不是想要他有多高就有多高，是吧？逐渐的往里面加是吧？所以说我们建画布的时候哈，一般可能会建个一千二，一千三 啊，一千五左右高度的话，我们可以自定义是吧？假如说你见矮了之后，是不是还可以在下面再加再结是吧？如果你有更多的内容需要往里面填充的， 但是咱们制作的时候主要精力还是要用在哪上啊？还是吧，还是要用在这个手平的制作上啊，那么接下来咱们可以量一下。量一下什么呢？ 量一下这个参考素材啊，伊菜首页，他的这个话不多，大小 out， ctrl c， 咱们可以看一下啊， 宽度是一三六六，高度是一千左右个像素，是吧？这样，那么 ok， 咱们首先先跟错 n 哈，宽度咱们可以建成一千五也可以，是吧？也可以按照幺三六六去建，都没问题啊。高度咱们大体给一个一千像素，然后名称咱们叫 易赛官网哈，起这样一个名字，然后点击确定，那么这个时候咱们就建立好了一个为咱们的这个 网站的设计简历的这个花布，接下来咱们看一下内容如何，按网站的这个交互规则去安排。