网页设计报告(篮球世界).doc

钦 州学院网页设计课程设计报告篮球世界 院 系 物理与电子工程系 专 业 电子信息工程 学 生 班 级 2007级3班 姓 名 谭添兼 黄贵恒 陈帆 韦德钰 学 号 0705401346 0705401302 0705401350 0705401336 指导教师单位 钦州学院 指导教师姓名 曲艺 指导教师职称 助教 2010年11月篮球世界电子信息工程专业2007级 谭添兼 黄贵恒 陈帆 韦德钰指导教师 曲艺摘要 根据设计的指标和要求，我们小组在经过一段时间的讨论和耐心找材料，最后利用Dreamweaver 8制作出一个小型网站：篮球世界。该网站属于博客类网站，为每个人提供了一个信息交流的传播平台。 “篮球世界”这个网站页面清晰明了，从首页的NBA神话到各个子页，都是链接得很好，层次分明，内容新颖独特，让更多的篮球爱好者一起共享篮球世界里的瞬间与永恒，也让我们的生活舞台更加绚丽多彩。关键词：网页设计，篮球世界，精心设计，博客分享设计目的:（1） 使学生对于网络信息及网络信息发布有更加深入的理解；（2） 提高学生的网页设计与制作能力。（3） 让更多的篮球爱好者一起分享篮球世界的魅力。设计技术指标与要求:（1）根据自己的兴趣爱好或专长，确定一个网站主题；（2）应用所学的相关知识，进行个人网站的规划与设想； （3）根据自己网站的规划思路和想法，利用网页设计工具来制作自己想要设计的网页。目录前言11 网站设计与规划11.1 网站“篮球世界”的主题11.2 资料与素材的收集21.3 LOGO的设计说明21.4 “篮球世界”的结构32 各级网页的风格说明33 网页的制作与样例44 设计体会 5参考文献 5前言在Internet飞速发展的今天，随着各种通讯技术的发展，互联网已在中国逐步进入普及阶段，许多人在充分享受浏览新闻，网上聊天，网络游戏，网上交易，收发电子邮件等网络的各种乐趣后，开始不满足于被动式的接受，希望能主动参与网络，因此大量的个人网站应运而生了。而博客就是网站的一种，博客，又译为网络日志、部落格或部落阁等，是一种通常由个人管理、不定期张贴新的文章的网站。Internet上发布信息主要是通过网站来实现的，获取信息也是要在Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而受到人们的重视。1 网站设计与规划1.1 网站“篮球世界”的主题 篮球是世界上普及率极高的运动项目，它占用场地小，简单易学，趣味性、竞技性、娱乐性融于一体。如今，篮球运动蓬勃发展，商业化、职业化越来越深，最成功的典范是美国的NBA（图1）。因此，我们制作了篮球世界博客，与大家交流和分享自己的体会。图1博客为每个人提供了一个信息发布和知识交流的传播平台，博客使用者可以很方便地用文字、链接、影音和图片建立自己个性化的网络世界。博客可以作为网络个人日记；展示个人某个方面的空间；网络交友、学习交流的地方；或通过博客展示自己的企业形象或企业商务活动信息等。篮球世界博客是真正用心分享篮球信息的平台，给广大篮球爱好者提供篮球视频欣赏和最新的娱乐资讯。大家在这里看到最新的篮球赛事，新闻动态，网络视频，还可以发表评论，交流看法，共享资源。1.2 资料与素材的收集首先新建一个总目录来放置网站的所有文件,然后再在这个目录下建立两个子目录:“images”和“cailiao”。从各个相关网站上收集图片资料,将其分类，复制并保存于“images”文件夹中。查看每张图片，是否满足网站制作的条件，如果需要修改，就使用“photoshops”软件对其进行相应的修改（图2）。 图21.3 LOGO的设计说明 LOGo以红色为底，中间三竖一横四道白线，犹如一个色彩鲜明的篮球（图3），预示着篮球运动的激烈与兴盛，勃勃生机。图31.4 “篮球世界”的结构 点击网站，进入网站首页。首页包括主页、日志、收藏、关于我，日志和收藏各包含四个子网页。“篮球世界”首页日志收藏关于我图42 各级网页的风格说明点击进入首页，背景为黑白两色，简洁明了，一目了然。首页是网站最主要的页面，它是进入其他页面的必经之路。也是网站的摸板，它必须具备logo，导航条是进入下一张网页连接所在，不可或缺。整个首页呈国字型布局，顶上是网站标志和导航条，左边为8个链接，右边为公告栏、网站日历、用户登录，中间为主要部分，与左右一起罗列到底（图5）。图5点击左边的连接，则在中间显示下一级网页，简单快捷，十分方便（图6）。图63 网页的制作与样例首先确定网站的主题篮球世界，根据主题搜集资料，包括图片资料和文字资料。资料搜集完毕后建立站点将资料保存进去，以备调用。设计LOGO样式，尽量符合主题思想，再设计BANNER与LOGO相协调。建立第一张网页做主页，作为进入网站的首张页面。制作网页首先插入一张表格，然后再向表格中插入图片和文本，通过拆分和合并单元格来修改表格，使其达到所需要的样式。图7在表格形成的框架内插入图片，输入相应的文字，并再次通过拆分单元格，输入导航文字。使用超链接，使文字或图片起到导航作用。图8其余页面的设计与首页的设计风格相同，只是在布局和内容上面有所差异。但是差异并不太大，保持相同的风格。制作简单，却不失个性。表格的定位使得网站的设计更加的容易，可以事先用PHOTOSHOPS图象处理软件处理一些需要使用到的图片，使它们看来更加美观。按钮和图标的设计也是体现网站风格的一项重要内容。4 设计体会通过此次课程设计，会用DREAMWEAVER来制作静态网页。在设计过程中，组员克服困难，认真完成课程设计。网页设计的时候，要不停的预览，查看是否合乎显示器的标准。通过这次网页课程设计，我们学到了不少与网页有关的知识。参考文献1 范兆东 张飓 李冬. 网页基础教程与上机指导M.北京：清华大学出版社.2 何琛 催亚海 曹汉珍 网页设计经典商用案例中文版、上海：上海科学普及出版社3