css网络基础及应用论文.docx

1、css网络基础及应用论文 该网站是一个关于设计创意的网站，名字叫“3GP创意联盟”，在开学初，我们就为喜欢平面，广告视频创意与设计的人成立的这么一个广阔平台，所以我做这个网站主要是为我们这个团体创造一定的展示机会和一个和外界交流的平台，但据我了解，要做一个主题是关于设计的网站并不是一件简单的事情，因为要让别人愿意看见你的设计作品和别人的一些好的作品，你的网站就必须有一定的设计元素在里面，而对一个作品面和视频的团体来说可能网页的设计不是自己的特长，但是艺术是相通的，所以为了让我的网页能够在平淡中带一点华丽和一些比较特别的东西，我就在网上查看了好多关于做网页的资料，有关布局，色彩，和一些网页特技等

2、等，而且还查看了好多的大型设计网站，学习了他们里面没的一些好的东西，这些为我在后来的网页设计与制作中起到了很多的帮助，也是我网页最终完成的最有力的助推器，接下来我就这个网站的设计思想，网站的配色，布局和一些特技代码等做一个简单的介绍。设计思想和网站介绍 该网站是我在看了好多的大型设计网站和门户网站后根据他们的一些好的方法和布局等做出来的，首先这个网站主页主要分为三大部分，分别为：网页头部，网页的内容部分和网页的尾部（footer），而网页的头部主要有logo，大标题，小标题，主菜单（menu）。该网页的logo是和头部的背景镶嵌在一起的，两个颜色一摸一样，该logo是我在Photoshop中做

3、成来然后放出来的，我觉得一个网站的logo可以使你的网站的主题表现得很清楚，让人一看就知道该网站是干什么用的，他针对的是什么方向。大标题是直接写在头部的背景上的，我觉得我们的设计联盟的设计理念是什么对我们网站浏览者很重要，如果我们的设计理念整和广大浏览者的一样，我们就可能吸收更多的成员和作品，也对我们今后接到更多的设计工作很有帮助。小标题主要是对大标题中的设计理念做一个简单的介绍，因为有可能我们的设计理念相同但我们的表达却很难让有些人懂，所以我觉得这个人性化的设计比较好，我们也可以在网页中寻求和谐。主菜单的主要作用是和这个网站的其他子网页进行链接，这些主菜单分别可以链接到网站的首页，成员的介绍

4、，小组现在的状况，作品欣赏，问卷调查等子网页，在头部的下面还有一排的副菜单，这些菜单跟主菜单的作用差不多，但它和主菜单不同的是在副菜单立有一个搜索按钮，这个搜索可以使浏览者比较方便的检索站内信息和站外信息。在这个副菜单和内容之间有一个左对齐的时间，这个时间是和你的电脑系统时间相一致的，这个设计的好处是可以让浏览者眼睛一看就能知道现在是几点几分，几月几号，我觉得这个对网站的浏览者很有用。主页的内容部分主要分为四部分，第一部分是最上面的欢迎界面，欢迎界面我的设计思想是，每当有人进入我们的网站是都能感觉到我们的网站很友好的亲切，欢迎界面中有一些是关于我们设计联盟的一些简单介绍，这样可以使浏览者能够对

5、我们的团体做一个简单的认识和了解，第二部分就主要是该网页的主题所在，我的这个内容重面设计思想，我给他里面加了三个颜色不同的框架，在加上我们王振的主要内容，而且我们的内容不会单独显示在主页上，而是以超链接的形式展示出来，普通网站的内容部分都是 直接展示早网站的首页上，我觉得这样对我们这些设计网站不是很有用，在内容的右上角是第三部分：新闻和咨询，我做这一个部分主要是让浏览者能在第一时间阅读到最新的新闻咨询和一些大型的设计比赛，设计界的主要发展方向和动态，我觉得这个部分对每一个设计网站都很重要，因为设计网站除过是一个设计作品的展示平台外还是一个为设计爱好者服务的一个平台。在第三部分的下面是一个视频资

6、料，我会把近期网上或者我们团队自己做的视频放站这儿，供其他人评价和观看，这也是对我们的作品评价的一个很好的方法的平台。在这个网页内容的正下面是一个由右向左的滚动图片，他的作用是让网页变得动态十足和好看，也可以让浏览者很容易的看到我们团队和外界的精美设计作品，这些图片我都给他加了超链接，当看到自己喜欢的作品时可以点一下观看大图，虽然这个滚动图片在好多的网站中都有用，但是我觉得把他放在这儿更有用，更方便。下面介绍的就是改主页的最后一部分：尾部“footer”，该footer是由一个黑色的图片做成的，我在该图片上加了和主菜单一摸一样的超链接，我这样做的目的是，当浏览者浏览到网页的footer时可以不

