如何开发网页

什么是网站？

网站的定义是：网站是指在因特网上根据一定的规则，使用HTM等工具制作的用于展示特定内容相关网页的集合。

这个解释听起来有点懵，网站简单来说就是软件，建设网站也是软件开发的一种。我们每天都会接触各种类型的网站，看新闻会上门户网，查资料会上搜索引擎网站（百度、搜狗、360等），买东西会上购物类的网站（淘宝、京东）。五花八门的网站会让网站开发新手产生网站容易制作的错觉，但事实并不只是这种情况，网站建设是一个艰苦卓越的过程需要考虑到完整性、目的性、扩展性、安全性，特别是商业网站要求更加苛刻。

网站B/S结构和C/S结构是什么?

网站软件开发包括C/S和B/S两种体系结构，C/S是大家所熟悉的客户端和服务器端结构，常用的QQ就是这种结构，需要下载专门的客户端软件才能使用。

B/S结构是浏览器和服务器结构，访问网站只需要一个浏览器就可以，例如IE或fiefox，我们平常说的网站主要说的指B/S结构的网站。

网站B/S结构工作流程是什么？

1、在浏览器地址输入url（平常咱们所说的网址）访问web服务器（可以简单理解网站）。

2、Web服务器根据客户请求，会以HTML等形式返回客户端浏览器。

3、浏览器再把内容（HTML等）翻译给网站访客看。

网站开发不能简单理解为网页制作，网页制作只是网站（B/S结构）中一种形式，主要以内容发布和产品展示为主，开发容易，对美工要求比较高，一些企业网站。而我们平常说网站（B/S结构）开发是指用户和系统交互为主，注重业务处理，对程序员思维逻辑要求比较高，比如说论坛、电子商务系统、内容管理系统（cms）、订单管理系统等。

所以说我们平常说网站开发不是简单做几个页面而是强调系统与用户的交互。

作者：笨笨

做好响应式网站的“四不要”：

1.不要优先为桌面版设计开发者通常会犯的一个常见错误，他们设计网站时优先考虑桌面版，因为在这些人眼中，将基于桌面版的网站转变为针对其他设备的响应式web设计是件很轻松愉快的事情。但是，这个发生在计划规划阶段的错误本身会变成一个非常巨大的问题。甚至会造成返工，当然，大量的错误也会蔓延出来。

2.不应隐藏内容响应式设计通常会有更少的空间展示图片和内容，但是这并不意味着你的内容应当被忽略。你不得不采取一种方式重新安排内容，使其能够保证易读性。这个比较容易实现，可以通过创建导航链接并且使用锚，是用户在一个页面中能看到他们一直在寻找的内容。那些通过CSS布局控制内容隐藏的应当明白，这些内容依然会被加载，因此，你通过为用户提供完整的观看体验也没什么大不了。简单而言，用户不应该由于他们所使用的设备而遭受开发者的“惩罚”。

3.不要忽视页面的加载时间随着宽带的普及，网页开发者开始习惯在页面上大量的使用相对来说较大的资源。然而，当我们使用手机时，我们的用户使用的是较慢的2G和3G网络。同样的，那些保持minf国际的用户，他们是按使用的带宽量来付费的。一个页面在台式机上很快的加载进来，但是，在手机上加载一个页面会花费很长时间或者去使用额外的、昂贵的带宽。更糟糕的是，当用户被迫去等待页面加载时，即使是几秒钟，他们会离开这个页面，同时你就会失去了你的流量。4.不找经验浅的人做前端开发web前端技术属于门槛低，但是水很深的职业，所以设计师也会做前端，有人自学两天也可以做前端，但是不要忽视了web前端是以细节取胜的，好坏的分辨全在细节，包括合理的布局，这个对做效果尤其重要，规范的css代码，这个对兼容性有很大影响。特别是响应式网站制作，需要有扎实的基本功和多年的经验。

做好响应式网站的五个建议：

1.计划与往常一样，计划总是要放在第一优先级的。一旦你在纸上开始解决你的设计难题，你就已经准备好建立你的站点了。2.充分利用好原型软件推荐使用Adobe Edge Reflow，它能让你使用媒体查询，在程序内设置断点并设计适配桌面电脑、平板电脑和手机的布局。然后，你可以将CSS复制到另一个像Adobe Dreamweaver或者其他HTML编辑器来进一步优化你的设计。

