文档库 最新最全的文档下载
当前位置:文档库 › 静态网站设计报告模板

静态网站设计报告模板

静态网站设计报告模板
静态网站设计报告模板

网页设计报告

学部:

课程名称:网页设计基础专业:

学号:

姓名:

指导老师:

目录

一、网站简介 (1)

1.1网站介绍 (1)

1.2制作工具 (2)

1.3站点介绍 (3)

1.4文件夹摆放简介 (3)

二、布局简介 (4)

2.1首页布局 (4)

2.2个人中心布局工具 (4)

2.3朋友布局 (5)

2.4作品布局 (5)

2.5学校布局 (5)

2.6相册布局 (6)

三、网站内容介绍 (8)

四、制作心得 (11)

五、参考文献 (12)

一、网站简介

1.1网站介绍

我的网站是介绍自己的个人网站,总共15个页面,其中导航上有6个链接,包括首页、个人中心、朋友、作品、学校、相册。

首页部分:介绍了自己的一些简单的资料,其中有一份电子杂志,是平时的时候为了留作纪念做的,很想与老师和同学们分享。

个人中心:关于自己的一些详细的信息,以及在大学的一些变化,里面有两个子网页,通过图片链接进入,包括我的家乡和我的专业;我的家乡是介绍荆州和荆州公安的一些信息,而专业就是介绍的电子商务方面的一些信息。

朋友:包括三个子网页,介绍我的三个好朋友,李梦雪、陈丽婷和何立芝;好朋友有很多,只是因为时间原因,没有多余的时间做更多的页面去介绍,在后期的完善过程,会一一加上,因为网站做好不仅仅是因为它是作业、是考试,还是自己在大学的知识的积累和美好的回忆。

作品:运用SPAY放置了自己的五篇随便,平时很喜欢写随便,一段时间不写,就觉得少了写什么。当然,还包括自己喜欢的一些作家,很喜欢张小娴,喜欢她的文字,很真实,因此也用了一个页面专门介绍张小娴。

学校:这一部分我仅仅介绍了大学和高中,因为资源有限,没有一些关于小学和初中的照片,也就没办法详细介绍。相册这页,是花了最多心思去做的一个页面,其中的一个“鼠标经过图片移动”是在平时自学CSS的时候学到的知识,因为对制造网站有很大的兴趣,所以,在平时有时间的时候,会在网上下载一些视频和资料,用来自学。

相册:包含两个子网页,分别是班级相册和家人相册。在下面的介绍中,会仔细介绍。

1.2制作工具

Dreamweaver 8.0

1.3站点介绍

家乡专

个人网站

首页中心个人作品朋友学校相册

1.4文件夹摆放简介

在文件夹200810178140刘琴里面分为6个子文件夹,命名如下图所示,为了让读者更快捷的进入我的网站,我将index页放在了外面。

二、布局简介

我的网站包括15个页面,八种布局,最主要的运用上下、左右布局,再细分。

2.1首页布局:首页布局采用的是左右结构,其中左分为上、中、下三部分,分别添加下拉式、图片链接、日期三部分。右边是简单的背景加文字组成。大致布局如图1.1

图1.1

2.2个人中心布局:个人中心主要是上下结构,其中上部分包括左中右,下部分包括四块,分别以左上、左下、右上、右下命名,这样的布局在感觉上很复杂,其实很简单,比如下部分的四个块状,它的代码是共同的。大致布局如图2.1

图2.1

2.3朋友布局:朋友部分的布局很简单,简单的上下结构,简单的利用图片的固定位置来构造成上部分的左右结构。在我的家乡页面简介中,也是运用的相同布局。其布局如

3.1

图3.1

2.4作品布局:作品部分运用的是上下结构,其中下部分分为左右两块,如下图4.1

图4.1

2.5学校简介:学校部分的布局和三个朋友简介页面的布局是采用的相同布局,都是运用的上下结构,其中上部分包括左右,这种布局与上面的作品布局很像,其大致结构如下图5.1

图5.1

2.6相册布局:相册布局采用的是左右结构,再对左部分划分,划分为上中下三

部分,对右部分划分为上下结构。这样的布局在是视觉上可能较为凌乱,但是只要运用较为搭配的色彩,就不会有这种感觉。布局简图如6.1所示

图6.1

另外的两种布局较为简单,即对center部分进行划分,划分为三到四部分。上6图即为我的网站大致布局模式。为了能在不同的浏览器中显示的效果比较统一,在布局的时候,所以的布局都采用了上中下三部分的模式,其中在对center 部分加以扩展,这样的布局使所以的内容伴随着header 、center、footer一起移动,这样一来,就能达到预期的效果。

书本上介绍的布局模式包括肯多,像一列宽度居中、两列固定宽度、三列自适应、高度自适应等,这些布局模式在网站中都有用到。

三、网站内容介绍

3.1 首页

网站首页简单明了,让读者可以很直接的找到自己所需的分类

四、其中,导航栏加入了弹出式菜单

在鼠标滑过菜单时会有变化。同时在

主页中多处加入了超链接,用来方便浏览者来查找资料还有等。

3.2吉他入门

在吉他入门这一栏中采用了文本与图片相结合的方式进行制作

在吉他入门这一类中其他分栏基本采用同样的图文结合的方式进行制作与设计的

3.3 吉他教程

在吉他教程分页中,我依旧采用了图文结合的方式进行设计与制作,不过在主页的三个视频

连接和此分页中的热门视频分栏中插入了视频元素,

还有热门图谱中的图片元素

在联系我们这一分页中只插入了一些文本与图片

意见反馈分页中插入了意见反馈表,采用了表格——表单里面的内容

并在下面插入了提交和重置按钮

四制作心得

这次的网站制作,是来打大学后的第二份网站,可是我觉得依然学到了很多知识,相比前一份网站,这一份不仅仅制作的时间较久,而且花了更多的心思,做一份关于自己的网站,相对而言,没那么简单,需要的素材是自己的,所做的布局要自己想,网上的个人网站,要么太复杂,要么太简单,都不适合自己。

