首页 > 文库大全 > 精品范文库 > 4号文库

网页实训报告

网页实训报告



第一篇:网页实训报告

日照职业技术学院

网页实训报告

学号:

姓名:

班级:

实训日期:

指导老师:

X年X 月 X 日

个人博客

一、实训目的与要求

目的:通过实训让同学们对网页有更深一步的了解,培养学生的动手能力,提高学生运用HTML语言编写静态网页能力的水平,掌握HTML和CSS语言的应用,为学生学习动态网页打下坚实的基础,通过实训可以达到全面理解、运用网页制作的知识,并使之得以融会贯通,在掌握理论的基础上再加以实践,进一步提高、加强学生的综合能力,把本学期学到的东西都运用起来达到一定的技术性、创意性,让其更美观。

(1)掌握创建Dreamweaver本地站点的方法,利用表格和层规划网页布局

(2)掌握在网页中添加文本、图像、Flash动画等页面元素

(3)掌握在网页中输入、设置标题和正文文字的方法。

(4)掌握在Dreamweaver中建立链接

(5)综合运用所学软件进行网页材料的准备

要求:掌握网页设计基本概念和HTML的基本结构,了解网页技术概况、HTML的编辑和运行环境,掌握文字版面的编辑,掌握网页的超链接技术的应用,了解图像的处理。包括背景图案、图形、图像及其超链接等的设定和应用。了解列表的各种使用,了解表格的基本语法,掌握表格的定义、控制、分组、标题等的应用。了解表单在网页中的应用,了解如何在网页中加入各种动态效果,了解网页中CSS的基础知识。掌握CSS的各种属性应用。最后根据自己的兴趣,设计一个个人站点或介绍一个集体的小网站,围绕一个主题并能够体现出自己的个性,有足够的页面及链接,有整体的框架结构,表格定位以及表单处理等,布局合理,色彩搭配协调统一,内容丰富多彩,页面风格独特。

二、实训内容

1.准备工作

(1)先想好做什么方面的网站。

(2)根据自己的需要在网上下载图片、动画等相关的素材。

(3)安装好需要用到的相关软件。

(4)大致设计一下该用到的页面的布局版面情况,规划一下网站的结构,画一下草图。

2.使用的技术

用Word处理艺术字、在Photoshop中用切刀工具切图片、用其它工具处理图片、裁切

图片、转换格式等,用Flash做动感图片,用ACDsee裁切图片。制作网页时应用表格、层、超链接、动态文本、表单等。

3.网站的整体布局及介绍

该个人博客使用了16个页面,一个进入页面,用了几个图片和一个“Enter”链接进入主页面,其主页面使用了一个以糖果屋为主题的背景图片,其中有导航、个人资料、微博、留言、好友、照片、博客、版权信息、按钮、文本框等组成并做了相应的链接。16个页面分别是:jinru.html、index.html、jiaru.html、pengyou.html、liuyan.html、xiangce.html、boke.html、gerendang.html、yinyuehe.html、guanyu.html、lianxi.html、youqing.html、yinsi.html、wenzhang.html、jianai.html、yuluo.html,.在音乐盒和个人档页面中用到了很多的表单项,有文本域、单选按钮、复选框、列表/菜单、按钮。前几个页面的主要背景色是#F3B8CA和#ABCD45后几个页面主要应用了#ABCD45和白色作为背景色,前几个页面和后几个页面采用了不同的风格。

4.实现的功能

主要是几个页面的链接,加入我们、联系我们、关于我们、友情链接、隐私与版权几个页面主要是针对本网站进行了介绍,介绍了该网站的联系方式、加入方式、合作商、网站的隐私及版权信息。个人档主要写个人信息,音乐盒写了最近流行的专辑及歌曲,还有一些朋友、留言、相册、博客等信息。

三、调试中出现的问题

在制作网页的过程中出现的问题主要是排版布局问题和链接问题,链接有时行有时不行,还有表单的使用,通过问老师同学及在网上自己找寻答案最后都解决了。

其次在使用其它软件时也是出现种种问题,主要还是自己对这些软件还没有真正的熟练掌握,在以后的学习过程中我会更加努力一定多多练习。

四、实训心得体会

在这次实训的过程中让我唯一感觉到创新的重要性。我也看了其他的同学做的网页,大家的都千篇一律,大多是学习过程的但是有的同学通过其他的参考资料,然后得到自己想要的画面和效果,然后把自己的与其他人的区分开来,我认为在这个过程中是一种创新的过程,一种将别人的智慧运用到自己生活中为己所用的能力,这种能力虽然反映的不是自己的真实水平,但是一种学习的过程,这以后,就成为了自己的东西。也发现很多同学都在自己的脑海中构造自己想要的画面,同时,自我摸索,在不断地失败

和成功中吸取不足和失败的原因,我认为这本身就是一种创新的过程。力求有一个很好的视觉效果,其次网页页面美观也是很重要的,不断地尝试调配颜色。想着也是一种创新,这种创新中得到自己所要的效果是学习的一部分。

