《静态网页设计与制作论文.doc》由会员分享，可在线阅读，更多相关《静态网页设计与制作论文.doc（6页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、精品文档，仅供学习与交流，如有侵权请联系网站删除静态网页设计与制作论文题目：静态网站设计与制作学号：1003101217姓名：潘悦所属系：信息工程系专业：计算机网络技术班级：10网络一班目录摘要.0第1章 网站制作的概述 1 1 网页制作要用的软件 12 网页工具介绍 23 图形处理软件、动画制作24. 网站的构思 设计思想 2第2章 我的个人网站的设计与规划 3 1网站筹划 首页制作3 2其它页面的设计.3 3网页中特效的运用 整理站点 4 第3章 结论 5设计论文摘要在包罗万象的网络世界里，要制作一个具有特色的小网站是需要一定方法与技巧的。通过一年的学习联系，结合自身的经验和兴趣爱好，我制
2、作了一个影视天地的网站，页面布局协调，色彩搭配合理，符合形式美的要求，在色彩布局等方面进行了仔细的设计与归纳，使得网站更完善。在制作过程中，体会到网页不光是把各种东西放上去，能看就行，这是远远不够的！要考虑如何受众能更多的和更有效率的接收网页上的信息，从而使他们对给网站留下很好的印象，制作网站需要耐心和很好的基础。第1 章 网站制作的概述网站就是网页的有机组合体，网页的学名是HTML（Hyper Text Mark-up Language），翻译过来就是“超文本标记语言”，它定义了各种超文本在HTML文件中的组织方式，是一种可以在WWW上传输并被浏览器读取、翻译成页面的一种文件。网站就是许许多
3、多网页、文本、图片、声音、图像等在一起，按照一定方式组织起来的集合体。网站是上网查信息的窗口，是我们存放资料、图片、多媒体的网上展示厅，当然也是展示个人魅力的大舞台。随着科技的发展，制作网站的软件也随之增多，下面简要介绍网页制作是需要的软件1网页制作要用的工具Dreamweaver简介Dreamweaver是美国毕MACOROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别视觉化网页开发工具，利用它可以轻而易举的制作出跨越平台限制和跨越浏览器限制的充满动感的网页 。其特点有以下几个方面：最佳的制作效率、能够迅速的管理网站，拥有无可比拟的控制
4、能力、还集成了程序开发语言。HTML语言简介HTML（HyperTextMark-upLanguage）即超文本标记语言，是WWW的描述语言。html 是在 sgml 定义下的一个描述性语言，或可说 html 是 sgml 的一个应用程式，html 不是程式语言，它只是标示语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。 另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图
5、片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。FLASH简介FLASH简介Flash是一种交互式矢量多媒体技术，他的前身是Futureplash，早期网上流行的矢量动画插件。后来由于Macromedia公司收购了Future Splash以后便将其改名为 Flash2，到现在最新的flash4。现在网上已经有成千上万个Flash站点，著名的如Macromedia专门ShockRave站点，全部采用了Shockwave Flash 和Director。可以说Flash已经渐渐成为交互式知量的标准，未来网页的一大主流。Flash 可创建基于矢量的网站，
6、可以跨平台、跨浏览器地显示声音、图片、动画和交互式等内容。Photoshop简介Photoshop是Adobe公司旗下最为出名的图像处理软件之一，集图像扫描、编辑修改、图像制作、广告创意，图像输入与输出于一体的图形图像处理软件，深受广大平面设计人员和电脑美术爱好者的喜爱。网络的普及是促使更多人需要掌握PHOTOSHOP的一个重要原因。因为在制作网页时PHOTOSHOP是必不可少的网页图像处理软件。从功能上看，Photoshop可分为图像编辑、图像合成、校色调色及特效制作部分。2网站的构思 设计思想在浏览一个网站的时候，能够直接吸引用户目光的并不是图像。大多数通过偶然点击进入网站的用户，他们是来
7、寻觅信息的而不是图像。因此，保证我的网站设计凸现出最重要的信息板块，这才是设计的首要原则。在充满大量颜色的花哨字体格式里寻找到所需的信息，因为视觉线索告诉他们把这些忽略吧。保持网站的清爽，不要因为华而不实的表面，让重要的信息被忽略。网页信息是为大多数强调快速浏览的无联网用户提供的。除非上下文的衔接要求，保持信息由简短的段落和句式组成，.根据视觉锁定，一栏格式比多栏格式拥有更好的表现力，别让过多的信息把网站来访者淹没。大多数情况下，简洁更具力量。多栏内容容易被用户忽视，我需要消除这些干扰。 如果要在网页中使用图片，那越大越好。人们更倾向于查看那些能够清楚地看到细节和获取信息的图像。要保证你所用的
8、图片与文章内容相关，否则它更容易被忽视。大多数读者都拥有高速的连接速度，所以请放心在你的网站上使用那些较大体积的图片。.表单格式可以延长读者的注意时间。分解内容和段落，大量使用表单形式来表现你的文章，可以保证读者的浏览率。使用数字和其它标记符号来突出文章的重要内容，会让网站更容易浏览，用户更快的找到所需的信息。尽管把网页的每寸空间都填满这个想法十分诱人，但事实上让网站留出部分剩余更为不错。网站的过量信息会把用户淹没，同时他们也会忘记所提供的大部分的内容。所以保持网页的简洁，给读者预留出一些视觉空间来供读者休息。在文中使用粗体、大写、彩体、下划线可以帮助用户获取正文所表达的最主要的信息。使用时需
9、要谨慎，因为过多的使用会使你的网页难以阅读，把读者吓跑。第2章 我的个人网站的设计1.确定网站的主题网站主题就是你建立的网站所要包含的主要内容，一个网站必须要有一个明确的主题。网站的主题无定则，只要是你感兴趣的，任何内容都可以，但主题要鲜明，在你的主题范围内内容做到大而全、精而深。由于我自己比较喜欢看电影电视等娱乐节目，在这方面比较了解和感兴趣，所以决定做一个影视天地赏析网站。2. 明确了网站的主题以后，我就开始围绕主题开始搜集材料了。常言道：“巧妇难为无米之炊”。要想让自己的网站有血有肉，能够吸引住用户，就要尽量搜集材料，搜集得材料越多，以后制作网站就越容易。材料既可以从图书、报纸、光盘、多
10、媒体上得来，也可以从互联网上搜集，然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。我主要是在网上搜集了许多的影视资讯和影视图片，找了一些影视的logo，为制作网站做了充分的准备。3.规划网站一个网站设计得成功与否，很大程度上决定于设计者的规划水平，规划网站就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。也只有如此制作出来的网页才能有个性、有特色，具有吸引力。我决定制作十张网页大小的网站，运用超链接，
11、动画等技术。4.选择合适工具 开始制作网页1.布局的方法：使用table表格制作网页框架。具体操作步骤如下：第一步，打开dreamweaver 8.0软件，数好目标表格的行和列（从最小的格子数起）点击插入菜单中的表格项，然后打开下面的属性面板第二步，将第一行的三列合并，第三行的三列合并。第三步，合并后，一定要严格定义好每行的高度，其次一定要定义好第二行每个单元格的宽度，注意三个单元格的宽度之和应该是表格的总宽度。第四步，将总表格居中对齐，设置好表格的边框颜色以及每个单元格的底纹，即可。这样，一个通过表格制作的网页框架就做好了，表格的每个单元格就可以存放图片、文字、动画等等了。也可以使用层的方法
12、。2.应用css样式及代码我自己在制作网站时中就运用了一些css样式，应用在了背景、鼠标特效跟随等地方，代码运用的比较多，下面就是一个例子：脚本说明:把如下代码加入区域中Scrolling Image Map/Text Link Tooltip Script- Special Thanks to: Rob() Miss Ann()if (!document.layers & !document.all)event=testfunction showtip2(current,e,text)if (document.all & document.readyState=complete)docume
13、nt.all.tooltip2.innerHTML=+text+document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10document.all.tooltip2.style.visibility=visibleelse if (document.layers)document.tooltip2.document.nstip.document
14、.write(+text+)document.tooltip2.document.nstip.document.close()document.tooltip2.document.nstip.left=0currentscroll=setInterval(scrolltip(),100)document.tooltip2.left=e.pageX+10document.tooltip2.top=e.pageY+10document.tooltip2.visibility=showfunction hidetip2()if (document.all)document.all.tooltip2.
15、style.visibility=hiddenelse if (document.layers)clearInterval(currentscroll)document.tooltip2.visibility=hiddenfunction scrolltip()if (document.tooltip2.document.nstip.left=-document.tooltip2.document.nstip.document.width)document.tooltip2.document.nstip.left-=5elsedocument.tooltip2.document.nstip.l
16、eft=150function YY_Layerfx(yyleft,yytop,yyfnx,yyfny,yydiv,yybilder,yyloop,yyto,yycnt,yystep) /v1.2/copyright (c)1999 Yaromat, Jaro von Flocken if (document.layers)|(document.all) with (Math) yynextx= eval(yyfnx) with (Math) yynexty= eval(yyfny) yycnt=(yyloop & yycnt=yystep*yybilder)?0:yycnt+yystep;
17、if (document.layers) eval(yydiv+.top=+(yynexty+yytop) eval(yydiv+.left=+(yynextx+yyleft) if (document.all) eval(yydiv=yydiv.replace(/.layers/gi, .all); eval(yydiv+.style.pixelTop=+(yynexty+yytop); eval(yydiv+.style.pixelLeft=+(yynextx+yyleft); argStr=YY_Layerfx(+yyleft+,+yytop+,+yyfnx+,+yyfny+,+yydi
18、v+,+yybilder+,+yyloop+,+yyto+,+yycnt+,+yystep+); if (yycnt=yystep*yybilder)eval(yydiv+.yyto=setTimeout(argStr,yyto);function YY_Mousetrace(evnt) /v1.2 copyright (c)1999 Yaromat if (yyns4) if (evnt.pageX) yy_ml=evnt.pageX; yy_mt=evnt.pageY; else yy_ml=(event.clientX + document.body.scrollLeft); yy_mt
19、=(event.clientY + document.body.scrollTop); if (yy_tracescript)eval(yy_tracescript)这是一个鼠标跟随特效的代码，鼠标移动时跟随着好看的炫彩彩链，而且在我的网站中我还用了跑马灯的代码，使得网页更加漂亮。3.色彩的使用在我的页面中，我运用了很多鲜亮的色彩，因为我觉得是影视网站就应该颜色鲜艳一点，才能有视觉冲击的效果，这样才能显示我的主题。网页设计离不开色彩的应用，当打开一个网站的时候，给用户留下第一印象的既不是网站丰富的内容，也不是网站合理的布局，而是网站的色彩，尤其是在体现界面的时候，色彩对人的视觉效果非常明显，一
20、个网站设计的成功与否，在某种程度上取决于设计者对网页界面设计颜色的运用和搭配。我的影视天地网站也是一个资讯网站，文字在这也是非常重要的，所以我使用了鼠标经过文字等的处理特效。一般我们网页默认的字体是宋体。为了体现站点的“与众不同”和特有风格，我门可以根据需要选择一些特别字体。例如，为了体现专业可以使用粗仿宋体，体现设计精美可以用广告体，体现亲切随意可以用手写体等等。当然这些都是个人看法，你可以根据实际情况。4.图像的处理应用在网页上插入一些精美、适当的图片是必要的。图像在网页中通常起到画龙点睛的作用，它能装饰网页，表达个人的情趣和风格。但在网页上加入的图片过多，就会影响浏览的速度，导致用户失去
21、耐心而离开页面由计算机产生的形式简单的图像(如标识、图标)首选PNG格式，而色彩丰富的照片则一定是JPEG。如果颜色不多且没有渐变，应当使用GIF格式。GIF是用得最多的网页图像格式。GIF最多容纳256种颜色，几乎适用于除照片以外的所有图像。它还具有生成简单的动画和透明图像的能力。插入鼠标经过图像，方法如下：鼠标经过图像是指当鼠标指针掠过一幅图像时，它会变为另一幅图像来显示。鼠标经过图像实际上是由两幅图像组成：【初始图像】，即页面首次装载时所显示出的图像；【鼠标经过图像】，即当鼠标指针掠过时所显示的图像。用于创建鼠标经过图像的两幅图像的大小要求必须相同。如果图像的大小不同，Dreamweav
22、er MX 2004会自动调整第二幅图像（鼠标经过图像）的大小，使之与第一幅图像大小相匹配。我还制作了一个电子相册，为使网站内容更加丰富。第3章 结论网页设计是伴随这网络的快速发张而快速兴起的。由于人们使用网络的频繁而网页作为上网的主要依托就变得非常重要。网页间就得是排版布局，其功能主要是提供一种形式给每个上网者，让他们能够了解网站提供的信息。在制作网页的过程中，我有一些体会：1. 整体性好：一个网站强调的就是一个整体，只有围绕一个统一的目标所做的设计才是成功的。2. 网站形象突出：一个符合美的标准的网页是能够是网站的形象得到最大限度的提升的。3. 页面用色协调，布局符合形式美的要求：布局有条理，充分应用美的形式，使网页富有可欣赏性，提高档次。当然雅俗共赏是人人都追求的。我通过运用Dreamwever软件，制作了一个的影视天地网站，运用了css样式，表格，时间轴，代码段，框架，运用photoshop软件做了图片的修改，并结合了自己对于色彩，布局，图形的理解，制作了这个网页，这次是对自己对于网页制作方面的一个锻炼和检验，并意识到自己还需要多多努力学习，提高自己制作网站的水平。【精品文档】第 6 页