HTML5公司网站开发设计+文献综述(3)_毕业论文

毕业论文移动版

毕业论文 > 计算机论文 >

HTML5公司网站开发设计+文献综述(3)


4.案例网页:该网页将向用户展示“锐打360”在正式项目中的结果。该页面中的每个项目将主要根据项目要求、项目方案和项目结果来说明,产品具体是如何满足各个不同需要的实际项目。
5.产品的相关附属页面:在该模块中,我们将包含的页面有“联系我们”、“新闻中心”、“关于我们”、“售后条款”、“隐私政策”和“友情链接”。在这些页面中,用户能得到关于产品作用之外的信息。例如:产品公司的联系方式、公司的发展方向与主营业务、业内最新新闻、产品的售后服务和保护客户与公司里的各项条款。
1.3    “锐打360”产品介绍网站开发计划
网站的设计分为四个阶段:界面设计、静态结构制作、动态JS制作和后期调整。
首先是界面设计。在网站的制作过程中,必须有个用做参照的样本。在样本中,必须有具体的参数。例如某个元素、放在什么位置、用什么颜色。在后期,这些元素也许会被修改,但在初期制作时,没有样本将时制作者无从下手。因此,这部分虽然不是主要部分,但也十分重要。由于“锐打360”产品介绍网站为医用产品的介绍网站,该网站中的排版和配色将较为简单。在网站中,用户将看到大量的蓝色和白色。在商业设计中,蓝色强调科技、效率的商品或企业形象,具有理智、准确的意象;而白色象征高级,科技的意象。因此,蓝白搭配将成为“锐打360”产品介绍网站的主色调。另外,由于该网站能同时适应多种客户端,因此,网站将设计手机版页面样本和PC版页面样本。两个版本的设计宗旨是:元素配色相同,PC版采用以左右为主的横向排列、手机版采用以上下为主的排列方式。这样设计的是由于用户在屏幕较大的PC上的浏览顺序为从左到右,而在屏幕较小的手机上的浏览方式为上下滑动。在设计界面时,制作网站时需要用到的图片也需要用Photoshop获Firework制作好。以上为在网站开发过程中的界面设计思路。
其次是静态结构制作。这里的静态结构制作,具体是指:用HTML和CSS的作何先写出页面的静态元素。在这个过程中,网站将先用HTML制作元素的大致位置。相比于CSS,HTML不能较精准地控制元素的准确属性。例如:颜色、高宽度、浮动关系等。但是,CSS对元素基础属性的调节和Javascript对属性的辨认和控制都,需要建立在特定的HTML结构上。因此,HTML语法虽然简单,但作用很重要。为了使“锐打360”产品介绍网站能完美地适应各种端口,该网站的HTML结构以“左上右下”为准。同时,为了是该网站结构模块化,不同栏目的HTML将由p标签各自分割,这样将方便修改不同模块的静态效果和动态效果。在HTML后,CSS也是静态制作中的重要因素。CSS的主要作用主要是控制元素的属性。元素的色彩和相对左右位置、线的粗细和样式、容器的背景图和元素与边界的距离等,都由CSS控制。HTML是网站的骨架,而CSS则是网站的血肉。为了使“锐打360”产品介绍网站适应各种平台,CSS需要用CSS3的特性:浏览器属性和宽度判断,来识别当前所在的平台,并根据不同的平台,调用不同的CSS代码。另外,由于CSS3支持简单的动画效果和过渡效果,而CSS的运行效率元高于Javascript,网站中的部分动态效果也将由CSS承担。
接下来是动态JS制作。网站中有大量的互动效果,这些效果只能通过Javascript实现。在“锐打360”产品介绍网站中将较频繁地使用幻灯片效果呈现案例,目的是增加网站和用户的互动,在引发用户继续浏览的兴趣的同时,引导用户查看特定的内容。这些效果都需要通过JS呈现。 (责任编辑:qin)