网页网页制作论文--个人网页设计

个人网页设计年 级: 1 1 1 1_ _

学 号: 1 1 1 1 1 1 1 1 1

姓 名: __1 1 1 1 1 1 1 1 1

专 业: 1 1 1 1 1 1 1 1

班 级: 1 1 1 1 1_

指导老师: __1 1 1 1 1 1 1 1 1__

目录

第一章背景与意义. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .II

1 . 1背景和意义. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .II

1 .2网页设计的要素. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .II

1 .3本文的主要内容. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .II

第2章主要技术介绍. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .III

2. 1 DREAMWEAVER. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .III

2.2 CSS样式表. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .III

第三章网站栏目. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .IV

3. 1网站主题. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .VII

3.2网站风格. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .VII

第四章 网站制作过程. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .VII

4. 1 INDEX. HTML页面的制作. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .VII

4.2 SUIBI . HTML页面的制作. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .VIII

4.3 SUIBI4. HTML页面的制作. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .VIII

4.4 XIANGCE1 . HTML页面的制作. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .VIII

4.5 XIANGCE2. HTML页面的制作. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .IX

4.6 XIANGCE4. HTML页面的制作. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .IX

4. 7 YINYUE1 . HTML页面的制作. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .X

总结. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .XI

参考文献. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .XII

第一章背景与意义

1 . 1背景和意义

网站是企业向用户和网民提供信息(包括产品和服务)的一种方式,是企业开展电子商务的基础设施和信息平台离开网站或者只是利用第三方网站去谈电子商务是不可能的。企业的网址被称为“网络商标” 也是企业无形资产的组成部分而网站是INTERNET上宣传和反映企业形象和文化的重要窗口。

1 .2网页设计的要素

网页设计的两大要素是整体风格和色彩搭配。

一、确定网站的整体风格

1将标志lo g o尽可能的放在每个页面上最突出的位置。

2突出标准色彩。

3 总结一句能反映贵站精髓的宣传标语

4相同类型的图像采用相同效果 比如说标题字都采用阴影效果那么在网站中出现的所有标题字的阴影效果的设置应该是完全一致的

二、 网页色彩的搭配

1用一种色彩。这里是指先选定一种色彩然后调整透明度或者饱和度这样的页面看起来色彩统一有层次感。

2用两种色彩。先选定一种色彩然后选择它的对比色。

3用一个色系。简单的说就是用一个感觉的色彩例如淡蓝淡黄淡绿或者土黄土灰土蓝。

在网页配色中还要切记一些误区

1不要将所有颜色都用到尽量控制在三至五种色彩以内。

2背景和前文的对比尽量要大(绝对不要用花纹繁复的图案作背景) 以便突出主要文字内容。

1 .3 本文的主要内容

本文主要是对对网页设计与制作进行探讨主要内容如下

第一章绪论

本章主要介绍网页设计的相关知识。

第二章 网站制作需求分析

网站包括哪些栏目主题是什么风格是什么确定的颜色的搭配。

第三章用到的技术介绍

Dreamweaver\css样式表。

第四章 网站制作过程

第2章主要技术介绍

2. 1 DREAMWEAVER

Dreamweaver是美国Adobe(原Macromedia 2005年被Adobe收购)公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器它是第一套针对专业网页设计师特别发展的视觉化网页开发工具利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。它不仅是优秀的WYSIWYG编辑器更是优秀的代码编辑器有代码加亮 代码提示等丰富功能提供各种示例代码 并支持Javascript,PHP,ASP,JSP等多种脚本语言。最新版本为CS4发布于2008年9月。

Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含Home Site和BBEdit等主流文字编辑器。帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组 Dreamweaver支援精准定位利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。所见即所得Dreamweaver成功整合动态式出版视觉编辑及电子商务功能提供超强的支援能力给Third-party厂商包含ASP Apache Broad Vision Cold Fusion iced Tango与自行发展的应用软体。当您正使用Dreamweaver在设计动态网页时所见即所得的功能让您不需要透过浏览器就能预览网页。梦幻样版和XML Dreamweaver将内容与设计分开应用于快速网页更新和团队合作网页编辑。建立网页外观的样版指定可编辑或不可编辑的部份内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。您也可以使用样版正确地输入或输出XML内容。 全方位的呈现利用Dreamweaver设计的网页可以全方位的呈现在任何平台的热门浏览器上。对于cascading stylesheets的动态HTML支援和鼠标换图效果声音和动画的DHTML效果资料库可在Netscape和Microsoft浏览器上执行。使用不同浏览器检示功能 Dreamweaver可以告知您在不同浏览器上执行的成效如何。 当有新的浏览器上市时 只要从Dreamweaver的网站在下载它的描述档便可得知详尽的成效报告。

2.2 CSS样式表

级联样式表Cascading Style Sheet简称“CSS”通常又称为“风格样式表StyleSheet ”它是用来进行网页风格设计的。比如如果想让链接字未点击时是蓝色的

当鼠标移上去后字变成红色的且有下划线这就是一种风格。通过设立样式表可以统一地控制HMTL中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表可以扩充精确指定网页元素位置外观以及创建特殊效果的能力。

CSS目前最新版本为CSS2,能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言 CSS能够对网页中的对象的位置排版进行像素级的精确控制支持几乎所有的字体字号样式拥有对网页对象盒模型的能力并能够进行初步交互设计是目前基于文本展示的最优秀的表现设计语言。

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

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

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

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

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

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

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

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

第三章网站栏目

网站主要包括首页、随笔、相册、音乐、关于我这五个页面。

首页效果图2-1如下

随笔效果图2-2如下

相册效果图2-3如下

音乐效果图2-4如下

关于我效果图2-5如下

3. 1 网站主题

本网站是一个简单的个人网站设计以动漫为主题主要包括了本人的自我介绍、比较喜爱的动漫作品以及平时的娱乐等。

3.2网站风格

1.本网站主要体现了清新自然的风格 以简洁为主。

2.网站的主色调为绿和白充分衬托清新自然的风格。

第四章 网站制作过程

新建站点命名为yyl 在站点中新建image、 f lash、 wenben等文件夹。

4. 1 index. html页面的制作

1.在Dreamweaver中新建一个html页面命名为index.html。

2.在页面中插入边框为0的表格。

3.logo的制作新建一个flash文档制作一个探照灯动画保存为swf格式。

4.背景左.jpg的制作打开Photoshop在已有的背景图片上绘制白色部分再输入首页等文字。

5.移动文字的制作 输入代码<marquee direction="left" scrollamount="2"

scrolldelay="100"onMouseOut="this. start()"onMouseOver="this. stop()">

<img src="image/run.gif"width="19"height="18" />那些消逝了的岁月仿佛隔着一块积着灰尘的毛玻璃看得到抓不着。 。 。

</marquee>

6.输入文字制作超链接。

4.2 suibi . html页面的制作

1.在页面中插入表格设置表格背景颜色。

2.在Photoshop中截取适当大小图片保存为jpg格式插入到第一步表格中调整表格大小。

3.输入文字制作超链接。

4.3 suibi4.html页面的制作

1.在页面中插入文本区域。

2.在“属性”框中粘贴文章。

3.输入文字制作超链接。

4.4 xiangce1 .html页面的制作

1.新建文档并设置影片。

2.导入图像。

3.制作百叶窗影片剪辑并遮罩。

(1)执行“插入”—“新建元件”命令创建一个名称为“拉伸的叶片”的影片剪辑元件。

(2)选择矩形工具设置填充颜色在舞台上绘制一个无描边举行在属性面板中设置宽和高。

(3)选择矩形将其转换成“名称”为“叶片”的图形元件。

(4)选择第1帧的“叶片”实例将属性面板中的坐标设为0。

(5)在第20帧第40帧分别插入关键帧将第20帧处实例的高设为1px。

(6)在1-20 20-40帧之间分别创建补间动画。

(7)进入主场景编辑模式。

(8)在图层“风景2”上方插入新图层命名为“百叶窗”将“拉伸的叶片”元件从库面板中拖曳到舞台上共创建9个实例。

(9)调整实例的坐标。