本帖最后由 a1353591768 于 2018-10-31 21:13 编辑

上次我写了一篇自己的一个编程的学习经验分享吧，但是现在我发现我说的都是理论的东西，今天我又想给极客朋友们分享一下实际应用的编程上手教程。下面的内容纯属我自己的一点点想法，内容我认为非常简单，希望大家不会觉得比较难吧，如果觉得有难度希望你在下方评论写出一下，下次我会出更简单的。我写这个文章的目的就是和大家进行分享，同时也当做日记，希望以后如果有朋友问我如何上手或者亲戚家的孩子想学习的我也可以把这篇内容给他们看。废话不多说，下面进入正题。

上篇理论知识分享链接：http://www.geekfans.com/thread-85843-1-1.html

今天的内容是简单的网页制作，首先给大家看成品，下面我会直接放上代码，接下来我教你们怎么用。

下面的斜体红字就是这个网页的代码，你不需要任何工具和软件，接下来我就教大家如何看到这个代码做出来的网页是什么样的效果。

1.打开Windows自带的记事本(只要记事本，不要Word文档之类的办公软件)。

2.复制下方代码，斜体红字全部都要复制下来，从第一行直接复制到最后一行，全部复制，一个都不要落下。

3.粘贴到记事本中

4.点击左上角的“文件”→“另存为”

5.这里就比较难了，看下面的截图，红色方框里的保存类型选择“所有文件”

