网页设计实训报告.docx

1、网页设计实训报告南京工业职业技术学院计算机与软件学院课程名称：网页设计实训题目：网页设计（明星资料）班 级 ：电商1221班学 号 ：1202583223姓 名 ：陈玫指导老师：田小敏、黄瑛目录1. 网站定位简要说明 32.网站设计基本步骤 42.1.确定网站主题 42.2收集材料 42.3.规划网站 42.4.选择合适的制作工具 42.5.制作网页 52.5.1建立框架 52.5.2各个子网页的建立 52.5.3实现网页间的链接 52.6.上传测试 52.7.推广宣传 62.8.维护更新 63.需要的素材，效果的说明 64.结构框图 85.每个网页的设计外观，内容说明 96.心得 121.

2、网站定位简要说明我的网站是一个明星网站，在个人网站、明星资料网站、休闲网站、课程学习网站和家乡网站中，我选择了明星网站。虽然明星网站有很多人做，老师认为太多了，但我坚信我能做一个个性的独一无二的明星网站。制作这个网站的目的是我想通过这个网站让大家更好的认识李敏镐，让大家了解李敏镐的资料、作品等。该网站主要用了flash,超链接，dreamweaver,层叠样式表等技术。2.网站设计基本步骤2.1.确定网站主题制作网页,首先是确定主题，李敏镐比较出名，我也特别的喜欢他，,经过考虑,确定以李敏镐为主题的网站 ,建立一个简单的介绍李敏镐的网站,介绍一些李敏镐的资料和作品等。我们本次间的网站基本以绿色

3、为基点，绿色是生命的颜色，绿色代表着生机勃勃，所以本站以绿色为风格，让整个网站充满绿的生机。2.2收集材料网站主题确定好后，接下来就是对主页导航栏的各个内容进行资料的收集，我们采用大量的资料收集再对资料进行塞选，得到最适合导航栏内容的资料。素材的选择，要符合网站的主题，图片的大小要符合模板的轮廓，我们将不符合模板的用美图秀秀处理编辑，然后放入站点底下，进行图文的链接和排版。2.3.规划网站主页的设计应以醒目优先，应该令人一目了然，切勿堆砌太多不必要的细节，这样会显得过于复杂。切记，页面给人的第一观感最为重要，如果你的主页给人的第一印像没有吸引力，很难令别人深入观赏。2.4.选择合适的制作工具工

4、具有：dreamweaver、photoshop和美图秀秀。2.5.制作网页2.5.1建立框架此次网站建设中我们决定大量运用框架，运用框架对于建立网站提供便利同时也为我们减少大量的工序。本次明星网站的建设主要采用框架，样式标准，比较方便。2.5.2各个子网页的建立我们设计好框架后只要在主页上依次编辑所需资料就可，运用框架建立子网页少了很多工序，为我们节省大量的时间。尽管我们建立了框架，但我们在建立子网页时很小心，不能一直是一个框架，这样会显得比较呆板，老套，要框架和无框架相嵌套，这样才显得有新意。 2.5.3实现网页间的链接做好个格子网和首页后，接下来就是通过框架的链接，将整个网站中的网页链接

5、起来，过程其实很简单，主要是把要链接的文字和图标选择在选择工具栏的链接按钮最后选择自己要链接的网页单击确定便可以了。2.6.上传测试网页制作完毕，最后要发布到Web服务器上，才能够让全世界的朋友观看，现在上传的工具有很多，有些网页制作工具本身就带有FTP功能，利用这些FTP工具，你可以很方便地把网站发布到自己申请的主页存放服务器上。网站上传以后，你要在浏览器中打开自己的网站，逐页逐个链接的进行测试，发现问题，及时修改，然后再上传测试。全部测试完毕就可以把你的网址告诉给朋友，让他们来浏览。2.7.推广宣传网页做好之后，还要不断地进行宣传，这样才能让更多的朋友认识它，提高网站的访问率和知名度。推广

6、的方法有很多，例如到搜索引擎上注册、与别的网站交换链接、加入广告链等。2.8.维护更新网站要注意经常维护更新内容，保持内容的新鲜，不要一做好就放在那儿不变了，只有不断地给它补充新的内容，才能够吸引住浏览者。3.需要的素材，效果的说明我从XX上下载李敏镐所演的各个电视剧的剧照，并将它们逐一分类。还下载一些李敏镐的资料、文字信息、电影视频、广告视频、综艺节目、歌曲和MV。我大多数采用的都是美图秀秀，利用美图秀秀将图片设计成闪图，形成了图片不停变化的效果。利用美图秀秀上面的材料作为网页背景图片，还是很漂亮的。一个好的网页，布局设计是很重要的。我是拿框架来做的，因为觉得都用框架会显得有点单调，我采用了

