第八篇：开始构建首页首先打开墨刀，新建一个项目。
在这里选择比较多，那到底选择哪个呢？为了能让自己设计出来的网页与自己电脑上看到的基本类似，我建议选择自定义大小，然后具体的大小我们去北京大学官网看看去。
来到北大官网，单击F12，然后就会调出开发者窗口，在这里我们查看下北大首页的大小。鼠标在代码的界面划过，会发现有些区域会变成模糊的状态，这就说明此段代码控制的就是这个区域。北大的官网当然是比较高级的网站，我们只是模仿，徒有其形即可，看到此时界面多处区域显示的是大小为764*413，这个比例明显不太对？为什么呢？此时我们把开发者界面的右上角的三个小点打开，然后在提示框中，选择第一个，浮动窗口。
就会看到如下界面效果。
这时就显示的是符合我的电脑界面的大小，但是可以看到两次界面大小不一样，这是怎么回事？其实这就是现在比较常见的一种网站构建方式，叫作响应式网站。可以根据浏览器页面的大小自动适应。好吧，不管这些了，我们只是建一个一般的页面而已。
此时可以看到主界面大小是1366*632，我们就先按照这个来设计吧。给项目起个名字吧。
就叫电气学院。
基本界面就是这样，左侧是页面区域，中间是编辑区域，右侧是属性区域，大家可以自己摸索模索。先将北大的主页截屏，粘贴到我们的页面，这样方便制作中完成各部分的位置比对。首先是上部的标题栏部分。
选择素材，矩形，我们要先把框架先框出来，这样，比较方便。单击背景图片，可以把背景固定在这里，上边有一个锁定的小锁，这样后期编辑时就不会来回移动了，防止不小心误动位置。框选顶部导航栏，然后在右侧修改宽度与背景图片一致，高度自己拖动一下，跟底部图片保持基本一致即可。为了我们后期方便查看位置，对矩形进行如图设置，相对于顶部固定，然后是取消填充，方便查看下边的内容，描边选择黄色，更加清晰，然后线条稍微粗一些，方便观察。
大的框架，就是这三个块，顶部一个，中间两个。对所有的文字进行框选，这些是有超链接的位置，要全部框选出他们的位置和大小，后期要设置超链接的区域，用来点击时跳转其他网页。在所有框中，添加需要的文字信息。然后我们复制一个页面，用来操作接下来的颜色替换。
选择图片，选择隐藏。就是那个小眼睛。这样便于我们接下来的操作。将一个模块的全部组合成一个组块，这样有利于查看和操作。
结构主体搭建完成，然后就是对主体背景图片简单渲染，好看些。在图片组件中，单击图片。然后添加本地图片，我随便找了一张大小差不多的图片，先垫着。
后期可以再自己设计或者搜索更加漂亮的背景，当然，纯色背景也是不错的，显得干净利落。选择本地下载好的图片即可。然后为了方便，可以导出为图片或者pdf。
好吧，也许这个是个问题，无法下载，在这里已经转了半天了，是我太天真？不能下载就算了。我是不会开会员的，不属于氪金人士。点击这个小三角，可以进入预览，由于我的只是一个主页，什么也没有，所以这个只是用来查看构建主页过程中需要用的数据的。后期可以链接其他页面，效果会好一些选择中间的标注进行查看。
这样在接下来的设计中会经常来查看这个页面的数据，是我们接下来主页开发的基础数据，保证了主页设计的一致性。当你的鼠标选择需要查看的元素时，就会提示相关的位置和属性信息，还有提示的CSS样式。是不是比较方便。
好了，主页就是这样了，接下来就开始进入织梦来正式设计主页了。开始动手实操才会觉得一切都尽在掌控。
