文档库 最新最全的文档下载
当前位置:文档库 › 简单生活网上买菜系统静态网页设计与制作

简单生活网上买菜系统静态网页设计与制作

简单生活网上买菜系统静态网页设计与制作
简单生活网上买菜系统静态网页设计与制作

四川交通职业技术学院毕业设计论文

设计(论文)题目:

简单生活网上买菜系统静态网页设计与制作

入学年月

姓名

学号

专业计算机应用技术

指导教师

完成日期 2015 年 5 月 15 日

【摘要】计算机和计算机网络的飞速发展,人们对计算机网络的依赖是越来越大。人们在网上聊天交友,在网上请教问题,查阅资料,还在网上听音乐。除此之外,人们还会在网上进行商务交易、下载信息,有着众多的使用者。尤其是电子商务大大的减少了人们对周围环境的依赖,无论是哪里的网友,都可以浏览到世界各地的各类信息,非常的方便,由于以上的优势,各类网站如雨后春笋般的出现,这也就是我的毕业设计的实际意义。本文就个人网站的规划与建设,以软件工程的方法对过程经行了分析与研究。本文的主要工作集中在:对web页进行概述,主要是对Internet的历史和发展作了回顾,在web页的定义而后特性上进行阐述。而Web设计的健康发展依靠web标准的采用,没有web标准就不会有真正的可访问性和连贯的设计。不用web标准,就跟不上时代。在这样的标准时代,我们需要网页更加容易扩展,适合自动数据交换,并且更加规整。而css,则实现了页面内容与样式分离。鉴于web标准,本论文着重对div+css 布局静态网页进行了讨论。并对网站开发过程中使用的开发工具和技术作了简要的介绍。

对网站建设中提及到术语进行了解释,并对个人网站的由来和发展经行了讨论;对自己的个人网站从规划建设经行了详细的分析;使用Html、Css、Photoshop 等技术实现了个人网站的各种功能并且就网站建设提出了自己的观点与建议。

【关键词】网页设计div+css Photoshop 简单生活网上买菜

The simple life Webpage static buy online design and

production of food system

Abstract:The rapid development of computer and computer network, people rely on computer networks is more and more big. Friends in the online chat, ask questions, access to information on the Internet, listening to music on the internet. In addition, people will conduct business transactions on the Internet, download information, a large number of users. Especially in the electronic commerce greatly reduce people's dependence on the surrounding environment, whether it is where the users can browse around the world to various types of information, very convenient, due to the above advantages, various types of sites have mushroomed appearance, which is my graduation design practical significance. In this paper, the planning and construction of personal website, with the method of software

engineering process byanalysis and research. This article focuses on the work: The web page are summarized, mainly reviews the history and development of Internet, web page definition and characteristic carries on the elaboration. And web design healthy development depends on Web standards used, no web standards, there would be no real access and coherent design. Web standard, cannot keep up with the times. In this era ofstandards, we need Webpage easier to expand, suitable

for automatic data exchange, andmore regular. CSS, realized the separation of content and style of the page. In view of the web standard, this paper discusses div+css layout static Webpage. Use of the web development process and development

tools and techniques are briefly introduced.

On the construction site referred to in terms were explained, and the origin and development of personal website of the discussion; achieved the various functions of the personal website of their own personal website from the planning and construction of the detailed analysis; using HTML, CSS, Photoshop etc. and website construction proposed their views and suggestions.

Key words: Webpage design div+css Photoshop Easy Living Shopping online

前言 (1)

第1章网站设计背景 (2)

1.1web概述 (2)

1.2结构标准语言 (3)

第2章技术支持 (5)

2.1 HTML (5)

2.2 JavaScript (5)

2.3 Photoshop (6)

2.4 Bootstrap (8)

2.5 Dreamweaver (8)

2.6 DIV+CSS (9)

第3章网站总体分析和设计 (11)

3.1网站开发的需求分析 (11)

3.2 网站的总体设计 (13)

3.3 网站的具体设计 (16)

第4章网页的实现 (17)

4.1 首页实现 (17)

4.2其他页面实现 (21)

第5章网站的测试 (33)

结论 (34)

致谢 (35)

参考文献 (36)

当今世界已进入信息时代,Internet成为21世纪最受关注的行业之一,它的飞速发展和在全球范围的普及应用正在给人类生活带来革命性变化。网络技术的发展也取得了巨大的成就,为网站开发提供了很好的技术支持。网站已经成为现阶段众多企业不可或缺的网络营销平台,互联网应用规模正不断扩大。其中,特别是中小型企业,对于网络平台搭建的需求相当的迫切。各大门户网,企业网都在WEB2.0的标准上,采用CSS+DIV来布局网站,所以才有了此次的选题。

论文详细论述了一个基于公司网站的开发的设计过程。在技术上,采用了Photoshop网站开发工具,以HTML的超大功能结合JavaScript 的客户端语言,以增加网站的动态效果。这样的构造有利于以后对网站系统开发的把握,并给以后的开发积累一定的经验,提升编程能力。其中,最主要的就是介绍和展示DIV+CSS在网页中的实用和魅力,还有Bootstrap这个框架给网站建设带来的便利。

随着互联网在中国的发展,越来越多的卖菜商把传统的卖菜移植到互联网上,从而形成了当今网上餐饮蓬勃发展的趋势。本网上买菜系统设计属于小型电子商务系统,设计能够满足中小型餐饮店及家庭的网上售菜需要。本网上订餐系统的设计充分考虑了用户的视觉感受,努力做到界面简单明了,功能相对完善,主要针对人群为广大的宅男宅女和上班时间比较忙的上班族,所以本网站在更新的时候会注意多涉及这部分人群的兴趣与爱好进行改进设计,前景看好。

论文组织如下:首先阐述了该系统的开发背景、意义,详细介绍了div+css 理论知识;其次介绍了相关的开发工具及技术基础;接着对网站的需求进行了分析,并提出了具体的设计方案;然后展现了整个系统的具体实现,包括网页的设计和连接,各功能模块的实现;最后对该网站进行了严格的测试。

第1章网站设计背景

1.1web概述

1.1.1认识WEB

web本意是蜘蛛网和网的意思。现广泛译作网络、互联网等技术领域。表现为三种形式,即超文本(hypertext)、超媒体(hypermedia)、超文本传输协议(HTTP)等。Web(World Wide Web,简称WWW,又称万维网)是目前Internet上应用最广泛也是最重要的信息服务类型,它的影响已经进入了Internet上的广告、新闻、电子商务和展示信息等各个服务领域。Web采用浏览器/服务器(B/S)工作模式,其运作模式可以描述为:请求→处理→应答。Web以超文本标记语言HTML(Hyper Text Markup Language)与超文本传输协议HTTP(Hyper Text Transfer Protocol)为基础,通过浏览器为用户提供方便友好的信息浏览界面。Web将位于全世界互联网上不同网址的相关信息有机地编织在一起。在Web服务方式中,信息以页面(或称Web页)的形式存储在Web服务器中,这些页面采用超文本的方式对信息进行组织,通过链接将一页信息链接到另一页信息。这些相互链接的页面既可以放置在同一台主机上,也可以放置在不同的主机上。页面到页面的链接信息由统一资源定位器URL(Uniform Resource Locator)维持。用户通过客户端应用程序(即浏览器)向Web服务器发出请求,服务器根据客户端的请求将保存在服务器中的某个页面返回给客户端,浏览器接收到页面后对其进行解释,最终将信息以图、文、声并茂的形式呈现给用户。Web服务的特点在于高度的集成性,它能够实现不同类型的信息(如文本、图像、声音、动画和视频等)和服务(如New、FTP、Telnet、Gopher及Mail等)的无缝链接,特别适合于广域网中信息的组织、检索与显示。

1.1.2认识WEB

2.0标准

“Web 2.0”的概念开始于一个会议中,展开于O'Reilly公司和MediaLive 国际公司之间的头脑风暴部分。所谓互联网先驱和O'Reilly公司副总裁的戴尔?多尔蒂(Dale Dougherty)注意到,同所谓的“崩溃”迥然不同,互联网比其他任何时候都更重要,令人激动的新应用程序和网站正在以令人惊讶的规律性涌现出来。更重要的是,那些幸免于当初网络泡沫的公司,看起来有一些共同之处。那么会不会是互联网公司那场泡沫的破灭标志了互联网的一种转折,以至于呼吁“Web

2.0”的行动有了意义?我们都认同这种观点,Web 2.0会议由此诞生。WEB 标准不是某一个标准,而是一系列的标准集合,网页主要是由三部分组成:结构(structure)、表现(presentation)、和行为(behavior)。对应的标准也分为三个方面:结构化标准语言主要包括XHTML和XML ,表现标准语言主要包括CSS,行为标准主要包括对象模型(如W3CDOM)、ECMAScripr等。这些标准大部分由W3C起草和发布,也有一些是其他标准组织制订的标准,比如ECMA (European computer Manufacturers Asscoiation) 的ECMASscript 标准。

1.2结构标准语言

1.2.1 XML

XML 是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0,参考https://www.wendangku.net/doc/623988193.html,/TR/2000/REC-XML-30001006。和xthml一样,xml 同样是来源于SGML,但是xml是一种能定义其他语言的语。xml 最初设计的目的是弥补html的不足,以强大的扩展性妈祖网络信息发布的需要,逐渐用于网络数据的转换和描述。关于xml 的好处和技术规范描写,这里就不说了有更多的数据可供参考。

xhtml是The Extensible Hapertext Markup Language 可扩展标识语言的缩写。目前推荐遵循的是W3C于2000年1月26日发布的XthML1.0 ,xml 虽然是数据转换的能力强大,完全可以替代HTML,但是面对成千上万的已有的站点,直接串通XML还为时过早。因此,我们在HTML4.0的基础上,用XML的规则对其进行扩展,得到了xhtml 。简单的说,建立xhtml的目的就是实现XHTML 向xml的过渡。

1.2.2表现标准语言

CSS是Caseading Style Sheets 层叠样式表的缩写。目前推荐遵循的是W3C 于1998年5月12日推荐CSS2。W3C创建CSS标准的目的是以CSS取代表格式布局、帧和其它表现的语言。纯CSS布局与结构式xhtml结合能帮助设计师分离外观与结构,使站点的访问及维护更加容易。

1.2.3 行为标准

1.2.3.1 DOM

DOM 是Document Object Model 文档对象模型的缩写。根据W3C 规范https://www.wendangku.net/doc/623988193.html,/dom/,DOM是一种浏览器,平台,语言的借口,使得你可以访问页面其它的标准组件。简单的理解,DOM解决了Netscaped 的Javascript和Microsoft 的Jscript 之间的冲突,给予web 设计师和开发者一个标准的方法,让他们来访问他们站点中的数据、脚本和表现层对象。

1.2.3.2 ECMAScript

ECMAScript是ECMA(European Computer Manufacturers Association) 制订的标准脚本语言JavaScript。目前推荐遵循的是ECMAScript 262。

CSS是Caseading Style Sheets 的简称。实际上它是一组样式。我们对CSS 样式并不陌生,在网上冲浪时,几乎随时都在与CSS打交道,在网页上没有使用过CSS的网页可能不好找,不管你用什么工具软件制作网页,都在有意无意的使用CSS。用好CSS能使你的网页更加的简练,为什么同样内容的网页,有的人能做出及时KB,而高手做出来的只有十几KB,CSS在其中的作用是不言而喻的。

第2章技术支持

2.1 HTML

HTML(HyperText Markup Language),超文本标记语言,是一种专门用于创建Web超文本文档的编程语言,它能告诉Web浏览程序如何显示Web文档(即网页)的信息,如何链接各种信息。使用HTML语言可以在其生成的文档中含有其它文档,或者含有图像、声音、视频等,从而形成超文本。

超文本文档本身并不真正含有其他的文档,它仅仅含有指向这些文档的指针,这些指针就是超链接。HTML是用来制作网页的语言,网页中的每个元素都需要用HTML规定的专门标记来定义。在7.3节将介绍使用HTML进行网页设计。

要让设计者在网络上发布的网页能够被世界各地的浏览者所阅读,需要一种规范化的发布语言。在万维网(WWW)上,文档的发布语言是HTML。

标记语言是一种基于源代码解释的访问方式,它的源文件由一个纯文本文件组成,代码中由许多元素组成,而前台浏览器通过解释这些元素显示各种样式的文档。换句话说,浏览器就是把纯文本的后台源文件以赋有样式定义的超文本文件方式显示出来。

HTML和网络是紧密相连的,HTML语言的发展和浏览器的支持是密不可分的,在20世纪90年代网络刚刚兴起时,多种浏览器同时流行于世界各地,它们支持HTML语言的标准也各不相同,这样限制了HTML标记语言本身的发展,逐渐,W3C网络标准化组织联手一些较为流行浏览器开发厂商一同定义HTML 标准,并且力推浏览器解释语言和显示方法的统一。

到今天,IE浏览器随着WINDOWS操作信息系统的绝对垄断地位占据着主流市场,这也在另一方面为HTML标准的统一起到了关键作用。

2.2 JavaScript

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

在1995年时,由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较

为接近。

为了取得技术优势,微软推出了JScript,CEnvi推出ScriptEase,与JavaScript 同样可在浏览器上运行。为了统一规格,因为JavaScript兼容于ECMA标准,因此也称为ECMAScript。

JavaScript脚本语言具有以下特点:

1.脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。

2.基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。

3.简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。

4.动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。

5.跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。

不同于服务器端脚本语言,例如PHP与ASP,JavaScript主要被作为客户端脚本语言在用户的浏览器上运行,不需要服务器的支持。所以在早期程序员比较青睐于JavaScript以减少对服务器的负担,而与此同时也带来另一个问题:安全性。

而随着服务器的强壮,虽然程序员更喜欢运行于服务端的脚本以保证安全,但JavaScript仍然以其跨平台、容易上手等优势大行其道。同时,有些特殊功能(如AJAX)必须依赖JavaScript在客户端进行支持。随着引擎如V8和框架如Node.js的发展,及其事件驱动及异步IO等特性,JavaScript逐渐被用来编写服务器端程序。

2.3 Photoshop

Adobe Photoshop,简称“PS”,是由Adobe Systems开发和发行的图像处理软件。

Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具,可以有效地进行图片编辑工作。ps有很多功能,在图像、图形、文字、视

频、出版等各方面都有涉及。

2003年,Adobe Photoshop 8被更名为Adobe Photoshop CS。2013年7月,Adobe公司推出了最新版本的Photoshop CC,自此,Photoshop CS6作为Adobe CS 系列的最后一个版本被新的CC系列取代。

Adobe支持Windows操作系统、安卓系统与Mac OS,但Linux操作系统用户可以通过使用Wine来运行Photoshop。

从功能上看,该软件可分为图像编辑、图像合成、校色调色及特功能特色效制作部分等。图像编辑是图像处理的基础,可以对图像做各种变换如放大、缩小、旋转、倾斜、镜像、透视等;也可进行复制、去除斑点、修补、修饰图像的残损等。

图像合成则是将几幅图像通过图层操作、工具应用合成完整的、传达明确意义的图像,这是美术设计的必经之路;该软件提供的绘图工具让外来图像与创意很好地融合。

校色调色可方便快捷地对图像的颜色进行明暗、色偏的调整和校正,也可在不同颜色进行切换以满足图像在不同领域如网页设计、印刷、多媒体等方面应用。

特效制作在该软件中主要由滤镜、通道及工具综合应用完成。包括图像的特效创意和特效字的制作,如油画、浮雕、石膏画、素描等常用的传统美术技巧都可藉由该软件特效完成。

Photoshop cs6是目前最流行的图形、图像编辑设计软件,在数码影像处理、图像编辑合成、广告设计、封面设计、美术绘画、网页设计等领域都被广泛地应用。

1.文字处理更加方便

2.增加的图层集使图层管理更有序。

3.新增图像功能:图像的剪切和剪裁更加方便。

4.所有工具的选项板改进为工具选项栏放置在工作区顶部,方便先项参数的设置。

5.为了更方便地用路径绘画,改进增加了几何形状工具,通过选择工具的不同工作模式,可创建路径、几何形状或几何填充区,使得矢量绘图功能得到了加强。

2.4 Bootstrap

2.4.1 简介

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter 的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA 的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。

2.4.2 特点

Bootstrap是基于jQuery框架开发的,它在jQuery框架的基础上进行了更为个性化和人性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery 插件。

2.4.3 组件

Bootstrap中包含了丰富的Web组件,根据这些组件,可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件:

下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条、媒体对象等。

2.4.4 Javascript插件

Bootstrap自带了13个jQuery插件,这些插件为Bootstrap中的组件赋予了“生命”。其中包括:

模式对话框、标签页、滚动条、弹出框等。

2.4.5 定制自己的框架代码

可以对Bootstrap中所有的CSS变量进行修改,依据自己的需求裁剪代码。

2.4.6 Bootstrap Less

Less 是一个CSS 预处理器,让CSS 具有动态性。另一方面,Bootstrap 是一个快速开发Web App 和站点的工具包。这样,您可以在CSS 中使用Bootstrap 的Less 变量、mixins(混合)和nesting(嵌套)。

2.5 Dreamweaver

Dreamweaver是创建和管理网页的专业化可视编辑器。使用Dreamweaver 可以轻松创建跨平台、跨浏览器的页面。Macromedia的Roundtrip HTML技术允

许用户随意导入HTML文档而无需重新设置代码格式。

Dreamweaver可以为用户做到:使用动态HTML功能(例如具有动态效果的层和行为)而不用写一行代码。它甚至还可以检查用户的工作成果在所有流行的平台和浏览器中可能发生的错误。

Dreamweaver还是一个可以完全自定义的应用程序。用户可以创建自己的对象和命令修改菜单和快捷键,甚至编写JavaScript代码扩展Dreamweaver的行为和属性检查器。

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

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

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

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

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

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

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

2.6 DIV+CSS

2.6.1 DIV+CSS简介

CSS是英语Cascading Style Sheets(层叠样式表单)的缩写,它是一种用来表现HTML或XML 等文件式样的计算机语言。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.样式的调整更加方便。内容和样式的分离,使页面和样式的调整变得更加方便。现在YAHOO,MSN等国际门户网站,网易,新浪等国内门户网站,和主流的WEB2.0网站,均采用DIV+CSS的框架模式,更加印证了DIV+CSS是大势所趋。

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

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

2.6.2 级联样式表简介

有三种方法可以在站点网页上使用样式表:

1.将网页链接到外部样式表。

2.在网页上创建嵌入的样式表。

3.应用内嵌样式到各个网页元素。

4.每一种方法均有其优缺点:

当要在站点上所有或部份的网页上一致地应用相同样式时,可使用外部样式表。在一个或多个外部样式表中定义样式,并将它们链接到所有网页,便能确保所有网页外观的一致性。如果人们决定更改样式,只需在外部样式表—中作一次更改—而该更改会反映到所有与该样式表相链接的网页上。通常外部样式表以.css 做为文件扩展名,例如Mystyles.css。

当人们只是要定义当前网页的样式,可使用嵌入的样式表。嵌入的样式表是一种级联样式表,“嵌”在网页的 标记符内。嵌入的样式表中的样式只能在同一网页上使用。

使用内嵌样式以应用级联样式表属性到网页元素上。

如果网页链接到外部样式表,为网页所创建的内嵌的或嵌入式样式将扩充或覆盖外部样式表中的指定属性。

第3章网站总体分析和设计

3.1网站开发的需求分析

3.1.1需求分析背景

随着21世纪网络信息时代的到来,现代社会都是快速高效率的Internet来传播大量信息资源。人们通过IE浏览信息,当然这种方式也是最常用的,这种方式的需求形成了电子商务。它的是指简单、快捷、低成本的电子通讯方式,买卖双方不出面也可以进行各种商贸活动。电子商务真正的发展将是建立在Internet技术上。

近年来,由于互联网技术的飞速发展及其逐步普及,企业对信息进行网络化管理的条件已经日趋成熟,而传统的通过电话和传真来处理信息的传统方式已经越来越难以满足企业的需求。建立基于网络的管理和销售信息系统,成为企业提高效率、降低成本、完善服务的有力保证。而对于餐饮业,由于一个行业本身的特性,它的流通性是非常高的,所以更对企业的效率提出了更高的要求。

随着越来越多的人接受了电子商务这种便捷、快速的交易形式,网上订餐的顺势而出很快受到了大家的欢迎。

互联网的应用以普及千家万户,这为网络订菜提供了良好的发展空间。同时,网上订菜服务的直观、有效、便捷等优点是传统的电话订菜业务无法比拟的。网络订餐可充通过色彩、图片、说明、设置动画加强了产品了宣传,大大达到了卖菜行业的“色型”要求。

需求结果:生成8个页面,index.html---网站首页;aboutour.html---关于我们;digndan.html---订单;glylogin.html---管理员登录; home.html---用户位置定位;login.html--用户登录;problem.html--常见问题;registera.html--用户注册;sjzs.html--商家菜品展示。

3.1.2网站用户活动分析

3.1.2.1商家活动分析

商家在此过程中首先进行登录,登录成功后跳转到自家店铺,在自己店铺中可以进行添加蔬菜、删除蔬菜、修改蔬菜、确认用户提交的订单、并可以查看订单一系列操作。如图3.1商家活动分析图:

图3.1商家活动分析图

3.1.2.2用户活动分析

用户如果不登录网站也可以直接查看商家展示的各种菜品,当用户想选购菜品时,需要进行登录,再进行下单。登录后的用户可以选购商品、搜索商家等操作。如图3.2用户活动分析图:

图3.2用户活动分析图

3.1.2.3管理员活动分析

管理员通过登录后,可以在此系统中实现许多操作,比如管理商家,审查商家是否合格,添加商家,审核菜品等。如图3.3管理员活动分析图:

图3.3管理员活动分析图

3.2 网站的总体设计

与传统媒体不同,网页除了文字和图像以外,还借助由代码语言编程所实现

的各种交互式效果,增加了网页界面的生动性和复杂性,也使得网页设计者需要考虑更多页面元素的排版、优化。一般来说,网页的界面主要由下面几个因素构成:

3.2.1 文字

文字元素是信息传达的主体部分。网页中的文字主要包括标题、信息、文字链接、几种主要形式。标题和传统媒体中信息传达的基本作用相同,是内容的简概说明一般比较醒目、优先编排。文字作为占据页面重要比率的元素,同时又是信息重要载体,它的字体、大小、颜色和排布对页面整体设计影响极大。我所使用的文字是宋体12号,因为这样看得比较清楚,使整个页面整洁,网页中都普遍的使用,让顾客一看就忍不住继续看,所以在此我选择12号宋体作为网页的主体文字样式。

3.2.2图形

图形在网页界面中具有重要作用。合理的运用图形,可以生动直观、形象地表现设计主题。网页中常用的图形格式包括jpg和gif,这两种格式压缩比高,得到了规范浏览器的支持,下载速度快,具有跨平台的特性,不需要浏览器安装插件即可直接阅览。图形元素包括标题、背景、主图、链接图标四种。

我所使用的图片主要是自己收集的比较精美。如下图3.4图案展示:

图3.4图案展示

3.2.3 页面版式

版式是网页界面设计的重要组成部分,它将文字、图形等视觉元素进行组合配置,使页面整体视觉效果美观和谐,简单大方,便于阅读,实现信息传达的最佳效果。如下图3.5页面版式:

图3.5页面版式

3.2.4色彩

彩色网页比单色网页更具吸引力;色彩本身具有象征作用。如图3.6色彩:

图3.6色彩

3.3 网站的具体设计

3.3.1 链接设计

网页中的链接采用了绿色为背景,字体为白色,鼠标指向时不会产生下划线。如图3。7链接设计:

图3.7链接设计

3.3.2 logo的设计

Logo以绿色蔬菜为原型,配以绿色,是绿色蔬菜的诠释,符合网站的总体风格及主题。如图3.8logo设计:

图3.8logo设计

3.3.3 导航设计

网站的导航栏目可以让用户对网站的内容及信息一目了然。导航分为:注册、登录、找客服、常见问题、关于我们。首先采用div布局,里面嵌套ul形式然后相关css部分。效果如图3.9导航设计:

图3.9导航设计

网页设计与制作实例教程

网页设计与制作实例教程 习题答案 第1章网页与网站基础 一、选择题 1.A 2.B 3.C 4.C 5.A 二、判断题 1.√2.×3.√4.×5.√ 三、问答题 略 第2章网页规划设计 一、选择题 1.D 2.A 3.C 4.A 5.C 二、判断题 1.×2.×3.×4.√5.√ 三、问答题 1.答:网站需求分析一般包括三个阶段的内容:网站背景分析、总体需求分析、具体需求分析。(每个阶段可再详细描述。) 2.答:可从以下几个方面来阐述网站设计的原则:①日期、时间和数字;②欢迎词; ③弹出窗口和引导页面;④新闻和公告信息;⑤网址;⑥控件;⑦链接;⑧主页内容 3.答:打开新浪网首页,分析其布局类型。(答案略) 4.答:网页色彩搭配方法可从以下两个方面去阐述:①根据页面风格以及产品本身的诉求确定主色;②根据主色确定配色。 网页色彩搭配技巧可从以下几个方面去阐述:①用一种色彩;②用两种色彩;③用一个色系;④用黑色和一种色彩以及色彩搭配忌讳的方面。 5.答:打开当当网,具体分析其规划过程。(答案略) 第3章初识网页制作软件 一、选择题 1.C 2.C 3.B

二、填空题 1.代码、拆分、设计2.文件、资源、规则3.超级链接 三、操作题 略 第4章制作网页内容 一、选择题 1.D 2.B 3.A 4.D 5.ABD 6.D 7.B 8.D 9.A 10.A 二、判断题 1.√2.√3.×4.√5.√6.√7.√8.√9.×10.√三、操作题 略 第5章设置网页超级链接 一、选择题 1.D 2.D 3.A 4.D 5. C 二、判断题 1.×2.×3.×4.√5.× 第6章使用CSS样式美化网页 一、选择题 1.B 2.C 3.C 4.B 5.A 6.D 7.D 8.D 9.B 10.C 11.A 12.A 13.C 14.D 15.D 16.A 17.A 18.B 19.D 20.D 二、简答题 1.×2.×3.×4.×5.×6.×7.√8.×9.√10.√11.×12.×13.×14.√15.√16.√ 第7章规划布局网页 一、选择题 1.B 2.A 3.B 4.B 5.D 二、简答题

常州继续教育《网页设计与制作》考试试题及参考答案 最新答案

常州继续教育网页设计与制作题库 单选题30% 多选题 20%填空题15%简答题25% 论述题10% The content of exam include,but not limited in: 1、Photoshop中允许一个图象的显示的最大比例范围 1600% 3、在绘制椭圆形时,以中心点为基准画圆应按住什么键 ALT键 4、Dreamweaver设计网页时,要选中某个单元格,可以将光标先定位在该单元格,然后鼠标移到状态栏的什么标签,单击该标识可以选中该单元格。 Td 5、在表格属性设置中,间距的定义: 表格中单元格之间的间距。单元格间距是指围绕在每个单元格周围的框的厚度(以像素为单位)。 6、表单的基本元素有哪些。 ①询问或请求信息。 ②访问者在其中键入信息的域 ③“提交”和“全部重写”按钮。 ④表单处理程序 8、默认模板的后缀名是什么 dwt 9、对远程服务器上的文件进行维护时,通常采用的是. FTP。 10、为了标识一个HTML文件应该使用的HTHL标记是什么? < html> 11、在实际操作中的两种Email超链按方法: 答: Dreamweaver中: 第一种方法:1)选中需要制作电子邮件超链接的文字或图片。 2)在“属性”面板中的“链接”文本框中输入“mailto”,再输入链接的电子邮件地址。 3)如果想在发邮件的时候带上主题,那么只需在“链接”文本框中输入如下语句,例如:mailto:1@https://www.wendangku.net/doc/623988193.html,?subject=学习共享。4)完成电子邮件超链接的制作,预览并点击电子邮件超链接。 5)此时会弹出自动启动Outlook 第二种方法: 1)将插入点置于e-mail链接出现的地方,或选中要作为e-mail链接出现的文本或图像 2)选择插入 > 电子邮件链接。在对象面板的常用类别中,选择插入E-Mail链接 3)在插入E-Mail链接对话框的文本域中,输入或编辑作为e-mail链接出现在文档中的文本。 4)在E-Mail域中,输入邮件将发送到的e-mail地址 5)点击OK。 12、一个有3个框架的Web页实际上有几个独立的HTML文件? 答:4个。3个分的,1个总的。 13、通常说的Macromedia中的网页三剑客包括哪些 Fireworks Dreamweaver Flash 14、FLASH中当需要设置新建文件的背景时,可以在什么面板中进行。 属性面板 15、滴管工具的形状:

《网页设计与制作》期末考试题与答案

〈网页设计与制作》期末考试试题、单项选择题(本大题共30小题,每小题2分,共60分) 1、目前在In ternet上应用最为广泛的服务是(b)。 A、FTP 服务 B、WWW 服务 C、Tel net 服务 D、Gopher 服务 2、域名系统DNS的含义是(b )。 A、Direct Network System B 、Domain Name Service C 、Dynamic Network System D、Distributed Network Service 3、主机域名center. nbu. edu. cn 由四个子域组成,其中(d)子域代表国别代码。 A、center B、nbu C、edu D、cn 5、当标记的TYPE属性值为(d )时,代表一个可选多项的复选框。 A、TEXT B、PASSWORD C、RADIO D、CHECKBOX 6、为了标识一个 HTML文件开始应该使用的HTML标记是(c)。 A、

B、 C、 D、 7、在客户端网页脚本语言中最为通用的是(a)。 A、javascript B、VB C、Perl D、ASP & 在HTML中,标记的Size属性最大取值可以是(c)。 A、5 B、6 C、7 D、8 9、在HTML中,单元格的标记是(a )。 A、 D、 11、下面不属于CSS插入形式的是(a )。 A、索引式 B、内联式 C、嵌入式 D、外部式

12、在网页中最为常用的两种图像格式是(a)。 A、JPEG 和 GIF B、JPEG 和 PSD C、GIF 和 BMP D、BMP 和 PSD 13、如果站点服务器支持安全套接层(SSL),那么连接到安全站点上的所有URL开头是 (b)。 A、HTTP B、HTTPS C、SHTTP D、SSL 14、在HTML中,要定义一个空链接使用的标记是(a ). A、<a href= "#"> B、<a href= ”?"> C、<a href= "@"> D、<a href= ”"〉 15、对远程服务器上的文件进行维护时,通常采用的手段是(b) A、POP3 B、FTP C、SMTP D、Gopher 16、下列Web服务器上的目录权限级别中,最安全的权限级别是(a ) A、读取 B、执行 C、脚本 D、写入 17、用Fireworks切割图形时,需要的工具是(c) A、裁剪 B、选取框 C、切片 D、自由变形 18、 In ternet上使用的最重要的两个协议是(b ) A、TCP 和 Tel net B、TCP 和 IP C、TCP 和 SMTP D、IP 和 Tel net 19、 body元素用于背景颜色的属性是(c) A、alink B、vlink C、bgcolor D、background 20、下面说法错误的是(d) A、规划目录结构时,应该在每个主目录下都建立独立的images目录 B、在制作站点时应突出主题色 C、人们通常所说的颜色,其实指的就是色相 D、为了使站点目录明确,应该采用中文目录

网页设计与制作简答题

简答题 1.图象处理工具主要有那几类应用? 答:使用图像处理工具可对图像进行编辑修饰`优化`图形文件格式转换等处理。 包括:1图形编辑。图形编辑包括制作页面中的字体`制作3D效果,建立透明GIF文件,插入背景阴影,处理字体`箭头`徽标等页面元素。并能对图像进行剪切`移动和旋转处理。 图像修饰。 图像优化。 2.什么是Web服务器?Web浏览器的作用是什么?简述浏览器打开文件的步骤. 答:Web服务器是是用于存储WWW文件并响应处理客户机请求的计算机.浏览器的作用在于 解释并显示超文本档,包括指向其他文档的引用(或指针),与其他HTTP服务器上非常相似,这些指针也称链接。从一个超文本页上选择一个链接时,浏览器将请求送该回到新的服 务器,然后在客户端上显示另一个充满链接的页面。 打开一个Web文件的基本步骤如下: 1).在浏览器中指定要访问的Web文件的URL。 2).浏览器将请求发送给服务器。 3).服务器将请求转递给指定的URL处的服务器。 4).该服务器将文件送回到服务器上。 5).服务器将文件送回到客户端浏览器上。 6).浏览器将文件显示在计算机屏幕上。 3.网站设计过程中的最重要原则是什么?为什么? 答:网站设计过程中的最重要原则是创意。虽然一个网站的主要目的是传递给人们信息,但是在传递信息的同时还要把他的文化同样也传递给获取这些信息的人们,比如众所周知的2 63首都在线.新浪网.网易.ChinaRen等网站的页面都是非常朴实的,没有太多的花逍的效 果,运用普通的制作软件就能够制作完成,但它们的页面只需要看一眼见就能够让人马上识 别他是谁,这是因为他们不仅向访问者传达了新闻等网站的信息,更传递了自己的独特风格。 网站的设计基本上是按照一定的步骤进行的,不同的站点开发人员有他们不同的习惯, 对于网页设计都有自己独特的见解。但一般来说有些原则是共同的,有些主要概念也是共同的:仅仅会输入文本,制作超级链接和排列图片,不是真正意义上的网页制作,或者说还不 能称为网页创作。因为网页制作最重要的原则是创意。这个原则也可以看成是网页制作的根本,没有创意的网站不能算一个成功的网站,而这个网站也不能长期存在。 因此,创意是最重要的原则。 4.什么是站点的风格?典型的商业站点具有那些风格特征? 答:站点的风格是指整个网站所采用的结构布局.色调.文字.标志.图案等要素带给浏览者的 关于该网站的印象。 商业公司站点由于其目的与个人站点以及非营利性的组织完全不一样,因此他的站点风 格也与其他两类站点的风格完全不一样。典型的商业站点的风格特征主要体现在以下几个方 面: 1).公司的徽标或商标应出现在页面的最上方,尽可能作到色彩醒目,同时占用版面小。 2).可以采用主题图形产品广告来突出公司形象和风格。主题图形或产品广告应精心设计, 给浏览者以良好印象。 3).主题栏目一般采用图文并茂的超级链接实现,要考虑到主要栏目图片.文字之间的色彩

网页设计与制作选择题讲解学习

网页设计与制作选择 题

1、下列选项中支持透明的图片文件格式是_______。 (A)、 BMP (B)、 TIFF (C)、 GIF (D)、 JPG 正确答案: C 2、以下HTML标记中,________是双标记。 (A)、 img标记 (B)、 hr标记 (C)、 p标记 (D)、 br标记 正确答案: C 3、有关标记,正确的说法是________。 (A)、位置在网页正文区内 (B)、在文件头之后出现 (C)、中间放置的内容是网页的标题 (D)、表示网页正文开始 正确答案: C 4、网页是用__________语言编写,通过WWW传播,并被WEB浏览器翻译成为可以显示出来的集文本、超链接、图片、声音和动画、视频等信息元素为一体的页面文件。(A)、 C++语言 (B)、 HTML语言 (C)、 Basic语言

正确答案: B 5、关于首页和主页,不正确的说法是______。 (A)、浏览网站时最先访问的页为首页 (B)、首页和主页可以是同一页 (C)、首页就是主页,没有区别 (D)、主页是整个网站的导航中心 正确答案: C 6、在Dreamweaver中,表格的宽度可以被设置为100%,这意味着______。 (A)、表格的宽度为100mm (B)、表格宽度为100个像素点 (C)、表格的宽度会随着浏览器窗口大小的变化而自动调整 (D)、表格的宽度是固定不变的 正确答案: C 7、在创建一个Dreamweaver模板时,必须在该模板中加入一个________,以便在把该模板套用到某个网页后,网页能被正常使用。 (A)、可控制区域 (B)、可套用区域 (C)、可复制区域 (D)、可编辑区域 正确答案: D 8、网页文件的扩展名为______。 (A)、 GIF

网页设计与制作总结

网页设计与制作 实训报告 班级:多媒体152 姓名:张莉钧 学号: 指导老师:薛杨王淑惠 实训时间:6.20——6.24 一、实训目的: 1、进一步熟悉和掌握网站建设的基本流程和技术规范; 2、巩固运用Dreamweaver网页制作软件制作网页、特别是制作复杂网页的知识; 3、巩固运用PS图像处理软件进行网页中图形制作和运用flash动画制作软件设计网页中动画的知识; 4、巩固综合运用Dreamweaver、PS、flash三个软件完成网站建设任务的方法,能独立设计一个内容完整、图文并茂、技术运用得当的网站; 5、具备独立撰写实训报告基本能力; 6、在网页设计的实践中培养分析问题、解决问题的能力,培养协作、交流的能力,培养创新能力和团队意识; 7、紧紧围绕网页制作的流程:规划、设计、开发、发布、维护来进行网站的开发,制作出具有较高水准的静态网页。以此作为学生学习这门课程的阶段性总结,使学生复习、巩固所学过的理论,并予 以适当的深化,进一步训练学生的基本技能(如:搜集资料、整理数据、发现与分析问题、寻求解决问题的方案等),为今后从事网站开 发、维护和管理奠定基础 二、实训项目——特色美食餐厅网站设计 1、网站主题 我的网站的主旨在于从各个方面全面的介绍特色美食餐厅,包括它的菜品、餐厅的环境以及促销活动。另外,网站里还包括餐厅资料和联系方式,网站里的每一个网页都有统一的风格,每一个网页的主题色彩都是橙色和白色搭配,用以展示餐厅特色的效果。其实最重要的是要做出自己的风格,给浏览者好的欣赏感受。 2、网站材料 主要在网站上搜集所要的网页信息,包括图片、文字。同时,查 询相关的书籍、百度等方式收集所需的文字资料,图象资料,flash动画和网页特效等,用以得来更加具有说服力的页面。要想做好自己的网站,能够给浏览者好的欣感受,就要尽量搜集材料,搜集得材料越多,以后制作网站就越容易。精选自己收集的材料,作为自己制作网页的素材,这样就可以做好一个好的网站。 3、网站规划 我的网站共有7个主页面:首页、美食介绍、优惠活动、商品促销、宴会定制、会员中心和关于我们。每一个页面用统一的模块,以保证网站统一的页面风格。网页布局主要用框架和表格,用框架定位内容的大体结构,再用表格具体定位。位子的设计也是重要的一个部分,根据具体内容决定字体风格,相同的风格多次调用是CSS设计一个样式,以保证随时、准确的调用。 三、网页设计工具使用 1、Dreamweaver——我们使用它做网页的主要布局。 2、Photoshop——我们使用它做网页图片的处理以及logo的制作。

网页设计与制作试题及答案

《网页设计和制作》期末测试试题 一、单项选择题(本大题共15小题,每小题2分,共30分) 1、目前在Internet上使用最为广泛的服务是( )。 A、FTP服务 B、WWW服务 C、Telnet服务 D、Gopher服务 2、域名系统DNS的含义是( )。 A、Direct Network System B、Domain Name Service C、Dynamic Network System D、Distributed Network Service 3、主机域名center. nbu. edu. cn由四个子域组成,其中( )子域代表国别代码。 A、center B、nbu C、edu D、cn 4、当阅读来自港澳台地区站点的页面文档时,应使用的正确文本编码格式是( )。 A、GB码 B、Unicode码 C、BIG5码 D、HZ码 5、当标记的TYPE属性值为( )时,代表一个可选多项的复选框。 A、TEXT B、PASSWORD C、RADIO D、CHECKBOX 6、为了标识一个HTML文件开始应该使用的HTML标记是( )。 A、

B、 C、
B、 C、 D、 7、在客户端网页脚本语言中最为通用的是( )。 A、javascript B、VB C、Perl D、ASP 8、在HTML中,标记的Size属性最大取值可以是( )。 A、5 B、6 C、7 D、8 9、在HTML中,单元格的标记是( )。 A、 D、 10、在DHTML中把整个文档的各个元素作为对象处理的技术是( )。 A、HTML B、CSS C、DOM D、Script(脚本语言) 11、下面不属于CSS插入形式的是( )。 A、索引式 B、内联式 C、嵌入式 D、外部式 12、在网页中最为常用的两种图像格式是( )。 A、JPEG和GIF B、JPEG和PSD C、GIF和BMP D、BMP和PSD 13、如果站点服务器支持安全套接层(SSL),那么连接到安全站点上的所有URL开头是( )。 A、HTTP B、HTTPS C、SHTTP D、SSL 14、在HTML中,要定义一个空链接使用的标记是( ). A、 B、 C、 D、 15、对远程服务器上的文件进行维护时,通常采用的手段是( ) A、POP3 B、FTP C、SMTP D、Gopher 二、多项选择题(本大题共15小题,每小题2分,共30分。在每小题的五个备选答案中,选出二至五个正确的答案,并将正确答案的字母分别填在题干的括号内,多选、少选、错选均不得分。) 1.WWW的组成主要包括( ) A.URL B.Gopher C.HTML D.HTTP https://www.wendangku.net/doc/623988193.html,

静态网页设计-教学大纲

《静态网页设计》教学大纲 课程类别:专业基础课 课程属性:必修课 学分/学时: 4学分/64学时 制订人:课题组 适用专业:信息技术相关专业 一、课程的性质 “静态网页设计”是信息技术类专业学生的专业基础课之一。属于必修课范畴。同时它是一门针对性、实践性较强的课程。主要是培养学生静态网页设计的基本知识和静态网页设计制作的基本技能。 二、与其它课程的关系

三、教学目标 1.知识目标 (1)网站、网页、网页设计等的基本概念; (2)理解HTML语言中的各种文本格式、段落设置、列表等标记知识; (3)理解和掌握基本的DIV+CSS技术知识; (4)理解和掌握表格的基本知识; (5)理解和掌握数据表单的基本知识; (6)理解和掌握基本的框架网页知识; (7)理解和掌握网页图像、动画等多媒体应用知识; (8)理解和掌握网页超级链接知识; (9)掌握基本的动画制作知识; (10)了解网页美工相关知识; (11)了解网站的测试、发布与维护的基本知识; (12)掌握网站制作流程 2.能力目标 (1)能运用HTML语言设置和编辑网页元素; (2)会使用Dreamweaver等网页设计工具制作网页; (3)能使运用基本的CSS技术设置网页风格; (4)能在网页中嵌入图像、动画、视频等多媒体元素; (5)能运用表格布局并设计网页; (6)能正确运用文字超链接、图像超链接技术设计网页; (7)掌握框架制作网页的方法,会使用框架设计网页; (8)掌握制作表单的方法,会利用表单建立交互式页面; (9)能看懂基本的HTML网页源代码。

(10)会设计网页线框图,并能运用PS进行网页效果图设计 (11)掌握切片的基本原则和基本方法,综合运用网页排版技术进行切片素材排版 (12)熟悉网站项目工作流程,能独立进行中小型网站设计。 3.素质目标 (1)具有信息资料收集与整理能力; (2)具备简单的需求市场分析能力; (3)具有一定的语言表达、沟通和协调能力; (4)具有良好的心理素质和责任意识,能及时完成任务的能力; (5)具有踏实肯干的工作作风; (6)具有一定的创新意识和艺术设计素质 四、内容结构与目标任务

网页设计与制作简答题

1、简述Web浏览器打开一个Web文件的工作过程。 2、描述网页设计的一般步骤。 3、简述网页设计的基本准则。 4、简述规划网站目录结构时应遵循的原则。 5、描述版面布局的步骤。 6、什么是“HTML”?HTML“标记”又是什么? 7、简述“HTML”文档的基本结构。 8、简述以下一段HTML代码中各对标记的作用。 〈html〉 〈head〉 〈title〉网页设计〈/title〉 〈/head〉 〈body〉 〈h2〉北国风光〈/h2〉 〈/body〉 〈/html〉 9、如何进行本地网页的测试? 10、网站管理和维护的主要工作有哪些? 11、什么是Web浏览器? 12、简述网页设计中所需要注意的通用规则。 13、简述DHTML的概念及主要组成。 14、简述使用FrontPage在网页中插入一个日历的过程。 15、简述色彩的三原色的概念及每种颜色的调配范围。 16、为什么要采用DHTML技术?客户端动态网页技术有哪些优点? 17、网站栏目划分的原则是什么? 18、XML与HTML相比的主要优点有哪些?

19、请简述一下网站的设计流程? 20、简述FireWorks的特点。 21、网页制作的步骤是什么? 22、怎样让链接没有下划线? 23、怎样在网页中加入多媒体播放? 24、怎样让网页的背景图像不滚动? 25、怎样定义网页的关键字? 26、什么是Web浏览器? 27、网页上所说的重心平衡指的是什么? 28、什么是DHTML?DHTML技术主要由哪几部分组成? 29、在CSS中,对字体的的设置所涉及到的属性有哪些? 30、用HTML语言回答一个HTML文件应具有的基本结构。 31、比较GIF格式和JPG格式的原理与各自的适用范围。 32、为什么要采用DHTML技术?客户端动态网页技术有哪些优点? 33、简述站点的概念以及虚拟目录和实际目录之间的对应关系。 34、什么是Web安全色? 35、简述虚拟主机的概念和功能。 36、简述Dreamweaver的工作窗口由哪些部分组成。 37、在Dreamweaver中,插入图像的方法有哪些? 38、在Fireworks中,如何使文字附加于路径? 39、在Flash MX中可以创建哪些类型的元件?各元件的含义是什么? 40、HTML中
标记和

标记有何区别?

《网页设计与制作》期末考试试题与及答案

《网页设计与制作》期末考试试题 一、单项选择题(本大题共30小题,每小题2分,共60分) 1、目前在Internet上应用最为广泛的服务是( )。 A、FTP服务 B、WWW服务 C、Telnet服务 D、Gopher服务 2、域名系统DNS的含义是( )。 A、Direct Network System B、Domain Name Service C、Dynamic Network System D、Distributed Network Service 3、主机域名center. nbu. edu. cn由四个子域组成,其中( )子域代表国别代码。 A、center B、nbu C、edu D、cn 4、当阅读来自港澳台地区站点的页面文档时,应使用的正确文本编码格式是( )。 A、GB码 B、Unicode码 C、BIG5码 D、HZ码 5、当标记的TYPE属性值为( )时,代表一个可选多项的复选框。 A、TEXT B、PASSWORD C、RADIO D、CHECKBOX 6、为了标识一个HTML文件开始应该使用的HTML标记是( )。 A、

B、 C、
B、 C、 D、 7、在客户端网页脚本语言中最为通用的是( )。 A、javascript B、VB C、Perl D、ASP 8、在HTML中,标记的Size属性最大取值可以是( )。 A、5 B、6 C、7 D、8 9、在HTML中,单元格的标记是( )。 A、 D、 10、在DHTML中把整个文档的各个元素作为对象处理的技术是( )。 A、HTML B、CSS C、DOM D、Script(脚本语言) 11、下面不属于CSS插入形式的是( )。 A、索引式 B、内联式 C、嵌入式 D、外部式 12、在网页中最为常用的两种图像格式是( )。 A、JPEG和GIF B、JPEG和PSD C、GIF和BMP D、BMP和PSD 13、如果站点服务器支持安全套接层(SSL),那么连接到安全站点上的所有URL开头是( )。 A、HTTP B、HTTPS C、SHTTP D、SSL 14、在HTML中,要定义一个空链接使用的标记是( ). A、 B、 C、 D、 15、对远程服务器上的文件进行维护时,通常采用的手段是( ) A、POP3 B、FTP C、SMTP D、Gopher 16、下列Web服务器上的目录权限级别中,最安全的权限级别是( ) A、读取 B、执行 C、脚本 D、写入 17、用Fireworks切割图形时,需要的工具是() A、裁剪 B、选取框 C、切片 D、自由变形 18、Internet上使用的最重要的两个协议是( ) A、TCP和Telnet B、TCP和IP C、TCP和SMTP D、IP和Telnet 19、body元素用于背景颜色的属性是() A、alink B、vlink C、bgcolor D、background 20、下面说法错误的是( )

教你制作静态网页的方法

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

《网页设计与制作》试题答卷A参考答案

浙江**学院《网页设计与制作》期终(考试)A 卷 200 —200 学年 第 学期 任课教师 学院 班 姓名 学号 一、单选题(每小题1分,共30分) 1、 本地站点的所有文件和文件夹必须使用( ),否则在上传到因特网上时可能导致浏览不正常。 2、 A.小写字母 B .大写字母 C .数字 D .汉字 3、 常用的网页图像格式有( )和( )。 4、 A .gif ,tiff B .tiff ,jpg C .gif ,jpg D.tiff, png 5、 实现轮替图像应选两幅( )的图片。 6、 A.相差三倍 B .相差两倍 C.相差一倍 D.大小一样 7、 下面说法错误的是( )。 8、 A .单元格可以相互合并 B.在表格中可以插入行 9、 C .可以拆分单元格 D .在单元格中不可以设置背景图片 10、 下面说法错误的是( )。 11、 A .CSS 样式表可以将格式和结构分离 12、 B .CSS 样式表不能制作体积更小下载更快的网页的布局 13、 C. CSS 样式表可以使许多网页同时更新 14、 D .CSS 样式表可以控制页面 15、 要使表格的边框不显示,应设置border 的值是( )。 16、 A .1 B.0 C .2 D .3 17、 在层的属性设置中有两个特殊的属性,分别是( )和( )。 18、 A. 标签,显示 B.显示,Z 轴 C .显示,溢出 D .Z 轴,溢出 19、 使用( )和( )可以直观、精确的将层定位。 20、 A .标尺,网格 B .标尺,表单 C 网格,表单 D .表单,表格 21、 模板的创建有两种方式,分别是( )。 22、 A 新建模板,已有网页保存为模板 B .新建网页,保存网页 23、 C .新建模板,保存层 D .新建层,保存模板 24、 下面说法错误的是( )。 25、 A.“查看”菜单下“网格”的“网格设置”可以更改网格的大小 26、 B .层转换成表格可以实现网页更好的兼容性 27、 C .表格和层可以互相转换 28、 D .表格转换成层可以实现网页更好的兼容性 29、 模板的( )指的是在某个特定条件下该区域可编辑。 30、 A .重复区域 B .重区域 C.可选区 D .库 31、 Dreamweaver 中,想要使用户在点击超链接时,弹出一个新的网页窗口,装 订 区

简单生活网上买菜系统静态网页设计与制作毕业设计论文

四川交通职业技术学院毕业设计论文 设计(论文)题目: 简单生活网上买菜系统静态网页设计与制作 入学年月 姓名 学号 专业计算机应用技术 指导教师 完成日期 2015 年 5 月 15 日

【摘要】计算机和计算机网络的飞速发展,人们对计算机网络的依赖是越来越大。人们在网上聊天交友,在网上请教问题,查阅资料,还在网上听音乐。除此之外,人们还会在网上进行商务交易、下载信息,有着众多的使用者。尤其是电子商务大大的减少了人们对周围环境的依赖,无论是哪里的网友,都可以浏览到世界各地的各类信息,非常的方便,由于以上的优势,各类网站如雨后春笋般的出现,这也就是我的毕业设计的实际意义。本文就个人网站的规划与建设,以软件工程的方法对过程经行了分析与研究。本文的主要工作集中在:对web页进行概述,主要是对Internet的历史和发展作了回顾,在web页的定义而后特性上进行阐述。而Web设计的健康发展依靠web标准的采用,没有web标准就不会有真正的可访问性和连贯的设计。不用web标准,就跟不上时代。在这样的标准时代,我们需要网页更加容易扩展,适合自动数据交换,并且更加规整。而css,则实现了页面内容与样式分离。鉴于web标准,本论文着重对div+css 布局静态网页进行了讨论。并对网站开发过程中使用的开发工具和技术作了简要的介绍。 对网站建设中提及到术语进行了解释,并对个人网站的由来和发展经行了讨论;对自己的个人网站从规划建设经行了详细的分析;使用Html、Css、Photoshop 等技术实现了个人网站的各种功能并且就网站建设提出了自己的观点与建议。 【关键词】网页设计div+css Photoshop 简单生活网上买菜

2018年10月自考00900网页设计与制作试题及答案含评分标准

2018年10月高等教育自学考试全国统一命题考试 网页设计与制作试卷 (课程代码00900) 本试卷共5页,满分l00分,考试时间l50分钟。 考生答题注意事项: 1.本卷所有试题必须在答题卡上作答。答在试卷上无效,试卷空白处和背面均可作草稿纸。2.第一部分为选择题。必须对应试卷上的题号使用28铅笔将“答题卡”的相应代码涂黑。3.第二部分为非选择题。必须注明大、小题号,使用0.5毫米黑色字迹签字笔作答。4.合理安排答题空间,超出答题区域无效。 第一部分选择题 一、单项选择题:本大题共25小题,每小题l分,共25分。在每小题列出的备选项中只有一项是最符合题目要求的,请将其选出。 1.用于实现计算机之间的文件传输的协议是 A.HTTP B.FTP C.SMTP D.POP3 2.在协议软件中,IP地址由几位二进制数表示? A.8位 B.16位 C.32位 D.64位 3.网站的每个栏目的起始页是 A.一级页面 B. 二级页面 C.三级页面 D.四级页面 4。网页的核心是 A.XML语言 B.Java语言 C.HTML语言 D. JavaScript语言 5.在彩色属性中,反映颜色原貌的是 A.色相 B.饱和度 C.明度 D.亮度 6.HTTP协议的默认端口号是 A.2l B. 27 C.53 D. 80 7。在Photoshop中,一张图可以建立的图层数是 A.40个 B.60个 C.80个 D.100个 8.在Photoshop滤镜中,能产生纹理图像效果的是 A.Distort中的Glass B.Distort中的Texturizer C.Distort中的Zigzag D.Distort中的Pencil 9.在HTML语言中,特殊符号“>”的HTML表示法是 A.> B.<

网页设计与制作多选题及答案

1、在Dreamweaver中,行为由( AB)构成。 A、事件 B、动作 C、初级行为 D、最终动作 2、在Dreamweaver中,可对( ABCD)设置超级链接。 A、任何文字 B、图像 C、图像的一部分 D、Flash 3、扩展管理器支持的第三方扩展文件有(AD)。 A、.mxp B、.mxi C、.mix D、.axp 4、在资源管理器中,不能对( AB)执行定位操作。A B A、颜色 B、链接 C、Flash D、图像 5、可以设置()等网页背景属性。AB A、背景图片 B、背景颜色 C、背景透明度 D、以上都不可以 6、一般来说,适合信息发布式网站模式的题材有( ABCDE)。 A、软件下载 B、新闻发布 C、个人简介 D、音乐下载 E、文学作品大全 7、网页制作工具按其制作方式分,可以分为(BE)。 A、通用型网页制作工具 B、标记型网页制作工具 C、专业型网页制作工具 D、编程型网页制作工具 E、“所见即所得”型网页制作工具 8、下列哪些项目属于网页设计制作的基本步骤(ABC)。 A、设计网站 B、搜索素材 C、站点规划 D、FTP上传 9、在网页设计过程中,想要制作一个800~600的页面,页面背景色为蓝色,使页面在800X600的显 示器分辨率下布满整个浏览器屏幕,不留白边,需要的步骤有( BD)。 A、首先点选“插入”菜单中的“表格”选项 B、首先点选“修改”菜单中的“页面属性”选项 C、然后设置表格的宽高均为100%即可 D、然后设置外观中的各边距为0,确定即可 10、在Dream weaver MX中,关于模板的说法正确的是( ABD)。 A、模板是一个文件 B、模板默认状态下被保存在站点根目录下的Templates子目录下 C、模板是固定不变的 D、模板和库尽管有相似之处,但总的来说仍是不同的两个概念 11、下列关于网页设计的说法中,正确的有(ACE)。 A、冷暖色调在均匀使用时不宜靠近 B、纯度相同的两种颜色适宜放在一起 C、整个页面中最好有一个主色调 D、文本的色彩不会发生抖动,只有图片的色彩才会发生抖动、 E、抽象线条的构图很容易造成重心不稳 12、在Dream weaver MX中,元件是Library元件库中可以被重复使用的元素,包括(ABD)。 A、图像 B、按 C、文字 D、电影剪辑 13、在Dream weaver MN中,插入网页背景图像,包括插入( ABC)。 A、平铺图像 B、无缝背景图像 C、追踪图像 D、以上都不正确 14、层的优点是( ABCD)。

静态网页制作心得体会

静态网页制作心得体会 姓名:张继宏第三组8.18 20世纪40年代科学字发明了计算机之后,人们的工作效率大大提高,但是单个计算机能够存储和处理的信息是非常有限的,为了便于信息的传递和处理,人们就把众多的计算机连接起来。 网页制作的心得体会----网页制作论文摘要通过这次个人网页的制作,我对计算机有了更深层次得到了解,也有了更浓厚的兴趣。尤其是对网页制作的过程与一些技巧手法更有了另外一番了解,对网页制作的基础知识也有了一定的掌握。通过把自己的网页上传到互联网上,对文件的保存、上传、下载以及修改等知识有了更牢靠的掌握。通过自己的努力完成了自己上传到网上的第一个作品,那种成就感是无法用语言形容的。所以我觉得这次制作网页我已经达到了自己的目的,而不是单单为了完成作业而已。这是一个完全关于自己的个人网页,既然是介绍自己,就应该让观者在浏览了之后了解自己其人,我觉得这点我已经基本上做到了。 关键字页面设计ASP和数据库 1.一般来说,个人主页的选材要小而精。如果你想制作一个包罗万象的站点,把所有您认为精彩的东西都放在上面,那么往往会事与愿违,给人的感觉是没有主题,没有特色,样样有却样样都很肤浅,因为您不可能有那么多的精力去维护它。注意:网页的最大特点就是更新快。目前最受欢迎的个人主页都是天天更新甚至几小时更新一次。 2.题材最好是你自己擅长或者喜爱的内容。比如:您对诗歌感兴趣,可以放置自己的诗词;对足球感兴趣,可以报道最新的球场战况等等。这样在制作时,才不会觉得无聊或者力不从心。 3.不要太滥或者目标太高。“太滥”是指到处可见,人人都有的题材;“目标太高”是指在这一题材上已经有非常优秀,知名度很高的站点,你要超过它是很困难的。选定了一个好的题材,是不是可以立刻动手制作了?不,经验告诉我们,必须要先规划框架。这是很重要的一步!每个网站都是一项庞大的工程。好比造高楼,没有设计图纸,规划好结构,盲目的建造,结果往往是倒塌;也好比写文章,构思好提纲,才不至于逻辑混乱,虎头蛇尾。全面仔细规划架构好自己网站,不要急于求成。 规划一个网站,可以用树状结构先把每个页面的内容大纲列出来,尤其当你要制作一个很大的网站(有很多页面) 的时候,特别需要把这个架构规划好,也要考虑到以后可能的扩充性,免得做好以后又要一改再改整个网站的架构,十分累人,也十分费钱。 大纲列出来后,你还必须考虑每个页面之间的链接关系。是星形,树形,或是网形链接。这也是判别一个网站优劣的重要标志。链接混乱,层次不清的站点会造成浏览困难,影响内容的发挥。 为了提高浏览效率,方便资料的寻找,本站的框架基本采用“蒲公英”式,即所有的主要链接都在首页上,链接的层次不多,深度浅。 框架定下来了,然后开始一步一步有条理,有次序地做来,就胸有成竹得多,也为你的主页将来发展打下良好的基础。

网页设计与制作模拟试题

网页设计模拟试题 一、填空题(在空格内填写正确的答案,每空1分,共20分) 1.在Dreamweaver MX中,通过()可以检查各页面元素的参数设置,也可以针对其中各个参数进行修改。 2.在表格的属性中,()属性用来设定表格边框的粗细,单元格跨行通过()属性来实现,单元格跨列通过()属性来实现。 3.在HTML文档中,以插件方式播放音乐使用()标签,用()属性指定音乐的源文件。 4.CSS样式可以定义文字链接的外观,其中()状态定义了文字链接处于激活状态的显示效果。 5.IE浏览器支持两种客户端脚本语言,它们是()和()。 6.JavaScript中的对象由()和()两个基本元素构成。 7.在JavaScript中,document对象的()方法用于向document对象所对应的HTML文档页面写入内容,()属性为document对象所对应的HTML文档定义标题。 8.在定义行为时,如果希望当鼠标移入页面元素上方时触发事件,则该事件为()事件。 9.在ASP的内嵌对象中,()对象主要用于把服务器端的信息发送到浏览器。10.使用表单提交数据时使用两种方法,分别是()和()。 11.在Recordset对象的常用属性和方法中,关闭当前Recordset对象的方法是()。 12.同HTML一样,XML也是由()组成的ASCII码文件,其扩展名为()。 二、单项选择题(将一个正确的答案代码填入括号中,每小题2分,共30分) 1.制作无序号号列表,需使用()标签。

A、和 B、

  • C、
  • D、
  • 2.良好的网站目录结构有利于()。 A、用户浏览 B、页面的布局设计 C、网站的开发与维护 D、网站的CI形象 3.在Dreamweaver MX中创建Recordset对象是通过()完成的。 A、行为面板 B、服务器行为面板 C、属性检查器 D、CSS样式面板 4.要在页面上创建一个指向中央广播电视大学网站的链接,在属性检查器的链接栏中应该输入()。 A、#https://www.wendangku.net/doc/623988193.html, B、mailto:https://www.wendangku.net/doc/623988193.html, C、https://www.wendangku.net/doc/623988193.html, D、ftp://https://www.wendangku.net/doc/623988193.html, 5.如果点击网页中某个链接后在新的浏览器窗口中载入所链接的文档,则应当设置链接的target属性值为()。 A、_parent

    网页设计与制作多选题及(附答案)

    1、在中,行为由( )构成。 A、事件 B、动作 C、初级行为 D、最终动作 2、在中,可对( )设置超级链接。 A、任何文字 B、图像 C、图像的一部分 D、 3、扩展管理器支持的第三方扩展文件有()。 A、B、C、D、 4、在资源管理器中,不能对( )执行定位操作。A B A、颜色 B、链接 C、 D、图像 5、可以设置()等网页背景属性。 A、背景图片 B、背景颜色 C、背景透明度 D、以上都不可以 6、一般来说,适合信息发布式网站模式的题材有( )。 A、软件下载 B、新闻发布 C、个人简介 D、音乐下载 E、文学作品大全 7、网页制作工具按其制作方式分,可以分为()。 A、通用型网页制作工具 B、标记型网页制作工具 C、专业型网页制作工具 D、编程型网页制作工具 E、“所见即所得”型网页制作工具 8、下列哪些项目属于网页设计制作的基本步骤()。 A、设计网站 B、搜索素材 C、站点规划 D、上传 9、在网页设计过程中,想要制作一个800~600的页面,页面背景色为蓝色,使页面在800X600的显 示器分辨率下布满整个浏览器屏幕,不留白边,需要的步骤有( )。 A、首先点选“插入”菜单中的“表格”选项 B、首先点选“修改”菜单中的“页面属性”选项 C、然后设置表格的宽高均为100%即可 D、然后设置外观中的各边距为0,确定即可 10、在中,关于模板的说法正确的是( )。 A、模板是一个文件 B、模板默认状态下被保存在站点根目录下的子目录下 C、模板是固定不变的 D、模板和库尽管有相似之处,但总的来说仍是不同的两个概念 11、下列关于网页设计的说法中,正确的有()。 A、冷暖色调在均匀使用时不宜靠近 B、纯度相同的两种颜色适宜放在一起 C、整个页面中最好有一个主色调 D、文本的色彩不会发生抖动,只有图片的色彩才会发生抖动、 E、抽象线条的构图很容易造成重心不稳 12、在中,元件是元件库中可以被重复使用的元素,包括()。 A、图像 B、按 C、文字 D、电影剪辑 13、在中,插入网页背景图像,包括插入( )。 A、平铺图像 B、无缝背景图像 C、追踪图像 D、以上都不正确 14、层的优点是( )。 A、能定位精确 B、插入自如 C、加速浏览 D、可叠加性

    相关文档 最新文档
  • B、 C、