3.首先考虑一个移动端策略如果你是第一次创建手机网站，接着就可以扩大规模，在平板和桌面电脑上设计网页了。这三个平台的重点都在网页logo和文字上。如果文字能在移动设备上能读得很轻松，然后你在平板和台式机平台上就不会有什么问题了。4.谨慎使用导航如果你的站点只有两到三个导航按钮，你可以把这些按钮包含在屏幕上一个简单的菜单里。如果有更多的菜单元素，你可能想考虑创建一个有下拉菜单项的单个图标。

5.先大致把网站创建起来，整体感受下一些像Jiffy软件之类的公司，会首先创建整个页面布局，然后才开始写代码，这样能保证他们做到客户想要的外观和感觉。当创建一个移动端的页面时，非常重要的一点是把按钮设计足够指尖能覆盖住那么大，另外一点就是使界面保持既简洁又实用的状态。许多设计者倾向于往移动端界面添加太多的元素，这会导致设计和实用性的问题。当有疑问时，保持简洁的页面就好了。

网页开发者工具之 Elements

前言

写这篇文章的目的主要是为了帮助前端小白，学习使用浏览器自带的F12网页开发者工具，来快速定位调试分析问题、解决问题。当然这仅是作者的个人学习心得，有不足之处欢迎大家指点。由于篇幅有限，这篇文章仅介绍Elements。若觉得不错请关注作者的后续更新。

如何在F12工具中定位元素

这里拿我的博客作为网页、用Chrome谷歌浏览器作为例子。打开网页，按下键盘上的F12键。点击Elements栏，选择body元素，如下图：

1.左边用半透明蓝色覆盖表示被选区域，仔细看左下角还有个标志显示元素名称和宽高。

2.中部内容就是Elements，即页面元素。看图可以发现我们选择了body元素

3.右侧区域为Style，即css样式,显示的是被选元素对应的css。这样就非常方便我们调试样式。

这里我们假设有个需求，需要右边头像的元素代码和css演示。我们不需要右键查看源代码（早期有些教程会使用这个方法）。

可以使用F12工具的左上角的指针工具

1.鼠标左键单击指针工具，单击后工具会变为蓝色状态

2.移动鼠标到头像上，你会发现自动出现蓝色半透明选框。会显示元素标签和宽高

3.点击确认后，你会发现中部Elements会自动定位到头像代码，右边Style也会自动定位到头像的css样式

4.在中部选择元素后，可以右键复制代码。

5.在左侧的Style面板中，点击css右边的css文件名也可以定位到个css文件中的具体位置

但是有些特殊的样式需要鼠标到达某一特殊位置的时候才会触发，我们再去点指针的时候就会回到原位。（比如博客右侧的小埋，需要鼠标hover才能触发）。

我们可以将鼠标移上去后，按快捷键Ctrl+Shift+C直接使用指针工具。就可以获取这些特殊样式的css代码

还有些时候，我们需要搜索页面中的某些内容。在中部Elements中使用Ctrl+F打开搜索框：

如图我们搜索“一个好”就得到的想要的元素位置。

F12工具中的盒子模型

还有个东西这里提一下，选择任意一个元素，在右边的Style面板下拉倒最下面，都可以看到我们的盒子模型(网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模式。)

这里可以看出padding的值

这个是margin值

如何在F12工具中直接修改页面

比如我们要修改下面这个标题

直接在Element面板下，双击修改其文本的内容（这里改成余额好多钱，是不是以后都不能相信截图了）

接下来尝试修改其css，我们选择修改其字体颜色和大小

直接在Style面板下修改：颜色改成红色，字体调大至32px。效果如下

我们也可以直接新加css元素，比如加个border(边框)。

移动端开发

若是要调试移动端页面怎么办？

我们只要点击指标工具右边的移动端工具就行，其他的和pc端一样。效果如下：

最后的也是最重要的事

不要在他人电脑上不使用浏览器的记住密码功能！不使用浏览器的记住密码功能！不使用浏览器的记住密码功能！不使用浏览器的记住密码功能！

为什么？这里作者来举个有道云笔记的栗子：

这是作者使用浏览器保密码的有道云笔记的登录页面，你可以看到浏览器默认给你填充好了账号和密码。密码使用···号表示并不可见。

但是，我们打开F12工具:

用指针工具选择密码框。

只要将其input的输入框的type=”password”值改为type=”text”，你的密码就暴露无遗

希望这篇文章能给你带来知识和乐趣，喜欢作者的文章可以点击右上角关注哦()

前面，学习了如何从零开始编写一个网站的程序，并部署在本地Web服务器，然后部署到云服务器上，通过域名进行访问。

基本上整个网站开发的基本入门知识介绍的差不多了。

