2023-02-27 20:16 梁莉菁 萍乡学院 在网页设计(Web前端开发) 十期课程中提问：

谈谈网页中支持的各种图片格式的特点

请谈谈网页中支持哪些格式的图片？各种格式图片的特点是什么，一般网页中在什么情况下最好采用哪种格式的图片？

• 2023-06-26 01:04 王娜雪

  1. psd
  photoshop的专用格式，网页上一般是不用这种格式的，它一般被用来辅助我们做网页，ui设计师给我们的就是这种格式的图片。
  优点：完整保存图像的信息，包括未压缩的图像数据，图层，透明等信息，方便图像的编辑。
  缺点：应用范围窄，图片容量相对比较大。
  2. jpg
  网页制作及日常使用最普遍的图像格式，如果网页中不需要透明背景，一般就会用这种图。
  优点：图像压缩率高，图像容量相对最小
  缺点：有损压缩，图像会丢失数据而失真，不支持透明背景，不能制作成动画。
  3.gif
  制作网页小动画的常用图像格式，比如平时经常发的动态的表情一般都是gif格式的。
  优点：无损压缩，图像容量小，可以制作成动画，支持透明背景。
  缺点：图像色彩范围最多只有256色，不能保存为色彩丰富的图像，不支持半透明，支持透明图像但是图像边缘有锯齿。
  4. png
  网页制作及日常使用比较普遍的图像格式，如果能支持动画则它完全可以取代gif。
  优点：无损压缩，图像容量小，支持透明背景和半透明背景，透明图像的边缘是光滑的，这是和gif相比它的一大优点。
  缺点：不能制作成动画。
  5. webp
  将要取代jpg的图像格式。
  优点：和jpg格式相同，但是容量相对比jpg还要小。
  缺点：和jpg格式相同，但是目前只有极少数的浏览器支持，像一些主流的浏览器谷歌，火狐，IE等都不支持这种格式。
  上5中图像都属于位图。位图，也叫点阵图，是由一个个的方形的像素点排列在一起拼接而成的，位图在放大时，图像会失真。
  矢量图和位图的成像原理不同，它的图像轮廓是由函数曲线生成的，当放大图像时。实际的原理就是将曲线乘以一个倍数，图像可以轻易地放大，而且不出现像素块，图像边缘也不会出现锯齿。一句话说就是位图放大会失真，矢量图放大后不会失真。
  常见的矢量图格式：
  1. svg
  目前首选的网页矢量图格式。
  优点：图像容量小，图像放大不失真，支持透明背景和半透明色彩，图像边缘光滑。
  缺点：色彩不够丰富。
  总结：
  在网页制作中，如何选择合适的图片格式呢？
  1. 使用大幅面图片时，如果要使用不透明背景时，首选jpg图片，因为它的容量相对最小；如果要使用透明或半透明背景的图片时，就使用png图片。
  2.使用小幅面图片或图标图片时，如果图片含多种颜色，可以使用gif或png图片；如果图片的色彩很单一，而且要求有很好的显示效果放大不失真，可以使用svg图片；如果要求图片是动画的，可以使用gif。

查看全部(35条)

2023-03-10 08:19 梁莉菁 萍乡学院 在网页设计(Web前端开发) 十期课程中提问：

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

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

• 2023-06-20 20:40 吴昆明

  autocomplete：规定元素输入字段是否应该启用自动完成功能。
  autofocus：规定当页面加载时元素应该自动获得焦点。
  form：规定元素所属的一个或多个表单。
  新增的表单重写属性：
  formaction:规定当表单提交时处理输入控件的文件的URL。
  formenctype:规定当表单数据提交到服务器时如何编码。
  formmethod:定义发生表单数据到action URL的HTTP方法。
  formnovalidate:formnovalidate属性覆盖元素的novalidate属性。
  formarget:规定标识提交表单后在哪里显示接收到响应的名称或关键词。
  除了formnovalidate属性，其他属性都是只针对type=“submit"和type="image".
  新增的heighth和width属性：规定元素的高度、和宽度。（只针对type=”image“）。
  list：属性引用元素，其中包含元素的预定义选项。
  新增的min、max和step：
  min:规定输入框所输入的最小值。
  max:规定输入框所输入的最大值。
  step：为输入框规定合法的数字间隔。
  multiple：属性规定允许用户输入到元素的多个值。
  pattern：规定用于验证元素的值的正则表达式。
  placeholder：规定可描述输入字段预期值的简短的提示信息。
  required：规定必需在提交表单之前填写输入字段。

查看全部(47条)

