网页设计师怎么改善现有网站

 更新时间:2016年9月20日 19:04  点击:2018
我们大部分的设计师依旧在采用传统的表格布局、表现与结构混杂在一起的方式来建立网站。学习使用XHTML+ CSS的方法需要一个过程,使现有网站符合网站标准也不可能一步到位。最好的方法是循序渐进,分阶段来逐步达到完全符合网站标准的目标。如果你是新手,或者对代码不是很熟悉,也可以采用遵循标准的编辑工具,例如Dreamweaver MX 2004,它是目前支持CSS标准最完善的工具。
1.初级改善
为页面添加正确的DOCTYPE
很多设计师和开发者都不知道什么是DOCTYPE,DOCTYPE有什么用。DOCTYPE是document type的简写。主要用来说明你用的XHTML或者HTML是什么版本。浏览器根据你DOCTYPE定义的DTD(文档类型定义)来解释页面代码。所以,如果你不注意设置了错误的DOCTYPE,结果会让你大吃一惊。XHTML1.0提供了三种DOCTYPE可选择:

(1)过渡型(Transitional )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(2)严格型(Strict )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
(3)框架型(Frameset )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
对于我们初级改善来说,只要选用过渡型的声明就可以了。它依然可以兼容你的表格布局、表现标识等,不至于让你觉得变化太大,难以掌握。

Tip:你懒得输入上面过渡型代码的话,可以访问http://www.macromedia.com/网站的首页,然后查看源代码,把head区同样的代码拷贝粘贴就可以了。

设定一个名字空间(Namespace)
直接在DOCTYPE声明后面添加如下代码:

<html XMLns="http://www.w3.org/1999/xhtml" >
一个namespace是收集元素类型和属性名字的一个详细的DTD,namespace声明允许你通过一个在线地址指向来识别你的namespace。只要照样输入代码就可以。

声明你的编码语言
为了被浏览器正确解释和通过标识校验,所有的XHTML文档都必须声明它们所使用的编码语言。代码如下:

<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
这里声明的编码语言是简体中文GB2312,你如果需要制作繁体内容,可以定义为BIG5。

用小写字母书写所有的标签
XML对大小写是敏感的,所以,XHTML也是大小写有区别的。所有的XHTML元素和属性的名字都必须使用小写。否则你的文档将被W3C校验认为是无效的。例如下面的代码是不正确的:

<TITLE>公司简介</TITLE>
正确的写法是:

<title>公司简介</title> 同样的,<P>改成<p>,<B>改成<b>等等。这步转换很简单。
为图片添加 alt 属性
为所有图片添加alt属性。alt属性指定了当图片不能显示的时候就显示供替换文本,这样做对正常用户可有可无,但对纯文本浏览器和使用屏幕阅读机的用户来说是至关重要的。只有添加了alt属性,代码才会被W3C正确性校验通过。注意的是我们要添加有意义的alt属性,象下面这样的写法毫无意义:

<img src="http:///htmldata/2005-05-25/logo_unc_120x30.gif" alt="logo_unc_120x30.gif">
正确的写法:

<img src="http:///htmldata/2005-05-25/logo_unc_120x30.gif" alt="UNC公司标志,点击返回首页">
给所有属性值加引号
在HTML中,你可以不需要给属性值加引号,但是在XHTML中,它们必须被加引号。

例:height="100",而不能是height=100。

关闭所有的标签
在XHTML中,每一个打开的标签都必须关闭。就象这样:

<p>每一个打开的标签都必须关闭。</p> <b>HTML可以接受不关闭的标,XHTML就不可以。
 

    许多朋友将音乐文件改编成 Flash 动画,满足了自己自由发挥和想象创造的成就感。但是 Flash 文件需要 Flash 专用播放器来播放,那么在网页上如何实现 Flash 媒体文件的播放呢?当然可以象 WMP 及 Real 一样引用 Flash 播放器控件代码来加以实现,但是一个网页在引用了 WMP 和Real 播放器控件的情况下,又再引用 Flash 播放器控件,那将是非常的占用系统资源和影响电脑运行速度的,甚至造成死机。为此,谱乐探索出了一种 WMP 在网页上实现播放 Flash 媒体文件的重要方法。请点播放键观看效果。

    在视频区域单击鼠标右键,你就会发现媒体文件为 Flash 格式(下同)。

    实现方法谱乐将在谱乐专栏以后的专题中具体讲解,请大家密切关注,多多支持。

    大家知道,Flash 也是网页的一种表现形式,许多 Flash 高手甚至干脆就用 Flash 来表现整个网站。谱乐这里想说的是,Flash 也可表现为播放器形式,用来播放 MP3 音频文件和 Flv、Swf 视频文件。这类播放器也是网页播放器的一种。

    Flv 视频播放器

    媒体文件格式为 Flv 格式。

    MP3 音频播放器

  已有的网站是GB2312编码?看到UTF-8编码的优点有点心动?本文就是教你如何把网站从GB2312转为UTF-8。

  GB2312是简体中文的编码,所以当文章/网页中包含繁体中文、日文、韩文时,这些内容可能无法被正确编码。

  有一种比GB2312编码略广的编码,就是GBK,它包含了对繁体中文的编码,但对他国非拉丁字母语言还是有问题。

  UTF-8编码是一种目前广泛应用于网页的编码,它其实是一种Unicode编码,即致力于把全球所有语言纳入一个统一的编码。目前UTF-8已经把几种重要的亚洲语言纳入,包括简繁中文和日韩文字。采用UTF-8编码的网页某种意义上说就是“与国际接轨”了。此外,很多手机终端都使用UTF-8编码,如果网站考虑开发WAP界面而网站数据本身又是UTF-8编码,就省却了开发WAP界面时的转码问题。

  已有的网站是GB2312编码?看到UTF-8编码有点心动?本文就是教你如何把网站从GB2312转为UTF-8。

  在转换前,必须考虑网站是否有必要转码。我提供几点供参考:
  1、网站面向的对象,是局限一小圈子的人,还是中国大陆,还是包括港澳台在内的整个中国甚至全世界。

  2、在GB2312编码中一个汉字占2个字节,而在UTF-8中,一个汉字要占3个字节,这种空间增加的代价是否值得。

  3、在旧有的数据库系统上(例如MySQL 4.0及以前的版本)可能没有内置对UTF-8的支持,虽然本文有办法解决,但不排除还潜在一些小问题。

  4、网页文件转为UTF-8编码后是否方便编辑。我目前用ZDE4,设置好后对UTF-8编码支持非常好。设置方法是在菜单Tools->Preferences中,点Editing标签,把Encoding改为UTF-8即可。

考虑好决定转码以后,就可以开始了。本文仅以php 4.0~5.0 + MySQL 3.23~4.0为例。

  首先对准备转码的数据库,为其建立一个新的数据库及相应表结构用于存储转码结果。如果在没有内置支持UTF-8的数据库系统操作,则建议把用于存储中文的CHAR、VARCHAR、TEXT字段分别改为BINARY、VARBINARY、BLOB,虽然我试验过不改也没有问题。

  接着在操作系统命令行下执行如下命令导出原有的数据库(其中{dbname}用数据库名替换,{path1}用一个已存在的临时路径替换,导出的数据将会存放于此):
mysqldump --opt --comments=0 -n -t --fields-terminated-by=, --fields-escaped-by= {dbname} -uroot -p --tab={path1}

  上述命令中的用户root也可换为其它用户,但须保证有dump的权限。用转码工具,例如ConvertZ,把上面{path1}中的全部文件转为UTF-8编码。注意要关闭BOM选项。假设转码后的文件保存在路径{path2}。

  用有LOAD DATA权限的用户连接MySQL服务器,用use命令选择刚才新建的数据库,然后对每个表{table_name}执行如下命令:
LOAD DATA INFILE '{path2}{table_name}.txt' INTO TABLE {table_name} FIELDS TERMINATED BY ',' ESCAPED BY '';

  提示:表比较多的时候可以写个小程序生成一个SQL脚本。

  执行上述命令时可能会出现警告(Warnings),请留意Warning的这些行(Row),可能有些数据并没有转换成功,例如字段错位。

  根据经验,此种情况多数是由数据结尾的字节的16进制码大于7F所致。通常这些行数量是比较少的,可以手工修正这些行。

  至此数据库的转码就完成了。清理原数据库和转码过程的临时文件这里就不详述了。

  对网页转码:同样用转码工具把网站所有网页转为UTF-8编码。

  然后打开包含头部的网页文件/网页模版文件,把这样的行:

  替换为这样:

  据我的经验,如果网页采用css样式表控制网页样式,如果在css的body标签中设置了字体,那么在原来的gb2312编码下,该字体设置可以继承到intput和textarea中,但转为utf-8后,需要在input和textarea标签中重新设置字体。



  近来,网络上的SQL Injection 漏洞利用攻击,JS脚本,HTML脚本攻击似乎逾演逾烈.陆续的很多站点都被此类攻击所困扰,并非像主机漏洞那样可以当即修复,来自于WEB的攻击方式使我们在防范或者是修复上都带来了很大的不便。HOOO…… 一个站长最大的痛苦莫过于此.自己的密码如何如何强壮却始终被攻击者得到,但如何才能做到真正意义上的安全呢?第一,别把密码和你的生活联系起来;第二,Supermaster的PWD最好只有你自己知道;第三,绝对要完善好你的网站程序。然而怎样才能完善,这将是我们此文的最终目的。

  安全防护,如何做到安全防护?想要防护就要知道对方是如何进行攻击。有很多文章都在写如何攻下某站点,其实其攻击的途径也不过是以下几种:

  1. 简单的脚本攻击

  此类攻击应该属于无聊捣乱吧。比如****:alert(); </table>等等,由于程序上过滤的不严密,使攻击者既得不到什么可用的,但又使的他可以进行捣乱的目的。以目前很多站点的免费服务,或者是自身站点的程序上也是有过滤不严密的问题。

  2. 危险的脚本攻击

  这类脚本攻击已经过度到可以窃取管理员或者是其他用户信息的程度上了。比如大家都知道的cookies窃取,利用脚本对客户端进行本地的写操作等等。

  3. Sql Injection 漏洞攻击

  可以说,这个攻击方式是从动网论坛和BBSXP开始的。利用SQL特殊字符过滤的不严密,而对数据库进行跨表查询的攻击。比如:

  http://127.0.0.1/forum/showuser.asp?id=999 and 1=1

  http://127.0.0.1/forum/showuser.asp?id=999 and 1=2

  http://127.0.0.1/forum/showuser.asp?id=999 and 0<>(select count(*) from admin)

  http://127.0.0.1/forum/showuser.asp?id=999’; declare @a sysname set @a='xp_'+ 'cmdshell' exec @a 'dir c:'---&aid=9

  得到了管理员的密码也就意味着已经控制的整站,虽然不一定能得到主机的权限,但也为这一步做了很大的铺垫。类似的SQL Injection攻击的方式方法很多,对不同的文件过滤不严密所采取的查询方式也不同。所以说想做好一个完整的字符过滤程序不下一凡功夫是不可能的。

  4. 远程注入攻击

  某站点的所谓的过滤只是在提交表格页上进行简单的JS过滤。对于一般的用户来说,你大可不必防范;对早有预谋的攻击者来说,这样的过滤似乎根本没作用。我们常说的POST攻击就是其中一例。通过远程提交非法的信息以达到攻击目的。

  通过上面的攻击方法的介绍,我们大致的了解了攻击者的攻击途径,下面我们就开始重点的介绍,如何有效的防范脚本攻击!

  让我们还是从最简单的开始:

  l 防范脚本攻击

  JS脚本 和HTML脚本攻击的防范其实很简单:server.HTMLEncode(Str)完事。当然你还不要大叫,怎么可能?你让我把全站类似<%=uid%>都加过滤我还不累死?为了方便的过滤,我们只需要将HTML脚本和JS脚本中的几个关键字符过滤掉就可以了:程序体(1)如下:

  ‘以下是过滤函数

  <%

  function CHK(fqyString)

  fqyString = replace(fqyString, ">", ">")

  fqyString = replace(fqyString, "<", "<")

  fqyString = replace(fqyString, "&#", "&")

  fqyString = Replace(fqyString, CHR(32), " ")

  fqyString = Replace(fqyString, CHR(9), " ")

  fqyString = Replace(fqyString, CHR(34), """)

  首先,为了使大家能边看下面的介绍边上机操作,您需要在Windows 95或Windows NT上作如下准备工作。 

  1.建立ACCESS数据库,c:my documentsmydata.mdb。 

  2.在mydata数据库中建表mytable(a dblong,b dbtext,c dblong),并添加适量的试验数据。 

  3.建立系统DSN(database source name),在控制面板的ODBC中进行设置,取数据源名为ACCESSMDB,并指向刚建的mydata数据库。 

  4.安装PWS(Personal Web Server),它位于Windows 98光盘的addonspws目录中。 

  5.用frontpage在PWS上新建一Web,如http://yourhostname/myweb,在缺省情况下,yourhostname是您的主机名称。 

  6.用frontpage软件打开新建的myweb,并新建一子目录scripts,然后将scripts设置为可执行的子目录。 

  至此,如果您的设置正确,那么就可打开Internet Explorer(以下简称IE),并在地址栏中键入http://yourhostname/myweb/scripts后就会看到如下提示: 

  Directory Listing Denied 

  This Virtual Directory does not allow contents to be listed 

  这是因为该目录既无缺省的html文件(一般为default.htm),又不允许列出目录,但这已说明您的pws设置正确。下面来介绍第一种制作方法。 

  一.用Frontpage Database Region Wizard向导完成设置 

  ·打开Frontpage,进入已经建好的Web即myweb中,新建一页面newpage1,并编辑它。 

  ·单击菜单栏中的“insert”,并选择“database”、“database region wizard”,这时会弹出一个对话框。 

  ·在“odbc data source name”下的输入栏中,输入已建好的DSN,即Accessmdb,然后点击Next按钮进入下一步。 

  ·在“Enter the sql string for the query”下的输入栏中输入select a,b,c from mytable,然后点击Next按钮进入一下步。 

  ·点击Add按钮,在“enter the name of a query field to be added to the list”下的输入栏中输入字段名a,然后点击Ok按钮。 

  ·重复上一步,将字段b和c都添加到查询列表中。 

  ·点击Finish按钮。 

  ·此时系统会提示您将该页面保存在可执行的目录中,并将扩展名改为*.asp,按照提示将newpage1.htm移动到scripts目录中,将newpage1.htm重命名为newpage1.asp。 

  在IE地址栏中输入http://youhostname/myweb/scripts/newpage1.asp,按回车后就会看到数据库中的实验数据被显示了出来。 

  此种方法操作简单,但不灵活,生成的html文件可读性差,不容易添加二次链接。 

SyntaxHighlighter.highlight();

[!--infotagslink--]

相关文章

  • php漏洞之跨网站请求伪造与防止伪造方法

    今天我来给大家介绍在php中跨网站请求伪造的实现方法与最后我们些常用的防止伪造的具体操作方法,有需要了解的朋友可进入参考。 伪造跨站请求介绍 伪造跨站请求...2016-11-25
  • photoshop设计一幅大鱼海棠动画片海报制作实例教程

    今天小编在这里就来给各位photoshop的这一款软件的使用者们来说一说设计一幅大鱼海棠动画片海报制作的实例教程,各位想知道具体制作步骤的使用者们,那么各位就快来看看...2016-09-14
  • 如何获取网站icon有哪些可行的方法

    获取网站icon,常用最简单的方法就是通过website/favicon.ico来获取,不过由于很多网站都是在页面里面设置favicon,所以此方法很多情况都不可用。 更好的办法是通过google提供的服务来实现:http://www.google.com/s2/favi...2014-06-07
  • ps怎么制作倒影 ps设计倒影的方法

    ps软件是一款非常不错的图片处理软件,有着非常不错的使用效果。这次文章要给大家介绍的是ps怎么制作倒影,一起来看看设计倒影的方法。 用ps怎么做倒影最终效果&#819...2017-07-06
  • C语言程序设计第五版谭浩强课后答案(第二章答案)

    这篇文章主要介绍了C语言程序设计第五版谭浩强课后答案(第二章答案),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2021-04-02
  • Photoshop设计商务名片的5种常见思路分享

    今天小编在这里就来给Photoshop的这一款软件的使用者们来说下计商务名片的5种常见思路,各位想知道的使用者,那么下面就快来跟着小编一起看一看吧。 给各位Photosho...2016-09-14
  • mac下Apache + MySql + PHP搭建网站开发环境

    首先为什不自己分别搭建Apache,PHP和MySql的环境呢?这样自己可以了解更多知识,说起来也更酷。可也许因为我懒吧,我是那种“既然有现成的,用就是了”的人。君子生非异也,善假于物也。两千年前的荀子就教导我们,要善于利用工具...2014-06-07
  • 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
  • WPF实现类似360安全卫士界面的程序源码分享

    最近在网上看到了新版的360安全卫士,感觉界面还不错,于是用WPF制作了一个,时间有限,一些具体的控件没有制作,用图片代替了。感兴趣的朋友一起跟着小编学习WPF实现类似360安全卫士界面的程序源码分享...2020-06-25
  • php实现网站留言板功能

    我要实现的就是下图的这种样式,可参考下面这两个网站的留言板,他们的实现原理都是一样的畅言留言板样式:网易跟帖样式:原理 需要在评论表添加两个主要字段 id 和 pid ,其他字段随意添加,比如文章id、回复时间、回复内容、...2015-11-08
  • 网站广告怎么投放最好?首屏广告投放类型优化和广告位布局优化的案例

    网站广告怎么投放最好?一个网站中广告位置最好的是哪几个地方呢,许多的朋友都不知道如何让自己的网站广告收效最好了,今天我们就一起来看看吧。 在说到联盟优化前,...2016-10-10
  • photoshop安卓和苹果界面设计之尺寸规范详解

    今天小编在这里就来给各位photoshop的这一款软件的使用者们来说下安卓和苹果的界面设计之尺寸规范,各位想知道的使用者们,那么下面就快来跟着小编一起看看吧。 给...2016-09-14
  • 基于JavaScript实现网页倒计时自动跳转代码

    这篇文章主要介绍了基于JavaScript实现网页倒计时自动跳转代码 的相关资料,需要的朋友可以参考下...2015-12-29
  • 网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别

    我们现在使用的软件都会自动在前面加一个申明了,那么在网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别是什么呢?下面我们就一起来看看吧. 单...2016-09-20
  • photoshop设计重影效果具体制作教程

    今天小编在这里就来给各位photoshop的这一款软件的使用者们来说一说设计重影效果具体的制作教程,各位想知道具体制作方法的软件使用者们,那么大家就来看下小编带来的教...2016-09-14
  • Illustrator结合photoshop设计可爱的卡通女厨师头像制作教程

    今天小编在这里就来给Illustrator的这一款软件的使用者们来说一说结合photoshop设计可爱的卡通女厨师头像的制作教程,各位想知道具体制作步骤的使用者们,那么下面就快来...2016-09-14
  • PS怎么设计T恤 PS制作T恤教程

    PS怎么设计T恤?很多人都想要在T恤上有自己喜欢的图案,那么自己设计T恤的图案是方法之一,本次为大家带来了详细的ps设计T恤教程,有兴趣的同学快来看看吧。 1、打开PS,新...2016-12-31
  • photoshop设计一张节约用水环保主题海报制作教程

    今天小编在这里就来给photoshop的这一款软件的使用者们来详细的说说设计一张节约用水环保主题海报的制作教程,各位想知道具体制作方法的使用者们,那么下面就快来跟着小...2016-09-14
  • 个人站长做网站应该考虑的一些问题

    个人网站建设应该考虑哪些问题呢?这个问题我们先在这里不说,下文会一一列出来,希望这些建义能帮助到各位同学哦。 我相信VIP成员里面有很多站长,每个人几乎都拥有一个...2016-10-10