网页设计
实验报告书
学院 机电工程学院 专业 工业设计 班级08-1班
学生 邱碧星 指导教师 吴良海
完成时间 年月月日
网 页 设 计 综 合 实 验 报 告
一、 实验目的
综合运用所学知识，建设一个小型网站。使学生掌握网页制作的基本方法和网站建设的流程；使学生掌握用网页呈现信息的基本技术，提高学生的计算机应用技能。
二、 实验设备
多媒体计算机；Fireworks、Dreamweaver等。
三、 实验内容
综合运用本课程所学的知识制作一个表达某一主题的网站。
注意事项：
每个同学以自己的学号+姓名建立目录作为站点根目录，网站测试正确
后打包提交。
所有文件和文件夹全部用英文字母和数字命名，禁用中文、全角字符、
空格等命名。
首页文件命名为 index.html
不要使用非原创的大容量的视频文件。
严禁抄袭
四、 实验要求
主题鲜明 布局合理，界面美观 内容健康，组织合理（栏目），目录层次清楚 导航清晰、链接正确 多媒体
五、 实验步骤
1. 确定网站的建设目标
主要是要达到展示个人的作品、讲述个人兴趣爱好、明确发展方向、关于专业方面的个人思考以及专业相关资料链接的目的。
第一方面：明确方向。
主要是展示我个人的兴趣爱好，专业背景等方面的内容。重点是总结我大学三年来的过程与收获，是一个查漏补缺的过程，同时也是在促使我不断进取的一个武器。
第二方面：达到交流的效果。
网站的《与我相关》网页较为系统的介绍了我自己，可以让我更加认清自己。
同时，也是在表明是一个怎么样的人，让那些有相同兴趣爱好的朋友可以一起交流。
第三方面：推销自己。
网站里面展示了我大部分的成绩，以及我以后发展的方向，让那些相关的公司可以了解我更多一点，明白我可以为他做点什么，决定着他是否会录用我。
第四方面：教学目的。
这个网站其实是与《网页设计》这门课程挂勾的，为了完成教学任务，也是我做这个网站的初衷之一。
2. 确定网站的主题、风格
主题主要是展示我在工业设计这个专业的学习所得，与大家交流我在这大学这几年中所学习到的各种技能，如：手绘技能、软件表现技能、创意表达等方面的技能，同时辅以我的兴趣爱好面板。
我的网页风格是简洁的，因为字如其人，通过我的网站就知道我的为人如何，从第一印象让别人知道对我是否感兴趣。
3. 规划网站的主要结构
4. 搜集准备素材
搜集：搜集个人作品、兴趣爱好、设计素材等相关的素材；
整理加工：把搜集好的素材通过photoshop、Fireworks等平面软件进行裁切、调节对比度、亮度等相关的后期处理工作；
制作与存储：把整理好的素材分类存储好，方便查找。
5. 制作网页并形成网站
根据网站的主要框架结构对网站进行制作
i. 利用Photoshop软件制作好网站的首页、栏目页、内容页三个页面（如下图所示），注意考虑网页设计的相关要求，如：尺寸、字体、字号、LOGO、主题风格等方面的要求；
图1___首页
图2___栏目页
图3___内容页
ii. 利用Fireworks对三个制作好的页面进行切片、GIF动画、网页导航栏、弹出菜单、交换图像等方面的相关操作；
iii. 利用Dreamweaver CS4软件对网页做更进一步的处理
规划和设置站点；
把栏目页、内容页作为模板页插入其它的页面；
使用链接、锚点把整个网站组织起来；
插入多媒体元素；
建立网站相册；
其它一些细节的制作，如字体样式、CSS样式等。
6. 服务器空间和域名的申请
域名就是网站的网址，域名的目的是让别人能够通过输入网址访问所发布的网站。我主要是利用学校提供的资源模拟了一次服务器和域名的申请工作，最终申请成功。
7. 网站的测试与上传
i. 利用Dreamweaver CS4软件自带的功能对网站进行测试，如浏览器兼容性、断掉的链接、外部链接、孤立的文件、服务器调试等方面的测试，并对错误的地方进行改正、改进；
ii. 测试无误后就把站点上传到学校的服务器中，并体验效果。
8. 网站的宣传推广、更新和维护
把制作好的网站通过论坛、QQ空间、Weibo进行宣传推广，当有新内容时，对网站进行更新，并维护。
六、 作品特色
1. 制作了一个完整的网站，并且能做到动静结合，整个网站显的严谨而不失趣味性；
2. 按照最初的设想制作了网站，达到了要表达的目的。
3. 偏向于专题，侧重点放在交流中心模块。通过展示设计、手绘练习、软件表达等五个子目录展示了我的专业兴趣与特长，帮助他人对我的了解。
七、 心得体会
网页和网站是我们几乎天天接触的东西，但是要想完成一个网上冲浪者和一个网页制作者之间的身份转换，需要做出不少层面的努力。
1. 第一个：网页设计的目的。
首先，不论做什么事情，我都有我的目的性。做一件事情，是为了完完成教学任务而去做事情，还是借完成作业这个契机来提升自己的综合互素，所谓态度决定高度，相信不同的对待事情的态度，收获也是不一样的。此次网页设计，我做的是一个个人的网页，展示了在工业设计这个行业我的相关技能。
2. 第二个：网页设计的基础知识
对于像我这样一点网页设计基础知识都没有的同学，当然是要先学习基础知识，磨刀不误砍柴功，像一些专业术语，如CSS样式、盒子模型、锚点等需要去掌握名词解释方能在做网页时可以得心应手。
3. 第三个：素材收集
开始做网页时，第一个要做的是组识好网站的主要结构，对网站的总体结构了然于胸，制作起来就会得心应手，游刃有余。其次，是根据网站的主要结构去收集整理素材，注意不同的素材放不同的文件夹中，方便使用。
4. 第四个：软件的使用能力
我在做网页设计中，用到了photoshop、firewords、dreamweaves三个软件，同时还用到了不少的插件。可见为了做成一个网站，需要在不同的软件中切换，会颠覆不同的使用习惯。综上，需要对相关的软件有一定的了解，你可以不是很精通，但是做事情，总得会用工具才能事半功倍。
5. 第五个：毅力+耐心
做一个网站就如做一个项目，在主要结构组织好后，就要用素材去填充框架。有些内容，可能跟前面的会有重复，这时候就更加需要毅力跟耐心来支撑了。在网站设计的过程中，如内部链接、锚点的使用都显的比较乏味，但当你做好网站后一种成就感就会油然而生。
综上，做好一个网站是一种能力的体现，在坚持下来，收获的东西也很多，不足的地方也有很多。但是，我已有了网页设计的基础，跨入了网页设计的大门，有了知识的储备，当有需要的时候就可以拿出来用了。
课 程 学 习 总 结
时光飞逝，这个学期的选修课----网页设计与制作到目前为此就暂且告一段落了，通过这门课程的学习，我掌握了网页制作的基本流程，透过网页设计的同时了解了一个项目的运作方式，总的来说，获益不小。
网页设计是一门实践性很强的学科，开设这门课程是目的是综合运用所学知识，建设一个小型网站，使学生掌握网页制作的基本方法和网站建设的流程；使学生掌握用网页呈现信息的基本技术，提高学生的计算机应用技能。
从学习目标这一层面来说，开设这门课程的目的是达到了。通过一个学期的学习，我们都能提交一个自己制作的网站，基本上掌握了网页制作的基本方法与网站建设的流程，提交了我们的计算机应用技能。
学习内容主要是围绕着建设小型网站而展开，从网页基础知识、网页制作的工具到最终网站的形成。一个网站可以看作是一个项目，虽然这个项目比较小，但对于掌握一个项目的流程是很实用的。
就我掌握的知识面，在网页设计这个行业来说只是冰山一角，只是把网页设计的基础流程拉了遍，只能说是迈入了网页设计这个行业。万事开头难，现在对个行业有了一个了解，那么就有了进入这个行业的通行证，只要有兴趣，希望在网页设计这个行业有所建树，为之付出就可以了。
在以后的学习中，可以多一些收集网页设计的素材，起码要有一种收集素材的意识。在需要的时候，可以拿出来用。其实，网页设计是一个设计的过程，并不是一个软件应用的过程，不是说软件用的好，就可以制作出唯美的网页。要知道网页设计的目的，是为了让别人了解自己、是为了推广公司的产品等，所以就要求制作出可读性很强的网页。为此，可以多点留意一些相关的网页，通过借鉴精华来提高自己。
在这门课程的学习过程中，学习氛围相对来说比较轻松愉快。我是比较喜欢这种氛围，因为我认为，学习是自己的事情，学不学在于自己，在于学生本人的的自制力水平。但对于，学校来说，这就不是一种好的现象。也许是大四的原因，来上课的同学不见得有很多，他们或是为了找工作，或是为了课程设计，总之这是不是一种不对自己负责的表现呢？我不去下定义，因为学习是自己的事。
网页设计综合实验报告
在整个课程的学习过程中，老师拿出了我们同学当中一员的作业作为案例来讲授各个知识点，我个人认为这是一种比较好的教学方法，因为这样接近了我们之间的距离，这样平辈之间的学习可以让我们觉得更加和蔼可亲。其实，一个学生的学习兴趣与其对这个老师的喜爱程度成正比，如果学生对老师产生排斥心理，那么学生对这门课程的抵触心理有极有可能。此外，拿我们自己的作业来讲解，可以增加老师对我们这个专业的了解，那么讲授知识点的时候就会有所侧重，这样我们做出的网站就更加贴近我们的专业，也更有专业水准。
在这门课程的讲述过程中，老师也给了我们讲述了一些网页设计的意识。借人精华，以铸辉煌。这句话就看你怎么去理解吧，不是教你怎么去抄袭，而是多看、多积累别人好的创意，然后去融会贯通，形成自己的创意。设计界有这么一句话：借鉴别人的创意，而让别人看不出灵感的来源这才是最高境界的创新。为什么别人会看不出来？因为这个创意已经融入了你自己的想法，就是你的原创了，别人还怎么看的出来呢？一个人再聪明也没有一个团队聪明，三个臭皮匠胜过一个诸葛亮也就是这个道理吧。基于此，我们何不站在巨人的肩膀上去创造自己的辉煌呢？同时，老师也给推荐了几个不错的插件，在网页设计的进门的过程中，这也是相关有用的。思维是我们的，工具就是拿来用的，帮助我们达到一个高度的。在使用的过程中，我们可以去深入了解插件的运作原理就更好了，就不用受到插件的太多限制，可以根据自己的需要为所欲为了。
课程的安排可以提早一些。在大四开设这门课程，多多少少会与学生的安排有所冲突，虽说学生的天职是学习。但是，在这个浮躁的环境下，要静下来学习真的有点难，同学都为了就业的事情而忙碌着。而且，我们的作业大都做个人的网站，这就有了一个总结这几年的作用。如果，开设的早一些，在一些薄弱的环节，同学就可以抽时间去补充。
以上内容只是我个人的愚见，不当之处，还请老师、同学指正。
工业设计08-1___28号___邱碧星___第10页___共10页
网页设计
实验报告书
学院 机电工程学院 专业 工业设计 班级08-1班
学生 邱碧星 指导教师 吴良海
完成时间 年月月日
网 页 设 计 综 合 实 验 报 告
一、 实验目的
综合运用所学知识，建设一个小型网站。使学生掌握网页制作的基本方法和网站建设的流程；使学生掌握用网页呈现信息的基本技术，提高学生的计算机应用技能。
二、 实验设备
多媒体计算机；Fireworks、Dreamweaver等。
三、 实验内容
综合运用本课程所学的知识制作一个表达某一主题的网站。
注意事项：
每个同学以自己的学号+姓名建立目录作为站点根目录，网站测试正确
后打包提交。
所有文件和文件夹全部用英文字母和数字命名，禁用中文、全角字符、
空格等命名。
首页文件命名为 index.html
不要使用非原创的大容量的视频文件。
严禁抄袭
四、 实验要求
主题鲜明 布局合理，界面美观 内容健康，组织合理（栏目），目录层次清楚 导航清晰、链接正确 多媒体
五、 实验步骤
1. 确定网站的建设目标
主要是要达到展示个人的作品、讲述个人兴趣爱好、明确发展方向、关于专业方面的个人思考以及专业相关资料链接的目的。
第一方面：明确方向。
主要是展示我个人的兴趣爱好，专业背景等方面的内容。重点是总结我大学三年来的过程与收获，是一个查漏补缺的过程，同时也是在促使我不断进取的一个武器。
第二方面：达到交流的效果。
网站的《与我相关》网页较为系统的介绍了我自己，可以让我更加认清自己。
同时，也是在表明是一个怎么样的人，让那些有相同兴趣爱好的朋友可以一起交流。
第三方面：推销自己。
网站里面展示了我大部分的成绩，以及我以后发展的方向，让那些相关的公司可以了解我更多一点，明白我可以为他做点什么，决定着他是否会录用我。
第四方面：教学目的。
这个网站其实是与《网页设计》这门课程挂勾的，为了完成教学任务，也是我做这个网站的初衷之一。
2. 确定网站的主题、风格
主题主要是展示我在工业设计这个专业的学习所得，与大家交流我在这大学这几年中所学习到的各种技能，如：手绘技能、软件表现技能、创意表达等方面的技能，同时辅以我的兴趣爱好面板。
我的网页风格是简洁的，因为字如其人，通过我的网站就知道我的为人如何，从第一印象让别人知道对我是否感兴趣。
3. 规划网站的主要结构
4. 搜集准备素材
搜集：搜集个人作品、兴趣爱好、设计素材等相关的素材；
整理加工：把搜集好的素材通过photoshop、Fireworks等平面软件进行裁切、调节对比度、亮度等相关的后期处理工作；
制作与存储：把整理好的素材分类存储好，方便查找。
5. 制作网页并形成网站
根据网站的主要框架结构对网站进行制作
i. 利用Photoshop软件制作好网站的首页、栏目页、内容页三个页面（如下图所示），注意考虑网页设计的相关要求，如：尺寸、字体、字号、LOGO、主题风格等方面的要求；
图1___首页
图2___栏目页
图3___内容页
ii. 利用Fireworks对三个制作好的页面进行切片、GIF动画、网页导航栏、弹出菜单、交换图像等方面的相关操作；
iii. 利用Dreamweaver CS4软件对网页做更进一步的处理
规划和设置站点；
把栏目页、内容页作为模板页插入其它的页面；
使用链接、锚点把整个网站组织起来；
插入多媒体元素；
建立网站相册；
其它一些细节的制作，如字体样式、CSS样式等。
6. 服务器空间和域名的申请
域名就是网站的网址，域名的目的是让别人能够通过输入网址访问所发布的网站。我主要是利用学校提供的资源模拟了一次服务器和域名的申请工作，最终申请成功。
7. 网站的测试与上传
i. 利用Dreamweaver CS4软件自带的功能对网站进行测试，如浏览器兼容性、断掉的链接、外部链接、孤立的文件、服务器调试等方面的测试，并对错误的地方进行改正、改进；
ii. 测试无误后就把站点上传到学校的服务器中，并体验效果。
8. 网站的宣传推广、更新和维护
把制作好的网站通过论坛、QQ空间、Weibo进行宣传推广，当有新内容时，对网站进行更新，并维护。
六、 作品特色
1. 制作了一个完整的网站，并且能做到动静结合，整个网站显的严谨而不失趣味性；
2. 按照最初的设想制作了网站，达到了要表达的目的。
3. 偏向于专题，侧重点放在交流中心模块。通过展示设计、手绘练习、软件表达等五个子目录展示了我的专业兴趣与特长，帮助他人对我的了解。
七、 心得体会
网页和网站是我们几乎天天接触的东西，但是要想完成一个网上冲浪者和一个网页制作者之间的身份转换，需要做出不少层面的努力。
1. 第一个：网页设计的目的。
首先，不论做什么事情，我都有我的目的性。做一件事情，是为了完完成教学任务而去做事情，还是借完成作业这个契机来提升自己的综合互素，所谓态度决定高度，相信不同的对待事情的态度，收获也是不一样的。此次网页设计，我做的是一个个人的网页，展示了在工业设计这个行业我的相关技能。
2. 第二个：网页设计的基础知识
对于像我这样一点网页设计基础知识都没有的同学，当然是要先学习基础知识，磨刀不误砍柴功，像一些专业术语，如CSS样式、盒子模型、锚点等需要去掌握名词解释方能在做网页时可以得心应手。
3. 第三个：素材收集
开始做网页时，第一个要做的是组识好网站的主要结构，对网站的总体结构了然于胸，制作起来就会得心应手，游刃有余。其次，是根据网站的主要结构去收集整理素材，注意不同的素材放不同的文件夹中，方便使用。
4. 第四个：软件的使用能力
我在做网页设计中，用到了photoshop、firewords、dreamweaves三个软件，同时还用到了不少的插件。可见为了做成一个网站，需要在不同的软件中切换，会颠覆不同的使用习惯。综上，需要对相关的软件有一定的了解，你可以不是很精通，但是做事情，总得会用工具才能事半功倍。
5. 第五个：毅力+耐心
做一个网站就如做一个项目，在主要结构组织好后，就要用素材去填充框架。有些内容，可能跟前面的会有重复，这时候就更加需要毅力跟耐心来支撑了。在网站设计的过程中，如内部链接、锚点的使用都显的比较乏味，但当你做好网站后一种成就感就会油然而生。
综上，做好一个网站是一种能力的体现，在坚持下来，收获的东西也很多，不足的地方也有很多。但是，我已有了网页设计的基础，跨入了网页设计的大门，有了知识的储备，当有需要的时候就可以拿出来用了。
课 程 学 习 总 结
时光飞逝，这个学期的选修课----网页设计与制作到目前为此就暂且告一段落了，通过这门课程的学习，我掌握了网页制作的基本流程，透过网页设计的同时了解了一个项目的运作方式，总的来说，获益不小。
网页设计是一门实践性很强的学科，开设这门课程是目的是综合运用所学知识，建设一个小型网站，使学生掌握网页制作的基本方法和网站建设的流程；使学生掌握用网页呈现信息的基本技术，提高学生的计算机应用技能。
从学习目标这一层面来说，开设这门课程的目的是达到了。通过一个学期的学习，我们都能提交一个自己制作的网站，基本上掌握了网页制作的基本方法与网站建设的流程，提交了我们的计算机应用技能。
学习内容主要是围绕着建设小型网站而展开，从网页基础知识、网页制作的工具到最终网站的形成。一个网站可以看作是一个项目，虽然这个项目比较小，但对于掌握一个项目的流程是很实用的。
就我掌握的知识面，在网页设计这个行业来说只是冰山一角，只是把网页设计的基础流程拉了遍，只能说是迈入了网页设计这个行业。万事开头难，现在对个行业有了一个了解，那么就有了进入这个行业的通行证，只要有兴趣，希望在网页设计这个行业有所建树，为之付出就可以了。
在以后的学习中，可以多一些收集网页设计的素材，起码要有一种收集素材的意识。在需要的时候，可以拿出来用。其实，网页设计是一个设计的过程，并不是一个软件应用的过程，不是说软件用的好，就可以制作出唯美的网页。要知道网页设计的目的，是为了让别人了解自己、是为了推广公司的产品等，所以就要求制作出可读性很强的网页。为此，可以多点留意一些相关的网页，通过借鉴精华来提高自己。
在这门课程的学习过程中，学习氛围相对来说比较轻松愉快。我是比较喜欢这种氛围，因为我认为，学习是自己的事情，学不学在于自己，在于学生本人的的自制力水平。但对于，学校来说，这就不是一种好的现象。也许是大四的原因，来上课的同学不见得有很多，他们或是为了找工作，或是为了课程设计，总之这是不是一种不对自己负责的表现呢？我不去下定义，因为学习是自己的事。
网页设计综合实验报告
在整个课程的学习过程中，老师拿出了我们同学当中一员的作业作为案例来讲授各个知识点，我个人认为这是一种比较好的教学方法，因为这样接近了我们之间的距离，这样平辈之间的学习可以让我们觉得更加和蔼可亲。其实，一个学生的学习兴趣与其对这个老师的喜爱程度成正比，如果学生对老师产生排斥心理，那么学生对这门课程的抵触心理有极有可能。此外，拿我们自己的作业来讲解，可以增加老师对我们这个专业的了解，那么讲授知识点的时候就会有所侧重，这样我们做出的网站就更加贴近我们的专业，也更有专业水准。
在这门课程的讲述过程中，老师也给了我们讲述了一些网页设计的意识。借人精华，以铸辉煌。这句话就看你怎么去理解吧，不是教你怎么去抄袭，而是多看、多积累别人好的创意，然后去融会贯通，形成自己的创意。设计界有这么一句话：借鉴别人的创意，而让别人看不出灵感的来源这才是最高境界的创新。为什么别人会看不出来？因为这个创意已经融入了你自己的想法，就是你的原创了，别人还怎么看的出来呢？一个人再聪明也没有一个团队聪明，三个臭皮匠胜过一个诸葛亮也就是这个道理吧。基于此，我们何不站在巨人的肩膀上去创造自己的辉煌呢？同时，老师也给推荐了几个不错的插件，在网页设计的进门的过程中，这也是相关有用的。思维是我们的，工具就是拿来用的，帮助我们达到一个高度的。在使用的过程中，我们可以去深入了解插件的运作原理就更好了，就不用受到插件的太多限制，可以根据自己的需要为所欲为了。
课程的安排可以提早一些。在大四开设这门课程，多多少少会与学生的安排有所冲突，虽说学生的天职是学习。但是，在这个浮躁的环境下，要静下来学习真的有点难，同学都为了就业的事情而忙碌着。而且，我们的作业大都做个人的网站，这就有了一个总结这几年的作用。如果，开设的早一些，在一些薄弱的环节，同学就可以抽时间去补充。
以上内容只是我个人的愚见，不当之处，还请老师、同学指正。
工业设计08-1___28号___邱碧星___第10页___共10页