毕业设计设计门户网站首页.docx
- 文档编号:17189883
- 上传时间:2023-07-22
- 格式:DOCX
- 页数:14
- 大小:2.16MB
毕业设计设计门户网站首页.docx
《毕业设计设计门户网站首页.docx》由会员分享,可在线阅读,更多相关《毕业设计设计门户网站首页.docx(14页珍藏版)》请在冰点文库上搜索。
毕业设计设计门户网站首页
毕业设计设计门户网站首页
门户网站是指为广大网民提供综合性互联网信息资源和信息服务的应用系统。
门户网站最初提供目录服务和搜索引擎,但由于日益激烈地市场竞争,不得不增加各种新的信息资源,以通过门类众多的资源来吸引和留住用户。
本例将设计一个简单的门户网站首页,通过行为命令更改网站的外观样式、打开弹出窗口及显示指定的状态栏文字,如图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文件;为
标签添加“打开浏览器窗口”和“设置状态栏文本”行为,使在页面加载时自动打开弹出窗口及显示指定的状态栏文字。(1)打开素材页面index.html,该页面在
标签之间使用标签引用外部的CSS样式文件blue.css,如图8-33所示。图8-33打开素材页面
为了可以通过JavaScript代码更改标签的属性,必须为标签定义一个ID,本例ID为changeColor。
(2)选择页面顶部“网页选择颜色”文字右侧的“绿色”按钮图像。
然后,打开【行为】面板,在【添加行为】菜单中执行【调用JavaScript】命令,如图8-34所示。
图8-34添加行为
(3)在打开的【调用JavaScript】对话框中,输入“document.getElementById('changeColor').href='styles/green.css'”代码,如图8-35所示。
图8-35输入JavaScript代码
在该JavaScript代码中,getElementById()方法用来根据ID读取指定的元素。
href为该元素的一个属性,将其值定义为styles/green.css。
也就是说,将该页面引用的CSS文件更改为green.css。
(4)单击【确定】按钮后返回【行为】面板,可以在列表中看到该行为的默认事件为onClick,即单击触发行为,如图8-36所示。
图8-36行为事件
(5)使用相同的方法,为红色和蓝色按钮图像添加“调用JavaScript”行为,并将CSS文件更改为red.css和blue.css,如图8-37所示。
图8-37调用JavaScript行为
JavaScript代码如下:
document.getElementById('changeColor').href='styles/red.css';
document.getElementById('changeColor').href='styles/blue.css';
(6)在文档底部的标签栏中选择
标签,在【行为】面板的【添加行为】菜单中执行【打开浏览器窗口】命令,如图8-38所示。图8-38添加行为
(7)在打开的【打开浏览器窗口】对话框中,输入【要显示的URL】为“pop.html”;【窗口宽度】为320;【窗口高度】为268;【窗口名称】为“圣诞快乐”,如图8-39所示。
图8-39设置参数
(8)在【行为】面板中,执行【设置文本】|【设置状态栏文本】命令,在打开的对话框中输入要显示在状态栏的文字,如图8-40所示。
图8-40输入状态栏文本
3知识点总结
1.编辑行为
在【行为】面板的列表中右击某一行为,在弹出的菜单中执行【编辑行为】命令,可以在打开的行为对话框中重新编辑各项属性,如图8-41所示。
图8-41编辑行为
在Dreamweaver中,可以将网页中所有的元素(包括整个网页、网页中各种文本、图像、多媒体、表格、层、框架等)作为行为的对象。
不同的对象可以添加不同的行为,并可以设置各种触发行为的事件。
Dreamweaver支持所有JavaScript事件作为行为触发的条件,如表8-3所示。
表8-3行为支持的事件列表
事件类型
浏览器支持
应用对象
事件含义
onAbort
IE4.0、NetScape3.0
图像、页面等
中断对象载入触发该事件
onAfterUpdate
IE4.0
图像、页面等
对象更新时触发事件
onBeforeUpdate
IE4.0
图像、页面等
对象更新前触发事件
onBlur
IE3.0、NetScape2.0
按钮、链接、文本框等
对象移开焦点触发事件
onBounce
IE4.0
滚动字幕等
框元素延伸至边界外时
onChange
IE3.0、NetScape3.0
表单等
改变对象值时触发事件
onClick
IE3.0、NetScape2.0
所有元素
单击对象
onDblClick
IE4.0、NetScape4.0
所有元素
双击对象
onError
IE4.0、NetScape3.0
图像、页面等
载入对象时发生错误触发事件
onFinish
IE4.0
滚动字幕等
框元素完成一个循环时
onFocus
IE3.0、NetScape2.0
按钮、链接、文本框等
对象获取焦点时触发事件
onHelp
IE4.0
图像等
调用帮助时触发事件
onKeyDown
IE4.0、NetScape4.0
链接图像、文字等
按下键盘上某个键时触发事件
onKeyPress
IE4.0、NetScape4.0
链接图像、文字等
按下键盘上某个键并释放时
onKeyUp
IE4.0、NetScape4.0
链接图像、文字等
释放被按下的键时触发事件
onLoad
IE3.0、NetScape2.0
页面、图像等
当对象被完全载入时触发事件
onMouseDown
IE4.0、NetScape4.0
链接图像、文字等
按下鼠标左键时触发事件
onMouseMove
IE3.0、NetScape4.0
链接图像、文字等
鼠标指针移动时触发事件
onMouseOut
IE4.0、NetScape3.0
链接图像、文字等
鼠标指针离开对象范围时
onMouseOver
IE3.0、NetScape2.0
链接图像、文字等
鼠标指针移到对象范围上方时
onMouseUp
IE4.0、NetScape4.0
链接图像、文字等
鼠标左键按下后松开时
onMove
IE4.0、NetScape4.0
页面等
浏览器窗口被移动时触发事件
onReadyStateChange
IE5.0
图像等
对象初始化属性值发生变化时
onReset
IE4.0、NetScape3.0
表单等
对象属性被激发时触发事件
onResize
IE4.0、NetScape4.0
主窗口、帧窗口等
浏览器窗口大小被改变时
onRowEnter
IE5.0
Shockwave等
数据发生变化并有新数据时
onRowEixt
IE5.0
Shockwave等
数据将要发生变化时
onScroll
IE4.0
主窗口、帧窗口等
滚动条位置发生变化时
onSelect
IE4.0
文字段落或选择相等
文本内容被选择时触发事件
onStart
IE4.0、NetScape4.0
滚动字幕等
对象开始显示内容时触发事件
onSubmit
IE3.0、NetScape2.0
表单等
对象被递交时触发事件
onUnload
IE3.0、NetScape2.0
主页面等
对象将被改变时触发事件
2.调用JavaScript行为
“调用JavaScript”行为在事件发生时执行自定义的函数或JavaScript代码行。
选择对象,在【行为】面板的【动作】菜单中执行【调用JavaScript】命令,在打开的对话框中输入要执行的JavaScript命令或函数名称,如图8-42所示。
图8-42调用JavaScript
3.打开浏览器窗口行为
使用“打开浏览器窗口”行为可以在一个新的窗口中打开页面。
同时,还可以指定该新窗口的属性、特性和名称。
选择文档中的某一对象,在【行为】面板中的【添加行为】菜单中执行【打开浏览器窗口】命令。
然后,在弹出的对话框中可以选择或输入要打开文件的URL,并可设置新窗口的属性,如图8-43所示。
图8-43打开浏览器窗口行为
在【打开浏览器窗口】对话框中,可以设置新窗口的大小、名称等各种属性,这些属性如表8-4所示。
属性名称
说明
要显示的URL
设置弹出窗口的URL地址。
其可以用相对地址,也可以用绝对地址。
窗口宽度
设置弹出浏览器窗口的宽度。
其值为数字,单位为px(像素)
窗口高度
设置弹出浏览器窗口的高度,其值为数字,单位为px(像素)
属性
导航工具栏
设置弹出的浏览器窗口是否显示前进、后退等导航工具栏
菜单条
设置弹出的浏览器窗口是否显示文件、编辑、查看等菜单条
地址工具栏
设置弹出的浏览器窗口是否显示地址工具栏
使用滚动条
设置弹出的浏览器窗口是否显示滚动条
状态栏
设置弹出的浏览器窗口底部是否显示状态栏
调整大小手柄
设置弹出的浏览器窗口是否允许浏览者调节大小
窗口名称
设置弹出的浏览器窗口标题的名称。
4.设置状态栏文本
在浏览器的默认情况下,状态栏显示的是鼠标焦点处的URL地址或提示信息。
而为网页添加“设置状态栏文本”行为后,状态栏处将会显示自定义的文本信息。
“设置状态栏文本”行为是针对整个网页的,因此在设置该行为时无须选择任何对象,直接单击【添加行为】按钮
即可。
当该行为的对象设置为整个网页时,其触发的事件默认是onLoad。
“设置状态栏文本”行为的对话框如图8-44所示。
图8-44设置状态栏文本
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 毕业设计 设计门户网站首页 设计 门户 网站 首页