静态网页实训报告

1、 计算机软件学院实训报告Web静态主题网站设计姓名：夏前伟 胡维国 海继昌 陈佑宏学号： 09 04 03 02专业：电子商务班级：电商1413时间：任课教师：梁菊华目录前言2实训意义3本实训目的：3综合实训的目的：3对个人的要求4具体要求如下：4内容的设计及制作5一、策划阶段：5二、设计阶段网站形象设计：5清晰性：5创造性：5网站技术因素考虑 ：5页面设计6页面的平铺展示：6LOGO：6字体图片背景的搭配：6导航：6其他：6主页和部分页面展示7部分代码12要求14主页的要求14PRODCT的要求14ABOUT ME的要求14测试站点15后期维护：15功能模块：15参考文献16个人小结17夏前

2、伟19胡维国22海继昌24陈佑宏27前言随着时代的发展，网站建设越来越接近于一门艺术而不仅仅是一项技术。网页的艺术设计，日益被网站建设者所注重。在目前国内对此领域研究甚少的情况下，将网页艺术设计与其他艺术设计形式进行比较，尝试从网页艺术设计的内容、原则和特点等三个方面，对这个新的艺术设计领域进行初步的归纳总结和理论探讨。作者认为网页艺术设计是艺术与技术的高度统一，指出网页艺术设计包含视听元素与版式设计两项内容；以主题鲜明、形式与内容相统一、强调整体为设计原则；具有交互性与持续性、多维性、综合性、版式的不可控性、艺术与技术结合的紧密性等五个特点。在明确了网页艺术设计与网站主题的关系的基础上，提出

3、了“美”和“功能”都是为了更好地表达网站主题这一观点。 网页艺术设计是伴随着计算机互联网络的产生而形成的视听设计新课题，是网页设计者以所处时代所能获取的技术和艺术经验为基础，依照设计目的和要求自觉地对网页的构成元素进行艺术规划的创造性思维活动，必然要成为设计艺术的重要组成部分，并随着网络技术的发展而发展。表面上看，它不过是关于网页版式编排的技巧与方法，而实际上，它不仅是一种技能，更是艺术实训意义本实训目的：通过本次实习对自主网站的设计，使我们熟练应用HTML标记语言设计制作网页、熟练应用Dreamveaver网页设计软件，使我们对html5+css3所学的内容有一个系统的理解和掌握。 在制作过

4、程中，主要掌握对网页的布局、色彩的搭配、框架的应用、层的运用、行为的实现、表单的使用、模板和库的应用等，完成作品。 综合实训的目的：Web静态主题网站设计主要目的是让我们通过这门实践课程的学习了解和掌握网页设计的基本方法，通过不断上机实习训练达到解决实际的问题。因此，在本学期特设置此课程设计，集中一段时间使学生综合运用所学习的网页制作知识及以前所学习的计算机方面的知识，按照网站制作的流程，完成一个相对具体、综合的网站，全面巩固学生的知识，培养学生解决实际问题的能力，从而达到学以致用的。对个人的要求我们每个人都应通过本次实训项目课程的学习，培养自己系统、完整、具体地完成网站设计所需的工作能力，通

5、过信息收集处理、方案决策、制定行动计划、实施计划任务和自我检查评价的能力训练，锻炼学生在职场应有的工作能力。每个学生经历完整个网站设计开发的训练，将掌握完成实际网站设计应具备的核心能力和关键能力。具体要求如下： 1.充分了解本指导手册规定拟填写的各项网站设计各阶段的作业文件与作业记录。 2.充分了解自己的学习能力，针对拟完成网站的设计功能要求与规范，查阅资料，了解相关网站设计的技术情况。 3.在学习过程中，认真负责，在关键问题与环节上下功夫，充分发挥自己的主动性、创造性来解决技术上与工作中的问题。 4.认真填写与撰写从资讯、方案、计划、检查到评估各阶段按规范要求完成的相关作业文件与工作记录，并

6、学会根据学习与工作过程的作业文件和记录及时反省与总结。内容的设计及制作一、策划阶段：一阶段的主要任务是收集、研究和分析用户需求，讨论Web内容，制定计划。 二、设计阶段网站形象设计：主要包括设计网站的标志（logo），设计网站的标准色彩，设计网站的标准字体。网站主题及风格设计，从主题策划到网站风格创意等内容。网站内容设计：清晰性：网站内容必须简洁明了，直奔主题，非常有效地讲清楚你想说的内容。 创造性：网站观点会使访问者产生共鸣，发出认同吗？这可以是访问者判断一个公司是否有实力，从而影响到购买动机的重要因素。 突出三个重点：突出你的产品的优点和与众不同的特色；突出帮助访问者辨别、判断同类产品优劣

