Web入门——制作简单的网页(1)

目录

安装基础软件

设计网站外观

做出计划

  • 网站主题是什么?
  • 基于所选主题要展示哪些信息?
  • 网站采用怎样的外观?

注:复杂项目需要更详细的指引,包括颜色、字体、间距、编写规范等等。亦称为设计指南、设计系统、品牌手册

绘制草图

接下来,拿出纸笔画出网站草图。虽然第一个简单网页能做的不多,但最好在一开始就该养成这样的习惯。画草图很有用,而且并不需要梵高的手法。

选定内容

文本

包括标题和文字

主题颜色

色彩选择器:一个好用的调色板 | 颜色选择器 - Codeeeee 在线工具

色彩提取器:安装 PowerToys | Microsoft Docs

图像

Google 图片搜索

  1. 找到心仪的图片时,单击放大。
  2. 右击图片,选择 “另存图像为...”,然后选择一个安全的位置存放这张图像。也可以复制你的浏览器地址栏上的图像地址以便后来使用。

Web入门——制作简单的网页(1)

请注意大多数网络图片(包括 Google 图片)都是受版权保护的。为了降低盗版风险,可以使用“Google 许可证过滤器”。点击“工具”按钮,然后在使用权限的选项下选择类似“启用CC授权”的选项:

Web入门——制作简单的网页(1)

字体

Google Fonts

  1. 打开右侧边栏可现实选中的字体家族。
  2. 可通过 Categories(类别)、Languages(语言)、Font Properties(字体属性)过滤想要的字体。
  3. 在列出的字体风格列表中,选择合适的粗细、是否倾斜等信息。
  4. 在右侧边栏中可以看到 Google 给出的代码片段,将其复制到文本编辑器就可以使用了。

处理文件

网站由文本、代码、样式表、媒体内容、等多种文件组成。构建站点时要确保文件夹结构合理,文件之间交互通畅,没有明显错问,然后再上传至服务器。

网站应保存在何处?

对于本地网站,应将所有相关文件放在一个单独文件夹内,可以映射出服务器端站点文件结构。

  1. 确定网站项目储存位置。在该位置下创建一个文件夹(比如 web-projects)。所有网站项目都存在一处。
  2. 在这个文件夹里再新建一个文件夹(比如 test-site,),来存放第一个网站。

关于大小写和空格的提示

文中所有的文件夹名和文件都使用小写字母,且没有空格。

  1. 很多计算机,特别是 Web 服务器,是对大小写敏感的。
  2. 浏览器、Web 服务器,还有编程语言处理空格的方式不一致。比如,一些系统会将包含空格的文件名其视为两个。一些服务器将会把文件名里的空格替换为 “%20”(URI 里空格的编码),从而使链接遭到破坏。
  3. 最好使用中划线,而不是下划线来分离单词:对比 my-file.htmlmy_file.html 。谷歌搜索引擎把连字符当作单词的分隔符, 但不会识别下划线。基于此,最好在一开始就养成习惯,文件夹和文件名使用小写,用短横线而不是空格来分隔。可以避免许多问题。

网站应该使用什么结构?

最基本的结构:主页、图片文件夹、样式表文件夹和脚本文件夹。

  1. 主页index.html:这个文件一般包含主页内容,即用户第一次访问站点时看到的文本和图像。使用文本编辑器在test-site文件夹中新建index.html
  2. 图片文件夹images:这个文件夹包含站点中的所有图像。在 test-site 文件夹中新建 images 文件夹。
  3. 样式表文件夹styles:这个文件夹包含站点所需样式表(比如,设置文本颜色和背景颜色)。在 test-site 文件夹中新建一个 styles 文件夹。
  4. 脚本文件夹scripts:这个文件夹包含提供站点交互功能的JavaScript代码(比如读取数据的按钮)。在 test-site 文件夹中新建一个 scripts 文件夹。

Web入门——制作简单的网页(1)

文件路径

为使文件间正常交互,应为每个文件提供访问路径,让一个文件知道另一个文件的位置。在index.html 文件中插入一小段 HTML,让其显示设计网站外观小节中的Hello World图案。

  1. 将Hello World图案保存到 images 文件夹。

  2. 打开 index.html 文件,粘贴以下代码。

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>我的测试页面</title>
      </head>
      <body>
        <img src="" alt="我的测试页面">
      </body>
    </html> 
    
  3. <img src="" alt="我的测试页面"> 是在页面里插入图像的 HTML 代码。我们需要告诉 HTML 图像的位置。这张图片在 images 目录下_,_而 images 目录与 index.html 处于同级目录。要从 index.html 所处一级目录进入图片所在目录。例如,这里的图像叫做 helloworld.png ,所以文件路径就是 images/helloworld.png

  4. 在 HTML 代码里 src="" 的双引号中插入文件路径。

  5. 保存 HTML 文件,然后使用浏览器打开(双击文件)。

Web入门——制作简单的网页(1)

文件路径的一些通用规则:

  • 若引用的目标文件与HTML文件同级,只需直接使用文件名,比如helloworld.png
    Web入门——制作简单的网页(1)

  • 要引用子文件夹中的文件,要在路径前写下目录名并加上一个斜杠,比如images/helloworld.png
    Web入门——制作简单的网页(1)

注:Windows 文件系统使用反斜杠而不是正斜杠,比如 C:\Windows 。但与 HTML 没什么关系,即使在 Windows 上做 Web 开发,代码中仍应使用正斜杠。

  • 若引用的目标文件夹位于HTML的上级,需要加上两个点。比如,如果 index.htmltest-site 下面的一个子目录html中,而 helloworld.pngtest-site 目录,你可以在 index.html 里使用 ../``helloworld.png 引用 helloworld.png
    Web入门——制作简单的网页(1)

  • 以上方法可以随意组合,比如 ../subdirectory/another-subdirectory/helloworld.png

上一篇:HelloWorld入门


下一篇:驱动的DriverUnload函数