网页设计实训报告.doc

网页设计与制作实训报告摘要：采用循序渐进的方式来论述网页制作的大致过程。一般网站制作大致分为四个部分：需求分析，网站制作，测试网页和发布网站。而每一个部分里面又要进行进一步更加精细的工作。 进入二十一世纪，互联网进一步普及，人们的网络生活进一步丰富，网络已经成为人们之间沟通交流的另一种方式。作为一名大学生，学习如何设计和制作网页变成为一项必不可少的过程，进过几个月的学习我开始对网页的设计和制作有了初步的认识，并且学习了一些网页制作基础。 网站是什么？要知道什么是网站首先要弄清楚什么是网页？网页（英文：Web page）是一个文件，他存放在世界某个角落的某一部计算机中，而这部计算机必须是与互联网相连的。网页经由网址（ URL ）来识别与存取，当我们在浏览器输入网址后，经过一段复杂而又快速的程序，网页文件会被传送到你的计算机，然后再通过浏览器解释网页的内容，再展示到你的眼前。是万维网中的一“页”，通常是HTML格式（文件扩展名为.html或.htm）。网页通常用图像档来提供图画。网页是构成网站的基本元素，是承载各种网站应用的平台。所谓站网站(Website)就是指在网际网路（因特网）上，根据一定的规则，使用HTML等工具制作的用於展示特定内容的相关网页的集合是由网页组成的。如果您只有域名和虚拟主机而没有制作任何网页的话，您的客户仍旧无法访问您的网站。 构成网页的元素有文字、图像、动画、音乐和程序等。文字与图片是构成一个网页的两个最基本的元素。我们可以简单的理解为：文字，就是网页的内容，图片，就是网页的美观。 做好一个网页最关键的一点就是设计。所以网页设计的好坏直接关系到整个网站的好坏。如下为网页模板制作所要注意的： 一制作工具：通常网页制作的工具有 dreamwear 二、网页色彩的搭配无论是平面设计，还是网页设计，色彩永远是最重要的一环。当我们距离显示屏较远的时候，我们看到的不是优美的版式或者是美丽的图片，而是网页的色彩。色彩在网页中所占比重很大，页面的色彩搭配是与网站的主题分不开的，一个网站必须一种或两种主题色。不至于让浏览者迷失方向，也不至于单调乏味。一般来说，页面的主题文字应尽量使用黑色等较深的颜色，与背景对比明显，按钮，边框等使用彩色。 校色调色是dreamwear中深具威力的功能之一，可方便快捷地对图象的颜色进行明暗、色编的调整和校正，也可在不同颜色进行切换以满足图象不仅仅在网页设计而且在不同领域如、印刷、多媒体等方面的应用。 色彩为第一视觉语言，具有影响人民心理，唤起人们感情的作用，左右我门的感情和行动。 1、可以传达意念，表达某种确切的含义，如交通灯上的红色表示停止，绿色表示放行的意念，已成为全世界所了解和承认的一种视觉语言。 2、色彩有明显的影响情绪的作用。不同的色彩可以表现不同的情感。 3、色彩有使人增强识别记忆的作用。 4、彩色画面更具有真实感，充分地表现对象的色彩、质感、量感。 5、色彩能增强画面的感染力。色彩远较黑、白和灰色更刺激视觉神经。具有良好色彩构成的设计作品，能强烈地吸引消费者的注意力，加强艺术魅力。关于色彩的原理有许多，如下为一些网页配色的小技巧。1用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。2用两种色彩。先选定一种色彩，然后选择它的对比色。3用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。在网页配色中，还要切记一些误区：1不要将所有颜色都用到，尽量控制在三至五种色彩以内。2背景和前文的对比尽量要大(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。 三、网页字体的设计 用字体工具写上所要的内容，然后调整字体，字体大小，字体颜色，字体形状等等。给字体加上适当的图层样式。并且可以将字体图层栅格化成普通图层来进行普通图层可以做的工作。我们还可以用钢笔工具描出字体路径进行扭曲成满意的形状然后给其填充等变化。不同地方的字也有所不同。各种特效字的制作是很多美术设计师热衷于dreamwear的研究的原因。 四、网页图片的制作网页所要用的图片可以用PS制作也可以用自己所拥有的素材 在PS里进行处理成自己想要的图片。利用PS可以将图片变成我们想要的不同风格的效果，黑白图片，古典图片，模糊图片等等一些。PS里的滤镜，画笔，等等一些工具可以将一幅图片处理成与原始图像完全不同的图片。可以对图像做各种变换如放大、缩小、旋转、倾斜、镜象、透视等。也可进行复制、去除斑点、修补、修饰图象的残损等。这在婚纱摄影、人像处理制作中有非常大的用场，去除人像上不满意的部分，进行美化加工，得到让人非常满意的效果。 图象合成则是将几幅图象通过图层操作、工具应用合成完整的、传达明确意义的图象，这是美术设计的必经之路。dreamwear提供的绘图工具让外来图象与创意很好地融合，成为可能使图象的合成无衣无缝。特效制作在dreamwear中主要由滤镜、通道及工具综合应用完成。包括图象的特效创意和特效字的制作，如油画、浮雕、石膏画、素描等常用的传统美术技巧都可藉由dreamwear特效完成。网页模板制作好后就可以用代码编辑网页啦 建网工具：1初学者我们可以用记事本来编写代码将编好的代码保存为.html的格式，然后用浏览器打开查看所编代码的效果。2当代码编写到一定程度就可以用代码编辑器啦。html编辑器。虽然HTML代码复杂，编辑和调试要花费大量的时间，但是HTML的稳定性，广泛性即可创建复杂的页面效果，故很多网页制作人都很亲睐它。目前来说，有众多的编辑器供选择，这些编辑器广泛支持复杂页面创建及高级HTML规范，使用较为普遍的有Hotdog等专业HTML编辑器，但是我们学习HTML时所用的编辑器是dreamwever(这是我们初用记事本后来慢慢接触的编辑器)。dreamweaver,用与编辑HTML、ASP、JSP、PHP时的辅助工具 。HTML标签：.网站制作最基础 建立网站注意以下步骤：一、 明确建立网站的目标和用户需求 Web站点的设计是展现企业形象、介绍产品和服务、体现企业发展战略的重要途径，因此我们必须明确设计站点的目的和用户需求，从而做出切实可行的设计计划。我们会根据消费者的需求、市场的状况、业务背景等进行综合分析，以“消费者（customer)”为中心，而不是以“美术”为中心进行设计规划。在设计规划时我们要分析：建设网站的目的为谁提供服务和产品公司简介、商品分类、商品展示和价格信息选择主题：小而精炼、体裁最好是自己熟悉的不要太滥设计风格：合理的网页布局 网站的LOGO尽可能的出现在页面的页眉中 文字链接 ，图片背景边框等网络元素尽量与主色调保持一致。 突出字体的特（在关键的菜单标题中使用统一字体）使用合适的特效突出你的标准色彩。 总结一句能反映贵站精髓的宣传标语！ 网站主题要鲜明 整体使用度强 内容切合度高 二、网站制作 1、创建站点： a、不要将站点的文件夹建立系统所在的分区山上以免当系统出现问题是造成站点的损失b、选择菜单站点新建站点c、在对话框中为自己的站点取一个名字 d、单击“下一步”选择“否，不想使用服务器技术”单击“下一步”选择“编辑我的计算机上的本地副本完成后再上传到服务”e、单击“浏览”在“下一步”在“如何连接到远程服务器”下拉表中选择“无”单击“下一步” 再“完成”。 2、向站点中 添加文件 新建的站点仅仅是一个空的站点。通过Dreamweaver文件面板可以方便空站点中添加内容。建立文件夹：选择文件选项 文件新建文件，在站点的根目录“myweb1”下名为“untitle”的文件夹重命名为“image.html”或“index.html”等 3、制作首页 页头：导航部分（准确无误地标识你的站点和企业标志） 广告部分 商品分类部分Email地址：用来接收用户垂询联系信息：如普通邮件地址或电话 版权声明部分：声明版权所有者 4、制作模板：用dreamwear制作一个网页模板 5、字体设置 文字引导可能没有图片引导那么直观的，但是文字引导的作用还是很强大的。比如文字的大小和文字的颜色，以及文字是否动还是不动，同时文字的意思是否简单，文字是否很有吸引力或者文字的吸引主题是否明确等。同时文字还可以结合图片的引导进行引导，同时还可以结合网站的功能结合引导等？文字引导有说明性的引导，有介绍性的引导，有议论式的引导，有强烈性的引导，有给人感官和视觉等各个方面的引导，要完全做好一个网站首页的文字引导的话，也是一个很大的工作量。文字引导是在网站里出现最多的引导，网站的首页和各个字页面都是有文字引导的，只要是文字就可以算是文字引导。文字引导要做好的话，需要结合图片引导和网站其他的内容架构和网站的版面设计等，不能单独的看待文字引导 5、制作样式：div 是标签 css是层叠样式表DIV+CSS高级布局已逐渐流行，但面对所谓DIV+CSS布局的叫法让人更为担心，不要让DIV成为Table的替代品，多层嵌套的DIV会严重影响代码的可阅读性，所以我们要活用HTML为我们提供的标签。DIV元素是用来为HTML文档内大块的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。div是html(超文本语言)中的一个元素,div+css 是一种网页的布局方法,这一种网页布局方法有别于传统的table布局。 CSS样式的使用 CSS(层叠样式表)是一种制作网页的新技术,它的全称是级联样式表,即Cascading StyleSheets的缩写，又称之为风格样式表单。CSS是在网页制作过程中普遍用到的技术。采用了CSS技术控制的网页，设计者会更轻松、有效地对页面的整体布局、颜色、字体、链接、背景以及同一页面的不同部分、不同页面的外观和格式等效果实现更加精确地控制。 三、测试网页1.页面是否美观 2.连接之间是否有断层 3.网页在不同的浏览器是否能显示有些网页在不同的浏览器显示的效果不同，如有些内容在IE浏览器里可以显示但在火狐浏览器里却不能显示。所以我们要检测网页在不同的浏览器是否能显示其它项1.如果有计数器，那么需要对之进行测试2.如果是有搜索功能，要把这个站内搜索和搜索引擎的搜索分辨清楚四、发布网站 制作好的网站经测试后就可以在服务器上发布，这样能让跟多的人知道你的网站。 一般来说，好的网站应该给人有这样的感觉：干净整洁；条理清楚；网页专业水准；引人入胜。 1.预期目标（1）通过本次实训要完成仙剑奇侠传的网页制作，包括二级页面和三级页面，还要应用一些网页制作的基本技巧。（2）掌握布局技术，模版应用，CSS样式，超级链接，并运用fireworks做简单的图形编辑。（3）通过连续时间的实际操作，巩固对网站的创建、网页的策划、设计与制作的理解，加深理解网站、网页、制作的过程，理解团队互助共同完成项目的协作精神。2关键技术及解决途径：一、关键技术：（1）有完整的策划报告(电子版)，实际内容有改动不受影响；（2）有标题的网站以及有对应自己创意设计制作的Logo图象、广告条等图象；（3）至少有首页、二级页面、三级页面的层结构；（4）有框架、有表单；（5）有自己创作输入的文字内容并经过排列整理；（6）Dreamweaver模板技术；（7）至少采用了样式表技术；（8）采用鼠标事件等行为设置之一；（9）不允许出现超级链接错误！（10）有版权声明、网站更新日期、创意制作人员。二、解决途径根据课堂所学，充分利用相关技术要点，对于不懂的地方问实训老师。制作完成后，反复检查，保证链接的正确性。3方案设计与实施步骤：一、方案设计二、实施步骤（可以包括网站内容）（1）确定网站内容为仙剑奇侠传4,并制定详细的策划报告（2）查找相关资料，制作banner，logo，和相关动画图片（3）小组分工合作，我负责首页制作，人物介绍，友情链接，留言板相关内容。（4）采用布局技术设计首页，然后插入logo，banner美化首页首页（5）应用模版技术制作人物介绍，介绍仙剑4中的重要出场人物，并配上相关图片和文字，制作了网站相册，使用了锚记。（6）友情连接应用了框架，链接到百度贴吧，官网等相关网站，并用fireworks制作了相关的logo和banner。友情链接（7）采用表单技术制作留言板。留言板（8）最后创建CSS样式，并运用到各个连接上。（9）个相关页面之间进行必要的超级链接，友情链接与相关网站上链接。（10）最后和另一小组成员进行作品汇总，完成相关站点的链接（11）检查链接，清除多余文件和图片4自我评价这次实训充分利用了课堂所学，掌握了许多关键技术，例如模版技术，CSS样式，使得制作过程方便了很多。在完成基本要求得基础上，文件夹、文件命名规范；文件存放位置合理；制作完成之后进行过现场清理：没有无用的文件、文件夹，没有断链(外部链接不算)；工作量饱满：内容较丰富、自己设计制作的素材应用多；色系、布局合理美观、考虑用户访问方便；采用各种特效、并且运用合理。不过也有些不足，比如一开始没有把两个人制作的文件夹分开，导致后面汇总时比较麻烦。不过总的来说，对这次的作品相当满意，不仅选择了我们自己喜欢的内容，而且在我们的水平上把它做的很精美。在这个过程中我们意识到了自己在相关技术上的不足，通过学习，知道了如何改进我们的缺点，相信在以后的应用中，我们会做的更加完美！（一） 页面的设计方面网页设计跟学习别的东西一样，也需要兴趣，所谓的兴趣也不是三分钟热度，是一种执著。学习网页设计需要耐心，如果没有耐心，就学不好网页设计，应为当你碰到一个问题时，如果不能立刻得到问题的答案，你可能需要很长时间去解决，我就碰到过一个问题，用了很长时间才解决。学习网页设计需要坚持，坚持不断的学习，因为设计网页的软件在不断的更新，因此我们要不断的学习并且学习网页设计不要掉入技术的陷阱，如果你的网页设计技术一流，并且对软件的掌握程度已经达到一定水平，但是你设计的网页确不堪目睹，这是因为网页设计是介于平面设计和编程技术两者之间的边缘科学.不仅涉及到美学,心理学,平面构成,色彩搭配等平面设计的方面的知识,还涉及到html,javascript,css,asp,php等编程语言技术方面的知识.只有综合运用多种知识,才能设计出视听特效,动感十足,富于个性的web页面,才能全面展现互联网这一新型媒体的独特魅力和多维空间的超强功能.并且我认为网页设计应该注重实用性，因为它是让人浏览的，是用户可以抚摸，可以评论，可以交互的。因此我提倡简单的美。（二）网页视觉效果视觉形象识别即我们通常所说的VI（VisualIdentity），与BI一起用于深化表现企业理念，同时也受到BI的影响。所谓视觉形象识别，就是指能够被目标客户通过视觉来认知与企业相关的一切事物，从最基础的企业标志、吉祥物、标准色到企业日常业务中的信纸、服装、名片等等，在将其系统化以后就形成了企业的视觉形象识别系统。视觉形象识别系统在整套CIS中处于最表层的位置，其中所有的设计都将与目标客户发生直接的接触。（三）网页的整体布局和导航网页的布局通常指的是网页的整体架构，说的通俗一点就是排版。如何突出最重要的内容，即让用户眼就看到这个网页所想要传达的信息。这一点至关重要。在大多数做的比较成功的网页中，一个共同的特点就是网页的整体架构十分的清晰明了，便于用户浏览网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型网页布局是主要考虑以下几点：1、首先要考虑整个网页的长和宽，以及长度和宽度之间的比例。2、其次就应该考虑导航条的设置了。3、正文的框架设置（横向因素和纵向因素交错）（四）网页中文字、图像图象我利用网上搜索和自己所学过的banner进行处理,这样做起来节约了很多时间。（五）网页制作过程中的其他注意事项不要过于注重色彩的灿烂，只要简单就行。我们最终追求的主要是实用价值。通过这次实习，在制作时想想使自己的网页更加丰富多彩，在网页中插入图象，动画，动态特效。可是总遇到这样那样的问题，但在同学的帮助和自己摸索的情况下完成了这个实习的成果。看到了一些知名的网站开发出的网页，不仅栏目内容丰富，信息量大，而且页面图文并茂，五彩缤纷，使得网民赞叹不已，流连忘返。以我们的经验，当前的软件的功能日趋复杂，不学到一定的深度和广度是难以在实际工作中应付自如的。因此反映出学习的还不够，缺点疏漏。虚在加以刻苦钻研及学习，不断开拓视野，增强自己的实践操作技能，为以后能做出出色的网页而努力。近一个星期的实训将要结束，其中的酸甜苦辣我会在今后的日子里不断地去咀嚼，去回味，去探索。从制作网页过程中，我学到了新的美化网页的方法，运用了更多以前未运用的技巧。这使我学到了更多的知识，并且为我自己在制作网页这方面积累了一些经验。这些将是我人生中的一次重要的经历，将是我今后走上社会后的一笔巨大的财富。这次实习的收获对我来说有不少，我自己感觉在知识、技能等方面都有了不少的收获。总体来说这次是对我的综合素质的培养，锻炼和提高。（一） 页面的设计方面网页设计跟学习别的东西一样，也需要兴趣，所谓的兴趣也不是三分钟热度，是一种执著。学习网页设计需要耐心，如果没有耐心，就学不好网页设计，应为当你碰到一个问题时，如果不能立刻得到问题的答案，你可能需要很长时间去解决，我就碰到过一个问题，用了很长时间才解决。学习网页设计需要坚持，坚持不断的学习，因为设计网页的软件在不断的更新，因此我们要不断的学习并且学习网页设计不要掉入技术的陷阱，如果你的网页设计技术一流，并且对软件的掌握程度已经达到一定水平，但是你设计的网页确不堪目睹，这是因为网页设计是介于平面设计和编程技术两者之间的边缘科学.不仅涉及到美学,心理学,平面构成,色彩搭配等平面设计的方面的知识,还涉及到html,javascript,css,asp,php等编程语言技术方面的知识.只有综合运用多种知识,才能设计出视听特效,动感十足,富于个性的web页面,才能全面展现互联网这一新型媒体的独特魅力和多维空间的超强功能.并且我认为网页设计应该注重实用性，因为它是让人浏览的，是用户可以抚摸，可以评论，可以交互的。因此我提倡简单的美。（二）网页视觉效果视觉形象识别即我们通常所说的VI（VisualIdentity），与BI一起用于深化表现企业理念，同时也受到BI的影响。所谓视觉形象识别，就是指能够被目标客户通过视觉来认知与企业相关的一切事物，从最基础的企业标志、吉祥物、标准色到企业日常业务中的信纸、服装、名片等等，在将其系统化以后就形成了企业的视觉形象识别系统。视觉形象识别系统在整套CIS中处于最表