网页制作各种问题.docx

网页制作各种问题.docx

《网页制作各种问题.docx》由会员分享，可在线阅读，更多相关《网页制作各种问题.docx（39页珍藏版）》请在冰豆网上搜索。

网页制作各种问题

网页设计CSS布局调试的有效方法

来源：

Pchome‖作者：

未知‖点击：

23042‖时间：

09-10-2815:

28:

46‖【大中小】‖我要投稿

网页设计中CSS布局是很重要的部分，下面介绍几种检查调试CSS布局的有效方法。

1.检查HTML元素是否有拼写错误、是否忘记结束标记

即使是老手也经常会弄错div的嵌套关系。

可以用dreamweaver的验证功能检查一下有无错误。

2.检查CSS是否书写正确

检查一下有无拼写错误、是否忘记结尾的}等。

可以利用CleanCSS来检查CSS的拼写错误。

CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。

3.用删除法确定错误发生的位置

如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。

4.利用border属性确定出错元素的布局特性

使用float属性布局一不小心就会出错。

这时为元素添加border属性确定元素边界，错误原因即水落石出。

5.float元素的父元素不能指定clear属性

MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。

这是MacIE的著名的bug，倘若不知道就会走弯路。

6.float元素务必指定width属性

很多浏览器在显示未指定width的float元素时会有bug。

所以不管float元素的内容如何，一定要为其指定width属性。

另外指定元素时尽量使用em而不是px做单位。

7.float元素不能指定margin和padding等属性

IE在显示指定了margin和padding的float元素时有bug。

因此不要对float元素指定margin和padding属性（可以在float元素内部嵌套一个div来设置margin和padding）。

也可以使用hack方法为IE指定特别的值。

8.float元素的宽度之和要小于100%

如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。

因此请保证宽度之和小于99%。

9.是否重设了默认的样式？

某些属性如margin、padding等，不同浏览器会有不同的解释。

因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。

10.是否忘记了写DTD？

如果无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头是不是忘了写下面这行DTD：

http:

//www.w3.org/TR/html4/loose.dtd“》

网站制作入门:

了解网站设计的内容有哪些？

来源：

‖作者：

zyzz‖点击：

27978‖时间：

09-09-1414:

16:

59‖【大中小】‖我要投稿

设计网站需要严谨的思考和周全的计划。

最重要的事情是了解您的受众（用户）。

用户都是浏览者

如果您认为一般的用户会完完整整地阅读您的网页，那么您就错了。

无论您在网页中发布了多么有用的信息，一个访问者在决定是否继续阅读之前仅仅会花几秒钟的时间进行浏览。

如果您希望用户阅读您的文字，请确保在页面段落的第一句就说明您的观点。

另外，您还需要在整个页面中使用简短的段落以及有趣的标题。

少即是多

使所有的句子尽可能地短。

使所有的段落尽可能地短。

使所有的章节尽可能地短。

使您的页面尽可能地短。

请在段落和章节之间使用很多的留白。

充斥着冗长文字的页面会赶走您的用户。

也不要在单一的页面上放置太多的内容。

如果确实有必要传递大量的信息，请尽量把内容分为小块，然后放入不同的页面中。

不要指望每个访问者都能把一张数千字的页面一路滚动到底。

导航

尽量创建通用于网站中所有页面的导航结构。

把文本段落中的超链接使用量降至最低。

请不要使用文本段落内的超链接随意地把访问者带到别的页面。

因此这样做会破坏导航结构一致性的感觉。

如果您必须使用超级链接，请把它们添加到段落的底部，或站点的导航菜单。

下载速度

最常见的错误是用于网站开发者的开发环境造成的，例如使用一台本地的机器开发站点，或者使用一条高速的因特网连接。

开发人员有时不会意识到下载他们的页面要花很长的时间。

因特网可用性方面的研究告诉我们，如果网页的下载时间超过7秒，大多数的访问者会选择离开。

在您发布任何大量的内容前，请确保这些页面在低速的调制解调器连接上进行过测试。

如果您的页面需要花大量的时间下载，您或许应当考虑删除某些图片或多媒体内容。

允许您的用户发言！

得到来自用户的反馈是件好事情。

您的访问者就是你的“客户”。

他们经常会给您一些有价值的点子，或者无偿地向您提供改进的建议。

如果您提供了某种方便的联系途径，您将得到来自很多技能和知识都各不相同的人们大量有益的反馈。

网页设计中的tab应用的两种类型

来源：

网页教学网‖作者：

