静态网实训报告

1、Nani ing Vocational Institute of Industry Technology计算机软件学院实训报告Web静态主题网站设计姓名：夏前伟胡维国海继昌陈佑宏学号：09040302专业：电子商务班级：电商1413时间：2016.6.20任课教师：梁菊华目录 TOC o 1-5 h z 前言2 HYPERLINK l bookmark4 o Current Document 实训意义3本实训目的：3综合实训的目的：3 HYPERLINK l bookmark6 o Current Document 对个人的要求4具体要求如下：4 HYPERLINK l bookmark8 o

2、 Current Document 内容的设计及制作5一、策划阶段：5二、设计阶段网站形象设计： 5清晰性：5创造性：5网站技术因素考虑：5 HYPERLINK l bookmark10 o Current Document 页面设计6页面的平铺展示：6LOGO 6字体图片背景的搭配：6导航：6其他：6 HYPERLINK l bookmark12 o Current Document 主页和部分页面展示 7 HYPERLINK l bookmark14 o Current Document 部分代码12 HYPERLINK l bookmark16 o Current Document 要求

3、14主页的要求14PRODC巾要求14ABOUT ME 的要求 14 HYPERLINK l bookmark18 o Current Document 测试站点15后期维护:15功能模块：15 HYPERLINK l bookmark20 o Current Document 参考文献16 HYPERLINK l bookmark22 o Current Document 个人小结17夏前伟19胡维国22海继昌24陈佑宏27、刖百随着时代的发展，网站建设越来越接近于一门艺术而不仅仅是一 项技术。网页的艺术设计，日益被网站建设者所注重。在目前国内对 此领域研究甚少的情况下，将网页艺术设计与其他

4、艺术设计形式进行 比较，尝试从网页艺术设计的内容、原则和特点等三个方面，对这个 新的艺术设计领域进行初步的归纳总结和理论探讨。 作者认为网页艺 术设计是艺术与技术的高度统一，指出网页艺术设计包含视听元素与 版式设计两项内容；以主题鲜明、形式与内容相统一、强调整体为设 计原则；具有交互性与持续性、多维性、综合性、版式的不可控性、 艺术与技术结合的紧密性等五个特点。在明确了网页艺术设计与网站 主题的关系的基础上，提出了 “美”和“功能”都是为了更好地表达 网站主题这一观点。网页艺术设计是伴随着计算机互联网络的产生而 形成的视听设计新课题，是网页设计者以所处时代所能获取的技术和 艺术经验为基础，依照

5、设计目的和要求自觉地对网页的构成元素进行 艺术规划的创造性思维活动，必然要成为设计艺术的重要组成部分， 并随着网络技术的发展而发展。 表面上看，它不过是关于网页版式编 排的技巧与方法，而实际上，它不仅是一种技能，更是艺术实训意义本实训目的：通过本次实习对自主网站的设计，使我们熟练应用HTM而记语言设计制作网页、熟练应用 Dreamveaver网页设计软件，使我们对 html5+css3所学的内容有一个系统的理解和掌握。在制作过程中，主要掌握对网页的布局、色彩的搭配、框架的应用、层的运用、行为 的实现、表单的使用、模板和库的应用等，完成作品。综合实训的目的：Web静态主题网站设计主要目的是让我们

6、通过这门实践课程的学习 了解和掌握网页设计的基本方法，通过不断上机实习训练达到解决实 际的问题。因此，在本学期特设置此课程设计，集中一段时间使学生 综合运用所学习的网页制作知识及以前所学习的计算机方面的知识， 按照网站制作的流程，完成一个相对具体、综合的网站，全面巩固学 生的知识，培养学生解决实际问题的能力，从而达到学以致用的。对个人的要求我们每个人都应通过本次实训项目课程的学习， 培养自己系统、完整、 具体地完成网站设计所需的工作能力，通过信息收集处理、方案决策、 制定行动计划、实施计划任务和自我检查评价的能力训练， 锻炼学生 在职场应有的工作能力。每个学生经历完整个网站设计开发的训练， 将

