这个视频我们处理一下网页的页头部分的内容，先来看一下我们的设计。网页的最开始这排内容，左边是一个标志图像，右边是个搜索框。

首先我们要让这行内容居中显示，也就是不管浏览窗口有多大，这排内容始终在中间显示。我们可以先把他们放在一个盒子里，给这个盒子设置一个宽度，再让这个盒子居中显示。

然后我们再添加两个盒子，一个放标志，一个放搜索框。

这里我们需要用到图像标志，可以把图像这块切下来，保存成一个文件。

切片

先选择切片工具 ... 按住鼠标左键，在你需要切片的地方，拖出一个你想要保存成图像的区域，这块区域会用蓝色的线标记出来，上面还有一个编号。放大设计图可以再调整一下这个区域的大小和位置 ...

你可以点击工具栏上的缩放工具，使用快捷键 z 可以直接切换到缩放工具。

或者我们可以按住 空格键，同时 mac 用户再按住 command ， windows 用户按住 ctrl 键。这样你会发现鼠标指针会变成一个放大镜 ...

这个时候，用鼠标左键点击设计图上的某个位置，可以放大显示 ...

如果再同时按住 alt 键，鼠标指针会变成带减号的放大镜，点击设计图，可以缩小显示 ...

或者我我们可以直接左右拖动鼠标来缩小或者放大 ...

放大到合适以后，松开鼠标... 按住空格键，用鼠标拖拽，可以移动显示的位置 ...

然扣我们调整一下切片的大小和位置 ...

调整好以后，mac 用户按住 command ，windows 用户按住 ctrl 键，这样会暂时切换到 切片选择工具 ...

双击这个切片 ... 修改一下这个切片的名称 ... 注意切片的名称会作为切片图像的名称，所以我们不要使用中文，可以使用字母，数字，下划线或者横线来定义 ... 输入 logo

下面我们要把这个切片存成图像 ...

点击 文件 ... 存储为 Web 所用格式 ...

然后点击选中这个切片 ... 我们可以修改一下这个切片图像的格式 ...

在右边 预设 这里，你可以看到当前的格式 ... 现在是 PNG-24 这种格式，这里格式支持图像的透明效果，不过生成的图像文件会比较大。在左下角这里，会显示图像的大小，现在是 7K 左右

这里我们的标志图像不需要透明效果，而且这个标志图像上的颜色比较少，所以可以选择 PNG-8 这种格式 ...

注意图像的变化 ... 现在图像的大小是 4K 左右，比刚才的要小一些，并且标志图像不会有太明显的差别。

设置好以后，点击 存储 ...

选择一个保存的位置 ... 然后在 切片 这里，我们选择 选中的切片 ... 这样 Photoshop 只会为我们导出选中的切片图像 ...

回到桌面 ... 在 images 目录的下面你会看到导出来的切片图像， logo.png ... （# 按一下空格预览）

下面我们可以把这个图像放在网页的目录里面 ....

打开 fenikso 这个目录，在这里新建一个 images 目录 ... 我们可以把网页需要用到的图片都放在这个目录里面 ...

把 logo.png 拖入到 images 这个目录里 ...

下面视频我们编写代码，完成页头部分的设计。