5/1
下载Free Vector Downloads (Part1)
http://tutorialblog.org/free-vector-downloads/
(网页)设计的过程
People approach web sites in very different ways to how we design them
They skim pages for clues, instead of reading
They make snap decisions, instead of evaluating and judging carefully
They might not even be looking at the complete picture
They are driven by their goals, not ours
浏览者通常:
快速浏览(根据他们的需要),而不是阅读
快速决定,而不是严谨的思考
他们甚至不可能看完一副图片
他们有自己的目标,而不是我们的
Designers need special skills to succeed in this environment
认定目标
We must gain the best possible insight into our users’ goals, so that we can help achieve them.
并践行
We must get clear on our design’s purpose, and have the mental discipline to stick to it
不要画蛇添足
(We must pursue simplicity ruthlessly – if an element adds complexity but not value, it must be changed )
Setting up in Web Design
10 Steps
1.Know your Strengths and Weaknesses
2.Choose your Market
The people who have a need that you can fulfil.
3.Choose your Offering
4.Promote Yourself
there are a lot of web designers out there. And to win business you need to stand out in some way – you have to be remarkable
5.Price it right
6.Build a Support Network
7.Build Your Web Site
8.Train Continually
9.Delight Everyone
10.Just Do It!
5/2
到华东师大门口书店买5月份<studio classroom>
观看宫崎俊<岁月的童话>
追忆平淡和单纯的岁月,可有些事有些人一旦错过就不再–
Cascading Style Sheets
CSS is the only way you should apply styling
CSS is a new smarter way to apply style properties to HTML elements
CSS中
HTML element name{ 内容 } 定义整体属性
Classname(s)用点标出 .name{ 内容 } 定义局部属性
ID用#标出 #name{ 内容 } 定义ID属性
它们互不冲突,但在共同使用时,ID属性优先
The basic ways of applying a style to an element are by virtue of its
1:HTML element type
2:HTML element type modifier
3:id property
4:or its classname(s)
定义显示与否(display)的三种不同方法;
(display:block;) ,
(display:inline;) 在一行显示,不跨行
(display:none;) 不显示
和国宾去浦东
5/3
阅读<chasing the perfect>
Bauhaus:Design from fear?!
包豪斯的启示:设计因恐惧而生?!(一战使然)
CSS
clear:both;
clear all 清除上面(此前)定义的CSS
在CSS中定义 .clear:{clear:both;}
在Xhtml中的作如下标签,即可有效清除
<div></div>
<br>
实现
当然,也可在CSS的其他关联属性中定义 overflow:auto
5/4
去植物园
visit ShangHai Arboretum
重构NOIAD,需要参考有效的CSS布局
LOGO
*Text-based logos
Logos in the form of words or letters have natural properties that make them visually effective
1:Good recognition 2:Good descriptiveness 3:Good presence
*good logos tend to be clear, often bold, relatively simple, appealing and should say something about the thing they represent (whether factual or qualitative information).
*Graphic/text combo (作者倾向于使用”简洁图形+logo文字”组合)
wheather you are a Designer(设计人员) or coder(程序人员)
There is no right way or wrong way of doing this,make you document readable—
CSS Workflow:
1:Wireframes(布局) 2:Naming(命名) 3:Organizing CSS 4:
设计网页需要注意:
1:在Mock-up阶段考虑各个<Div>模块儿,并最好用相关属性如<P><Li>命名
2:为<DIV>模块儿定义CSS时,注意命名根据其功能而不是位置.如避免使用Div#right{}等(因为日后可能要变动),而使用DIV#conten{}等
5/5
<中国>
这部影片的所有明星就是中国人
中国人特爱讨论,虽然他们倾向于变得罗唆.
七个城门的底比斯城
是谁建的?
国王的名字被载入史册
是他们搬运了巨石吗?
布莱希特 一个工人的问题
一座战争的纪念碑就此不自觉的变成了文明的工具—关于长城
<Secrets of the Sexes>
Brainsex,Attraction,love
越爱对方,就会越将对方理性化.love makes people bland.
当热恋消失后,一切都趋于平淡,这才是真爱的开始.
★○·
—-
CSS
★clear:both;清除此前定义的属性,用于新一个DIV标签的开始.
★float:left(right);定义DIV等版式靠左或右
★在Xhtml设计时,基本上,
<div id=”x”></div>用来大布局,
<div></div>用来表达细节
<p></p>用来表示期间的元素如图片文字等
<ul id(class)=”menu”><li></li></ul>用来描绘菜单等重复元素
—-
Dreamweaver中,为方便浏览管理代码,可折叠和扩展代码
1:可通过代码面板左侧工具栏进行参作
2:编辑–代码折叠
ctrl+shift+c 折叠所选 ctrl+shift+E 扩展所选
5/6
下载firefox web develop toolbar
可以更深入的预览网页结构.
学习Lyndo CSS教程
Floats章节.
<float>可以大致定义网页布局,比如只用简单的修改 float:left(right);就可以更改左右方位.
推荐网站:www.alistapart.com
Positioning章节
{position: }可以定义元素如图片的位置
relativepositionin,absolutepositionin以及fixed的不同
使得网页中的文字等随浏览器的改变而相对适应,只用定义此部分div属性为{position: relative}
推荐网站:karova.com
5/7
下午去上海书城
关于web standard和CSS的好书
1)<狂人日记-CSS网络布局实录>
2)<head first-HTML with CSS and Xhtml>英文版(深入浅出HTML与CSS.Xhtml)
摘录:
★调试时有用的插件:
Firefox下用 web developer
IE下用 Web accessibility toolbar
★开发网页工具
GNU Emacs (open source)
★Xhtml中
<li>定义列表中的列表项
<ol>创建有序列表
<ul>创建无序列表
★有用的网址
csser.org w3cn.org
5/8
整理并带回”DIV+CSS”学习
研究”英国SEAL分析仪器”网站代码
5/9
read the book:<maran illustrated_windows xp 101 hot tips>
下载virtual desktop manager在一个屏幕上呈现4个虚拟小屏幕
设置系统帐号安全:run-syskey /update-passweord stratup
buletooth device 蓝牙设备
在桌面上设置网络内容 desktop items-web-new
★ Thank your for your inspiration and guidance.
★ through each task form beginning to end.
★ we would love to hear form you!send your comments and feedback about our books to @
★ boost your knowledge
5/10
带<别具光芒>这本书_
5/11
下载相关winrar里面有multiflex11 multiflex32 Nautica05比较好的Xhtml全站
上传并试用符合标准的网站:belief_sell
5/12
5/13
去绍兴一日游
5/14
学习Lynda.com.Dreamweaver.CS3新功能教学
★Dreamweaver CS3基于Xhtml
★Xhtml才是网页的本质,CSS,JS,ASP都是Add-ons
★分离presentation and structure
★制作网页时的规范 naming conventions
1:不要用空格命名 don’t use spaces in file names
空格在浏览器中会显示成%,如果非要隔开单词,用下划线”_”
2:避免使用大写字母 Avoid using capital letters
3:不用用数字键特殊字符如!*&@能 Don’t use special characters
4:网页扩展名统一”index.html” or “index.htm”都可用,但要统一.
★在DW CS3中,可使得网页在adobe设置的相关硬件设备预览,如手机,PDA等
★csszengarden.com全球设计师用不同的CSS设计
5/15
基于DW CS3 中CSS Selectors的类型:
1: type 如 p{color:green}
2: class 如 .highlight{color:green}
3: ID 如 #mytag{color:green}
4: Pseudo-class 如 a:hover{color:green}
1.在Mock-up完成后,可置入DW CS3排版,用:
page properties- tracing image (类似参考背景图片,可设置透明度)
图片置入后不是通过设置网页属性(page properties)的上下左右margins,而是通过调整图片位置( view-tracing image-adjust tracing image positon)
2.排版网页,使用辅助标尺和参考线,按照tracing image插入div等元素,insert-layout-ap div,然后通过右侧提供的CSS属性窗进行具体设置
5/16
5/17
工作和生活都不爽.
和Bruce大致谈,我的薪水在M4G这里太可怜了.
晚上和一个在我住所的寄生虫吵架.
5/18
带回并研究无锡拓伟网站
5/19
Dreamweaver的自动工作
1) 历史记录(history)工具,可以象adobe其他产品那样,通过操作其面板,撤销和重新自如
2) 历史记录中的”命令”(commands)设置
3) 查找并替换(灵活运用,比如忽略空格等)
ctrl+f 搜索选项中,默认是”源代码”,但替换时容易把xhtml标签误操作
“文本”忽略html标签,只针对网页内容,不容易出错.
人生没有遥控器,从容面对一切
5/20
参观”上海公安博物馆”
Illustrator路径
多种修改工具,橡皮擦,剪刀,液化等
对两条路径实行渐变叠加,实现过渡面效果
多条路径相交时,对形成的不同的面”实时上色”(掌握这个对我我制作M4G的organ pie有帮助),方法如下:
选择既有的路径对象(需有形成封闭的面),对象–实时上色–建立(ctrl+alt+x),使用”油漆桶”工具具体上色
<诗经植物图鉴>
温柔敦厚,诗教也
蒹葭苍苍,白露为霜,所谓伊人,在水一方
5/21
DW中编辑图形(象)经常可跳转到图形软件编辑,默认的用fireworks(我以前倾向于用此).其实是可以对不同类型的如”.jpg .png”等设置外部程序如photoshop为优先级. 编辑–首选参数–文件类型/编辑器.设置对应”扩展名”的”编辑器”
AdobeCS web产品中,一个很用的功能是可以共享”剪切板”,如要在photoshop选中一个(块)图形使得能够到dreamweaver中编辑,不必将其剪切后保存,只需要选中并复制,然后在dw中选”粘贴”,设置”图象预览”相关参数,并保存,即可使用!
5/22
Dreamweaver Getting Your Site Online
1:site report 站点报告,在底层”结果”一栏,方便检查错误.
英语tip
“如xxx.com”(如什么什么之类的东西)
something like ” whatever dot com ”
5/23
通过网络矫正时间(原子钟) “时间和日期属性”–“Internet时间”–选择服务器,立即更新
海量音乐下载网站:www.trueice.net
垃圾网站的谋财之道
采集器,不会休息的网站编辑.
基本上主流的信息管理系统都自带采集器,比如帝国CMS和DedeCms,除此之外还有一些第三方的采集器可以与CMS系统配合使用,常见的是小蜜蜂采集器,火车头采取器和NC采集器等等.
双机互联,地址,端口
5/24
Layout tools
Tracing image(参考图象)
Layer(用div定位,CSS设置属性)
Table(用table widths)
5/25
读电脑杂志
5/26
读电脑杂志
5/27
住所准备上网
双机互联:最对等双绞线,设相同的IP段即可
Hub共享上网:需由做服务器的电脑,建立局域网
宽带路由器:无需服务器电脑,对等线接入路由器,网络线连接电脑,可进行防火墙设置等
交换机:针对大型网络使用
5/28
下午去徐家汇”大众书局”看半天书,圆珠笔吐水坏掉了,没记东西.
看的也都基本忘光了.
大抵可访问css8.cn网站
5/29
Table之美
其实table构建网页结构也是可以的
表格边框属性:border-collapse:collapse .padding属性
表格可做hover”鼠标移动变化热点”属性,如:
tbody tr { background:#fff;}
tbody tr: hover { background:#000; color:fff:}
tbody tr: hover a,tbody tr: hover a visited {color:#fff;}
这将实行常用的滑动实现表格变换背景颜色,和变化所在行字体,但Firefox支持,IE6不支持.
CSS表格参考设计网站
http://icant.co.uk/csstablegallery
5/30
hope give a pay raise
5/31
CSS 教程
Working with Color and Contrast