7、用在用滚动条滚动到最上面点击进入其他页面，这时他直接可以点击这儿的菜单然后进入详尽的页面，这也是一个比较人性化的设计，这样整个主页的设计就介绍完了。网页配色 整个网站的配色是有所不同的，对主页来说，色彩比较丰富和饱满，主页主要采用的是暖色调，有：红，黄，绿，蓝，在footer上加了一点黑色，而二级页面上的色典比较单一，主要采用蓝色，在头部的下面加了一点黄色，整个色调比较单一，相对而言主页的色调还是要好一点，但还是有一些色调把握的不是很好。下面是主页的整个色彩效果图网页布局和代码 从上图我们可以看出，整个网页的布局不是很难，由于比较复杂的布局需要有更多的时间和更扎实的技术，所以我选择了适合我的难

8、度，接下来我就展示一下该网页的css网页布局代码：/* General Styles */body font:11px/15px Arial, Helvetica, sans-serif; color:#000; background:url(images/bg.gif) 0 0 repeat-x #fff;body, td, img, p, ul, h1, h2, form padding:0; margin:0;aoutline:none;ul list-style-type:none;/* Header panel styles */#header td.logopanel backgr

9、ound:url(images/logo-panelbg.gif) 0 0 repeat-x;#header img.logo margin:40px 0 0 7px;#header td.mainpic background:url(images/header-bg.jpg) 0 0 no-repeat;/* Navigation panel style */#navigation a font:bold 11px/27px Arial, Helvetica, sans-serif; color:#0a9ecb; background-color:inherit; margin:0 1px;

10、 background:url(images/button-bg.gif) 0 0 repeat-x; display:block; height:27px; padding:0 13px; position:relative; text-decoration:none;#navigation a:hover, #navigation a.active font:bold 11px/27px Arial, Helvetica, sans-serif; color:#fff; background-color:inherit; margin:0 1px; background:url(image

11、s/buttonover-bg.gif) 0 0 repeat-x; display:block; height:27px; padding:0 13px; position:relative; text-decoration:none;#navigation a span background:url(images/button-bgspan.gif) 100% 0 no-repeat; width:5px; height:27px; display:block; line-height:0; font-size:0; position:absolute; right:0; top:0;#n

12、avigation a:hover span, #navigation a.active span background:url(images/buttonover-bgspan.gif) 100% 0 no-repeat; width:5px; height:27px; display:block; line-height:0; font-size:0; position:absolute; right:0; top:0;h1 font:normal 30px/36px Arial, Helvetica, sans-serif; color:#fff; background-color:in

13、herit; padding:68px 0 7px 22px;#header p font:11px/17px Arial, Helvetica, sans-serif; color:#e28587; background-color:inherit; padding:0 0 0 22px;#header table.extrabutton margin:5px 3px;.extrabutton table.middlebg background:url(images/email-bg.gif) 0 0 repeat-x;.extrabutton input.searchbox width:1

14、23px; height:13px; line-height:13px; font-size:10px;.extrabutton a.testing background:url(images/testing-icon.gif) 0 50% no-repeat; font:bold 12px/38px Arial, Helvetica, sans-serif; padding:0 0 0 40px; color:#14d6c9; background-color:inherit; width:120px; height:38px; display:block; margin:0 0 0 8px

15、; text-decoration:none;.extrabutton a.testing:hover color:#000; background-color:inherit;.extrabutton a.privacy background:url(images/privacy-icon.gif) 0 50% no-repeat; font:bold 12px/38px Arial, Helvetica, sans-serif; padding:0 0 0 40px; color:#5cb318; background-color:inherit; width:60px; height:3

16、8px; display:block; margin:0 0 0 8px; text-decoration:none;.extrabutton a.privacy:hover color:#000; background-color:inherit;.extrabutton a.client background:url(images/client-icon.gif) 0 50% no-repeat; font:bold 12px/38px Arial, Helvetica, sans-serif; padding:0 0 0 40px; color:#fed316; background-c

17、olor:inherit; width:50px; height:38px; display:block; margin:0 0 0 8px; text-decoration:none;.extrabutton a.client:hover color:#000; background-color:inherit;.extrabutton a.project background:url(images/project-icon.gif) 0 50% no-repeat; font:bold 12px/38px Arial, Helvetica, sans-serif; padding:0 0

18、0 40px; color:#ff6719; background-color:inherit; width:70px; height:38px; display:block; margin:0 0 0 8px; text-decoration:none;.extrabutton a.project:hover color:#000; background-color:inherit;.extrabutton a.ideas background:url(images/idea-icon.gif) 0 50% no-repeat; font:bold 12px/38px Arial, Helv

