《网页美工设计》教案-第1节 科技类网页设计制作综合案例（上）教案

PAGE《网页美工设计》教案授课专业广告艺术设计专业授课教师 周国宝铜陵职业技术学院制PAGE第三部分综合实训篇第七章综合案例——科技类网页设计制作标题第一节科技类网页设计制作综合案例（上）课时2课时教学目标教学内容与过程科技类网页是指为科技行业的公司或产品设计的网页，它涉及到科技服务、科技产品、IT软件开发等领域。网页的设计根据客户的需求，展示自身科技和产品实力，设计出符合企业品牌形象和市场定位的网页。下面，我们从网页视觉设计、网页导航设计、网页布局设计、网页案例制作来学习科技类网页设计制作。首先需要定位网页的视觉风格，可以围绕着科技企业形象、科技产品品牌等角度设计定位。分为现代风格、专业风格和科技风格。如科技产品网页采用的是现代风格，它以简洁、大气为核心，采用扁平化的设计元素、简单的色彩搭配，产品图片和精简的文字，让用户可以更容易找到所需产品的信息，提高用户体验。企业科技服务网页采用的是专业风格，注重网页界面设计功能和实用性，通常以信息展示和业务合作为主要目标。它采用规范和一致的排版进行设计，展示公司的专业形象和业务能力。IT公司采用科技风格的网页界面设计，常常使用冷色调，运用科技感强烈的图标和图像，带有高科技感的元素进行设计。科技类网页视觉风格需要突破传统的视觉形象，以体现活力和设计特性，根据不同的需求和目标选择适合的设计。其次合理的配色可以加深客户的记忆，网页视觉配色往往不会超过3-4种，不会给用户造成眼花缭乱的感觉。例如创新科技网主色调为白色，被视为简约、纯洁和现代。配合蓝绿色，可以体现出科技企业冷静中立的科技感，也不会过于冷峻。黑色红色为点缀色适当的运用突出网页重点，最重要的是结合网页内容传达的信息，制定适当的色调和组合。其次注意配色的协调性、对比度、亮度和饱和度等因素，以确保良好的视觉效果。科技耳塞产品网站采用的是灰色系，灰色通常被视为稳重和专业，使用浅灰色和深灰色的组合可以表现专业感。在科技网站制作中，导航栏设计是非常重要的一环，主要导航在整个网站中突出并保持一致,设计要与其他所有内容形成对比，以便吸引用户的视觉。导航栏的字体和颜色也需要与网站整体风格相符合，保持整体一致。科技网站常见的导航栏分为顶部导航。导航栏包含网站logo，使消费者第一眼识别企业起到推广的作用。在交互中点击“网站logo”还能快速回到首页。其次还有网站的版块，决定了不同的内容。搜索工具方便用户直接寻找所需内容，设计清晰简洁。下拉菜单导航，可以节省空间，同时也能够提供更多的二级导航选项垂直导航栏通常位于网页的左侧或右侧，以垂直排列的方式展示各个导航链接。垂直导航栏在网页宽度不够的情况下，可以更好地节约空间。科技网站的首页布局需要充分考虑用户体验和信息传递的效果。在设计上，应该注重页面的整体性和美观性，同时也要考虑到网站的功能性和实用性。横幅广告（Banner）式首页布局，页面最上方是导航条，顶部是横幅广告，这种布局方法的优点是页面的结构十分清晰，主次分明。可以选择在图片上添加标题、副标题或其他说明文案，来吸引访客。一般来说图片r可以是一张大的海报，也可以是动态轮播图。国字型网页布局，其基本布局形式是将网站的Logo、导航栏及横幅广告等置于顶部；下方安排网页的主体内容，左、右两侧分别是导航菜单广告或其他栏目。最后由页尾形成外框底部，将主体内容包围。有很多图片，内容模块多的网页，可以选择网格布局。例如科技新闻类网站布局可以使用不同大小网格来表达内容，不同网格里所传达科技新闻内容不同，消费者可以选择感兴趣的资讯进行查看。网格设计可以提升整个网页的整齐性，保持内容的有序，并且很容易使用。科技网站需要注重页面的整体布局、内容的呈现方式和用户体验，才能让用户更好地理解和使用网站。随着设计的不断发展，科技网站的设计也需要不断更新和改进，以适应不断变化的用户需求。接下来让我们设计智能科技企业的网站，首先我们制作网站的导航栏和横幅广告。打开XD软件，将画板命名为科技网页，画板的大小为1920，高度为2824，后期我们可以根据我们设计的内容调整它的高度。将我们的导航栏设定为100大小，将我们的横幅广告高度设定为700大小，页面主体部分宽度为1200大小。选中logo，置入到导航栏中间左侧，选中信息模块置入导航栏中间右侧，调整位置，这样清晰简洁的导航栏就做好了！

下方制作海报形式的横幅广告，展示特色产品，吸引消费者注意力。首先结合矩形工具，绘制矩形，取消描边，选择填充，填充代表科技感的蓝色。选择线性素材，置入背景当中，调整位置。继续置入上方的线性素材，选择矩形，绘制矩形，调整她的位置，选中两个素材，右击选择带有形状的蒙版，调整素材的大小，降低不透明值。选择智能手素材，置入到界面当中。复制智能车素材，置入，调整素材之间的间距，大小，完成背景素材制作。其次在横幅广告上添加主标题、广告语，传达企业信息。复制标题，置入，调整位置。结合矩形工具绘制辅助图形，取消填充，将描边改为白色。继续绘制矩形，降低不透明值，形成半遮罩状态，调整一下大小，输入广告语“未来智网时代”，调整字体大小，选择思源黑体，30大小，改为正常字体。复制文字，替换文字，调整字体大小，加粗文字，调整文字的位置，调整各素材。

这样我们就完成了科技企业导航栏和横幅广告的设计教学反思《网页美工设计》教案授课专业广告艺术设计专业授课教师 周国宝铜陵职业技术学院制PAGE1第三部分综合实训篇第七章综合案例——科技类网页设计制作标题第二节科技类网页设计制作综合案例（下）课时2课时教学目标教学内容与过程科技企业网页的主体部分我们采用卡片式页面布局，卡片是交互信息的承载体，通常以一个浓缩的图片形式提供相关网页内容，非常适合科技产品内容的展示。打开XD软件，我们继续在横幅广告的下方做主体产品的展示。左击拉出参考线，将横幅广告与产品信息边距控制在58。结合矩形工具，任意绘制一矩形，将矩形调整成380大小，500的高度，回车，调整成圆角矩形，取消边界，填充为灰色，我们也可以吸取素材的灰色。复制一层，选择文件，导入资讯未来科技的图片，调整图片的大小，选中两个素材右击，选择带有形状的蒙版，将图片置于我们灰色圆角矩形的上方。点击文字，输入文字，选择文字，调整文字大小，可以适当给它加粗。选中所有的圆角矩形，编组（CTRL+G），点击重复网格，复制圆角矩形，调整边距。继续复制一层圆角矩形，调整间距，右击取消网格编组。我们逐一调整图片以及文字，双击，替换图像，选择智能芯片，调整所需的位置。双击替换文字。替换成智能机器人，将文字与图片居中对齐。替换图像为云数据，文字与画面对齐。选择VR智能，调整文字位置。我们替换最后一组图像，替换文字，这样我们就完成了界面主体的设计。我们可以在下方绘制出企业的联系方式，结合矩形工具，绘制一个矩形，调整宽度，调整高度，取消边界，选择投影，调整数值，调整效果。输入企业的信息，选择logo，粘贴，输入文字，调整文字的位