化妆品网页设计与制作报告.doc

网页设计与制作报告学 号武 汉 科 技 大 学 城 市 学 院课 程 设 计 报 告 课程名称 网页设计与制作 题 目 化妆品公司网站设计 学 部 信息工程学部 专 业 班 级 姓 名 指导教师 2013年6月8日编号001网页设计课程设计任务书课程设计项目名称：化妆品公司网站设计课程设计开发平台与工具：dreamweaver/editplus + ie 7.0以上版本/firefox1.课程设计任务为某化妆品公司设计一个静态网站，该网站用于宣传公司的经营理念及品牌产品，客户也可通过该网站与化妆品公司进行适当的反馈交流。2.课程设计任务功能模块（1）公司简介：包括董事长致辞、公司介绍、企业文化等多个子页面。（2）品牌介绍：用于展示化妆品公司的各种品牌产品。（3）化妆知识：从化妆品和化妆道具两个方面介绍化妆知识。（4）诚招代理：用于招聘代理与业务协商，公告企业联系方式。（5）客户反馈：通过表单建立客户与公司的交流平台。3. 站点结构导航图首页index客户反馈诚招代理公司简介品牌系列子页子页子页子页子页子页化妆知识4. 站点上交注意事项及考核标准（1）网页设计作品须严格按照网页设计与制作课程考试要求按时独立完成，严禁无故拖延上交时间，杜绝请人代做或剽窃他人作品行为。（2）站点文件夹名称必须采用学号+姓名形式（如201110137226zhangjing），网页中须特别注明版权及作者的有效联系方式等相关资料，必要时可创建站点浏览说明文档。（3）网站的评价标准及分值分布为：主题和内容（30分），导航、结构和链接（20分），艺术性（30分），创造性（20分）。（4）学生的最终成绩由网站和平时成绩两部分组成，其中网站成绩70%，平时成绩30%。目 录1 网页设计相关技术介绍11.1 html11.2 css11.3 javascript12 化妆品公司网站网站设计规划22.1 网站介绍22.2 栏目设计32.2.1首页栏目说明32.2.2公司简介栏目说明32.2.3品牌系列栏目说明32.2.4化妆知识栏目说明32.2.5诚招代理栏目说明32.2.6客户反馈栏目说明42.3 站点分析及站点地图42.3.1站点分析42.3.2站点地图42.4 主页面布局53 个人体会和感受74 参考文献和网址85附图91 网页设计相关技术介绍1.1 html超级文本标记语言（英文缩写：html）是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。1.2 css级联样式表（cascading style sheet）简称“css”，通常又称为“风格样式表（style sheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立 样式表，可以统一地控制html中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。1.3 javascriptjavascript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端web开发的脚本语言，常用来给html网页添加动态功能，比如响应用户的各种操作。它最初由网景公司（netscape）的brendan eich设计，是一种动态、弱类型、基于原型的语言，内置支持类。javascript是sun公司的注册商标。ecma国际以javascript为基础制定了ecmascript标准。javascript也可以用于其他场合，如服务器端编程。完整的javascript实现包含三个部分：ecmascript，文档对象模型，字节顺序记号。2 化妆品公司网站网站设计规划2.1 网站介绍对于一个以化妆品行业企业而言，企业的品牌形象至关重要。 特别是对于互联网技术高度发展的今天，大多客户都是通过网络来了解企业产品、企业形象及企业实力，因此，企业网站的形象往往决定了客户对企业产品的信心。建立具有国际水准的网站能够极大的提升企业的整体形象。企业网站的建设将会为企业内部管理带来一种全新的模式。网站是实现这一模式的平台。在降低企业内部资源损耗、减低成本、加强企业员工与员工，企业与员工之间的联系和沟通等方面发挥巨大作用，最终使企业的运营和运作达到最大的优化。销售力指的是，产品的综合素质优势在销售上的体现。现代营销理论认为，销售亦即是传播。销售的成功与否，除了决定于能否将产品的各项优势充分地传播出去之外，还要看目标对象从中得到的有效信息有多少。由于互联网所具有的“一对一”的特性，目标对象能自主地选择对自己有用的信息。这本身已经决定了消费者对信息已经有了一个感兴趣的前提。使信息的传播不在是主观加给消费者，而是由消费者有选择地主动吸收。 同时，产品信息通过网站的先进设计，既有报纸信息量大的优点，又结合了电视声、光、电的综合刺激优势，可以牢牢地吸引住目标对象。因此，产品信息传播的有效性将远远提高，同时亦即是提高了产品的销售力。许多人知道，购买产品不仅买的是那些看得见的实物，还有那些看不见的售后服务。这也就是产品的附加值。产品的附加值越高，在市场上就越有竞争力，就越受消费者欢迎。因此，企业要赢得市场就要千方百计地提高产品的附加值。在现阶段，传统的售后服务手段已经远远不能满足客户的需要，为消费者提供便捷、有效、即时的24小时网上服务，是一个全新体现项目附加值的方向。世界各地的客户在任何时刻都可以通过网站下载自己需要的资料，在线获得疑难的解答，在线提交自己的问题。2.2 栏目设计2.2.1首页栏目说明1、 首页风格门户型首页风格，集中大量的信息与资讯，给人以更具可读性2、 公司新闻发布公司最近的新闻动态3、 近期优惠以图片形式，表现公司最近的优惠销售，可链接进入查看详情4、 公司优势展现公司的各项优势，突出公司的卖点5、 合作伙伴以图片形式，介绍公司的各个合作伙伴，链接进入看全文2.2.2公司简介栏目说明1、公司简介公司图片、名称解释、公司简介、发展历程、企业规划等2、企业文化企业理念、企业形象推广、公司文化生活3、董事致辞企业管理、企业的发展方向2.2.3品牌系列栏目说明1、各类化妆品展示公司所有的化妆品2、省钱分析对具体参考团购的客户进行省钱分析3、套餐说明以列表形式将套餐的订购流程4、团购新闻近期公司开展团购的新闻回顾，以图片、标题链接进入5、网上商城客户可以直接在商城上订购套餐2.2.4化妆知识栏目说明1、 介绍两个方面化妆知识2、 通过这个栏目长期引导客户正确的认识与使用化妆品2.2.5诚招代理栏目说明内容：公司地址、联系方式、在线qq2.2.6客户反馈栏目说明1、 客户与企业之间互动2、 反映客户疑问平台2.3 站点分析及站点地图2.3.1站点分析 1、网站的设计：是用于实现为有需求的客户了解品牌与购买，更灵活的进行销售与交流。2、网站的主题：用大理石的花纹作为背景，显得更为大气，页面主要为淡灰色，使得网站的美观大方，结构清晰，内容鲜明。3、logo标志：logo图标放在网站最显眼的地方，色彩一定要符合页面整体的风格。4、网站的风格：站点层次分明，内容显而易见，要适合年轻的人群的审美官。5、功能分析：使用js实现图片交互，把本站设为首页，加入收藏功能，实现表单动态验证和弹性回顶部功能，在商品展示中会用到大量的图片，使用随滚动加载图片的功能，可以降低对网速影响；打开首页使会弹出一个公告栏，它有着更好的动画性，关闭时自动缩小左上角。2.3.2站点地图图2-1 站点地图2.4 主页面布局图2-2 页面布局1图2-3 页面布局21、 采用“国”字形的div+css构架进行首页的排版，这样简洁，美观。2、 头部是网站的收藏、换肤功能；导航是一组横向导航条；main为主体内容；底部是友情链接与版权信息。3、 由于将大部分页面代码写在了css当中，使得页面体积容量变得更小。相对于表格嵌套的方式，div+css将页面独立成更多的区域，在打开页面的时候，逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里，使得加载速度很慢。4、 由于使用了div+css制作方法，在修改页面的时候更加容易省时。根据区域内容标记，到css里找到相应的id，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式。5、 使用 div+css的制作方法，将所有页面，或所有区域统一用css文件控制，就避免了不同区域或不同页面体现出的效果偏差。6、css可以轻松的解决各个浏览器之间的兼容性 。3 个人体会和感受“书到用时方恨少”，从这次实训当中我深刻的体会到理论知识的重要性，理论结合实际才能将知识掌握牢固。为了使自己的网页风格统一，是自己在设计过程中更加省时省力，我使用了较多的模板，这使我的工作效率大大提高。在设计的过程中遇到了很多问题，有些知识理解得不够深刻，掌握得不够牢固，操作不够熟练，没有能完全达到自己预期的效果，还好通过老师的细心指导和同学们的帮助才能达到最终效果。实训期间上网查看了一些知名的网站开发出的网页，不仅栏目内容丰富，信息量大，而且页面图文并茂，五彩缤纷，使得网民赞叹不已，流连忘返。当前的软件的功能日趋复杂，不学到一定的深度和广度是难以在实际工作中应付自如的。因此反映出自己学习的还不够，存在许多缺点疏漏，需要更加刻苦钻研及学习，不断开拓视野，增强自己的实践操作技能，为以后能做出出色的网页而努力。当然也深刻认识了一点，那就是我们所学的知识虽说是很基础很根本，但没有根基怎么能建好别墅呢?所以说基础知识是很重要的，我们在学习过程中不能小看而去忽略它，它是一笔财富，能引导我们看得更远飞得更高。我觉得这次确实是很有意义的一次检测，本来自我感觉良好的，结果实战时还是存在很多问题的，平时学起来觉得很轻松就以为掌握了所学知识，但现在都忘记很多细节是怎么样的了，因此开始着手时有些障碍，但我下定决心把以前的实验内容都温习一遍，遇到不懂的就及时查资料，比如翻阅资料书，百度，也可以请教同学，一起讨论，相互学习，于是最后也如鱼得水，水到渠成，因此得到一个非常重要的结论只要自己想学只要自己有那份执着与毅力，虚心的请教，勤于查阅相关资料就一定会有收获的，真的当今没有什么知识是用不着的，在哪，哪里都是知识，只要自己持有高度的学习热忱。不过最终，经过长久的坚持与不断的琢磨，看到了自己辛苦后的成果，尽管这还有很多不足，但看着它我心里充满着喜悦，一分耕耘一分收获，这永远是真理。4 参考文献和网址参考书籍：1刘西杰，柳林html、css、javascript网页制作从入门到精通m北京：人民邮电出版社，20132祁瑞华dreamweaver网页设计与制作（html+css+javascript）m北京：清华大学出版社，20133 赵锋等著.网页制作教程.北京：清华大学出版社，2009参考网站：1/ w3school在线教程2/eschool/zhuanti/dreamweaver/dreamweaver自学3 北大天网5附图图5-1站点首页截图图5-2站点公司简介截图图5-3站点品牌系列截图图5-4站点化妆知识截图图5-5站点化妆诚招代理图5-6站点客户反馈截图11网页制作课程设计评价标准评比指标评比标准分值主题和内容(30分)l 内容丰富、完整、健康，主题突出，l 用多种表现形式突出重点l 文章行文流畅、易于理解，语言通顺、文字简练l 严禁抄袭他人作品，允许但不提倡使用模版l 至少4个栏目、10个页面以上l 有一定的社会价值和实际意义导航、结构和链接(20分)l 界面亲切友好，网站结构清晰，方便用户使用l 利用div+css进行合理的排版布局l 每一页都有明确清晰的导航，能很方便地在各个页面之间切换l 没有无效链接，不会