未知‖点击：

4838‖时间：

09-09-1211:

15:

46‖【大中小】‖我要投稿

当今，网页设计中的tab应用十分普遍，不过一般都脱离不了一下两种类型：

第1种鼠标单击切换。

此种情形下tab是没有链接的（但是在选中的tab区域内增加更多或者more链接）。

第2种鼠标悬浮切换。

此种情况下很多tab都加了链接，所以a:

hover应该生效，也就是鼠标停靠时有下滑下或颜色等提示。

其实这也是Norman设计理念里，对于用户恰当Feedback（反馈）的实践。

在实际案例中，我们看到了一些好的设计，也有些我不赞成的设计，这里稍做分享。

案例一：

yahoo美国首页，属于第1种tab设计，但是注意右下角的框框哦。

案例二：

淘宝首页的tab设计有三处，但是仔细看一下，却发觉各有差异。

比较疑惑的是，为什么首页只有3个tab设计，但是却各不一样呢？

难道一个页面需要多个前端介入？

第一个tab设计属于单击切换，无附加链接。

（顶）

第二个tab设计属于悬浮切换，但是没有a:

hover来反馈tab上的链接。

（扁）

第三个tab设计属于悬浮切换，添加了a:

hover反馈tab上的链接。

（顶）

案例三：

QQ弹窗。

最不招人喜欢的QQ弹窗，tab上也没有链接反馈，相信的流量很多是被这样无辜地骗来的。

（扁）

插播一段：

我一直对QQ弹窗的设计有微辞，一个只能放5个tab的位置居然间接的放了7个，于是不得不多出一个左右翻滚tab的设计。

至于增加一个看起来意义不大却比较显眼的［您可以拖动该页卡进行排序］真正价值有多少。

DreamweaverMX2004新增加了表格宽度辅助线功能，让我们在编辑网页表格的时候能清楚地看到表格中各单元的宽度以及变化，很直观。

但是如果我们不想让DreamweaverMX2004自动显示宽度辅助线，该怎么办呢?

下面介绍三种办法。

取消表格宽度辅助线显示以后，如果想再次显示，只要按方法二、三设置好“表格宽度”显示即可。

方法一

选中表格，点击宽度辅助线数字和小三角形，从菜单中选择“隐藏表格宽度”。

方法二

点击工具栏上的视图（viewoption）图标，从下拉菜单中选择“可视化助理”，把“表格宽度”前面的钩去掉。

方法三

选择菜单“视图-可视化助理”，把“表格宽度”前面的钩去掉。

/*

神奇的魔盒

bysxl001

*/

stop（）;

mc.t.restrict=".0-9";

//限制输入只能为数字

//go出盒数字控制i排列位置用v运动速度

vargo:

Boolean=false,i:

Number=0,v:

Number=10;

t1.text="开始";

btn.onPress=function（）{

//开始按钮

if（mc.t.text!

=""）{

btn._visible=false;

t1.text="";

v=10;

varj:

Number=i+1;

//this["m"+i]this["m"+j]调出库中m作为出盒数字载体

this["m"+i]=attachMovie（"m","m"+i,_root.getNextHighestDepth（））;

this["m"+j]=attachMovie（"m","m"+j,_root.getNextHighestDepth（））;

mask.swapDepths（_root.getNextHighestDepth（））;

//遮隹出盒数字

this["m"+i]._x=260;

//出盒数字位置

this["m"+j]._x=260;

this["m"+i]._y=220;

this["m"+j]._y=220;

varnum:

Number=Number（mc.t.text）;

//取得输入数字

this["m"+i].t.text=num;

this["m"+j].t.text=2*num;

//2倍

run（mc,240,190,this["m"+i],this["m"+j]）;

//移动进盒数

go=true;

}

};

functionrun（target:

MovieClip,endx:

Number,endy:

Number,target1:

MovieClip,target2:

MovieClip）{

target.onEnterFrame=function（）{

vardisx:

Number=（endx-this._x）/v;

vardisy:

Number=（endy-this._y）/v;

this._x+=disx;

this._y+=disy;

if（Math.abs（this._x-endx）<=1）{

this._x=endx;

this._y=endy;

deletethis.onEnterFrame;

if（go）{

v=5;

//移动出盒的两个数

run（target1,410,endy-100+i*30）;

run（target2,480,endy-100+i*30）;

go=false;

i++;

}else{

back_btn._visible=true;

t2.text="再来";

}

}

};

}

back_btn._visible=false;

