网页设计  七期

主讲教师: 梁莉菁 副教授 / 萍乡学院

教学进度:
  • 预报名
  • 进行中
  • 已结束

学时安排:56学时

学分:3分

课程适合对网页设计与制作感兴趣的零基础的同学们,使用 DW和 HBuilder 工具,从Web发展史讲起,对Html标签、CSS样式设置作了详细讲解,并涉及简单的JS脚本以及Html5+CSS3新功能的介绍,由易到难、由简到繁,循序渐进地介绍网页前端设计与制作的基础知识与基本技能。
  • 9288184

    累计页面浏览量

  • 5682

    累计选课人数

  • 13088

    累计互动次数

2021-09-17 15:40 梁莉菁 萍乡学院 在网页设计 七期课程中提问:

谈谈你对Html5中新增的表单Input输入类型的理解

Html5中新增了多个表单Input输入类型,你挑选一个或几个你感受最深感觉实用性最强那种新增类型进行简要的概括与阐述。

  • 2021-12-27 19:47 喻晓丹

    答:Html5中新增的表单Input输入类型之EMAIL类型理解:
    EMAIL类型的外观上和文本栏相似,用于指定一个电子邮箱地址。虽然它在web端没有什么差别,但是在手机端就不一样了,输入键盘可自动变成有@ 数字 A-Z .等与输入邮箱有关的字符,毫无疑问,这样可以大幅度提高用户体验感。
  • 查看全部(81条)

2021-09-13 11:08 梁莉菁 萍乡学院 在网页设计 七期课程中提问:

请谈谈你对Html5语义化新特点的理解?

Html5新增了许多语义化标签,为什么要新增这些语义化标签,有什么重要作用与意义?请查阅Html5语义化新特点的相关资料,谈谈你对Html5语义化的理解。注意不要简单地复制粘贴网络资源,简要地概括说明你个人的观点即可。

  • 2021-12-27 19:39 喻晓丹

    语义化的HTML就是写出的HTML代码,符合内容的结构化(内容语义化),选择合适的标签(代码语义化),能够便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
    语义化的优点:
    1).去掉或样式丢失的时候能让页面呈现清晰的结构
    2).方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页
    3).有利于SEO
    4).便于团队开发和维护,遵循W3C标准,可以减少差异化
  • 查看全部(67条)

2021-09-17 15:32 梁莉菁 萍乡学院 在网页设计 七期课程中提问:

请谈谈网页设计时为什么会弃用表格布局的方式?

曾几何时,表格布局是网页布局的主要方式,请查询相关资源,谈谈网页设计时为什么会弃用表格布局的方式?另外,如果发现网络资源中有设计得特别精美的表格案例页面,请贴出网址与大家分享,并分析一下其技术特点与制作方法。

  • 2021-12-27 19:34 喻晓丹

    网页设计中table往往以一种较为简单的形态出现,用做布局时,行和列均比较少,一目了然。相反,用div等做的布局,如果只看HTML源代码,基本上不知所云,只有看了对应的CSS,才能去理解最终的效果。
  • 查看全部(63条)

2021-09-13 11:09 梁莉菁 萍乡学院 在网页设计 七期课程中提问:

简要地概括并阐述个人对超链接制作技术的理解。

超链接是网页技术的灵魂,请查阅并找寻网络中制作得特别精巧又富有特色的导航栏案例,将案例网址贴出来与大家分享,并请用自己的语言概括一下本章所讲述的各种超链接与导航栏的制作技术要点,简要地概括并阐述个人对超链接制作技术的理解。

  • 2021-12-27 19:32 喻晓丹

    超链接即某超文本文档中的元素,与另一个超文本、文件或脚本的不同元素之间的连接。
    1、链接层次不能太深,最多不要超过3层,在完善网页结构时,除了特殊情况,如转链接、分项链接或链接内容的细化,一般较合理的设计是3层,即导航链接→列表链接→链接内容。
    2、避免出现单向链接,每设计一个链接,都要考虑如何让客户快速返回,避免出现迷路的现象。对于详细内容页面不希望返回时,应设计在新窗口中打开,保证用户关闭浏览器窗口后,还可以找到原来的网页位置,并能快速返回首页或频道页。
    3、避免出现孤文件。在设计网页,要思路清晰、考虑完善,避免出现孤文件,这些文件用户一般很难找到的。同时对于网站维护也构成潜在影响。
    4、网页链接不要太多,过多的链接可能会影响页面的正常浏览使文件过大而影响下载速度。对于过多的链接可以使用下拉单或动态菜单等方式间接实现。
    5、页面不要太长。一般网页页面长度不要超过3个屏幕,如果页面较长可以通过定义瞄点,让用户能方便、快速地找到页面内具体信息。
  • 查看全部(62条)