19、etica, sans-serif; padding:0 0 0 40px; color:#d81efa; background-color:inherit; width:45px; height:38px; display:block; margin:0 0 0 8px; text-decoration:none;.extrabutton a.ideas:hover color:#000; background-color:inherit;/* Body Container */#bodycontainer padding:23px 0 26px 0;/* Body Panel style

20、*/#bodypan table.welcome background-color:#f5f5f5; color:#000; border:solid 1px #e8e8e8;.welcome p.welcometitle font:20px/24px Arial, Helvetica, sans-serif; color:#e5312a; background-color:inherit; padding:5px 0 10px 13px;.welcome p padding:0 20px 0 16px;.welcome ul font:bold 11px/18px Arial, Helvet

21、ica, sans-serif; color:#258720; background-color:inherit; text-transform:uppercase; padding:9px 0 0 16px;.welcome ul li background:url(images/line.gif) 0 100% repeat-x; width:500px;.welcome ul li.smallline background:url(images/line.gif) 0 100% repeat-x; width:330px;.welcome img.readmore margin:6px

22、18px 15px 0;#bodypan td.lowerbody padding:25px 0 0;#bodypan table.rightmar margin:0 16px 0 0;#bodypan table.bgcolorgreen background-color:#a9d28b; color:#000;#bodypan table.bgcolororange background-color:#ffdfa2; color:#000;#bodypan table.bgcolorred background-color:#ffc8ac; color:#000;#bodypan tabl

23、e.verticaltable.verticaltable td.greenhead background:url(images/greenhead.gif) 0 0 no-repeat; color:#fff; background-color:inherit;.verticaltable td.orangehead background:url(images/orangehead.gif) 0 0 no-repeat; color:#fff; background-color:inherit;.verticaltable td.redhead background:url(images/r

24、edhead.gif) 0 0 no-repeat; color:#fff; background-color:inherit;.verticaltable p.price font:16px/18px Arial, Helvetica, sans-serif; padding:10px 0 0 155px;.verticaltable p.greentitle font:20px/20px Arial, Helvetica, sans-serif; padding:0 0 0 20px;.verticaltable p.greentext font:11px/18px Arial, Helv

25、etica, sans-serif; color:#66d213; background-color:inherit; padding:0 0 10px 20px;.verticaltable p.greentext font:11px/18px Arial, Helvetica, sans-serif; color:#66d213; background-color:inherit; padding:0 0 10px 20px;.verticaltable p.orangetext font:11px/18px Arial, Helvetica, sans-serif; color:#9b5

26、e00; background-color:inherit; padding:0 0 10px 20px;.verticaltable p.redtext font:11px/18px Arial, Helvetica, sans-serif; color:#801300; background-color:inherit; padding:0 0 10px 20px;.verticaltable ul padding:13px 26px 10px 19px; .verticaltable ul.greenul font:12px/22px Arial, Helvetica, sans-ser

27、if; color:#0f4a02; background-color:inherit;.verticaltable ul.greenul li background:url(images/icon.gif) 0 50% no-repeat; padding:0 0 0 11px;.verticaltable ul.orangeul font:12px/22px Arial, Helvetica, sans-serif; color:#9d3702; background-color:inherit;.verticaltable ul.orangeul li background:url(im

28、ages/orange-icon.gif) 0 50% no-repeat; padding:0 0 0 11px;.verticaltable ul.redul font:12px/22px Arial, Helvetica, sans-serif; color:#9d3702; background-color:inherit; .verticaltable ul.redul li background:url(images/red-icon.gif) 0 50% no-repeat; padding:0 0 0 11px;.verticaltable a.greenmore font:1

29、8px/29px Arial, Helvetica, sans-serif; color:#fff; background-color:inherit; background:url(images/green-learn.gif) 100% 0 no-repeat; width:142px; height:29px; display:block; text-decoration:none; padding:0 22px 0 0; margin:0 20px 6px 0; .verticaltable a.orangemore font:18px/29px Arial, Helvetica, s

30、ans-serif; color:#fff; background-color:inherit; background:url(images/orange-learn.gif) 100% 0 no-repeat; width:142px; height:29px; display:block; text-decoration:none; padding:0 22px 0 0; margin:0 20px 6px 0; .verticaltable a.redmore font:18px/29px Arial, Helvetica, sans-serif; color:#fff; background-color:inherit; background:url(images/red-learn.gif) 100% 0 no-repeat; width:142px; height:29px; display:block; text-decoration:none; padding:0 22px 0 0; margin:0 20px 6px