《Web技术基础》

第1章 网站的规划

1.1.1 网站的定位
品味咖啡店网站整体上给人一种舒适、温馨的氛围，网页整体上呈现咖啡色、白色这种色调能带给人轻松、温暖的感觉，符合咖啡店主题。
1.1.2 网站板块的设置
网站的板块从整体上分为主页和副页。主要分为banner、logo、导航和栏目四个板块。

第2章 设计与制作

2.1 首页设计
2.1.1 Logo设计
Logo背景为咖啡色，右边是盛有咖啡豆和咖啡的杯具。正中间写有店名“品味咖啡”，logo图极其逼真，给人一种见图感其物的感觉，图文并茂，符合现代审美。
Logo截图如下：

2.1.2 Banner设计
Banner的核心是让本店的咖啡给顾客带来生活中的轻松，让他们在忙碌中静下心来享受生活的美。总体布局简单大方，既增加了网页观赏性，突出了本店特点，让顾客忍不住想品尝一杯。
Banner截图如下：

2.1.3 栏目设计
栏目排版丰富而又条理，即增加了阅读性，又体现出美观大方。
栏目截图如下：

• 样例一
  
• 样例二
  
  2.1.4 导航设计
  导航栏主要运用超链接，使点击内容突出，既美观又大方。
  导航栏截图如下：
  
  2.1.5 风格与色彩搭配
  页面风格鲜明，整体上采用温馨舒适的风格，使内容丰富，主页采用咖啡与白色等色彩搭配。给人一种安静，享受生活的感觉，增加客户的阅读兴趣，使网页更具有浏览性。
  2.1.6 技术运用
  1）主要运用div和css进行辅助布局。
  2）导航主要运用超链接技术。
  3）运用ps对图片进行处理、融合，设计出风格独特独特的banner，以 及做出网页效果图。
  4）应用代码进行加工处理实现图片与字的相融。
  2.2 二级页设计
  2.2.1 布局设计
  栏目设计根据内容设计不同风格栏目。截图如下：
  2.3 三级页面设计
  2.3.1 布局设计
  栏目设计根据内容略有不同。截图如下：
  

第3章 网页设计的重难点分析

3.1 网页设计的重点分析
1)网页的版块布局。各版块要有相互独立，又要相互关联，还要围绕网站主题。
2）要体现在板式设计，色彩搭配上围绕一个重点，整体协调，内容丰富，特别要突出主题，副页既要体现与主页的协调，还要突出不同主题的风格这是重点。
3.2 网页设计的难点分析
1）网页的功能及信息构架，不便于完美的结合在一起。
2）对于不同浏览器的兼容问题。
3）使用ps工具将图片上添加文字和其他图片及ap-div像素问题都是难点。

小结

1. 随着科学的快速发展，足不出户高效地办完自己的事情已经成为广大国民喜欢的方式，实现这一想法的重要途径就是互联网，互联网在我们的生活中发挥着越来越重要的作用。要想在互联网上浏览信息，必须通过网站，所以网站的建设将更能使用户更好的运用互联网，网站的实用性、美观程度也促生了一些行业，例如：网页美观，网站模板设计等，因此网站建设显得尤为重要。因为我喜欢美食和实用性的东西，爱好喝咖啡所以设计了一个关于品味咖啡店的网站，我在对自己的网页有了一个初步的构思后，开始设计方案，最后还用了丰富的内容去充实。
2. 品味咖啡店网站的设计，即方便客户浏览首饰信息，同时也可在网站上进行有关咖啡信息的浏览，增加了网站的实用性。
3. 此次设计的品味咖啡店网站，一方面是为了完成我的作业，想把自学的知识运用在具体的实践之中，但更重要的是想要尝试，不怕困难，把自己的所想体现出来与大家一起分享。所以感谢老师布置的这次作业，目的也是要我们更好的掌握和灵活运用所学的知识，以便于我们对网页知识的更深层了解。

转载自原文链接, 如需删除请联系管理员。

原文链接：web技术基础---网站设计说明书，转载请注明来源！