2021-09-08 20:27 梁莉菁 萍乡学院 在网页设计 七期课程中提问:

网页中的SVG矢量图形

SVG 是基于网络的可缩放矢量图形,大家在网上查阅相关资料,探讨一下在网页中如何使用SVG矢量图?

  • 2021-12-26 23:22 梁辉聪

    SVG是用于描述矢量图像的XML语言。 它基本上是像HTML一样的标记,只是你有许多不同的元素来定义要显示在图像中的形状,以及要应用于这些形状的效果。 SVG用于标记图形,而不是内容。 非常简单,你有一些元素来创建简单图形,如 和。更高级的SVG功能包括 (使用变换矩阵转换颜色) (矢量图形的动画部分)和 (在图像顶部应用模板)
    方法:要通过 元素嵌入SVG,你只需要按照预期的方式在 src 属性中引用它。你将需要一个height或width属性(或者如果您的SVG没有固有的宽高比)。
    优点
    快速,熟悉的图像语法与alt属性中提供的内置文本等效。
    可以通过在元素嵌套,使图像轻松地成为超链接。
    缺点
    无法使用JavaScript操作图像。
    如果要使用CSS控制SVG内容,则必须在SVG代码中包含内联CSS样式。 (从SVG文件调用的外部样式表不起作用)
    不能用CSS伪类来重设图像样式
  • 查看全部(80条)

2021-09-06 10:30 梁莉菁 萍乡学院 在网页设计 七期课程中提问:

话题2:谈谈你对响应式网页布局技术的理解

请查阅相关资料,谈谈你对响应式网页布局技术的理解。请勿简单复制粘贴网络资源。

  • 2021-12-26 23:22 梁辉聪

    响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

    响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着大屏幕移动设备的普及,用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式。
  • 查看全部(68条)

2021-09-06 10:30 梁莉菁 萍乡学院 在网页设计 七期课程中提问:

话题1:谈谈你对Html5+CSS3新特性的理解

选择某一具体的点或面,谈谈你对Html5+CSS3新特性的理解。请勿简单复制粘贴网络资源。

  • 2021-12-26 23:22 梁辉聪

    理解:
    1. 拖拽释放(Drag and drop) API
    2. 语义化更好的内容标签(header,nav,footer,aside,article,section)
    3. 音频、视频API(audio,video)
    4. 画布(Canvas) API
    5. 地理(Geolocation) API
    6. 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;
    7. sessionStorage 的数据在浏览器关闭后自动删除
    8. 表单控件,calendar、date、time、email、url、search
    9. 新的技术webworker, websocket, Geolocation
  • 查看全部(73条)

2021-09-17 15:03 梁莉菁 萍乡学院 在网页设计 七期课程中提问:

谈谈你对网页布局技术的理解?

网页布局技术经历了表格布局,DIV+CSS布局,响应式布局等多次更新进化,请查询相关网络资源,谈谈你对网页布局技术的理解?可以仅从网页布局技术的某一方面入手,简要概括自己的观点。

  • 2021-12-26 18:52 温韬

    理解:网页布局是指网页内容在页面上所处位置的设计。

    网页布局技术之框架技术理解及分析:
    框架把浏览器窗口划分为若干个区域,每个区城可以显示不同的网页。
    框架主要包括两个部分,一个是框架集,另一个就是框架。框架集是在一个文档内定义一组框架结构的网页。框架集定义了在一个窗口中显示的框架数、框架的尺寸、载人到框架的 网页等。框架集文档本身不在浏览器中显示,它只是向浏览器提供如何显示框架以及在框架中显示哪些文档的信息,是一个用于存储框架的容器。框架则指在网页上定义的一个显示区域,每个 框架都有自己独立的滚动条,方便访问者独立浏览这些框架。

    优点:
    使用框架可以非常方便的完成导航工作,各个框架之 间不存在干扰。框架还有个很大的优点就是网站的风格能保持统一,它把相同的部分单独制作成一个页面,作为框架结构一个子 框架的内容给整个站点公用。

    缺点:
    框架是有边框的,占用空间。采用过多的框架会增加下载网页所需的时间,影响网页的浏览速度,对于内容多、布局复杂的网站不宜采用框架布局,且框架结构的页面兼容性不好。
  • 查看全部(70条)

