终身会员
搜索
    上传资料 赚现金

    第8节 网站布局 课件

    立即下载
    加入资料篮
    第8节 网站布局 课件第1页
    第8节 网站布局 课件第2页
    第8节 网站布局 课件第3页
    第8节 网站布局 课件第4页
    第8节 网站布局 课件第5页
    第8节 网站布局 课件第6页
    第8节 网站布局 课件第7页
    第8节 网站布局 课件第8页
    还剩14页未读, 继续阅读
    下载需要10学贝 1学贝=0.1元
    使用下载券免费下载
    加入资料篮
    立即下载

    信息技术八年级上册第8节 网页布局教学ppt课件

    展开

    这是一份信息技术八年级上册第8节 网页布局教学ppt课件,共22页。PPT课件主要包含了学习目标,教学重点,教学难点,图文混排,设置版权信息,保存网页,浏览图片的网页等内容,欢迎下载使用。


    1、以主页和浏览图片的网页为例,使用表格实现网页的布局方法;2、实现网页的图文混排,掌握美化网页方法;3、教者演示网页布局的步骤,让学生对表格布局网页有粗略的了解; 学生合作完成任务,以便学以致用,熟记知识要点;
    对网页布局和图文混排等方法的掌握。
    如何插入表格、设计表格来规划网页,规范网页版面布局。
    一、常见的网页布局结构
    1、“国字”型布局 “国”字型布局由“同”字型布局进化而来,因布局结构与汉字“国”相似而得名。其页面的最上部分一般放置网站的标志和导航栏或Banner广告,页面中间主要放置网站的主要内容,最下部分一般放置网站的版权信息和联系方式等。
    2.T型布局 T型布局结构因与英文大写字母T相似而得名。其页面的顶部一般放置横网站的标志或Banner广告,下方左侧是导航栏菜单,下方右侧则用于放置网页正文等主要内容。
    3.标题正文型 标题正文型布局的布局结构一般用于显示文章页面、新闻页面和一些注册页面等。
    4.左右框架型布局 左右框架型布局结构是一些大型论坛和企业经常使用的一种布局结构。其布局结构主要分为左右两侧的页面。左侧一般主要为导航栏链接,右侧则放置网站的主要内容
    5.上下框架型 上下框架型布局与前面的左右框架型布局类似。其区别仅在于是一种上下分为两页的框架。
    6. 综合框架型综合框架型布局是结合左右框架型布局和上下框架型布局的页面布局技术
    7.POP布局 POP布局是一种颇具艺术感和时尚感的网页布局方式。页面设计通常以一张精美的海报画面为布局的主体。
    8.FLASH布局 FLASH布局是指网页页面以一个或多个Flash作为页面主体的布局方式。在这种布局中,大部分甚至整个页面都是Flash。
    二、利用表格来实现网页布局
    想一想:把文字和内容编辑在网页中,并没有按设计的各种布局呈现出来,所见即所是的网页制作工具如何实现所设计的各种布局。
    在网页制作中,使用表格来布局网页中的内容是非常方便的方法,可以通过拆分或合并单元格、嵌套表格来实现各种布局。
    为了确保图文混排的网页排列整齐,不因屏幕分辨率的改变而破坏页面布局,在网页制作中经常利用表格实现网页的布局。所以我们可以把该布局(有5个栏目,外加一个首页,导航栏分6格)来实现。
    1、设置网页显示宽度——插入一行一列的表格:
    (1)插入表格:执行“表格”——“插入”——“表格”命令;(2)设置表格属性:按P74图2—14所示设置行数、列数、对齐方式、指定宽度后确定。
    表格的宽度有两个单位。像素单位:这是一个绝对单位,它是不随着浏览器窗口的改变而改变的;百分比单位:这是一个相对单位,它是随着浏览器窗口的改变而改变的。
    2、在表格内插入横幅图片。
    3、在表格肉建立导航:
    (1)插入表格:单击常用工具栏中的“插入表格”按钮 ,并移动鼠标选择“1*6表格”;
    (2)设置表格属性:边框粗细、背景颜色、指定宽度后确定;
    (3)设置单元格属性:先中6个单元格,设置水平对齐方式、指定宽度、背景颜色后确定;
    (1)插入表格;(2)设置单元格属性;(3)插入图片;(4)合并单元格;(5)输入文字。
    (1)插入水平线:执行“插入”——“水平线”命令;(2)输入文字并进行适当的设置。
    以index1.html为名保存到网站文件夹中。注意设置图片保存的位置。
    任务探究一:四人为一小组,生按照步骤设计网页框架,如图2-18
    完成的网页在FrntPage窗口内的普通网页视图中的效果如图:
    1、分析P79图2—19的结构,如:图2—201、文字布局在相应的位置上分别完成横幅、导航、版权说明部分。
    还记得图片浏览软件ACDSee的图片浏览窗口吗?
    由于网页的页面有限、网络的速度有限,不可能同时展示所有的图片。因此,我们同ACDSee的图片浏览窗口一样,制作一个预览页面,该页面的每幅小图片都可以链接到它的原因,即浏览时通过单击该图片可以显示出原因。
    P79图2—19网页布局就是以表格实现的,如图:
    (1)插入表格;(2)设置缩略图;(3)合并最后一行的4个单元格,并在其中输入资料来源处;(4)保存网页,以wulingyuan.html为名保存。
    任务探究二:完成网页在FrntPage窗口内的普通网页视频中的效果,如图
    1、按书中步骤继续完成操作;2、注意主页和图片页面的结构,利用表格来规划。
    1、普通表格和布局表格有什么区别,尝试使用布局表格编辑一个网页。2、当表格和单元格的背景颜色不同时,显示的是哪个颜色?3、单元格衬距和单元格间距有什么不同?4、在如图所示的带有背景色的网页上插入一个来自剪贴画的图片,如何设置可以使如图2-22(a)所示的网页变成如图2-22(b)所示的网页

    相关课件

    信息技术八年级全册5 应用框架布局网页课前预习ppt课件:

    这是一份信息技术八年级全册5 应用框架布局网页课前预习ppt课件,共6页。PPT课件主要包含了创建框架结构网页等内容,欢迎下载使用。

    苏科版八年级全册5 应用框架布局网页示范课ppt课件:

    这是一份苏科版八年级全册5 应用框架布局网页示范课ppt课件,共7页。PPT课件主要包含了“多彩的生物”网页,规划表格的结构,对象属性的设置等内容,欢迎下载使用。

    浙教版八年级上册第三单元 网站制作第十二课 用表格为网页布局说课ppt课件:

    这是一份浙教版八年级上册第三单元 网站制作第十二课 用表格为网页布局说课ppt课件,共12页。PPT课件主要包含了居中型,半包围型,主题突出型,导航栏型,左右导航型,视觉中心,页面布局设计等内容,欢迎下载使用。

    免费资料下载额度不足,请先充值

    每充值一元即可获得5份免费资料下载额度

    今日免费资料下载份数已用完,请明天再来。

    充值学贝或者加入云校通,全网资料任意下。

    提示

    您所在的“深圳市第一中学”云校通为试用账号,试用账号每位老师每日最多可下载 10 份资料 (今日还可下载 0 份),请取消部分资料后重试或选择从个人账户扣费下载。

    您所在的“深深圳市第一中学”云校通为试用账号,试用账号每位老师每日最多可下载10份资料,您的当日额度已用完,请明天再来,或选择从个人账户扣费下载。

    您所在的“深圳市第一中学”云校通余额已不足,请提醒校管理员续费或选择从个人账户扣费下载。

    重新选择
    明天再来
    个人账户下载
    下载确认
    您当前为教习网VIP用户,下载已享8.5折优惠
    您当前为云校通用户,下载免费
    下载需要:
    本次下载:免费
    账户余额:0 学贝
    首次下载后60天内可免费重复下载
    立即下载
    即将下载:资料
    资料售价:学贝 账户剩余:学贝
    选择教习网的4大理由
    • 更专业
      地区版本全覆盖, 同步最新教材, 公开课⾸选;1200+名校合作, 5600+⼀线名师供稿
    • 更丰富
      涵盖课件/教案/试卷/素材等各种教学资源;900万+优选资源 ⽇更新5000+
    • 更便捷
      课件/教案/试卷配套, 打包下载;手机/电脑随时随地浏览;⽆⽔印, 下载即可⽤
    • 真低价
      超⾼性价⽐, 让优质资源普惠更多师⽣
    VIP权益介绍
    • 充值学贝下载 本单免费 90%的用户选择
    • 扫码直接下载
    元开通VIP,立享充值加送10%学贝及全站85折下载
    您当前为VIP用户,已享全站下载85折优惠,充值学贝可获10%赠送
      充值到账1学贝=0.1元
      0学贝
      本次充值学贝
      0学贝
      VIP充值赠送
      0学贝
      下载消耗
      0学贝
      资料原价
      100学贝
      VIP下载优惠
      0学贝
      0学贝
      下载后剩余学贝永久有效
      0学贝
      • 微信
      • 支付宝
      支付:¥
      元开通VIP,立享充值加送10%学贝及全站85折下载
      您当前为VIP用户,已享全站下载85折优惠,充值学贝可获10%赠送
      扫码支付0直接下载
      • 微信
      • 支付宝
      微信扫码支付
      充值学贝下载,立省60% 充值学贝下载,本次下载免费
        下载成功

        Ctrl + Shift + J 查看文件保存位置

        若下载不成功,可重新下载,或查看 资料下载帮助

        本资源来自成套资源

        更多精品资料

        正在打包资料,请稍候…

        预计需要约10秒钟,请勿关闭页面

        服务器繁忙,打包失败

        请联系右侧的在线客服解决

        单次下载文件已超2GB,请分批下载

        请单份下载或分批下载

        支付后60天内可免费重复下载

        我知道了
        正在提交订单
        欢迎来到教习网
        • 900万优选资源,让备课更轻松
        • 600万优选试题,支持自由组卷
        • 高质量可编辑,日均更新2000+
        • 百万教师选择,专业更值得信赖
        微信扫码注册
        qrcode
        二维码已过期
        刷新

        微信扫码,快速注册

        手机号注册
        手机号码

        手机号格式错误

        手机验证码 获取验证码

        手机验证码已经成功发送,5分钟内有效

        设置密码

        6-20个字符,数字、字母或符号

        注册即视为同意教习网「注册协议」「隐私条款」
        QQ注册
        手机号注册
        微信注册

        注册成功

        下载确认

        下载需要:0 张下载券

        账户可用:0 张下载券

        立即下载
        使用学贝下载
        账户可用下载券不足,请取消部分资料或者使用学贝继续下载 学贝支付

        如何免费获得下载券?

        加入教习网教师福利群,群内会不定期免费赠送下载券及各种教学资源, 立即入群

        即将下载

        第8节 网站布局 课件
        该资料来自成套资源,打包下载更省心 该专辑正在参与特惠活动,低至4折起
        [共10份]
        浏览全套
          立即下载(共1份)
          返回
          顶部
          Baidu
          map