网页设计与制作 课件 15 拼建完整页面.pptxVIP

拼建完整页面

湖南安全技术职业学院网页设计与制作教学团队

模块5使用浮动与定位属性布局网页

入门测

作业分析

复习巩固

设计网页时一开始要从整体上进行布局，考虑好模块内容的划分及各模块位置的摆放，先组织好大模块，再在大模块里逐层嵌套细分小模块，填充内容。

本任务复用浮动和定位的相关知识，创建网页模板，拼合前面各任务中制作的局部内容形成完整页面。

学习内容

网页整体布局

创建网页模板

拼建完整页面

创建规范的网站目录

网站目录结构设置

CSS样式文件

images图片文件夹

js放脚本文件

media放音视频素材

网页文件直接放在根目录中

什么是网页布局？

网页整体布局

网页布局（Layout）就是决定把网页的各个部分放在哪里。

一个好的布局让用户能直观、顺畅地获取内容，完成操作。

内容结构化

通过合理的排版让信息有条理、主次分明，帮助用户快速捕捉重点信息。

引导用户体验

顺应用户的视觉流动习惯，科学引导视线移动，让用户能高效定位并获取所需内容。

彰显专业质感

优秀的版式设计能传递品牌的审美与严谨性，增强用户对产品的信任感。

常见的网页布局结构

网页整体布局

Header

Main

Footer

经典布局Header承载Logo与导航，Main呈现核心信息，Footer放置版权等辅助内容，结构清晰符合浏览习惯。

扩展布局在经典布局基础上增加侧边栏，用来放一些