2021-09-17 23:03 梁莉菁 萍乡学院 在网页设计 七期课程中提问:

话题2:谈谈网页设计中的JavaScript的功能与意义

查阅相关资源,请简要概括一下,你觉得JavaScript在网页设计中扮演什么角色,即承担了何种重要功能,有何种意义。

  • 2021-12-26 18:51 温韬

    JavaScript,也称ECMAScript,是一种基于对象和事件驱动并具有相对安全性并广泛用于客户端网页开发的脚本语言,同时也是一种广泛用于客户端Web开发的脚本语言。

    javascript的基本特点:
    是一种解释性脚本语言(代码不进行预编译)。
    主要用来向 HTML 页面添加交互行为。
    可以直接嵌入 HTML 页面,但写成单独的js文件有利于结构和行为的分离。
  • 查看全部(80条)

2021-09-17 23:03 梁莉菁 萍乡学院 在网页设计 七期课程中提问:

话题1:请总结一下本章焦点轮播图效果与跑马灯效果两大案例的技术要点。

请用自己的语言总结一下本章中焦点轮播图效果与跑马灯效果两大案例制作时最重要的知识点与技术要点。

  • 2021-12-26 18:51 温韬

    布局,轮播的几张图片的大小必须是一样大的,而且父容器大小为一张照片大小,其余看不见的部分hidden,通过JS改变图片的left值来实现图片的轮播。左右点击按钮,还有图下方的按钮,均为他们添加点击事件,改变图片的left值。自动播放功能,就是设置了定时器,当鼠标移开的时候,触发定时器。鼠标回到container时,清除定时器。
  • 查看全部(91条)

常见问题

  • 1.我该如何学习这门课程?

    (1)首先您要注册一个学银在线的账号。

    (2)您需要有一定的上网条件,能够流畅的观看教学视频。在观看的过程中,您可以选择在PC端登陆我们的网页, 也可以选择下载我们的app学习通,通过手机客户端来学习。

    (3)您一旦报名选择了课程,我们的课程主讲老师或课程团队会通过通知的形式给您发送课程有关的消息,同时会抄送您的邮箱,请您及时查收。

  • 2.我在学习过程中遇到问题了,怎么办?

    您可以通过以下几种方式获取帮助:

    (1)在课程群聊中发布求助信息,说不定和你一起学习这门课的小伙伴就能够解决你的问题呢;

    (2)在课程讨论区留言,课程团队看到后将会及时回复。

    (3)联系我们的客服,或者随时给我们发邮件,邮箱地址:xueyinkf@chaoxing.com。

  • 3.我是新手,能否给我一些学习建议?

    (1)我们的课程采用MOOC的方式授课,因此您可以自由安排您的学习时间、学习地点。但我们仍旧希望您每周能都有固定的时间持续进行本课程的学习,根据人的记忆曲线显示这种规律的学习方式能够最大限度的提升您的学习质量。

    (2)学习的过程比较容易,为了检验您的学习成果,我们的课程团队会在课程章节结束后布置测验或作业,希望您尽可能的按时独立完成。如果有没有掌握的知识点,您可以继续回看复习课程。

    (3)希望您能够积极参与课程的讨论,与各位学习者一起煮酒论英雄。在讨论的过程中,不光可以对课程所学内容温习内化,还能互相碰撞出思想的火花,相信您一定会有额外的收获。

  • 4.课程会不会很难、很枯燥?

    (1)我们的课程都是老师经过精心设计拍摄制作而成,并且由于是MOOC的方式,所以课程拆分成了不同的知识点,学习起来一点也不费劲。

    (2)我们的课程多采取理论结合实际的授课方式,课程中也有许多案例的呈现,相信会给学习者带来诸多方面的启发。我们也将力求做到深入浅出,支持学习者将研究发现转化为实践,改进自身教学。