任何一个网站都有一个主页，一般进入网站时看到的第一个页面就是主页，该页面通常在整个网站中起导航作用，是建设一个网站的主要任务和亮点。其他的页面统称为内页，是指与主页相链接的与本网站相关的其他页面，其中包括多种多样的网页元素，如文字、图像、动画和超级链接等。如图1所示是我们熟知的《电脑编程技巧与维护》杂志的网站网站主页。从中可以看出，整个主页是按功能进行分区的。
将鼠标光标移到上面时会变为手形
动态消息 页脚：可显示页面操作状态
网站页面一般分为静态页面和动态页面两种，静态网页和动态网页并不是以网页中是否包含动态元素来区分的，而是针对客户端与服务器端是否发生交互而言，其中发生交互的是动态网页，不发生交互的是静态网页。动态页面是目前网站设计与建设的发展主流和方向，成为网站建设的主要内容，也是动态网站设计的关键技术所在。
一、网络术语
1．万维网（World Wide Web）
万维网简称WWW或3W，是目前Internet（因特网）上最流行的一种资源形式，它是基于超文本格式的。利用万维网可以将全世界的各种信息链接在一起，用户可通过网络无偿地访问这些资源并加以利用。
2．浏览器
使用浏览器访问网络中的各种资源就像在因特网的海洋中冲浪一样。目前使用广泛的浏览器主要有Microsoft Internet Explorer（IE）、Netscape Navigator（NE）、腾讯TT以及Maxthon等。
IE浏览器是由Microsoft（微软）公司开发出品的一款浏览器，也是目前全球范围内拥有用户量最多的浏览器，其最新版本是7.0。NE浏览器是由Netscape（网景）公司研发的一款浏览器。TT是腾讯公司开发的浏览器（其下载地址是http://im.qq.com）。在TT浏览器的同一个窗口中可以放置多个网页，从而方便地在打开的网页之间快速切换。Maxthon（原名MyIE2）是一种使用IE浏览器内核设计的多窗口浏览器。其最大的优点是功能多而强，最新版本还增加了对IE浏览器扩展功能的支持，从而解决了在使用IE浏览器内核的多窗口浏览器时无法使用扩展插件的问题。
3．文件传输协议（File Transfer Protocol）
文件传输协议简称FTP，是一种快速、高效和可靠的信息传输方法。通过该协议可以把文件从一个地方传到另外一个地方，从而真正地实现资源互享。制作完成后的网页要上传到服务器，就必须使用FTP协议。
4．超文本标记语言（Hyper Text Markup Language）
超文本标记语言简称HTML，网页就是通过超文本标记语言创建的，其基本的特征就是超文本和标记。用HTML语言编写的网页文件的扩展名一般为*.htm或*.html。
5．IP地址
IP地址是一组32位的数字号码，用于标识网络中的每一台电脑，如“192.168.249.143”，在浏览器中输入网站所在服务器的IP地址就可以访问该网站。
6．域名
由于IP地址是一长串的数字号码，要记住这些号码非常困难。为了方便理解、记忆，便有了域名的概念。域名使用英文字符或汉语拼音与固定的IP地址相对应，这些英文字符或汉语拼音和网站名称基本一致，因此记忆起来十分轻松。域名的一般书写格式为：主机名.机构名.类别名.地区名，如www.comprg.com.cn就是《电脑编程技巧与维护》杂志社网站的域名。
7．统一资源定位器（Universal Resource Locator）
统一资源定位器简称URL，用于定位Internet中某个资源的具体位置，以取得各种服务信息的一种标准方法。其一般书写形式为http://www.comprg.com.cn/index.htm，主要由以下几个部分组成：
² 通信协议：如上面举例中的http部分，它包括HTTP（超文本传输协议）、FTP（文件传输协议）、Gopher（Gopher协议）和News（新闻组）等。
² 域名：如上面举例中的www.compgr.com.cn部分，这是《电脑编程技巧与维护》网站的域名，也可以使用IP地址的形式来表示，它们的作用是一样的。
² 所要访问的文件路径及文件名：如上面举例中的/index.htm部分。它指明要访问资源的具体位置。在主机名与文件路径之间一般用“/”符号隔开。
8．超级链接
超级链接是制作网页时经常需要使用到的功能，通过它可以在网站内部页面和对象之间建立链接，也可以与其他网站的页面和对象之间建立链接。通过单击网页中的超级链接就可以转到相应的页面上进行浏览。
9．导航条
导航条是多个超级链接的集合，能十分有效地实现超级链接功能；它就像书的目录，包括了整个网站中主要页面的关键词，单击导航条上的超级链接，就可以跳转到相应的页面进行浏览。导航条一般有横式和竖式两种，实现的方法也很多，可以是纯文本、按钮、图片，也可以是Flash动画或脚本语言。
10．表单
表单是用于填写申请或提交信息的交互页面。如电子邮箱、主页空间、QQ号码等的申请页面和登录页面都是采用表单来实现交互的，是许多动态网站必不可少的内容，如图2所示。
二、菜单设计
1．Logo
Logo是网站的标志，如图3所示为腾讯网站的Logo。制作Logo应注意以下两点：
通常Logo都位于网页的左上角，制作时可根据需要灵活处理。Logo可以是动态的，但动态效果不宜太强，而且不是所有的网站都适合用动态Logo。
2．banner
Banner一般用作宣传网页内容，国际上banner的尺寸（单位为像素）有许多，如234×60（半尺寸banner）、468×60（全尺寸banner）、120×240（垂直banner）、88×31（小按钮类型）、120×60（按钮类型2）、120×90（按钮类型1）及125×125（方行按钮）等。其中468×60和88×31的banner使用最为广泛，468×60的banner大小大致在15KB左右，最好不要超过22KB，而88×31的banner最好在5KB左右，不要超过7KB，如图4所示。
图3 Logo 图4 banner
3．导航栏
导航栏是浏览者浏览网页时有效的指向标志。导航栏可分为框架导航、文本导航和图片导航等，根据导航栏放置的位置可分为横排导航栏和竖排导航栏。导航栏的使用原则如下：
对于内容丰富的网站，可以使用框架导航，以便浏览者在任何页面都能快速切换到另一个栏目。利用JS、DHTML等动态隐藏层技术实现的导航栏，需注意浏览器是否支持。
图片导航虽很美观，但占用的空间较大，会影响网页打开的速度，不应多用。导航栏目超过6个可考虑多行排列，如图5所示。
图5 多行导航栏
4．按钮
按钮实际上是一种超级链接，如图6所示。制作按钮时应注意以下两点：若页面很单调，可以用按钮来点缀一下，制作按钮时一般字体颜色较深，背景颜色较淡，也可采用有较强对比度的颜色；按钮应和网页的整体风格一致，不能太抢眼。按钮可以用网页制作工具本身提供的现成样式，也可以用专门的photoshop一类图形软件来制作。
   
