广州总部电话:020-85564311
广州总部电话:020-85564311
20年
互联网应用服务商
请输入搜索关键词
知识库 知识库

优网知识库

探索行业前沿,共享知识宝库

学习笔记 | 网页设计15:常规站内页设计

发布日期:2025-06-30 14:38:36 浏览次数: 806 来源:狒狒小站
推荐语
网页设计实战指南:从首页到内页的无缝衔接,带你掌握专业设计流程。

核心内容:
1. 首页与内页的关系解析及设计要点
2. 公司介绍、主营时装、设计团队三类内页的完整制作步骤
3. 图文排版、间距控制等视觉平衡技巧详解
小优 网站建设顾问
专业来源于二十年的积累,用心让我们做到更好!




















常规站内页设计




1


内页和首页的关系



什么是首页

访问网站直接看见的页面就是首页也称为一级页面


什么是内页

内页是指二级页面或者点击看到的内容








2


内页制作


接上期服装首页的菜单项做后面的内页部分


1.首页把上期的首页PSD打开,保留头部、banner和页脚部分,其他内容删除,把当前项改为公司介绍,另存PSD重命名。


2.把原先下方标题复制过来,修改为公司介绍。下方绘制矩形1200X400PX,用来放视频,距离上方60PX,拖入图片素材,加上播放图标,降低一些图标不透明度。



3.输入下方段落文字,14PX,行高28PX,距离上方50PX,右侧绘制矩形,复制,置入图片。



段落文字放右边,左边放图,矩形570X400PX,置入图片,右侧下方绘制矩形280X170PX,放置两张图。再在左图上加一根横线增加装饰感和点缀。打组。


4.然后把公司简介标题复制,放在下方,与上板块间距80PX,替换文字做下一个板块,输入下方文字,字号14PX,锐利,行高28,字间距80,距离上方间距50PX。



5.复制首页的页脚组,放在下方。保存。


6.准备做下一个内页,另存为主营时装PSD,首先改导航的当前状态页。把中间内容删了,做分类内容,输入文字,上方当前状态颜色黑一些,下方字灰一些,加入装饰性线条。右方拉段落文本框,输入文字,产品和价格文字大一些,颜色深一些,其他文字小、浅一些。


右边矩形400X360PX框填充95灰放图片,为了让文字和图片产生关联,可以在文字上加一个矩形400X300,和图片部分稍微产生穿插。打组。


7.把首页的产品列表组复制过来,修改为产品展示内容。再多复制一行出来。做一些变化,左边4张图换成一张大图。打组。保存。




8.另存-重命名为设计团队PSD,做下一个内页,首先把导航栏的当前页状态换成设计团队。


9.把中间的内容模块删掉,把标题留下,修改为设计团队,做一些设计师的介绍内容,绘制220X220的圆,导入照片作为设计师头像,复制圆放大作为描边存在,左图右文,右边段落文本介绍设计师,字号14,行间距28,名字24,与下方介绍间距30,拉线条点缀。图片与文字间距100,打组。



10.复制,为了保持视觉平衡,图文位置交替。然后更换照片和文字。整个设计团队打组。


11.复制上方标题做“制作过程”板块,一行三列放图片,绘制矩形框380X230,,图片下方放文字,字号14,与图片间距30,左对齐图片。



12.下方120PX放置页脚。打组保存。



三个内页:高度是不一样的。




end



免责声明:狒狒报名了设计网课,这是自己整理的课堂学习笔记,图片来源于课堂截图/自己的作业,仅供学习/复习用,不可外泄,禁商用转载哦~


知识是共享的,笔记是自己一个字一个字敲的。

优网科技,优秀企业首选的互联网供应服务商

优网科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!

优网科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用(手机站APP开发)、微信定制开发(微信官网、微信商城、企业微信)等一系列互联网应用服务。


我要投稿

姓名

文章链接

提交即表示你已阅读并同意《个人信息保护声明》

专属顾问 专属顾问
扫码咨询您的优网专属顾问!
专属顾问
马上咨询
联系专属顾问
联系专属顾问
联系专属顾问
扫一扫马上咨询
扫一扫马上咨询

扫一扫马上咨询

和我们在线交谈!