DELL发展及相关产品简介网页设计
目 录
一、引言 1
（一） 开发目的 1
（二）开发意义 1
（三） 课题内容 1
（四） 开发技术 1
（五） 开发工具 2
1. Dreamweaver CS6.0 2
2.PS CS6 2
3. JS脚本语言 2
4. 画图软件 2
二、 网站内容的规划 2
（一） 网站主题 2
（二）网站内容 2
1.整体介绍 2
2. 详细介绍 2
（三） 网站色彩及字体 3
三、 网站设计 3
（一） logo的设计 4
（二） 导航条的设计 4
（三） 首页设计 5
（四） 子页设计 6
四、 网站具体制作 6
（一）首页制作 6
1.DIV+CSS样式图： 6
2.导航下的DIV核心代码： 7
3．特效设计 8
（二）子页制作 10
1.二级页面模板： 10
2．二级页面效果图 11
3.三级子页的制作： 15
（三） CSS的样式展 15
五、 总结 16
致谢 18
参考文献 19
一、引言
本文首先介绍了开发DELL发展及相关产品的目的和意义，运用的技术有HTML、dreamweaver、画图、Photoshop、美图秀秀（批处理）等等。在做网站之前，也对网站的规划做了进行了相关的系统的分析和论证。按照不同的功能和用处，将网站分成了：家用与个人产品、商用产品、 *好棒文|www.hbsrm.com +Q: ^351916072*
技术支持、公司发展及外星人专区等版块，并对各个版块进行了相对应的功能上的分析和设计上的解析，最后是总结本次设计上的所做所感。
开发目的
在过去的十几年当中，个人PC已经成为无论在生活还是在工作当中的必需品，尽管随着移动互联大潮的到来，个人PC市场的需求基本趋于稳定或小幅下降，但总体需求量的基数依然很大，其中的一部分购买者对产品的配置并不是太了解，只是对产品的外观和价格比较感兴趣，再加上我在一家专门做DELL售后的公司里实习做DSP，对一些产品比较了解包括其中存在的一些常见问题，为了让大家能够对DELL无论是在发展还是在产品及使用过程中有一定的了解。
（二）开发意义
在所有的关于DELL的网站中，要么只是单一的做关于产品和软件的，要么就是单一的关于DELL公司的发展历程的，随着人们生活水平的提高再加上一些规模性企业对信息现代化的要求，使得他们对PC及相关硬件产品的需求热度一直不减，人们越发的离开不了互联网，而我们目前获取网络知识的途径，PC终端依然占据了很大的市场，再加上电视的功能在电脑上完全可以取代，并且电脑特有的办公软件，是其他设备不能取代的，成为了人们生活上班学习的必需品，伴随着电脑的普及，相应的问题也会接踵而至，针对一些小问题，我们可以自行处理。
课题内容
网站在制作的过程中，主要采用了DIV+CSS的样式，在制作网页的前期和制作的过程中，还运用了PS软件、JS特效、画图软件和美图（批量版），网站主要分为首页，家庭与个人产品，商用产品，技术支持和公司发展5个部分组成，通过这五个模块，向大家展示DELL的发展历程和相关的一些代表产品，及一些DELL常见问题的处置和保养。
开发技术
开头部分介绍的是DIV+CSS样式，DIV+CSS很多制作网站的人都用过它，他是网站设计的标准，是一种网页布局设计的方法，这种网页布局的方法有别于传统的表格（table）布局定位的方法，可以实现网站的页面内容与表现内容相互的分离。CSS样式是CSS层叠样式表（ Cascading Style Sheets）的缩写，是用于定义HTML的显示形式的。他的合理支出在于可以统一的网页设计管理，通过样式表，管理整个网页，只要通过样式表的修改就可以统一管理整个网站的风格，使用DIV+CSS样式的最大的优势就是提高了网页的加载速度，大家都有这种体会，网页有时候打不开，明显会影响心情，所以通过DIV+CSS技术在硬件上可以快速加载相应的页面，留住客户。
开发工具
Dreamweaver CS6.0
Dreamweaver CS6.0是adobe公司最新推出的一套拥有可视化编辑界面的应用软件，通过它可以轻松地制作出横跨操作系统的平台，跨浏览器的以及拥有JS特效的动态网站，由于它支持代码的拆分和设计视图的实时性等多种方式来创作、编写和修改网页，初级人员也可无基础的进行操作处理网页，是目前制作WEB网站的一流首选，它将设计与编码合二为一，在设计窗口方面，对源代码进行了精化。改善的 FTP 性能，更能有效地传输大型的应用文件。
2.PS CS6
PS CS6，是Adobe公司研发制作出的一款很有名气的图像处理软件，在扫描图像、修改编辑、制作动画和图像及广告的创意，图像的输入与输出方面，拥有他的绝对优势，深受web编码人员的青睐。三年前，Adobe公司发布了他的最新版本PS CS6的正式版，和之前的CS5版本相比，可以更加轻松的帮助用户方便的选取区域，方便用户在抠图方面的操作。
JS脚本语言
JS是JavaScript的简称，它是一种面向对象的动态类型的区分大小写的客户端脚本语言，主要的目的是为了解决服务器端的语言，通过对JS特效的调用可以为HEML网页增加一些动态的特效，提升平面网站的给人们带来的视觉效果。
画图软件
画图软件的运用主要是对一些图片的剪切和图片的拼接处理，对网站的前期的规划和后期的作品的截图和拼图上起到了至关重要的作用。
网站内容的规划
网站主题
了解Dell的发展历程，认识DELL旗下的相关产品，学习一些处置电脑的常见问题的方法。
（二）网站内容
1.整体介绍
本网站主要介绍了DELL公司几十年来的发展，介绍了DELL旗下的家用及商用产品，还有家用产品下属的游戏专用机--外星人和一些技术上问题。让更多的人了解该公司的发展及该公司旗下的一些产品和一些相应的应对产品突发情况的处置。
详细介绍
网站的首页
最先呈现在用户面前的是网站头部的服务信息购买及咨询的联系方式和温馨提醒，下面紧接着的是DELL的圆形玉蛟龙形状的logo和导航（四个下拉列表框）导航的右边是一个产品搜索框，但由于能力有限，只是一个摆设，并且在导航下面，也就是网页的中间位置插入了4张引用了JS特效的轮播宣传海报，在下面是一段对于DELL公司的简略介绍，最后部分是关于本网站的制作版权。
家庭与个人产品
主要有六个部分组成，分别是：笔记本和超极本，台式机和一体机，平板电脑，XPS系列，外星人系列，显示器和外设。通过这些产品的图片在视觉上对用户行成一定的视觉冲击，并且其中的大部分产品图片都做了超链接，如果您对这款产品有好感，只要轻轻的在该张图片上敲击一下鼠标，该图片就会链接到对应的DELL旗舰店旗下的该型号产品，一些相关的信息，您可以直接查阅，方面您的使用。在外星人系列之下还专门为游戏发烧友推荐了近10款游戏专用机，如果您对此感兴趣，可以通过上述同样的方法点一下图片，该图片就会链接到下一个详细的页面，如果您有意愿购买或想做深入的了解，您还可以点一下该页面有电脑图片的地放，他会给你链接到对应该产品图片的产品交易网站，里面有详细的产品介绍，你也可以下单购买或对产品进行收藏。
一、引言 1
（一） 开发目的 1
（二）开发意义 1
（三） 课题内容 1
（四） 开发技术 1
（五） 开发工具 2
1. Dreamweaver CS6.0 2
2.PS CS6 2
3. JS脚本语言 2
4. 画图软件 2
二、 网站内容的规划 2
（一） 网站主题 2
（二）网站内容 2
1.整体介绍 2
2. 详细介绍 2
（三） 网站色彩及字体 3
三、 网站设计 3
（一） logo的设计 4
（二） 导航条的设计 4
（三） 首页设计 5
（四） 子页设计 6
四、 网站具体制作 6
（一）首页制作 6
1.DIV+CSS样式图： 6
2.导航下的DIV核心代码： 7
3．特效设计 8
（二）子页制作 10
1.二级页面模板： 10
2．二级页面效果图 11
3.三级子页的制作： 15
（三） CSS的样式展 15
五、 总结 16
致谢 18
参考文献 19
一、引言
本文首先介绍了开发DELL发展及相关产品的目的和意义，运用的技术有HTML、dreamweaver、画图、Photoshop、美图秀秀（批处理）等等。在做网站之前，也对网站的规划做了进行了相关的系统的分析和论证。按照不同的功能和用处，将网站分成了：家用与个人产品、商用产品、 *好棒文|www.hbsrm.com +Q: ^351916072*
技术支持、公司发展及外星人专区等版块，并对各个版块进行了相对应的功能上的分析和设计上的解析，最后是总结本次设计上的所做所感。
开发目的
在过去的十几年当中，个人PC已经成为无论在生活还是在工作当中的必需品，尽管随着移动互联大潮的到来，个人PC市场的需求基本趋于稳定或小幅下降，但总体需求量的基数依然很大，其中的一部分购买者对产品的配置并不是太了解，只是对产品的外观和价格比较感兴趣，再加上我在一家专门做DELL售后的公司里实习做DSP，对一些产品比较了解包括其中存在的一些常见问题，为了让大家能够对DELL无论是在发展还是在产品及使用过程中有一定的了解。
（二）开发意义
在所有的关于DELL的网站中，要么只是单一的做关于产品和软件的，要么就是单一的关于DELL公司的发展历程的，随着人们生活水平的提高再加上一些规模性企业对信息现代化的要求，使得他们对PC及相关硬件产品的需求热度一直不减，人们越发的离开不了互联网，而我们目前获取网络知识的途径，PC终端依然占据了很大的市场，再加上电视的功能在电脑上完全可以取代，并且电脑特有的办公软件，是其他设备不能取代的，成为了人们生活上班学习的必需品，伴随着电脑的普及，相应的问题也会接踵而至，针对一些小问题，我们可以自行处理。
课题内容
网站在制作的过程中，主要采用了DIV+CSS的样式，在制作网页的前期和制作的过程中，还运用了PS软件、JS特效、画图软件和美图（批量版），网站主要分为首页，家庭与个人产品，商用产品，技术支持和公司发展5个部分组成，通过这五个模块，向大家展示DELL的发展历程和相关的一些代表产品，及一些DELL常见问题的处置和保养。
开发技术
开头部分介绍的是DIV+CSS样式，DIV+CSS很多制作网站的人都用过它，他是网站设计的标准，是一种网页布局设计的方法，这种网页布局的方法有别于传统的表格（table）布局定位的方法，可以实现网站的页面内容与表现内容相互的分离。CSS样式是CSS层叠样式表（ Cascading Style Sheets）的缩写，是用于定义HTML的显示形式的。他的合理支出在于可以统一的网页设计管理，通过样式表，管理整个网页，只要通过样式表的修改就可以统一管理整个网站的风格，使用DIV+CSS样式的最大的优势就是提高了网页的加载速度，大家都有这种体会，网页有时候打不开，明显会影响心情，所以通过DIV+CSS技术在硬件上可以快速加载相应的页面，留住客户。
开发工具
Dreamweaver CS6.0
Dreamweaver CS6.0是adobe公司最新推出的一套拥有可视化编辑界面的应用软件，通过它可以轻松地制作出横跨操作系统的平台，跨浏览器的以及拥有JS特效的动态网站，由于它支持代码的拆分和设计视图的实时性等多种方式来创作、编写和修改网页，初级人员也可无基础的进行操作处理网页，是目前制作WEB网站的一流首选，它将设计与编码合二为一，在设计窗口方面，对源代码进行了精化。改善的 FTP 性能，更能有效地传输大型的应用文件。
2.PS CS6
PS CS6，是Adobe公司研发制作出的一款很有名气的图像处理软件，在扫描图像、修改编辑、制作动画和图像及广告的创意，图像的输入与输出方面，拥有他的绝对优势，深受web编码人员的青睐。三年前，Adobe公司发布了他的最新版本PS CS6的正式版，和之前的CS5版本相比，可以更加轻松的帮助用户方便的选取区域，方便用户在抠图方面的操作。
JS脚本语言
JS是JavaScript的简称，它是一种面向对象的动态类型的区分大小写的客户端脚本语言，主要的目的是为了解决服务器端的语言，通过对JS特效的调用可以为HEML网页增加一些动态的特效，提升平面网站的给人们带来的视觉效果。
画图软件
画图软件的运用主要是对一些图片的剪切和图片的拼接处理，对网站的前期的规划和后期的作品的截图和拼图上起到了至关重要的作用。
网站内容的规划
网站主题
了解Dell的发展历程，认识DELL旗下的相关产品，学习一些处置电脑的常见问题的方法。
（二）网站内容
1.整体介绍
本网站主要介绍了DELL公司几十年来的发展，介绍了DELL旗下的家用及商用产品，还有家用产品下属的游戏专用机--外星人和一些技术上问题。让更多的人了解该公司的发展及该公司旗下的一些产品和一些相应的应对产品突发情况的处置。
详细介绍
网站的首页
最先呈现在用户面前的是网站头部的服务信息购买及咨询的联系方式和温馨提醒，下面紧接着的是DELL的圆形玉蛟龙形状的logo和导航（四个下拉列表框）导航的右边是一个产品搜索框，但由于能力有限，只是一个摆设，并且在导航下面，也就是网页的中间位置插入了4张引用了JS特效的轮播宣传海报，在下面是一段对于DELL公司的简略介绍，最后部分是关于本网站的制作版权。
家庭与个人产品
主要有六个部分组成，分别是：笔记本和超极本，台式机和一体机，平板电脑，XPS系列，外星人系列，显示器和外设。通过这些产品的图片在视觉上对用户行成一定的视觉冲击，并且其中的大部分产品图片都做了超链接，如果您对这款产品有好感，只要轻轻的在该张图片上敲击一下鼠标，该图片就会链接到对应的DELL旗舰店旗下的该型号产品，一些相关的信息，您可以直接查阅，方面您的使用。在外星人系列之下还专门为游戏发烧友推荐了近10款游戏专用机，如果您对此感兴趣，可以通过上述同样的方法点一下图片，该图片就会链接到下一个详细的页面，如果您有意愿购买或想做深入的了解，您还可以点一下该页面有电脑图片的地放，他会给你链接到对应该产品图片的产品交易网站，里面有详细的产品介绍，你也可以下单购买或对产品进行收藏。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/1823.html