图6 按钮
5．图片
任何网站都有图片，制作图片时应注意以下3点：图片所含文字应清晰可辨，背景与主体明度对比应大致为3:1～5:1之间；图片的主题需明确，含义要简单明了；图片的背景最好使用浅色系列。
6．文本
文本是网页的主要内容，其设计的好坏对网页的整体美感有很重要的影响。对于文本应注意以下几点：同版面字型最好不要超过3种；文字的颜色应与背景有较大的反差；每行文字的长度汉字最好为20～30个，英文则最好为40～60个；段落与段落间应空一行并首行缩进，以便于阅读。
三、主页布局
IntraWeb窗口简称IW窗口，是与浏览器页面相对应的，页面是通过动作项或页面生成器直接产生的。在IntraWeb应用中，窗口页面的管理与普通Delphi应用中窗口Form的管理基本相似，但有几个特有的约定需要注意：任何时候只有一个窗口可见。这是因为窗口对应着客户端浏览器中用户使用的页面。不能使用模式窗口。尽管任何时候只能显示一个窗口，但所有窗口都不能是模式窗口。窗口必须为WebApplicaiton对象所拥有。
1．窗口（页面）
IntraWeb创建的窗口IWForm就是客户端调用的页面。页面创建、调用、隐藏方式与以前开发桌面程序的Form并没有什么不同，均以窗口的形式创建和编辑。一旦在页面单元里定义了一个Appform类，就可以在应用程序的任何单元里创建和引用。
定义一个IW窗口的语法可以是：
TIWForm1: TIWForm1= class(TIWAppForm)
显示一个已经创建的IW窗口的语法为：
TFormType.create（WebApplication）.Show;
也有的写为：
With TFormType.create(WebApplication) do
Begin
Show;
End;
接下来，就利用上一讲已经建立的Anyweb.dpr文件和结果完成主页面的设计过程：打开该工程文件，选择File→New→Other菜单命令，然后打开IntraWeb选项卡，选择New Form创建一个Application Form类型的应用。将窗体文件命名为F_IWFormMain，单元文件命名为U_main。这个窗体上放置4个IntraWeb标准组件板上的TIWRegion，主要来用控制页面主题布局。适当调整各控件的高和宽，成为主页面的Banner区、Link区、Show区和Label区，按功能区块放置突出显示的控件，并设置好相应属性和取值，有关参数和属性如表1所示，区块分割如图7所示。区域分块及放置其他控件后的设计期界面如图8所示。
图7设计期间主页面分区
图8设计期间主页面控件设
|
