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

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