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

1、实训指导面1. 目的掌握网页中常见构成要素的设计要点。能够使用设计软件制作简单的网页界面，在实践中提升对视觉要素的综合把握能力，以及设计软件的操作熟练度。2. 内容掌握网站界面的设计与制作。设计制作特定主题的网站界面，了解网页的构成要素，综合运用视觉要素设计完成简单的网站界面。提交源文件，并附上不少于200字的设计说明。实训指导在学习网页界面设计的初期，模仿制作一些现有网站的界面是一种比较好的学习手段，希望同学们在模仿学习的过程中，不断加深对网页界面设计制作的理解，多多练习，一定能取得较大的进步。在开始制作之前，首先为大家介绍一个Photoshop标记外挂神器AssistorPS。步骤1：我们

2、新建一个空白网页，宽度是1920px，高度是2410px。为了适应各种分辨率的电脑，一般网站的主体内容（非页面宽度）的最小宽度应在960以上。这个页面的主体内容宽度是988px，因为主体内容是居中的，所以主体内容到页面左右边缘的距离应该是相同的。主体内容到页面左右边缘的距离均是466px。2+5:些4；31*100©步骤2：打开我们刚才已经下载好的AssistorPS,这个软件有个用于网页布局的神奇功能，点击面板中的“GuideMaker”，大家可以理解为“绘制参考线”。这里不仅可以设置主体部分至上下左右边缘的距离，而且还可以快速分栏，设置栏宽。此处网页主体部分分为三栏，栏宽为314

3、px,栏间距是23px。314px（栏宽）X3+23px（栏间距）X2=988px（主体总宽度）。步骤3：除了分栏，还可以分行，通过参考线测量，我们可以知道网页主体部分距离网页上边缘的距离是245px，距离网页下边缘的距离是802px，这里主体部分总高度是2410px-245px-802px=1363px，分为三行，行高是437px,行间距是26px。437px（行高）X3+26px（行间距）X2=1363px（主体总高度）步骤4：因此，在AssistorPS的“GuideMaker”面板中设置如下图，非常直观。AuistorFS#I-Xk'0|§_3：!GuideMaker

4、CImi*All)ftn*步骤5:点击“Create”按钮后，空白页面中就会出现以下蓝绿色的参考线，为了便于大家理解其中的数量关系，我将涉及的距离数值用红色标注在页面中（实际界面是没有这些红色标注的）。步骤6：制作页头1用矩形工具绘制长1920px，高为101px的矩形，颜色为钿ffffff”，图层命名为“页头白底”，为图层添加【投影】图层样式，混合模式为“正片叠底”，色彩为“#a0a0a0”，不透明度为40%，角度为120度，设置距离为4px，扩展为1%,大小为3px，其他保持默认设置即可o科an杆诲理匚|茅商窝o逸毎O事熄OPiERftyOrUM*£D丹邯OEiSefin口亘师口

5、fflS-TI口口外:a卉.2.添加网站logo，依次绘制logo右侧的搜索框和搜索按钮。搜索框宽200px、高30px，描边大小为1点，描边颜色为“#e3e3e3”，搜索框内输入文字“国家、目的地”，字体：MicrosoftYaHeiUI,类型：Regular，字号:12px，字体颜色“#444444”，搜索按钮宽60px，高30px，半径为2px，填充色为“#ff7400”,按钮上“搜索”两字，字体：MicrosoftYaHeiUI，类型:Regular，字号:14px，字体颜色“#ffffff"。如图3输入文字“行程大师”、“在线客服”,字体：MicrosoftYaHeiUI，

6、类型：Regular，字号：14px，字体颜色“#666666”；输入文字“预定资讯”，字体：MicrosoftYaHeiUI，类型：Light，字号：14px，字体颜色“#666666”；输入文字“4006-646-888”，字体：MicrosoftYaHeiUI，类型：Regular，字号:17px，字体颜色“#fb6a00”；置入png格式的手机图标和对话图标;绘制两条高为13px的短线段，颜色为“#e3e3e3”，并放到合适的位置，起到分隔的作用。最终结果如图行程大师APP|在蛾客服丨祯定咨洵：4006-646-8884绘制宽为1920px，高为3px的橙色渐变的矩形，“渐变叠加”图层

