2018铜陵电大专科形考任务1 综合运用视觉要素设计完成简单的网页界面.docVIP

实训指导 综合运用视觉要素设计完成简单的网页界面 1. 目的 掌握网页中常见构成要素的设计要点。能够使用设计软件制作简单的网页界面， 在实践中提升对视觉要素的综合把握能力，以及设计软件的操作熟练度。 2. 内容 掌握网站界面的设计与制作。设计制作特定主题的网站界面，了解网页的构成要素， 综合运用视觉要素设计完成简单的网站界面。提交源文件，并附上不少于200 字的设计说明。 实训指导 在学习网页界面设计的初期，模仿制作一些现有网站的界面是一种比较好的学习手段，希望同学们在模仿学习的过程中，不断加深对网页界面设计制作的理解，多多练习，一定能取得较大的进步。 在开始制作之前，首先为大家介绍一个Photoshop标记外挂神器Assistor PS。 步骤1： 我们新建一个空白网页，宽度是1920px，高度是2410px。为了适应各种分辨率的电脑，一般网站的主体内容（非页面宽度）的最小宽度应在960以上。这个页面的主体内容宽度是988px，因为主体内容是居中的，所以主体内容到页面左右边缘的距离应该是相同的。主体内容到页面左右边缘的距离均是466px。 步骤2： 打开我们刚才已经下载好的Assistor PS，这个软件有个用于网页布局的神奇功能，点击面板中的“Guide Maker”，大家可以理解为“绘制参考线”。 这里不仅可以设置主体部分至上下左右边缘的距离，而且还可以快速分栏，设置栏宽。此处网页主体部分分为三栏，栏宽为314px，栏间距是23px。314px（栏宽）×3+23px（栏间距）×2=988px（主体总宽度）。 步骤3： 除了分栏，还可以分行，通过参考线测量，我们可以知道网页主体部分距离网页上边缘的距离是245px，距离网页下边缘的距离是802px，这里主体部分总高度是2410px-245px-802px=1363px，分为三行，行高是437px，行间距是26px。437px（行高）×3+26px（行间距）×2=1363px（主体总高度） 步骤4： 因此，在Assistor PS 的“Guide Maker”面板中设置如下图，非常直观。 步骤5: 点击“Create”按钮后，空白页面中就会出现以下蓝绿色的参考线，为了便于大家理解其中的数量关系，我将涉及的距离数值用红色标注在页面中（实际界面是没有这些红色标注的）。 步骤6： 制作页头 1.用矩形工具绘制长1920px，高为101px的矩形，颜色为“#ffffff”，图层命名为“页头白底”，为图层添加【投影】图层样式，混合模式为“正片叠底”，色彩为“#a0a0a0”，不透明度为40%，角度为120度，设置距离为4px，扩展为1%，大小为3px，其他保持默认设置即可 2.添加网站logo，依次绘制logo右侧的搜索框和搜索按钮。搜索框宽200px、高30px，描边大小为1点，描边颜色为“#e3e3e3”，搜索框内输入文字“国家、目的地…”，字体：Microsoft YaHei UI，类型：Regular，字号：12px，字体颜色“#444444”，搜索按钮宽60px，高30px，半径为2px，填充色为“#ff7400”，按钮上“搜索”两字，字体：Microsoft YaHei UI，类型：Regular，字号：14px，字体颜色“#ffffff”。如图 3.输入文字“行程大师”、“在线客服”，字体：Microsoft YaHei UI，类型：Regular，字号：14px，字体颜色“#666666”； 输入文字“预定资讯”，字体：Microsoft YaHei UI，类型：Light，字号：14px，字体颜色“#666666”；输入文字“4006-646-888”， 字体：Microsoft YaHei UI，类型：Regular，字号：17px，字体颜色“#fb6a00”；置入png格式的手机图标和对话图标；绘制两条高为13px的短线段，颜色为“#e3e3e3”，并放到合适的位置，起到分隔的作用。最终结果如图 4.绘制宽为1920px，高为3px的橙色渐变的矩形，“渐变叠加”图层样式，混合模式正常，不透明度100%，渐变颜色从#fa4300到#ffaf00，样式为线性，角度为0度，其他按默认设置，如图3-49所示。这条线将页头的上半部分和网页主导航文字分隔开来。 5.输入主导航文字“首页”、“定制自由行”、“包车自由行”、“目的地”、“商场”和“达人”，字体：Microsoft YaHei UI，类型：Regular，字号：16px，字体颜色深灰色“#333333”；输入“超级自由行”，字体：Microsoft YaHei UI，类型：Regular，字号：16px，字体颜色橙色“#fb6a00”。 6.输入文字“登录”、“注册”，字体：Microsoft YaHei UI