back_btn.onPress=function（）{

this._visible=false;t2.text="";

mc.t.text="";

mc._x=90;

//输入文本框归位

mc._y=192;

btn._visible=true;

t1.text="开始";

};

编辑本段什么是网站制作?

　　什么是网站制作呢？

通俗的来说就是网站通过页面结构定位，合理布局，图片文字处理，程序设计，数据库设计，NNT流量等一系列工作的总和。

也是将网站设计师的图片用HTML方式展示出来，属于前台工程师的一项任务，前台工程师任务包括：

网站设计、网站用户体验、网站JAVA效果、网站制作等工作。

网站制作是网站策划师、网络程序员、网页设计师等岗位，应用各种网络程序开发技术和网页设计技术，为企事业单位、公司或个人在全球互联网上建设站点，并包含域名注册和主机托管等服务的总称。

的v更方便v（2张）

编辑本段制作流程：

第一步：

确定网站主题

　　做网站，首先必须要解决的就是网站内容问题，即确定网站的主题。

美国《个人电脑》杂志（PCMagazine）评出了99年度排名前100位的全美知名网站的十类题材：

　　第1类：

网上求职；NNT流量

　　第2类：

网上聊天/即时信息/ICQ；

　　第3类：

网上社区/讨论/邮件列表；

　　第4类：

计算机技术，

　　第5类：

网页/网站开发；

　　第6类：

娱乐网站；

　　第7类：

旅行；

　　第8类：

参考/资讯；

　　第9类：

家庭/教育；

　　第10类：

生活/时尚。

我们可以参看上面的分类，继续细分。

如果自己在某些方面有兴趣，或掌握的资料较多，也可以做一个自己感兴趣的东西，一者，你可以有自己的见解，做出自己的特色；二者，在制作网站时不会觉得无聊或者力不从心。

兴趣是制作网站的动力，没有创作热情，很难设计制作出优秀的作品。

　对于内容主题的选择，要做到小而精，主题定位要小，内容要精。

不要去试图制作一个包罗万象的站点，这往往会失去网站的特色，也会带来高强度的劳动，给网站的及时更新带来困难。

记住：

在互联网上只有第一，没有第二！

　有些网站设计都在网站上加入许多不相关的内容，想以此吸引浏览者，但往往会适得其反。

第二步：

做好网站规划

　　规划的内容应该主要包括但不局限于如下几项：

　　1、域名和主机的选择（域名需要依靠网站主题以及用户范围来选择，主机则根据网站在大小、安全、稳定上的需求）知名的如中国网络服务；

　　2、网站的定位（如定位于赢利性网站，还是企业网站，或是公益性的……）；

　　3、网站的用途（是用来赢利的，还是做产品线上营销的，或是做品牌推广和整合的）；

网站制作流程

4、网站的发展目标（需要达到的目标，需要为这个目标而努力的）；

　　5、网站的拓扑图构画（网站包括哪些栏目，采用什么样的制作结构）；

　　6、网站制作技术的采用（用哪种语言开发，在什么平台上开发）；

　　7、网站的推广（需要做具体什么样的工作去推广网站，是否需要在前期开发的时候就考虑到后期的推广，如SEO专家的建议）；

　　8、网站的维护（是自主维护，还是外包维护，维护的内容包括哪些，后期改版的时间间隔安排等）；

　　9、网站安全（网站定期进行安全检测及备份等安全操作）；

　　10、网站的主题颜色（网站颜色可以直接反应出企业的行业所属）。

第三步：

选择好域名

　　域名

是网站在互联网上的名字，是在互联网上相互联络的网络地址。

一个非产品推销的纯信息服务网站，其所有建设的价值，都凝结在其网站域名之上。

失去这个域名，就将前功尽废。

　　目前，做个人网站的很多都依赖免费个人空间，其域名也是依赖免费域名指向，如网易的虚拟域名服务，其实这对个人网站的推广与发展很为不利，不光是它“适时”开启的窗口妨碍了浏览者的视线和好感，让人一看就知道是个人网站，而且也妨碍了网页的传输速度。

所以，就我个人观点来讲，首先花点钱去注册一个域名，独立的域名就是个人网站的第一笔财富，要把域名起得形象、简单、易记。

第四步：

掌握建网工具

　　网络技术的发展带动了软件业的发展，所以用于制作Web页面的工具软件也越来越丰富。

从最基本的HTML编辑器到现在非常流行的Flash互动网页制作工具，各种各样的Web页面制作工具，下面是几款具有代表性的网页制作器：

