首页 > 编程技术 > html

首页的设计

发布时间:2016-9-20 19:02

    在我们全面考虑好网站的栏目,链接结构和整体风格之后,我们就可以正式动手制作首页了。有这么一句俗语:"良好的开端是成功的一半"。在网站设计上也是如此,首页的设计是一个网站成功与否的关键。人们往往看到第一页就已经对你的站点有一个整体的感觉。是不是能够促使浏览者继续点击进入,是否能够吸引浏览者留在站点上,全凭首页设计的"功力"了。所以,首页的设计和制作是绝对要重视和花心思的。阿捷的经验是:一般首页设计和制作占整个制作时间的40%。你宁可多花些时间在早期,以免出现全部做好以后再修改,那将是最浪费精力的事。
  这里,先插一个“封面”的问题。封面是指没有具体内容,只放一个logo点击进入或者只有简单的图形菜单的首页。
是否需要为站点设计一个“封面”?阿捷的个人观点是:没必要!除非你是很艺术类的站点,或者可以确信内容独特,可以吸引浏览者进一步点击进入的站点,否则的话,封面式的首页并不会给你的站点带来什么好处。我们上网浏览需要的是快速,有价值的信息,如果等待xx分钟,只显示出一个粗劣的“ENTER”图标,那么相信没有人会再耐心等待进入下一页。
  因为首页的重要性,我将着重用8篇文章来仔细讨论有关首页设计的方方面面,大致提纲如下:
  ○版面布局的窍门
  ○色彩的搭配
  ○字体的设置和表格的嵌套
  ○细微之处见功力
  ○考虑不同的浏览器和分辨率
  ○设计好你的banner和位置
  ○meta标签的重要性
  ○首页设计的小建议
  今天,只是关于首页设计的一个引子。让我们来大致了解一下首页设计的步骤。首页,从根本上说就是全站内容的目录,是一个索引。但只是罗列目录显然是不够的,如何设计好一个首页呢?一般的步骤是:
    ●确定首页的功能模块
    ●设计首页的版面
    ●处理技术上的细节
    一).确定首页的功能模块。
  首页的内容模块是指你需要在首页上实现的主要内容和功能。一般的站点都需要这样一些模块:
网站名称(logo), 广告条(banner), 主菜单(menu),
新闻(what"s new), 搜索(search), 友情链接(links),
邮件列表(maillist),计数器(count), 版权(copyright).
  选择哪些模块,实现哪些功能,是否需要添加其他模块都是首页设计首先需要确定的。
     二).设计首页的版面
  在功能模块确定后,开始设计首页的版面。就象搭积木,每个模块是一个单位积木,如何拼搭出一座漂亮的房子,就看你的创意和想象力了。
  设计版面的最好方法是:找一张白纸,一支笔,先将你理想中的草图勾勒出来,然后再用网页制作软件实现。
  三).处理技术上的细节   
  我经常收到的来信问题就是:我制作的主页如何能在不同分辨率下保持不变形,如何能在IE和NC下看起来都不至于太丑陋,如何设置字体和链接颜色....等等,我将在下面几篇文章里为大家详细介绍。
  首页设计是整个网站设计的难点和关键,我希望能够通过和大家的交流,总结出一套较为合理易学的设计方法,从而举一反三,使我们能够更加轻松的完成整个站点的设计制作。


    你可能已经注意到,现在许多网站的首页上都有这么一个链接“按这里将本站设为首页”(这里的首页指的是浏览器的起始页)。
    不但大的ISP,ICP这么做,一些个人主页也推出这一“服务”以招揽网友。
  具体是如何实现这个功能的呢?我来帮你剖析一下:
  点击那个超链接会显示下载一个名为lspace.reg的文件,下载后双击它,便会修改你的注册表,然后当你再打开浏览器的时候,起始页就发生了变化。(一听到修改注册表,许多网友就比较"怵",会不会把windows给弄坏了。)
  别怕,我们来打开lspace.reg看看(用最普通的notepad记事本就可以打开),发现内容如下:
  REGEDIT4
  [HKEY_CURRENT_USERSoftwareMicrosoftInternet ExplorerMain]
  "Start Page" = "http:///"
  [HKEY_CURRENT_USERSoftwareNetscapeNetscape NavigatorMain]"Home Page" = "http:///"
  原来就两条,第一条设置IE的star page;第二条设置NC的home page(没什么花头噢:)。后面跟的URL就是你主页的网址!