7、样式，混合模式正常,不透明度100%，渐变颜色从#fa4300到#ffaf00,样式为线性，角度为0度，其他按默认设置,如图3-49所示。这条线将页头的上半部分和网页主导航文字分隔开来。口斛十莊n口犯圧 *isi口mtsfe口3EJEwsbijiO占卜*爲U5. 输入主导航文字“首页”、“定制自由行”、“包车自由行”、“目的地”、“商场”和“达人”，字体：MicrosoftYaHeiU,类型：Regular，字号:16px，字体颜色深灰色“#333333”；输入“超级自由行”，字体:MicrosoftYaHeiU,类型：Regular,字号：16px,字体颜色橙色“#fb6a00”。6输入文字

8、“登录”、“注册”，字体：MicrosoftYaHeiU,类型：Regular，字号:16px，字体颜色深灰色“#333333”。最终效果如图菲5V1H17:做福斤KMI怖目紂叩Up艸口7.输入文字“问答”、“精致生活”，字体：MicrosoftYaHeiUI，类型：Regular，字号:12px，字体颜色深灰色“#333333”；输入文字“实用”字体：MicrosoftYaHeiUI,类型：Regular，字号：12px，字体颜色白色"#ffffff”，并绘制实用红底；输入文字“NEW”,字体：MicrosoftYaHeiUI，类型：Regular，字号:10px，字体颜色白色“#

9、ffffff”，并绘制NEW橙色底。最终效果如图3-51所示。至此页头部分已经制作完成，此过程中注意图层编组，将内容进行分组管理比较直观易找。步骤7：页面搜索及线路文字结果。1. 绘制页面搜索框，长为425px,高为40px，半径为4px的圆角矩形，描边大小为1点，描边颜色为“#e3e3e3”，填充颜色为#fbfbfb，搜索框内输入文字“意大利”，字体：MicrosoftYaHeiUI，类型：Regular，字号:18px，字体颜色“#333333”，在“意大利”前置入搜索放大镜图标。搜索按钮宽78px，高40px，半径为4px，填充色为“#fc9500”，按钮上“搜索”两字，字体：Micro

10、softYaHeiUI，类型：Regular，字号:20px，字体颜色“#ffffff”。2. 输入文字“共114相关的超级自由行”，字体：MicrosoftYaHeiUI，类型:Regular，字号:26px，字体颜色“#333333”，其中“114”颜色改为橙色“#fb6a00”，以表示强调。步骤8：线路单元制作。这里要强调模块化的思路，因为9个线路单元就设计样式而言，都是完全一样的，所以只要制作完成一个路线单元，其他的复制后更改文字和图片即可。1. 根据之前步骤2和步骤3的计算，单个线路单元的宽为314px，高为437px，所以首先绘制一个宽为314px，高为437px的矩形，颜色为“#

11、ffffff”,描边大小为1点，描边颜色为'#cccccc”,为图层添加【外发光】图层样式，如图3-53所示，混合模式为“正片叠底”，外发光色彩为“#a6a6a6”，不透明度为75%，角度为120度，设置扩展为1%，大小为4px，其他保持默认设置即可。2. 绘制一个宽为290px，高为200px的矩形，任意填充颜色。将素材文件夹内“线路单元大图”文件置入当前文档，注意“线路单元大图”图层在任意色矩形图层之上，再对“线路单元大图”图层【创建剪贴蒙版】。结果如图3-54所示。将这两个图层进行图层编组为“大图”图层组。3. 绘制一个边长为64px的正方形，任意填充颜色。将素材文件夹内“线路单

12、元小图1”文件置入当前文档，注意“线路单元小图1”图层在正方形图层之上，再对“线路单元小图1”图层【创建剪贴蒙版】。结果如图3-55所示。并将这两个图层进行图层编组为“小图1”图层组。4. 按照制作“小图1”图层组的方法，依次类推，完成“小图2”图层组和“小图3”图层组，并置入“行程总览图标”5. 制作线路标题价格。输入文字“纯净山水别样意瑞10日深度旅行”，字体：MicrosoftYaHeiUI,类型：Regular，字号：18px，字体颜色“#666666”；输入“¥”，字体：MicrosoftYaHeiUI,类型：Regular，字号：12px，字体颜色“#fb6a00”；输入