{AXN]C130B%{EWFO8~E`ELR.png (121.42 KB, 下载次数: 43)

2018-10-31 20:09 上传

6.蓝色方框里的文件名后缀一定要把原本的.txt改成.html；文件名建议用英文，通常我习惯是用index.html，这样浏览器可以直接通过域名路径进行解析(涉及到URL，比较有难度不适合新手，本文不细说)。

逆战9月新版本-摩天大楼全景地图

html,body,iframe

{

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

padding: 0;

width: 100%;

height: 100%;

}

iframe

{

width:99.6%;

height:100%;

}

保存完成后，接下来我们直接双击打开，此时默认应该会使用浏览器打开。如果没有用浏览器打开，你就右键选择打开方式，选择用浏览器打开就可以了。也可以直接拖拽到浏览器上面就可以打开了！

打开之后，你在浏览器中应该会看到下面图中这样的效果。

你可以看到，这个网页可以通过鼠标左右旋转视角，点击下面的导航图标也可以进行切换场景，同时网页中还会有背景音乐和人声解说。用手机打开这个网页还可以用手机的陀螺仪来旋转控制视角，可以看到这个页面的效果非常好。

打开效果.jpg (81.22 KB, 下载次数: 41)

2018-10-31 20:19 上传

看完了效果后，下面进入正题，我教你们如何使用DW软件来制作出这样的一个页面。

在开始之前，我要说明一下。接下来的内容我认为非常简单，在网页中只用到一个控件就可以做出这种效果的网页。如果哪里不懂了，在下方评论中写出来。

DW软件全称叫做Dreamweaver，可以复制这个英文名字到百度去寻找下载。是Adobe旗下的软件，好像是试用30天还是7天我记不清了。咱们这里是进行学习，所以用试用版的就行了，先试用一下就可以，等试用期过了可以卸载掉重新下载安装再试用一次。或者是百度找一找，你们懂的。

我安装的这个版本是Adobe官网下载的2018版本，其他版本的布局和样式可能不太一样，但是操作方式类似。

打开软件后，初始的界面是这样的。可以看到什么也没有，空白的一片。在设置里面可以设置主题颜色，我喜欢用黑色的主题，所以无论什么软件我都会首先调到黑色，DW这个软件我记不清一开始有没有设置过颜色，但是颜色的差异只是颜色，按钮布局位置不会变。

界面.jpg (18.71 KB, 下载次数: 30)

2018-10-31 20:26 上传

打开软件后，和其他Adobe软件的操作方法基本相同。我们在下面窗口中双击就是打开，Ctrl+N就是新建。或者通过上方的菜单来操作，点击文件→新建，会弹出来下面的一个窗口，直接选择创建就可以，什么都不要进行设置。

新建.jpg (31.25 KB, 下载次数: 31)

2018-10-31 20:26 上传

新建完成后，可以看到出现了下面这种代码。首先需要做的就是保存，做网站也好，写文档也好一定要养成随时保存的习惯，用计算机来工作就是要习惯保存。因为计算机是不会主动帮助我们保存的，如果没保存就断电，或者遇到软件崩溃、闪退之类的事就会丢失资料。保存完成后，就可以继续进行了。默认给出的代码就是HTML5的默认框架，不论做什么网站，只要是HTML网页，就一定离不开这些代码。换句话说，没有这些基本代码HTML就无法运行。这些代码我们不要去删除，也不要修改。

初始代码.jpg (22.85 KB, 下载次数: 33)

2018-10-31 20:26 上传

写代码对于新手朋友们来说真的是太麻烦了，也很容易让人难理解，记不清。所以我才会用DW软件来教大家上手，DW可以自动帮你生成很多代码，非常非常方便，需要我们手工打字的地方非常少。

细心的朋友现在会发现，屏幕中的代码是用<>括号来括起来的，同时是成对出现的。没错，我们接下来写的代码重点就是在一对代码中。

点击右面窗口中的插入按钮，然后会弹出下图这样一个东西，同时左侧的光标会自动移动到

中。我们可以先看一下这里面都有什么，直接往下翻，找到IFRAME，点击一次会出现下面一对iframe标签，左侧的叫做开始标记，不需要特意记住，只需要简单理解一下就可以。右侧的叫做结束标记，有开始就有结束嘛，HTML规定了在iframe的前面加一个斜线作为结束标记的区分，所以我才说HTML简单呢。

插入.jpg (26.8 KB, 下载次数: 33)

2018-10-31 20:26 上传

在HTML5中，有很多标签可以没有结束标记，iframe就是一个。所以我们可以直接删掉的结束标记，也可以进行保留，这里没有关系。在开始标记中，加入一个src，src就是可以理解成超链接的意思。我把代码直接放到下面了，可以进行复制。

接下来就可以保存，然后找到你刚刚保存的文件用浏览器打开。此时网页中就已经会有了我们的全景展示了，但是你会发现位置和大小不是我们想要的。

在HTML中，设置大小、尺寸、颜色、字体等这些东西叫做样式，我们需要通过设置样式来进行调整。

那么如何设置样式呢？样式有两种方式设置，第一种就是像我这个网页一样，直接在HTML文件中进行设置，第二种就是引用CSS文件。这两种方法有利有弊，第一种方法直接设置的优点就是做的时候很方便，文件不容易丢失。但缺点就是内容多了之后代码会非常冗长，所以正式应用中基本不会用到第一种方法。第二种方法用的多，但是学习成本比较高，比较难。所以我们先从简单的开始。

在

的外面我们可以设置样式，通常我习惯放在下方，下面的红色字体就是设置样式了。现在大家可以直接复制这些代码放到上面，并且和之前在记事本中写出的代码进行对比，同时在浏览器中随时刷新(保存后)。设置成功后就可以全屏了！

html,body,iframe

{

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

padding: 0;

width: 100%;

height: 100%;

}

iframe

{

width:99.6%;

height:100%;

}

最后做出的代码是下图中这样，此时就可以正常运行了。

摩天大楼全景图代码.jpg (30.18 KB, 下载次数: 40)

2018-10-31 20:26 上传

HTML中可以加注释，下面我把加入注释的代码复制过来，大家可以看一下每一个代码是什么意思。看一下就好，对于新手来说比较难理解，大家可以把这个复制到DW软件中进行参考，这样你就知道我们写这么多代码是在做什么了。

逆战9月新版本-摩天大楼全景地图

html,body,iframe

{

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

padding: 0;

width: 100%;

height: 100%;

}

iframe

{

width:99.6%;

height:100%;

}

到这里今天的内容就是这些了，我写这篇文章的目的是希望大家可以通过简单的学习和照着做来对编程感兴趣。这篇内容非常简单，虽然最终效果不是我们自己一点一点写出来，而是引用的(一点点写出来代码非常多，一篇文章也说不完，大家也很难理解)。但还是希望可以让大家感受到，原来HTML可以通过编程代码来做出这样的全景展示效果。只是自己的一个学习经验和一个简单的案例分享吧，希望可以帮助到大家！

本文中使用的网页案例地址：http://www.te5.com/nz/zt/mt.html

大家可以打开后，右键查看源代码来和本文中的代码进行一个对比参考。

这篇文章可能排版和内容会不太顺畅，因为我就是想到什么就写出什么的，可能会有些啰嗦，希望大家理解！