　　1.HTML编辑器。

虽然HTML代码复杂，编辑和调试要花费大量的时间，但因HTML的稳定性、广泛支持性及可创建复杂的页面效果，仍受高级网页制作人员的青睐。

就目前来说，有众多的编辑器供选择，这些编辑器广泛支持复杂页面创建及高级HTML规范，使用较为普遍的有Hotdog等专业HTML编辑器。

　　2.所见即所得的网页编辑器。

其中以MicrosoftFrontpage为代表，它具有如Word一样的操作界面，熟知Word功能的操作者，只要稍加培训就能轻松编制网页。

而且，Frontpage还能解析网页的HTML源代码，并提供了预览支持。

但Frontpage的一些特殊显示功能并不能在其它非IE浏览器下实现。

所以Frontpage是一款非常适合初、中级网页制作人员使用的工具软件。

　　3.现在非常流行的Macromedia公司（已被Adobe公司收购）出品的Flash互动网页制作工具。

这是一款功能非常强大的交互式矢量多媒体网页制作工具。

能够轻松输出各种各样的动画网页，它不需要特别繁杂的操作，也比JAVA小巧精悍！

但它的动画效果、互动效果、多媒体效果十分出色。

而且还可以在Flash动画中封装Mp3音乐、填写表单等；并且由于Flash编制的网页文件比普通网页文件要小得多，所以大大加快了浏览速度。

这是一款十分适合动态Web制作的工具。

　　4.Dreamweaver:

Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。

　　另外，个人网站制作者还需了解W3C的HTML4.0规范、CSS层叠样式表的基本知识、javascript、VBScript的基本知识。

对于常用的一些脚本程序如ASP、CGI、PHP也要有适当了解，还要熟练使用图形处理工具和动画制作工具以及矢量绘图工具，并能部分了解多种图形图像动画工具的基本用法，熟练使用FTP工具以及拥有相应的软硬件和网络知识也是必备的。

　　当然，互联网还是一个免费的资料库。

编制网页需要多种多样的按钮、背景还有各种各样图形、图片。

如果这些都要靠自己完成，既浪费时间又浪费金钱，而且还需要强大的图形、图片制作技术。

所以，为了省却这些麻烦，网站制作者完全可以从网上下载各种精美实用的图片、按钮、背景等网页素材。

第五步：

确定网站界面

　　界面就是网站给浏览者的第一印象，往往决定着网站的可看性，在确定网站的界面时要注意以下三点：

1、栏目与板块编排

　　构建一个网站就好比写一篇论文，首先要列出提纲，才能主题明确、层次清晰。

网站建设初学者，最容易犯的错误就是：

确定题材后立刻开始制作，没有进行合理规划。

从而导致网站结构不清晰，目录庞杂混乱，板块编排混乱等。

结果不但浏览者看得糊里糊涂，制作者自己在扩充和维护网站也相当困难。

所以，我们在动手制作网页前，一定要考虑好栏目和板块的编排问题。

　　网站的题材确定后，就要将收集到的资料内容作一个合理的编排。

比如，将一些最吸引人的内容放在最突出的位置或者在版面分布上占优势地位。

栏目的实质为一个网站的大纲索引，索引应该将网站的主体明确显示出来。

在制定栏目的时候，要仔细考虑，合理安排。

　　在栏目编排时需要注意的是：

　　●尽可能删除那些与主题无关的栏目；

　　●尽可能将网站内最有价值的内容列在栏目上；

　　●尽可能从访问者角度来编排栏目以方便访问者的浏览和查询；辅助内容，如站点简介、版权信息、个人信息等大可不必放在主栏目里，以免冲淡主题。

　　另外，板块的编排设置也要合理安排与划分。

板块比栏目的概念要大一些，每个板块都有自己的栏目。

举个例子：

ENET硅谷动力的站点分新闻、产品、游戏、学院等板块，每个板块下面又各有自己的主栏目。

一般来说，个人站点内容较少，只要分个栏目也就够了，不需要设置板块。

如果有必要设置板块的，应该注意：

　　●各板块要有相对独立性；

　　●各板块要有相互关联；

　　●各板块的内容要围绕站点主题。

2、目录结构与链接结构

　　网站的目录是指建立网站时创建的目录。

例如：

在用Frontpage建立网站时都默认建立了根目录和Images子目录。

目录的结构是一个容易忽略的问题，大多数站长都是未经规划，随意创建子目录。