这节课来讲讲如何去模仿开发实现一个网站，这样今后大家就可以做出各种各样的网站了。

网页分析

首先来看一下学哥打算模仿开发的网站，如下图所示。

打开浏览器访问这个网站，样子是这样的：

为了简化起见，学哥只打算模仿开发首页，至于点击某篇文章或者其他链接进入的详细页面，模仿开发的原理都是一样的。

模仿一个网页的主要流程是这样的：

先分析一下网页的主要结构和元素，然后整理出一个大概的排版编程设计，然后通过Chrome浏览器的调试工具下载相关的图片资源和CSS资源，然后通过分析获取所需的元素，然后开始编写网页文件，按照效果模仿实现。

这个网页分析一下，最上面是一个菜单栏，里面是各种图标按钮，然后是一个大的图片，下面是分为左右2栏，左边的上面是一个图标按钮，左边的下面是一个一个文章标题和内容，右边的上面是五个图标按钮，右边的下面是推荐作者列表。

计划用一个table来进行排版，总共3行2列，第1行合并2列，第2行合并2列，第3行2个td。

第1行的td里面放一个table，只有1行，很多列，每个按钮占一个td。

第2行的td里面放一个图片，实际网站是多个图片切换的，由于还未学习javascript修改网页动态显示的技术，因此这里简化起见，就放一个大图片就好。

第3行的第1个td和第2个td，从上到下都用p来实现。

使用Chrome浏览器的调试工具

网页当中的图片，需要实现下载下来备用。同时网页中用到的一些CSS样式，也需要复制下来使用。这样能尽量保持显示效果相似。

下载的方法有几种，最简单的就是在浏览器中鼠标光标移动到图片上，右键单击，然后选择菜单【图片存储为...】，然后保存到本地计算机的某个目录下。

这种方式在某些情况下不太好使，比如某些图片资源是通过CSS样式来定义的时候，就无法下载了。比如，鼠标光标移动最上面一排按钮的右侧的【注册】按钮上，右键单击，发现并没有出现菜单【图片存储为...】。

这时候，就可以使用另外一种方法，就是使用Chrome浏览器的调试工具。

打开调试工具的方法是，鼠标光标移动到希望查看分析的网页元素上，右键单击，然后选择菜单【检查】，浏览器就出现了调试工具如下。例如，鼠标光标移动最上面一排按钮的右侧的【注册】按钮上，右键单击，然后选择菜单【检查】，看到网页效果如下：

点击调试工具最上面一排按钮的最右侧倒数第2个按钮，就是竖着的3个点的按钮，会浮出一个菜单，里面的第一排是Dock side，这个是用来设置调试工具位于浏览器的哪个位置的，可以看到默认是位于浏览器右侧的，这样会让真正的网页的宽度很窄，看起来不方便。

Dock side的3个按钮分别可以设置成：弹出一个新窗口，窗口内靠下，窗口内靠右。

来点击当中的按钮，将调试工具设置为窗口内靠下。设置后的效果如下：

可以看到调试工具分为上下2行，下面一行是Console，就是浏览器的控制台，主要用来显示网页的调试信息，目前暂时不用关心，等到后面第3章讲到JavaScript的时候会用到。上面一行又分为左右2栏，左边显示的是html代码的内容，右侧显示的是CSS样式的内容。

此时，如果在浏览器的显示内容里面，重新选择一个目标元素，鼠标右键点击【检查】菜单，会发现，调试工具里面的焦点也会跟随切换到对应的网页元素的html代码和CSS样式。例如，找到网页元素【新上榜】上鼠标右键点击【检查】菜单，调试工具里面焦点切换如下：

这样就能很方便的分析每一个网页元素，看到实际实现的html代码以及对应的CSS样式，有利于更方便的模仿实现。

网页元素分析

挨个分析网页上的元素，能下载的图片文件都下载下来，放到images目录下，如果有特殊的文字按钮或显示文字样式，复制对应的CSS样式到一个临时文件中。

例如，第一个图标【简书】按钮，调试工具里面显示是这样的：

找到img标签的src属性，这就是图片文件的网络地址，将这个地址复制出来，鼠标右键单击这个链接地址，弹出调试工具的菜单：

选择菜单项【Edit Attribute】，这时候，焦点会进入src的属性值里面，也就是链接地址文本会被选中：

鼠标光标移动到这段文本上面，右键单击，出现对这段文本的可以操作菜单，选择菜单项【复制】，这段链接文本就会被复制到系统剪贴板中了。

然后打开一个新的浏览器Tab窗口，将地址复制到网址输入框，然后回车，访问这个图片：