7、掌握完成实际网站设计应具备的核心能力和关键能力。具体要求如下：1,充分了解本指导手册规定拟填写的各项网站设计各阶段的作业文 件与作业记录。2,充分了解自己的学习能力，针对拟完成网站的设计功能要求与规范， 查阅资料，了解相关网站设计的技术情况。.在学习过程中，认真负责，在关键问题与环节上下功夫，充分发 挥自己的主动性、创造性来解决技术上与工作中的问题。.认真填写与撰写从资讯、方案、计划、检查到评估各阶段按规范 要求完成的相关作业文件与工作记录，并学会根据学习与工作过程的 作业文件和记录及时反省与总结。内容的设计及制作一、策划阶段：一阶段的主要任务是收集、研究和分析用户需求，讨论 Web内容，制

8、定计划。二、设计阶段网站形象设计：主要包括设计网站的标志（logo）,设计网站的标准色彩，设计网站 的标准字体。网站主题及风格设计，从主题策划到网站风格创意等内 容。网站内容设计：清晰性：网站内容必须简洁明了，直奔主题，非常有效地讲清楚你 想说的内容。创造性：网站观点会使访问者产生共鸣，发出认同吗？这可以是访 问者判断一个公司是否有实力，从而影响到购买动机的重要因素。突出三个重点：突出你的产品的优点和与众不同的特色； 突出帮助访 问者辨别、判断同类产品优劣方面的内容，出内容的无庸置疑的正确 性。网站技术因素考虑：浏览器脚本兼容性。面对屏幕分辨率的适应。网是否需要交互操作页面设计页面的平铺展示：

9、主要的物件有：导航栏、LOGO Banner、按钮、图片、文字。LOGO:logo是每个网站多要有的，他是网站为了给大家一个比较直观的信息的表达工具。LOGO勺位置通常在页面的左上角。这个地方最明显和直观，可以第一时间给人于默化的效果。字体图片背景的搭配：体图片的搭配要直观，尽量不要撞色太严重，要考虑字迹清楚，色彩 简单一些，不要超过四种。页面的分割要显见。导航：此次选用的是简单直观的静态导航，HOM EPRODUC SERVEABOUME 子网页的设计：为了保证页面的统一性和美观，子网页的统一性也是 很有必要的，简单的布局就是内容的明了直接的展示。其他：.有共性，才有统一，有细节区别，就有层

10、次。.防止设计与实现过程中的偏差，不要定死具体要放多少条信息.设计的各部分，要配合整体风格，夸张一点好像。.不仅页面上各项设计要统一，而且网站的各级别页面也要统一.保持页面的透气性。.符合人类的审美设计！主页和部分页面展示主页我们采用的是简约商务的风格让人一看就很有质感的，交代了网页的大概内容以及整体风格还有网ABOUT MEPRODUCT站的名字，让人一眼明了导航栏采用文字及背景的渐变，简约大气不失风格。PRODUCTABOUT MEPRODUCE面的整体布局采用横向排序，为了方便以后增加产品而留有增加的空间，简约的Flash动画也进一步体现出网站整体的品味!简单的一个小动画起到了装饰页面和

11、分割页面的作用为了保证每个字页面的统一性，而特意设计的页面，文字的清晰介绍以及高清的图片查看功能，而取消返回首页这个选项而设置在巧妙的位置也是一成功力做!SERV血面提供所需的一些服务，一些需要的资源，以及售后的联系,1，嚏方捏伴睢力的乐期!田瞪过山军.工被困?医能舌生还人与专尸的靴.情者出去卿期小纵!还有物流的查询4,加域和I .曲不孰臼甲F战“5,朝也不需诅塞个显喻&,抖怪歌立走，陶器砂乐10 1 1 litPRODUCTABOUT MEABOUT MEABOUT M反面介绍了我们是一个怎样的团队，不做没理想的咸鱼, 这艺网是一个艺术与交流的聚集地， 论坛功能正在筹建中，你可以在 下方选择

