您的位置：首页 > 编程技术 > html  >  网页制作技巧：从切图到网页生成全攻略

网页制作技巧：从切图到网页生成全攻略

 更新时间：2016年9月20日 19:05  点击：1598
鉴于很多朋友问到如何切图这个问题，又鉴于这个问题可大可小，一两句话是绝对讲不清楚的，所以今天有空闲在家里就举一个简单的例子来说明这个问题吧!OK，让我们开始：

　　step1:在PhotoShop中打开设计稿，如下图


　　选择工具板上的slice切片工具，先大刀阔斧的切上一番!技巧： 大面积的色块单独切成一块，尽可能的保持在水平线上的整齐(这个问题你们在后面的制作页面中深有感触)切好的图如下所示：


　　step2:在PhotoShop中选择file-save for web...来输出，这里要注意一些参数的选择：

  Micrsoft推出IE7已有一段时间了，相信大家已领略到IE7带来的从视觉和功能上的改进了，不过作为Web设计人员可要注意了：在CSS文件中，如：

.text{
color: #ff0000 !important;
color: #000000;
}

    以上代码在IE7中显示的文字颜色是红的。这一意味着新版的IE7认识!important了。大多数WebStandard设计者都用!important解决IE和Firefox对margin的理解问题，如果不用!important分别设margin值，稍微有点布局的符合WebStandard的网页必然在IE或Firefox下有一个是面目全非的。不要认为微软这个激进的做法不会对现有代码造成影响。

    在IE6、IE7过度阶段，使用IE6的用户依然会不理解带!important的CSS，而使用IE7的用户会和使用Firefox的用户一样理解!important，问题是IE7和Firefox对margin和padding的处理还是不同，换句话说现在开始要找别的方法给微软擦屁股了。




当当当当～大家请看下面的链接，哈哈，是不是看到是一小淫僧，HOO～
http://www.misuisui.com/google_map.htm
哈哈，好玩吧～是不是也想搞一个呢？Follow Me~ 

第一步
去 http://www.google.com/apis/maps/ 申请一个 Google Maps API key ，当然，你得有顶级域名才行。。。  乱申请的你如果不放到你这个域名下，那这个就根本用不了。。。
Google会给您一段代码，可要保存好哦～

第二步
把 http://www.misuisui.com/google_map.htm 打开，看一看里面的源化码，我已经写好说明了，大家照猫画虎就行了，HOHO～主要代码在最下面～

第三步
把第一步里申请来的 Google Maps API key 改掉代码中的 ABQIAAAAlwlonOoTX0oPrDaRmH_ALBREKWcFDKg74ezPgAUa79EBKj9z1BTjAKcZV51YfdN2n4xhiJ2lKuvBeA 一样的代码。。。 

第四步
代码里的哪个PNG图标不好找，在网上狂搜吧。。。  要不自己做一个  ～
嗯，还有那个坐标不好找，大家请看第四步

第五步
打开 http://www.google.com/maps
找啊找啊，找到你所在的地方，然后点那个右上角那个“Link to this page”
得到一个这样的链接 http://www.google.com/maps?f=q&hl=en&q=china&ll=35.86166,104.195397&spn=32.116109,88.242188&t=h
注意 35.86166, 104.195397 这一段数字，这就是当前地图中心点的坐标了
把逗号后面的数字放到逗号前面变成这样 104.195397, 35.86166
然后就是把这个数字添加到代码中你想要添加的地方了～ 

第六步
根据代码里的提示，发挥你的想象力，然后做点啥出来～做出啥来了，也告诉我一下，让我也看看啊～
比如我就要做个友情链接的东东，HOHO～和我友链的朋友们麻烦参考第五步把你想要标在我的友情链接地图上的坐标告诉我啊，HOHO～ 

第七步
嗯嗯，希望这几天大家要常来这儿了，因为有一个好东东要给大家告诉大家啦～HOHO～

<div id="map" style="width: 600px; height: 400px; border: 1px solid #979797"></div>
<!-- 把以上代码为地图的宽和高，可修改里面的数值，不要改里面的ID -->

<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAlwlonOoTX0oPrDaRmH_ALBREKWcFDKg74ezPgAUa79EBKj9z1BTjAKcZV51YfdN2n4xhiJ2lKuvBeA" type="text/javascript"></script>
<!-- 此为Google Map API 的验证码，用到自己的网站要去 http://www.google.com/apis/maps/ 审请一个 -->

