65.9K
CodeProject 正在变化。 阅读更多。
Home

傻瓜的现代网页设计指南 第一部分/12

Jacques Loubser
starIconstarIconstarIconstarIconstarIcon

5.00/5 (4投票s)

2014 年 3 月 30 日

CPOL

5分钟阅读

viewsIcon

13070

成为网页设计摇滚明星的第 1 部分（共 12 部分）。

课程介绍

欢迎来到傻瓜的现代网页设计指南。本课程共12部分，将带你从一个普通的傻瓜蜕变成网页设计摇滚巨星！

HTML的历史

Tim Berners-Lee 于1990年与CERN的同事一起，在Vannevar Bush于1945年提出的超文本基础上，开发了HTML作为万维网的发布格式。HTML通过HTTP（超文本传输协议）传输，每个页面都由其URL（通用资源定位符）唯一标识；两者都由Tim Berners-Lee创建。HTML的第一个版本于1993年正式发布。现在，由Tim Berners-Lee领导的W3C（万维网联盟）定义了HTML的技术标准，目前已发展到第5版。

网页设计入门

网页设计主要包含3种语言

  • HTML（超文本标记语言）是网页的构建块。你在网页上看到的一切都是由HTML构建的。
  • CSS（层叠样式表）是网页设计的“油漆和化妆品”。
  • JavaScript - 网络的编程语言。你可以用它做几乎任何事情。（例如，制作一个计算器）

如果你要盖一栋房子，HTML就是墙壁和屋顶，CSS是油漆，而JavaScript则是你进门时会用你的名字迎接你的声音。

基础知识

合适的工具？

你可以使用各种各样的工具进行网页设计，从免费到几百美元不等。有3种类型。

  • 所见即所得（WYSIWYG）- 是一种拖放式可视化编辑器。你很少会接触到其底层的HTML。
  • 文本/代码编辑器 - 最普通的记事本或Notepad++。你需要手动输入一切。后者具有代码折叠、语法（关键字）高亮和自动完成功能。这有时可能会令人沮丧，但使用这种方法可以让你对最终产品拥有最大的控制权。Windows上的Notepad++是免费的（如同自由言论或免费啤酒）。你可以在 这里 下载。
  • 专业编辑器 - 这包括Adobe Dreamweaver或Microsoft Visual Studio等工具。它同时包含代码编辑器和所见即所得编辑器。站点管理、FTP和高级自动完成等功能是标配。Visual Studio还有一个名为Visual Web Developer Express Edition的免费版本。一些更专业的工具可能不可用（你不会注意到），但这可能是一个不错的起点。你可以在 这里 下载。

文档格式的学习

HTML文档基于XML（可扩展标记语言），它使用人类可读的标签和属性。标签也可以嵌套（就像文件夹里的文件夹）。

标签 `some_name` 会以 `<some_name>` 打开，并以 `</some_name>` 关闭。属性是赋予特定标签的属性。如果 `some_name` 标签需要将颜色属性设置为蓝色，那么它看起来会像这样：<some_name color="blue"> </some_name>

基本的HTML结构

所有现代HTML文档都将包含此结构

<!Doctype html>  
<head> 
</head> 
<body>
</body>
</html>

现在进行解释

<!Doctype html> - 这告诉浏览器该文档是HTML。Doctype告诉它尝试读取哪个版本的HTML。要使用最新版本HTML5，我们只需这样写。HTML 4有3种不同的Doctype，但我们不必担心。

<head> - 这是加载所有非HTML内容的地方。例如脚本和CSS。此外，页面信息，如标题和作者信息也保存在这里。稍后我们将在head中加载CSS，但目前只需将其留空。

<body> - 这里是发生魔法的地方。body中的一切都会显示给用户。

body基础

对于一个好的 `<body>` 有一些基本要素是必不可少的。

标题

标题是预定义的样式（字体、颜色、大小等）。它们从 `<h1>`（最大）到 `<h6>`（最小）进行编号。可以使用CSS自定义这些预定义样式，但这将在以后讨论。

这是使用方法

<h1>Put your text here</h1>

段落

段落是预定义的样式，用于，嗯，段落。此样式也可以使用CSS进行自定义。

这是使用方法

<p>Insert paragraph text here</p>

现在轮到你了！

开玩笑的！不过，是时候制作你的第一个网页了！

打开你选择的编辑器。这里是针对记事本和Notepad++的说明。

记事本

  • 打开记事本（通过开始 -> 所有程序 -> 附件 -> 记事本）。
  • 输入以下HTML代码
  • 完成后，转到文件 -> 另存为
  • 输入文件名，后跟.html（所有HTML文档都保存为.html）。
  • 点击“保存”
  • 要稍后编辑，只需右键单击文件 -> 编辑，或右键单击 -> 打开方式 -> 记事本。

Notepad++

  • 打开Notepad++
  • 点击语言 -> H -> HTML
  • 输入以下HTML代码
  • 完成后，转到文件 -> 另存为
  • 输入一个名称并单击保存。
  • 要稍后编辑，只需右键单击文件 -> 打开方式 -> Notepad++。

代码

这是你第一个网页的代码！

<!doctype html>
<head>
<title>My First Page!</title>
</head>
<body>
<h1>My First Page! (H1)  </h1>
<h2>This is h2</h2>
<h3>This is h3</h3>
<h4>This is h4</h4>
<h5>This is h5</h5>
<h6>This is h6</h6>
<p>This is a long winding paragraph. We normally use Iorem Ipsum to fill the space. I use lipsum.com to generate my Lorem Ipsum. There is a nice write-up on their website if you are interested where it began. Just copy the next bit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mi leo, tempor et libero a, bibendum luctus quam. Etiam ut ligula ut eros ultricies luctus. Suspendisse sapien leo, pharetra quis nisl sit amet, consectetur dignissim augue. Sed facilisis semper purus vel facilisis. Ut hendrerit porta cursus. Vestibulum vitae lorem magna. Nunc congue arcu dui, sed semper lectus varius eget. Vestibulum pharetra elementum mattis. Vestibulum iaculis urna vel viverra adipiscing. Donec condimentum interdum ligula, id dapibus turpis lacinia non. Praesent in eros semper, tristique urna vitae, volutpat eros.</p>
</body>
</html>

打开网页 & 完成本部分

要查看你的网页，只需在资源管理器中双击文件即可。

就这样——你的第一个网页！别太得意，大家都会很不屑一顾的。只有那些自己做过的人才能理解你有多自豪。;)

第二部分再见！

jACQUES

历史 & 笔记

v1 - 最初发布于HTML5 & CSS3教程竞赛

注意：由于竞赛的性质，我可能无法在一周内完成两篇文章。因此，下一部分可能不是本系列的下一部分。不过，我将记录错过文章的标准，并希望在2014年7月1日前全部完成。抱歉给您带来的不便。

© . All rights reserved.