《网页设计》大型作业 任务书

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