12、加入我们这个有理想的团队，来一起质疑那些嘲笑的眼光。这是艺术!11部分代码(div claszlt-M2*imc ;rc=uidcey 12icitssdtlt-383 licieht=460T uut5=rj1l加二” boidccsii1En itea Mhap*p二口产are3 zhe-*pzlyr ，虹Kfr3 39kglFareaentds= 1吕L 2NT, 2S5, 45/355, 129rt href=vzi 1, htnl* coord jfi 品自 233,醛前之*cootdz=*160p 232STs A&D, S0s432* href-wE* Mm工8Ag”】6瓦虑17

13、瓦4歹hioKN证心口成二B L 72% 31-1 J 22T* hrT料orC lickr Wt-TpupMs-不早每餐也都可包奈故,尸HOME.html x源代码3具，csssvfobject.micdified. js；厂代码I拆分|设计 买时幽 电 U心 曜）标题cnarset/* CSS Dacument */ body (fcacKgsoundcolor: #454545; . top margin-top: SOpx:ntargin-right: lOOpx;margin-left: IQOpx；height： GOpnj.zhenti (heiJht: BOQpx;width

14、t 12QQpx;页面布局采用CSS样式表的类样式和 养成自己的一个习惯。ID样式，方便以后的更改以及504c Iiieigh.t; : 35 Opx;,52vritStU; W 16Px ;亭7 1float:left;J 53囹55mar g-ia-le f t: 5px;.;立 S6#i (0 57Jiei g-fa-t; : 3 5 Opx?Q 5Swidth：20px;1=0 59fIcac:left;r-60二 61margin-le fu: 5px;0 6?t e 1 63hei ytit ： 35 Opx;后1后勺width.: 2 0p-x;L e5float:lef t;由

15、 66rrrgin-le f c ： 5px;36?二-ke,groodl (=69color: +D6D0CF;尊一7112不是每朵花都可以绽放!CUjilIl Lzif/ W. 1 aiH e)k工；ipt工叩界二窗再洲asc工ipT，qHpr：j?.z ipt i-iSryLEset 对口邛kten/1 却谀工i.i” ./seuptipt t 用专二 ,t !，j sm ci ipt * J。0m5311一点口总10匕熊(1配如11萌像11如一Ui；. Cidiu tg l网la LhG在近囱m w丸uE泡.H Jp. / . . h”朗tikizTh 止二皿 皿凯icfg E工皿 I

16、cjl, to: to, toilet 1口叮卜.le-fiEsiLt：龙鱼回总讨配 pcfZettei： &二兄京/讨匕fwlicui*其M/riuF心必於事前Hm就L d址上li：1cEf逅l l啾】力二:.工上，.LFdlJ- (t-iEietiliaIltp |i_4tlQlL： duLdtlLf Eiqae ftJL, M: toP 1 叫,filiw叫硼幽说。!式算t With1q-M%Flash插入的代码由廿吼-Pt lXf!hmr int err Mg即中，Eg m 曲忙H 同T MithtaPiF alr=F& c/4if也心 ；呜小重匕。141,1国比 IKBi IXBi

17、ICW,国门匕口5广？*心r.div ElfdSiD&ar Kkzci./ffJia ! ：b曲昼京尾出 W_仲虚&渣用，吃 tt* JF-M fciiTi r 1 ?击后门了二r”irr. q* :T|L.l1.：iu|r q f *布制= ATl R 卡 , i ,r至也匕向用同,ML主至可庭转,寸L -iL3不.，L/雷力喃III军PI上旧工，qHRrl用印率h止0 ：”a T FT 同M。语，hE 匕里式 印犯如空为）旭/爵工眉3,U五郎*加七丘!1/己一帜中叫（瓯”仍町而且晦超孑晶匍lie加国凯”陀士日:m ：.ir白 tni|. YId I-if.广 飞 i htf-JFRW 加厂

18、门”( iqhi+、？/=.p/Fidt-TElMiijLdi-W 丁 3td vldt扣1rSD丁 g：-fiEt 4图10=口0H乳卡通 Imfxljniarein Aim就omslgjqdYUJMLapk”：1全力值寸%：1；1和小集！ 0津 屯山左口 k4Vfli tM-Bkbdm. ,33T.i4f -MlMidL |tdVT, ItfEI；IO? ft9 人与哀尸倒驰作 ftfl4rlE!Vtr快Ctd Mi.TfK4rxsMwFgKir3.“3e hr emtd fill. .jt=4IB，i -冷5 UkE2 = E T -i| -：,2psUi：- ： Si feJ：St=，

19、1 11-=11Ul 2fi1 HJ. SiRfcJ MC 3h ft 1fll dCtd hAlght=a4D*Xlfrui z3-a.-(l-l-J. .-5. /4W 3，一，.1 Yb FL#-NKf H, 丁沏hHiiiT T N 时方器r -力电甘*仃 M Vtr整个网站唯一的一处表格和层的布局rfiL= yTyjRKh.Rt tyr p= trk*/ ck51 ， Iintc hirRr= csa/prb nss 部Diul posit ion; absolute. widths 13 L px height ： L L5p ;s-ind&s ： L .Iffft! 25lpto

20、p： ZTJpi1 f134 . ; _.i-b r要求主页的要求对于商务方面，系统要求运行的工作环境稳定，易于操作，界面美观 大方，对于前台展示界面要求系统便于维护，安全可靠，对于广大客 户所要执行的操作简单易懂，远程访问速度较快，界面友好美观，有 基本的错误提醒功能，远程操作数据库正确，要求和客户有一定的互 动性，在主页上直观的就可以查看浏览者所想要了解的东西。PRODCT的要求简单明了直观独特的见解色彩的搭配ABOUT ME的要求清晰的介绍自己的团队，团队的风格以及网站的规划和要求。14测试站点站点各个方面无问题，经测试上传到网页，网址为后期维护：布局的要求完全为了考虑后期的增删改查。功

21、能模块：后期可以实现数据库的链接一些交互式的功能。15参考文献百度文库文献系列16个人小结在这次实训中我学会了网页设计的一般步骤以及所需的软件和 一些没有实践过的知识，开阔了自己的见解，这对以后的设计生涯是 绝对有帮助的，以后想到当时自己的无从下手到最后的相互讨论得出 一个让人满意的布局，这个过程是值得记住的。因特网上的网页主体不胜枚举。主题的选择取决于网页的内容，人们一般不会去选择自己感到陌生的主题， 而是选择某一个自己最感 兴趣，或者是非常熟悉的内容来作为网页的主题， 当然专业的网页制 作公司除外。所以我们决定制作一个简单的商务类型的网站， 麻雀虽 小五脏俱全，布局充分考虑了以后的天劫和修

22、改。制作一个网站的开始就是站点站点的结构好比是建造高楼大厦 之前的图纸设计。规划占点就是将站点中每一个网页用树型结构列出 来，网页的内容可以省略，只要大体说明其要展示的内胎即可。规划好站点的总体结构以后，还应该对站点中每一页的栏目、布 局等作更进一步的设计。收集和加工素材如果说站点是一栋高楼大厦，那么素材就是建造大厦的材料。建 造大厦的材料有些可以直接拿来用，而有些材料需要经过加工或者整 合以后才能使用。同样道理，为制作网页而收集的素材有些可以直接 使用有些却要借助其他软件加工处理后才能适合网页内容的需要。素才的内容主要有文字、图片、动画、声音、视频、程序等。江17 收集到的素材分门别类存放起

23、来，需要时可以很快找到。制作网页在完成了设计后，实际上，制作网页就是将收集和加工后的素材 添加到事先规划设计好的网页中去， 或者说制作网页就是将文字、图 片、动画、声音、视频、程序等素材按照设计的要求合成起来。在原 有的设计基础上可以进行增删改（以不破坏为原则），更好的应用布 局和所学工具对页面的优化。制作完网页阶段之后，应该对网页做全面的检测，包括检查网页 内容的科学性、版面编排的合理性、超链接的正确性以及对网页的内 容作适当的增减等。一个有错误内容的网页时浏览者所不能容忍的， 一个编排布局混乱的网页不会引起浏览者多大的兴趣，一个有超链接错误的网页则会给浏览者带来很多麻烦。制作网页的目的是要

24、将网页发布到网上， 让更多的浏览者来访问 发布的站点，因此发布网页这一环节必不可少， 否则失去了制作网页 的意义。综上所述，要制作出富于创意的网页，设计阶段非常重要。事实 上，一个网站从设计到制作，再到发布的整个过程中，大部分的精力 和时间花在设计阶段。即使在制作阶段，很多时候也会根据实际需要 对原有的设计做一些修改但是如果说是对设计有什么不满的地方那 就只可以说道不同18我觉得实训就是对所学知识的一种检验，网页设计所检验的并不 只是工具的应用更多的是自己的想法独特的想法，如果停留在那些四 四方方的布局毫无新意的页面就失去了该有的意义！夏前伟140271310919通过这次实训，我收获了很多，

25、一方面学习到了许多以前没学过 的专业知识与知识的应用，另一方面还提高了自己动手做项目的能力。 本次实训，是对我能力的进一步锻炼，也是一种考验。从中获得的诸 多收获，也是很可贵的，是非常有意义的。在实训中我学到了许多新的知识。是一个让我把书本上的理论知 识运用于实践中的好机会，原来，学的时候感叹学的内容太难懂，现 在想来，有些其实并不难，关键在于理解。在这次实训中还锻炼了我其他方面的能力， 提高了我的综合素质。 首先，它锻炼了我做项目的能力，提高了独立思考问题、自己动手操 作的能力，在工作的过程中，复习了以前学习过的知识，并掌握了一 些应用知识的技巧等。其次，实训中的项目作业也使我更加有团队精

26、神。从那里，我学会了下面几点找工作的心态：一、继续学习，不断提升理论涵养。在信息时代，学习是不断地汲取新信息，获得事业进步的动力。作为一名青年学子更应该把学 习作为保持工作积极性的重要途径。走 上工作岗位后，我会积极响应单位号召，结合工作实际，不断学习理 论、业务知识和社会知识，用先进的理论武装头脑，用精良的业务知 识提升能力，以广博的社会知识拓展视野。二、努力实践，自觉进行角色转化。只有将理论付诸于实践才能实现理论自身的价值,也只有将理论20付诸于实践才能使理论得以检验同样，一个人的价值也是通过实践活动来实现的，也只有通过实践才能锻炼人的品质，彰显人的意志。必须在实际的工作和生活中潜心 他全

27、，并自觉的进行这种角色的转 换。三、提高工作积极性和主动性实习，是开端也是结束。展现在自己面前的是一片任自己驰骋的 沃土，也分明感受到了沉甸甸的责任。在今后的工作和生活中，我将 继续学习，深入实践，不断提升自我，努力创造业绩，继续创造更多 的价值。我认为大学生实习难，就业难，除非你有关系，能给你轻松找到 工作，否则就难逃市场选择的厄运。我在该公司实习总结了五个攻略, 只能智勇双全，才能在这个社会中出人头地。首先确定主题，找对目标。实训的第一节课先设计好网站的类型规则， 我们设计的是一款关 于旅行方面的物品的网站，对待这个问题要快、准、狠，不要拖拖拉拉，犹豫不决。确定好 主题以后该思考要在网站上

28、面上架那些物品，这个需要先调查一下现 在主流的旅行物品的需求量，通过互联网和身边的调查然后在做决定。构造结构框架。规划好网站是做什么的就好办了，接下来这一步师非常关键的一 步，因为一个好的网站无论是网站的布局和色彩以及总体都对用户访21 问这个网站起着至关重要的一个决定，所以在这方面我们选择了反其 道而行之的简约界面，我们的这个界面不同那些普遍的大网站一样， 他们内容很多，很复杂，连接几百个甚至更多更多，画面也花花绿绿 的，但是我们觉得这样的网站反而显得太乱， 于是我们决定好了结构 框架。后台数据处理。基本界面已经设计好了，接下来就是见证奇迹的时刻了，在网站 中我们看到的甚少甚少，最厉害的还是

29、那些我们看不到的后台数据， 那些虽然我们看不到但是反而更加复杂难以理解， 这一步也至关重要, 设计好每一步的连接数据，每个图片的跳转，窗口的弹出关闭等，这 样一个基本的网站已经成型了，最后就是看看哪里不好修改修改， 然 后就可以完成了。We Are A Team !胡维国140271310422我在这次实训中担任的是图片处理和 flash动画制作以及子网页 的制作工作，运用ps对需要用到的图片进行相应的效果处理，保存 在相应的图片文件夹内，在制作flash动画的时候出现了一些小的问 题，我保存flash动画文件的时候名字做成了默认的文件名， 结果在 插入动画的时候在浏览器中预览不出来， 最后通

30、过查阅资料把这个问 题给解决了，我用css样式进行了自己的子网页页面布局， 以及对图 像的插入，通过类样式对产品进行文字说明，并且插入相应的鼠标特 效，来吸引眼球。通过这次实训对这门课程的学习， 做好主页，并不是一件容易的 事，它包括个人主页的选题、内容采集整理、图片的处理、页面的排 版设置、背景及其整套网页的色调等很多东西。所以我得出一下总结：一、准备资料和挑选符合目的主题的合适素材做主页当然要收集、准备资料。在网上多转转，看到什么漂亮的 网页，把它保存起来，作为以后自己设计主页时的参考。另外，还包 括搜集美化主页可能要用到的各种材料，如背景、小动画图标等等。 你可以在硬盘上建一个文件夹，下

31、分“图片、声音、动画”等文件夹， 养成上网时看到有创意、新鲜的图像，就按鼠标右键存入你硬盘相应 文件夹的习惯，时间一长你就有拥有了一个可观的图库， 等做主页时 随手拈来或加以修改就成你自己的东西了。二、规划好整个网站主页的设计应以醒目优先，应该令人一目了然，切勿堆砌太多不23 必要的细节，或使画面过于复杂。切记，页面给人的第一观感最为重 要！在网上到处浏览网站的人很多，如果你的主页给人的第一印像没 有吸引力，很难令他们深入观赏，而且他们恐怕再也不会访问你的网 站了。三、善用图片，增强艺术效果我记得老师说过网页的迷人之处之一，要算它上面能点缀许多漂 亮的图片。精美的图片设计，可以使自己的网页增辉不少，令人过目 不忘。图片的内容应有一定的实际作用，切忌虚饰浮夸，同时还要注 意与文字的颜色搭配。最佳的图像集美观与资讯于一身。四、要多次使用不同的浏览器进行预览在做品完成之后，要多次对自己的网站进行测试，在不同的浏览 器中进行尝试效果，以达到手机和电脑上不同的浏览器中都能完整的 体现出网站的内容。海继昌140271310324这次实训我们主要是练习网页制作及网站发布的各种知识Dreamweaver工具为我们实现这些提供了便利，下面我将网页制作和 网站发布的知识总结如下：(1)网页制作的前期工作是搜集大量的素材，我们的网页