静态网页毕业论文.docx

上传人:b****6 文档编号:13684003 上传时间:2023-06-16 格式:DOCX 页数:18 大小:1.17MB
下载 相关 举报
静态网页毕业论文.docx_第1页
第1页 / 共18页
静态网页毕业论文.docx_第2页
第2页 / 共18页
静态网页毕业论文.docx_第3页
第3页 / 共18页
静态网页毕业论文.docx_第4页
第4页 / 共18页
静态网页毕业论文.docx_第5页
第5页 / 共18页
静态网页毕业论文.docx_第6页
第6页 / 共18页
静态网页毕业论文.docx_第7页
第7页 / 共18页
静态网页毕业论文.docx_第8页
第8页 / 共18页
静态网页毕业论文.docx_第9页
第9页 / 共18页
静态网页毕业论文.docx_第10页
第10页 / 共18页
静态网页毕业论文.docx_第11页
第11页 / 共18页
静态网页毕业论文.docx_第12页
第12页 / 共18页
静态网页毕业论文.docx_第13页
第13页 / 共18页
静态网页毕业论文.docx_第14页
第14页 / 共18页
静态网页毕业论文.docx_第15页
第15页 / 共18页
静态网页毕业论文.docx_第16页
第16页 / 共18页
静态网页毕业论文.docx_第17页
第17页 / 共18页
静态网页毕业论文.docx_第18页
第18页 / 共18页
亲,该文档总共18页,全部预览完了,如果喜欢就下载吧!
下载资源
资源描述

静态网页毕业论文.docx

《静态网页毕业论文.docx》由会员分享,可在线阅读,更多相关《静态网页毕业论文.docx(18页珍藏版)》请在冰点文库上搜索。

静态网页毕业论文.docx

静态网页毕业论文

某某化工职业学院

毕业设计(论文、专题实验)任务书

姓名

赵玉

专业

计算机应用技术

班级

计应11-1

指导教师

X海龙温铂

题目

静态企业网页

原始数据

说明书

(论文、实验)

主要内容

本次设计了解了静态网页设计与制作的内涵和意义。

运用Dreanweaver软件,采用div+css为企业网页进展设计与制作,根据其内容、策划等确定根本思路,制定方案,并按思路认真完本钱次设计。

 

图纸要求

 

 

对学生

综合训

练方面

的要求

根据所学课程的理论知识,将理论与实践相结合,设计制作出一套完整的作品。

完成期限

2013年11月25日至2013年12月15日

备注:

签发:

日期:

2013年12月

某某化工职业学院

毕业设计(论文)评阅意见表

专业

计算机应用

班级

计应111

姓名

赵玉

毕业设计

(论文)题目

静态企业网页制作

 

 

 

 

成绩

摘要

计算机和计算机网络的飞速开展,人们对计算机网络的依赖是越来越大。

人们在网上聊天交友,在网上请教问题,查阅资料,还在网上听音乐。

除此之外,人们还会在网上进展商务交易、下载信息,有着众多的使用者。

尤其是电子商务大大的减少了人们对周围环境的依赖,无论是哪里的网友,都可以浏览到世界各地的各类信息,非常的方便,由于以上的优势,各类如雨后春笋般的出现,企业也不例外。

本论文着重对div+css布局与美化公司网页进展了讨论;同时根据客户需求,采用div+css实现了咨询公司网页的设计,具体实现了首页、公司简介、品牌历史与技术创新、产品展示、用户注册与登录联系我们、在线留言等功能,系统符合公司的需求。

关键词:

网页设计Dreamweaverdiv+css企业网页

第1章前言

网页和在如今的Internet网络中已经成为重要的根底,是作为政府和事业单位工作、公司宣传、电子商务等社会和经济内容的网络平台支持。

政府、事业单位和企业对于网页的设计与制作也越来越重视。

由于Web2.0的成熟和广泛应用,网页设计和制作也和以前截然不同。

尤其是Div+CSS技术的应用对于样式和内容的维护起到了至关重要的作用。

Adobe公司对于网络整合软件Dreamweaver在这方面做了很大的改良,DreamweaverCS5操作更加方便简捷,给予Div+CSS布局全面的支持。