其次我还知道了此次实训的目的,也清楚了目前自己的许多不足,那就是缺乏相应的专业知识与经验,对所学的专业知识不能够很好地运用于实践操作中。不过我也发现了以前不曾注意到的细节,在实训制作网页的过程中,我对作为一名网页设计师制作网页时要注意的细节和一些重要的地方也有了更多的了解。把职业能力训练与职业素质的训导有机结合起来。相信这对我接下来的学习专业知识会起到很有效的帮助,在接下来的时间里,我会以作为一名学习者的身份在这几个方面要求自己,严格自我,向专业知识靠近,丰富我们的知识。

五、实训总结

通过本次实训我又一次感觉到了实训的重要性,通过实训可以让我们深深地体会到理论与实践联系的重要性和必要性,通过实训我们可以把这学期以来学的东西做个总结,并且还可以学到一些新知识对该软件有更深一步的了解,我们要认真面对实训,虽说实训是一个很累的过程,但是实训一周让我们学到的东西要赶平时上课的好几倍,好好努力把握好一切学习的机会,不要让时间白白浪费。

第二篇:网页实训报告

静态网站实训

姓 名:XXX 学 号:XXXXXXXXXXX 班 级:XXXXX 指导教师:XXX 提交日期:2012年3月21日

南京工业职业技术学院项目技术报告

概 要

本实训报告主要介绍并总结了两周实训以来静态网页设计主题的定位、内容结构、素材的下载、版式设计、色彩设计、导航、功能设计、网页的风格设计、Flash的应用、图片动态效果的使用以及DIV的套用、层、行为等方面的设计。南京工业职业技术学院项目技术报告

目录

前言..................................................................................................................................................4

一、实训意义:...............................................................................................................................5

二、实训目的:.................................................................................................................................5

三、实验步骤:.................................................................................................................................6

1.确定网站主题...................................................................................................................6 2.收集材料...........................................................................................................................7 3.网站规划...........................................................................................................................7 4.网站的制作工具...............................................................................................................8

四、总体功能介绍...........................................................................................................................8

五、总体框架结构设计...................................................................................................................9

5.1制作网站的网页.........................................................................................................9 5.1.1首页:..............................................................................................................................9 5.1.2个人资料:....................................................................................................................15 5.1.3演员、导演姜文............................................................................................................17 5.1.4个人写真........................................................................................................................19 5.1.5奖项荣誉........................................................................................................................24 5.1.6感情生活........................................................................................................................25 5.1.7最新资讯........................................................................................................................27 5.1.8让子弹飞FLASH游戏.................................................................................................27

六、总体调试与分析.....................................................................................................................29 6.1上传测试网站...................................................................................................................29

七、设计特色.................................................................................................................................29 结论................................................................................................................................................30 结束语............................................................................................................................................30

南京工业职业技术学院项目技术报告

前言

在互联网时代的今天,不同于我们所熟悉和习惯的农业社会和工业社会,它有着较快的发展速度和极高的淘汰率,不仅挑战着我们学习的勇气,更挑战着我们的方法和技巧.为此对有效掌握所需要的知识方面,我们进行了一系列的探索.在今天网络已经成为各级单位,企业和个人的一张名片,一个精美而又独特的网络主页,不仅为商家吸引更多的客户和投资,更能为我们一个人带来更多的机遇和更大的发展空间,对于部分人来说,它所带来的网络生活远比现实生活更有魅力,更富有激情.今天internet发展非常快,已经成为整个世界的一个主要通信网络标准。接入internet网,浏览1/DTD/xhtml1-transitional.dtd“> (这里是插入背景音乐的代码)

无标题文档

第三篇:静态网页实训报告

计算机软件学院

实训报告

——Web静态主题网站设计

姓名:夏前伟胡维国海继昌陈佑宏 学号:09

04

03

02 专业:电子商务 班级:电商1413 时间:2016.6.20 任课教师:梁菊华

目录

前言..................................................................................................................................................2 实训意义...........................................................................................................................................3

本实训目的:...........................................................................................................................3 综合实训的目的:...................................................................................................................3 对个人的要求...................................................................................................................................4

具体要求如下:.......................................................................................................................4 内容的设计及制作...........................................................................................................................5

一、策划阶段:.......................................................................................................................5

二、设计阶段网站形象设计:...............................................................................................5 清晰性:...................................................................................................................................5 创造性:...................................................................................................................................5 网站技术因素考虑:...............................................................................................................5 页面设计...........................................................................................................................................6

页面的平铺展示:...................................................................................................................6 LOGO:.....................................................................................................................................6 字体图片背景的搭配:...........................................................................................................6 导航:.......................................................................................................................................6 其他:.......................................................................................................................................6 主页和部分页面展示.......................................................................................................................7 部分代码.........................................................................................................................................12 要求................................................................................................................................................14 主页的要求.............................................................................................................................14 PRODCT的要求......................................................................................................................14 ABOUT ME的要求..................................................................................................................14 测试站点.........................................................................................................................................15 后期维护:.............................................................................................................................15 功能模块:.............................................................................................................................15 参考文献.........................................................................................................................................16 个人小结.........................................................................................................................................17 夏前伟.....................................................................................................................................19 胡维国.....................................................................................................................................22 海继昌.....................................................................................................................................24 陈佑宏.....................................................................................................................................27