2023-03-03 20:50 梁莉菁 萍乡学院 在网页设计(Web前端开发) 十期课程中提问：

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

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

• 2023-06-20 20:32 吴昆明

  使用表格进行页面布局会带来很多问题问题：
  1 把格式数据混入你的内容中。
  o Table使得文件的大小无谓地变大，而用户访问每个 页面时都必须下载一次这样的格式信息。
  o 客户的时间和带宽也是有限的。
  2 Table使得重新设计现有的站点和内容极为消耗劳力，且昂贵
  3 Table使我们保持整个站点的视觉的一致性极难，花费也极高。
  4 Table的页面还大大降低了它对残疾人和用手机或 PDA 浏览者的亲和力
  而使用DIV CSS进行网页布局这样一种工作方式
  1 DIV CSS 布局 使页面载入得更快 ，降低流量费用
  3 DIV CSS 布局 在修改设计时更有效率而代价更低
  4 DIV CSS 布局 帮助整个站点保持视觉的一致性更容易
  5 DIV CSS 布局 让站点可以更好地被搜索引擎找到
  6 DIV CSS 布局 使站点对浏览者和浏览器更具亲和力
  7 DIV CSS 布局 在世界上越来越多人采用 Web 标准时，对于网站制作人员来说还能 提高职场竞争实力。

查看全部(46条)

2023-03-10 22:18 梁莉菁 萍乡学院 在网页设计(Web前端开发) 十期课程中提问：

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

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

• 2023-06-20 20:27 吴昆明

  超链接（Hyperlink），通常简称为链接（link），是网络背后的核心概念。为了解释什么是链接，我们需要回到网络架构的底层。
  早在 1989 年，网络发明人蒂姆·伯纳斯 - 李（Tim Berners-Lee）就提出了网站的三大支柱：
  URL, 跟踪 Web 文档的地址系统
  HTTP, 一个传输协议，以便在给定 URL 时查找文档
  HTML, 允许嵌入超链接的文档格式
  正如您在三大支柱中所看到的，网络上的一切都围绕着文档以及如何访问它们。Web 的最初目的是提供一种简单的方式来访问，阅读和浏览文本文档。从那时起，网络已经发展到提供图像，视频和二进制数据的访问，但是这些改进几乎没有改变三大支柱。
  在 Web 之前，很难访问文档并从一个文档跳转到另一个文档。人类可以理解的 URL 已经使得文档容易被访问，但是你很难通过输入一个长 URL 来访问一个文档。超链接改变了这一切。链接可以将任何文本与 URL 相关联，因此用户只要激活链接就可以到达目标文档。
  默认情况下，链接是一段具有下划线的蓝色文本，在视觉上与周围的文字明显不同。用手指触击或用鼠标点击一个链接会激活链接；你如果使用键盘，那么按 Tab 键直到链接处于焦点，然后按 Enter 键或空格键来激活链接。
  链接是一个突破，它使得网络变得非常有用和成功。在本文的其余部分，我们讨论各种类型的链接及链接在现代网页设计中的重要性。

查看全部(47条)

2023-03-03 20:02 梁莉菁 萍乡学院 在网页设计(Web前端开发) 十期课程中提问：

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

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

• 2023-06-20 20:19 吴昆明

  网页页面的大体结构：
  1.做网页之前先观察网页的头部，内容，底部，然后把版心确定下来，这是我做网页的第一步。
  网页项目文件夹的格式：
  2.大致文件夹方面一个css文件夹，js一个文件夹，index首页放在最外面，其余的页面的html文件放在新建的html文件夹里，同时注意命名规范。
  公共css样式的初始化：
  3.把系统默认的标签属性给清除掉，网页的 css，js文件引入css放在最上面，js文件引入放在最下面，这样能提高网页性能。

查看全部(44条)

2023-03-07 23:55 梁莉菁 萍乡学院 在网页设计(Web前端开发) 十期课程中提问：

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

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

• 2023-06-20 20:11 吴昆明

  HTML5 新增了许多语义化标签
  语义化好处:便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
  作用 ：
  1.为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看;
  2.用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用;
  3.有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重;
  4.方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
  5.便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
  HTML5 程序的新标签就是为了更好地描述页面内容而设计的，因此它们应该语义化。比如，HTML5 中的 标签表示页面的页眉， 标签表示页面的页脚， 标签表示页面的导航部分等。使用这些标签可以更好地描述页面内容，有助于搜索引擎优化、提高页面的可读性和可维护性、提高访问性和兼容性。同时，HTML5 还新增了一些标签，比如 、、 等，这些标签也是为了更好地描述页面内容而设计的，也应该语义化。总之，HTML5 程序的新标签要语义化，是为了更好地描述页面内容，提高页面的可读性和可维护性，提高访问性和兼容性