7、方面的内容，出内容的无庸置疑的正确性。网站技术因素考虑 ：浏览器脚本兼容性。面对屏幕分辨率的适应。网是否需要交互操作。页面设计页面的平铺展示：主要的物件有：导航栏、LOGO、Banner、按钮、图片、文字。LOGO： logo是每个网站多要有的，他是网站为了给大家一个比较直观的信息的表达工具。LOGO的位置通常在页面的左上角。这个地方最明显和直观，可以第一时间给人于默化的效果。字体图片背景的搭配： 体图片的搭配要直观，尽量不要撞色太严重，要考虑字迹清楚，色彩简单一些，不要超过四种。页面的分割要显见。导航：此次选用的是简单直观的静态导航，HOME，PRODUCT，SERVE，ABOUT ME。子

8、网页的设计：为了保证页面的统一性和美观，子网页的统一性也是很有必要的，简单的布局就是内容的明了直接的展示。其他：1.有共性，才有统一，有细节区别，就有层次。 2.防止设计与实现过程中的偏差，不要定死具体要放多少条信息。 3.设计的各部分，要配合整体风格，夸张一点好像。 4.不仅页面上各项设计要统一，而且网站的各级别页面也要统一。5.保持页面的透气性。6.符合人类的审美设计！主页和部分页面展示主页我们采用的是简约商务的风格。让人一看就很有质感的，交代了网页的大概内容以及整体风格还有网站的名字，让人一眼明了。导航栏采用文字及背景的渐变，简约大气不失风格。PRODUCT页面的整体布局采用横向排序，为

9、了方便以后增加产品而留有增加的空间，简约的Flash动画也进一步体现出网站整体的品味！简单的一个小动画起到了装饰页面和分割页面的作用。为了保证每个字页面的统一性，而特意设计的页面，文字的清晰介绍以及高清的图片查看功能，而取消返回首页这个选项而设置在巧妙的位置也是一成功力做！SERVE页面提供所需的一些服务，一些需要的资源，以及售后的联系，还有物流的查询。ABOUT ME页面介绍了我们是一个怎样的团队，不做没理想的咸鱼，这艺网是一个艺术与交流的聚集地，论坛功能正在筹建中，你可以在下方选择加入我们这个有理想的团队，来一起质疑那些嘲笑的眼光。这是艺术！部分代码不是每朵花都可以绽放！页面布局采用css

10、样式表的类样式和ID样式，方便以后的更改以及养成自己的一个习惯。Flash插入的代码。字体的整体美观度，以及排版的统一要求。整个网站唯一的一处表格和层的布局。要求主页的要求 对于商务方面，系统要求运行的工作环境稳定，易于操作，界面美观大方，对于前台展示界面要求系统便于维护，安全可靠，对于广大客户所要执行的操作简单易懂，远程访问速度较快，界面友好美观，有基本的错误提醒功能，远程操作数据库正确，要求和客户有一定的互动性，在主页上直观的就可以查看浏览者所想要了解的东西。PRODCT的要求简单明了直观独特的见解色彩的搭配ABOUT ME的要求清晰的介绍自己的团队，团队的风格以及网站的规划和要求。测试站

11、点站点各个方面无问题，经测试上传到网页，网址为后期维护：布局的要求完全为了考虑后期的增删改查。功能模块：后期可以实现数据库的链接一些交互式的功能。参考文献百度文库文献系列个人小结在这次实训中我学会了网页设计的一般步骤以及所需的软件和一些没有实践过的知识，开阔了自己的见解，这对以后的设计生涯是绝对有帮助的，以后想到当时自己的无从下手到最后的相互讨论得出一个让人满意的布局，这个过程是值得记住的。因特网上的网页主体不胜枚举。主题的选择取决于网页的内容，人们一般不会去选择自己感到陌生的主题，而是选择某一个自己最感兴趣，或者是非常熟悉的内容来作为网页的主题，当然专业的网页制作公司除外。所以我们决定制作一