<

若想在整页中去掉超链结的下划线,
在<head>与</head>之间加上
<style>
<!--
a{text-decoration:none}
-->
</style>
若只对特定链接使用,则链接语法为
<ahref="你的链接"style=text-decoration:none></a>
  如何使鼠标放到有超级链接的字体时出现字体颜色变化?
  在<head>与</head>之间加上
<style>
<!--
a:link{color:$}
a:visited{color:$}
a:active{color:$}
a:hover{color:$}
-->
</style>


  其中link是超链接的颜色,visited是访问过的链接颜色,hover是鼠标移上去的颜色。把$
换成你需要的颜色,例如black或#000000。还可与下划线一起使用,如
a:hover{color:$;text-decoration:none}




<

  看到上面的导航条了吗?你可以点击一下看看它的效果,请注意,这可是用表格做出来的,你相信吗?其实代码很简单,现在让我们来看看该怎么做。

  1.首先创建一个1x6的表格,参数为:border=0 cellspacing=3 cellpadding=0;

  2.在这个表格的每个单元格内分别插入一个表格,宽度和高度设为100%;

  3.建立一个css样式.up.down;代码如下:

<style>
.up{
border:4 outset royalblue;color:yellow;background:blue;cursor:hand
}
.down{
border:4 inset royalblue;color:#33ff33;background:blue;cursor:hand
}
</style>


在HTM(HTML)文件中是否可以像PHP、ASP文件一样嵌入其他文件呢?下面笔者介绍用iframe来实现的方法。

  iframe元素的功能是在一个文档里内嵌一个文档,创建一个浮动的帧。其部分属性简介如下:

name:内嵌帧名称

width:内嵌帧宽度(可用像素值或百分比)

height:内嵌帧高度(可用像素值或百分比)

frameborder:内嵌帧边框

marginwidth:帧内文本的左右页边距

marginheight:帧内文本的上下页边距

scrolling:是否出现滚动条(“auto”为自动,“yes”为显示,“no”为不显示)

src:内嵌入文件的地址

style:内嵌文档的样式(如设置文档背景等)

allowtransparency:是否允许透明
 
  明白了以上属性后,我们可用以下代码实现,在main.htm 中把samper.htm文件的内容显示在一个高度为80、宽度为100%、自动显示边框的内嵌帧中:

〈iframe name="import_frame" width=100%

height=80" width=100% src="samper.htm" frameborder=auto〉

〈/iframe〉


  不错吧,马上“Ctrl+C”、“Ctrl+V”试试。

  有时我们为强调页面的某项内容,想让它先于页面的其他内容显示。同样用iframe即可轻松实现:

  先把要强调显示的内容另存为一个文件,如first.htm ,然后通过一个预载页index.htm,内容如下:

〈meta http-equiv="refresh" content="3,url=index2.htm"〉

〈body〉

  页面加载中,请稍候……〈iframe" width=100% src="first.htm" style="display:none"〉〈/iframe〉

〈/body〉

  主文件index2.htm

〈body〉

〈iframe" width=100% src="first.htm" 加入其他属性限制〉〈/iframe〉

〈/body〉

  first.htm的内容就会先于页面的其他内容出现在您的浏览器里了,是不是很简单?再“Ctrl+C”、“Ctrl+V”一次?


<
标签:[!--infotagslink--]