查看全部(43条)

2023-03-03 17:40 梁莉菁 萍乡学院 在网页设计(Web前端开发) 十期课程中提问：

你怎么理解Web标准中的结构与表现分离的意义

网页设计中通常提到要结构与表现相分离，你怎么理解网页设计中结构与表现分离的意义

• 2023-06-20 20:07 吴昆明

  结构与表现相分离带来的意义有：
  1.数据的多样显示。通过不同的样式表适应不同的设备，做到内容与设备无关
  2.保持整个站点的视觉一致性变得非常简单，修改样式表就可以轻松改版;
  3.由于结构清晰，数据的集成、更新和处理更加方便灵活；
  4.更有意义的搜索。

查看全部(52条)

2023-03-11 18:47 梁莉菁 萍乡学院 在网页设计(Web前端开发) 十期课程中提问：

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

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

• 2023-06-15 16:18 周之俊

  第一步：创建三个文件。
  .html文件， .css文件, .js文件
  在创建一个img文件夹用来放图片
  我这里的文件名字：轮播图.html 轮播图.css 轮播图.js（文件名最好是英文）
  第二步：通过html把框架搭好。
  注意的点：1、script标签引外部js时，加上defer（加载完成html后，在加载js），避免获取不到元素的情况。
  2、js获取外部css样式修改的时候，也就是没有在html文件里的样式，有可能js获取不到，所以上面代码中需要改变的left值，还有图片还有外部盒子的宽度，我都写在了html里，也方便了如果图片大小改变时，**只需要修改html文档就好，css和js代码都不需要动。
  第三步：写css样式。
  1、写css把图片横向布局，并且通过overflow：hidden的方式把外面的图片隐藏
  2、给ul设置定位，并把left设置为0px;也就是向左偏移为0
  （如果是上下轮播，图片纵向布局，top为0px）
  第四步：通过写js来改变图片的left值，使其动态显示。
  1、使左右两个图片居中，根据图片的高度，（图片高度-箭头高度）
  2、根据图片个数，创建小圆点的个数
  3、改变left值使图片位置发生变换

查看全部(50条)

2023-03-11 18:47 梁莉菁 萍乡学院 在网页设计(Web前端开发) 十期课程中提问：

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

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

• 2023-06-15 16:18 周之俊

  第一步：创建三个文件。
  .html文件， .css文件, .js文件
  在创建一个img文件夹用来放图片
  我这里的文件名字：轮播图.html 轮播图.css 轮播图.js（文件名最好是英文）
  第二步：通过html把框架搭好。
  注意的点：1、script标签引外部js时，加上defer（加载完成html后，在加载js），避免获取不到元素的情况。
  2、js获取外部css样式修改的时候，也就是没有在html文件里的样式，有可能js获取不到，所以上面代码中需要改变的left值，还有图片还有外部盒子的宽度，我都写在了html里，也方便了如果图片大小改变时，**只需要修改html文档就好，css和js代码都不需要动。
  第三步：写css样式。
  1、写css把图片横向布局，并且通过overflow：hidden的方式把外面的图片隐藏
  2、给ul设置定位，并把left设置为0px;也就是向左偏移为0
  （如果是上下轮播，图片纵向布局，top为0px）
  第四步：通过写js来改变图片的left值，使其动态显示。
  1、使左右两个图片居中，根据图片的高度，（图片高度-箭头高度）
  2、根据图片个数，创建小圆点的个数
  3、改变left值使图片位置发生变换

查看全部(44条)

2023-02-27 10:05 梁莉菁 萍乡学院 在网页设计(Web前端开发) 十期课程中提问：

讨论：何为“WWW”？

请大家发表一下对网页地址中常见的 “WWW”的理解。

• 2023-06-13 21:01 林彩云

  WWW是环球信息网的缩写，英文全称为“World Wide Web”。也被称为“Web”、“WWW”、“'W3'”，中文名字为“万维网”，"环球网"等，常简称为Web。
  分为Web客户端和Web服务器程序。 WWW可以让Web客户端（常用浏览器）访问浏览Web服务器上的页面。 是一个由许多互相链接的超文本组成的系统，通过互联网访问。在这个系统中，每个有用的事物，称为一样“资源”；并且由一个全局“统一资源标识符”（URI）标识；这些资源通过超文本传输协议（Hypertext Transfer Protocol）传送给用户，而后者通过点击链接来获得资源。

查看全部(34条)

查看更多