7、一半用框架，一半用单独的网页，起到新颖的效果。4.结构框图5.每个网页的设计外观，内容说明1.首页图1-1根据自己的网页风格，在网上搜集合适的图片，另外网页的页宽一般没有超过900像素，以保证左右不出现滚动条。这个主页面如图1-1，其实很简单，就是拿美图秀秀弄了一个背景图片，插了个漫画文字，还就是弄了个超链接，既突出网站的主色调，又给人以凝重的感觉，目的都是增加网页的可看性。2.基本信息点击了点击进入李敏镐吧之后，就会链接到另一个页面上，这样实现子链接。如图2-1：图2-1这个网站的主题很鲜明，就是李敏镐吧，是我拿美图秀秀利用一个圆拼起来的四个字。中间的图像是运用闪图的特效，将三张图片形成不停

8、地变化的效果。而这张网页的超链接是我用的是热点，一改以往的光是运用字来进行链接的老套方法。你们可能会觉得我也是用字，然而不是，我用美图秀秀将一些网络字体插入图中，从而变成一个个热点，达到新颖的效果。这张网页其实蛮简单的，这张爱心的大图片，是我利用美图系秀秀的版块来进行的，其实很简单，但这么多的李敏镐的照片让人大饱眼福。该网页以白色为基调，使人看起来很清爽。3.个人简历见下图2-2：图2-2该网页也是以浅色调为主。主要利用的是美图秀秀。背景是利用美图秀秀在自由拼图上选的一个图片，在加上两个文字气泡。然而那个返回按钮也是用美图秀秀弄得，弄了一个抠图。4.个人作品图2-3该网页用的是框架，你想不到吧

9、。呵呵，我用的是美图秀秀啦，用的是模板。又运用的是图片的拼接。我进行了好几个的超链接，有链接视频，有链接歌曲。点击进入第三级页面。如图2-35.广告代言如下图2-4：图2-4该网站比较简单，就插了个图片和一些文字。我用了一个行为，让李敏镐的图片从右上角移动到左下角。这个爱心可爱吧，美图秀秀做的，也是模板。返回主页的按钮是用的美图秀秀做的抠图。 6.综艺节目图2-5该网站中城市猎人剧照那几个字是播放的时候，会放大还会变成绿色。这是美图秀秀。加了四个相同的行为，让要观看城市猎人哦，亲们！围在中间的图片一直转。如图2-56.心得经过两周的时间，网页设计实训即将结束，一切都来之不易。在这两周里面，我学

10、到了很多知识，让我知道自己的不足。我再一次知道自己的渺小，才知道文盲的可怕。我非常感谢学校给了我这次制作网页的机会，通过这两周的实训，我学到了很多有价值的东西。我独立的完成了网站设计的全过程，把设计中散乱的网页链接成框架体系，使平时学到的知识点有了很高的提高，并且合理的在尝试中进行了实践。在这第一周里，我还以为自己做的网页不错，我还有点高兴和兴奋。但经过老师的指导，我才知道自己的不足，太花，太绕眼，看不见字。我决定重新做一次。这次我运用了dreamweaver、photoshop和美图秀秀,花了很大的功夫但最后还是能到了成效，也能到了老师的认可。这让我很欣慰。在这两周的实训中，我学到了新的美化

11、网页的方法，运用了更多以前未运用的技巧。在设计中，我的各方面能力都有明显提高。在搜集材料的时候，我学习了网页设计的技术技巧方面的书，扩大了知识面，丰富了我的内涵。在其间，我掌握文档排版标记的使用熟练使用及其属性设置、特殊符号，熟练使用超级链接，合理使用列表，掌握图片标记及相关属性的使用、了解表格标记制作表格的方法。这次美图秀秀发挥了很长作用。我又用美图秀秀做闪图，又要用美图秀秀做文字，又要用美图秀秀做背景。当然，dreamweaver也起了很大的作用。经过这次的网页设计实训，我了解到dreamweaver的迷人之处。我懂得了行为当中竟然有好多好玩的东西，怪不得我还在说人家的行为怎么这么好看。有

12、些东西还是要靠自己去发掘，去探索。这两周的实训使我学到了更多的知识，并且为我自己在制作网页这方面积累了一些经验。这些将是我人生中的一次重要的经历，将是我今后走上社会后的一笔巨大的财富。这次实习的收获对我来说有不少，我自己感觉在知识、技能等方面都有了不少的收获。总体来说这次是对我的综合素质的培养，锻炼和提高。可能我有过失败，但我渴望成功。俗话说得好，失败乃成功之母。在以后的成长道路上，可能我会遇到挫折，我相信我会有恒心，有毅力，战胜一切的困难。当然，还有一点，友谊也是很重要的，没有朋友、同学的帮忙，老师的指导，我应该不会这么出色的完成网页设计。老师你们是园丁，为我们修剪枝头，让我们更加美丽。老师你们是蜡烛，燃烧了自己，为我们点亮了明灯。谢谢你们的支持，谢谢老师！