在制作前,本来以为在课堂上学习的知识远远不够我们做一份完整的网站,但是后来我发现我错了,一个网站做下来,发现所用到的全是老师上课讲过的。当然,还有些没有用到的知识和自己在课外学到的知识。

在制作网站的时候发现,Dreamweaver的确很强大。需要学习的去运用的东

西还有很多,想要做出一份好的网站,必须对软件足够的熟悉,这点我做的还不

够,有些效果想要实现却不知道如何去写代码,希望,在以后的学习过程中,能够很好的运用那些没用过的代码,了解CSS的强大。在这里,很感激王老师的教导。

网站不足之处:制作一份完整的网站,还需要登录系统等后台数据库的连接,可是,因为时间还有技术原因,我的网站没有插入登录系统,我们有学习关于登陆页面的制作,在课堂上我也有认真的完成相关的作业,可是,因为个人网站没有必要用户登录和注册,而且数据库的链接也不完善,因此,选择了放弃登录页面的插入。如果有必要,在学习了动态网页制作后,我会在网站插入相关的登录页面,这样,才算一个完整的网站。

通过这次网站的制作,我学到了很多,不仅仅是知识与技术方面,还有其他很多,如色彩搭配,整体协调,集体精神等。这些,对于以后的学习生活,都会有帮助,毕竟这样的机会不多,还是应该好好珍惜的。

五、参考书籍:

[1] CSS网站布局实录第二版.北京:科学出版社,2007

[2] 网页设计与制作.北京:人民邮电出版社,2007

[3] 网页设计与制作实例教程.北京:清华大学出版社,2008

[4] 赵锋等著.网页制作教程.北京:清华大学出版社,2009

[5] Flash动画设计与制作.北京:清华大学出版社,2009

[6] Photoshop CS2图像处理教程.北京:机械工业出版社,2007

静态网站设计报告模板

网页设计报告 学部: 课程名称:网页设计基础专业: 学号: 姓名: 指导老师:

目录 一、网站简介 (1) 1.1网站介绍 (1) 1.2制作工具 (2) 1.3站点介绍 (3) 1.4文件夹摆放简介 (3) 二、布局简介 (4) 2.1首页布局 (4) 2.2个人中心布局工具 (4) 2.3朋友布局 (5) 2.4作品布局 (5) 2.5学校布局 (5) 2.6相册布局 (6) 三、网站内容介绍 (8) 四、制作心得 (11) 五、参考文献 (12)

一、网站简介 1.1网站介绍 我的网站是介绍自己的个人网站,总共15个页面,其中导航上有6个链接,包括首页、个人中心、朋友、作品、学校、相册。 首页部分:介绍了自己的一些简单的资料,其中有一份电子杂志,是平时的时候为了留作纪念做的,很想与老师和同学们分享。 个人中心:关于自己的一些详细的信息,以及在大学的一些变化,里面有两个子网页,通过图片链接进入,包括我的家乡和我的专业;我的家乡是介绍荆州和荆州公安的一些信息,而专业就是介绍的电子商务方面的一些信息。 朋友:包括三个子网页,介绍我的三个好朋友,李梦雪、陈丽婷和何立芝;好朋友有很多,只是因为时间原因,没有多余的时间做更多的页面去介绍,在后期的完善过程,会一一加上,因为网站做好不仅仅是因为它是作业、是考试,还是自己在大学的知识的积累和美好的回忆。 作品:运用SPAY放置了自己的五篇随便,平时很喜欢写随便,一段时间不写,就觉得少了写什么。当然,还包括自己喜欢的一些作家,很喜欢张小娴,喜欢她的文字,很真实,因此也用了一个页面专门介绍张小娴。 学校:这一部分我仅仅介绍了大学和高中,因为资源有限,没有一些关于小学和初中的照片,也就没办法详细介绍。相册这页,是花了最多心思去做的一个页面,其中的一个“鼠标经过图片移动”是在平时自学CSS的时候学到的知识,因为对制造网站有很大的兴趣,所以,在平时有时间的时候,会在网上下载一些视频和资料,用来自学。 相册:包含两个子网页,分别是班级相册和家人相册。在下面的介绍中,会仔细介绍。 1.2制作工具 Dreamweaver 8.0 1.3站点介绍 家乡专 业 张 小 娴 小 雪 丽 婷 立 芝 高 中 班 级 家 人 个人网站 首页中心个人作品朋友学校相册

静态网页设计报告书

网页设计课程设计报告网站主题:南国之旅旅游服务网站系别:电子商务 班级:2011级电子商务 学号:201124040138 姓名:汤永亮 指导教师:宋春晖

海南师范大学 信息科学技术学院 电子商务班 课程名称:网页设计 题目:南国之旅 指导教师:宋春晖 目录 一、需求分析与主题设计 (1) 二、栏目设计 (2) 三、布局设计 (3) 四、制作过程及要点 (4) 五、网站运行分析 (5) 一、需求分析与主题设计 用户对网站的要求是:风格统一和谐的网页,网页操作合理、方便、友好需要实现的功能和性能是:适当运用HTML语言和CSS样式定义,并正确运用多媒体信息,设计出风格统一和谐的网页;网站正常运行,功能达到设计要

求,风格和谐统一,操作合理、方便、友好,界面具有美感或创意,还要符合网站管理的原则。 网站的主题是介绍我所在大学的旅游胜地景点简介、路线选择,美图 网站主色调为蓝色,橘黄色,颜色搭配均匀;清新自然。 二、栏目设计 本网站共含有11个网页,其中一个主网页,五个一级页面,六个二级页面,三个三级页面 三、布局设计 主题布局如下,采用尽量简洁的表格,首页简单明了,不会给人拥挤的感觉,所需要进入的网页一目了然。

