Web个人网页设计实验报告

郑州轻工业学院 Web前端设计网页设计报告 院系： 班级： 学号： 姓名： 时间： 设计报告 网页设计要求 题目：设计一个不限内容、题材的个人网站，要求页面数量不少于7个。 具体要求 1. 网页内容详实、科学、准确、积极、健康、活泼，网页文字及相关链接无错误。 2. 网页文件及文件夹的命名符合要求，文件组织合理。 1) 首页源文件命名为：index.html。 2) 文件夹image存放与网页相关的图片、动画文件等。 3) 说明文件Readme.txt内容包括：网页创意及制作的简单说明。 3. 网页设计整体设计思路清晰，网页布局合理，风格明快、主题页和其他子页之间协调，主题分明、重点突出。栏目及版面设计，层次结构及链接结构明确，内容布局合理，图画运用得当，效果生动。 4. 网页上各主题和附加图片、背景的色彩选配方案要注意做到：色彩柔和、搭配美观、朴素大方，不应过分夸张，使视觉疲劳。 5. 使用表格、框架、Css各布局一个页面。 6. 有自己创作的flash、JavaScript可加分。 7. 文档提交：电子稿与报告（电子稿—网站、报告—网页创意及制作的简单说明）。 网页主题及内容 主题：在世界的各个角落，邂逅最美的你 内容：一些著名的外国旅游、度蜜月胜地，感受当地的风土人情，体验不一样的异域风情。 网页创意 因为自己本身特别喜欢旅游，喜欢尝试不一样的生活环境，和每个少女一样，我也存在着一个和未来的另一半环游世界的梦，所以这次我的网页是以“在世界的各个角落，邂逅最美的你”为主题展开制作，在实现这个环游世界的梦以前，提前感受下各国的风土人情。 网页制作的简单说明 通过主页index可链接到 “马尔代夫的蓝色心情（Maerdaifu.html）、法国的紫色浪漫风情（French.html）、在雅典，我愿意带你，走遍阳光洒过的地方（XILA.html）、行走在巴黎（BaLi.html）、巴塞罗那（Basailuona.html）、ReadMe（ReadMe.html）”，所有图片都经过PS处理过。 1.首页（index.htm）：采用了CSS布局页面。 1）创建了style1.css文件在style文件中。 2）插入的Div标签有：date标签，menu标签，main标签，make 标签。 3）在代码中插入了背景音乐““。 4）menu标签中分别设置了5个超级链接。 5）插入了AP Div1“显示歌词“、AP Div2滚动歌词文字，并设 置了歌词栏的“显示-隐藏”。 2. 马尔代夫的蓝色心情（Maerdaifu.html）：采用Spry选项卡式面 板+Ap层 布局。 1）采用spry选项卡式面板布局。 2）面板中设置了四个选项：马尔代夫简介+景点游玩及指南1+ 景点游玩及指南2+图片欣赏。 3）设置了AP Div1 - AP Div14个层。 4）AP Div8插入了滚动歌词，AP Div13插入滚动图片。 5）在代码中插入了背景音乐。 3.法国的紫色浪漫风情（French.html）： 1）采用spry选项卡式面板布局。 2）面板中设置了五个选项：普罗旺斯简介+活动+主角(1)+主角 (2)+图片欣赏。 3）设置了AP Div2 - AP Div15几个层。 4）AP Div15插入了滚动歌词，AP Div12插入了滚动图片。 5）在代码中插入了背景音乐。 4.在雅典，我愿意带你，走遍阳光洒过的地方（XILA.html）： 1）采用表格布局。 2）表格中设置了3个模块：伯罗奔尼撒半岛(Peloponissos)+ 圣托里尼岛(Santorini)+雅典(Athens)。 3）设置了AP Div2 - AP Div20几个层。 4）在代码中插入了背景音乐。 5.行走在巴黎（BaLi.html）： 1）采用Ap层布局。 2）设置了AP Div1 - AP Div5几个层。 3）AP Div2 设置为滚动图片。 4）在代码中插入了背景音乐。 6.巴塞罗那（Basailuona.html）： 1）采用spry选项卡式面板布局。 2）设置了AP Div1 - AP Div5几个层。 3）AP Div 3 设置为滚动图片。 4）在代码中插入了背景音乐。 7.ReadMe（ReadMe.html）： 1）采用Ap层布局+表格布局。 2）设置了AP Div1 - AP Div2两个层。 3）AP Div2 设置为滚动字幕，并插入了日期。 心得 通过《Web前端设计网页设计》的学习，我喜欢上了网页设计，在制作网页的过程中遇到很多问题，但是经过自己在网上搜索、图书馆找材料以及老师的讲解帮助下，都解决了问题。虽然我现在制作网页的能力还不好，但是我会在大学期间好好实践，将网页的制作变成自己的技术。