前言

随着时代的发展,网站建设越来越接近于一门艺术而不仅仅是一项技术。网页的艺术设计,日益被网站建设者所注重。在目前国内对此领域研究甚少的情况下,将网页艺术设计与其他艺术设计形式进行比较,尝试从网页艺术设计的内容、原则和特点等三个方面,对这个新的艺术设计领域进行初步的归纳总结和理论探讨。作者认为网页艺术设计是艺术与技术的高度统一,指出网页艺术设计包含视听元素与版式设计两项内容;以主题鲜明、形式与内容相统一、强调整体为设计原则;具有交互性与持续性、多维性、综合性、版式的不可控性、艺术与技术结合的紧密性等五个特点。在明确了网页艺术设计与网站主题的关系的基础上,提出了“美”和“功能”都是为了更好地表达网站主题这一观点。网页艺术设计是伴随着计算机互联网络的产生而形成的视听设计新课题,是网页设计者以所处时代所能获取的技术和艺术经验为基础,依照设计目的和要求自觉地对网页的构成元素进行艺术规划的创造性思维活动,必然要成为设计艺术的重要组成部分,并随着网络技术的发展而发展。表面上看,它不过是关于网页版式编排的技巧与方法,而实际上,它不仅是一种技能,更是艺术

实训意义

本实训目的:

通过本次实习对自主网站的设计,使我们熟练应用HTML标记语言设计制作网页、熟练应用Dreamveaver网页设计软件,使我们对html5+css3所学的内容有一个系统的理解和掌握。在制作过程中,主要掌握对网页的布局、色彩的搭配、框架的应用、层的运用、行为的实现、表单的使用、模板和库的应用等,完成作品。

综合实训的目的:

《Web静态主题网站设计》主要目的是让我们通过这门实践课程的学习了解和掌握网页设计的基本方法,通过不断上机实习训练达到解决实际的问题。因此,在本学期特设置此课程设计,集中一段时间使学生综合运用所学习的网页制作知识及以前所学习的计算机方面的知识,按照网站制作的流程,完成一个相对具体、综合的网站,全面巩固学生的知识,培养学生解决实际问题的能力,从而达到学以致用的。

对个人的要求

我们每个人都应通过本次实训项目课程的学习,培养自己系统、完整、具体地完成网站设计所需的工作能力,通过信息收集处理、方案决策、制定行动计划、实施计划任务和自我检查评价的能力训练,锻炼学生在职场应有的工作能力。每个学生经历完整个网站设计开发的训练,将掌握完成实际网站设计应具备的核心能力和关键能力。

具体要求如下:

1.充分了解本指导手册规定拟填写的各项网站设计各阶段的作业文件与作业记录。

2.充分了解自己的学习能力,针对拟完成网站的设计功能要求与规范,查阅资料,了解相关网站设计的技术情况。

3.在学习过程中,认真负责,在关键问题与环节上下功夫,充分发挥自己的主动性、创造性来解决技术上与工作中的问题。4.认真填写与撰写从资讯、方案、计划、检查到评估各阶段按规范要求完成的相关作业文件与工作记录,并学会根据学习与工作过程的作业文件和记录及时反省与总结。

内容的设计及制作

一、策划阶段:

一阶段的主要任务是收集、研究和分析用户需求,讨论Web内容,制定计划。

二、设计阶段网站形象设计:

主要包括设计网站的标志(logo),设计网站的标准色彩,设计网站的标准字体。网站主题及风格设计,从主题策划到网站风格创意等内容。

网站内容设计:

清晰性:网站内容必须简洁明了,直奔主题,非常有效地讲清楚你想说的内容。

创造性:网站观点会使访问者产生共鸣,发出认同吗?这可以是访问者判断一个公司是否有实力,从而影响到购买动机的重要因素。突出三个重点:突出你的产品的优点和与众不同的特色;突出帮助访问者辨别、判断同类产品优劣方面的内容,出内容的无庸置疑的正确性。

网站技术因素考虑:

浏览器脚本兼容性。面对屏幕分辨率的适应。网是否需要交互操作。

页面设计

页面的平铺展示:

主要的物件有:导航栏、LOGO、Banner、按钮、图片、文字。

LOGO:

logo是每个网站多要有的,他是网站为了给大家一个比较直观的信息的表达工具。

LOGO的位置通常在页面的左上角。这个地方最明显和直观,可以第一时间给人于默化的效果。

字体图片背景的搭配:

体图片的搭配要直观,尽量不要撞色太严重,要考虑字迹清楚,色彩简单一些,不要超过四种。页面的分割要显见。

导航:

此次选用的是简单直观的静态导航,HOME,PRODUCT,SERVE,ABOUT ME。子网页的设计:为了保证页面的统一性和美观,子网页的统一性也是很有必要的,简单的布局就是内容的明了直接的展示。

其他:

1.有共性,才有统一,有细节区别,就有层次。