四、制作过程及要点 1、层的使用 在这次网页设计过程中,使用了大量层,因为它灵活好用,可以随便拖动,变大变小都很方便,而框架虽然也能达到这个效果,但是,它不够灵活,当然一些地方仍然要用到它,体现清晰的结构。 2、运用Photoshop工具 网站的logo、部分图片都使用photoshop来制作完成 3、使用链接

为方便读者的查阅,在各页面底部都设置了页面链接。每个 4、插入跳转菜单 5、为了使读者能快捷的回到自己感兴趣的页面,于是在各个页面都插入了跳转菜单。 6、插入滚动文字 7、设置交替图像,鼠标放置停止图片切换 8、制作在整个页面浮动的图片 9、设置垂直循环滚动的图片 10、使用弹出信息行为 五、网站运行分析 静态网页一般是以。html 、htm、shtml等为扩展名的文件,现在的静态文件大多是程序生成的静态,而不是早期制作的静态网页。运行于客户端。更改主要是对模板的修改然后再次生成静态。 网站生成静态后,用户浏览时,服务器自己把静态页面返回给客户,不用做另外的操作,可以减缓服务器的压力。 静态页面修改更简单,要修改整站的信息,只需要修改一个地方,不做任何另外操作,及时生效,静态页面择需要先修改模板,然后整站生成页面才能生效,维护需要花费时间更多。 不足:网站介绍的景点数目少,景点介绍的不太详细,例如各景点的美食小吃, 景点的路线介绍的不多,只是略见一斑。网站的简介介绍的内容不够全面,只是简略的介绍了景点的地点和比较出名的景点风景,但是没有全面的介绍景点的内容。景点的路线普及的地方很少,没有普及到周边比较出名的景点。网站的代码不太统一,没有用外部连接文件,后期的维护困难。 改进方法:增加景点的数目和详细简介内容,网站的代码要统一整理,最好一 个外部连接文件控制样式等,便于后期维护。 六、个人心得 本次网站主要是运用上学期学过的知识来布局应用,通过本次的网站设计,运用了上学期所学到的知识这样不仅复习了上学期学过的一些知识,同时也加深所学知识的内容,这次的网页制作使我学会了很多,有关怎么收集资料,怎样用最快

网站设计说明书

《网站开发与网页设计》设计说明书网站名:《周杰伦资料库》 班级:BX00XX 学号:BX00XX05 姓名:某某某 201X年12月08日

目录 一、网站与网页的概述 (1) 1. 什么是网站 (1) 2. 什么是网页 (1) 3 静态网页 (2) 4 动态网页 (3) 5 动态网页与静态网页的区别 (4) 二、Dreamweaver 8 (5) 1 Dreamweaver 8的概述 (5) 2 Dreamweaver 8的功能 (5) 3 Dreamweaver 8的特点 (6) 三、网页设计标记语言—HTML (8) 1 HTML语言简介 (8) 2 HTML语言特点 (8) 四、我的网站介绍 (9) 1 网站的主题、结构介绍 (9) 2 网站的内容、形式和特点的介绍 (10) 3 网站重点页面的贴图 (10) 五、网站设计感悟 (18)

一、网站与网页的概述 1. 什么是网站 因特网上一块固定的面向全世界发布消息的地方,由域名(网站地址)和网站空间构成,通常包括主页和其他具有超链接文件的页面。 网站是由多个网页组成的,但不是网页的简单罗列组合,而是用超链接方式组成的既有鲜明风格又有完善内容的有机整体。 2. 什么是网页 网页是网站中的一「页」,通常是HTML格式(文件扩展名为:html、htm、asp、aspx、php、jsp等)。网页通常用图像档来提供图画。网页要使用网页浏览器来阅读。 网页(Web page)是一个文件,他存放在世界某个角落的某一部计算机中,而这部计算机必须是与互联网相连的。网页经由网址(URL)来识别与存取,当我们在浏览器输入网址后,经过一段复杂而又快速的程序。网页文件会被传送到你的计算机,然后再通过浏览器解释网页的内容,再展示到你的眼前。 网页是构成网站的基本元素,是承载各种网站应用的平台。

静态网页设计教学大纲

静态网页设计教学大纲 课程概述 1.课程性质 《静态网页设计》课程是高职计算机应用技术、计算机网络、软件技术等相关计算机专业的一门专业必修课程。 2.课程设计理念 本课程的设计体现“以能力为本位、以职业实践为主线、以项目课程为主体”,打破了传统的学科体系的模式,通过各项目的练习操作,熟练地掌握岗位所需知识和技能,并不断强化。项目特别强调对学生操作能力和解决问题能力的培养,充分体现了职业教育“以就业为导向,以能力为本位”的职业教育理念。 3.课程开发思路 本课程主要以当下典型的项目案例为主题,教材为参考,同时借鉴了一些企业网站,有利于学生的理解与学习。颠覆传统讲授风格,主要通过项目实例让学生以师傅带徒弟的形式一步一步学习项目开发流程。带着对一个项目雏形的不断完善,功能需求及其他功能的完善,进阶,使学生掌握一个网站项目的设计与制作相关经验。经验从实践中来,因此学生实验课时约占到了总课时的三分之二。让学生在职业实践活动的基础上掌握知识,增强课程内容与职业能力要求的相关性,提高学生的就业能力。 授课目标 通过本课程的学习使学生具备网页制作、网站规划与网站维护的专业能力,培养学生的团队协作、沟通表达、工作责任心、职业规范和职业道德等综合素质和能力。作为计算机相关专业的核心主干课程,使学生掌握商业网站的开发流程,并能独立进行操作。学生毕业后可胜任网站管理员、网页设计师等工作岗位。 课程大纲 第一章网页设计基础知识 1.1:网站剖析 1.2:网站开发流程