当今世界已进入信息时代,Internet成为21世纪最受关注的焦点之一,它的飞速开展和在全球X围的普与应用正在给人类生活带来革命性变化。

网络技术的开展也取得了巨大的成就,为开发提供了很好的技术支持。

已经成为现阶段众多企业不可或缺的网络营销平台,互联网应用规模正在不断扩大。

其中,特别是中小型企业,对于网络平台搭建的需求相当的迫切。

各大门户网,企业网都在WEB2.0的标准上,采用div+css来布局,因此有了此次的选题。

企业是一个企业不可缺少的局部,它能介绍企业文化、经营理念、特色服务与企业在全国的网点分布。

拓宽顾客市场,增加企业与客户之间的联系,缩短二者之间的距离。

提高企业知名度,为企业今后的业务开展开辟一个良好的社会环境。

它的内容对于企业来说至关重要,企业概况、企业论谈、企业特色服务、最新企业新闻动态等局部应该能够为用户提供充足的信息。

企业做成检索迅速、查找方便、可靠性高、存储量大、某某性好、寿命长、本钱低、维护方便、信息实时性强的功能完善的大型企业。

这些优点能够极大地提高了企业的效率,也是企业走向科学化、信息化与世界接轨的重要条件。

第2章静态网页制作概述

静态网页有时也被称为平面页。

静态网页的网址形式通常为htm〔超文本标记语言〕结尾,还有就是以超文本标记语言〔.htm、.html〕、.shtml、.xml〔可扩展标记语言〕等为后缀的。

在超文本标记语言格式的网页上,也可以出现各种动态的效果,如.GIF格式的动画、FLASH、滚动字幕等,这些“动态效果〞只是视觉上的,与下面将要介绍的动态网页是不同的概念。

静态网页面通常是超文本标记语言文档存储为文件在文件系统里头,并且可以通过HTTP访问网络服务器。

2.1静态页面

静态页面是网页的代码都在页面中,不需要执行asp,php,jsp,.net等程序生成客户端网页代码的网页。

静态页面不能自主管理发布更新的页面,如果想更新网页内容,要通过FTP软件把文件DOWN下来用网页制作软件修改〔通过fso等技术例外〕。

但是静态页面最大的好处是下载速度快,因为不需要程序运算和数据库连接。

常见的静态页面以.html、.htm为扩展名的。

并非上没有动画的就是静态页面。

2.2网页开发技术

HTML〔HyperTextMark-upLanguage〕即超文本标记语言,是的描述语言。

严格的来讲,HTML不能算做一门编程语言,因为它没有自己的数据类型,也没有分支、循环等控制结构。

它的设计简单,结构灵活,允许在Web浏览器与其它兼容的应用程序中显示文本和图像,并且文档的某些局部可以成为超。

完成后把这些文档保存为*.html文件,然后用浏览器打开。

HTML是网络的通用语言,一种简单、通用的全置标记语言。

它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。

2.3网页布局

主页就好象是宣传栏或者店面——对访问者产生第一印象,都希望尽量给人留下好的印象。

网页应该力求抓住而不是淹没浏览者的注意力,过多的闪烁、色彩、下拉菜单框、图片等会让访问者无所适从。

网页布局的方法有两种,第一种为纸上布局;第二种为软件布局。

企业网页布局方法采用软件布局法,利用Photoshop软件所具有的对图像的编辑功能用到设计网页布局上更显得心应手。

利用Photoshop可以方便的使用颜色,使用图形,并且可以利用层的功能设计出用纸X无法实现的布局意念。

企业网页布局技术采用层叠样式表的应用,在新的HTML4.0标准中,CSS(层叠样式表)被提出来,它能完全准确的定位文本和图片。

CSS有点复杂,但它确实是一个好的布局方法。

曾经无法实现的想法利用CSS都能实现。

目前在许多站点上,层叠样式表的运用是一个站点优秀的表现。

企业网页的配色主要采用白色和灰色这样一种大众化的配色,使网页简洁大方而且方便浏览者浏览,同时带给用户一种新的体验。

颜色可以瞬间改变我们的情绪和意见。

颜色会让我们感觉到舒适、敬畏,或者激动。

