web 入门

编程语言 2024-11-01 19:24
0 阅读

安装基础软件

安装文本编辑器

推荐：visualstudio
在这里插入图片描述

安装浏览器

Windows 10 默认带有 Microsoft Edge 浏览器，至少安装两款浏览器以便在开发过程中进行测试。
推荐：

  1. firefox
    在firefox
  2. chrome
    chrome

安装本地 Web 测试服务器

在代码编辑器visualstudio中使用扩展vscode-preview-server，这个扩展可以帮助测试前端代码效果。
在这里插入图片描述

设计网站外观

构思做一个什么样子的网站

企业官网、个人博客、门户网站、视频网站等等。

绘制草图

简单画出页面布局。

选定素材

根据画出的页面布局寻找或者创造相应的图片、图标、文本等素材。

文本

撰写好基本的标题文本。

主题颜色

挑选心仪的主题颜色，几个配色方案网站：

  1. https://coolors.co/palettes/trending
    在这里插入图片描述

  2. https://colorhunt.co
    在这里插入图片描述

  3. https://www.canva.com/colors/color-palettes
    在这里插入图片描述

图片

网络上的大多数图片，都是有版权的。为了减少侵权的可能性，可以使用Google 图片搜索，过滤过滤可以免费商用的图片。

字体

和图片一样，很多字体都受版权保护，也就是说，你不可以在你的网站上随意使用它们。

需要选择可以免费商用的字体。

  • 有的字体已在用户的电脑中，只需要在代码中调用他们即可，如：Arial、Times New Roman、Courier New。
  • 有的字体没有被默认安装到用户操作系统里面，需要下载字体文件到你的系统内，自行挂载这个文件，并在你网站的代码中使用。

处理文件

一个网站包含许多文件：文本内容、代码、样式表、媒体内容，等等。当你建立一个网站时，你需要在计算机上将这些文件以合理的结构组织起来，确保文件之间交互畅通，并在你最终将它们上传到服务器之前使你的所有内容看起来正确。这里有一些你应该注意的问题，以便你能为你的网站建立一个合理的文件结构。

关于大小写和空格

  1. 计算机和网络服务器区分大小写。
    假如你把一张图片 MyImage.jpg放在你的网站上 ，然后在一个不同的文件中，你试图以 myimage.jpg 来调用该图片，它可能无法工作。
  2. 浏览器、网络服务器和编程语言对空格的处理并不一致。
    如果你在文件名中使用空格，一些系统可能将其视为两个文件名。一些服务器会用“%20”（URL 中空格的字符代码）替换文件名中的区域，导致所有链接被破坏。最好用连字符而不是下划线或者空格来分隔单词。对比 my-file.html 与 my_file.html。

文件的储存

在我们创建的任何网站项目中，最常见的是一个主页 HTML 文件和包含图像、样式文件和脚本文件的文件夹。现在让我们来创建这些文件和文件夹：

  1. index.html：新建index.html文件，这个文件一般会包含主页内容，也就是人们第一次进入网站时看到的文字和图片。使用文本编辑器，创建一个名为index.html的新文件，并将其保存在test-site文件夹内。
  2. images 文件夹：这个文件夹包含网站上使用的所有图片。在 test-site 文件夹内创建一个名为 images 的文件夹。
  3. styles 文件夹：这个文件夹包含用于设置内容样式的 CSS 代码（例如，设置文本和背景颜色）。在你的 test-site 文件夹内创建一个名为 styles 的文件夹。
  4. scripts 文件夹：这个文件夹包含所有用于向网站添加交互功能的 JavaScript 代码（例如，点击时加载数据的按钮）。在 test-site 文件夹内创建一个名为 scripts 的文件夹。
    在这里插入图片描述

文件路径

为使文件间正常交互，应为每个文件提供访问路径，所以一个文件知道另一个文件的位置。

演示步骤：

  1. 选择一张图片复制到你的 images 文件夹，命名为My test image.png。
    在这里插入图片描述

  2. 用vscode打开index.html，在 index.html 中插入以下代码：

    <!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>My test page</title>
  </head>
  <body>
    <img src="images/My test image.png" alt="My test image" />
  </body>
</html>

  3. 该行代码<img src="images/My test image.png" alt="My test image" />用于向页面中插入图片。我们需要告知 HTML 图片的位置。src="" 的双引号之间插入文件路径，这张图片位于 images 目录下，与 index.html 处于同一目录，所以文件路径为images/My test image.png。

  4. 保存 HTML 文件，然后使用浏览器打开（双击该文件）。你就能在浏览器中看到新网页显示了新的图像！
    在这里插入图片描述
    文件路径的一些通用规则：

  • 若引用的目标文件与 HTML 文件同级，只需直接使用文件名，例如：my-image.jpg。
  • 要引用子目录中的文件，在路径前面写上目录名，再加上一个正斜杠。例如：subdirectory/my-image.jpg。
  • 若引用的目标文件位于 HTML 文件的上级，需要加上两个点。举个例子，如果 index.html 在 test-site 的一个子文件夹内，而 my-image.jpg 在 test-site 内，你可以使用../my-image.jpg 从 index.html 引用 my-image.jpg。
  • 以上方法可以随意组合，比如：../subdirectory/another-subdirectory/my-image.jpg。

猜你喜欢

目录

热门文章