毕业设计  设计门户网站首页
门户网站是指为广大网民提供综合性互联网信息资源和信息服务的应用系统。门户网站最初提供目录服务和搜索引擎，但由于日益激烈地市场竞争，不得不增加各种新的信息资源，以通过门类众多的资源来吸引和留住用户。本例将设计一个简单的门户网站首页，通过行为命令更改网站的外观样式、打开弹出窗口及显示指定的状态栏文字，如图8-26所示。
图8-26  门户网站首页
1  设计思路
1．门户网站分析
门户网站的种类有很多，而信息类门户是最为人熟悉的，例如新浪、搜狐等。像当当、淘宝那样的购物平台，其实也是一种门户，只不过陈列的是商品信息。不同的门户，有不同的需求，在设计网站时应该根据这些需求出发。但是它们之间也有共性，那就是都要求提高浏览效率，促使网站达成赢利目标。例如图8-27所示的搜狐门户网站。
图8-27  “搜狐”门户网站
门户网站的布局结构都较为复杂，通常会兼并、嵌套很多小网站，但是要注意小网站与整个门户的风格要统一。所以，在使用最频繁的页眉部分，可以明确地标识网站的风格。但是，不要用大幅的装饰图片来体现。而为了浏览速度快，页眉最好只有LOGO、文字导航和简单彩装饰，如图8-28所示。
图8-28  简单的页眉
人们在阅读某种信息时，一般的浏览习惯是从上到下、从左到右。在网页设计中一些突出或推荐的信息通常都放在网页的中上部，左侧为常规信息，右侧为推荐信息。当然这种视觉流程只是一种感觉并非一种固定的公式，只要符合人们的心理顺序和逻辑顺序，就可以更为灵
活地运用。在网页设计中，灵活而合理地运用直接影响到传达信息的准确与有效性。例如图8-29所示的中国雅虎网站。
图8-29  中国雅虎
2．本实例分析
本实例的页眉部分设计较为简单，仅包含了LOGO、搜索条和链接文字。因为这种综合性门户网站的信息量很大，所以站内搜索是该类型网站必不可少的，也是需要重点突出的，因此将其放置在了页眉，使访问者打开该页面的同时就可以看到，如图8-30所示。
图8-30  页眉部分
网页的导航条在主体部分的左侧纵向排列，改变了以往导航条位于页面顶部且横向排列的布局方式。在导航条中，每一组导航文字的前面都配有一张与其所指频道相搭配的小图片，使整个页面看起来轻松活泼，如图8-31所示。
图8-31  导航条
该页面是以新闻为主，所以必不可少会包含大量的文字。但是，为了避免因为文字过多而使页面显示得单调，特意在页面的底部添加了一些图片，为整个页面起到了点缀的效果，如图8-32所示。
图8-32  新闻图片
2  设计过程
在页面中为3个按钮图像添加“调用JavaScript”行为，使在单击按钮图像后更改网站的CSS文件；为<body>标签添加“打开浏览器窗口”和“设置状态栏文本”行为，使在页面加载时自动打开弹出窗口及显示指定的状态栏文字。
（1）打开素材页面index.html，该页面在<head></head>标签之间使用<link>标签引用外部的CSS样式文件blue.css，如图8-33所示。
图8-33  打开素材页面
为了可以通过JavaScript代码更改<link>标签的属性，必须为<link>标签定义一个企业网站制作ID，本例ID为changeColor。
（2）选择页面顶部“网页选择颜”文字右侧的“绿”按钮图像。然后，打开【行为】面板，在【添加行为】菜单中执行【调用JavaScript】命令，如图8-34所示。
图8-34  添加行为
（3）在打开的【调用JavaScript】对话框中，输入“ElementById('changeColor').href='styles/green.css'”代码，如图8-35所示。
图8-35  输入JavaScript代码
在该JavaScript代码中，getElementById()方法用来根据ID读取指定的元素。href为该元素的一个属性，将其值定义为styles/green.css。也就是说，将该页面引用的CSS文件更改为green.css。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。