颜色是平衡中的重要局部,不能忽略。

2.5网页设计流程

网页设计是一个互动的过程,不仅是设计师构思设计就可以完成的。

从客户提出需求到最终发布,期间需要客户与设计人员共同参与协商才可以,具体流程如下:

首先,获取客户需求和资料。

在设计页面之前,设计师需要知道客户的需求,从而确定客户建立的目的。

客户提出需求是非常重要的一个环节。

没有详细的需求,设计人员无法凭空进展设计制作。

在这个步骤中,双方的沟通与交流是非常重要的。

其次,确定内容。

设计人员选择适合自己的图像编辑软件、动画制作软件和网页制作软件进展网页的初步设计,这中间可能还需要和客户进展屡次沟通才能达到客户满意的效果。

在具体设计时,设计人员应该为定位一个主题,从而保证所有网页都围绕这个主题进展设计制作,保证风格的和谐统一。

然后,申请域名和空间。

使用该方法能够有效同步管理文件。

还可以通过FTP软件连接到服务器空间上,然后上传发布文件。

最后,后期维护。

一般静态上传后,如果客户方没有专业人员维护,这样就需要设计人员从客户方获取新资料进展定期或不定期的更新。

如果是动态,设计人员需要负责培训客户方如何使用后台管理,这样客户就可以自己通过后台管理添加信息,设计人员只要与时更正动态的错误即可。

2.6网页设计原如此

1、目的性

任何一个,必须首先具有明确的目的和目标群体。

是面对客户、供给商、消费者还是全部?

主要目的是为了介绍企业、宣传某种产品还是为了试验电子商务?

如果目的不是唯一的,还应该清楚的列出不同目的的轻重关系。

建站包括类型的选择、内容功能的筹备、界面设计等各个方面都受到目的性的直接影响,因此目的性是一切原如此的根底。

2、专业性

的信息内容应该充分展现企业的专业特性,对外介绍企业自身,最主要的目的是向外界介绍企业的业务X围、性质和实力,从而创造更多的商机。

3、实用性

提供的功能服务应该是切合浏览者实际需求的且符合企业特点的。

例如网上银行提供免费电子和个人主页空间就既不符合浏览者对网上银行的需求也不是银行的优势,这样的功能服务提供不但会削弱浏览者对的整体印象,还浪费了企业的资源投入,有弊无利。

4、层次性

条理清晰的结构,表现为的板块划分的合理性,信息内容的获取和功能服务的过程都应该尽量将所需要进展的步骤控制在3-5步以内,不得不需要更多的步骤的时应该有明确的提示。

5、一致性

页面整体设计风格的一致性:

整体页面布局和用图用色风格前后一致。

界面元素的命名的一致性:

同样的元素应该用同样的命名;同类元素命名满足一致性,做到即使某个元素的表述不清楚也能从上下文推断其义。

功能一致性:

完成同样的功能应该尽量使用同样的元素。

元素风格一致性:

界面元素的美观风格、摆放位置在同一个界面和不同界面之间都应该是一致的。

第3章网页需求分析

3.1课题来源

信息产业的开展,促使相关技术也得到相应的开展。

电子商务作为未来商务、流通等领域的热门从1999年开始也得到飞速开展,而基于网上的建设、网页制作和发布也得到了重视。

建立的好处:

1、可以利用与时得到客户的反应信息。

2、可以降低通信费用。

3、可以与潜在客户建立商业联系。

4、可以与客户保持密切联系。

5、可以全面详细地介绍美食与其制作方法。

3.2需求分析

是企业向用户和网民提供信息的一种方式,是企业开展电子商务的根底设施和信息平台。

企业的网址被称为“网络商标〞,也是企业无形资产的组成局部,而如此是反映企业形象和文化的重要窗口。

在IT行业迅速开展的今天,企业的建设已经成为一个企业开展必不可少的存在。

对于创意设计某某来说,我们将建立一个以宣传为目的的类型。

将于短期内强力打造公司的宣传力度,让更多的客户了解,信任公司。

的建设,也是公司对于宣传方面的长期投资。

本需要设置一下几个模块:

1、企业品牌形象

对于一个以生产为主的大型企业而言,企业的品牌形象至关重要。

