基于HTML+CSS+JavaScript校园社团网页设计【100011355】

# 天文社社团网页设计 ## 网站的目的和意义 通过对校园社团网站的搭建，利用互联网手段更好的展示社团形象，以及介绍本社团的各个部门、活动、比赛项目成果，同时能实时跟新社团活动信息，为广大师生群体提供了解与报名渠道，吸引更多的天文爱好者参与到社团活动中来。 ## 网站的栏目设计 关于设计上 - 为了在常规布局上突出特色，所以整个网站没做长页面； - 主体颜色是蓝色调（社团色），文字大多采用英文； - 同时主页上也不安排明显的社团标识，感觉这样增加观者对网站了解的欲望（并不是不点题）。  ## 网站的结构图和页面组成 1.主页  分为６个模块：ａｂｏｕｔ　ｕｓ、ａｓｔｒｏｎｏｍｕｙ、ｓｈｏｗｒｅｅｌ、ｔｗｅｅｔｓ、ａｃｔｉｖｉｔｙ、ｊｏｉｎ　ｕｓ 。 2.ＡＢＯＵＴ　ＵＳ  部门介绍以及部门职能介绍。 ３、ＳＨＯＷＲＥＥＬ  图片墙，用于展示社团活动成果 ４、ＴＷＥＥＴＳ  往期社团推文展示。 ４、ＡＣＴＩＶＩＴＹ  社团主要活动展示。 ５、ＡＣＴＩＶＩＴＹ  社团主要活动展示。 ６、ＪＯＩＮ　ＵＳ　  招新表单。 ## 网站实现的主要功能和关键技术 主页 主页设置了个栏目和右下加的4个角标，所有内容全部采用框架堆叠而成，  用css实现，点击右下角图标小窗口的弹出   ＡＢＯＵＴ　ＵＳ 基本的图文排版  左上角标返回主页。 ＳＨＯＷＲＥＥＬ  用JQ实现的动态图片墙，实现图片的动态分类展示   ＪＯＩＮ　ＵＳ 表单实现报名功能  PHP脚本的编写与数据库后台的连接   ## 调试分析与测试结果 ### 测试内容 - 测试各个页面链接是否正常。 - 测试图片、flash动画等是否能正常显示。 - 测试脚本、外部样式表链接是否正常。 - 测试网页特效是否正常显示。 ### 测试结果 - 经过测试，整合后网页各个页面连接均正常。图片、flash动画、各个特效能正常显示。 - 外部样式表整合后，没有冲突项。且链接正常。能正常使用。 - 脚本效果可以正常显示。 ## 课程设计总结 本次实践目的旨在检验我们平时课程中所学知识，并将其与实践相结合，在实践中进一步巩固掌握以及熟悉网页制作的基本流程。而通过本次网页设计实践，在同学的帮助与老师的指导下，我不仅得到了知识与技术的提升，心得上也收获颇丰，一下进行总结。 首先阐述一下在使用DW过程中的一些对网页设计的见解，及在设计网页时我所了解到的一些优秀网页设计的基本原则 - 一个优秀的网站需要明确的主体。整个网站内容围绕这个主题展开，所以在制作网站时首先要明确网站的目的是什么，面向的用户群体是谁，用来做什么。其中，用户群体是网站成败的关键，为了不让用户在看到你的页面第一眼就关掉，还得分析用户需求、心理等，这也是网站设计的关键问题。 - 完成上面的构建后，基本框架便形成的。接下来需要考虑的就是网页的布局与内容。 - 布局：这也是判别一个网页优劣的重要标志。页面直接的连接关系是星型、树形、网状连接、内容层次的递进如何流畅不显突兀……链接混乱、层次不清的站点会造成浏览的困难，对用户带来较差的体验。 - 内容：首先要主体明确。内容上呈现逐渐递进关系，这样能吸引观者的兴趣，达到网页制作的目的。 - 最后就是实现。HTML、CSS、JS的一些基本语法与后台中PHP脚本语言与数据库搭建。都是课堂上的知识不加以赘述。 当然在实现过程也不要忘记实时的笔记以及问题的分析总结，一下列举几个我在实践过程中遇到对我个人比较有意义的问题： - 图片排布： 图片的部署是我在实践中遇到的一个比较头疼的问题，一是随意性的排布容易导致图片模糊或是失针；二是图片的位置在不同浏览器下往往会造成不同的结果。 而相关的解决方案，一是通过属性首先了解图片长宽比例，构建一个相应的<div>标签，或者事先用ps等图片处理软件裁剪好，这样在一定程度上能解决图片因为长宽比例改变造成的失真问题；而图片位置，则需要考虑到浏览器的兼容性，相关标签是否在当前浏览器下适用，而框架则最好采取绝对定位。 - MYSQL只能显示英文问题。 这个问题弄了好久，通过大量的资料查略，最后总结出了一下几个解决方案： - mysql.ini设置。将mysql的默认字符集为latin1,将字符集改成utf8。（这也是一直卡住我的问题） - 数据库表单上的处理。字符集一律改成utf8。 - 清空浏览器所有缓存。 - 确保编译器上的字符集也是utf8 总的来说，这次实践可以是我迈入网页设计大门的第一步，当然 前端知识也不仅仅只限与当前所学的html、CSS、JS，这些只是简单的冰山一角，真正的前端工程师，需要掌握更广阔的技术知识以及更有深度的技术内容。所以在之后的学习过程中，还得以跟专业的要求来规范自己的学习，多参考多实际。总之，任重道远。