1.3:Dreamweaver CS6的安装 第二章生活网网站的创建 2.1 初识Dreamweaver CS6 2.2 新建和管理站点 2.3 为网页设置头信息和页面属性——页面总体设置 前两章测验 第三章生活网网站页面的布局 3.1 使用表格布局页面 3.2 使用AP Div布局页面 3.3 使用框架布局网页 第三章测验 第四章输入和编辑网页元素 4.1 添加文本类网页元素 4.2 在网页中添加图像 4.3 在网页中添加多媒体元素 第四章单元测验 第五章网站内容的链接与特效网页的制作——应用链接与行为5.1 设置网站中的超级链接 5.2 利用行为制作网站中的特效网页 5.3 制作页面中的弹出式菜单 5.4 利用CSS美化页面 第五章测验

《静态网页设计》课程标准

《静态网页设计》课程标准 1. 概述 课程的性质 《静态网页设计》课程是高职计算机应用技术、软件服务外包、计算机网络与安全管理专业的一门专业必修课程。本课程以《计算机文化基础》、《计算机网络技术及应用》、《C语言程序设计》或《JAVA程序设计》前导课程,本课程将从职业技术教育的特点出发,以培养学生实际动手能力为目标,学会怎样通过效果图完成对网页页面的布局,通过完成学习情境的学习,能够掌握HTML、CSS、简单的JavaScript的专业知识和专业技能。使学生具备网页制作、网站规划与网站维护的专业能力和方法能力,以及培养学生的团队协作、沟通表达、工作责任心、职业规范和职业道德等综合素质和能力。作为专业的核心主干课程,使学生掌握商业网站的开发和流程,并能独立进行操作,在就业时能够成为一个合格的人才。学生毕业后可胜任网站管理员、网页设计师等工作岗位。 课程设计理念 本课程的设计体现“以能力为本位、以职业实践为主线、以项目课程为主体”,打破了传统的学科体系的模式,通过各项目的练习操作,熟练地掌握岗位所需知识和技能,并不断强化,项目体现操作能力和解决问题能力的培养。充分体现了职业教育“以就业为导向,以能力为本位”的职业教育理念。 课程开发思路 本课程主要以当下典型的项目案例为主题,教材为参考,同时借鉴了一些企业网站,有利于学生的理解与学习。颠覆传统讲授风格,主要通过项目实例让学生以师傅带徒弟的形式一步一步学习项目开发流程。带着对一个项目雏形的不断完善,功能需求及其他功能的完善,进阶,使学生掌握一个网站项目的设计与制作相关经验。经验从实践中来,因此学生实验课时约占到了总课时的三分之二。

静态网页设计总结报告

网页设计总结报告 目录 一、设计介绍 (2) 二、制作过程 (3) 1、布局............................................................................................................................................... (3) 2、相关插入 (4) 3、相关链接 (4) 三、制作代码 (5) 四、心得体会 (7) 五、参考资料 (8)

一、网页设计介绍 从文件的角度来说,一个网页就是一个HTML文件。当浏览者输入一个网址或单击某个链接后,在浏览器中显示出来的就是一个网页。一般网页上都会有文本、图片等信息,而复杂一些的网页上还会有声音、视频、动画等多媒体内容,为网页增添了丰富的色彩和动感。静态网页是指网页文件中没有程序,只有HTML代码,一般以.html或.htm为后缀名的网页,静态网站内容不会在制作完成后发生变化,任何人访问都显示一样的内容。网站是一系列逻辑上可以视为一个整体的网页集合,是许多相关网页有机结合而组成的一个信息服务中心。对于小型网站,是指带有一定主题的多个网页集合;对于大型网站还包含数据库和服务器端应用程序等如新浪、网易、搜狐等门户网站。在构成网站的众多网页中,有一个页面比较特殊,称为首页,即网站的第一个页面。动态网页是指网页文件不仅具有HTML标记,而且还含有程序代码,并使用数据库连接。动态网页能根据不同的时间,不同的来访者显示不同的内容,动态网站更新方便,一般在后台直接更新。 我的网站是介绍自己的个人网站,这是一个关于家乡美食的介绍,总共6 个页面,其中上有首页5个链接,包括剁椒鱼头,蚂蚁上树,浏阳蒸菜,家常酸菜鱼,长沙臭豆腐,而然后每个子页可以和上一页和下一页相连。 首页部分:介绍了湖南一些好吃的资料菜名,其中附有一张凤凰的图片,很想与老师和同学们分。 然后就是每个子页中,前四张介绍了五道菜和它们的做法,则是一道比较有名的小吃,为长沙臭豆腐,但由于其做法是秘方,只附有对其的介绍。 二、制作过程 网页布局 它们不仅能点缀网页,使网页更活泼有趣,而且在网上娱乐、电子商务等方面也有着不可忽视的作用。

教你制作静态网页的方法

教您制作静态网页的方法 一、网页设计基础 1、熟悉Dreamweaver 8的工作环境 2、创建新站点 创建本地站点:站点----管理站点----新建----站点(前三步也可直接从“新建站点”进入下面的设置向导对话框)----跟随向导设置直至完成 3、网页文件的基本操作 a、创建、打开与保存网页文件 创建:文件----新建----创建 打开:文件---打开----选择欲打开的文件 或者在右边的文件浮动面版中选择打开 保存:文件---保存或另存为 b、设置网页的页面属性 修改---页面属性---然后设置(标题、背景、背景图像、文本等) c、设置网页对象的颜色 网页对象,如页面背景、文字、链接都经常需要设置颜色。 可在各自对应的属性面版中设置。 d、网页文本的输入与属性设置 文本可键入、导入、粘帖 文字可设置字体、大小、颜色、格式等。 键入空格的方法:1、汉字输入法设置为全角方式,按空格键即可输入。2、属性面版格式中:预先格式化的 换行:ENTER、SHIFT+ENTER 实例练习: 1、输入以下文字 书签夹在诗集里, 落叶夹在深秋里。 喜悦夹在生活里, 追求夹在人生里。 2、第一次设置格式为“无”,字体为“华文行楷”,字体颜色为“红色”,字号为“5号”,添加项目符号。然后保存、预览。 3、第二次设置格式为“标题一”,字体为“楷体”,字体颜色为“蓝色”,字号为“5号”,添加项目符号,对齐方式为“居中”。然后保存、预览。 比较两次设置的效果。 e、网页图片的插入与属性设置 插入图片,在对话框中选择图片。(最好在建立站点时将欲用的图片素材复制到本地站点目录中) 插入图像占位符,在图片准备好后再加入图片。加入方法:1、双击图像占位符;2、点“属性面版”中的“指向文件”,拖到右边文件中要插入的文件处。