特别是对于互联网技术高度开展的今天,大多客户都是通过网络来了解企业产品、企业形象与企业实力,因此,企业的形象往往决定了客户对企业产品的信心。

建立具有国际水准的,能够极大的提升企业的整体形象。

2、企业首页

首页表现的是一个的门面,也显示了企业的一些相关的消息,是设计中比拟重要的一局部,它以综合平台的形式展示整个企业各局部的主体内容,是整个的导航,能够让浏览者在第一时间内领略到企业特色所在。

3、企业介绍

具体介绍出企业的背景,经营项目,荣誉资质和公司的开展史,结构,业务流程等等一系列来加大公司的宣传力度,好让客户能全面的了解公司便于树立企业形象。

2、产品展示

一般其他营销模式的企业都是注重产品展示来加强企业的宣传力度,但是对于创意设计某某来说,没有其实际物品展示,只有展现其出众的业绩实例才能让客户信服,才能从侧面展现出公司的实力,让客户更放心的把业务交给公司处理。

4、用户注册

使用户成为会员,可以足不出户通过互联网向客服了解产品的情况,在降低企业内部资源顺好、减低本钱、加强企业员工与员工,企业与员工之间的联系和沟通等方面发挥巨大的作用,最终使企业的运营和运作打到最大的优化。

5、在线留言

在线留言是浏览者对我们提出的意见和建议,在留言过后我们也可以通过这个发现我们的不足和好的地方,要是发现我们的不好,我们也可以接收到您的宝贵意见并给您最满意的答复,对于好的我们也可以让更多的浏览者看到,顾客的评价是对其他的浏览者的最大的信任。

第4章相关技术

Dreamweaver

Dreamweaver是创建和管理网页的专业化可视编辑器。

使用Dreamweaver可以轻松创建跨平台、跨浏览器的页面。

Macromedia的RoundtripHTML技术允许用户随意导入HTML文档而无需重新设置代码格式。

Dreamweaver可以为用户做到:

使用动态HTML功能〔例如具有动态效果的层和行为〕而不用写一行代码。

它甚至还可以检查用户的工作成果在所有流行的平台和浏览器中可能发生的错误。

Dreamweaver还是一个可以完全自定义的应用程序。

用户可以创建自己的对象和命令修改菜单和快捷键,甚至编写JavaScript代码扩展Dreamweaver的行为和属性检查器。

至于Dreamweaver工作区是非常灵活的,因此它可以适应各种不同的工作风格和使用水平。

常用的Dreamweaver工作区组件有以下假如干种:

1、文档窗口可显示当前文档,文档的外观和浏览器中看到的非常相似。

2、装载器中包含一些打开和关闭常用检查器和模板的按钮。

3、对象工具栏包含创建不同类型的对象〔例如图象、表格和层等〕的按钮。

4、属性检查器显示选定对象的属性。

5、快捷菜单可以使用户对当前选择或区域快速执行某些命令。

6、可固定的浮动工具栏允许用户将浮动窗口、检查器和工具栏组合在一个或多个选择窗口中。

DIV+CSS

4.2.1div

div标签和其他HTML标签没有什么区别,需要由关闭标志。

如果不参加任何css样式,它的效果类似

标记。

Div示例代码如下:

内容

把css的扩展属性放入div标签中,就可以控制div容器中的所有HTML元素显示在屏幕上的具体位置,为了实现这种1:

1的准确控制,必须给当前的div加上唯一的id,用来区分其他div标记。

还有一种情况是:

你想让一类或者说几个div具有一样的样式属性时,可以给每个div加上class属性,这样具有同样class属性的div标记样式一样。

代码如下:

内容

内容

4.2.2CSS

CSS是英文CascadingStyleSheet缩写形式,中文译为层叠样式表或级联样式表。

Web设计者可利用它来定义文档的样式,这里指的文档不仅限于〔X〕HTML。

通过CSS,设计者可控制文档的字体、颜色、图像、表格、和布局格式,同时设计者也可以将表示样式外观的信息从内容中别离出来,集中放置在页面的某一局部,甚至可保存为独立的文件,从而减少文件的大小,节省网络的宽带、节约web设计者维护代码的时间。