12、个简单的商务类型的网站，麻雀虽小五脏俱全，布局充分考虑了以后的天劫和修改。 制作一个网站的开始就是站点站点的结构好比是建造高楼大厦之前的图纸设计。规划占点就是将站点中每一个网页用树型结构列出来，网页的内容可以省略，只要大体说明其要展示的内胎即可。 规划好站点的总体结构以后，还应该对站点中每一页的栏目、布局等作更进一步的设计。收集和加工素材 如果说站点是一栋高楼大厦，那么素材就是建造大厦的材料。建造大厦的材料有些可以直接拿来用，而有些材料需要经过加工或者整合以后才能使用。同样道理，为制作网页而收集的素材有些可以直接使用有些却要借助其他软件加工处理后才能适合网页内容的

13、需要。 素才的内容主要有文字、图片、动画、声音、视频、程序等。江收集到的素材分门别类存放起来，需要时可以很快找到。     制作网页 在完成了设计后，实际上，制作网页就是将收集和加工后的素材添加到事先规划设计好的网页中去，或者说制作网页就是将文字、图片、动画、声音、视频、程序等素材按照设计的要求合成起来。在原有的设计基础上可以进行增删改（以不破坏为原则），更好的应用布局和所学工具对页面的优化。制作完网页阶段之后，应该对网页做全面的检测，包括检查网页内容的科学性、版面编排的合理性、超链接的正确性以及对网页的内容作适当的增减等。

14、一个有错误内容的网页时浏览者所不能容忍的，一个编排布局混乱的网页不会引起浏览者多大的兴趣，一个有超链接错误的网页则会给浏览者带来很多麻烦。 制作网页的目的是要将网页发布到网上，让更多的浏览者来访问发布的站点，因此发布网页这一环节必不可少，否则失去了制作网页的意义。综上所述，要制作出富于创意的网页，设计阶段非常重要。事实上，一个网站从设计到制作，再到发布的整个过程中，大部分的精力和时间花在设计阶段。即使在制作阶段，很多时候也会根据实际需要对原有的设计做一些修改但是如果说是对设计有什么不满的地方那就只可以说道不同。我觉得实训就是对所学知识的一种检验，网页设计所检验的并不只是工具的应用更多

15、的是自己的想法独特的想法，如果停留在那些四四方方的布局毫无新意的页面就失去了该有的意义！夏前伟1402713109通过这次实训，我收获了很多，一方面学习到了许多以前没学过的专业知识与知识的应用，另一方面还提高了自己动手做项目的能力。本次实训，是对我能力的进一步锻炼，也是一种考验。从中获得的诸多收获，也是很可贵的，是非常有意义的。在实训中我学到了许多新的知识。是一个让我把书本上的理论知识运用于实践中的好机会，原来，学的时候感叹学的内容太难懂，现在想来，有些其实并不难，关键在于理解。在这次实训中还锻炼了我其他方面的能力，提高了我的综合素质。首先，它锻炼了我做项目的能力，提高了独立思考问题、自己动手

16、操作的能力，在工作的过程中，复习了以前学习过的知识，并掌握了一些应用知识的技巧等。其次，实训中的项目作业也使我更加有团队精神。从那里，我学会了下面几点找工作的心态：一、继续学习，不断提升理论涵养。  在信息时代，学习是不断地汲取新信息，获得事业进步的动力。作为一名青年学子更应该把学习作为保持工作积极性的重要途径。走上工作岗位后，我会积极响应单位号召，结合工作实际，不断学习理论、业务知识和社会知识，用先进的理论武装头脑，用精良的业务知识提升能力，以广博的社会知识拓展视野。  二、努力实践，自觉进行角色转化。  只有将理论付诸于实践才能实

17、现理论自身的价值，也只有将理论付诸于实践才能使理论得以检验。同样，一个人的价值也是通过实践活动来实现的，也只有通过实践才能锻炼人的品质，彰显人的意志。必须在实际的工作和生活中潜心体会，并自觉的进行这种角色的转换。  三、提高工作积极性和主动性  实习，是开端也是结束。展现在自己面前的是一片任自己驰骋的沃土，也分明感受到了沉甸甸的责任。在今后的工作和生活中，我将继续学习，深入实践，不断提升自我，努力创造业绩，继续创造更多的价值。我认为大学生实习难，就业难，除非你有关系，能给你轻松找到工作，否则就难逃市场选择的厄运。我在该公司实习总结了五个攻略，只能智勇双全

