项目4网页排版布局的应用.ppt

项目4 网页排版布局的应用 任务2 锦上添花的网页排版布局实战课件 （建议2学时） 学习目标 1.了解网页排版布局的基本常识 。 2.掌握网页排版布局的形式 。 3.掌握网页排版布局遵循的原则 。 4.学会网页排版布局的实际应用技巧 。 任务2：锦上添花的网页排版布局实战 本任务是制作手机网站页面 ，如下图所示。 任务分析 本任务是制作手机网站页面，该任务在制作前已提供相关的素材，结合素材的特点和网站本身的特征，运用柔和、明快的粉色系作为页面的主色调，运用经典的分割式设计版面，图片部分显得轻松活泼；文案部分显得条理清晰，整个版面主次分明，产品的各部分功能轻松展示，更便于浏览者找到所关注的信息。 任务实施 1.新建文件807px*950px。 2.添加背景颜色为 “#f9d7cd” 。 3.绘制页面顶部Banner。 任务实施 4.绘制导航条 。 任务实施 5.绘制内容部分 。 相关操作知识 初学网页设计者常常为如何排版布局而烦恼，排版布局的方法多样，千变万化，但是只要掌握一定的方法，还是有章可循的，初学者可以把美术绘画的过程，（构图，找大形，细部刻画，修改）运用到实际的网页排版布局当中，具体方法步骤如下： 1.构思草稿，粗略布局 2.确定方案，细部刻画 3.整体观察，局部调整 4.局部的细微调整 拓展探索 总 结 参照教材中“任务实施”，尝试操作，完成手机网页界面的制作。 采用任务2的素材，为“SHATT”手机设计蓝色调网站界面。 （1）采用分割式设计方式，将网页纵向分成三栏； （2）导航、各栏目、按钮及内容不变； （3）Banner宣传语内容为“天下大事，随手掌握”； （4）布局新颖，页面色彩明快，符合企业特征。