1、1附件网页设计大型作业任务书大型作业：*个人网站设计与开发 一、大型作业基本要求 地点：S1310 时间：第十三、十四周 考勤：所有学生必须按教师要求上课考勤，准时到机房进行设计，有事必须办理请假，在上机时间不能做与网页设计大型作业无关的事情，更不可以玩游戏。 分组情况 : 每组一人。二、内容要求 *个人网站（1 人/组）内容如下： 个人简介： 个人相册 : 音乐影视 : 学习园地: 2 个人作品: 说明：导航信息的子栏目不再具体指定，根据个人情况不同自定内容。三、技术要求 要为网站设计（或仿制）一个 LOGO 图标。 要使用一个 banner 图片，最好是 Flash。 所有的页面使用同一个
2、 css 文件。 要用下拉式导航菜单。四、质量要求 必须在本周五之前按要求完成，网站页面数量在 10 个以上，页面质量符合课堂所讲内容要求，页面美观大方。如不符合要求者按不合格处理。3前言对于现在的社会，科技的飞速发展已经成为社会发展的标志。其中计算机的发展可谓快中之快，而在计算机的发展中计算机网络的发展又是首当其冲的。计算机网络从为我们所知，到现在才经历的短短的几年时间，在这几年中随着计算机网络的广泛应用，特别是 Internet 的普及和发展，网络已经成为了不可或缺的通信手段。不论是最新的新闻信息、新产品的出台、新游戏的发布、最新的各种 IT 动态，包括等候就业人才的个人简历，我们都是可以
3、通过网络来获得。但是什么为这所有的一切提供平台的呢。我们又是通过什么来获取这些消息的呢对就是网页。现如今，数以万计的网站以网页的方式提供了丰富、精彩的信息。在人类社会进入信息时代的时候，在网络成为通信的主要手段的时候，在计算机网络普及的今天，网页也在它自己的岗位上做出了突出的贡献。网页是我们在网络上的“带言人” 。我们将什么样的信息传达给浏览者，要讲述什么要的事情，网页在这里起着重用的作用。 网页设计(sheji)是伴随着网络的快速发展而快速兴起. 由于人们使用网络的频繁而网页作为上网的主要依托就变得非常的重要。网页讲究的是排版布局，其功能主要就是提供一种形式给每个上网者，让他们能够了解网站提
4、供的信息。网页设计(sheji)直接面对的是大量用户,随时都会反馈回来对网页的批评建议等，可以根据实际情况进行修改，这样做可以使使用者用起来更加的方便。 在制作网页的时候，也需要有几点注意事项：1. 整体性好: 一个网站强调的就是一个整体，只有围绕一个统一的目标所做的设计才是成功的。 2. 网站形象突出: 一个符合美的标准的网页是能够使网站的形象得到最大限度的提升的。 3.页面用色协调，布局符合形式美的要求: 布局有条理，充分利用美的形式，是网页富有可欣赏性，提高档次。当然雅俗共赏是人人都追求的。 除了这两点注意事项外，还有诸多问题，比如，技术问题，所以，最根本的是学习好相关内容。4目录1)
5、任务书12) 前言33) 目录44) 网站总体介绍55) 制作网页的基本步骤56) 网站的详细设计67) 优缺点及解决办法138) 总结心得149) 参考文献155网站总体介绍： 制作这个个人网页，用了七八天的时间，它是由一个模板，两个 flash 以及若干图片组成的 16 个网页，其中包括“小筑首页”“舞文弄墨” “幸福瞬间” “归去来兮” “家庭影院” “音乐长廊”六个方面。“小筑首页”即为首页，将各个页面的标题注明，便于查找；“舞文弄墨”中又包含两中文章类型“杂笔” “幽默”两篇文字；“幸福瞬间”中是两个相册，循环播放；“归去来兮”是留言板，因为能力有限，所做的比较简单，并不提供“提交”
6、功能；“家庭影院”围绕社会民生，音乐 mv，搞笑视频制作的，有三个第二级页面；“音乐长廊”中，第二级页面一个，第三级页面有六个，列举了六个不同歌手的上榜歌曲。制作网页的基本步骤：一、确定网站主题 网站主题就是你建立的网站所要包含的主要内容，一个网站必须要有一个明确的主题。特别是对于个人网站，不可能像综合网站那样做得内容大而全，包罗万象。没有这个能力，也没这个精力，所以必须要找准一个自己最感兴趣内容，做深、做透，办出自己的特色，这样才能给用户留下深刻的印象。网站的主题无定则，只要是你感兴趣的，任何内容都可以，但主题要鲜明，在你的主题范围内内容做到大而全、精而深。 二、搜集材料 明确了网站的主题以
7、后，就要围绕主题开始搜集材料了。常言道：“巧妇难为无米之炊” 。要想让自己的网站有血有肉，能够吸引住用户，就要尽量搜集材料，搜集得材料越多，以后制作网站就越容易。材料既可以从图书、报纸、光盘、多媒体上得来，也可以从互联网上搜集，然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。 三、规划网站 一个网站设计得成功与否，很大程度上决定于设计者的规划水平，规划网站就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成
8、竹。也只有如此制作出来的网页才能有个性、有特6色，具有吸引力。四、制作网页 材料有了，工具也选好了，下面就需要按照规划一步步地把自己的想法变成现实了，这是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂来进行制作。所谓先大后小，就是说在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。所谓先简单后复杂，就是先设计出简单的内容，然后再设计复杂的内容，以便出现问题时好修改。在制作网页时要多灵活运用模板，这样可以大大提高制作效率。 网站详细设计：做网站前，要首先想象一下整体布局，并准备好心中所想的素材，注意，要做好色彩搭配的重点准备，接着就是做模板。模板的好处是可以省时省力，不必重复
9、做很多个相同的页面。制作木板的步骤如下：1) 新建一个模板，在整个页面上插入四行一列的表格。2) 在网上下载一张图片，如图一，并将它 ps 一下，缩小大小，直到适合页面。插入第一行表格，把它做 logo 的封底。图一3) 给网页命名为“安静的浪漫” ，将这五个字在 word 中转变成艺术字，并复制，如图二。在封底上插入一个层，将图二插入层中，调整大小与位置图二4） 在封底右侧插入一个层，并插入一个六行一列的表格，键入“小筑首页” “舞文弄墨” “幸福瞬间” “归去来兮” “家庭影院” “音乐长廊”作为首页中的导航。5） 在“舞文弄墨”旁边在插入一个层，并制作一个两行一列的7表格，键入“幽默”
10、“杂笔”两行字，添加行为，onmousedown 显示层的内容，onmouseover 即为隐藏层的内容，这样，一个下拉菜单就做成了6） 步骤如上，接着做出另外四个下拉菜单7） logo 做完之后，在整个页面的第二行插入两列一行的表格，左边的宽度小于右边，并在左边插入四行一列的表格，设置背景颜色。8） 在第一行插入日期，第二行插入两个小图标（图三） ，分列在“个人档案”的两侧。图三9） 第三行中插入我的一张照片，即为图四，事先先用 Adobe Photoshop 进行缩放，使其适合表格的高度和宽度。图四10） 在第四行，键入“姓名” “专业”等个人信息，设置文字大小，颜色等11) 然后是整个网
11、页中的第三行表格，设置颜色，高度，插入图五，并键入“联系我” ，制作电子邮件链接。 图五12） 整个网页中的第四行键入了基本内容“河南工业职业技术学院电子商务张娟娟” ，并注明了日期13） 最后在模板中插入可编辑区域到此为止，网站的模板已经基本做成功了，可能会有一些小问题，这就需要在稍后的制作中修改了，将模板应用于各个网页，就会省去不少时间。接下来首先要做的就是首页，即 indexA 在站点中，新建一个页面，取名为 indexhtml，在“文件”中的“资源”找到模板，选中并应用，然后在模板中的可编辑区域中插入四行一列的表格。在第一二三行中，分别插入图六图七图八，并分别键入“舞文弄墨： 杂笔 幽
12、默” “ 歌曲长廊： 流行歌曲 轻音乐” “ 家庭影视： 社会民生 音乐视频搞笑视频” 。8图六 图七 图八在主页中的第四行，键入“幸福瞬间” ，并制作循环滚动的图片，其代码为：图片分别有：B indexhtml 就做好了，接下了，需要制作“舞文弄墨”页面了。制作三个网页，设置背景颜色，一共两篇文章，第一篇文章“衣不如新，人还如故” ，需要两个网页，所以在第一个网页中做了链接，可以从第一页跳转到第二页。第三个页面跟其他两个是相同的，相互连接着。设置后字体，颜色，大小，三个大同小异的网页也就做成了。效果图如下：衣不如新，人还如故9C 接下来是“音乐长廊”页面，首先要做一个音乐首页。在音乐首页中，
13、插入一个两行三列的表格，表格边框为 1。.在前两行的每个方格子中插入一个歌手的图片，下方再注明歌手名字，在第三行中，输入“返回首页” ，做成效果如下：周杰伦 金莎 许嵩在四川汶川刚地震的时候，我说，向有关部门捐款为零元，我的意思是不向红十字会捐款，因为那时候我就知道他们那里有很高的管理费（后来宣布不收取），但当时我没说明白管理费这事，怕被指责“关键时候不合时宜，影响群众的捐款热情”。后来，被断章取义为“捐款为零元”。当然，这就算了。在到了冬天，该捐衣被了，我有一些衣被，很多是别人送的，自己从来没有用过或者只用过一次，琢磨着捐了吧，但突然得知，不收用过的，要全新的。现在到了冬天，该捐衣被了，我有
14、一些衣被，很多是别人送的，自己从来没有用过或者只用过一次，琢磨着捐了吧，但突然得知，不收用过的，要全新的。这我就很奇怪了，首先，我深知政府部门想把大家捐款捐物的热情做成形象工程，来展示我们国民的高素质高觉悟高团结高收入，但我捧着一车九点九成新的衣被来，你说不收，让我去买新衣服捐给灾区人民，坦率的讲，我没有这个觉悟。首先，我给我自己的衣被，质量肯定不会差，肯定比为了捐新衣被而特地购买的要质量好，这点上，我是自私的，比如一样花五百元，我自己会给自己买一双鞋子，但如果是捐出救急，我会考虑买五双鞋子，让受援对象最大化，因为五百元我还考虑了运动性能，轻便，款式，保暖和品牌，但如果是捐物救急，那我就只考虑
15、保暖。你给灾区捐一个路易威登的背包不如捐两百个书包，这点大家都是明白的，而我相信，依照大家的觉悟，不至于把破烂都捐了，要捐的也肯定是款式不合适或者自己不喜欢了，但质量没有问题的衣物，我认为只要没有补丁，都可以捐了。10李宇春 吴克群 理查德-克莱德曼返回首页首页做好之后，需要做第二级页面，一共是六个歌手，所以它的第二级网页有六个，不过六个网页其实都是同一格式的，在这里只说明一个网页的制作方法，其他的都如上。以周杰伦为列子首先在百度百科中搜素周杰伦的名字，复制他的简介，并粘贴在现在制作的网页中。然后，在百度 mp3 上搜索周杰伦，页面中出现许多首歌曲，选中其中的十一首，复制并粘贴在可编辑区域中，
16、对所粘贴的东西进行筛选，只保留歌曲名称，专辑，试听这三项。最后，把从网上下载的图片进行缩放后，插进页面右侧，并在页面右下端键入“返回音乐首页” ，这样， “周杰伦.html”就完成了，效果图如下：周杰伦中国台湾华语流行歌手、音乐创作家、作曲家、作词人、制作人，作曲家，音乐公司老板之一、导演。近年涉足电影行业。周杰伦是 2000年后亚洲流行乐坛最具革命性与指标性的创作歌手，有“亚洲流行天王”之称。1 烟花易冷 跨时代 试听2 青花瓷 我很忙 试听3 稻香 魔杰座 试听4 彩虹 我很忙 试听5 夜曲 十一月的萧邦 试听6 说好的幸福呢 魔杰座 试听7 说了再见 跨时代 试听118 菊花台 黃金甲
17、试听9 给我一首歌的时间 魔杰座 试听10 跨时代 跨时代 试听11 听妈妈的话 依然范特西 试听返回音乐主页其他五个页面跟这个页面的方法一样，运用相似的程序，作出各个不同的页面。D 然后是制作“家庭影院”的网页，它包括“社会民生” “音乐mv”“搞笑视频”三个有相同之处的网页，其制作网页的方法跟音乐网页有相似之处，都是先在编辑中的页面上插入三行三列的表格，下一步就打开百度视频，在打开的网页中，点击“社会资讯” ，出现多个视频图像，选择其中的六个图像，复制并粘贴在正在制作的网页中，然后进行相应的修改，使其适合表格的高度和宽度，进行美观处理。并在最后一行中键入“返回主页”的文字，如下：美国国家地
18、理 2010十大新闻图片: 日本幽灵寿星问题扩大 最”年长” 发改委大幅度降药品价12实拍小男孩街头辛酸表演 双手 360揭开虐待动物视频背后的产业链 最低工资标准或再调整返回主页这是“家庭影院”中“社会民生”的制作方法， “音乐 mv”“搞笑视频”都是通过这种方法做的，接下来要做的是留言板。E 留言板是网站与浏览者交流的一种基本方式，留言板的基本功能包括查看留言，添加留言，修改留言，删除留言等，在真个网站中，留言板只是个展示，其构造相当简单。现在空白页面中插入五行一列的表格，在第一行设置背景颜色，并插入两张图片作为留言板的标头：在第二行中键入文字“姓名” ，其后插入“文本字段” ，设置其属性
19、，使其看起来美观；在第三行中，键入“性别 帅哥 美女” ，并在中间插入“单选按钮” ；在第四行中，键入“想对我说”内容，并插入“文本字段” ，选择“多行”并设置其高度与宽度；最后一行则需要插入一个“返回”图标，作为13返回的直接体现，通俗易懂：F 相册的制作是整个网页的重点，也是难点。首先下载了一个“翻页 flash 相册” ，在这个软件中，认真研究各个按钮的功能，制作了两个相册，然后插入“flash 插件” ，将相册插入，制作成功。如图：各个网页做好之后，剩下的任务就是链接，将歌曲视频连接在百度网上，将各个网页之间也进行链接，是十六个网页成为一个整体。优缺点及解决办法：到此为止，整个网页基本
20、做成功了，查看整个网站，有缺点又有优点。优点是网站主页采用静、动相结合的方式，即静态的主画面和动态的图片相结合，静态主页方式介绍个人风采、优点特色。整个网站相对来说，还是比较顺畅，并未出现孤立的页面。缺点是留言板的制作太过简单，甚至没有提交功能；另外，制作的个性相册并未起到很好的效果，放进页面中，图像太小，看不清楚。对于缺点，解决方案很多，比如掌握动态网站运行环境的配置；掌握利用 Dreamweaver CS3创建动态网站的方法。但是不管优点多还是缺点多，这仅仅是一次我网页制作上的一次锻炼，相信在以后，我对网页的人是会更加的明白透彻。14总结心得在这次实训中，用了八九天的时间做了一个网站，当看
21、到最后的成果，心里有点小成就。虽然并不是完美，但对于我们这种初学者，就是一种鼓励。通过这次试训，我终于把书本中的知识又重新理解了一遍，并将其运用到网页制作中，充分发挥出他们应有的作用。在制作网页的过程中，遇到了很多以前从未遇到的问题，比如：图片怎样左右循环滚动；模板的应用，flash 的插入等等，这些问题或难或不难，有的通过同学之间的讨论解决的，而更多的是在网上学习的。这让我认识到了另一方面的问题，上网还有很多有意义的事情可以做。其实网页设计跟学习别的东西一样，也需要兴趣，所谓的兴趣也不是三分钟热度，是一种执著。 制作网页的过程中需要耐心，当你碰到一个问题时，如果不能立刻得到问题的答案，你可能
22、需要很长时间去解决，我就碰到过一个问题，用了很长时间才解决。 学习网页设计需要坚持，坚持不断的学习，因为设计网页的软件在不断的更新，因此我们要不断的学习 两个星期的实训将要结束，其中的酸甜苦辣我会在今后的日子里不断地去咀嚼，去回味，去探索。从制作网页过程中，我学到了新的美化网页的方法，运用了更多以前未运用的技巧。这使我学到了更多的知识，并且为我自己在制作网页这方面积累了一些经验。这些将是我人生中的一次重要的经历，将是我今后走上社会后的一笔巨大的财富。这次实习的收获对我来说有不少，我自己感觉在知识、技能等方面都有了不少的收获。总体来说这次是对我的综合素质的培养，锻炼和提高。 15参考文献 池同柱网页设计与制作案例教程 临风小筑 http:/ 多特软件站 http:/ 庆秋辉.网页制作教程与上机实训【M】北京：机械工业出版社，2006. 孙良军.Dreamweaver 8 完美网页设计商业网站篇【M】.北京：中国电力出版社，2006. Dreamweaver 8 时间轴，电子相册，框架等http:/ 吴东伟，吴俊海，等. Dreamweaver 网页制作基础训练 +典型案例【M】.北京.：清华大学出版社，2006. .Dreamweaver 经典问题 45 条 http:/ 如何在 dw 中插入 flash 动画http:/ .Dreamweaver 视频课程http:/