2.防止设计与实现过程中的偏差,不要定死具体要放多少条信息。3.设计的各部分,要配合整体风格,夸张一点好像。4.不仅页面上各项设计要统一,而且网站的各级别页面也要统一。5.保持页面的透气性。6.符合人类的审美设计!

主页和部分页面展示

主页我们采用的是简约商务的风格。

让人一看就很有质感的,交代了网页的大概内容以及整体风格还有网站的名字,让人一眼明了。

导航栏采用文字及背景的渐变,简约大气不失风格。

PRODUCT页面的整体布局采用横向排序,为了方便以后增加产品而留有增加的空间,简约的Flash动画也进一步体现出网站整体的品味!

简单的一个小动画起到了装饰页面和分割页面的作用。

为了保证每个字页面的统一性,而特意设计的页面,文字的清晰介绍以及高清的图片查看功能,而取消返回首页这个选项而设置在巧妙的位置也是一成功力做!

SERVE页面提供所需的一些服务,一些需要的资源,以及售后的联系,还有物流的查询。

ABOUT ME页面介绍了我们是一个怎样的团队,不做没理想的咸鱼,这艺网是一个艺术与交流的聚集地,论坛功能正在筹建中,你可以在下方选择加入我们这个有理想的团队,来一起质疑那些嘲笑的眼光。

这是艺术!

部分代码

不是每朵花都可以绽放!

页面布局采用css样式表的类样式和ID样式,方便以后的更改以及养成自己的一个习惯。

Flash插入的代码。

字体的整体美观度,以及排版的统一要求。

整个网站唯一的一处表格和层的布局。

要求

主页的要求

对于商务方面,系统要求运行的工作环境稳定,易于操作,界面美观大方,对于前台展示界面要求系统便于维护,安全可靠,对于广大客户所要执行的操作简单易懂,远程访问速度较快,界面友好美观,有基本的错误提醒功能,远程操作数据库正确,要求和客户有一定的互动性,在主页上直观的就可以查看浏览者所想要了解的东西。

PRODCT的要求

简单明了直观 独特的见解 色彩的搭配

ABOUT ME的要求

清晰的介绍自己的团队,团队的风格以及网站的规划和要求。

测试站点

站点各个方面无问题,经测试上传到网页,网址为left887.ihttpd.com 后期维护:

布局的要求完全为了考虑后期的增删改查。

功能模块:

后期可以实现数据库的链接一些交互式的功能。

参考文献

百度文库文献系列

个人小结

在这次实训中我学会了网页设计的一般步骤以及所需的软件和一些没有实践过的知识,开阔了自己的见解,这对以后的设计生涯是绝对有帮助的,以后想到当时自己的无从下手到最后的相互讨论得出一个让人满意的布局,这个过程是值得记住的。

因特网上的网页主体不胜枚举。主题的选择取决于网页的内容,人们一般不会去选择自己感到陌生的主题,而是选择某一个自己最感兴趣,或者是非常熟悉的内容来作为网页的主题,当然专业的网页制作公司除外。所以我们决定制作一个简单的商务类型的网站,麻雀虽小五脏俱全,布局充分考虑了以后的天劫和修改。

制作一个网站的开始就是站点站点的结构好比是建造高楼大厦之前的图纸设计。规划占点就是将站点中每一个网页用树型结构列出来,网页的内容可以省略,只要大体说明其要展示的内胎即可。

规划好站点的总体结构以后,还应该对站点中每一页的栏目、布局等作更进一步的设计。

收集和加工素材

如果说站点是一栋高楼大厦,那么素材就是建造大厦的材料。建造大厦的材料有些可以直接拿来用,而有些材料需要经过加工或者整合以后才能使用。同样道理,为制作网页而收集的素材有些可以直接使用有些却要借助其他软件加工处理后才能适合网页内容的需要。

素才的内容主要有文字、图片、动画、声音、视频、程序等。江

收集到的素材分门别类存放起来,需要时可以很快找到。

制作网页

在完成了设计后,实际上,制作网页就是将收集和加工后的素材添加到事先规划设计好的网页中去,或者说制作网页就是将文字、图片、动画、声音、视频、程序等素材按照设计的要求合成起来。在原有的设计基础上可以进行增删改(以不破坏为原则),更好的应用布局和所学工具对页面的优化。

制作完网页阶段之后,应该对网页做全面的检测,包括检查网页内容的科学性、版面编排的合理性、超链接的正确性以及对网页的内容作适当的增减等。一个有错误内容的网页时浏览者所不能容忍的,一个编排布局混乱的网页不会引起浏览者多大的兴趣,一个有超链接错误的网页则会给浏览者带来很多麻烦。

制作网页的目的是要将网页发布到网上,让更多的浏览者来访问发布的站点,因此发布网页这一环节必不可少,否则失去了制作网页的意义。

综上所述,要制作出富于创意的网页,设计阶段非常重要。事实上,一个网站从设计到制作,再到发布的整个过程中,大部分的精力和时间花在设计阶段。即使在制作阶段,很多时候也会根据实际需要对原有的设计做一些修改但是如果说是对设计有什么不满的地方那就只可以说道不同。

