06 2012 档案
摘要：今天想把潍坊人才网首页http://www.jobyuandu.com做个跳转，使用手机访问的用户直接跳转到wap上http://wap.jobyuandu.com，其他访客还是正常访问，使用了下面用一段js代码来搞定这个功能。在网页的顶部加入javascript判断代码：function checkserAgent(){ var userAgentInfo=navigator.userAgent; var userAgentKeywords=new Array("Android", "iPhone" ,"SymbianOS", &q
阅读全文
摘要：上一篇文章分析了互联网的总体构思，从下至上，每一层协议的设计思想。这是从设计者的角度看问题，今天我想切换到用户的角度，看看用户是如何从上至下，与这些协议互动的。==============================================================互联网协议入门（二）作者：阮一峰（接上文）七、一个小结先对前面的内容，做一个小结。我们已经知道，网络通信就是交换数据包。电脑A向电脑B发送一个数据包，后者收到了，回复一个数据包，从而实现两台电脑之间的通信。数据包的结构，基本上是下面这样：发送这个包，需要知道两个地址： * 对方的MAC地址 * 对方的IP地址有..
阅读全文
摘要：我们每天使用互联网，你是否想过，它是如何实现的？全世界几十亿台电脑，连接在一起，两两通信。上海的某一块网卡送出信号，洛杉矶的另一块网卡居然就收到了，两者实际上根本不知道对方的物理位置，你不觉得这是很神奇的事情吗？互联网的核心是一系列协议，总称为"互联网协议"（Internet Protocol Suite）。它们对电脑如何连接和组网，做出了详尽的规定。理解了这些协议，就理解了互联网的原理。下面就是我的学习笔记。因为这些协议实在太复杂、太庞大，我想整理一个简洁的框架，帮助自己从总体上把握它们。为了保证简单易懂，我做了大量的简化，有些地方并不全面和精确，但是应该能够说清楚互联网
阅读全文
摘要：如今的网页代码，一般由三个部分组成： * HTML，语义层，提供网页的内容。 * CSS，表现层，规定网页的外观。 * Javascript，动作层，定义用户与网页的互动。理想的开发环境，应该既可以分别调试这三种代码，又可以轻松查看它们合并在一起的整体效果。浏览器是最合适的效果查看工具，所以很多人想到，代码调试环境也可以直接部署在浏览器中，以网站的形式提供服务。下面，我根据Design Shack的文章，总结一下目前最常见的6种网页开发在线调试环境。它们大大方便了网页设计师的工作，极大地提供了工作效率。一、CSSDesk网址：http://cssdesk.com/（需FQ）这个网站是最早...
阅读全文
摘要：CSS中背景图片的定位，困扰我很久了。今天总算搞懂了，一定要记下来。在CSS中，背景图片的定位方法有3种： 1）关键字：background-position: top left; 2）像素：background-position: 0px 0px; 3）百分比：background-position: 0% 0%;上面这三句语句，都将图片定位在背景的左上角，表面上看效果是一样的，实际上第三种定位机制与前两种完全不同。前两种定位，都是将背景图片左上角的原点，放置在规定的位置。请看下面这张图，规定的位置是"20px 10px"和"60px 50px"，都是
阅读全文
摘要：气泡状文本框，是一种很生动的网页设计手段。它可以用来表示用户的发言。也可以用来作为特定信息的提示符。DVD租借网站Netflix，还用它显示碟片的详细信息。=========================制作CSS气泡框的传统方法，需要5张背景图片，分别是： *tl.gif，左上方的圆角。 *tr.gif，右上方的圆角。 *bl.gif，左下方的圆角。 *br.gif，右下方的圆角。 *angle.gif，突出的三角形。现在假定有这样一段代码： <blockquote>床前明月光，疑是地上霜。</blockquote> <p>李白</p>我们希
阅读全文
摘要：去年我学jQuery的时候，曾经做过一点选择器（selector）的笔记。这几天拿出来看了一下，发现很多都忘记了。所以，我决定把它们贴在这里，方便以后查看。这对其他朋友应该也是有用的，毕竟选择器是制作网页效果的第一步。笔记分为两个部分，今天是CSS的选择器，以后还有一部分xPath的选择器。今天的笔记中包括44个选择器，基本涵盖了CSS 2和CSS 3的所有规定。=====================CSS选择器笔记阮一峰 整理参考网址：456 Berea Street一、基本选择器序号选择器含义1.*通用元素选择器，匹配任何元素2.E标签选择器，匹配所有使用E标签的元素3..infocl
阅读全文
摘要：随着3G的普及，越来越多的人使用手机上网。移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多
阅读全文
摘要：CSS3是样式表（style sheet）语言的最新版本，它的一大优点就是支持圆角。网页设计大师Nicholas Zakas的最新文章，清晰易懂地解释了CSS3圆角的各个方面，非常值得学习。以下就是我翻译的中文版。=========================================CSS3圆角详解作者：Nicholas Zakas译者：阮一峰原文：http://msdn.microsoft.com/en-us/scriptjunkie/gg508841.aspx发表日期：2010年12月8日一、CSS3圆角的优点传统的圆角生成方案，必须使用多张图片作为背景图案。CSS3的出现，使
阅读全文
摘要：下面是一组颜色工具网站，非常有用。理论部分，可以参考我前几天做的颜色理论笔记。1. ColorSchemer Gallery网址：http://www.colorschemer.com/schemes/[说明] 专门收集用户上传的各种配色方案。2. WebSite Color Picker网址：http://www.digitdesigns.com/colrPick/framePic.htm[说明] 为网页的背景、字体、链接选择不同的颜色，实时查看效果。3. ColorJack网址：http://www.colorjack.com/sphere/[说明] 选择一种主色调后，自动生成其他相关的颜
阅读全文
摘要：今天是这个连载的最后一部分，内容关于网页的布局。废话少说，大家先看我做的一个范例网页，请点击进入。然后，我对这个范例做一点解释。================从布局上看，世界上所有的网页，大多由三个部分构成：* Header（头部）* Footer（尾部）* Content（内容区）一般来说，Header总是在网页的上方，Footer总是在网页的下方，Content是中间的一大块。在 Content中又可以分成很多栏，从一栏式到三栏式都很常见。我们的目的是通过CSS文件，实现栏位和布局的自动调整。网上有很多现成的布局模板，我采用的是Tripoli项目中的布局模板，然后做了一些修改。它要求的网
阅读全文
摘要：今天，我要写的是CSS文件的模块化。如果你看过CSS文件，就会知道很难看懂它。每个CSS文件有许多行，每一行就是一条命令，可以放在文件的任何位置，都能够同样生效，而且后面的行随时可以覆盖前面的行的设置。所以，阅读CSS文件就好像猜谜一样，必须努力将不同的线索拼起来，令人非常痛苦，这直接导致了日后难于维护和修改。考虑到这一点，很早就有人提出了CSS文件的模块化，就是将相关的设置都放在一起。一般来说，CSS中的设置可以分成下面几个模块：* typography（字体）* colour（颜色）* link（链接）* forms（表单）* layout（布局）* navigation（导航）这些模块当
阅读全文
摘要：我经常写网页。很多人喜欢用Dreamweaver，但是我的习惯是直接手写代码。虽然那样看上去很原始，但是能够做到对网页最精确的控制，并且减少了不必要的冗余代码。手写代码最麻烦的地方在于，每次都必须写一些重复性的代码，比如<head>和<body>这样的标签。所以，这两天我就在做一个模板，将那些重复性的代码都事先写好，以后写网页的时候，只要直接写内容部分就可以了。下面就是我制作模板的过程，也顺便整理了一下相关的HTML和CSS知识。我想对需要自己设计网页的朋友，应该都是有用的。因为内容比较多，需要分三次才能贴完。今天是第一部分"HTML模板"。====
阅读全文