鼠标光标移动到图片上，右键单击，出现菜单：

选择菜单项【图片存储为...】，弹出文件保存界面：

选择要保存到的目录，然后修改文件名，然后点击【保存】按钮，完成保存这个图片的操作。

接下来，开始分析第2个图标元素，指南针图标元素。鼠标移动到图标上，右键菜单【检查】，调试工具显示如下：

可以看到这个图标是一个i标签，i标签是什么标签呢，去查一下html手册吧，它是一个表示斜体文本的标签，也就是说这个一个文本了，那么为何显示是一个图标呢。继续查看，关键在于这3个css属性：iconfont ic-navigation-download menu-icon

可以在右侧的样式窗口的搜索框Filter里面输入css的样式名字来检索看它具体的值，输入iconfont：

看到了它的一些属性值了，例如font-family，font-size，font-style，font-weight，-webkit-font-smoothing等等。

其中font-size是显示的删除线，这表示这个属性值对于当前这个标签元素是无效的，可能是受父元素或者子元素的影响。

如果有碰到之前没有学习过的属性和属性值，可以通过查看CSS手册或者去网上搜索获得相关知识。

这些属性值，是可以通过临时编辑来体现对网页的不同的影响。

鼠标光标移动到属性font-style上面，可以看到，每个属性前面都出现了一个蓝色的勾选按钮：

这里可以把蓝色的勾选去掉，这样属性值就显示成删除线了，就是属性不起作用，同时可以看到体现在网页元素的显示效果上。

例如，将font-style的勾选去掉，就能看到对应的指南针图标编程斜体了：

还可以，直接修改属性的值，例如鼠标点击font-style的值normal，可以看到此处变成了一个输入框：

可以直接进行编辑了，编辑完成之后回车键，就能看到新的值对网页的影响了。如果要改回去，一种办法是再次编辑值，还可以点击浏览器的刷新按钮，重新加载页面，并重新查看这个元素来调试。

这里可以判断出，这些属性都不像是能显示指南针图标的属性，因此继续分析另外一个属性 menu-icon：

也可以判断出，menu-icon也不是显示指南针图标的属性，因此继续分析最后一个属性 ic-navigation-download：

可以看到，搜索的时候关键字可以模糊搜索，不需要全部输入完整。

可以判断出，这里的content: "\E69A"; 属性值就是显示指南针图标的关键属性值。

content属性是CSS3规范新增的一个样式，用来显示一些特殊字符。这里的"\E69A"就是显示一个指南针的字符。

继续分析下一个元素，发现下载图标也是用content:"\E69D"; 来显示的特殊字符。

碰到这样的用CSS属性来显示元素的，就将这些值记录到一个临时文件中保存起来，后面编程的时候会用到。

继续分析下一个元素，搜索框，查看对应的CSS样式：

发现关键是用border-radius:40px;来实现圆角的背景色。

发现搜索图标也是用content:"\E618";属性来实现的。

同样的，Aa图标也是content:"\E6B5";属性实现的。

登录按钮主要使用log-in样式，而注册按钮主要使用sign-up样式。

写文章按钮主要使用write-btn样式，里面的羽毛笔使用content:"\E60E";属性来实现的。

接下来，将当中的图片用截屏工具截取出来，保存为head.jpg文件。

接下来，分析大图片下面的左边的一堆图文标签按钮。

主要是样式collection和name，然后把文字前面的小图标下载下来。

接下来分析【新上榜】这个图文按钮。

可以分析出来，这就是一个图片外面套了一个a标签。

然后来分析第一篇文章标题链接部分。

可以看到并没有太多特殊的技术实现，都是之前学习过的。

后面的分析就省略了，把这些样式的名字和值保存在临时文件里面。

文件定义和主体框架和排版

接下来，开始编写代码模仿实现了。

创建一个jianshu.html文件和一个jianshu.css文件。

然后开始编写主体框架。

jianshu.html代码如下：

jianshu.css代码如下：

刷新页面看看：

接下来用table实现排版并将主要的元素加上去。

jianshu.html代码如下：

jianshu.css代码如下：

刷新页面看看：

可以看到基本的框架已经出现了，接下来就是逐个元素修改样式添加上去。

下节课将实现详细的每个显示项目和样式。

往期教程

由于教程前后关联性极强，请大家查看历史消息。

小编在开发实际过程中遇到这么一个问题，开发的是一个电商系统，那么在首页确定模块的情况下如何更高效的查询数据并绑定呢？

一、首页模块

