站长必读

您的位置:首页 > IT资讯_互联网资讯 > 网站建设_营销网站建设_网站制作与开发  >  常桉网站建设分享:网站设计到网站制作的全部步骤

常桉网站建设分享:网站设计到网站制作的全部步骤

发表日期:2018-02-10 11:41:13 文章编辑:常桉网络建站公司 浏览次数:325

 首先把网站设计的PSD文件打开,导出的元素背景图。隐藏掉其他所有页面的图层,然后选择大的背景图导出为web使用格式。22q深圳网站建设_营销型网站建设_网页设计制作及小程序开发-常桉网络建网站公司

网站设计到网站制作的全部步骤22q深圳网站建设_营销型网站建设_网页设计制作及小程序开发-常桉网络建网站公司

 
从第一印象上来讲,这个大图片很容易让人觉得他很大,所以体积会变的很大。但是事实上用jpg格式调整好质量质量之后这个文件仅仅才30K而已,这里需要你来拿捏文件的质量和整体的体积的平衡。接下来导出的是主体网站内容区,画出另一个大的选区,其重要包括整个中部面板――当然别忘记那些带有效果的地方比如阴影,半透明的边框等,都要一一包含在内。注意还要考虑到头部复杂的透明度的网址导航区域,所以选取应该直接延伸到顶部。一般来讲允许网页垂直重复(repeat)的话,只要选择中部区域一小列内容导出就可以,我们后面可以让他垂直重复来达到设计稿上面的效果而不增加文件体积。
 
页脚部分:
 
选择同样的宽度,然后高度要包含灰色渐变的图形。为了导出侧边栏,主体区域现在暂时的使用垂直拉伸。因为之前的网站设计,所以这个独立的侧边栏的图形将充分利用两个图片――上部是足够长的区域,以便容纳(指方便地或不拥挤地装载)更多的内容防止超出设计的部分,另一个是一个小的底部,底部宽度要与上部一致。这是一个类似用于菜单的滑动门的技术。这个长的可以自动伸缩的部分导出的时候要注意包含边线的透明效果。
 
薄的底部部分:
 
另一个导出的小的可自动伸缩部分的是导航栏的背景,它可以根据菜单文字的长度来自动伸缩。这里需要使用png的文件因为可以利用其透明度来覆盖住不同颜色的背景,文章部分在概念设计稿上是跟侧边栏有一样的边线效果,但是因为他们没有覆盖在其他的图片上并且也没有复杂的透明度等问题,所以我们将会用纯粹的css代码来实现他的效果。
 
蓝色渐变的内容区:
 
这个地方也是导出一个瘦长的区域然后横向重复(repeat)就能达到其效果。小的评论气泡,箭头,rss标志和电子邮箱图标等,都随着logo一起单独的导出即可,最好使用png格式这样适应性更强――当然如果你确定放弃给ie6的用户使用或者浏览的话。现在概念设定已经完整的被分成了独立的图片,五部分的框架被拆分成了13个图片文件。他们一共才95Kb,这么来看即使是拨号网络也能比较流畅(Fluent)的观看网页了。
 
一个html网页设置控制结构的布局(The Plot)是必须的,上面那段话你没必要自己写,随便查看一个网页的源文件都能找到。一个单独的css样式表是将包括视觉规则的设计。然后让html文件链接到这个新建的css样式表文件。我们将内容和背景放到一个含有ID的br的容器里面。不过要记得我们有一个浅色的背景在最后面需要垂直重复的说,直到CSS3才更广泛(extensive)的支持第二个br在这个图像之上。网站名字用H1的标签来控制,他也是logo的基础,上部网址导航和rss /电子邮件订阅选项是作为无序列表。
 
CSS重新构建页面:
 
清除浏览器的默认设置。背景图像是附属于body和全局字体风格的设置。容器,网站内容和页脚的br也要使用适当的背景图片和风格设置。继续写CSS样式表,接下来的一些元素(element)用代码(code)写出来慢慢加上,建立一个无序列表然后加上合适的图片和颜色。接下来是在这个框架上渐渐丰满起来,用一个容器来搞定文章发布区,就像我们前面说的一样,这个地方我们不用图片只需要用代码就能搞定。
 
文章发布区的边线和颜色以及文章标题和段落文字都继续用CSS的样式表写好。对于网站开发来讲,大部分用 firefox的朋友有福了,这意味着我们可以用moz-border-radius这句话来让我们的页面有一个很漂亮的圆角就跟我们当初的设计稿一样。不过对于其他浏览器来讲我们只能降级让其实现为一个直角鸟。然后在浏览器里面测试下啦~如果没写错的话那么就跟设计稿上的效果是一样的~这说明CSS彪悍的将ps设计稿里面背景颜色和边框的效果给实现了。然后继续完善html的结构(structure),现在轮到侧边栏了。我们来看看如何在一个容器里面用两个背景图片实现滑动门效果来让侧边栏的大小随网站内容来控制。
 
继续添加更多的CSS样式来控制(control)html里面的元素(element),接下来就可以在浏览(browse)器里面看到侧边栏~注意别让内容超过了图片的宽度,及时的截断下看看效果就好啦!继续给这些元素添加样式,用一个特殊的class来给这个段落添加用继续阅读的肩头和评论气泡作为背景图搞定后又可以用浏览器YY下,重复(repeat)的背景上面是坚实的文本啊!大体效果就这么搞定了,设计稿的内容基本上也都呈现(chéngxiàn)出来了,这时候你可以换着浏览器和分辨率来看看有没有问题以及模拟链接的效果比如鼠标on啊 鼠标点击过啊等等效果。
 
其实网站设计这玩意搞起来了就停不下来了。你必须在FF,opera,safari下面看看有没有问题,你看这不在IE下面就出问题了么?修改一些CSS样式表很快就能搞定这个问题。
标签:网站设计

热门标签

  • 低价透明 低价透明 统一报价,无隐形消费
  • 金牌服务 金牌服务 一对一专属顾问7*24小时金牌服务
  • 准时保质 准时保质 完善制作流程,准时交付
  • 售后无忧 售后无忧 网上追踪,全程跟进

深圳常桉网络是一家专注于深圳网站建设、网页设计制作与开发、营销型网站建设、微信公众号开发、深圳小程序开发、APP开发、网站seo优化等技术+策划+网络营销推广解决方案的综合型网站建设公司。致力于为企事业单位提供一站式、全方位整合网络品牌服务。是当前国内少数拥有移动端、pc端开发、策划、推广一体化服务经验的领先移动互联网营销咨询公司。我们目前直接服务的企业包括酷派手机、金蝶明珠会、华润万家、便利云街、趣垦教育、凯琳斯蒂、韩后、虎都男装等知名企业以及宝安地税、福田地税政府微信定制技术开发。

联系方式

    电话:158-2048-4986(何经理)

    地址:深圳市龙岗区横岗街道力嘉路108号2013文化创客园B栋403

    网址:www.changanseo.com

    邮箱:hejunsheng126@qq.com

常桉网络小程序 常桉网络小程序

常桉网络微信号 常桉网络微信号

Copyright © 2017-2019版权所有. 网站开发,小程序开发就找深圳常桉网络,为您提供优质网络服务!  网站建设地图  网站制作地图  粤ICP备16024877号

 
QQ在线咨询
何经理
15820484986