多媒体网页设计教程 PDF 高清版

  • 更新时间:
  • 7505人关注
  • 点击下载

给大家带来的一篇关于网页设计相关的电子书资源,介绍了关于多媒体、网页设计、网页设计教程方面的内容,本书是由中国人民大学出版社出版,格式为PDF,资源大小47.6MB,黎明编写,目前豆瓣、亚马逊、当当、京东等电子书综合评分为:8.2分

《国家级传媒类实验教学示范中心系列教材:多媒体网页设计教程》综合了美术、动画、互动等跨学科知识以及多媒体技术的应用,旨在分析网页的设计、编排、互动、风格造型等问题,并结合实际的环境与情况来分析与探讨设计师的新思维与创作方法,通过案例将新技术与艺术融为一体,内容新颖,条理性强,图文并茂。《国家级传媒类实验教学示范中心系列教材:多媒体网页设计教程》采用实验教学的方法,将每一讲分为实验教学的理论知识、设备条件、设计与要求、案例分析等部分,详细讲解各类网页的设计风格及技术,并配有详实而精美的案例图片。最具特色的是,每一讲专辟小节点评学生作业,使实验教学更具针对性。

目录

  • 第一实验阶段 网页设计概述
  • 第一课 网页设计概述
  • 第二实验阶段 界面构成因素
  • 第二课 界面构成与布局(1)
  • 第三课 界面构成与布局(2)
  • 第三实验阶段 网页色彩运用
  • 第四课 网络视觉色彩运用(1)
  • 第五课 网络视觉色彩运用(2)
  • 第四实验阶段 风格化网页设计
  • 第六课 风格化网页设计(1)
  • 第七课 风格化网页设计(2)
  • 第五实验阶段 网页中互动因素与设计
  • 第八课 互动设计
  • 第六实验阶段 网页多媒体动画规律
  • 第九课 多媒体运动规律
  • 后记
     
展开阅读
精选笔记:jQuery制作网页版选项卡

3小时11分钟前回答

网页选项卡可以较好的利用有限的页面来展示更多的元素,而使用JQuery来制作网页选项卡也是一件非常简单的事情。今天就来分享一个网页选项卡的制作小技巧。

 ◦引入所需库
 ◦选项卡原理
 ◦业务核心
 ◦完整小例子 

引入所需库

这个知识点很基础,但是为了照顾fresh man ,我还是写一下吧。

选项卡原理

选项卡出现其实只是某一个div获取到了显示的权限,其他的没有显示而已。
 •网页代码

 <div class="tab">
  <div class="tab_menu">
    <ul>
      <li class="selected">选项卡1</li>
      <li>选项卡2</li>
      <li>选项卡3</li>
    </ul>
  </div><br><br><br>
  <div class="tab_box">
    <div>选项卡1:这里是1号内容区域</div>
    <div class="hide">选项卡2:这里是2号内容区域</div>
    <div class="hide">选项卡3:这里是3号内容区域</div>
  </div>
</div>

 •添加点样式元素 

<style>

    // 使得UL中的li标签水平排列
    ul {
      display:inline;
      white-space: nowrap;
    }
    li {
      margin:3px;
      float:left;
      background:red;
      // 这样可以防止li标签出现换行的显示
      display:inline-block;
    }

    .tab_menu {
      list-style:none; /* 去掉ul前面的符号 */
      margin: 0px; /* 与外界元素的距离为0 */
      padding: 0px; /* 与内部元素的距离为0 */
      width: auto; /* 宽度根据元素内容调整 */
    }
    .tab_box {
      background-color: #465c71; /* 背景色 */
      border: 1px #4e667d solid; /* 边框 */
      color: #dde4ec; /* 文字颜色 */
      display: block; /* 此元素将显示为块级元素,此元素前后会带有换行符 */
      line-height: 1.35em; /* 行高 */
      padding: 4px 20px; /* 内部填充的距离 */
      text-decoration: none; /* 不显示超链接下划线 */
      white-space: nowrap; /* 对于文本内的空白处,不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。 */
    }
    .selected {
      background-color: green;
      display: block;
    }
    .hide {
      display: none;
    }
  </style>

 •JQuery控制

 <script>
  // 加上鼠标的点击效果
  $(function(){
    $("ul li").click(function(){
      $(this).addClass("selected").siblings().removeClass("selected");
      var index = $("ul li").index(this);
      $("div.tab_box > div").eq(index).show().siblings().hide();
    })
  })

  // 加上鼠标悬浮效果
  $(function(){
    $("div.tab_menu ul li").hover(function(){
      $(this).addClass("selected").show();
      // 下面的这个可以实现选项卡的联动效果
      var index = $("ul li").index(this);
      $("div.tab_box > div").eq(index).show().siblings().hide();
    },function(){
      $(this).removeClass("selected").show();
      // 下面的这个可以实现选项卡的联动效果
      var index = $("ul li").index(this);
      $("div.tab_box > div").eq(index).show().siblings().hide();
    })
  })
