网页设计
一,概述
网页程序设计是指使用网页设计程序语言设计交互式的网页,又称动态网页,动态网页是指网页的内容是否可根据某种条件的改变而自动改变,如计数器就是动态的,当有人点击我们的网页时,计数器的值会自动增加;BBS论坛也是动态的,当用户在论坛上发布信息时,网页内容会自动更新,显示出新发布的信息及相关回复;等等。需要注意的是GIF动画和Flash动画是静态的。因为,这些动画一旦制作完成后,就不会再改变了,尽管Flash动画可以响应用户的事件。
常见的网页程序语言有PHP(Hypertext Preprocessor)、ASP(Active Server Pages)、ASP.net、VBScript、JavaScript、CGI(Common Gateway Interface,公用网关接口)、Perl(Practical Extraction and Report Language,文字分析报告语言)、JSP(Java Server Pages)等等。
开源的网页编辑器: 25款实用WYSIWYG编辑器概览| Sitegrinder 所得在线Web编辑器|
12 Fantastic PSD to HTML Tutorials| Photoshop把PSD网站模板切图为XHTML+CSS的网页|
===== 内容 == (我有真才实学)
===== 易于使用 == (容易沟通与相处)
===== 设计 == (看上去也很棒)
===== 安全 == (非常可靠)
===== 性能 == (健康强壮)
===== W3C标准 == (遵守规则)
===== SEO == (被很多人关注)
页面设计与制作-Dreamweaver
Dreamweaver是创建专业网站的最佳途径,同时也是构建强大Internet应用程序的最简便途径。开发人员第一次能在一个环境内快速创建和管理网站及Internet应用程序。Dreamweaver MX 是一个完整、集成的解决方案,可为您提供可视化的布局工具、快速的 web 应用程序开发以及广泛的代码编辑支持。
动画设计与制作-Flash
Flash是您的“必备”工具,超过100万的专业人员利用它在 Web 上提供了最佳的用户体验,不仅增加了收入和客户满意度,同时也降低了成本。其友好的环境包括强大的视频、多媒体和应用程序开发功能,可使设计人员和开发人员创建丰富用户界面、在线广告、电子学习教程和企业应用前端。
Fireworks是强大的创新工具,广泛的格式和标准支持,无缝的集成。Fireworks是在以web为中心的单一环境中制作、优化和导出交互式图形的最简便途径。
设计概念预览:
Web技术
Web的本性
设计概念
新的技术
评估你的HTML技能
网页布局和元素:
Web使用者的真理
有效的页面布局
颜色
字体
空白
可用性测试:
可用性的重要性
可用性测试
导航概念:
为什么导航很重要
浏览器和导航
Primary and Secondary导航
导航层次
站点结构,URLs和文件名
约定俗称
导航向导
导航动作计划
Web图片:
图像
数字图像概念
位图和矢量图
图像文件格式
图片应用程序
建立图像
图像优化
多媒体:
多媒体和web站点
当前的接受力
动画
音频
视频
多媒体站点的目标
多媒体站点设计基础
用户交互
选择多媒体元素
版权侵犯
Web开发过程:
设计团队
自下而上的方法
发展阶段
定义项目目标
理解商业运作方式
Defining a Vision
从想像到策略
暗喻
站点实施因素:
明确站点实施因素
站点特征
下载时间
HTML标准和一致性:
什么是HTML
Web浏览器的HTML支持
HTML标准
HTML1.0,2.0,3.0和3.2
HTML4.1和XHTML
制表和页格式:
用表格建立页格式
制表图示
无边界的页格式
HTML框架:
Frames and Framesets
标记
标记
超连接目标
在框架中添加框架
Frameset属性
要以人为因素为原则来设计、实现和维护基于超文本的网站,并且使用创作和脚本语言以及数字媒体工具来提供内容创作和网站管理。
参见
50 Powerful Time-Savers For Web Designers|
I Want To Be A Web Designer When I Grow Up|
Sortfolio :寻找合适的网页设计师| :Sortfolio 集中了大量网页设计师的作品,作为演示,可以帮助用户们找到合适的设计师来帮助他们完成需要的设计开发。每个设计师所需的费用也有不同,一般都是根据用户需求而定,从几百到上万都有。
Handy Tools and Tips for E-Commerce Websites|
69 Sexy Portfolio Designs To Inspire You|
Designing “Coming Soon” Pages|
Showcase of Web Design in Russia| Showcase Of Web Design In Ireland|
Can you be a web designer?|:这篇文章陷微软的页面设计师于不义之中,他们面临两个选择:一个糟糕的页面设计师或者一个不热爱公司产品的职员。
Portfolio Design Study: Design Patterns and Current Practices|
Import PSD Into Dreamweaver and Build Website| Import_PSD_Into_Dreamweaver_and_Build_Website.flv |Import_PSD_Into_Dreamweaver_and_Build_Website.mp4 |
与设计师速查手册大全(上)| Web开发与设计师速查手册大全(下)
The Roadmap To Becoming A Professional Freelance Web Designer|
10 UI Design Patterns You Should Be Paying Attention To|
提升网页速度的技巧:IBM开发者园地介绍了20种提升网页速度的技巧,加快网页的加载,改善拨号上网用户的浏览体验。
有一种生涯,叫PSD2HTML:COMSHARP CMS 写道 “CSS 诞生以前,如果谁拿着自己的 Photoshop 设计稿找人转换成 Web 页面,他只能失望。CSS让一种不可能的生涯成为现实,PSD to HTML 或 XHTML,如今这是一个成熟的行业,本文搜集了40个从事 PSD2HTML 服务的网站,他们的真实水准我们不得而知,不过,他们自己的网站设计已经到了美轮美奂的地步(完整图文版)。”
SimplWeb: 设计自己的网站|:SimplWeb 是一个支持方便的进行可视化网页编辑,以及托管网页文件的服务。用户通过它可以简便的创建任意的网站,而无需什么 HTML 支持等,通过制作向导以及直观的编辑界面就可以完成。
名称:1-Time.org
简介:一种新的网页设计解决方案
虹语:1-Time.org 本身提供了一个所见即所得 (WYSIWYG) 编辑器用于直观的编辑网页主题,和网页 Header 编辑器。生成之后可以即时的获得 HTML 代码,分享出来或者仅仅是个人保存。虽然功能较为简单,但是可作为临时的网页编辑工具备用也不错。
2009年海外Web设计风潮(上) 09年海外Web设计风潮(二)
收集大量基于 Flash网页设计 的网站,用户可以自由对其进行评分和评论Stylus Studio 2007 v8.2.894d XML开发 xml spy 2008绿色破解版part2 MarrowSoft Xselerator 2.6 免费绿色破解版NYTimes.com网站的设计主管、2年前加入NYT的越南裔设计师Khoi Vinh在《纽约时报》的不定时栏目“Ask the Times”上回答了读者的提问。在被问到为什么不管任何平台用什么浏览器或显示分辨率,《纽约时报》网站看起来始终如一的漂亮和舒服时,他回答:“我们喜欢用文字编辑器如HomeSite?,TextPad?或者TextMate?,去手动编写所有的HTML和CSS代码,而不是使用所见即所得(wysiwyg)的HTML和CSS的编辑工具如 Dreamweaver。我们只是发现这能产生更好和更快的效果。”打造超完美CSS圆角框(不是一般的完美)完美企业网站的101项指标用“交叉”设计的方式促进风格统一For Webdesigners 是一个面向网页设计开发者们的资源导航网站。一共提供了 16 个主要类别,总共 499 个链接。其中包括 AJAX、Blog、配色、CSS、Flash、字体等等,直观明晰,都是与设计开发有关的资源、教程、源代码等等,Blogger 和设计、开发者们千万别错过。浏览线产品研究网站图片的基本标准解决Select覆盖Div的方法 从 Liqun.net 作者:liqun@live.com (Liqun)在前端代码设计的时候会碰到这样的情况:IE6以及一下版本下,选择框Select会覆盖Div中的内容。提供一个比较简单的方法来解决这个问题。一般情况下,可以将显示的内容放到Iframe中,然后再显示框架内的内容。由于Iframe的可以显示在Select上层,就可以解决这个问题。不过这样做在实现上比较麻烦。有个解决的部分就是在Div内容中加入不显示的Iframe框架。
<div> <iframe style="position:absolute; z-index:-1;" frameborder="0" src="about:blank"></iframe> <a href="#">Overview</a> </div> <select> <option>Domain</option> </select>
以上代码的重点就是加粗部分。直接加一个空白的框架页面和将页面内容加入到框架,在实现起来更加的方便。只要在需要的Div中加入一句话就可以直接实现效果。
Joomlar开源PHP-CMS Joomlar免费模板免注册下载 Joomlar免费模板下载 Drupal开源PHP-CMS Xoops开源PHP-CMS
Firefox as an IDE WYSIWYG 网页在线编辑器比较表
“页面制作人员”?“页面工程师”?“页面架构师”?滚一边去!
http://www.yeeyan.com/articles/view/3035/3537 我不是一名互动设计师,但我曾经是… 互动设计师所需的知识
http://www.yeeyan.com/articles/view/6559/3448 Web开发设计的五大准则
如果仓促而为,设计一个专题或者网站一定会成为恶梦。Web设计需要遵循一些准则并有计划地去做。
Rule #1 : 先出设计图
这是必须的。不要假设设计图在你的头脑中就开始设计web,必须要放到纸上。可以这样做:
1, 拿尺子、笔和纸,按照具体的尺寸一行一行地画下来;
2, 记得考虑分界线的长度等,这样才能符合CSS的像素;
3, 记下设计的每一个细节免得忘记,如果把所有细节都累积到最后将是巨大的麻烦。
Rule #2 :配色
这是设计的核心部分,只有颜色搭配合适才能使你的网页看起来不错。首先要决定的是主色,也即你在网页中多数使用的颜色;然后选择跟主色调搭配的第二颜色;不要选择超过三种颜色不然你的设计看起来会很乱。如果你想要更多的颜色,可以使用浅色或者深色的阴影来搭配主色调。
1, 浏览十个跟你网页有同样主色调的网页;
2, 给几个人看你的配色方案并取得反馈;
3, 从浏览的网页和反馈你将更好地完善你的颜色搭配。
Rule #3 : 从基本的版块开始构建
定下配色和设计图之后,从最基本的框架开始构建——我的意思是说不添加任何文本。因为在版面中加入文本会使得架构混乱。方法如下:
1, 每一个版块设定边界线,这样能够看到具体的尺寸和位置;
2, 对不同的版块使用不同的颜色,在完成版块后再改成你想要的颜色。
Rule #4 : 理清CSS
不要在你的HTML文件中将styling元素搞得太复杂,不然等到你修改的时候你就不得不到处搜索。所以将所有styling元素归置在一个单独的CSS文档中。
在styling之前理清你的CSS免得太过杂乱导致你多次重复同一件事。CSS支持继承,也即parent block的style可以用于child block.,充分利用这条特性。命名CSS分类名也要易懂易记。比如使用“main_content”而不是“div_1”。
Rule #5 : 制订多重 CSS 文档
我们都知道,使用浏览器可以轻易地看到网页的输出,但使用另一浏览器的时候则可能发现输出不正常。这不是什么稀奇事儿,因为每个浏览器对HTML和CSS的处理方式都不一样。
为避免这种情况,每个浏览器准备一个CSS文档,这样所有浏览器都可以正常浏览。虽然这有一定的难度,但是记着指望一个CSS文档来满足所有浏览器是不可能的。
CollabTRAK 是一款面向网页设计师们的组织工具。这款工具将把某个网页开发作为项目进行管理,特别适用于多个网页设计师进行协作的场合。无论是网页设计还是在线应用开 发,这个平台提供了协调、联络、任务管理以及面向客户的管理工具,电子支付和即时联络等方面的应用,把有偿的网页设计和应用开发纳入了商业化正规。
Dezignus 是一个有关于设计素材的 Blog。其中包括了不少设计范例、美工样板、矢量图资源等等的设计素材,作者的更新相当频繁,几乎每天都提供大量的信息。如果你是一个设计工作者或者爱好者,不妨订阅看看,其中或许有你原本没有发现的好东西。
解决Select覆盖Div的方法
在前端代码设计的时候会碰到这样的情况:IE6以及一下版本下,选择框Select会覆盖Div中的内容。提供一个比较简单的方法来解决这个问题。一般情况下,可以将显示的内容放到Iframe中,然后再显示框架内的内容。由于Iframe的可以显示在Select上层,就可以解决这个问题。不过这样做在实现上比较麻烦。有个解决的部分就是在Div内容中加入不显示的Iframe框架。
<div>
<iframe style=“position:absolute; z-index:-1;” frameborder=“0” src=“about:blank”></iframe>
<a href=”#”>Overview</a>
</div>
<select>
<option>Domain</option>
</select>
以上代码的重点就是加粗部分。直接加一个空白的框架页面和将页面内容加入到框架,在实现起来更加的方便。只要在需要的Div中加入一句话就可以直接实现效果。
资料
Dreamwaver使用初步.ppt 2624k
Dreamweaver MX 探索_E-BOOK教程.exe 1694k
Oreilly.Regular.Expression.Pocket.Reference.eBook-LiB.chm 150k
WEB测试过程.pdf 33k
WEB的周期制作流程 .txt 51k
WEB设计经验.txt 7k
Web时代的软件过程改进.pdf 37k
XML学习指南中文版(PDF).rar 2043k
om的文化和设计.txt 4k
互联网站规划与设计.txt 23k
商业网站设计主要原则.pdf 32k
探讨网站规范.txt 5k
搞懂XML_SOAP_BizTalk.rar 3166k
浅析“作坊式”开发.txt 14k
浅谈网站工程的管理与规范.gif 13k
浅谈网站工程的管理与规范.txt 10k
深度工作室系统分析与设计的原则.htm 136k
网站设计评价方案.doc 35k
网络项目管理学会论坛精华帖手册.chm 1209k
网页设计师必看.txt 4k
谈网页上的艺术表现.txt 15k
参见