安装基础软件
- 计算机
- 文本编辑器,可以是 纯文本编辑器Visual Studio Code、Sublime Text、Atom、Brackets、GNU Emacs 或 VIM;也可以是混合编辑器 Dreamweaver 或 WebStorm。
- Web浏览器,用来测试代码。有Firefox,Chrome,Opera, Safari,Internet Explorer 和 Microsoft Edge。
- 图像编辑器,像 GIMP、Paint.NET、Photoshop 或者 XD,用来编辑网页中的图形图像。
- 版本控制系统,用来管理服务器上文件,支持项目团队协作,共享代码资源,以及避免编辑冲突。当今最流行的版本控制工具是 Git,同时 GitHub 以及 GitLab 等基于 Git 的代码托管服务网站也非常流行。
- FTP 工具 ,老式 Web 托管账户用来管理服务器上文件(正在被 Git 迅速取代)。有很多 (S)FTP 工具软件,比如 Cyberduck、Fetch 和 FileZilla。???
- 自动化构建工具 , 用来自动完成压缩代码和运行测试等重复性任务,比如 Grunt 或 Gulp。???
- 本地Web服务器 ???
设计网页外观
1、 做出计划,考虑以下问题:网站的主题是什么?基于所选主题要展示哪些信息?网站采用怎样的外观?
2、 绘制草图
3、 选定内容
- 文本
- 主题颜色:使用色彩选择器??
- 图像:用Google搜索,注意大多数网络图片(包括 Google 图片)都是受版权保护的。为了降低盗版风险,可以使用“Google 许可证过滤器”。点击“工具”按钮,然后在使用权限的选项下选择类似“标记为可再利用”的选项:
- 字体:
- 访问 Google Fonts 。
- 打开右侧边栏可现实选中的字体家族。可通过 Categories(类别)、Languages(语言)、Font Properties(字体属性)过滤想要的字体。
- 在列出的字体风格列表中,选择合适的粗细、是否倾斜等信息。
- 在右侧边栏中可以看到 Google 给出的代码片段,将其复制到文本编辑器就可以使用了。
上传或保存文件
网站应该保存在何处?
对于本地网站,应将所有相关文件放在一个单独文件夹中,可以映射出服务器端站点文件结构。文件夹存在哪儿都可以,只要容易找到,比如桌面、用户家目录,或是系统根目录。
- 确定网站项目储存位置。在该位置下创建一个文件夹(比如 web-projects)。所有网站项目都存在一处。
- 在这个文件夹里再新建一个文件夹(比如 test-site,读者可自由发挥想象),来存放第一个网站
网站应该使用什么结构?
下面来看看测试网站应该使用什么结构。最基本、最常见的结构是:一个主页、一个图片文件夹、一个样式表文件夹和一个脚本文件夹:
- index.html :这个文件一般包含主页内容,即用户第一次访问站点时看到的文本和图像。使用文本编辑器在 test-site 文件夹中新建
- index.html。 images 文件夹 :这个文件夹包含站点中的所有图像。在 test-site 文件夹中新建 images 文件夹。
- styles 文件夹 :这个文件夹包含站点所需样式表(比如,设置文本颜色和背景颜色)。在 test-site 文件夹中新建一个 styles文件夹。
- scripts 文件夹 :这个文件夹包含提供站点交互功能的 JavaScript 代码(比如读取数据的按钮)。在
test-site 文件夹中新建一个 scripts 文件夹。
HTML文档详解
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试页面</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="测试图片">
</body>
</html>
- <!DOCTYPE html> — 文档类型。混沌初分,HTML 尚在襁褓(大约是 1991/92 年)之时,DOCTYPE 用来链接一些 HTML 编写守则,比如自动查错之类。DOCTYPE 在当今作用有限,仅用于保证文档正常读取。现在知道这些就足够了。
- <html></html>— <html> 元素。该元素包含整个页面的内容,也称作根元素。
- <head></head> — <head>元素。该元素的内容对用户不可见,其中包含例如面向搜索引擎的搜索关键字(keywords)、页面描述、CSS 样式表和字符编码声明等。
- — 该元素指定文档使用 UTF-8 字符编码 ,UTF-8 包括绝大多数人类已知语言的字符。基本上 UTF-8 可以处理任何文本内容,还可以避免以后出现某些问题,没有理由再选用其他编码。
- <title></title> — <title> 元素。该元素设置页面的标题,显示在浏览器标签页上,也作为收藏网页的描述文字。
- <body></body> — <body> 元素。该元素包含期望让用户在访问页面时看到的内容,包括文本、图像、视频、游戏、可播放的音轨或其他内容。
总结
- 不懂FTP工具、自动化构建工具、本地Web服务器是什么
- github怎么上传工程?需要翻墙吗?