</script>

业务核心

里面最关键的其实还是最为基础的JQuery选择器的使用,然后我们就可以动态的改变页面上的元素,从而实现我们想要的效果。这也是JQuery的强大之处。

这里比较有技巧性的就是通过对ul li样式的变换,实现了类似于导航栏的效果。我们可以借鉴到今后的开发之中。这是一个非常实用的小技巧。

// 使得UL中的li标签水平排列
    ul {
      display:inline;
      white-space: nowrap;
    }
    li {
      margin:3px;
      float:left;
      background:red;
      display:inline-block;
    }

完整小例子

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Tab Host Demo</title>
 <script type="text/javascript" src="jquery-2.2.4.min.js"></script>
 <style>

  // 使得UL中的li标签水平排列
  ul {
   display:inline;
   white-space: nowrap;
  }
  li {
   margin:3px;
   float:left;
   background:red;
   display:inline-block;
  }

  .tab_menu {
   list-style:none; /* 去掉ul前面的符号 */
   margin: 0px; /* 与外界元素的距离为0 */
   padding: 0px; /* 与内部元素的距离为0 */
   width: auto; /* 宽度根据元素内容调整 */
  }
  .tab_box {
   background-color: #465c71; /* 背景色 */
   border: 1px #4e667d solid; /* 边框 */
   color: #dde4ec; /* 文字颜色 */
   display: block; /* 此元素将显示为块级元素,此元素前后会带有换行符 */
   line-height: 1.35em; /* 行高 */
   padding: 4px 20px; /* 内部填充的距离 */
   text-decoration: none; /* 不显示超链接下划线 */
   white-space: nowrap; /* 对于文本内的空白处,不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。 */
  }
  .selected {
   background-color: green;
   display: block;
  }
  .hide {
   display: none;
  }
 </style>
</head>
<body>
<div class="tab">
 <div class="tab_menu">
  <ul>
   <li class="selected">选项卡1</li>
   <li>选项卡2</li>
   <li>选项卡3</li>
  </ul>
 </div><br><br><br>
 <div class="tab_box">
  <div>选项卡1:这里是1号内容区域</div>
  <div class="hide">选项卡2:这里是2号内容区域</div>
  <div class="hide">选项卡3:这里是3号内容区域</div>
 </div>
</div>
<script>
 // 加上鼠标的点击效果
 $(function(){
  $("ul li").click(function(){
   $(this).addClass("selected").siblings().removeClass("selected");
   var index = $("ul li").index(this);
   $("div.tab_box > div").eq(index).show().siblings().hide();
  })
 })

 // 加上鼠标悬浮效果
 $(function(){
  $("div.tab_menu ul li").hover(function(){
   $(this).addClass("selected").show();
   // 下面的这个可以实现选项卡的联动效果
   var index = $("ul li").index(this);
   $("div.tab_box > div").eq(index).show().siblings().hide();
  },function(){
   $(this).removeClass("selected").show();
   // 下面的这个可以实现选项卡的联动效果
   var index = $("ul li").index(this);
   $("div.tab_box > div").eq(index).show().siblings().hide();
  })
 })
</script>
</body>
</html>

实现的效果如下:

jQuery制作网页版选项卡

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

展开阅读

资源下载

