四、Web 设计和移动应用
在我们深入研究网页的设计构成之前，我们先简要介绍一些基本知识。这是一个实践教程，指导您从头到尾完成整个过程，但首先：
构建网页的三种方法
- 使用预先制作的模板
Web 设计模板是其他人已经为您构建的设计模板。您可以自定义这些模板，使其与您希望在网站上实现的内容相匹配，并且可以找到多种不同格式的模板，如 HTML 和 Photoshop。大多数情况下，模板都与诸如 Dreamweaver、FrontPage 和 GoLive 等 HTML 编辑器完全兼容。
使用网站模板不是一种作弊的方式；即使是有经验的网页设计师也可以使用它们来快速创建网站，而且它们也是一种非常快速、简单的方法，可以在不了解网页设计或 HTML 的情况下创建网站
- 使用 HTML 编辑器
HTML 编辑器的设计方式使构建网页感觉非常像创建 Microsoft Word 文档——非常简单。但也有不利的一面；你没有太多的控制权，在很多情况下，你会发现自己越来越依赖于编辑器。
- 使用文本编辑器编写自己的 HTML 代码
通过这种方式，您可以更快地学习如何构建网页，并且可以更好地控制您所做的一切。这是我们将要使用的方法。
让我们进入我们的第一个网页。
首先，您需要了解什么是 HTML 标记。标记是一段文本，用作 web 浏览器阅读的标记；然后浏览将解释标记的含义。HTML 标记用于告诉 web 浏览器在网页上显示什么以及如何显示。标签被放置在你想要在页面上显示的文本和图像中。
有相当多的 HTML 标记可用于构建网页，每个标记都有特定的结构，以便浏览器能够将它们与标准文本区分开来。
标签往往是放在一组尖括号内的缩写或单词。例如，如果要将文本设置为粗体，则可以使用粗体标记，其外观如下所示：
本文本将加粗
段落标记也被大量使用：
这是一段>/p>
HTML 标记往往是成对的。有一个开始标记（）和一个结束标记（），两者之间的唯一区别是结束标记中包含正斜杠。
看一下这些，看看它们是否能让你更清楚：
将文本加粗
使文本斜体
告诉浏览器这是重要的文本，浏览器通常会将其放大
创建一个 HTML 表格–非常类似于标准电子表格
HTML 标记不仅用于放置文本或格式化，还可用于包括视频、动画、音频、flash 和多媒体程序。
HTML 页面通常分为两个主要部分：
头部
在页面的部分，除了页面标题外，您可以找到网页上未显示的页面信息。虽然您可能看不到这些信息，但它确实在页面的显示方式中发挥了重要作用，
身体
部分包含您在 web 浏览器中打开已完成网页时在该网页上看到的所有内容。这是文本、flash 电影、图像、视频，以及访问者可以看到的网页上包含的任何内容。这意味着我们用于格式化所有内容的所有标记也将在本节中。
请注意，这两个部分都在 HTML 页面上标记了它们的标记-和。
如果 body 标签用于创建 HTML 页面主体，head 创建页面的 head，那么我们实际上如何创建 HTML 页面？非常简单，我们使用 HTML 标记：
这是所有标签的祖父，和其他标签一样，它必须有一个开始和结束标签。所有网页，毫无例外，都必须有一个打开和关闭 HTML 标记，否则 web 浏览器无法显示该网页。您还必须具有 head 标记和 body 标记，但所有其他标记都是可选的。
因此，作为一项绝对的基本要求，每个页面必须按以下顺序显示这些标签：
您的页面标题我可以继续这个理论，但你很快就会感到厌烦，所以我想我们应该继续前进，开始正确地学习，通过建立一个网页；当你开始工作时，一切都会变得更加清晰。
步骤 1–编写代码
打开一个文本编辑器，类似 Windows 上的记事本。键入以下代码：
您的第一手手写 HTML 页面手工编码网页很容易！
我要感谢所有帮助我创作的人
这一页。
第 2 步-保存它
将文件以 HTML 文件的形式保存到桌面；在文本编辑器中使用“另存为”功能并将其命名为 webpage.html，或者如果您想将其命名为其他内容，请执行此操作，但执行此操作时请遵循以下规则：
- 您的网页名称中不能有空格；例如，不接受 web page.html
- 以.html 或.htm 结束文件。这样，计算机将知道它正在处理一个网页，并将使用网页浏览器查看它。
- 请勿在名称中包含$、^、%或&等符号，仅包含标准数字和字母
- 如果使用记事本，请将文件另存为 UTF-8
第三步-查看您的页面
在此阶段，您可以双击该页面以打开它，也可以打开 web 浏览器，单击“文件”菜单，选择“打开文件”，然后查找您的文件。您的页面将打开，这样您就可以确切地看到它现在的样子。如果没有看到任何内容，请返回并确保键入的代码正确。
这是您构建的第一个页面，现在我们可以继续构建一个完整的网站。
一个网站只不过是一堆 HTML 页面，就像你刚刚构建的一样，所有页面都分组在一起，并使用链接进行连接。有一个标签，你可以用它来做这件事，最基本的是，它看起来像这样：
这是一个带有目的地的链接标签，即添加了网站名称：
每个人在使用互联网时都会使用链接。链接是使用链接标签将您从一个页面带到另一个页面的内容，这是 HTML 中最重要的标签之一，因为它将所有内容（包括整个互联网）链接并互连在一起。
在我们前面的示例中，链接标签指向一个名为 www.killersites.com 的网站，您可以看到网页上的文本会显示“Go to killersites.com”。你可以使用一个链接，将一个人带到你想要的任何网站——只要用你想要的任何网址替换 killersites.com 即可。
与任何其他标记一样，链接标记也有开始标记和结束标记，但它们比我们到目前为止看到的标记要复杂一点——但并不复杂到你无法掌握它们的窍门！
您可能还注意到，链接标记在网站地址之前包含文本。该文本是
http://
这样做的目的是告诉浏览器链接指向一个网页；链接可以在一天结束时指向任何东西，浏览器需要知道它是什么。
当你将网站上的一个网页链接到另一个网页时，你可以使用两种地址中的一种——完整的绝对地址或部分的相对地址。绝对 URL（地址）是可以在 internet 上任何位置找到的网页的整个网址。例如，假设您有一个名为 contact.html 的页面，它位于网站的根目录下。为此，我们假设您的网站名为www.myStore.com。绝对 URL 应为：
'http://www.myStore.com/contact.html'
好的，让我们退一步，看看根是什么。任何网站的根都是基础，是网站的起点。与计算机上的其他文件一样，所有构成网站的文件（包括图像、页面等）都被组织并保存到文件夹中。web 主机在服务器上为您提供空间来保存所有文件，以便将它们保存在一起。此空间称为网站的根。
就互联网而言，该空间中的所有文件，无论它们是什么，都可以通过您的域名和项目名称进行访问。例如，您在根空间中保存了两个文件：
Index.html
Contact.html
您有一个名为“products”的文件夹，该文件夹中有一大堆页面；其中一个叫做“bookseces.html”。您决定将所有“产品”HTML 页面放入您的“产品”文件夹中，以便更好地组织内容。
那么，bookcases.html 网页的绝对 URL 是什么？如果您的域名是…myStore.com，它将是：
http://www.myStore.com/products/bookcases.html
花点时间考虑一下，它会有意义的。
相对 URL
这些是相对于放置链接的页面的部分地址。例如，如果您正在从 index.html 链接到 bookcases.html，则相对地址为：
产品/书架.html
链接标签看起来像：
您所做的只是告诉浏览器我们要链接到名为“产品”的文件夹中的 HTML 页面
花点时间在你的网站上摆弄文件夹和链接，一切都会好起来的。这一点很重要，因为如果你不这样做，事情就不会加载。
让我们再举一个例子；我们将从 index.html 链接到 contact.html：
因为两个页面都在同一个根级别上，所以我们只需要添加 html 文件名。
这是最基本的理论。别担心，我们还有很长的路要走！在我们继续之前，我们将看一看你需要采取的 10 个步骤来建立你的网站，并使它成为现实
- 定义你的网站目的是什么
当你开始建立一个网站时，你需要了解你和网站的目标。这些目标将影响您在构建网站时所做的选择，并最终决定网站的成功与否。
是的，这听起来很明显，但你会惊讶于没有任何目标的网站数量。结果如何？一个看起来乱七八糟的网络商店，没有真正的组织，几乎不可能维护。
假设你想建立一个电子商务网站来销售产品；作为一个网页设计师，你必须考虑一下，你需要一个购物车系统来订购吗？您需要包括付款处理吗？至少从一开始，你的网站上会有多少产品？
这是一个单一的例子；我想说的一点是，你需要定义你网站的目的，这样你就可以用正确的工具和人员来准备和构建它。
- 画一个简单的网站结构图
“查看”网站的最佳方法之一是绘制一个简单的图表。这里你不需要什么特别的东西；一个简单的方框图，每个页面有一个方框，通过线条连接，以显示它们将如何链接。通常，像这样的图表遵循金字塔结构，从上到下显示网站。
- 写出网站文本
在您开始考虑编写 HTML 之前，请使用文字处理程序（如 MS Office）来编写要包含在您的网站上的文本。这有助于您了解设计过程。
您还应该确保所有文本在进入网页之前都已完成–在 HTML 页面上更正内容并不容易！
- 选择基本布局–一个布局，所有页面
一旦有了图表和文本，现在就可以选择基本布局了。你可能会在这里发疯，选择一些非常时髦的东西，但通常情况下，标准布局效果最好
- 选择你的颜色和字体
接下来，考虑一下您将使用的基本颜色和字体。尽量保持它与你网站的风格和基调相匹配。例如，如果你有一家五金店，你不会真的想要粉色，而黑色对花店来说并不合适！在开始创建页面之前确定您的样式，否则您可能会一次又一次地重做页面。
稍后，我们将研究 CSS，这是一种使网站样式变得非常简单的方法。
- 建立你的网站
现在，您可以创建 web 页面了。在前五个步骤中完成所有操作，并将所有网页链接在一起。现在你可以做一些练习，试着用几页纸建立自己的小网站。
熟能生巧！
- 选择一个域名
当你的网站建成后，下一步就是把它放到互联网广告上。要做到这一点，你需要一个域名。每个网站都必须有一个这样的名字，你选择的名字可以决定你的网站是多么容易找到。以下是选择好域名的几点建议：
- 这个名字应该给你一个关于这个网站的线索。搜索引擎喜欢这些，访问者也会发现你更容易。例如，如果你正在构建一个硬件站点，你不会想要一个类似“prettypinkUnicorn”的名字。它不会告诉你这个网站是关于什么的，而像“折扣软件”这样的名字会告诉你。
- 搜索引擎会查看网站的许多不同部分，以确定其内容。域名是一个关键的域名，搜索引擎在域名中寻找关键字，帮助搜索机器人将你的网站归入一个类别。
-
您的姓名不必包括您的企业名称，只需清晰易记即可。
-
注册你的域名
这并不像你想象的那么容易，因为大多数好名字都不见了。忘记有一个单一的世界名字，因为他们是第一个离开的；机会是，你将需要通过一些，以找到一个还没有消失。
在过去，你只有.com 或.co.uk 网站域名，因为像.org 和.net 这样的域名是为特殊用途保留的。这一切都改变了，现在有大量的域扩展可供选择。
就搜索引擎而言，无论你的域名有什么扩展，都没有区别。
有人说，你应该先注册域名，然后再建立网站，但这只有在域名对设计有影响时才算。你怎么做取决于你自己。
确定您选择的域名是否被攻占的最快方法是将其输入搜索引擎，然后查看出现了什么。否则，请转到您选择的域注册器，查看可用的内容。
- 找到你的托管公司
如今，网站托管并不昂贵，与过去相比已经相去甚远。现在，根据您的需求，您可以获得成本很低甚至零成本的主机，甚至可以获得昂贵的软件包—您的选择。
网站托管的定价有很多因素：
- 流量——你的网站获得的流量越多，你每月花费的费用就越高，但如果这对你有任何影响，你需要有一个非常受欢迎的网站，尤其是因为你是所有这些的新手
- 额外的服务和功能——托管提供商提供各种各样的功能和服务，其中许多您根本不需要。在选择时要非常小心–您可以在将来随时升级。
选择最适合你的网站，无论花费多少。
- 上传你的网站
你的网站已经创建，你已经支付并注册了你的域名，你已经有了一个托管计划。现在是时候把你的网站上传到你选择的主机服务器上了。您的提供商将为您提供执行此操作所需的所有帮助。
快速提示
- 保持你的网页小
-
保持
标题标签清晰准确
-
保持你的文字段落小
- 将您的所有联系信息放在您所有页面的同一位置
- 保持每页的结构和外观一致
- 确保你的网站有一个主页按钮，让你的用户轻松回到起点
- 始终在链接下方加下划线，并且永远不要使用 CSS 删除下划线–大多数人倾向于认为所有带下划线的文本都是链接
- 在所有页面上都有您的网站徽标，并将其链接到主页
现在你知道了网站建设的全部内容，让我们开始学习 CSS。层叠样式表是使您的 web 设计看起来专业的最佳方式。
层叠样式表（CSS）是 HTML 的姊妹语言，HTML 是网页设计中的一个关键工具，它使网页的样式设计变得更加容易。前面我们看了 HTML 标记，我们将使用它在网页上加粗一些单词：
文本加粗
这很好，它工作得很好，但是如果你在网页上加粗了很多单词，现在你想让它们都加下划线呢？您需要转到页面的每个单独部分，并更改每个部分的标记。
还有另一个缺点。如果要使上面的文本加粗，请将字体更改为 Verdana 样式并将颜色更改为红色，则需要在文本周围包装大量代码：
这是文本
这太罗嗦了，它只会让你的 HTML 代码看起来乱七八糟。当您使用 CSS 时，您可以在其他地方创建自定义样式，设置所有必要的属性，命名它并在 HTML 中标记它以应用这些属性：
我的 CSS 样式文本
在页面顶部的开始和结束头部标记之间，是定义新样式的 CSS 代码：
版权属于：月萌API www.moonapi.com，转载请注明出处