CSS有如此多的好处,掌握和使用好它对于web设计者来说是非常必要的。

4.2.3样式

样式一词对于我们来说并不陌生,即使尚未接触CSS的人也不难理解样式的含义。

当你使用MicrosoftWord一类的字处理程序时,几乎总要更爱某些样式以达到更好的效果,比如设定标题为加粗的三号黑体字,每一段的开始流出两个空格等。

样式表不能孤立地使用,因为它本身并不包含任何内容信息。

当然CSS也不仅仅能同Web文档一起使用,它还能定义XML甚至软件界面的样式。

4.2.4层叠

与样式相比,了解层叠一词的CSS初学者可能就比拟少了,层叠是CSS中的术语,它包含了一系列的规如此,浏览器根据这个规如此来确定样式应该如何应用到页面的各个元素中去。

4.3DIV+CSS简介

DIV+CSS是标准〔或称“WEB标准〞〕中常用术语之一,div+css是一种网页的布局方法,这一种网页布局方法有别于传统的HTML网页设计语言中的表格〔table〕定位方式,真正地达到了w3c内容与表现相别离。

HTML语言自HTML4.01以来,不再发布新版本,原因就在于HTML语言正变得越来越复杂化、专用化。

XHTML语言是一种可以将HTML语言标准化,用XHTML语言重写后的HTML页面可以应用许多XML应用技术。

使得网页更加容易扩展,适合自动数据交换,并且更加规整。

在XHTML设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位。

以下是DIV+CSS的特点简介:

1、符合W3C标准。

微软等公司均为W3C支持者。

这一点是最重要的,因为这保证您的不会因为将来网络应用的升级而被淘汰。

2、支持浏览器的向后兼容,也就是无论未来的浏览器大战,胜利的是IE7或者是火狐,您的都能很好的兼容。

3、搜索引擎更加友好。

相对与传统的table,采用DIV+CSS技术的网页,对于搜索引擎的收录更加友好。

4、样式的调整更加方便。

内容和样式的别离,使页面和样式的调整变得更加方便。

现在,MSN等国际门户,网易,新浪等国内门户,和主流的WEB2.0,均采用DIV+CSS的框架模式,更加印证了DIV+CSS是大势所趋。

 

5、CSS的极大优势表现在简洁的代码,对于一个大型来说,可以节省大量带宽,而且众所周知,搜索引擎喜欢清洁的代码。

  

6、表现和结构别离,在团队开发中更容易分工合作而减少相互关联性。

第5章企业网页的实现

5.1布局与配色

本布局技术采用层叠样式表的应用,使用CSS实现出一个完美的。

布局方法采用软件布局法,利用Photoshop软件对图像进展编辑。

网页配色选用白色与灰色的色彩搭配,来实现企业的简单大方。

首页表现的是一个的门面,也显示了企业的一些相关的消息,是设计中比拟重要的一局部,它以综合平台的形式展示整个企业各局部的主体内容,是整个的导航,能够让浏览者在第一时间内领略到企业特色所在。