个人网页设计说明书

个人网页设计计划书 目录 一、网页设计目的 1.1网页设计需求浅谈…………………………………………………… 1.2个人网页设计目的…………………………………………………… 二、网页配置工具 2.1网页使用的工具和数据库……………………………… 2.2浏览需求……………………………………………… 三、个人网页功能模块设计 3.1 主页………………………………………………………… 3.2 个人简介…………………………………………………… 3.3 个人相册…………………………………………………… 3.4 其他模块…………………………………………………… 四、个人网页的技术特点

4.1与传统的静态主页的区别……………………………………… 4.2 具体实现方法…………………………………………………………… 4.3 体会……………………………………………………………………… 一、设计目的 1.1 网页设计浅谈 随着互联网的进一步发展与成熟,网络的带宽进一步加阔,网络应用也越来越广泛。网页制作更是日新月异,层出不穷。涌现了很多琳琅满目的网站,使得整个互联网多姿多彩。 以前,在网页制作的时候,通常都是使用FrontPage来完成。由于FrontPage使用方便,操作简单,即使没有网络编程经验的制作人员也可以设计出吸引人的网页,因此,很多网页设计者一直使用FrongPage。FrontPage2000集成在Office2000办公自动化软件中,其工作界面和操作风格和Word一样,因此,FrontPage相对于其他网页制作软件来说,易学易用,是网页制作初学者的入门软件。 从功能来讲,DREAMWEAVER和FrontPage各有千秋,但DREAMWEAVER自身有明显的特点:首先DREAMWEAVER引入了图层的概念,可以在DREAMWEAVER中直接制作一些动画效果。其次DREAMWEAVER支持最新的DHTML(动态HTML)标准CSS(层叠样式表单)规范。另外DREAMWEAVER 具有增加插件的功能,用户可以安装各种插件来增强自己的DREAMWEAVER。最后DREAMWEAVER 中又新增了资源管理器、内建参考手册。整合SourceSafe和WebDAV,集成了MacromediaExchange.其灵活方便的操作界面,也是很多人选用DREAMWEAVER的一个原因。就目前来说DREAMWEAVER已经占据网页编辑软件霸主的位置 我们再来谈谈我最喜欢的动画网页制作软件——Flash。与其说Flash是一个动画网页制作工具,还不如说它是一个功能强大的多媒体制作工具更为恰当。利用Flash可以独立制作出非常精彩的多媒体网页,包括动画的制作、声音效果的添加等。另外Flash对Internet 的支持,主要表现在它采用了流控制技术,不用等整个动画的Movie下载完,就可以开始播放,对于一个Internet冲浪者来讲,这是一件很有吸引力的事情。同时Flash采用了矢量图形的制作方法,当对一副图进行任意的缩放时,它的质量并不会发生变化,而且文件很小,利于网络传输。 FIREWORK是Macromedia公司推出的图像处理软件,与其他图形处理软件的设计思想都很相似,但它又有很多自己的特色。FIREWORK是一个人完全为网页制作者设计的图形处理软件,对制作基于网络的图形有特殊的支持,能够自由的导入导出各种图像。FIREWORK作为第一款为网络实际而开发的图像处理软件,能够自动切图,生成鼠标动态感应的JavaScript。而且FIREWORK具有十分强大的动画功能和一个几乎完美的网络图像生产器。FIREWORK可以轻松辨认矢量文件中的绝大部分标记以及Photoshop文件的层。

教你制作静态网页的方法

教你制作静态网页的方法 一、网页设计基础 1、熟悉Dreamweaver 8的工作环境 2、创建新站点 创建本地站点:站点----管理站点----新建----站点(前三步也可直接从“新建站点”进入下面的设置向导对话框)----跟随向导设置直至完成 3、网页文件的基本操作 a、创建、打开和保存网页文件 创建:文件----新建----创建 打开:文件---打开----选择欲打开的文件 或者在右边的文件浮动面版中选择打开 保存:文件---保存或另存为 b. 设置网页的页面属性 修改---页面属性---然后设置(标题、背景、背景图像、文本等) c. 设置网页对象的颜色 网页对象,如页面背景、文字、链接都经常需要设置颜色。 可在各自对应的属性面版中设置。 d. 网页文本的输入和属性设置 文本可键入、导入、粘帖 文字可设置字体、大小、颜色、格式等。 键入空格的方法:1、汉字输入法设置为全角方式,按空格键即可输入。2、属性面版格式中:预先格式化的 换行:ENTER、SHIFT+ENTER 实例练习: 1、输入以下文字 书签夹在诗集里, 落叶夹在深秋里。 喜悦夹在生活里, 追求夹在人生里。 2、第一次设置格式为“无”,字体为“华文行楷”,字体颜色为“红色”,字号为“5号”,添加项目符号。然后保存、预览。 3、第二次设置格式为“标题一”,字体为“楷体”,字体颜色为“蓝色”,字号为“5号”,添加项

