第九章 综合实例 课件 -2022-2023学年高一下学期（中职）《网页设计与制作》（高等教育出版社）

网页设计与制作 第09章 综合实例 本章内容 网页布局 实现网页 重构网页 2 网页设计与制作 9.1.0 设计效果 9.1 网页布局 3 网页设计与制作 9.1 网页布局 4 网页设计与制作 9.1.1 Web UI设计原则 1. 目录结构规范 根目录一般只存放index.html等网页文件 images或img用于存放图片文件 script或js用于存放JavaScript脚本文件 style或css用于存放CSS样式文件 video或media用于存放动画和媒体文件 9.1 网页布局 5 网页设计与制作 2. 页面大小规范 网页的宽度建议至少为960 像素，针对1366*768 以上分辨率，会有较好显示效果。 随着显示器尺寸越来越大，分辨率越来越高，也有不少网页已经开始使用更大的宽度，如京东商城的网站宽度是1210 像素，而新浪则使用的是1000 像素的宽度。 9.1 网页布局 6 网页设计与制作 3.网页结构布局 通常采用上中下三段布局 9.1 网页布局 7 网页设计与制作 4.网页基本框架布局 有两种方式可以用来对网页进行布局：表格方式和DIV方式。 表格方式是传统的布局方式，其优点很明显：布局方便，理解简单，格式调整也很轻松。 表格布局的缺点也非常突出：网页必须等表格的所有内容加载完毕才能显示表格，所以速度较慢，尤其是内容很多的时候。 因此，一般建议采用DIV+CSS来布局网页。 9.1 网页布局 8 网页设计与制作 9.1.2 本示例网页结构 网页的布局原则为：简单、大方、操作方便。 采用比较常见的顶部、中间、底部的结构。 顶部用于显示网站的广告图片和导航栏 中间用于显示网页的正文内容 底部用来显示友情链接和网站的版权信息等 颜色以浅蓝为基本色调，主要搭配浅灰、白色等，体现出一种积极、向上、明亮的基本风格件 9.2 实现网页 9 网页设计与制作 9.2.1 实现网页的整体结构 1. 创建空白页 通过菜单“文件”→“新建”可以弹出新建对话框，在对话框左侧选择“空白页”，页面类型为“HTML”，布局为“无”。 在新建的网页中，设置“页面属性”，将网页的“左边距”和“上边距”都改为0。 9.2 实现网页 10 网页设计与制作 2. 完成网页布局 单击菜单“插入”→“布局对象”→“Div 标签”，在弹出的“插入Div 标签”对话框中输入类名“container”，这是整个网页的容器，设置整个网页容器的宽度为960 像素，设置margin 属性为auto，可以使其居中。 将插入点放到刚才插入的container这个Div 中，依次插入三个Div，类名分别为：header、content 和footer，并分别将其显示宽度设置为960像素。为三个Div 设置不同的背景色和显示内容。 整体布局效果 9.2 实现网页 11 网页设计与制作 9.2 实现网页 12 网页设计与制作 9.2.2 实现标题栏 1. 标题栏的结构 标题栏组成：顶部欢迎部分，网站宣传图片，导航菜单。 顶部欢迎部分包括：欢迎信息、查询表单、登录和注册链接 12 9.2 实现网页 13 网页设计与制作 2. 标题栏总体框架 在header 中依次放入Div，img，Div，将两个Div 的类名分别命名为search 和nav，分别放置查询表单和导航菜单。 把search、图片和nav 的样式都设置为宽度960px。其中，search的样式为： .search { background-color: #479ecf; width: 960px; height: 30px; line-height: 30px; } 标题图片的相关代码为： <img src="images/banner.png" width="960" height="159" /> 9.2 实现网页 14 网页设计与制作 3. 实现查询条部分 在search 中再分别插入三个Div 插入欢迎信息的Div，其代码为： <div style="padding-left: 10px; width: 600px; float: left;">您好，欢迎来到启梦网络教育学院 </div> 插入放置查询表单的Div，其代码为： <div style="width: 250px; float: left;"> <form> <label> 站内搜索</label> <input type="text" name="ss" size="10" /> <input type="submit" value="提交" /> </form> </div> 插入链接的Div，其代码为： <div><a href="#">登录