如图5-1企业首页,导航局部插入div标签编辑CSS,代码如下

  • 首页
  • 公司简介
  • 品牌历史
  • 技术创新
  • 车型图片
  • 车型视频
  • 用户工具
  • 在线留言
  • 中间局部插入“布局对象〞“Spry选择卡式面板〞,让浏览者可以选择性的浏览图片信息。

    在Spry选择卡式面板的下方分别为会员登录、新闻中心、联系我们,让浏览者可以直接看到所需要的信息。

    图5-1公司首页

    5.3公司简介

    具体介绍出企业的背景,经营项目,荣誉资质和公司的开展史,结构,业务流程等等一系列来加大公司的宣传力度,好让客户能全面的了解公司便于树立企业形象。

    如图5-2公司简介,中间局部左侧为产品系列,右侧为公司简介。

    图5-2公司简介

    主要介绍企业的产品,让浏览者可以真实地看到企业的产品、进一步了解产品。

    如图5-3图片展示,中间局部左侧为产品系列,右侧为产品图片展示。

    图5-4视频展示,中间局部左侧为产品系列,右侧为产品视频展示。

    图5-3图片展示

    图5-4视频展示

    使用户成为会员,可以足不出户通过互联网向客服了解产品的情况。

    如图5-5用户注册,中间局部左侧为产品系列,右侧为用户注册。

    图5-5用户注册

    5.5在线留言

    在线留言是浏览者对我们提出的意见和建议,在留言过后我们也可以通过这个发现我们的不足和好的地方,要是发现我们的不好,我们也可以接收到您的宝贵意见并给您最满意的答复,对于好的我们也可以让更多的浏览者看到,顾客的评价是对其他的浏览者的最大的信任。

    如图5-7在线留言,中间局部左侧为产品系列,右侧为在线留言。

    图5-7在线留言

    毕业设计总结

    随着毕业日子的到来,毕业设计也接近了尾声。

    经过几周的奋战我的毕业设计终于完成了。

    在没有做毕业设计以前觉得毕业设计只是对这几年来所学知识的单纯总结,但是通过这次做毕业设计发现自己的看法有点太片面。

    毕业设计不仅是对前面所学知识的一种检验,而且也是对自己能力的一种提高。

    通过这次毕业设计使我明白了自己原来知识还比拟欠缺。

    自己要学习的东西还太多,以前老是觉得自己什么东西都会,什么东西都懂,有点眼高手低。

    通过这次毕业设计,我才明白学习是一个长期积累的过程,在以后的工作、生活中都应该不断的学习,努力提高自己知识和综合素质。

    大学三年就会在这最后的毕业设计总结划上一个圆满的句号。

    我曾经以为时间是一个不快不慢的东西,但现在我感到时间过的是多么的飞快,三年了,感觉就在一眨眼之间完毕了我的大学生涯。

    毕业,最重要的一个过程,最能把理论知识运用到实践当中的过程就数毕业设计了。

    这也是我们从一个学生走向社会的一个转折。

    另一个生命历程的开始。

    毕业设计的这几周,我学到了很多,也成熟了很多。

    参考文献

    [1]陈琳.photoshopcs3入门实战与提高[M].:

    电子工业,2008,11

    [2]戎马工作室.Dreamweaver8与asp动态开发[M].:

    机械工业,2006,5

    [3]戴一波.DreamweaverCS3制作炫例精讲[M].:

    电子工业,2008,1

    [4]何秀芳.网页制作与建设课堂实录[M].:

    人民邮电.2009,3

    [5].唐守国主编,创意+:

    Photoshopcs4网页设计、配色与特效案例精粹,清华大学,2010年7月第一版

    [6].王征主编,JavaScript网页特效实例大全,清华大学,2006年9月第一版

    [7].史晓燕、苏萍编著,网页设计根底〔HTML,CSS和JavaScript〕,清华大学,交通大学,2006年10月第一版

     

    致谢

    经过几周的努力我的毕业设计终于完成了。

    在没有做毕业设计之前我觉得毕业设计只是对这几年来所学知识的总结,但是后来我发现做毕业设计原来的看法有点太片面了。

    毕业设计不仅是对前面所学知识的一种检验,而且也是对自己能力的一种提高。

    经历过这次毕业设计我更加明白了自己原来知识还是比拟欠缺的。

    自己要学习的知识还是太多了。

    通过这次的毕业设计,我知道了学习真的是一个长期积累的过程,在今后的工作和生活中都应该不断的去积累,努力提高自己的知识量和整体的综合素质。

    我对所有人的耐心表示感谢,尤其是我的指导教师X海龙教师和温铂教师,他仔细阅读了我的论文和程序,并提出了许多宝贵的意见和建议。

    感谢他能在忙碌的工作中抽时间指导我。

    使设计得以顺利完成。

    最后,感谢某某化工职业学院的全体同学,几年来他们在学习、工作和生活中给了我很多的帮助和支持,使我的大学生活收获很多,在此衷心的感谢他们,衷心的祝福他们身体健康,永远快乐。

    展开阅读全文
    相关资源
    猜你喜欢
    相关搜索
    资源标签

    当前位置:首页 > IT计算机 > 电脑基础知识

    copyright@ 2008-2023 冰点文库 网站版权所有

    经营许可证编号:鄂ICP备19020893号-2