网页设计课程设计报告_4.docx

网站开发与网页设计学院：计算机与通信工程学院班级：计算机12-01姓名：学号：网页设计课程设计报告上海世博会是中国的一大骄傲，就像08年的北京奥运会一般耀眼，因为这些盛大的活动的举办不仅表明中国是一个有实力、有能力的国家，同时也说明中国的实力也是被世界所承认，在世界之林中也是有着至关重要的作用。虽然上海世博会已过去多年，但是它在我心中还是犹如原来那般耀眼，而且我也为自己没有去世博而感到遗憾，所以，今天为了弥补这个遗憾而做了这个以上海世博会为主题的网页设计，以此来表达我对上海世博会的向往之情。一：编辑工具：DreamweaverCS3版本和DreamweaverCC版本。同时借用了一些辅助软件，如PhOtOShop、美图秀秀等图片处理软件。二：对资源来源的说明：在建立网站的过程中，我不断学习各个网站设计的风格，以及世博会官网的模仿，较大程度上从百度，以及世博官网的各种资料。三：测试环境：本网站里的所有内容经过测试可在IE浏览器（本人使用的是最新版）中完美运行，故望使用本网站的用户使用IE浏览器运行，谢谢合作。四：各页面布局图及操作:导航栏主题区（含图）参观人数展示四个超链接，分别链接四个页面网上世博区，点击可进入展馆区，分别列出中国馆和美国馆，点击可进入。中国馆资讯活动图片展小区©个人信息展示在首页面布局中，首先用Dreamweaver里的布局模式吧页面的整体框架进行布局，然后在对各个区域进行细化操作。在导航栏中放置的是一张经过修改后的图片，因为是导航作用，所以对上面的一些文字设置了热点，这样可以通过点击热点处进行超链接，从而跳转到其他的页面。对于区，则是只有一些文字和图片起到一些美化作用。在®区中，放置了一张关于参观世博人数统计的图片，在下方还有一个热点，点击可查看详情。在中我插入了一个表格，方便人们的选择，同时在这个表格中我放置了四个超链接，点击可分别进入四个页面（这四个页面在后面我会讲到）。在中的图片是一张链接世博官网的图片，整张图片都被热点覆盖。®、采用的是相同的方式，将三张图片放入了一个表格中，然后对图片进行处理即可。而图片展示区则是放入了一些图片，最后一个C）区，是我个人信息的展示区。这就是整个首页面的布局以及操作。因为后面的页面都是采用和首页面相同的方式进行布局，无疑都是在各个整体框架中插入表格，在表格中插入图片与文字，实行图文并茂。建立超链接，链接到相应的位置。进行排版，使页面看上去整洁、美观。在首页插入部分代码，呈现出不同的动态效果。建立关于“场馆大全”、“中国馆”、“世博地图”的子网页，然后进行超链接。最后进行排版以及色彩等编辑，使得网站浏览起来舒适、美观，故下面这些布局的操作也不再一一说明，仅仅只画出他们的布局图。导航栏中国馆图片1中国馆概述中国馆图片2从上百种红色材料色样中精心挑出的“中国红”中国馆图片3国宝级文物将现身百米墙面重现清明上河图中国馆中的清明上河图图片个人信息展示中国馆法国馆荷兰馆图片图片图片对中国馆的说明对法国馆的说明对荷兰馆的描述韩国馆意大利馆英国馆图片图片图片对韩国馆的描述对意大利馆的描述对英国馆的描述个人信息展示3、“展馆大全”页面布局图场馆地图（标题）场馆地图（图片）个人信息简介4、“地图”页面布局图（这个页面中还加了一个Java脚本，使得页面布局更加生动、合理。）港人热捧动版清明上河图（标题）在此插入了一张图片并在下部做了文字说明此处为全文字解说，是对“港人热捧动版清明上河图”这一内容的解说“看世博理由”的图片对世博的一些说明此处插入了一些图片，并对图片内容进行说明（此处内容比较多，可能和真实页面比例不一致，但是基本内容就是以上这些，所以并没按比例画出。）此处附有文字说明，采用的是纯文本内容。导航栏美国馆图片1对美国馆的解释说明包括“概况”和“展馆设计”两大内容美国馆图片2个人信息8、“美国馆”页面布局图世博精彩回顾（标题）此处是一个关于世博精彩的视频个人信息9、“世博精彩回顾”页面布局图（此处的视频经过测试能在IE浏览器中完美播放）五、对所用技术的说明本次网站制作使用了样式表、库元素、建立模版、正确应用层、时间轴动画以及行为等技术，使网页呈现出各种动态效果。六、总结和体会