假定首页模块已经固定，有：热门推荐商品、热门推荐文章、热门问答等

我们需要确定这些模块固定的Code或Id值

现确定对应的值如下：热门推荐商品（1）、热门推荐文章（2）、热门问答（3）

二、正常在ASP.NET MVC中要查询这么一个页面的数据通常有两种情况

1）定义一个ViewModel 包含了这个页面所有的数据类型

2）Ajax多次请求加载不同模块的数据

那么来说说以上两种情况的优点和缺点

使用ViewModel 一次性加载数据，一次请求的服务端的业务操作比较多，用户等待时间可能比较长

使用Ajax多次请求存在一个问题，用户访问一旦多了之后，每次请求都会请求多次服务端接口，同样Web服务和数据库服务端压力都将增加

那么就需要按照实际需求去选择应该选择那种方式了，两者都可以。

以下我们就来讲下，如果选择ViewModel一次性绑定数据的查询优化可以参考下面的方案

本次涉及到首页的数据库有两个：

A）Recommend表，用于存储推送到首页的数据 热门推荐商品（1）、热门推荐文章（2）、热门问答（3） 这些数据都存储在这个表，对应的1，2，3就是对应Module这个字段

数据结构如下：

B）Links表，用于存储友情链接

通常的方案就是每次查询一次数据库 保存到内存中，然后查询数据库后一次返回数据，但是这样会有一个弊端，不停的Open和Close数据库，可谓浪费了很多资源，因此今天介绍的就是一次查询出所有的数据，然后到Service 业务层去进行拆分数据，随后再返回。

语句如下（这样做，即使两个表不同数据结构，也是可以一次查出来的，只要梳理出共同的，页面需要的数据结构即可）：

（语句写的并不全，意思到了 O(∩_∩)O）

具体查询范例语句见：http://51softs/sql-server/shouye-duogemokuai-yici-chaxun-sql-youhua.html

技术无边界，这里是落雨小编，每天分享ASP.NET小知识，希望大家能够喜欢！

在开通之前我们先来了解一下什么是百度熊掌号。百度熊掌号是内容和服务提供者入驻百度生态的认证账号，致力于帮助内容和服务提供者便捷、高效地连接全网用户，并充分利用百度生态开放的优势，获取流量、沉淀用户、塑造品牌，实现自身价值的快速增长。

大概知道熊掌号是干什么的之后，我们就来看看如何开通吧。目前熊掌号的搜索资源服务尚在公测阶段。

在申请之前需要先添加网站才能继续申请熊掌号，如果你是新百度用户那么你还需要设置完善一下账号信息。

开通熊掌号有两种方式：

已有邀请码，请输入邀请码即可体验如无邀请码，欢迎申请参与公测体验

一般情况下都是选无邀请码，申请参与公测体验这里的。填写好相关信息后就等待审核吧，时间不会太长的。

关于申请熊掌号就介绍到这里了，下面就是页面改造部分。改造也是两种方式，一种是H5方式；一种是MIP方式。可以根据页面实际情况，使用H5或MIP方式，在页面中添加关注按钮。让用户在浏览您的页面时，通过关注按钮成为您的粉丝。公子的蝉客屋博客并没有引入MIP页面，所以选择的是H5的方式。

将以下代码放到你的网站标签之前，通常是在header.php文件中。

是否给网站的访问页面添加熊掌号的关注按钮功能，官网给了三种位置样式，请自行选择放置。

//顶部按钮

//中间按钮

//底部按钮

通过上述代码实现了粉丝关注功能的改造，接下来就是文章结构化的整合改造了。

给每篇文章内容页面添加canonical标签和JSON_LD数据。

//要求href的内容为MIP页或H5页对应的PC页地址；如果没有PC页，则填写当前页面地址。

//canonical标签

//百度官方好JSON-LD实例

字段描述

@context: 请保留且勿修改 “https://zhanzhang.baidu/contexts/cambrian.jsonld”@id: 必选字段，当前网页的urltitle: 可选字段，副标题，建议长度：20个字符以内images: 必选字段，搜索结果结构化信息展示，仅允许提供1张图或3张图description: 可选字段，内容摘要pubDate: 必选字段，内容发布时间isOriginal: 可选字段，是否原创的告知字段，1是原创，0不是原创

通过以上步骤你已经基本完成了网站和熊掌号的整合改造工作了，不过为了保险我们还是通过百度站长平台提供的“格式校验”工具进行验证是否完全符合了官方号的开发标准正确接入了。

如果你是MIP页面可以选择是，否则就选不是。根据校验实际反馈错误信息进行调整即可