静态网页设计与制作论文

1静态网页设计与制作论文题目：静态网站设计与制作学号：1003101217姓名：潘悦所属系：信息工程系专业：计算机网络技术班级：10网络一班2目录摘要……………………………………………………………………………………………….0第1章网站制作的概述……………………………………………………………………11．网页制作要用的软件……………………………………………………………………12．网页工具介绍……………………………………………………………………………23．图形处理软件、动画制作…………………………………………………………………24.网站的构思设计思想…………………………………………………………………2第2章我的个人网站的设计与规划…………………………………………………………31网站筹划首页制作…………………………………………………………………………32其它页面的设计…………………………………………………………………………….33网页中特效的运用整理站点……………………………………………………………4第3章结论…………………………………………………………………………………53设计论文摘要在包罗万象的网络世界里，要制作一个具有特色的小网站是需要一定方法与技巧的。通过一年的学习联系，结合自身的经验和兴趣爱好，我制作了一个影视天地的网站，页面布局协调，色彩搭配合理，符合形式美的要求，在色彩布局等方面进行了仔细的设计与归纳，使得网站更完善。在制作过程中，体会到网页不光是把各种东西放上去，能看就行，这是远远不够的！要考虑如何受众能更多的和更有效率的接收网页上的信息，从而使他们对给网站留下很好的印象，制作网站需要耐心和很好的基础。第1章网站制作的概述网站就是网页的有机组合体，网页的学名是HTML（HyperTextMark-upLanguage），翻译过来就是“超文本标记语言”，它定义了各种超文本在HTML文件中的组织方式，是一种可以在上传输并被浏览器读取、翻译成页面的一种文件。网站就是许许多多网页、文本、图片、声音、图像等在一起，按照一定方式组织起来的集合体。网站是上网查信息的窗口，是我们存放资料、图片、多媒体的网上展示厅，当然也是展示个人魅力的大舞台。随着科技的发展，制作网站的软件也随之增多，下面简要介绍网页制作是需要的软件1网页制作要用的工具Dreamweaver简介Dreamweaver是美国毕MACOROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别视觉化网页开发工具，利用它可以轻而易举的制作出跨越平台限制和跨越浏览器限制的充满动感的网页。其特点有以下几个方面：最佳的制作效率、能够迅速的管理网站，拥有无可比拟的控制能力、还集成了程序开发语言。HTML语言简介HTML（HyperTextMark-upLanguage）即超文本标记语言，是的描述语言。html是在sgml定义下的一个描述性语言，或可说html是sgml的一个应用程式，html不是程式语言，它只是标示语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。FLASH简介FLASH简介Flash是一种交互式矢量多媒体技术，他的前身是Futureplash，早期网上流行的矢量动画插件。后来由于Macromedia公司收购了FutureSplash以后便将其改名为Flash2，到现在最新的flash4。现在网上已经有成千上万个Flash站点，著名的如Macromedia专门ShockRave站点，全部采4用了ShockwaveFlash和Director。可以说Flash已经渐渐成为交互式知量的标准，未来网页的一大主流。Flash可创建基于矢量的网站，可以跨平台、跨浏览器地显示声音、图片、动画和交互式等内容。Photoshop简介Photoshop是Adobe公司旗下最为出名的图像处理软件之一，集图像扫描、编辑修改、图像制作、广告创意，图像输入与输出于一体的图形图像处理软件，深受广大平面设计人员和电脑美术爱好者的喜爱。网络的普及是促使更多人需要掌握PHOTOSHOP的一个重要原因。因为在制作网页时PHOTOSHOP是必不可少的网页图像处理软件。从功能上看，Photoshop可分为图像编辑、图像合成、校色调色及特效制作部分。2网站的构思设计思想在浏览一个网站的时候，能够直接吸引用户目光的并不是图像。大多数通过偶然点击进入网站的用户，他们是来寻觅信息的而不是图像。因此，保证我的网站设计凸现出最重要的信息板块，这才是设计的首要原则。在充满大量颜色的花哨字体格式里寻找到所需的信息，因为视觉线索告诉他们把这些忽略吧。保持网站的清爽，不要因为华而不实的表面，让重要的信息被忽略。网页信息是为大多数强调快速浏览的无联网用户提供的。除非上下文的衔接要求，保持信息由简短的段落和句式组成，.根据视觉锁定，一栏格式比多栏格式拥有更好的表现力，别让过多的信息把网站来访者淹没。大多数情况下，简洁更具力量。多栏内容容易被用户忽视，我需要消除这些干扰。如果要在网页中使用图片，那越大越好。人们更倾向于查看那些能够清楚地看到细节和获取信息的图像。要保证你所用的图片与文章内容相关，否则它更容易被忽视。大多数读者都拥有高速的连接速度，所以请放心在你的网站上使用那些较大体积的图片。.表单格式可以延长读者的注意时间。分解内容和段落，大量使用表单形式来表现你的文章，可以保证读者的浏览率。使用数字和其它标记符号来突出文章的重要内容，会让网站更容易浏览，用户更快的找到所需的信息。尽管把网页的每寸空间都填满这个想法十分诱人，但事实上让网站留出部分剩余更为不错。网站的过量信息会把用户淹没，同时他们也会忘记所提供的大部分的内容。所以保持网页的简洁，给读者预留出一些视觉空间来供读者休息。在文中使用粗体、大写、彩体、下划线可以帮助用户获取正文所表达的最主要的信息。使用时需要谨慎，因为过多的使用会使你的网页难以阅读，把读者吓跑。第2章我的个人网站的设计1.确定网站的主题网站主题就是你建立的网站所要包含的主要内容，一个网站必须要有一个明确的主题。网站的主题无定则，只要是你感兴趣的，任何内容都可以，但主题要鲜明，在你的主题范围内内容做到大而全、精而深。由于我自己比较喜欢看电影电视等娱乐节目，在这方面比较了解和感兴趣，所以决定做一个影视天地赏析网站。52.明确了网站的主题以后，我就开始围绕主题开始搜集材料了。常言道：“巧妇难为无米之炊”。要想让自己的网站有血有肉，能够吸引住用户，就要尽量搜集材料，搜集得材料越多，以后制作网站就越容易。材料既可以从图书、报纸、光盘、多媒体上得来，也可以从互联网上搜集，然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。我主要是在网上搜集了许多的影视资讯和影视图片，找了一些影视的logo，为制作网站做了充分的准备。3.规划网站一个网站设计得成功与否，很大程度上决定于设计者的规划水平，规划网站就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。也只有如此制作出来的网页才能有个性、有特色，具有吸引力。我决定制作十张网页大小的网站，运用超链接，动画等技术。4.选择合适工具开始制作网页1.布局的方法：使用table表格制作网页框架。具体操作步骤如下：第一步，打开dreamweaver8.0软件，数好目标表格的行和列（从最小的格子数起）点击插入菜单中的表格项，然后打开下面的属性面板第二步，将第一行的三列合并，第三行的三列合并。第三步，合并后，一定要严格定义好每行的高度，其次一定要定义好第二行每个单元格的宽度，注意三个单元格的宽度之和应该是表格的总宽度。第四步，将总表格居中对齐，设置好表格的边框颜色以及每个单元格的底纹，即可。这样，一个通过表格制作的网页框架就做好了，表格的每个单元格就可以存放图片、文字、动画等等了。也可以使用层的方法。2.应用css样式及代码我自己在制作网站时中就运用了一些css样式，应用在了背景、鼠标特效跟随等地方，代码运用的比较多，下面就是一个例子：脚本说明:把如下代码加入body区域中script/*ScrollingImageMap/TextLinkTooltipScript-SpecialThanksto:Rob()MissAnn()*/if(!document.layers&&!document.all)event=testfunctionshowtip2(current,e,text){6if(document.all&&document.readyState==complete){document.all.tooltip2.innerHTML='marqueestyle=border:1pxsolidblack'+text+'/marquee'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=visible}elseif(document.layers){document.tooltip2.document.nstip.document.write('b'+text+'/b')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=show}}functionhidetip2(){if(document.all)document.all.tooltip2.style.visibility=hiddenelseif(document.layers){clearInterval(currentscroll)document.tooltip2.visibility=hidden}}functionscrolltip(){if(document.tooltip2.document.nstip.left=-document.tooltip2.document.nstip.document.width)document.tooltip2.document.nstip.left-=5elsedocument.tooltip2.document.nstip.left=150}/scriptscriptlanguage=JavaScriptfunctionYY_Layerfx(yyleft,yytop,yyfnx,yyfny,yydiv,yybilder,yyloop,yyto,yycnt,yystep){//v1.2//copyright(c)1999Y