网页页面控制注意事项

 更新时间:2016年9月20日 19:04  点击:2388

1、检查标题。
2、检查版权信息,尤其是电话号码。
3、图片、文件定位问题。
4、产品页面首页指向产品类别问题。
5、文章页面首页指向文章类别问题。
6、产品图片大小控制问题。
7、反馈单信箱问题。
8、CSS表问题
   文字间距
   文字大小
   文字缩进
   行距
   文字颜色
   链接
   左右上下边距问题
9、产品参数介绍、特殊要求
10、列表主题字数限制
11、所在经过ASP输出的html都应该处理一下,应该保证其大小限定在一个范围。
12、产品分类问题。如何分类,分类如何显示。
13、中文网页只可设为 GB2312 Encoding
14、在所见即所有的网页编辑器中不要按太多的 Space 及 Enter 键,要控制文字或物件的位置,请采用其本身的参数或配合表格、清单和预设格式标记的使用。
  
15、不要让你的一行或一段太长,特别是文字式网页,不妨加上显眼的标题或适当的插图,精彩的文章亦 要包装,能既精彩又能留住读者才算上乘。

16、不要使用的属性
    align=center  改为   <center></center>
    <font>        改为   CSS样式
    <B>    改为  <strong>

17.网页的版权声明有三种显示方法,第一是当作一般文字显示于浏览画面,第二是利用说明标记 <!-- Copyright -->,第三是利用 <META> 标记。 

18、在没有内容的情况下,要保证页面不变形。增加了内容也不能变形。   
   
19、在网页中,两个并行的栏目,第一行必须必须位于同一水平线上。

20、两行文字显示,若该两行文字不属于同一栏目,则不行隔得太近,缩进必须一致。 

21、两个栏目之间最好要有明显的分隔标志。

22、同一个栏目中CSS最好保证一致。

<

  问:我将有些网站添加到收藏夹时,会看到这个图站在收藏夹中会显示出特别的图标。我也想在网页上加入代表我个人主页的标志,请问这种图标是如何实现的?

  答:Internet Explorer 5.0提供了一个新的功能,就是可以让网页设计者自己设计网站URL的图标。也就是在Internet Explorer地址栏前面,以及在收藏夹里面,显示的是你自己设计的图标,而不是默认的Internet Explorer图标。要能够在网址栏中显示自己的图标,要以下几个步骤:
首先要做出你自己的图标。你可以用任何一种图形设计程序来制作你的图标,或是你可以从图库、网络等地方找到你要的图标,这个图标的大小必须是16×16像素,否则可能会显示不出来。虽然Internet Explorer规定是一定要用16×16的大小,但是笔者发现用32 x 32的大小也可以。

  接下来,就要把图标链接到网页中了,链接图标可以有两种方法来实现。

  第一种方法:你把你的图标文件名取为favicon.ico,并且放在你网页所在的根目录下,就是跟你首页文件(一般是index.htm、index.html、default.htm或default.html放在一起)。这样Internet Explorer 5.0就会自动读取这个favicon.ico,从而将这个图标显示出来。

  第二种方法:在首页HTML文件中,加入link命令,<link>是放在<head>与</head>之间,例如下面这样:

<HEAD>
<LINK REL="SHORTCUT ICON" HREF="http:///youricon.ico">
<TITLE>网页教学网--专业的网页教学站点</TITLE>
</HEAD>

  其中的"HREF=http:///youricon.ico>"只是一个例子,你只要将"http://"替换成你的网址,将"youricon.ico"替换成你制作的ICO文件名即可。这样只有当网友把你的网站加到Internet Explorer的收藏夹中,并重新打开Internet Explorer浏览器之后,你自行制作的图标才会显示出来。

  小提示:如果你不要你的Internet Explorer在收藏夹中出现这些网站自行制作的图标,在加入收藏夹之后,做清除History的操作。然后再重新打开Internet Explorer浏览器之后,这些自行制作的图标就会消失,恢复成Internet Explorer默认的图标。



  仿Windows下拉菜单,在网上是比较常见的,最初出现在微软网站上,之后被大量效仿。 事实上制作这样一个模拟菜单也并不是一件很困难的事,比如上面的例子代码如下:

  -------------------------------------------

  <!-- 样式部分 -->

  <style type=text/css>

  td,div { font: normal 12px 宋体; }

  a { color: #F8F8F8; text-decoration: none; }

  a:hover { color: #F8F8F8; text-decoration: underline; }

  </style>

  <!-- 实现部分 -->

  <div style="background-color:#3366CC;width:68px;text-align:center;

  padding:3px;border-bottom:1px solid #FFFFFF;z-index:1;"

  onmouseover="myMenu.style.display='block'"

  onmouseout="myMenu.style.display='none'">

   <div style="position:absolute;width:0px;height:0px;overflow:visible;">

   <div id=myMenu style="position:absolute;left:-10px;top:18px;display:none;

   width:90px;background-color:#3366CC;padding:5px;text-align:left;">

   &nbsp;<a href=http:///htmldata/2005-06-18/1119051233.html#none>Link 1</a><br>

   &nbsp;<a href=http:///htmldata/2005-06-18/1119051233.html#none>Link 2</a><br>

   &nbsp;<a href=http:///htmldata/2005-06-18/1119051233.html#none>Link 3</a><br>

   &nbsp;<a>...</a><br>

   &nbsp;<a href=http:///htmldata/2005-06-18/1119051233.html#none>Link N</a><br>

   </div>

   </div>

   <a href=http:///htmldata/2005-06-18/1119051233.html#none>菜单实例</a>

  </div>

  -----------------------------------

  那么下面我们就由浅入深的对这种模拟菜单进行分析讲解。

  在讲解之前,有一点需要说明的是:笔者在后面讲解的代码都基于当前的主流浏览器Microsoft Internet Explorer(即我们通常所说的IE)下的。笔者进行调试的浏览器是IE 5.01。另外,这样一个菜单体现的是HTML/CSS/javascript的综合应用,这里并不对一些细节进行详细的讲解,所以你至少应该有一点这方面的基础。

  基本原理

  其实,这个菜单实现的原理简单的说就是:设置页面元素的CSS属性,对其进行定位并设置其是否可见,然后通过激发一定的事件,用javascript来动态的改变这些属性。

  看下面几个CSS属性:

  position:定位类型,取值static/absolute/relative,其代表的含义简单的说即无定位/绝对定位/相对定位;

  left:距离左侧的位置(具体的参照物与position的设置有关),单位为px或%;

  top:距离顶部的位置(具体的参照物与position的设置有关),单位为px或%。

  display:页面元素的显示状态,如取值block表示做为块状元素显示,none则为不显示,还有其他一些取值(如inline等)这里就不做详解。

  比如上例中的“div id=myMenu style="position:absolute;left:-10px;top:18px;display:none...”就是使用了这几个属性。

  下面我们来看看如何用javascript来控制页面元素的CSS属性。

<

  一个人拥有自己独特的风格,是一般人所没有的,就会让人注意到那个人的特别,若那个人的风格是正面的,甚至就会引起别人的羡慕与注意,或是赞赏。就如同一个网站,拥有别的网站所没有的风格,就会让浏览者愿意多停留些时间,细细品尝该站的内容,甚至该站会得到多人的鼓励与注目,粗略的说,网站风格可以从以下几个方向来探讨,而每一项都是有关联性的:

  1. 色系:网页的底色、文字字型、图片的色系、颜色等等。
  2. 排版:表格、框架的应用、文字缩排、段落等等。
  3. 窗口:窗口效果,例如:全屏幕窗口、特效窗口等。
  4. 程序:网页互动程序,例如:ASP . PHP . XML . CGI等等。
  5. 特效:让网页看起来生动活泼的各种应用,如:Flash . Java script . Java applets . DHTML等等。
  6. 架构:目录规划、层次浅显易懂、选单应用等等。
  7. 内容:网站主题、整体实用性、文件关联性、内容切合度、是否有不必要的档案等等。
  8. 走向:对于网站的未来规划、网站整体内容走向等。

  以上这些项目都与网页风格有密切的关系,网页的风格不是某一项相同,网站就是有整体感,而是要各项目的配合应用,才能达到完美的网站风格设计。接下来的段落,将会为每个项目做简单的介绍。


  【一、色系

  网站的色系是浏览者整体的视觉观感,若一个网站色系能有一致性,不仅会使网站看起来美观,更能让浏览者对内容不易混淆,增加了浏览的简洁与方便。而网站的色系更能衬托出网站的主题,若色系能与主题合理搭配,将会增加浏览者的易读性。网站的色系包含了网页的底色、文字字型、图片的色系、颜色等等,这不单只是将颜色搭配得当就算完美,还要配合每个内容,及网站主题。对于网站的色系,应该要在网站开始制作前,做好规划及设计,才不会到着手制作网站时,难以搭配,甚至造成混乱的设计。

  网页的底色是整个网站风格的重要指针。举例来说,以黑色作为背景颜色的网页,因黑色本对人的视觉上会造成黯淡的感觉,若是拿来用作活泼的儿童网站,就是不适合了。因为小孩子是天真无邪的、活泼的、有朝气的,与黑色的沉稳、黯淡,很难联想在一起。再举个例子,若是写一个有关于环保的网站,若用暗红色作为网页底色,决计不会有人联想到网页的内容是与环保有关。当然,每个人的审美观不同,可能也会对颜色的代表性看法不同,但既然网站不是只写给自己看的,就应该要注意到大部分人可能会有的观点,然后以众人居多的观点出发,来设计网页。

  文字字型上的设计,最好的网站是以所有浏览者都能看到的字型为主。常会看到有需多网站要求浏览者须自行下载某种字型,才能达到最佳浏览效果,这是种非常奇怪的行为。毕竟浏览者只是来找资料或是来看网站的内容,不可能会因为这种「为达最佳浏览效果」,而自行下载所需要的字型。当所要求的字型若不下载,并不会影响到网站内容上的浏览与不便,那么对浏览者的要求就微乎其微的不可能发生任何作用。这么一来,对于网页设计者来说,无非是非常可惜的,因为当初的设计风格却未能让浏览者一窥全貌,岂不是白费心思的吗?

  何谓图片的色系?以色彩学简单的区分,可分为冷色系与暖色系,再详细一点的区分,又可分出各种颜色的色系,而色系的区分,就在于主观浏览意识上的差异了。如何将图片的色系与网站整体色系相对应,就是比较困难的地方了。对于网页初学者来说,要绘制一张图并非易事,要绘制一张符合自己网页风格的图,更是困难重重。大部分的网页制作者,并不大可能驾轻就熟的使用影像处理软件或绘图软件,于是乎,网页素材的网站就开始盛行了。当然,不会使用绘图软件并不代表网页就不能设计的很出色,若是能将网络上的素材资源妥善利用,网站也是可以走出自己的风格的。而该怎么选择适合自己网站的图片,就是门很大的学问了。

  选择图片该以何作为标准呢?举例来说,若网站内容为科学探讨,当然不能以卡通图片来作为插图,试想,当您正在浏览一个有关天文学的网站,却满是皮卡丘的可爱图片,不是很不协调吗?再举个例子,如果一个教学网站,里头却尽是明星图片,看上去根本就不像是教学网站,而是大杂汇的明星相片网。很多人喜欢将自己欣赏的明星照放上自己的网页中,如果仅是个人网站倒也还好,因为个人网站本就无主题居多,也就没有所谓的符不符合主题的顾虑,但若是有主题的网站,岂不糟糕?

  以图片内容来说,能切合网站主题最好,若不能,也别差异太多。以颜色来说,若一个网页是蓝色的底色,但整个网页的图档却乱七八糟,各种颜色纷纷出笼,更糟的是,蓝色是属于冷色系的颜色,若以蓝色为底的网页,却尽都是大红色、橘色的图片,那将会使整张网页看起来就像垃圾堆,杂乱无章。所以,可以简单的归纳出,网页与图档的颜色,色系一致或是视觉效果一致,将会使网页看起来更为美观且有自己的风格。

  网页的颜色,并非单一就图文件、文字颜色、或是底色为主,而是以浏览者的角度来观看,整体网页看上去是偏向哪种色系。常常见到许多网站虽然色系搭配的很好,但却是没有自己的风格。以目前流行的柔色系、粉色系网站来说,就是失了自己独到的风格。因为使用粉色系的网站,不外乎都有相同的特点,文字颜色浅,底色也以浅色系为主,这样除了没有自己的风格外,看起来既不大方也难登大雅之堂。

  如今,上网冲浪已经是一件很时髦的事情,在网上安“家”的虫虫们也越来越多。为了使自己的“家”更有特色,吸引更多的人参观,往往是“八仙过海,各显神通”。而使用得最多的就是应用一些JaveScript小插件。本文就向各位网友提供比较常用的小程序。

  使用方法很简单,拷贝+粘贴即可。如果你稍懂一些HTML语言和JaveScript插件语法则更好。

  1.欢迎对话框

  一进入网友的“家”,冷不丁蹦出来一个问好的对话框,是不是感到很亲切?没错,实现这效果的程序就是下面的几行:

 <SCRIPT LANGUAGE=″JAVASCRIPT″>

  alert (″n ″既来之,则安之″nn 欢迎您光临我的主页nn 别犹豫 nn LET'S GO!″);

  </SCRIPT>

  (注:n 的作用是在对话框中换行)

  <b>2.停留时间</b>

  网友进入你的“家”,抬头一看,有一个计时钟在不停地跳动,显示他的来访时间,很有趣吧!程序如下:

  

  <HTML>

  <HEAD>

  <META HTTP-EQUIV=″Content-Type″ CONTENT=″text/html;CHARSET=gb2312″>

  <TITLE>停留时间</TITLE>

  </HEAD>

  <SCRIPT LANGUAGE=″JAVASCRIPT″>

  <!--

  var ap_name = navigator.appName;

  var ap_vinfo = navigator.appVersion;

  var ap_ver = parseFloat(ap_vinfo.substring(0,ap_vinfo.indexOf(′(′)));

  var time_start = new Date();

  var clock_start = time_start.getTime();

  var dl_ok=false;

  function init ()

  {

  if(ap_name==″Netscape″ && ap_ver>=3.0)

  dl_ok=true;

  return true;

  7}

  function get_time_spent ()

  {

  var time_now = new Date();

  return((time_now.getTime() - clock_start)/1000);

  }

  function show_secs () // show the time user spent on the side

  {

  var i_total_secs = Math.round(get_time_spent());

  var i_secs_spent = i_total_secs % 60;

  var i_mins_spent = Math.round((i_total_secs-30)/60);

  var s_secs_spent = ″″ + ((i_secs_spent>9) ? i_secs_spent : ″0″ + i_secs_spent);

  var s_mins_spent = ″″ + ((i_mins_spent>9) ? i_mins_spent : ″0″ + i_mins_spent);

  document.fm0.time_spent.value = s_mins_spent + ″:″ + s_secs_spent;

  window.setTimeout(′show_secs()′,1000);

  }

  // -->

  </SCRIPT>

  <BODY onLoad=″init(); window.setTimeout(′show_secs()′,1);″>

  <form name=″fm0″ onSubmit=″0″>

  <font size=″-1″><I><FONT COLOR=″#888888″>停留时间:</FONT></I></font><br>

  <INPUT type=″text″ name=″time_spent″ size=7 onFocus=″this.blur()″>

  </form>

  </BODY>

  </HTML>

<
[!--infotagslink--]

相关文章

  • PHP传值到不同页面的三种常见方式及php和html之间传值问题

    在项目开发中经常见到不同页面之间传值在web工作中,本篇文章给大家列出了三种常见的方式。接触PHP也有几个月了,本文总结一下这段日子中,在编程过程里常用的3种不同页面传值方法,希望可以给大家参考。有什么意见也希望大...2015-11-24
  • jQuery实现切换页面过渡动画效果

    直接为大家介绍制作过程,希望大家可以喜欢。HTML结构该页面切换特效的HTML结构使用一个<main>元素来作为页面的包裹元素,div.cd-cover-layer用于制作页面切换时的遮罩层,div.cd-loading-bar是进行ajax加载时的loading进...2015-10-30
  • 解决vue刷新页面以后丢失store的数据问题

    这篇文章主要介绍了解决vue刷新页面以后丢失store的数据问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-12
  • 总结android studio注意事项及打不开等问题解决方法

    经过一段时间的使用,总结了android studio打不开等问题的6种解决方法及android studio注意事项,希望对大家有所帮助。 1 首次运行,建立好项目需要下载一些东西,如果...2016-09-20
  • php根据用户语言跳转相应网页

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

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

    对于乱码这个问题php开发者几乎都会有碰到过,我们下面主要是介绍了php文件乱码和页面乱码。PHP页面转UTF-8编码问题 1.在代码开始出加入一行: header("Content-Type: text/html;charset=utf-8"); 2.PHP文件编码问题...2015-10-21
  • 解决vuex数据页面刷新后初始化操作

    这篇文章主要介绍了解决vuex数据页面刷新后初始化操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-26
  • java后台实现js关闭本页面,父页面指定跳转或刷新操作

    这篇文章主要介绍了java后台实现js关闭本页面,父页面指定跳转或刷新操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-16
  • 基于JavaScript实现网页倒计时自动跳转代码

    这篇文章主要介绍了基于JavaScript实现网页倒计时自动跳转代码 的相关资料,需要的朋友可以参考下...2015-12-29
  • JavaScript 获取滚动条位置并将页面滑动到锚点

    这篇文章主要介绍了JavaScript 获取滚动条位置并将页面滑动到锚点的的相关资料,帮助大家更好的理解和学习使用JavaScript,感兴趣的朋友可以了解下...2021-02-09
  • vue实现在进行增删改操作后刷新页面

    这篇文章主要介绍了vue实现在进行增删改操作后刷新页面,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-05
  • 网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别

    我们现在使用的软件都会自动在前面加一个申明了,那么在网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别是什么呢?下面我们就一起来看看吧. 单...2016-09-20
  • Pycharm 跳转回之前所在页面的操作

    这篇文章主要介绍了Pycharm 跳转回之前所在页面的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-05
  • Bootstrap页面缩小变形的快速解决办法

    bootstrap布局是应用得很广泛的一种网页布局方法,下面通过本文给大家介绍bootstrap页面缩小变形的快速解决办法,需要的朋友参考下吧...2017-02-08
  • 微信小程序 教程之注册页面

    这篇文章主要介绍了微信小程序 注册页面的相关资料,需要的朋友可以参考下...2016-10-20
  • Illustrator文字转曲的操作方法与注意事项分享

    今天小编在这里就来给Illustrator的这一款软件的使用者们来说一说文字转曲的操作方法以及注意事项,各位想知道具体信息的使用者们,那么下面就快来跟着小编一起看看吧。...2016-09-14
  • javascript 判断页面访问方式电脑或者移动端

    这篇文章主要介绍了 判断页面访问方式电脑或者移动端的相关资料,这里提供了三种方法,需要的朋友可以参考下...2016-10-03
  • 在vue中实现嵌套页面(iframe)

    这篇文章主要介绍了在vue中实现嵌套页面(iframe),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-31
  • C#实现Winform中打开网页页面的方法

    这篇文章主要介绍了C#实现Winform中打开网页页面的方法,涉及WinForm中WebBrowser的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25