18、，才能在这个社会中出人头地。首先确定主题，找对目标。实训的第一节课先设计好网站的类型规则，我们设计的是一款关于旅行方面的物品的网站，对待这个问题要快、准、狠，不要拖拖拉拉，犹豫不决。确定好主题以后该思考要在网站上面上架那些物品，这个需要先调查一下现在主流的旅行物品的需求量，通过互联网和身边的调查然后在做决定。构造结构框架。规划好网站是做什么的就好办了，接下来这一步师非常关键的一步，因为一个好的网站无论是网站的布局和色彩以及总体都对用户访问这个网站起着至关重要的一个决定，所以在这方面我们选择了反其道而行之的简约界面，我们的这个界面不同那些普遍的大网站一样，他们内容很多，很复杂，连接几百个甚至更多

19、更多，画面也花花绿绿的，但是我们觉得这样的网站反而显得太乱，于是我们决定好了结构框架。后台数据处理。基本界面已经设计好了，接下来就是见证奇迹的时刻了，在网站中我们看到的甚少甚少，最厉害的还是那些我们看不到的后台数据，那些虽然我们看不到但是反而更加复杂难以理解，这一步也至关重要，设计好每一步的连接数据，每个图片的跳转，窗口的弹出关闭等，这样一个基本的网站已经成型了，最后就是看看哪里不好修改修改，然后就可以完成了。We Are A Team !胡维国1402713104我在这次实训中担任的是图片处理和flash动画制作以及子网页的制作工作，运用ps对需要用到的图片进行相应的效果处理，保存在相应的图

20、片文件夹内，在制作flash动画的时候出现了一些小的问题，我保存flash动画文件的时候名字做成了默认的文件名，结果在插入动画的时候在浏览器中预览不出来，最后通过查阅资料把这个问题给解决了，我用css样式进行了自己的子网页页面布局，以及对图像的插入，通过类样式对产品进行文字说明，并且插入相应的鼠标特效，来吸引眼球。通过这次实训对这门课程的学习，做好主页，并不是一件容易的事，它包括个人主页的选题、内容采集整理、图片的处理、页面的排版设置、背景及其整套网页的色调等很多东西。所以我得出一下总结：一、 准备资料和挑选符合目的主题的合适素材做主页当然要收集、准备资料。在网上多转转，看到什么漂亮的网页，把

21、它保存起来，作为以后自己设计主页时的参考。另外，还包括搜集美化主页可能要用到的各种材料，如背景、小动画图标等等。你可以在硬盘上建一个文件夹，下分“图片、声音、动画”等文件夹，养成上网时看到有创意、新鲜的图像，就按鼠标右键存入你硬盘相应文件夹的习惯，时间一长你就有拥有了一个可观的图库，等做主页时随手拈来或加以修改就成你自己的东西了。二、 规划好整个网站主页的设计应以醒目优先，应该令人一目了然，切勿堆砌太多不必要的细节，或使画面过于复杂。切记，页面给人的第一观感最为重要！在网上到处浏览网站的人很多，如果你的主页给人的第一印像没有吸引力，很难令他们深入观赏，而且他们恐怕再也不会访问你的网站了。三、

22、善用图片，增强艺术效果我记得老师说过网页的迷人之处之一，要算它上面能点缀许多漂亮的图片。精美的图片设计，可以使自己的网页增辉不少，令人过目不忘。图片的内容应有一定的实际作用，切忌虚饰浮夸，同时还要注意与文字的颜色搭配。最佳的图像集美观与资讯于一身。四、要多次使用不同的浏览器进行预览在做品完成之后，要多次对自己的网站进行测试，在不同的浏览器中进行尝试效果，以达到手机和电脑上不同的浏览器中都能完整的体现出网站的内容。海继昌1402713103这次实训我们主要是练习网页制作及网站发布的各种知识。Dreamweaver工具为我们实现这些提供了便利，下面我将网页制作和网站发布的知识总结如下：（1）网页制作的前期工作是搜集大量的素材，我们的网页只有是实用的才会是大众喜欢的，搜集素材以充实我们的网页。当然我们也应该在此时定下网站的方向是什么，剩下的就是靠Dreamweaver进行编辑。（2）网页的版式设计，版式设计时我们应该有重点，把重要的内容新闻放在醒目的位置上。规划各元素在网页中的位置关系和表现方法，合理安排图像、文本等元素，使网页布局合理、美观大方。（3）文本编写，我们的网页中需要大量的文字材料，这就要在网页编辑器中用HTML语言中的标签编写。也可以利用网页编辑工具的“所见即所得”功能，直接写入文字。在浏览器中运行时出现冗余代码时返回代码页面重新进行查看修改。