<script type="text/javascript">
  //<![CDATA[

    function createMarker(point, baseIcon,

　　引:对下一代互联网的看法，还会有很多的讨论。有一点可以肯定，WEB2.0是以人为核心线索的网。但什么是WEB2.0？ 呵，要理解WEB2.0，先得看WEB的历史。

　　什么是WEB2.0？

　　要理解WEB2.0，先得看WEB的历史。 World Wide Web，简称WWW，是英国人TimBerners-Lee 1989年在欧洲共同体的一个大型科研机构任职时发明的。通过WEB，互联网上的资源，可以在一个网页里比较直观的表示出来；而且资源之间，在网页上可以链来链去。在WEB1.0上做出巨大贡献的公司有Netscape，Yahoo和Google。 Netscape研发出第一个大规模商用的浏览器，Yahoo的杨致远提出了互联网黄页， 而Google后来居上，推出了大受欢迎的搜索服务。

　　搜索最大的贡献是，把互联网上海量的信息，用机器初步分了个线索。但是，光知道网页里有哪些关键字，只解决了人浏览网页的需求。所以，Tim-Berners-Lee在提出WWW不久，即开始推崇语义网（Semantic Web）的概念。为什么呢？因为互联网上的内容，机器不能理解。他的理想是，网页制作时和架构数据库时，大家都用一种语义的方式，将网页里的内容表述成机器可以理解的格式。这样，整个互联网就成了一个结构严谨的知识库。从理想的角度，这是很诱人的，因为科学家和机器都喜欢有次序的东西。Berners-Lee关心的是，互联网上数据，及能否被其它的互联网应用所重复引用。举一个例子说明标准数据库的魅力。有个产品叫LiberyLink。装了它后，到Amazon上去浏览时，会自动告诉你某一本书在用户当地的图书馆能否找到，书号是多少等。因为一本书有统一的书号和书名，两个不同的互联网服务（Amazon 和当地图书馆数据库检索）可以公享数据，给用户提供全新服务。

　　但是，语义网提出之后，曲高和寡，响应的人不多。为什么？因为指望要网页的制作者提供这么多额外的信息去让机器理解一个网页，太难；简直就是人给机器打工。这违反了人们能偷懒就偷懒的本性。看看Google的成功就知道。 Google有个Page Rank技术，将网页之间互相链接的关系，用来做结果排序的一个依据，变相利用了网页制作人的判断力。想一想网页的制作者们，从数量来说，比纯浏览者的数量小得多。但Google就这一个革新，用上了网页的制作者的一部份力量，已将其推上了互联网的顶峰。

　　 所以互联网下一步，是要让所有的人都忙起来，全民织网，然后用软件，机器的力量使这些信息更容易被需要的人找到和浏览。如果说WEB1.0是以数据为核心的网，那我觉得WEB2.0是以人为出发点的互联网。 我们看一看最近的一些WEB2.0产品，就可以理解以上观点。

　　Blog： 用户织网，发表新知识，和其他用户内容链接，进而非常自然的组织这些内容。

　　RSS： 用户产生内容自动分发，定阅

　　Podcasting： 个人视频/声频的发布/定阅

　　SNS： blog+人和人之间的链接

　　WIKI： 用户共同建设一个大百科全书

　　从知识生产的角度看，WEB1.0的任务，是将以前没有放在网上的人类知识，通过商业的力量，放到网上去。WEB2.0的任务是，将这些知识，通过每个用户的浏览求知的力量，协作工作，把知识有机的组织起来，在这个过程中继续将知识深化，并产生新的思想火花；

　　从内容产生者角度看，WEB1.0是商业公司为主体把内容往网上搬，而WEB2.0则是以用户为主，以简便随意方式，通过blog/podcasting 方式把新内容往网上搬；

　　从交互性看，WEB1.0是网站对用户为主；WEB2.0是以P2P为主。

　　从技术上看，WEB客户端化，工作效率越来越高。比如像Ajax技术, GoogleMAP/Gmail里面用得出神入化。

　　我们看到，用户在互联网上的作用越来越大；他们贡献内容，传播内容，而且提供了这些内容之间的链接关系和浏览路径。在SNS里面，内容是以用户为核心来组织的。WEB2.0是以用户为核心的互联网。

　　那么，这种意义上的WEB2.0，和Tim Berners-Lee的语义网，有什么不同呢？语义网的出发点是数据的规整及可重复被机器调用，提出使用语义化的内容发布工具， 试图从规则和技术标准上使互联网更加有序。 Google等搜索引擎，在没有语义网的情况下，尽可能的给互联网提供了线索。 WEB2.0则是鼓励用户用最方便的办法发布内容（blog/podcasting），但是通过用户自发的（blog）或者系统自动以人为核心（SNS）的互相链接给这些看似凌乱的内容提供索引。 因为这些线索是用户自己提供，更加符合用户使用感受。互联网逐渐从以关键字为核心的组织方式和阅读方式，到以互联网用户的个人portal（SNS）为线索，或者以个人的思想脉络（blog/rss）为线索的阅读方式。WEB2.0强调用户之间的协作。WIKI是个典型例子。从这个角度看，互联网是在变得更有序，每个用户都在贡献:要么贡献内容,要么贡献内容的次序.

　　对下一代互联网的看法，还会有很多的讨论。有一点可以肯定，WEB2.0是以人为核心线索的网。提供更方便用户织网的工具，鼓励提供内容
[!--infotagslink--]

相关文章

  • photoshop打开很慢怎么办 ps打开慢的设置技巧

    photoshop软件是一款专业的图像设计软件了，但对电脑的要求也是越高越好的，如果配置一般打开ps会比较慢了，那么photoshop打开很慢怎么办呢，下面来看问题解决办法。 1、...2016-09-14

  • Jquery Ajax Error 调试错误的技巧

    JQuery使我们在开发Ajax应用程序的时候提高了效率，减少了许多兼容性问题，我们在Ajax项目中，遇到ajax异步获取数据出错怎么办，我们可以通过捕捉error事件来获取出错的信息。在没给大家介绍正文之前先给分享Jquery中AJAX参...2015-11-24

  • php二维码生成

    本文介绍两种使用 php 生成二维码的方法。 （1）利用google生成二维码的开放接口，代码如下： /** * google api 二维码生成【QRcode可以存储最多4296个字母数字类型的任意文本，具体可以查看二维码数据格式】 * @param strin...2015-10-21

  • Java生成随机姓名、性别和年龄的实现示例

    这篇文章主要介绍了Java生成随机姓名、性别和年龄的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-10-01

  • php语言中使用json的技巧及json的实现代码详解

    目前，JSON已经成为最流行的数据交换格式之一，各大网站的API几乎都支持它。我写过一篇《数据类型和JSON格式》，探讨它的设计思想。今天，我想总结一下PHP语言对它的支持，这是开发互联网应用程序（特别是编写API）必须了解的知识...2015-10-30

  • php根据用户语言跳转相应网页

    当来访者浏览器语言是中文就进入中文版面，国外的用户默认浏览器不是中文的就跳转英文页面。 <&#63;php $lan = substr(&#8194;$HTTP_ACCEPT_LANGUAGE,0,5); if ($lan == "zh-cn") print("<meta http-equiv='refresh' c...2015-11-08

  • C#生成随机数功能示例

    这篇文章主要介绍了C#生成随机数功能,涉及C#数学运算与字符串操作相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25

  • 基于PHP给大家讲解防刷票的一些技巧

    刷票行为，一直以来都是个难题，无法从根本上防止。但是我们可以尽量减少刷票的伤害，比如：通过人为增加的逻辑限制。基于 PHP，下面介绍防刷票的一些技巧：1、使用CURL进行信息伪造$ch = curl_init(); curl_setopt($ch, CURLOP...2015-11-24

  • 腾讯视频怎么放到自己的网页上?

    腾讯视频怎么放到自己的网页上?这个问题是一个基本的问题，要把腾讯视频放到自己的网页有许多的办法，当然一般情况就是直接使用它们的网页代码了，如果你要下载资源再放到...2016-09-20

  • 图解Sublime Text3使用技巧

    通过本篇文章给大家介绍Sublime Text3使用技巧的相关知识，对sublime text3技巧相关知识感兴趣的朋友一起学习吧...2015-12-24

  • jQuery为动态生成的select元素添加事件的方法

    下面小编就为大家带来一篇jQuery为动态生成的select元素添加事件的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-09-01

  • php生成唯一数字id的方法汇总

    关于生成唯一数字ID的问题，是不是需要使用rand生成一个随机数，然后去数据库查询是否有这个数呢？感觉这样的话有点费时间，有没有其他方法呢？当然不是，其实有两种方法可以解决。 1. 如果你只用php而不用数据库的话，那时间戳+随...2015-11-24

  • PHP自动生成后台导航网址的最佳方法

    经常制作开发不同的网站的后台，写过很多种不同的后台导航写法。 最终积累了这种最写法，算是最好的吧...2013-09-29

  • Python爬虫必备技巧详细总结

    本篇文章介绍了我在爬虫过程中总结的几个必备技巧，都是经过实验的，通读本篇对大家的学习或工作具有一定的价值，需要的朋友可以参考下...2021-10-22

  • 基于JavaScript实现网页倒计时自动跳转代码

    这篇文章主要介绍了基于JavaScript实现网页倒计时自动跳转代码 的相关资料,需要的朋友可以参考下...2015-12-29

  • 分享12个非常实用的JavaScript小技巧

    这篇文章主要介绍了分享12个非常实用的JavaScript小技巧,这些小技巧可能在你的实际工作中或许能帮助你解决一些问题，需要的朋友可以参考下...2016-05-14

  • js生成随机数的方法实例

    js生成随机数主要用到了内置的Math对象的random()方法。用法如：Math.random()。它返回的是一个 0 ~ 1 之间的随机数。有了这么一个方法，那生成任意随机数就好理解了。比如实际中我们可能会有如下的需要： （1）生成一个 0 - 1...2015-10-21

  • 网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别

    我们现在使用的软件都会自动在前面加一个申明了，那么在网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别是什么呢？下面我们就一起来看看吧． 单...2016-09-20

  • Illustrator像素级完美绘制经验技巧分享

    今天小编在这里就来给Illustrator的这一款软件的使用者们来说一说像素级完美绘制的经验技巧，各位想知道具体信息的使用者们，那么下面就快来跟着小编一起看一看。 给...2016-09-14

  • PHP验证码生成与验证例子

    验证码是一个现在WEB2.0中常见的一个功能了，像注册、登录又或者是留言页面，都需要注册码来验证当前操作者的合法性,我们会看到有些网站没有验证码，但那是更高级的验证了，...2016-11-25