相关资源

  • 《网页设计与制作》素材,教案

    《网页设计与制作》素材,教案

    编辑推荐 《网页设计与制作》按照项目教学法组织教学内容。全书由16个项目构成,主要内容包括在网页中岔入文本、图像、媒体、超级链接、表单等网页元素及其属性设置,运用表格、框架、层和Div标签等工具对网页进行布局,使用模板和库制作网页,运用CSS样式控制网页外观,使用行为完善网页功能,使用时间轴制作动画,在可视化环境下创建应用程序,使用PhotoshopCS3、Flash8配合Dreamweer8制作网页以及创建、管理和维护网站的基本知识。《网页设计与

    大小:100.14 MB网页设计

    立即下载
  • ASP.NET动态网页设计教程

    ASP.NET动态网页设计教程

    大小:57 MBASP.NET

    立即下载
  • HTML+CSS+DIV网页设计与布局

    HTML+CSS+DIV网页设计与布局

    本书主要内容包括认识网站开发、网页文字和图片、超链接、表格、多媒体、滚动字幕、列表、表单、框架、设置文本样式、设置网页背景样式、设置边框和边距样式、设置表格和列表样式、控

    大小:28.7 MB前端设计

    立即下载
  • HTML5+CSS3网页设计入门必读

    HTML5+CSS3网页设计入门必读

    要搭建1个出色的智能化网页页面,HTML5和CSS3是每一名开发者务必把握的小工具。这书分构造清楚,內容精练,以*轻轻松松通俗易懂的方法向用户详细介绍了与HTML5有关的标识简史、HTML设计构思

    大小:5.1 MB前端设计

    立即下载
  • 网页设计心理学

    网页设计心理学

    大小:53 MB网页设计

    立即下载

学习笔记

12小时25分钟前回答

大转盘抽奖小程序版 转盘抽奖网页版

今天整理了下以前写的小demo,把大转盘抽奖的代码,整合下,列了网页版和小程序两个版本,这个转盘抽奖的核心是H5的canvas和Css3的translate属性,非常简单,写了网页版和小程序版供大家参考,主要核心代码就是利用canvas画图,完整代码见大转盘抽奖,下载可用 希望给大家带来帮助 //转盘内部绘制lottery.prototype.getCanvasI=function(){ let itemsArc=360/this.itemsNum //获取大转盘每等分的角度 this.itemsArc=itemsArc let widthI=canvasI.width let heightI=canvasI.height this.w1=parseInt(widthI/2) this.h1=parseInt(heightI/2) this.Items(itemsArc)//每一份扇形的内部绘制 this.mytime=setInterval(this.light.bind(this),1000)}//绘制奖品名称lottery.prototype.Items=function(e){ let t……

24小时20分钟前回答

使用jquery获取网页中图片高度的两种方法

使用jquery获取网页中图片的高度其实很简单,有两种常用的方法都可以打到我们的目的 $("img").whith();(返回纯数字) $("img").css("width");(返回字符串:数字+"px") 但是有时候会遇到返回0的情况,上面方法返回值竟然是0或者0px,很让人诧异 方法一 在很早之前,我使用的解决方法,这也是我的师傅告诉我的解决方法:在你需要获取到的图片的img标签上加上width属性,或者在css中写出来图片的告诉,这样就可以了,所以每次我要去获取一个图片的高度的时候,都需要去先测量一下图片的高度,然后写到网页中,这样才可以,是不是很笨拙啊,下面我们来看第二个方法。 方法二 最近在看Learning jQuery英文版原著……

10小时21分钟前回答

Python网页正文转换语音文件的操作方法

天气真的是越来越冷啦,有时候我们想翻看网页新闻,但是又冷的不想把手拿出来,移动鼠标翻看。这时候,是不是特别想电脑像讲故事一样,给我们念出来呢?人生苦短,我有python啊,试试用 Python 来朗读给你听吧。 网页转换成语音,步骤无外乎: 网页正文识别,获取到正文的文本内容; 文本转语音,通过接口将文本转换成语音文件; 语音文件的发声,即将语音文件读出; 1 网页正文识别 之所以用 Python,就是因为 Python 有着丰富的库,网页正文识别也不在话下。这里用 readability、goose3 1.1 readability readability 支持 Python3,使用 pip install readability-lxml 安装即可。 readability 使用起来也很方便: import req……