4.2.2版面设计.ppt

版面设计之版面布局 网站设计之方方面面 栏目设置版面设计网站风格 版面设计 版面布局是版面设计的第一步 版面布局就是以最适合浏览的方式将文字和图片排放在页面的不同位置 网页要呈现的内容很多 如何合理地放置信息 使之看起来井井有条 主次分明是版面布局需要考虑的问题 网站数量庞大 能够吸引我们眼球的只有那些有特色的网页 网站内容是否丰富是其一 而网页的版面设计是否精美也是重要因素之一 观察讨论 网页上有哪些内容 Logo标志 导航栏 网幅广告banner 主体部分 辅助信息 主体部分 功能信息 导航栏 一级栏目和二级栏目 版权附加信息 网页结构 Logo标志 就像是企业商标一样 告诉你 我是谁 导航栏 栏目 为了让访问者更清晰明朗地找到所需要的资源区域 寻找资源 网幅广告banner 旗帜广告 横幅广告 我可以为您做些什么 主体部分 主要内容 功能信息 站内搜索 在线专业查询系统 报名系统 站内管理入口等 辅助信息 公告通知 排行信息 最新动态 相关链接等 版权附加信息 一般包括备案信息 许可信息 网站介绍 联系方式 法律声明 帮助等 增加网站可信度 网页顶部 中间大幅面积 左侧或右侧区域 网页底部 版面布局之设计阶段 将网页看作是一张报纸或是杂志的一页 巧妙地将文字 图片放在页面的不同位置 使页面看起来井井有条 主次分明 创意草图 构思初步设想 有哪些内容需要放在网页上 粗略布局 在纸上画草图 不讲究细腻工整 不考虑细节功能 用线条勾画出各个板块 并用简要文字说明此版块的内容 可以多画几张 最后定案 选择最满意的那一张 版面布局常见样式 任务一 构思蓝图 绘制首页版面布局图 根据小组的主题内容和设置的栏目 先组内讨论一下网页上需要哪些内容 然后每人都在纸上绘制出首页的版面布局图 每个板块的具体内容用简要文字说明 如右图 注 如果是封面型或flash型 在纸上注明 封面型 不用画 后 要绘制的是进入后的那张网页的版面布局 在纸上写明组号 网站名称 学号 姓名 下课前由组长收集上交到讲台上 版面布局之实现阶段 表格定位 表格可以使网页布局合理 结构协调 匀称美观 避免变形和走样 插入表格调整表格结构 增加行与列 删除行 列或单元格 合并单元格和拆分单元格 设置表格属性 对齐方式 边框粗细 表格或单元格的背景等 表格 菜单中的各项命令 实现表格操作 FP表格设置类似于Word中的表格 任务二 利用表格进行版面布局 要求 1 每位组员根据版面草图 在FrontPage中制作首页的表格 单元格中的内容用文字作简要说明 如右图 2 保存网页 以 index htm 命名 3 上传网页 将文件 index htm 上传到FTP 10 32 91 51中自己小组的网站文件夹内 表格使用的技巧 1 表格的宽度设置系统默认为100百分百 不用 百分比 的原因是排版会乱套 为了避免出现左右滚动条的情况 要将网页的宽度控制在显示器的分辨率宽度内 要考虑到1024 768像素的用户 所以要将表格的整体宽度控制在1024像素以内 建议表格宽度设置为1000像素比较合适 表格使用的技巧 2 一张网页的加载是以一个元素一个元素为单位来显示的 一个表格是一个元素 因此整个页面切忌使用一个大表格 而是应该使用多个小表格 分割表格时候建议上下分割成小表格 左右不分 一个3行X2列的表格一起显示等待空白页面时间较长 三个1X2的表格一个一个显示等待空白页面时间较短 表格使用的技巧 3 表格嵌套 大表格里面有小表格 可以单独对某个局部内容编辑而不影响其它内容的布局 建议不要超过3层 否则加载速度会变慢 课堂小结 模仿是初学者提高水平的捷径 网页的版面设计对于我们第一次做网站的人来说是很复杂的