我觉得实训就是对所学知识的一种检验,网页设计所检验的并不只是工具的应用更多的是自己的想法独特的想法,如果停留在那些四四方方的布局毫无新意的页面就失去了该有的意义!

夏前伟

1402713109

通过这次实训,我收获了很多,一方面学习到了许多以前没学过的专业知识与知识的应用,另一方面还提高了自己动手做项目的能力。本次实训,是对我能力的进一步锻炼,也是一种考验。从中获得的诸多收获,也是很可贵的,是非常有意义的。

在实训中我学到了许多新的知识。是一个让我把书本上的理论知识运用于实践中的好机会,原来,学的时候感叹学的内容太难懂,现在想来,有些其实并不难,关键在于理解。

在这次实训中还锻炼了我其他方面的能力,提高了我的综合素质。首先,它锻炼了我做项目的能力,提高了独立思考问题、自己动手操作的能力,在工作的过程中,复习了以前学习过的知识,并掌握了一些应用知识的技巧等。其次,实训中的项目作业也使我更加有团队精神。

从那里,我学会了下面几点找工作的心态:

一、继续学习,不断提升理论涵养。

在信息时代,学习是不断地汲取新信息,获得事业进步的动力。作为一名青年学子更应该把学习作为保持工作积极性的重要途径。走上工作岗位后,我会积极响应单位号召,结合工作实际,不断学习理论、业务知识和社会知识,用先进的理论武装头脑,用精良的业务知识提升能力,以广博的社会知识拓展视野。

二、努力实践,自觉进行角色转化。

只有将理论付诸于实践才能实现理论自身的价值,也只有将理论

付诸于实践才能使理论得以检验。同样,一个人的价值也是通过实践活动来实现的,也只有通过实践才能锻炼人的品质,彰显人的意志。必须在实际的工作和生活中潜心体会,并自觉的进行这种角色的转换。

三、提高工作积极性和主动性

实习,是开端也是结束。展现在自己面前的是一片任自己驰骋的沃土,也分明感受到了沉甸甸的责任。在今后的工作和生活中,我将继续学习,深入实践,不断提升自我,努力创造业绩,继续创造更多的价值。

我认为大学生实习难,就业难,除非你有关系,能给你轻松找到工作,否则就难逃市场选择的厄运。我在该公司实习总结了五个攻略,只能智勇双全,才能在这个社会中出人头地。

首先确定主题,找对目标。

实训的第一节课先设计好网站的类型规则,我们设计的是一款关于旅行方面的物品的网站,对待这个问题要快、准、狠,不要拖拖拉拉,犹豫不决。确定好主题以后该思考要在网站上面上架那些物品,这个需要先调查一下现在主流的旅行物品的需求量,通过互联网和身边的调查然后在做决定。

构造结构框架。

规划好网站是做什么的就好办了,接下来这一步师非常关键的一步,因为一个好的网站无论是网站的布局和色彩以及总体都对用户访

问这个网站起着至关重要的一个决定,所以在这方面我们选择了反其道而行之的简约界面,我们的这个界面不同那些普遍的大网站一样,他们内容很多,很复杂,连接几百个甚至更多更多,画面也花花绿绿的,但是我们觉得这样的网站反而显得太乱,于是我们决定好了结构框架。

后台数据处理。

基本界面已经设计好了,接下来就是见证奇迹的时刻了,在网站中我们看到的甚少甚少,最厉害的还是那些我们看不到的后台数据,那些虽然我们看不到但是反而更加复杂难以理解,这一步也至关重要,设计好每一步的连接数据,每个图片的跳转,窗口的弹出关闭等,这样一个基本的网站已经成型了,最后就是看看哪里不好修改修改,然后就可以完成了。

We Are A Team!

胡维国

1402713104

我在这次实训中担任的是图片处理和flash动画制作以及子网页的制作工作,运用ps对需要用到的图片进行相应的效果处理,保存在相应的图片文件夹内,在制作flash动画的时候出现了一些小的问题,我保存flash动画文件的时候名字做成了默认的文件名,结果在插入动画的时候在浏览器中预览不出来,最后通过查阅资料把这个问题给解决了,我用css样式进行了自己的子网页页面布局,以及对图像的插入,通过类样式对产品进行文字说明,并且插入相应的鼠标特效,来吸引眼球。

通过这次实训对这门课程的学习,做好主页,并不是一件容易的事,它包括个人主页的选题、内容采集整理、图片的处理、页面的排版设置、背景及其整套网页的色调等很多东西。所以我得出一下总结:

一、准备资料和挑选符合目的主题的合适素材

做主页当然要收集、准备资料。在网上多转转,看到什么漂亮的网页,把它保存起来,作为以后自己设计主页时的参考。另外,还包括搜集美化主页可能要用到的各种材料,如背景、小动画图标等等。你可以在硬盘上建一个文件夹,下分“图片、声音、动画”等文件夹,养成上网时看到有创意、新鲜的图像,就按鼠标右键存入你硬盘相应文件夹的习惯,时间一长你就有拥有了一个可观的图库,等做主页时随手拈来或加以修改就成你自己的东西了。

