`
jcs130
  • 浏览: 131366 次
  • 性别: Icon_minigender_1
  • 来自: Ottawa
社区版块
存档分类
最新评论

想把网页做漂亮了真不容易~美工们~你们辛苦了——菜鸟学WEB有感

 
阅读更多

这几天学Web,我们小组的项目是做一个微博出来(很简单的那种,只要实现一些最基本的功能就好了~),要学好多东西,第一次接触JavaScript,以前还以为它和Java差不多呢,但是现在才知道几乎不一样……由于还没学太多,所以网站的功能方面还没做多少,目前只做了注册功能。

我小的时候有用FrontPage做过网页,可视化编辑的,不过现在没有了,觉得自己在做网页方面“有一定基础”,而且我也会Photoshop,就先尝试做一下界面,工具就用的是Dreamweaver。

本以为Dw也是那种拖拖拽拽就可以写好一个界面的,但是发现我错了,没那么简单……

这几天在网上找各种教程,主要是布局的~差不多学会了用Div和Css一起来设计界面(当然不是敲代码~)。

第一个界面就是注册和登陆的~东西比较少,比较简单,另外在注册的时候用了刚刚学的JS添加了一些小功能~比如说检测用户名是否为空或是密码输入强度等~另外,为了使界面漂亮些,我用Ps做了个背景图,并且做了两个透明的图作为背景(当时还不知道怎么在CSS里面设置透明色……囧),界面如下:



登陆界面

  注册界面



 注册成功

接下来就是做个人中心的界面~就是后台了~这里面的东西就比较多了,所以我就先用PS设计了一个效果图,也只是做了几个简单的功能在里面:


设计图

 

然后就是按图来设置每一个Div标签的位置、大小,几乎是图上面没一个方框框我都弄了个Div,并且设置了Css样式,前面做的时候有一些不熟练,但是到了后面就熟能生巧了,比如说查看一个框框有多少像素再也不用用QQ的截屏工具了……囧

另外一点就是这个透明效果,在Dv里面有一个视觉效果选项,里面可以设置透明度(通过filter: Alpha(Opacity=?);),但是这样设置了以后在IE中有效果,在chrome中就看不到透明效果,上网搜了一下,知道了Alpha这个滤镜是IE中独有的,而新出来的浏览器可以直接通过设置透明色(rgba)来设置透明,比原来的方便多了~

下面就是做出来的图~加上了透明效果貌似还比效果图更好看了~~哈~~

 

在IE中(修改之前)



 在Chrome中(修改之前)



 在Chrome中(修改之后)

 

目前也就只做了这么多,今天刚讲了Ajax,接下来就是把具体的功能加上去~希望继续加油吧~~~哈~~~

 

  • 大小: 203.2 KB
  • 大小: 199.5 KB
  • 大小: 193.1 KB
  • 大小: 248.5 KB
  • 大小: 221.7 KB
  • 大小: 172.9 KB
  • 大小: 231.5 KB
分享到:
评论

相关推荐

    ASP网站实例开发源码——美工漂亮的妮可美容美发学院.rar

    这个"ASP网站实例开发源码——美工漂亮的妮可美容美发学院"项目,是一个基于ASP技术构建的美容美发学院的网站示例,它包含了一系列的网页和后台代码,可以帮助学习者理解ASP在实际网站开发中的应用。 在这个源码中...

    平面美工上半年工作总结范文——范本..doc

    【平面美工上半年工作总结】 平面美工是设计领域的一个重要角色,主要负责公司产品的包装设计、宣传材料制作以及网络维护等工作。以下是对平面美工在上半年工作中的主要职责、成就、经验教训和未来规划的详细阐述。...

    ASP实例开发网站源码——美工非常漂亮的个人博客网站源码.zip

    这个压缩包文件"ASP实例开发网站源码——美工非常漂亮的个人博客网站源码.zip"包含了名为"092美工非常漂亮的个人博客网站源码"的子目录,里面应该包含了整个博客系统的所有源代码和相关资源文件。通常,一个ASP网站...

    网页美工经典案例教程(PDG)简介

    网页美工,作为互联网行业中不可或缺的角色,主要负责网站的视觉设计和用户体验优化。在这个高度数字化的时代,一个吸引眼球且易用的网页对于任何企业和个人来说都至关重要。本教程——"网页美工经典案例教程(PDG)...

    吸色器(WEB美工利器)

    【吸色器——WEB美工设计的必备工具】 在网页设计和前端开发中,色彩搭配是至关重要的元素,它能够直接影响到网站的整体视觉效果和用户体验。"吸色器"是一款专为WEB美工设计的实用工具,其核心功能是帮助设计师从...

    网页美工经典教程

    网页美工经典教程,以Adobe Dreamweaver为核心,是一份深度探索网页设计与制作的资源。Dreamweaver作为业界广泛使用的网页设计工具,为设计师和开发者提供了强大的视觉编辑界面和代码编辑功能,使得网页设计变得既...

    《美工综合》课程一体化教学总结——以《电商美工一体化综合实训课程》为例.pdf

    《美工综合》课程作为一门交叉性极强的学科,覆盖了电商美工和运营的多个方面,包括但不限于电子商务基础、网络营销、移动营销、PS基础、图片处理、视觉营销、摄影基础及视频剪辑等。该课程的教学目标是帮助学生建立...

    网页美工经典案例教程

    网页美工需要理解色彩心理学,如何选择调色板,以及如何运用色彩对比和平衡来引导用户的视线。例如,可以通过使用鲜明的色彩突出重要信息,或者使用柔和色调创造和谐的浏览环境。 二、布局设计 网页的布局决定了...

    网页美工(用于网页设计)

    网页美工,作为一门重要的技能,是网页设计过程中的关键环节。它涉及到视觉艺术、交互设计、用户体验等多个领域,旨在创造出吸引人且易用的网页界面。在这个领域中,美工不仅需要具备良好的审美观,还要熟悉网页设计...

    淘宝美工教程——聚划算主图.ppt

    淘宝美工教程——聚划算主图.ppt

    基于OBE理念的网店美工课程混合式教学改革——以电商Banner的教学设计为例.pdf

    基于OBE(Outcome-Based Education,成果导向教育)理念的网店美工课程混合式教学改革是一项针对电子商务专业课程设计的教育实践。OBE理念强调以学习成果为中心来设计教学目标、内容、方法和评价体系,旨在提高学生...

    ASP网站实例开发源码——美工漂亮的妮可美容美发学院.zip

    这个实例开发源码——美工漂亮的妮可美容美发学院.zip文件,显然包含了一个完整的ASP网站项目,专为妮可美容美发学院设计,旨在展示如何用ASP技术构建美观且功能丰富的网站。 在ASP中,开发者可以使用VBScript或...

    ASP实例开发网站源码——企业站程序!美工超级漂亮,收音机,视频,客户通.zip

    ASP(Active Server Pages)是一种由微软开发的服务器端脚本语言,常用于构建动态网页和Web应用程序。在本实例中,我们看到的"ASP实例开发网站源码——企业站程序!美工超级漂亮,收音机,视频,客户通.zip"是一个...

    网站设计,美工 网页素材

    网站设计和美工是网页制作过程中的核心环节,它们决定了网页的视觉效果和用户体验。网页素材,特别是高质量的图片、Banner、背景以及各种图形元素,是构建吸引眼球且功能完善的网站不可或缺的部分。在这个主题中,...

    网页美工金典案例教程.pdf

    《网页美工金典案例教程》是一本专为网页设计爱好者和从业者编写的实践指导书籍。本书通过一系列经典案例,深入浅出地介绍了网页美工的设计原则、技巧和方法,旨在提升读者在网页设计领域的专业技能。 网页美工是...

    网页美工金典案例教程 图片.rar

    【网页美工金典案例教程 图片.rar】这个压缩包文件是针对网页美工学习者设计的一个资源集合,其中包含了丰富的实例图片,旨在帮助学习者理解并掌握网页设计中的视觉艺术和布局技巧。这些图片可能涵盖了多种设计风格...

    美工神话,fireworks网页元素与网页效果图png源文件

    在IT行业中,美工设计是不可或缺的一环,它关乎到产品的视觉表现力和用户体验。而“美工神话,fireworks网页元素与网页效果图png源文件”这个主题则着重于Adobe Fireworks这一强大的图形设计和原型制作工具在网页...

    ColorBase 调色工具, 网页美工必备

    【ColorBase调色工具——网页美工的得力助手】 在网页设计领域,色彩的运用是至关重要的。正确地选择和搭配颜色不仅能够提升网站的视觉吸引力,还能传达品牌信息,增强用户体验。ColorBase调色工具就是这样一款专为...

Global site tag (gtag.js) - Google Analytics