专业人员会使用的工具:
- 计算机:Windows,Mac或者Linux系统
- 文本编辑器:使用纯文本编辑器(Visual Studio Code、Atom)和混合编辑器(Dreamweaver或WebStorm)
- Web浏览器:用来测试代码。使用最多的是火狐,谷歌,Opera,Safari;Lynx是一个基于文本的终端Web浏览器,可以用来测试视力障碍用户的浏览体验。
- 图像编辑器:用来编辑网页中的图形图像,PS、XD。
- 版本控制系统:用来管理服务器上的文件,支持项目团队协作,共享代码资源。当下最流行的版本控制工具是Git,同时基于Git的代码托管服务网站Github十分流行。
- FTP工具:老师Web托管账户,逐渐被Git取代,如Cyberduck、Fetch和FileZilla。
- 自动化构建工具:用来自动完成压缩代码和运行测试等重复性任务,如Grunt、Gulp
- 模板,库,框架等等可以提高效率的工具
最短的开发工具清单:
- 安装文本编辑框:Visual Studio Code可以实时免费预览,特别好用,简单的可以记事本禾TextEdit
- 安装现代web浏览器:
- Linux系统: Firefox、Chrome、Opera、Brave。
- Windows系统: Firefox、Chrome、Opera、Internet Explorer(Windows 7 及以上版本可以安装 Internet Explorer 11)、Microsoft Edge(Windows 10 的默认浏览器,采用 Chromium 内核)、Brave。
- macOS系统: Firefox、Chrome、Opera、Safari(macOS 和 iOS 的默认浏览器)、Brave。
要至少准备两款或以上的浏览器用于测试。
3.安装本地Web服务器
第一步:做出计划
开始之前,请考虑以下问题:
- 网站的主题是什么?是狗、上海城市还是吃豆人?
- 基于所选的主题要展示哪些信息?写下标题和几段文字,构思一个用于展示的图形。
- 网站采用怎样的外观?用高阶术语说就是,选什么背景色?什么字体(正式的或卡通,粗体还是细体)?
绘制草图
接下来,拿出纸笔画出网站草图。虽然第一个简单网页能做的不多,但最好在一开始就该养成这样的习惯。画草图很有用,而且并不需要很精妙的手法。
注:即使在现实的复杂网站中,设计团队也是首先在纸上画出草稿,然后在图形编辑器中或者使用web技术做出数码模型。
web团队通常包括一个图形设计师和用户体验设计师。图形设计师的作用很明显是将网页视觉部分组合在一起。用户体验设计师则以一种更抽象的模式来定义用户和交互。
选定内容
此时可以开始组织网页上的内容了。
文本
准备好刚才撰写的标题和文字。
主题颜色
打开色彩选择器挑选心仪的颜色。选中某种颜色时,你会看到一个六位神秘代码,类似于#660066。它是一个十六进制数,用于表示颜色。将其复制并展示保存。
图像
访问 Google 图片搜索 来搜索合适的图片。
- 找到心仪的图片时,单击放大。
- 右击图片(Mac 用 Control + 点击),选择 “另存图像为...”,然后选择一个安全的位置存放这张图像。也可以复制你的浏览器地址栏上的图像地址以便后来使用。
请注意大多数网络图片(包括 Google 图片)都是受版权保护的。为了降低盗版风险,可以使用“Google 许可证过滤器”。点击“工具”按钮,然后在使用权限的选项下选择类似“标记为可再利用”的选项:
字体
要选择一种字体:
- 访问 Google Fonts 挑选心仪的字体。也可以在左侧控制栏中过滤结果。
- 选中字体后点击右上角的“加号”按钮。
- 点击页面底部面板中的 "* Family Selected" (选中*族字体)按钮( "*" 取决于所选字体数量)。
- 在弹出框中,可以看到 Google 给出的代码片段,将其复制到文本编辑器就可以使用了。
网站应该保存在何处?
对于本地网站,应将所有的相关文件放在一个单独的文件夹中,可以映射出服务端站点文件结构。
文件夹存在哪儿都可以,只要容易找到,比如桌面、用户家目录,或是系统根目录。
- 确定网站项目储存位置。在该位置下创建一个文件夹(比如web-projects)。又有网闸项目都存在一处
- 在这个文件夹里再新建一个文件夹(比如test-site,你可以自由发挥想象),来存放第一个网站。
关于大小写和空格的提示
你会注意到,文中所有的文件夹名和保存一张图片文件都使用小写字母,且没有空格。这是因为:
1.很多计算机,特别是web服务器,是对大小写敏感的。比如,如果你保存一张图片test-site/MyImage.jpg,然后再另一处以test-site/myimage.jpg访问这张图片,可能会失败。
2.浏览器、web服务器,还有编程语言处理空格的方式不一致。比如,一些系统会将包含空格的文件名其视为两个。一些服务器将会把文件名里的空格替换为“%20”(URL里空格的编码),从而使链接遭到破坏。最好使用中划线,而不是下划线来分离单词:对比my-file.html和my_file.html。
简而言之,文件名中应使用连字符。谷歌搜索引擎把连字符当作单词的分隔符,但不会识别下划线。基于此,最好在一开始就养成习惯,文件夹和文件名使用小写,用短横线而不是空格来分隔。可以避免许多问题。
网站应该使用什么结构?
下面来看看测试网站应该使用什么结构。最基本、最常见的结构是:一个主页、一个图片文件夹、一个样式表文件夹和一个脚本文件夹:
1.index.html
:这个文件一般包含主页内容,即用户第一次访问站点时看到的文本和图像。使用文本编辑器在test-site文件夹中新建index.html。
2.images
文件夹:这个文件夹包含站点中的所有图像。在test-site文件夹中新建images文件夹。
3.styles
文件夹 :这个文件夹包含站点所需样式表(比如,设置文本颜色和背景颜色)。在test-site文件夹中国新建一个styles文件夹。
4.scripts
文件夹:这个文件夹包含提供站点交互功能的JavaScript代码(比如读取数据的按钮)。在test-site文件夹中新建一个script文件夹。
注:Windows 中查看完整文件名有点小麻烦,因为 Windows 默认开启“隐藏已知文件类型扩展名”选项。在 Windows 8/10 中,可以打开资源管理器,选择“查看”选项卡,在“显示/隐藏”列中,选中“文件扩展名”复选框。其它 Windows 版本操作方法可在网上搜索。
文件路径
为使文件间正常交互,应为每个文件提供访问路径,让一个文件知道另一个文件的位置。作为演示,我们在index.html文件中插入一小段HTML,让其显示设计网站外观小节中的火狐图案。
- 将图案保存带image文件夹。
- 打开index.html文件,粘贴以下代码。现在看不懂不用担心,以后会慢慢讲解。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的测试页面</title>
</head>
<body>
<img src="" alt="我的测试页面">
</body>
</html>
3.<img scr="" alt="我的测试页面">是在页面里插入图像的HTML代码。我们需要告诉HTML的图像的位置。这张图片在imagges目录下,而images目录与index.html处于同级目录。要从index.html所处一级目录进入图片所在目录,所需的文件路径是images/image-filename.png。例如,这里的图像叫做firefox-icon.png
,所以文件路径就是 images/firefox-icon.png
。
4.在HTML代码里scr=""的双引号中插入文件路径。
5.保存HTML文件,然后使用浏览器打开(双击文件)。图案显示出来了
wen
文件路径的一些通用规则:
- 若引用的目标文件与 HTML 文件同级,只需直接使用文件名,比如
my
。 - 要引用子文件夹中的文件,要在路径前写下目录名并加一个斜杠,比如
subdirectory/my-image.jpg
。 - 若引用的目标文件位于 HTML 文件的上级,需要加上两个点。比如,如果
index.html
在test-site
下面的一个子目录而my-image.png
在test-site
目录,你可以在index.html
里使用../my-image.png
引用my-image.png
。 - 以上方法可以随意组合,比如
../subdirectory/another-subdirectory/my-image.png
。
注:Windows 文件系统使用反斜杠而不是正斜杠,比如 C:\Windows
。但与 HTML 没什么关系,即使在 Windows 上做 Web 开发,代码中仍应使用正斜杠。
大功告成。现在站点文件夹结构应该类似于: