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

网页制作论文--个人网页设计 个人网页设计 年 级: 1111_ _ 学 号: 111111111 姓 名: __111111111 专 业: 11111111 班 级: 11111_ 指导老师: __111111111__ 目录 第一章:背景与意 义 .......................................................................................................... II 1.1背景和意义 ............................................................................................................ II 1.2 网页设计的要 素 .................................................................................................... II 1.3 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(将标志logo，尽可能的放在每个页面上最突出的位置。 2(突出标准色彩。 3(总结一句能反映贵站精髓的宣传标语～ 4(相同类型的图像采用相同效果，比如说标题字都采用阴影效果，那么在网站中出现的所有标题字的阴影效果的设置应该是完全一致的～ 二、网页色彩的搭配 1(用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。 2(用两种色彩。先选定一种色彩，然后选择它的对比色。 3(用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿;或者土黄，土灰，土蓝。 在网页配色中，还要切记一些误区: 1(不要将所有颜色都用到，尽量控制在三至五种色彩以 第一章:绪论 本章主要介绍网页设计的相关知识。 第二章:网站制作需求分析 网站包括哪些栏目，主题是什么,风格是什么，确定的颜色的搭配。 第三章:用到的技术介绍 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 style sheets的动态HTML支援和鼠标换图效果，声音和动画的DHTML效果资料库可在Netscape和Microsoft浏览器上执行。使用不同浏览器检示功能，Dreamweaver可以告知您在不同浏览器上执行的成效如何。当有新的浏览器上市时，只要从Dreamweaver的网站在下载它的描述档，便可得知详尽的成效。 2.2 CSS样式表 级联样式表(Cascading Style Sheet)简称“CSS”，通常又称为“风格样式表(Style Sheet)”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的， 当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HMTL中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。 CSS目前最新版本为CSS2,能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象盒模型的能力，并能够进行初步交互设计，是目前基于文本展示的最优秀的表现设计语言。 在网页上使用样式表有三种方法可以在站点网页上使用样式表: 将网页链接到外部样式表。 在网页上创建嵌入的样式表。 应用内嵌样式到各个网页元素。 当要在站点上所有或部份的网页上一致地应用相同样式时，可使用外部样式表。在一个或多个外部样式表中定义样式，并将它们链接到所有网页，便能确保 所有网页外观的一致性。如果人们决定更改样式，只需在外部样式表 — 中作一次更改 — 而该更改会反映到所有与该样式表相链接的网页上。通常外部样式表以 .css 做为文件扩展名，例如 Mystyles.css。 当人们只是要定义当前网页的样式，可使用嵌入的样式表。嵌入的样式表是一种级联样式表，“嵌”在网页的 <HEAD> 标记符内。嵌入的样式表中的样式只能在同一网页上使用。 使用内嵌样式以应用级联样式表属性到网页元素上。 如果网页链接到外部样式表，为网页所创建的内嵌的或嵌入式样式将扩充或覆盖外部样式表中的指定属性。 第三章 网站栏目 网站主要包括首页、随笔、相册、音乐、关于我，这五个页面。 首页效果图2-1如下: 图2-1 首页 随笔效果图2-2如下: 图2-2 随笔 相册效果图2-3如下: 图2-3 相册 音乐效果图2-4如下: 图2-4 音乐 关于我效果图2-5如下: 图2-5 关于我 3.1 网站主题 本网站是一个简单的个人网站设计，以动漫为主题，主要包括了本人的自我介绍、比较喜爱的动漫作品以及平时的娱乐等。 3.2网站风格 1.本网站主要体现了清新自然的风格，以简洁为主。 2.网站的主色调为绿和白，充分衬托清新自然的风格。 第四章:网站制作过程 新建站点，命名为yyl，在站点中新建image、flash、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)调整实例的坐标。 (10)选择这9个实例，按F8键，将其转化为影片剪辑元件。 (11)在图层“百叶窗”上右击，从弹出的菜单中选择“遮罩层”。 4.根据遮罩效果修改“拉伸的叶片”元件。 4.5 xiangce2.html页面的制作 <script language="javascript"> 1.输入代码 <!--begin function makevisible(cur,which){ if(which==0) cur.filters.alpha.opacity=100 else cur.filters.alpha.opacity=20} //end--> </script> <a href="image/相册2-1.jpg"><img src="image/相册 2-1.jpg" border="0" style="filter:alpha(opacity=20)" onmouseover="makevisible(this,0)" alt="X战记" /></a> <a href="image/相册2-2.jpg" herf="image/相册 2-2.jpg"><img src="image/相册2-2.jpg" border="0" style="filter:alpha(opacity=20)" onmouseover="makevisible(this,0)" alt="圣传" /></a> 2.输入文字，制作超链接。 onmouseout="makevisible(this,1)" onmouseout="makevisible(this,1)" 4.6 xiangce4.html页面的制作 1.制作图库页面。 (1)新建一个网页文档，建立图库页面的基本布局。 (2)将光标定位在页面左侧的第一个单元格中，执行[插入记录]—[图像]命令， 将图像文件插入到单元格中，居中对齐。 2.插入AP元素。 (1)选中要显示预览图的那个单元格，将此单元格的对齐方式改为左对齐和顶对 齐。 (2)将光标放置在此单元格内。选择[插入记录]—[布局对象]—[AP Div]命令插入一个AP元素。选中此AP元素，查看“属性”面板，确保AP元素的左边距和上边 距为空。 (3)打开“AP元素面板”，确认其中的“防止重叠”选项没有被选中。 (4)将光标放置在此AP元素中，再次执行[插入记录]—[布局对象]—[AP Div]命令。在刚才的AP元素中嵌套一个AP元素。 (5)根据要在AP元素中显示的图像的大小，调整新插入AP元素的位置和大小。 (6)将光标定位在AP元素中，插入图像。 3.将图像添加到时间轴。 (1)选择[窗口]—[时间轴]命令，打开时间轴面板。 (2)选中AP元素中的图像，将图像拖至时间轴。在时间轴的第1帧处放下鼠标。拖曳后面的一个关键帧至第60桢。 (3)选中时间轴的第15帧，单击鼠标右键，再弹出的快捷菜单中选择[增加关键帧]命令。用同样的方法在第30帧，第45帧处各增加一个关键帧。 (4)选中第15帧的关键帧，打开“属性”面板，更改图像源文件。用同样的方法更改第30帧，第45帧处的图像原文件。 4.给文字添加行为动作。 (1)选中文字“连续播放”，在其属性面板中添加空链接“javascript:;”,在“行为”面板中单击[添加行为]按钮，在弹出的菜单中执行[时间轴]—[播放时间轴]命令，在弹出的文本框中输入“timeline1”后按[确定]按钮。 (2)“暂停播放”，“从头播放”设置同上。 5.给缩略图添加行为动作。 (1)选中第一张缩略图，单击[添加行为]按钮，在弹出的菜单中执行[时间轴]—[转到时间轴帧]命令，在弹出的文本框中输入“timeline1”，在“前往帧”文本框中输入“1”，单击[确定]按钮回到行为面板，将此行为事件改为“onclick”。 (2)用同样的方法，给另外3张图像添加同样的行为，将第2张缩略图的“前往帧”设为“15”，第3张缩略图的“前往帧”设为“30”，第4张缩略图的“前往帧”设为“45”，行为事件改为“onclick”。 4.7 yinyue1.html页面的制作 1.下载格式为mp3的歌曲，保存在站点中的music文件夹中。 2.在页面中执行 插入记录—插件命令，在页面中插入播放器及浏览音乐文件位置。 2.插入图片，输入文字. 3.输入文字，制作超链接。 总结 通过这次个人网站设计的制作，我学会了很多东西，也了解了很多关于个人网站的资料。不知不觉网页设计的课程将要结束了，这门课程所包含内容的丰富是让我从没有想到的。在整个的学习过程中，我学习了Dreamwave、Fireworks、Html语言、网站建设的基本思想等重要内容。到现在为止，我还是很庆幸能够 学到这么多的内容。 虽然整个网页的结构还有很多不足，还有一些板块没有开通，但是我的确能够感到在我们制作过程中技能的提高。整个网站的不足我想是没有使用到一些动态网页的知识，使得日后网站的维护较为繁杂。希望以后可以自学动态网站的课程，从而弥补自己在动态网络语言方面的不足。这样以后可以利用业余的时间为自己或者公司，根据自己的爱好建立一个个人网站。 参考文献 [1] 缪亮. Dreamweaver CS3 基础与实训教程. 电子工业出版社，2008年. [2] 李冬芸. Flash动画实例教程. 电子工业出版社，2010年. [3] 缪亮，郭刚. Photoshop 平面设计实用教程. 清华大学出版者，2008年. 1