目符号,对齐方式为“居中”。然后保存、预览。 比较两次设置的效果。 e. 网页图片的插入和属性设置 插入图片,在对话框中选择图片。(最好在建立站点时将欲用的图片素材复制到本地站点目录中) 插入图像占位符,在图片准备好后再加入图片。加入方法:1、双击图像占位符;2、点“属性面版”中的“指向文件”,拖到右边文件中要插入的文件处。 在图像属性面版中设置 f. 插入层 方法: 1、点击插入面版中的“描绘层”;2、在网页编辑器窗口中按住鼠标左键拖画出定位用的层; 3、可以随意移动层的位置; 4、可在层中插入图像、文字等。 g. *插入表格,用表格定位 方法: 1、先用鼠标点至欲插入表格的位置; 2、点插入面版中的“表格”—“插入表格”; 3、确定行数、列数后确定即将表格插入到选定位置了; 4、可在表格中任何单元格里插入图像、文字等。 h. 建立超链接 方法: 1、选中要建立超链接的文字或图像; 2、点右键“创建链接”打开的窗口或在属性的链接栏里,填入链接的目标。(如:本网站另一个网页,或外部网页如https://www.wendangku.net/doc/171439780.html,,或电子邮件如:mailto:zdhwangji@https://www.wendangku.net/doc/171439780.html,) 3、在页面属性里修改链接的属性:修改--页面属性(链接、活动链接、访问过链接) 二、制作实例1

静态网页制作

静态网页制作 一、网页设计基础 1、熟悉Dreamweaver 8的工作环境 2、创建新站点 创建本地站点:站点----管理站点----新建----站点(前三步也可直接从“新建站点”进入下面的设置向导对话框)----跟随向导设置直至完成 3、网页文件的基本操作 a、创建、打开和保存网页文件 创建:文件----新建----创建 打开:文件---打开----选择欲打开的文件 或者在右边的文件浮动面版中选择打开 保存:文件---保存或另存为 b. 设置网页的页面属性 修改---页面属性---然后设置(标题、背景、背景图像、文本等) c. 设置网页对象的颜色 网页对象,如页面背景、文字、链接都经常需要设置颜色。 可在各自对应的属性面版中设置。 d. 网页文本的输入和属性设置 文本可键入、导入、粘帖 文字可设置字体、大小、颜色、格式等。 键入空格的方法:1、汉字输入法设置为全角方式,按空格键即可输入。2、属性面版格式中:预先格式化的 换行:ENTER、SHIFT+ENTER 实例练习: 1、输入以下文字 书签夹在诗集里, 落叶夹在深秋里。 喜悦夹在生活里, 追求夹在人生里。 2、第一次设置格式为“无”,字体为“华文行楷”,字体颜色为“红色”,字号为“5号”,添加项目符号。然后保存、预览。

3、第二次设置格式为“标题一”,字体为“楷体”,字体颜色为“蓝色”,字号为“5号”,添加项目符号,对齐方式为“居中”。然后保存、预览。 比较两次设置的效果。 e. 网页图片的插入和属性设置 插入图片,在对话框中选择图片。(最好在建立站点时将欲用的图片素材复制到本地站点目录中) 插入图像占位符,在图片准备好后再加入图片。加入方法:1、双击图像占位符;2、点“属性面版”中的“指向文件”,拖到右边文件中要插入的文件处。 在图像属性面版中设置 f. 插入层 方法: 1、点击插入面版中的“描绘层”;2、在网页编辑器窗口中按住鼠标左键拖画出定位用的层; 3、可以随意移动层的位置; 4、可在层中插入图像、文字等。 g. *插入表格,用表格定位 方法: 1、先用鼠标点至欲插入表格的位置; 2、点插入面版中的“表格”—“插入表格”; 3、确定行数、列数后确定即将表格插入到选定位置了; 4、可在表格中任何单元格里插入图像、文字等。 h. 建立超链接 方法: 1、选中要建立超链接的文字或图像; 2、点右键“创建链接”打开的窗口或在属性的链接栏里,填入链接的目标。(如:本网站另一个网页,或外部网页如https://www.wendangku.net/doc/171439780.html,,或电子邮件如:mailto:zdhwangji@https://www.wendangku.net/doc/171439780.html,) 3、在页面属性里修改链接的属性:修改--页面属性(链接、活动链接、访问过链接)

静态网页设计论文静态网页设计

1.前言: 因特网正在改变世界,它促成了网络经济雏形的形成,特别是电子商务正由新概念走向实用化。由于因特网具有传播信息容量极大、形态多样、迅速方便、全球覆盖、自由和交互的特点,已经发展成为新的传播媒体,所以全球几乎各个企业、机构纷纷建立自己的Web 站点。 Web站点是向用户或潜在客户提供信息(包括产品和服务)的一种方式。其文档所包含的内容是由被称为超文本(HyperText)的文本、图形图象、声音,甚至电影等组成。使这些超文本能够有机地关联并可使浏览器识别,是通过HTML语言(HyperText Markup Language 超文本标记语言)实现的。同时CGI(Common Gateway Interface公共网关接口)能使Web具有交互功能。Web站点指引用户浏览该站点或其他站点上的分页信息,可以通过表格和电子邮件的连接提供双向交互方式。站点建立后,你的企业就在国内、甚至在国际上有了一席之地,有了每周7天、每天24小时的“虚拟门市部”。网站是未来企业开展电子商务的基础设施和信息平台,它是“知识经济”的制高点,企业的网址犹如企业的商标和品牌一样,是反映企业形象和文化的巨大的无形资产。 因此企业网站规划必须注意以下几个方面: 目标明确、定位正确 Web站点的设计是企业或机构发展战略的重要组成部分。要将企业站点作为在因特网--这个新媒体上展示企业形象、企业文化的信息空间,领导一定要给予足够的重视,明确设计站点的目的和用户需求,从而作出切实可行的计划。 挑选与锤炼企业的关键信息,利用一个逻辑结构有序地组织起来,开发一个页面设计原型,选择用户代表来进行测试,并逐步精炼这个原型,形成创意。 分析有些网站的效果不如预想的好,主要原因是对用户的需求理解有偏差,缺少用户的检验造成的。设计者常常将企业的市场营销和商业目标放在首位,而对用户和潜在的用户的真正需求了解不多。所以,企业或机构应清楚地了解本网站的受众群体的基本情况,如受教育程

静态网页设计知识点

第一章概述 4学时 教学目的: 了解网页及网站基本概念及网页的基本要素分析 教学重点与难点: 网页、网站设计流程,网页基本要素 第一节网页和网站 一、网页 二、网站 三、网页的基本功能 第二节网页中的主要元素 一、文本 二、图像 三、链接标志 四、其他的基本要素 第三节网页制作工具 一、网页编辑工具 二、网页图像编辑工具 三、动态网页技术 第四节网页设计的基本流程 一、网站的设计流程 二、网页的设计与制作 三、网页的测试 四、网页上传和发布 第二章 HTML语言基础 6学时 教学目的: 了解HTML文件的基本结构,掌握HTML中文本的编辑及图像的语法,掌握HTML中各种设置超级链接的语法,掌握HTML中表格和框架的基本语法。 教学重点与难点: HTML的语法结构、超级链接的语法、表格和框架的基本语法。 第一节 HTML概述 一、HTML简介 二、HTML语法结构

第二节文本的编辑 一、段落标记 二、文本标记 三、标题显示等级 四、列表 第三节图像编辑 一、插入图像 二、使用背景图像 第四节建立超链接 一、建立超链接 二、使用书签 三、标记新窗口和基准链接 第五节表格与框架 一、建立表格 二、表格属性 三、建立框架 四、框架属性 第三章 Dream weaver基础 2学时 教学目的: 了解DW的操作界面及常用命令,掌握规划和创建站点的操作,掌握基本的网页操。 教学重点与难点: 规划站点的结构、网页的基本操作 第一节 Dream weaver 工作界面 一、启动和退出Dreamweaver 二、Dreamweaver操作界面 第二节规划与创建站点 一、规划网站的整体结构 二、建立本地站点 三、管理本地站点 第三节网页文件的基本操作 一、新建网页 二、保存网页

网页设计说明

《我爱篮球》网站设计说明书 1、设计理念 本网站定位本身是用于展示个人爱好——篮球的一个平台页面系统。在展示之余也有结交拥有共同爱好的网友的功效。页面主要以蓝色调风格为主,站点分为有首页、篮球动态、NBA明星简介、用户注册、用户登录、留言交流、后台管理等模块。 本站页面主要展示的是NBA篮球资讯、明星等内容,整体页面使用到了CSS 层样式技术、Flash动画效果制作、以及 JavaScript的脚步技术应用。 值得一提的是首页明星照片展示采用了基于CSS+JS特殊的图片向左滚动的浏览效果。 2、设计流程 通过在网络参考相应模板,设计出接近于NBA网站的效果,并根据相应要求到网上寻找相应的图片素材以及应用到PS图片设计结束。 最后应用HTML网页设计,以及ASP + Access动态网页设计使用CSS进行页面样式的设计。 并且,附带应用一些JavaScript特效技术。 总体设计流程为:确定主题及颜色—→用Dreamweaver设计html静态网页效果—→建立数据库—→将静态网页改为asp动态网页—→测试、发布网站。 3、使用的工具与技术 网页制作工具:Dreamweaver 8 多媒体设计制作工具:Flash 8 、Photoshop cs3 应用到的设计技术:HTML、CSS、JavaScript 4、网站设计说明 网站名称:我爱篮球——篮球网站 整体形象设计包括标准字、标题、标准色彩等。 首页作为网站的形象页、网站的欢迎页面,引入的元素大致有网站名称、标题、形象图片、文字、栏目导航等要素,是彰显网站整体风格的重要页面,

并结合Flash动画来展示。 网站形象页的设计突出了所要展示的主题,通过文字、形象、图片的巧妙烘托,令页面富有层次感,达到赏心悦目的效果。 网页富有动感,通过JS实现突破轮播效果,文字采用marquee滚动展示新闻动态。 页面大小采用了960px*200px。 网站调试采用“边制作边调试”的方式。保证了页面在各个浏览器间的相互兼容性。 在风格等各方面追求保存一致。 5、页面结构布局 首页布局框架构思示意图

静态网页设计与制作论文

静态网页设计与制作论文 题目:静态网站设计与制作 学号:1003101217 姓名:潘悦 所属系:信息工程系 专业:计算机网络技术 班级:10网络一班

目录 摘要 0 第1章网站制作的概述 (1) 1.网页制作要用的软件 (1) 2.网页工具介绍 (2) 3.图形处理软件、动画制作 (2) 4. 网站的构思设计思想 (2) 第2章我的个人网站的设计与规划 (3) 1网站筹划首页制作 (3) 2其它页面的设计 (3) 3网页中特效的运用整理站点 (4) 第3章结论 (5)

设计论文摘要 在包罗万象的网络世界里,要制作一个具有特色的小网站是需要一定方法与技巧的。通过一年的学习联系,结合自身的经验和兴趣爱好,我制作了一个影视天地的网站,页面布局协调,色彩搭配合理,符合形式美的要求,在色彩布局等方面进行了仔细的设计与归纳,使得网站更完善。在制作过程中,体会到网页不光是把各种东西放上去,能看就行,这是远远不够的!要考虑如何受众能更多的和更有效率的接收网页上的信息,从而使他们对给网站留下很好的印象,制作网站需要耐心和很好的基础。 第1 章网站制作的概述 网站就是网页的有机组合体,网页的学名是HTML(Hyper Text Mark-up Language),翻译过来就是“超文本标记语言”,它定义了各种超文本在HTML文件中的组织方式,是一种可以在WWW上传输并被浏览器读取、翻译成页面的一种文件。网站就是许许多多网页、文本、图片、声音、图像等在一起,按照一定方式组织起来的集合体。网站是上网查信息的窗口,是我们存放资料、图片、多媒体的网上展示厅,当然也是展示个人魅力的大舞台。随着科技的发展,制作网站的软件也随之增多,下面简要介绍网页制作是需要的软件 1网页制作要用的工具 Dreamweaver简介 Dreamweaver是美国毕MACOROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器,它是第一套针对专业网页设计师特别视觉化网页开发工具,利用它可以轻而易举的制作出跨越平台限制和跨越浏览器限制的充满动感的网页。其特点有以下几个方面:最佳的制作效率、能够迅速的管理网站,拥有无可比拟的控制能力、还集成了程序开发语言。 HTML语言简介 HTML(HyperTextMark-upLanguage)即超文本标记语言,是WWW的描述语言。html 是在sgml 定义下的一个描述性语言,或可说html 是sgml 的一个应用程式,html 不是程式语言,它只是标示语言。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部(Head)、主体(Body)两大部分,其中头部描述浏览器所需的信息,而主体则包含所要说明的具体内容。 另外,HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。 FLASH简介 FLASH简介Flash是一种交互式矢量多媒体技术,他的前身是Futureplash,早期网上流行的矢量动画插件。后来由于Macromedia公司收购了Future Splash以后便将其改名为 Flash2,到现在最新的flash4。现在网上已经有成千上万个Flash站点,著名的如Macromedia专门ShockRave站点,全部采

静态网页设计课程标准

第一部分课程定位 《静态网页设计》是计算机应用技术专业的职业拓展课程之一,对培养学生的网站建设岗位的职业能力起到支撑作用。课程学习过程中培养学生的网站设计、开发能力,能将客户需求归纳整理成文档的能力,能使用平面设计、动画设计、网站编辑等软件工具的能力。通过具体内容的学习,最终能按照正规的设计流程制作出客户满意的页面,为其职业发展提供坚实的技术基础。

第二部分课程设计理念 本课程遵照教高[2006]14号、教高[2006]16号、教高厅函[2007]47号等文件精神,依据本专业的人才培养方案,确定本课程的目标和教学内容,具体遵循以下原则: 1.在课程设计上,坚持以能力为本位,以学生为主体,教师角色转换为倡导者。 2.在课程内容选取上,以过程性知识为主、陈述性知识为辅,即以实际应用的经验和策略的习得为主、以适度够用的概念和原理的理解为辅。 3.在课程内容排列上,以工作过程为参照系整合陈述性知识与过程性知识。 4.在课程内容结构上,突出模块化设置,以便新技术新产品进入教学内容。 5.在课程职业技能培养上,把职业资格证书(职业标准)的考核项目与要求纳入到专业课程标准之中,为学生就业服务。 6.在课程教学组织设计上,以真实工作任务和社会产品为载体组织教学,积极推广探索教学做一体化、情境式教学、互动式教学。 7. 以“REACT”设计情境教学,以“3P”和“ARCS”模式设计互动式教学活动。 8.在教学资源建设上,突出学习包教学标准建设和借助教学平台开发网络教学资源。 9.在培养过程中,注重全人发展、服务学习、学长计划、过程资历认可(RPL)的实施。 (1)全人发展(Whole Person):待人接物、如何看待钱、价值观、怎么安排自己。 (2)服务学习(Service Learning):到非盈利机构作义工,提高学习动力,培养为他人服务精神,并把这些活动作为成绩之一。 (3)学长计划:学生辅导员。 (4)过程资历认可(RPL):如学徒10年,要认可他。 第三部分课程目标 本课程的目标是培养学生的计算机网站设计开发职业能力,使学生达到国家相关职业标准。职业能力与国家相关职业标准如下: 一、职业能力

静态网页设计的试题及答案

静态网页设计的试题及答案 1.HTML文档正文的标记是(B)。 A)和 B)和 C)和 D) 2.在Dreamweaver网页制作中,给网页添加信息框(弹出信息),应利用(C)面板。 A)代码B)文件C)行为D)应用程序 3.在Dreamweaver中,要对一幅大图的局部区域设置超级链接,可以使用(C)技术。 A) 直接设置B) 表格技术 C) MAP技术D) JavaScript 4.在Dreamweaver设计网页时,下列关于表格的说法,不正确的是(D)。 A)表格可以嵌套 B)可以对表格添加超链接 C)表格可以通过样式表来进行修饰 D)表格可以用来辅助网页布局 5.如果需要在打开当前窗口时自动弹出一个新的浏览器窗口,应该针对Body的(B)事件添加“打开浏览器窗口”的命令。 A)Check B) Text C)onLoad D) 行为 6.在Dreamweaver中,要实现小图片的时间轴动画效果,对小图片的要求是(D)。 A) 小图片必须具有动画功能,比如是具备动画效果的gif文件; B) 小图片必须存放到层中 C) 小图片必须被放到时间轴上 D) 对小图片没有什么要求,直接插到页面中就行了 7.在Dreamweaver中,我们可以为链接设立目标,表示在新窗口中打开网页的是(D)。A)_blank B)_parent C)_self D)_top 8.在Dreamweaver网页制作中,网页特效通常通过( D )语言实现。 A)C B) JavaScript C)VB D)HTML 9. HTML文档的层标记是(D)。 A)

B)和 C) D) 10.在以Dreamwaver制作网页过程中,可以利用模板快速建立新网页。关于模板的叙述正确的是(B)。 A) 模板被修改后,根据此模板建立的页面必须随之修改; B) 模板上一般设置“可编辑区域”,其目的是使以该模板建立的页面在该区域是可以编辑的; C) 模板不能被删除,模板一旦被删除,与之相关的网页也同时被删除 D) 不能让当前页面使用一个已经存在的模板 11.在网页设计中,如果希望单击某一图片就会自动登陆到https://www.wendangku.net/doc/171439780.html,网站,常用的