二、规划好整个网站

主页的设计应以醒目优先,应该令人一目了然,切勿堆砌太多不

必要的细节,或使画面过于复杂。切记,页面给人的第一观感最为重要!在网上到处浏览网站的人很多,如果你的主页给人的第一印像没有吸引力,很难令他们深入观赏,而且他们恐怕再也不会访问你的网站了。

三、善用图片,增强艺术效果

我记得老师说过网页的迷人之处之一,要算它上面能点缀许多漂亮的图片。精美的图片设计,可以使自己的网页增辉不少,令人过目不忘。图片的内容应有一定的实际作用,切忌虚饰浮夸,同时还要注意与文字的颜色搭配。最佳的图像集美观与资讯于一身。

四、要多次使用不同的浏览器进行预览

在做品完成之后,要多次对自己的网站进行测试,在不同的浏览器中进行尝试效果,以达到手机和电脑上不同的浏览器中都能完整的体现出网站的内容。

海继昌

1402713103

这次实训我们主要是练习网页制作及网站发布的各种知识。Dreamweaver工具为我们实现这些提供了便利,下面我将网页制作和网站发布的知识总结如下:

(1)网页制作的前期工作是搜集大量的素材,我们的网页只有是实用的才会是大众喜欢的,搜集素材以充实我们的网页。当然我们也应该在此时定下网站的方向是什么,剩下的就是靠Dreamweaver进行编辑。

(2)网页的版式设计,版式设计时我们应该有重点,把重要的内容新闻放在醒目的位置上。规划各元素在网页中的位置关系和表现方法,合理安排图像、文本等元素,使网页布局合理、美观大方。

(3)文本编写,我们的网页中需要大量的文字材料,这就要在网页编辑器中用HTML语言中的标签编写。也可以利用网页编辑工具的“所见即所得”功能,直接写入文字。在浏览器中运行时出现冗余代码时返回代码页面重新进行查看修改。

(4)处理网页之间的关联,这主要是建立合理、高效的网页导航系统;

(5)网页发布过程,主要是将建设好的网页上传到服务器中供用户浏览。

存在的问题及解决思路

(1)在Dreamweaver基础方面:制作网页时如何实现网页不跳转就可以出现新的内容,实现页面内的链接;用代码编写网页上的按钮,25 实现按钮的各种功能,如刷新,重置,确定操作。Css样式表的概念模糊。

(2)网站风格方面:一个网站的各个页面之间风格应该是统一的,只有围绕一个风格才会成功。

(3)网站的内容方面:在制作网站时内容之间应该是相关的,在制作时我们不能追求面面俱到,只能做到精益求精。杂乱无章的网站是不会有大的发展的。

网页设计实训就快结束了,在这短短的三周里,我学会了很多新的知识,更掌握了新的技能,让我觉得受益匪浅。在这一周的时间里,我一心只做网页,做自己喜欢的风格的网页。经历了一次充实而有愉快的实训,我学会了制作框架、使用锚点、给网页网页插入背景音乐、表格、视频、flash、导航条等更深层次的掌握了它们的用法,现在整个网页也已经大体竣工,我感到很开心,经过这三周不断探索,我喜欢上了这门课程,感觉很有意思。或许实训的结束代表一段新生活的开始,但是我认为它不但是一门课,需要我们去掌握,同时还可以锻炼我们的逻辑思维能力和思维的严密性,还有就是在制作网页的过程中,更需要有不错的艺术审美观,这样,你做出的网页才会赏心悦目,让人眼前一亮,也就是从此刻起,我决心好好钻研这门课,力求这方面的技能达到顶级。虽然网页已经完成,可这并不是一件轻而易举的事情,在此过程中遇到了许多以前不曾遇到的问题,多的情况都是自己解决,万不得已之际,我会主动问老师和同学,直到弄懂为止!

让我更加清楚地明白老师平日里的良苦用心,也更加清楚地明白了自己以后应该怎样去做事。

陈佑宏

1402713102

第四篇:网页制作实训报告

《网站设计与制作》实训报告

X学院XX班XXX号

一.实训时间:

2010年6月7日到2010年6月13日

二.实训地点:

XXX学院XXX班级

三.实训组员:

XXX、XXX

四.实训目标:

运用网页设计方法,设计一个网站,提高综合应用所学知识的能力,积累Web网站的制作经验,培养团队协作精神。本次实训的具体目标为:了解网站制作的一般流程;熟练使用网页制作工具Dreamweaver、Flash、Fireworks设计网页;能灵活运用表格、层和框架布局页面;熟练使用CSS样式表美化网页;正确使用JavaScript添加网页特效;灵活使用模板和库来制作网页;学会申请免费域名空间和正确上传站点的方法。

五.实训策划:

