前端网页的设计

最新推荐文章于 2024-05-12 07:59:05 发布

等天晴i

最新推荐文章于 2024-05-12 07:59:05 发布

阅读量1.3k

点赞数 1

文章标签： microsoft 前端

本文链接：https://blog.csdn.net/qq_61141142/article/details/132960129

版权

1．前言：

因特网正在改变世界，它促成了网络经济雏形的形成，特别是电子商务正由新概念走向实用化。由于因特网具有传播信息容量极大、形态多样、迅速方便、全球覆盖、自由和交互的特点，已经发展成为新的传播媒体，所以全球几乎各个企业、机构纷纷建立自己的Web站点。

Web站点是向用户或潜在客户提供信息(包括产品和服务)的一种方式。其文档所包含的内容是由被称为超文本(HyperText)的文本、图形图象、声音，甚至电影等组成。使这些超文本能够有机地关联并可使浏览器识别，是通过HTML语言(HyperText Markup Language超文本标记语言)实现的。同时CGI(Common Gateway Interface公共网关接口)能使Web具有交互功能。Web站点指引用户浏览该站点或其他站点上的分页信息，可以通过表格和电子邮件的连接提供双向交互方式。站点建立后，你的企业就在国内、甚至在国际上有了一席之地，有了每周7天、每天24小时的“虚拟门市部”。网站是未来企业开展电子商务的基础设施和信息平台，它是“知识经济”的制高点，企业的网址犹如企业的商标和品牌一样，是反映企业形象和文化的巨大的无形资产。

因此企业网站规划必须注意以下几个方面：

目标明确、定位正确

Web站点的设计是企业或机构发展战略的重要组成部分。要将企业站点作为在因特网－－这个新媒体上展示企业形象、企业文化的信息空间，领导一定要给予足够的重视，明确设计站点的目的和用户需求，从而作出切实可行的计划。

　　挑选与锤炼企业的关键信息，利用一个逻辑结构有序地组织起来，开发一个页面设计原型，选择用户代表来进行测试，并逐步精炼这个原型，形成创意。

分析有些网站的效果不如预想的好，主要原因是对用户的需求理解有偏差，缺少用户的检验造成的。设计者常常将企业的市场营销和商业目标放在首位，而对用户和潜在的用户的真正需求了解不多。所以，企业或机构应清楚地了解本网站的受众群体的基本情况，如受教育程度、收入水平、需要信息的范围及深度等，从而能够有的放矢。

主题鲜明、富有特色

在目标明确的基础上，完成网站的构思创意即总体设计方案。对网站的整体风格和特色作出定位，规划网站的组织结构。

Web站点应针对所服务对象（机构或人）不同而具有不同的形式。有些站点只提供简洁文本信息；有些则采用多媒体表现手法，提供华丽的图像、闪烁的灯光、复杂的页面布置，甚至可以下载声音和录像片段。最好的Web站点将把图形图像表现手法与有效的组织与通信结合起来。

　　要做到主题鲜明突出，力求简洁，要点明确，以简单明确的语言和画面告诉大家本站点的主题，吸引对本站点有需求的人的视线，对无关的人员也能留下一定的印象。对于一些行业标志和公司的标志应充分加以利用。

　　调动一切手段充分表现网站的个性和情趣，突出个性，办出网站的特色。

Web站点主页应具备的基本成分包括：

　　页头：准确无误地标识你的站点和企业标志；

E-mail地址：用来接收用户垂询；

　　联系信息：如普通邮件地址或电话；

　　版权信息。

注意重复利用已有信息，如客户手册、公共关系文档、技术手册和数据库等可以轻而易举地用到企业的Web站点中。

FlashMX动画制作

一个吸引人的网站一定有一个华丽的FLAH过场动画，这样不仅给浏览者深刻的印象，同时突出了网站的特点与风格。但FLASH相对DW制作较复杂，设计到帧、时间轴、剪辑、按钮和actoin语言等方面。下面是我这个FLASH制作过程的简单介绍：

1.虽然FLASH采用了流控制技术，但考虑到基带网的速度和本身FLASH的文件大小，我还是采用目前流行的先下载后观看的方式，以保证音效和动画的流畅性。并且加装了一个进度条，随时检测下载速度和时间，让浏览者做到心中有数。只有当进度达到100％时，动画开始按钮才出现，浏览者单击按钮，动画随即开始。整个下载部分的动画放在一个剪辑中，不仅节省内存，而且方便库的管理。

2.FLASH动画设计风格为简洁、动感、时尚。

3.FLASH影片所有素材、按钮、剪辑、声音全部导入库中，时间轴上只有各个剪辑的层，从而节约了内存，方便管理。

4.影片导出时增加了保护功能，增加了影片的安全性，防止他人盗用修改影片。矢量图的品质为100，保证了影片图像的质量，并且声音的输出格式为mp3采样标准为128Kbps双声道立体声，该标准接近CD标准，这样虽然增加了影片的大小，但是保证了声音的效果。同时输出的还有影片大小报告。

FireworkMX矢量图片处理

Firework在网站中，除了配合Flash处理动画里的影片以外，主要是制作导航按钮和Banner，因为导航按钮采用的是悬停方式，所以每个按钮要同时做出两个版本。即原始状态和悬停状态。

1.Firework在图片处理上使用了高光和阴影的效果，以突出按钮的立体感、变化感、和悬停感。

2.Firework在处理Banner的时候采用横幅与网站图标一体的方式处理，将二者整体化，不仅方便排版，也方便浏览者浏览。

3.Firewok在处理网站上方的导航按钮时候，用代表该按钮的图片配以相应文字来处理。

4.Firework在图片输出的时候采用JPEG（ISO国际标准图像压缩）格式。这是目前网络较为流行的图片格式，文件小，传输速度快，图片清晰。输出品质为80，无平滑。

2．当今网页制作软件浅谈

随着互联网的进一步发展与成熟，网络的带宽进一步加阔，网络应用也越来越广泛。网页制作更是日新月异，层出不穷。涌现了很多琳琅满目的网站，使得整个互联网多姿多彩。

以前，在网页制作的时候，通常都是使用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。

3．网站基本功能简介

本网站首先采用DW进行网页的编辑和排版。整体网页采用表格方式进行定位，表格边框宽度值为0，这样的优点可以根据不同用户的不同浏览器以及分辨率随时调整网页内容，同时浏览者也看不到表格线。我使用的是便笺纸风格,最左边用了FLASH，右边是星星、月亮及太阳形状的图形导航按钮。网页的顶端也用了FLASH,可以方便的换成广告。网页中有很多图形元素，以粉红色为主基调，配合便笺纸的风格，给人一种亲切的清新自然的感觉。

我的个人网站的内容主要有七大部分：动画、桌面、音乐、新闻以及3D动画,留言用的留言板，还有个祈愿板。其中每个栏目下面都有对应的图片或是文字等相关信息。网站更新的信息和将在首页中提示出来，方便网友查询。

首页：主要是对各个单独单元的导航按键，以及对十二星座的基本介绍和按日期的对应星座查询。

塔罗牌的秘密

十二星座之狮子座2008年运势详解

4、网站基本框架

5.备注：

（1）本网站首先采用DW进行网页的编辑和排版。网页的顶端是横幅标题（banner），根据需要可以更换成FLASH广告。

（2）该网站制作过程中主要用到的开发工具：

Macromedia Dreamweaver MX

Macromedia Flash 5.0

Macromedia Firework MX

Adobe Photoshop 6.0

6、网页设计体会

对于现在的社会，科技的飞速发展已经成为社会发展的标志。其中计算机的发展可谓快中之快，而在计算机的发展中计算机网络的发展又是首当其冲的。计算机网络从为我们所知，到现在才经历的短短的几年时间，在这几年中随着计算机网络的广泛应用，特别是Internet的普及和发展，网络已经成为了不可或缺的通信手段。不论是最新的新闻信息、新产品的出台、新游戏的发布、最新的各种IT动态，包括等候就业人才的个人简历，我们都是可以通过网络来获得。但是什么为这所有的一切提供平台的呢。我们又是通过什么来获取这些消息的呢——对就是网页。现如今，数以万计的网站以网页的方式提供了丰富、精彩的信息。在人类社会进入信息时代的时候，在网络成为通信的主要手段的时候，在计算机网络普及的今天，网页也在它自己的岗位上做出了突出的贡献。网页是我们在网络上的“带言人”。我们将什么样的信息传达给浏览者，要讲述什么要的事情，网页在这里起着重用的作用。

网页设计是伴随着网络的快速发展而快速兴起.

由于人们使用网络的频繁而网页作为上网的主要依托就变得非常的重要。网页讲究的是排版布局，其功能主要就是提供一种形式给每个上网者，让他们能够了解网站提供的信息。网页设计直接面对的是大量用户,随时都会反馈回来对网页的批评建议等，可以根据实际情况进行修改，这样做可以使使用者用起来更加的方便。

在制作网页的过程中,我有一些体会:

1. 整体性好: 一个网站强调的就是一个整体，只有围绕一个统一的目标所做的设计才是成功的。

2. 网站形象突出: 一个符合美的标准的网页是能够使网站的形象得到最大限度的提升的。

3.页面用色协调，布局符合形式美的要求: 布局有条理，充分利用美的形式，是网页富有可欣赏性，提高档次。当然雅俗共赏是人人都追求的

代码附录

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

<!--

.12 {

line-height: 20px;

}

.STYLE6 {font-size: 12px}

.STYLE7 {font-size: 12px; color: #FF6600; }

.STYLE9 {font-size: 12px; color: #3366cc; }

.STYLE10 {

font-size: 36px;

color: #A338C6;

font-family: Georgia;

text-decoration: blink;

word-spacing: 25px;

font-weight: bold;

letter-spacing: 20px;

}

a:link {

color: #0000cc;

text-decoration: none;

}

a:visited {

text-decoration: none;

color: #0000cc;

}

a:hover {

text-decoration: underline;

color: #FF6600;

}

a:active {

text-decoration: none;

}

body {

background-image: url(bg_snow.gif);

background-repeat: repeat;

}

-->

</style>

</head>

<body>

<tr>

<p> 欢迎光临李姗的网站

</p>

</marquee>

</div></td>

</tr>

</table>

<tr>

</tr>

</table>

<tr>

<tr>

<tr>

</tr>

</table>

<tr>

<tr>

</tr>

</table>

<tr>

</tr>

<tr>

<td><a href="xingzuo/002.html" target="_blank" class="STYLE6">塔罗牌学说</a></td>

</tr>

<tr>

<td><a href="xingzuo/003.html" class="STYLE6">什么是塔罗牌</a></td>

</tr>

<tr>

<td><a href="xingzuo/01.html" class="STYLE6">金陵十二钗与十二星座</a></td>

</tr>

<tr>

<td><a href="xingzuo/03.html" class="STYLE6">十二星座芳香疗法</a></td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</tr>

</table></td>

<tr>

</tr>

</table>

<tr>

<tr>

<tr>

<td width="162"><span class="STYLE6"><a href="xingzuo/004.html">十二星座EQ排行榜</a></span></td>

</tr>

<tr>

<td><a href="xingzuo/005.html" class="STYLE6">十二星座纯情指数</a></td>

</tr>

<tr>

<td><a href="xingzuo/006.html" class="STYLE6">12星座被狗狗凶（笑话）</a></td>

</tr>

<tr>

<td><a href="xingzuo/007.html" class="STYLE6">无情12星座的排名</a></td>

</tr>

<tr>

<td><a href="xingzuo/008.html" class="STYLE6">容易被吓哭的星座</a></td>

</tr>

<tr>

<td><a href="xingzuo/009.html" class="STYLE6">换角度来看占星配对</a></td>

</tr>

<tr>

<td><a href="xingzuo/010.html" class="STYLE6">十二星座甩人术大破解</a></td>

</tr>

</table></td>

</tr>

</table></td>

</tr>

</table></td>

</tr>

</table>

<tr>

</tr>

</table>

<tr>

<tr>

<td><span class="STYLE6"> <a href="xingzuo/01.html">金陵十二钗与十二星座</a> </span></td>

</tr>

<tr>

<td><a href="xingzuo/10-1.html" target="_parent" class="STYLE6">摩羯座与十二属相</a></td>

</tr>

<tr>

<td><a href="xingzuo/8-1.html" class="STYLE6">天蝎座与十二属相</a></td>

</tr>

<tr>

<td><a href="xingzuo/6-1.html" class="STYLE6">处女座与十二属相</a></td>

</tr>

<tr>

<td><a href="xingzuo/4-1.html" class="STYLE6">巨蟹座与十二属相</a></td>

</tr>

<tr>

<td><a href="xingzuo/2/2.html" class="STYLE6">金牛座与十二属相</a></td>

</tr>

<tr>

<td><span class="STYLE6"><a href="xingzuo/12-1.html">双鱼座与十二属相</a></span></td>

</tr>

<tr>

<td><a href="xingzuo/02.html" class="STYLE6">十二星座与十大星体</a></td>

</tr>

</table></td>

<tr>

<td><a href="xingzuo/03.html" class="STYLE6">十二星座芳香疗法</a></td>

</tr>

<tr>

<td><span class="STYLE6"><a href="xingzuo/9-1.html" target="_blank">射手座与十二属相</a></span></td>

</tr>

<tr>

<td><a href="xingzuo/7-1.html" target="_parent" class="STYLE6">天秤座与十二属相</a></td>

</tr>

<tr>

<td><a href="xingzuo/5-1.html" target="_parent" class="STYLE6">狮子座与十二属相</a></td>

</tr>

<tr>

<td><a href="xingzuo/3/1.html" target="_parent" class="STYLE6">双子座与十二属相</a></td>

</tr>

<tr>

<td><a href="xingzuo/1/1.html" target="_parent" class="STYLE6">白羊座与十二属相</a></td>

</tr>

<tr>

<td><a href="xingzuo/11-1.html" target="_parent" class="STYLE6">水瓶座与十二属相</a></td>

</tr>

<tr>

</tr>

</table></td>

</tr>

</table></td>

<tr>

</tr>

<tr>

<tr>

<td height="25" valign="bottom"><div align="center" class="STYLE6">请输入你的阳历生日</div></td>

</tr>

</table><SCRIPT LANGUAGE="JavaScript">

<!-- Begin

function signs() {

var date=document.zodiac.date.value, month=document.zodiac.month.selectedIndex;

with (document.zodiac.sign){

if (month == 1 && date >=20 || month == 2 && date <=18) {value = "水瓶座";}

if (month == 1 && date > 31) {value = "Huh?";}

if (month == 2 && date >=19 || month == 3 && date <=20) {value = "双鱼座";}

if (month == 2 && date > 29) {value = "Say what?";}

if (month == 3 && date >=21 || month == 4 && date <=19) {value = "白羊座";}

if (month == 3 && date > 31) {value = "OK. Whatever.";}

if (month == 4 && date >=20 || month == 5 && date <=20) {value = "金牛座";}

if (month == 4 && date > 30) {value = "I'm soooo sorry!";}

if (month == 5 && date >=21 || month == 6 && date <=21) {value = "双子座";}

if (month == 5 && date > 31) {value = "Umm ... no.";}

if (month == 6 && date >=22 || month == 7 && date <=22) {value = "巨蟹座";}

if (month == 6 && date > 30) {value = "Sorry.";}

if (month == 7 && date >=23 || month == 8 && date <=22) {value = "狮子座";}

if (month == 7 && date > 31) {value = "Excuse me?";}

if (month == 8 && date >=23 || month == 9 && date <=22) {value = "处女座";}

if (month == 8 && date > 31) {value = "Yeah. Right.";}

if (month == 9 && date >=23 || month == 10 && date <=22) {value = "天秤座";}

if (month == 9 && date > 30) {value = "Try Again.";}

if (month == 10 && date >=23 || month == 11 && date <=21) {value = "天蝎座";}

if (month == 10 && date > 31) {value = "Forget it!";}

if (month == 11 && date >=22 || month == 12 && date <=21) {value = "人马座";}

if (month == 11 && date > 30) {value = "Invalid Date";}

if (month == 12 && date >=22 || month == 1 && date <=19) {value = "摩羯座";}

if (month == 12 && date > 31) {value = "No way!";}

}

// End -->

</script>

<tr>

</select></td>

</tr>

<tr>

</tr>

<tr>

</div></td>

</tr>

</form>

</table> </td>

</tr>

</table>

<tr>

</tr>

<tr>

<p align="center" class="STYLE7">哪个星座的女孩最有人爱</p>

</div></td>

</tr>

</table>

<tr>

<tr>

<label>

白羊座</label>

</span></td>

</tr>

<tr>

<label>

金牛座</label>

</span></td>

</tr>

<tr>

<label>

双子座</label>

</span></td>

</tr>

<tr>

<label>

巨蟹座</label>

</span></td>

</tr>

<tr>

<label>

狮子座</label>

</span></td>

</tr>

<tr>

<label>

处女座</label>

</span></td>

</tr>

<tr>

<label>

天秤座</label>

</span></td>

</tr>

<tr>

<label>

天蝎座</label>

</span></td>

</tr>

<tr>

<label>

射手座</label>

</span></td>

</tr>

<tr>

<label>

摩羯座</label>

</span></td>

</tr>

<tr>

<label>

水瓶座</label>

</span></td>

</tr>

<tr>

<label>

双鱼座</label>

</span></td>

</tr>

<tr>

<label>

</label>

</div></td>

<label>

</label>

</div></td>

</tr>

</table>

</form>

</td>

</tr>

</table></td>

</tr>

</table>

</body>

</html>

等天晴i

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端网页的设计

现如今，数以万计的网站以网页的方式提供了丰富、精彩的信息。在人类社会进入信息时代的时候，在网络成为通信的主要手段的时候，在计算机网络普及的今天，网页也在它自己的岗位上做出了突出的贡献。网站是未来企业开展电子商务的基础设施和信息平台，它是“知识经济”的制高点，企业的网址犹如企业的商标和品牌一样，是反映企业形象和文化的巨大的无形资产。矢量图的品质为100，保证了影片图像的质量，并且声音的输出格式为mp3采样标准为128Kbps双声道立体声，该标准接近CD标准，这样虽然增加了影片的大小，但是保证了声音的效果。
复制链接

扫一扫