第一章网页制作的基础知识

最新推荐文章于 2024-09-13 19:52:51 发布

Q狄龙

最新推荐文章于 2024-09-13 19:52:51 发布

阅读量538

点赞数 16

文章标签：笔记学习方法

本文链接：https://blog.csdn.net/2301_78694366/article/details/142077624

版权

1.1认识网页和网站

1.1.1 网页.网站

网页和网站的区别：

1、含义不同

网站是按照一定规范和规则，使用HTML、JavaScript和CSS构成的网页集合；

网页是网站的基本元素，展示给用户

2、关系不同

网站包含了网页，网页是包含了HTML代码集合，呈现一个界面

3、组成不同

网站由域名、服务器、空间等构成，而网页是由HTML、JavaScript等代码构成

4、功能不同

网站功能齐全，包含了注册功能、登录功能、业务功能，网页一般实现几个简单功能

人们可以通过网页浏览器来访问网站，获取自己需要的资讯（信息）或者享受网路服务。

网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯（信息），或者利用网站来提供相关的网路服务（网络服务）。

5、访问不同

网站需要部署到服务器，利用域名或IP地址访问，而网页可以直接在浏览器访问

常用术语：

URL:统一资源定位系统（uniform resource locator;URL）是因特网的万维网服务程序上用于指定信息位置的表示方法

域名:是由一串用点分隔的名字组成的互联网上某一台计算机或计算机组的名称，用于在数据传输时对计算机的定位标识

IP:网际互连协议，Internet Protocol的缩写，是TCP/IP体系中的网络层协议。

FTP：文件传输协议（File Transfer Protocol，FTP）是一种在网络中进行文件传输的广泛使用的标准协议。

超链接：网页中某个锚文本、网址、图片、文件加上了链接属性，目标指向了另一个地址，也就是当用户点击这个链接后会跳转到另一个页面，而这个文本、图片等的属性链接我们称为超链接。

1.1.2 静态网页和动态网页

静态网页：在网站设计中，纯粹HTML（标准通用标记语言下的一个应用）格式的网页通常被称为“静态网页”，静态网页是标准的HTML文件，它的文件扩展名是.htm、.html

动态网页：能与后台数据库进行交互，数据传递。以.aspx、.asp、.jsp、.php、.perl、.cgi等形式为后缀，内容却是可以随着时间、环境或者数据库操作的结果而发生改变的。

1.2 网页的基本构成元素

1.2.1.文本

文本具有体积小、网络传输速度快等特点，可使用户更方便地浏览和下载文本信息，是网页最主要的基本元素，也是页面中最主要的信息载体。

1.2.2.图片和动画

图片比文本更加生动和直观，可以传递一些文本不能表达的信息，具有强烈的视觉冲击力。

1.2.3.超链接

超链接技术是WWW流行起来的最主要的原因。超链接是从一个网页指向另一个目的端的链接，指定从一个位置跳转到另一个位置，可以是文本链接、图像链接和锚链接等。

1.2.4.音频视频

音频文件可使网页效果多样化，网页中常用的音频格式有mid和mp3。其中mp3为压缩文件，其压缩率非常高，音质也不错，是背景音乐的首选。

1.2.5.交互表单

网页中的表单通常用来接收用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端。

1.2.6.其他常见元素

网页中除了以上几种最基本的元素之外，还有一些其他的常用元素，包括悬停按钮 JavaScript与ActiveX等各种特效，它们不仅能点缀网页，使网页更活泼有趣，还在网上娱乐、电子商务等方面也有着不可忽视的作用。

1.3 页面布局结构

1.3.1 网页页面布局

1.3.2 网页色彩搭配

有主色的混合色彩搭配

有主色的混合色彩搭配是一种以一种颜色为主要颜色，并辅以其他色彩进行混合搭配的设计方法，旨在形成既缤纷又不显杂乱的视觉效果。这种搭配方式强调了主要颜色的主导地位，同时通过与其他色彩的巧妙组合，使得整体设计既富有层次感，又保持了视觉上的和谐统一。这种方法在网页设计中尤为常见，因为它可以帮助用户更容易地识别和记忆品牌或内容。

相邻配色方式

相邻配色方式是利用色环上相邻的颜色进行搭配，如绿色和蓝色、红色和黄色。这种配色方式有助于避免网页色彩杂乱，使页面达到和谐统一的效果。邻近色对比是色相环上相邻的二至三色对比，色相距离大约30度左右，为弱对比类型。其效果感觉柔和、和谐、雅致、文静，但也可能让人感觉单调、模糊、乏味、无力，因此需要调节明度差来加强效果。

对比色调

对比色调是通过将色性完全相反的色彩搭配在同一空间里，如红与绿、黄与紫、橙与蓝等，来产生强烈的视觉效果。这种搭配能给人带来亮丽、鲜艳、喜庆的感觉。但若使用不当，可能会产生俗气、刺眼的效果。为了达到和谐与对比的平衡，总体色调应保持和谐，仅在局部地方采用强烈的色彩对比。此外，色彩具有象征性和民族性，合理运用可以提升网页的文化品味。

冷色色彩搭配

冷色调主要由情色、绿色、紫色等色彩构成，常用于表达宁静、清凉和高压的氛围。这种色调通常适合表达严肃和稳重的效果，如高科技和游戏类网站。冷色与白色的搭配可以达到和谐的效果。青、蓝、紫都属于冷色系，它们可以给人明快、硬朗的感觉。在网页设计中，和谐的冷色调可以让人感受到科技和未来。同时，冷色系的搭配也被广泛用于商务网站，因为它能传达专业、冷静和稳重的感觉

暖色色彩搭配

暖色调在网页设计中常用于营造温馨、和煦和热情的氛围。这种色调主要包括红色、橙色和黄色，能够给人带来温暖、舒适和活力的感觉。在网页设计中，暖色调的应用可以突出视觉效果。例如，通过调整不同亮度的暖色调，如深红、橙和浅黄，可以创造出丰富而和谐的视觉效果。此外，插入的图片颜色应与基本暖色调和谐，以保持整体设计的统一性。

1.4 Web前端技术简介

1.4.1 初识WEB前端

1.4.2 WEB前端开发的三大核心技术

HTML：HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

CSS：层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

JavaScript：JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。