论文部分内容阅读
引言:同学们在学习html,css,javascritp基础知识之后,对大多数网站上焦点图片浏览,非常感兴趣,但又不知怎样设计,我依据这一学情,我在《网页设计》教学中,设计这样一个项目:“网站焦点图片网页设计“。效果图如下图所示:
一、功能分析与要求
(一)图片定时切换,如2秒切换一次,且切换时过渡效果,切换到哪张图片,下边对应的数字变色;
(二)单击下边的数字时,图片切换到相应的图片;
(三)鼠标在图片之上时,停止切换,鼠标离开之后,图换又开始切换,单击图片,跳转到所链接的页面。
设计思路:用html提供页面上的元素,css控制这些元素的显示,javascript书写人机交互代码。
二、设计步骤
依据设计思路,页面设计我们分三个步骤:html设计、css设计、javascript设计。
(一)html设计
把页的所有元素放在一个div里,在这div里有,有图像标记,有下边文字导航div,在文字导航div里导航文字标记a.
参考文献:
[1]吴丰、丁欣 Dreamwerver CS5 网页设计与制作茧自缚DIV+CSS 北京:清华大学出版式 2012年
[2] 刘智勇JavaScript开发技术大全[M] 北京: 清华大学出版社 2009
[3] (美) steve Suehring (译)梁春艳 javascript从入门到精通 北京:清华大学出版社 2011
[4] http://www.w3school.com.cn/(w3c在线教程)
作者简介:
张树才 男 1966.7 贵州 本科 高校讲师 主要研究 前台网页设计
一、功能分析与要求
(一)图片定时切换,如2秒切换一次,且切换时过渡效果,切换到哪张图片,下边对应的数字变色;
(二)单击下边的数字时,图片切换到相应的图片;
(三)鼠标在图片之上时,停止切换,鼠标离开之后,图换又开始切换,单击图片,跳转到所链接的页面。
设计思路:用html提供页面上的元素,css控制这些元素的显示,javascript书写人机交互代码。
二、设计步骤
依据设计思路,页面设计我们分三个步骤:html设计、css设计、javascript设计。
(一)html设计
把页的所有元素放在一个div里,在这div里有,有图像标记,有下边文字导航div,在文字导航div里导航文字标记a.
参考文献:
[1]吴丰、丁欣 Dreamwerver CS5 网页设计与制作茧自缚DIV+CSS 北京:清华大学出版式 2012年
[2] 刘智勇JavaScript开发技术大全[M] 北京: 清华大学出版社 2009
[3] (美) steve Suehring (译)梁春艳 javascript从入门到精通 北京:清华大学出版社 2011
[4] http://www.w3school.com.cn/(w3c在线教程)
作者简介:
张树才 男 1966.7 贵州 本科 高校讲师 主要研究 前台网页设计