这一周,我们要进行《网站设计与制作》实训,我们认为做网站前最主要的是确定主题、框架和标题栏的设计。因此我们相互讨论之后,确定制作以“婚纱”为主题的“喜多坊时尚婚纱网”。在之后的资料收集和网页的框架的建设中,我们发现了许多问题,某些关键点无法做出心中的效果,这让我们有些遗憾。通过自身及组员的共同探索,我们已尽权利将以下是我们的策划内容:

1.确定主题。制作网页,首先是确定主题,冬天很冷,却冷得很幸福,刚刚过去的圣诞的热闹劲还在心头。于是我们从幸福出发,想到了结婚-婚纱,建立一个简单的介绍婚纱的网站并取名喜多坊时尚时尚婚纱,专业介绍一些喜多坊婚纱的特色等。我们本次间的网站基本以粉红为基点,粉红是可爱清纯的颜色,粉红代表着幸福温馨,所以本站以粉红为风格,让整个网站充满爱的力量。

2.设计主页。主页的设计是整个网站的灵魂,构思导航栏的分类,然后是整体规划,每一版块都有其个性的色彩,清晰明了,便于阅读浏览,我们构思大致

分几部分,首页,关于我们,婚纱礼服,量体裁衣,婚纱选购,公司门市,与我联系,在线论坛8大板块,每一板块又分几小部分,内容比较充分,多样。确定导航栏的各个分类标题之后对于建立二级子网尤为重要,我们运用Photoshop CS3技术来设计出导航栏,制作切片,建立导航栏,将整体的主页效果建立起来。

3.资料的搜集。主页的导航栏设计好后,接下来就是对主页导航栏的各个内容进行资料的收集,我们采用大量的资料收集再对资料进行塞选p图,得到最适合导航栏内容的资料。素材的选择,要符合网站的主题,图片的大小要符合模板的轮廓,我们将不符合模板的用Photoshop处理编辑,然后放入站点底下,进行图文的链接和排版。

4.各个子网页的建立。我们设计好模板后只要在可编辑区依次编辑所需资料就可,运用模板建立子网页少了很多工序,为我们节省大量的时间。尽管我们建立了模板,但我们在建立子网时很小心,因为一张图片的大小插入就有可能破坏整个模板的结构尤其在使用表格时,因此我们对所插入的图片和表格都得进行测量,做到不影响网站整体的美观。

5.实现网页间的链接。做好个格子网和首页后,接下来就是通过模板的链接,将整个网站中的网页链接起来,过程其实很简单,主要是把要链接的文字和图标选择在选择工具栏的链接按钮最后选择自己要链接的网页单击确定便可以了。做好这一步后,网站基本算是建好了。

6.向静态网页插入动态效果。在基本建好网页中的插入层和时间轴,制作其动态效果,让整个网页充满生机。我们在网上进行flash素材的收集,通过Flash CS3设计出主题下的风格动态效果。然后插入到静态网页中,使网页更加生动形象。

六.实训心得:

通过这周的学习实践,在老师的指导下以大量明晰的操作步骤和典型的应用实例,使我们真正对所学的软件融会贯通。我们结合年轻人心理制作了时尚婚纱网站,作为实训的成果。其内容是多样化的,制作网页用的软件是Deamweaver CS3软件。它提供了网页和表单的动态生成到网站的解决方案。主图是一个网页的门面,它能体现出这个网页的整体风格。

制作网页,首先是确定主题,经过再三考虑,就做了个关于婚纱的网站。考虑到,现在城市普遍幸福感不高,加上寒冬,于是以幸福为论点扩展想到了结婚,想到了婚纱,想到了未来的美好城市生活,城市让生活更美好,结婚让生活更完整婚纱让生活更多姿!想到这些,我们最后决定建立一个简单的介绍都市婚纱的网站,让这个冬天不再寒冷,让我们回忆起那些幸福的日子。于是网站主题确立。

然后是整体规划,每一版块都有其个性的色彩,清晰明了,便于阅读浏览,大致分几部分,首页,关于我们,婚纱礼服,量体裁衣,婚纱选购,公司门市,与我联系,在线论坛,每一部分又分几小部分,内容比较充分,多样。

再后是收集资料与素材,大量浏览相关网站,收集关于婚纱的图片,进行Photoshop CS3图片处理和排版,插入好的文章和图片等,还有参考一些好的网站的布局,特色,颜色搭配,背景图等。

再后是设计网页图片,用flash制作动画,用Photoshop制作静态图片。再后是建立站点,和制作网页了,使用dreamweaver制作。

首页内容精彩丰富,首页主要是导航作用。首页制作时,时刻考虑着网页的基本原则:统一,连贯,分割,对比及和谐的原则,内容统一,都是为了主题服务,一个网站强调的就是一个整体,只有围绕一个统一的目标所做的设计才是成功的;连贯,页面之间关系连贯,统成一体;每版内容都自成一体,颜色各异,便于浏览;整个网页有动有静,颜色不同,形成对比,不呆板,富有生气;颜色各异,但又不同之中又相同,浑然一体。