目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于站点本身的维护，以后内容的扩充和移植有着重要的影响。

所以建立目录结构时也要仔细安排，比如：

　　●不要将所有文件都存放在根目录下。

有网站制作者为了方便，将所有文件都放在根目录下。

这样就很容易造成：

文件管理混乱，搞不清哪些文件需要编辑和更新，哪些无用的文件可以删除，哪些是相关联的文件，影响工作效率；上传速度变慢，服务器一般都会为根目录建立一个文件索引，如果将所有文件都放在根目录下，那么即使只上传更新一个文件，服务器也需要将所有文件再检索一遍，建立新的索引文件，很明显，文件量越大，等待的时间也将越长。

　　●按栏目内容建立子目录。

子目录的建立，首先按主栏目建立。

友情连接内容较多，需要经常更新的可以建立独立的子目录。

而一些相关性强，不需要经常更新的栏目，例如：

网站简介、站长情况等可以合并放在一个统一目录下。

所有程序一般都存放在特定目录，例如：

CGI程序放在cgi-bin目录，所有提供下载的内容也最好放在一个目录下，便于维护管理。

　　●在每个主目录下都建立独立的Images目录。

一般来说，一个站点根目录下都有一个默认地Images目录。

将所有图片都存放在这个目录里很是不方便，比如在栏目删除时，图片的管理相当麻烦。

所以为每个主栏目建立一个独立的Images目录是方便管理的。

原因很简单，就是方便维护与管理。

　　其它需要注意的还有：

目录的层次不要太深，不要超过3层；不要使用中文目录，使用中文目录可能对网址的正确显示造成困难；不要使用过长的目录，太长的目录名不便于记忆；尽量使用意义明确的目录，以便于记忆和管理。

　　网站的链接结构是指页面之间相互链接的拓扑结构。

它建立在目录结构基础之上，但可以跨越目录。

形象的说：

每个页面都是一个固定点，链接则是在两个固定点之间的连线。

一个点可以和一个点连接，也可以和多个点连接。

更重要的是，这些点并不是分布在一个平面上，而是存在于一个立体的空间中。

一般的，建立网站的链接结构有两种基本方式：

　　●树状链接结构（一对一），这类似DOS的目录结构，首页链接指向一级页面，一级页面链接指向二级页面。

这样的链接结构浏览时，一级级进入，一级级退出，条理比较清晰，访问者明确知道自己在什么位置，不会“不知身在何处”，但是浏览效率低，一个栏目下的子页面到另一个栏目下的子页面，必须回到首页再进行。

　　●星状链接结构（一对多），类似网络服务器的链接，每个页面相互之间都建立有链接。

这样浏览比较方便，随时可以到达自己喜欢的页面。

但是由于链接太多，容易使浏览者迷路，搞不清自己在什么位置，看了多少内容。

　　因此，在实际的网站设计中，总是将这两种结构混合起来使用。

网站希望浏览者既可以方便快速地达到自己需要的页面，又可以清晰地知道自己的位置。

所以，最好的办法是：

首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结构。

关于链接结构的设计，在实际的网页制作中是非常重要一环，采用什么样的链接结构直接影响到版面的布局。

3.进行形象设计

　　网站的设计可以从以下几点出发：

　　●设计网站标志（LOGO）。

LOGO是指网站的标志，标志可以是中文、英文字母，也可以是符号、图案等。

标志的设计创意应当来自网站的名称和内容。

比如：

网站内有代表性的人物、动物、植物，可以用它们作为设计的蓝本，加以卡通化或者艺术化；专业网站可以以本专业有代表的物品作为标志。

最常用和最简单的方式是用自己网站的英文名称作标志，采用不同的字体、字母的变形、字母的组合可以很容易制作好自己的标志。

　　●设计网站色彩。

网站给人的第一印象来自视觉冲击，不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。

“标准色彩”是指能体现网站型象和延伸内涵的色彩，要用于网站的标志，标题，主菜单和主色块。

给人以整体统一的感觉。

至于其它色彩也可以使用，但应当只是作为点缀和衬托，绝不能喧宾夺主。

一般来说，一个网站的标准色彩不超过3种，太多则让人眼花缭乱。

适合于网页标准色的颜色有：

蓝色，黄、橙色，黑、灰、白色三大系列色。

　　●设计网站字体。

和标准色彩一样，标准字体是指用于标志，标题，主菜单的特有字体。

一般网页默认的字体是宋体。

为了体现站点的“与众不同”和特有风格，可以根据需要