13、“14,999”，字体：MicrosoftYaHeiUI,类型：Regular，字号：22px，字体颜色“#fb6a00”，这里用橙色是强调价格这一重点信息；输入文字“起”,字体：MicrosoftYaHeiUI，类型：Regular，字号：14px，字体颜色“#b0b0af”；将以上进行图层编组为“线路标题价格”。6. 制作打造者介绍。置入打造者的头像图片，大小调整为宽和高均为48px。输入文字“blingbling”，字体：MicrosoftYaHeiUI，类型：Regular，字号：12px，字体颜色“#333333”。绘制长46px，高15px，半径8px的圆角矩形，填充蓝色#3e67

14、dd，绘制白色五角星，输入文字“达人”，字体：MicrosoftYaHeiUI，类型：Bold，字号：10px，字体颜色“#fbcb54”，并给文字“达人”添加图层样式“描边”描边大小为1px，颜色为#d06802。输入文字“欧洲生活多年，深度自助旅行”，字体：MicrosoftYaHeiUI,类型：Regular，字号：12px，字体颜色“#b0b0b0”；输入文字“打造”，字体：MicrosoftYaHeiUI，类型：Bold，字号：14px，字体颜色“#b0b0b0”。绘制宽为314px，描边大小为1点的灰色分隔线，颜色为“#e3e3e3”，这条线将打造者介绍和上面的内容分隔开来，将以上

15、进行图层编组为“打造者信息”图层组，7输入文字“35种深度体验”，字体：MicrosoftYaHeiUI,类型：Regular，字号：14px，字体颜色“#ffffff”，其中“35”改成橙色“#fb6a00”以示强调。绘制宽为102px，高27px的矩形，颜色为“#040404”，图层的不透明度为75%，作为文字“35种深度体验”的衬底。至此就完成了完整的单个线路单元的制作，我们把相关图层组和图层共同编组到“路线单元1-1”图层组内。步骤9：其他八个线路单元的复制。有了“路线单元1-1”图层组这样一个成形的模块，其他8个线路单元只要利用【复制组】功能，如图3-60所示，就可以轻松制作。为了便

16、于管理和查找，可以将线路单元所在图层组命名为“路线单元1-1”、“路线单元1-2”、“路线单元1-3”、“路线单元2-1”、“路线单元2-2”、“路线单元2-3”、“路线单元3-1”、“路线单元3-2”、“路线单元3-3”，沿着三栏三行的参考线，调整到合适的位置，步骤10：将网页背景色设为灰色#efefef。步骤11：制作“页码导航”。1. 绘制10个宽为26px，高为24px的矩形，描边大小均为1点，描边颜色为“#dcdcdc”，并利用【路径对齐方式】中的【垂直居中】和【按宽度均匀分布】来实现10个矩形的对齐和相等间距，将最后一个宽为26px，高为24px的矩形调整为宽为45px，高为24p

17、x的矩形。输入数字2至10，字体：MicrosoftYaHeiUI,类型：Regular，字号：12px，字体颜色“#333333”,放在前九个矩形中央合适的位置。输入文字“下一页”，字体：MicrosoftYaHeiUI,类型：Regular，字号：12px，字体颜色“#333333”，放在最后一个矩形中央合适的位置。2. 绘制1个宽为26px，高为24px的矩形，描边大小均为1点，描边颜色为“#003b85”，填充颜色为#0c8ac9。输入数字1,字体：MicrosoftYaHeiUI，类型：Bold，字号:12px，字体颜色“#ffffff”，并放在合适的位置。3. 将1至2步骤中制作的内容编组为“页码导航”图层组，步骤12：标注尺寸等信息。设计稿完成后通常在交给前端开发人员前都要对页面中的重要元素进行尺寸标注，还有一些文字的字体、字号也需要标注。之前介绍过AssistorPS是Pho