标签：文件夹 Web 网页 入门 文件 网站 helloworld html png
目录安装基础软件
- 计算机
- WebStorm
- Web浏览器：Microsoft Edge
- 图像编辑器
- 版本控制系统：Gitee - 基于 Git 的代码托管和研发协作平台
- 自动化构建工具：用来自动完成压缩代码和运行测试等重复性任务（使用WebStorm中的插件：Gradle）
设计网站外观
做出计划
- 网站主题是什么？
- 基于所选主题要展示哪些信息？
- 网站采用怎样的外观？
注：复杂项目需要更详细的指引，包括颜色、字体、间距、编写规范等等。亦称为设计指南、设计系统、品牌手册
绘制草图
接下来，拿出纸笔画出网站草图。虽然第一个简单网页能做的不多，但最好在一开始就该养成这样的习惯。画草图很有用，而且并不需要梵高的手法。
选定内容
文本
包括标题和文字
主题颜色
色彩选择器：一个好用的调色板 | 颜色选择器 - Codeeeee 在线工具
色彩提取器：安装 PowerToys | Microsoft Docs
图像
- 找到心仪的图片时，单击放大。
- 右击图片，选择 “另存图像为...”，然后选择一个安全的位置存放这张图像。也可以复制你的浏览器地址栏上的图像地址以便后来使用。
请注意大多数网络图片（包括 Google 图片）都是受版权保护的。为了降低盗版风险，可以使用“Google 许可证过滤器”。点击“工具”按钮，然后在使用权限的选项下选择类似“启用CC授权”的选项：
字体
- 打开右侧边栏可现实选中的字体家族。
- 可通过 Categories（类别）、Languages（语言）、Font Properties（字体属性）过滤想要的字体。
- 在列出的字体风格列表中，选择合适的粗细、是否倾斜等信息。
- 在右侧边栏中可以看到 Google 给出的代码片段，将其复制到文本编辑器就可以使用了。
处理文件
网站由文本、代码、样式表、媒体内容、等多种文件组成。构建站点时要确保文件夹结构合理，文件之间交互通畅，没有明显错问，然后再上传至服务器。
网站应保存在何处？
对于本地网站，应将所有相关文件放在一个单独文件夹内，可以映射出服务器端站点文件结构。
- 确定网站项目储存位置。在该位置下创建一个文件夹（比如
web-projects）。所有网站项目都存在一处。 - 在这个文件夹里再新建一个文件夹（比如
test-site，），来存放第一个网站。
关于大小写和空格的提示
文中所有的文件夹名和文件都使用小写字母，且没有空格。
- 很多计算机，特别是 Web 服务器，是对大小写敏感的。
- 浏览器、Web 服务器，还有编程语言处理空格的方式不一致。比如，一些系统会将包含空格的文件名其视为两个。一些服务器将会把文件名里的空格替换为 “%20”（URI 里空格的编码），从而使链接遭到破坏。
- 最好使用中划线，而不是下划线来分离单词：对比
my-file.html和my_file.html。谷歌搜索引擎把连字符当作单词的分隔符， 但不会识别下划线。基于此，最好在一开始就养成习惯，文件夹和文件名使用小写，用短横线而不是空格来分隔。可以避免许多问题。
网站应该使用什么结构？
最基本的结构：主页、图片文件夹、样式表文件夹和脚本文件夹。
- 主页
index.html：这个文件一般包含主页内容，即用户第一次访问站点时看到的文本和图像。使用文本编辑器在test-site文件夹中新建index.html。 - 图片文件夹
images：这个文件夹包含站点中的所有图像。在test-site文件夹中新建images文件夹。 - 样式表文件夹
styles：这个文件夹包含站点所需样式表（比如，设置文本颜色和背景颜色）。在test-site文件夹中新建一个styles文件夹。 - 脚本文件夹
scripts：这个文件夹包含提供站点交互功能的JavaScript代码（比如读取数据的按钮）。在test-site文件夹中新建一个scripts文件夹。
文件路径
为使文件间正常交互，应为每个文件提供访问路径，让一个文件知道另一个文件的位置。在index.html 文件中插入一小段 HTML，让其显示设计网站外观小节中的Hello World图案。
-
将Hello World图案保存到
images文件夹。 -
打开
index.html文件，粘贴以下代码。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我的测试页面</title> </head> <body> <img src="" alt="我的测试页面"> </body> </html> -
<img src="" alt="我的测试页面">是在页面里插入图像的 HTML 代码。我们需要告诉 HTML 图像的位置。这张图片在 images 目录下_，_而 images 目录与index.html处于同级目录。要从index.html所处一级目录进入图片所在目录。例如，这里的图像叫做helloworld.png，所以文件路径就是images/helloworld.png。 -
在 HTML 代码里
src＝""的双引号中插入文件路径。 -
保存 HTML 文件，然后使用浏览器打开（双击文件）。
文件路径的一些通用规则：
-
若引用的目标文件与HTML文件同级，只需直接使用文件名，比如
helloworld.png
-
要引用子文件夹中的文件，要在路径前写下目录名并加上一个斜杠，比如
images/helloworld.png。
注：Windows 文件系统使用反斜杠而不是正斜杠，比如 C:\Windows 。但与 HTML 没什么关系，即使在 Windows 上做 Web 开发，代码中仍应使用正斜杠。
-
若引用的目标文件夹位于HTML的上级，需要加上两个点。比如，如果
index.html在test-site下面的一个子目录html中，而helloworld.png在test-site目录，你可以在index.html里使用../``helloworld.png引用helloworld.png。
-
以上方法可以随意组合，比如
../subdirectory/another-subdirectory/helloworld.png。
标签：文件夹,Web,网页,入门,文件,网站,helloworld,html,png 来源： https://www.cnblogs.com/WMX-0121/p/15964179.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。