简洁实用: 这是非常重要的,网络特殊环境下,尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的,所以要去掉所有的冗余的东西。使用方便:同第一个是相一致的,满足使用者的要求,网页做得越适合使用,就越显示出其功能美;页面用色协调,布局符合形式美的要求: 布局有条理,充分利用美的形式,是网页富有可欣赏性,提高档次。当然雅俗共赏是人人都追求的。

利用我们所学的模板设计,制作更完美的页面。将动态网页与静态网页结合起来

再后,调试过程,好多次本来在Deamweaver CS3里好好的,把字调的好好的,位置很对,可在浏览器里御览就出毛病了,不是靠上了,就是靠下了,经过再三调试,整理,加了好多表格,终于满意了。

通过温本周的实训,发现自己还有很多的不足。框架的应用很难把握,切片也很难合理切割,当插入图片的时候把原有的模板给撑破了,精确定位很重要。

因为学艺不精,所以不会网页的代码设计,只能通过网络三剑客综合使用。不过也实践中也学到了很多知识,表格的嵌套是非常重要的,CSS样式的应用也很便捷。还有一些行为中的效果也是蛮不错的。所以这次实训还是很有意义的。

第五篇:网页设计实训报告

重庆科创职业学院

《静态网站建设》 实 训 报 告

题目:

专业:班级:学号:姓名:成绩:指导教师:

完成日期:年月日

目录

一、课程设计目的....................1

二、课程设计题目描述和要求.....................1

三、课程设计报告内容...................1

3.1总体功能介绍...............................1

3.2总体框架结构设计..............................2

3.3页面设计.........................2

3.4总体测试与发布...........................2

四、结论......................2

五、结束语.........................3

六、主要参考资料....................3一、课程设计目的本课程是一门计算机科学与技术及相关专业实践性环节。以HTML和CSS为基础,全面介绍与网页设计制作有关的知识,向学生阐明Web基本工作机制,并使学生具有一般网页制作的能力。与此同时,通过对Web页制作技术和制作工具的学习,使学生对网页设计中所涉及的相关知识有一个全面的了解。通过本课程的学习,使学生全面了解网站建设与网页设计的基本概念、基本理论及业务运作模式,了解网站建设与网页设计的特点及工作过程,掌握网站的建立及网页设计制作的方法,能够完成一般性网站的建设,因此要求利用网页设计方法,设计一个网站,提高综合应用所学知识的能力,积累 Web 程序的编程经验,提高编程与调试能力,培养独立学习、吸取他人的经验、探讨技术的习惯和团队协作能力。

二、课程设计题目描述和要求

每个设计人员设计制作利用DIV+CSS网页布局方法制作的任意类型的网站(主题不限),制作网站所需的相关文字资料、图片资料等可以到相关类型的网站上进行采集或自行采集。

要求:根据上面指定的网站开发项目内容进行开发设计,网站栏目设置、网站要表达的具体内容和网站的风格根据小组确定的课题进行设计;要求根据网站设计规范和常用网制作页技术进行设计;设计的网站要求结构合理,版面美观大方,颜色合理,风格一致,并运用适当的动态网页技术进行修饰。

三、课程设计报告内容

3.1总体功能介绍

制作该网站的时代背景?该网站主要的功能是什么?可以实现哪些用途?主要使用的技术是什么?利用了哪些语言实现哪些效果……

3.2总体框架结构设计

该网站有多少个模块?层次关系是什么样子的?并且可以绘制一个流程图来进行进一步说明。

3.3页面设计

3.3.1首页(页面、设计思路、主要代码)

1.进行截图;

2.对设计思路进行说明。

3.将主要代码复制粘贴。

3.3.2各子页(页面、设计思路、主要代码)

1.进行截图;

2.对设计思路进行说明。

3.将主要代码复制粘贴。

3.4总体测试与发布

使用的测试方法是什么?

测试中遇到的问题以及解决的方法。

四、结论

写法要求:

1、概括地说明所进行工作的情况和价值,分析其优点和特色,指出创新所在,性能达到何种水平,并应指出其中存在的问题和今后的改进方向,特别是对工作中遇到的重要问题要着重指出,并提出自己的见解。篇幅不宜过长。

2、结论要简单、明确。在措辞上应严密,容易被人领会。应实事求是地介绍自己的工作成果,忌言过其实,在无充分把握时,应留有余地。

五、结束语

要求:在文章结尾处,通常以简短的文字,对设计过程中自己的收获,及工作过程中曾给自己以直接帮助的人员,例如指导老师、答疑老师及其他人员,表示自己的谢意。这不仅是一种礼貌,也是对他人劳动的尊重,是治学者应有的品质。

六、主要参考资料

[1]吴东伟等,《网页设计三剑客》,北京,清华大学出版社,2004年

[2]李宏,张敏,《网页设计与制作》,北京,化学工业出版社,2006年

[3]李桂杰,《网页设计与制作》,大连,大连理工大学出版社,2008年

[4]李英俊,《网页设计与制作》,大连,大连理工大学出版社,2010年

…………………………………………………………………………..(要求:五号字,宋体,1.5倍行距。按作者、书名、出版社、地点、出版时间格式逐一列出,中间用逗号格开)

相关内容

热门阅读

最新更新

随机推荐