网站制作参考线设置 第1篇
2. 设置参考线：
- 选择“视图”菜单中的“参考线”选项。
- 在弹出的对话框中，设置参考线的间距和颜色。
3. 绘制页面元素：
- 导航栏：确定导航栏的位置和样式，如顶部、侧或右侧。添加导航链接。
- 图标生成：工具能够自动生成与设计风格相匹配的图标。
4. 页面元素制作：
- 按照设计需求，利用工具绘制其他页面元素，如图片、文字等。
5. 动画效果：
- 利用工具提供的深度学技术，自动生成动画效果代码。
- 选择丰富的动画模板，快速实现动画效果。
网站制作参考线设置 第2篇
在图片上配上一些高大上的文案，概述网站的主题。使用加粗的大字体，并带有一个副标题，用于解释细节概念：
还记得前面要调整成深色的背景吗，现在其上面的大标题使用突出的白色即可加强文字的可阅读性。颜色为白色#FFFFFF的Source Sans Pro (Black)，80px，行高为86px。将其放在距导航栏下边120px，同样的元素间不至于太紧密。
放置一个副标题定义网站的理念，告诉访客这个网站是做什么的。这里用一个不错的字体搭配：无衬线字体标题搭配优雅的衬线字体。
副标题用白色#FFFFFF，26px，Playfair Display (Italic) 字体，放置在主标题下方40px。
网站制作参考线设置 第3篇
完成“Get Inspired”分组后，转战这个内容区域的最后一部分。最后的Call To Action 要带上更多的细节，鼓励访客输入Email地址注册。
创建“Email”分组，然后回到前一个分组找到大标题图层，Ctrl+J复制移动到新建图层。修改大标题：Create Gratitude Log。
好了！现在设置前景颜色为浅灰色＃f5f5f5，用矩形工具绘制一个矩形作为Email框。其高度和Call To Action(CTA)按钮一样，430x60px。然后使用横排文字工具写上“Enter your email”这样的话，使用显眼的深色。
到“Description”分组图层面板找到“CTA”分组，Ctrl+J复制移动到“Email”组。放置这个按钮到Email框的右边，将这一整块居中。
网站制作参考线设置 第4篇
再增加一些展示，以增强网站吸引力，留住访客。由于感恩日志是基于感谢的事物这样的私事上面的，所以大众口碑是一个不错的选择，展示用户的使用感受，更易于贴近大众。
创建一个新分组“Example”，然后切换椭圆形状工具（U）（右键或鼠标左键按住切换），按住Shift键画一个圆形，60x60px。然后将一个头像图片移到圆形图层上面，创建剪贴蒙版。Ctrl+T调整图片到合适大小大小。
再做一个连续写感恩日志的成就标示。创建另外一个更小的圆形，在上面标上一个数字。这种做法十分简单，但却很实用。这个圆形的颜色是前面使用过的绿色#96c218，30x30px，文本是白色#FFFFFF Source Sans Pro (Bold)，14px。
最后给人物一个名字和描述这个数字代表的意义。名字 PT Serif (Bold Italic) 16px，描述Source Sans Pro (Regular) 13px。确保行高足够大，元素之间有足够呼吸空间。
很好，还差一步我们就可以去设计内容区域了。现在需要放置一个引人注目的Call To Action (CTA)，行动号召。让用户一看到就知道接着怎么做。创建一个新图层组“CTA”。设置前景颜色#FFFFFF，切换矩形工具（T）。然后画一个矩形形状，280x60px。注意这里使用的高度和前面的导航栏是一样的。
最后，在按钮里面输入一段高大上的文案，“START LIVING →”，颜色和前面导航栏一样使用深灰色#0e0e0e，字体是Source Sans Pro (Semibold) 16px，字符间距设置为140。
网站制作参考线设置 第5篇
创建网页背景，在“Header”分组里使用矩形工具（快捷键U）添加一个黑色#000000的矩形形状，大小为1400x728px。
现在把下载的照片素材拖动到Photoshop软件里（或者使用 文件>置入...)，照片放在矩形图层的上一层。命一下名：IMG。然后使用快捷键Ctrl+Alt+G（或者右键此图层>创建剪贴蒙版），创建一个剪贴蒙版。最后将IMG图层的不透明度减少为70%，让上面的文字可读性更强（照片素材融入背景成深色）。
网站制作参考线设置 第6篇
上面代码中 p 元素也是有参考线的，因为文字一定处在行盒的里面，如果没设置行盒，则会自动增加一个行盒包裹文字。因为文字是根据参考线排列的，如果没有行盒，就没有参考线，那么文字无法排列了。所以文字一定在行盒里面，会包裹一个匿名行盒。
文字也有参考线，元素也有参考线，默认情况下是基线对齐（文字的基线和元素的基线对齐）的，比如 p元素的基线和M文字的基线对齐。
行盒是：inline-box
**line-box：**行盒组合起来，可以形成多行，每一行的区域叫做line-box，line-box的顶边是该行内所有行盒最高顶边，底边是该行行盒的最低底边
line-box 是承载文字内容的必要条件，以下情况不生成line-box
vertical-align的值：
baseline：该元素的基线与父元素的基线对齐 super：该元素的基线与父元素的上基线对齐 sub：该元素的基线与父元素的下基线对齐 text-top：该元素的 top 与父元素的 text top 对齐（注意是增加 gap 的） text-bottom：该元素的 bottom 与父元素的 text bottom 对齐（注意是增加 gap 的） top：该元素的 top 与 line-box 的顶边对齐 bottom：该元素的 bottom 与 line-box 的底边对齐 middle：该元素的中线（content-area的一半）与父元素的X字母高度的一半对齐。 数值：相对于父元素基线的偏移量。向上为正数，向下为负数。 百分比：相对于自身的 virtual-area 的高度。
一个元素的实际占用高度（高度自动），高度的计算通过line-box计算。
图片：图片的基线位置位于图片的下外边距位置，所以图片会有白边 两种解决方法：font-size:0 或者 display: block
表单元素：表单元素的基线位置在内容的底边
总结的比较乱，凑活看吧……
网站制作参考线设置 第7篇
戴森V8美版无绳吸尘器高配版，新的动力设计。
有助吸除家中四处的过敏原，吸附小至微米的微尘，
运行时间高达40分钟，2款地板吸头及4款配件吸头，清洁空间高达291平米。
图片展示：
网站制作参考线设置 第8篇
接着来为网页创建一个导航。
创建新分组：Navigation，拖动到“Header”分组里面。然后使用矩形工具（U）画一个白色矩形，宽度让对齐到左边第一条垂直参考线和右边最后一条垂直参考线即可（可以Ctrl+T调整）。修改矩形高度为60px，不会太窄，看起来清爽一些。将它移动到对齐最顶部，然后下移30px，形成一种悬浮的感觉。
网站制作参考线设置 第9篇
现在完成了“描述”部分了，然后我们创建一个新分组“Get Inspired”。从“Description”组复制其标题和描述图层组过来修改里面的文字：
再复用上面的用户例子，展示用户的使用感受以激励访客使用这个网站。到“Header”组的“Example”图层组。Ctrl+J复制整组然后移动到“Get Inspired”组。
重命名分组名字为“Story”，去掉绿色的数字标示。右边名字文本的颜色改为深灰色＃0e0e0e，这样 在白色背景上更好地显示。换另一张图片作为头像，用灰色＃666666写上这些人的职位和地方信息。
然后，用文字工具在下面创建一个300x160px的文本框，写上一段感恩日志的例子。用PT Serif (Italic) 字体16px，深灰色#666666.
复制两个“Story”组，修改一下头像、名字和描述。水平对齐这两个分组然后在后面加上一条直线。