日志分类：网页制作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title></title> <style type="text/css"> A { ...
发表评论 »
外部引用CSS分为两种方式link和@import。本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。差别1：老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。 差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显（梦之都加载CSS 的方式就是使用@import，我一边下载一边浏览梦之都网页时，就会出现上述问题）。 差别3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。 差别4：使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
发表评论 »
⒈ 网页设计理念
⑴ 内容决定形式
先把内容充实上，再分区块，再定色调，再处理细节。
⑵ 先整体，后局部，最后回归到整体。
全局考虑，把能填上的都填上，占位置。然后定基调，分模块设计。最后调整不满意的几个局部细节。
⑶ 功能决定设计方向
看网站的用途，决定设计思路.商业性的就要突出赢利目的；政府型的就要突出形象和权威性的文章；教育性的，就要突出师资和课程。
⒉ 网页配色基本概念
⑴ ...
发表评论 »
2008-09-11，星期四 | 分类：
网页制作 | 标签：
网站,
视觉,
设计 | 102 views
下面总结下网站视觉设计的一些要点:
1—logo：
基本logo特征，符合logo设计基础（平面设计通用）显示器效果：清晰度，最小尺寸（因显示器分辨率而带来的，等同线下平面设计的印刷效果）
2—文字：
内容等级决定字体、字号大小、粗细；状态决定颜色（默认或者根据网站特殊统一）
3—广告、内容图片：
尺寸样式的定位，同一页面的和谐性，图片的优化，位置的节奏，大小对比。
4—icon：
品牌性，表达准确合理，设计手法（依据品牌性），一致性，作用：吸引，醒目，方便识别、理解、操作、记忆。
5—可点击（button)：
区别（不可点击），根据人的生活经验：厚度，可按，质感（实体联想），色彩（品牌性、统一性、对比性）；统一的样式大小（依据里面文字的内边距统一）
发表评论 »
水平导航栏的制作其实很简单，它是从垂直导航栏演变过来的。制作水平导航栏
我们要关注的的就是padding，color，backgroud-color，float，这几个属性。其
中float属性是水平导航栏跟垂直导航栏的最大的一个差别。实现代码如下：
首先新建一个文件，文件名为style.css，其中的内容如下：
其中颜色根据具体的情况来改。
#menu
{
background: #333;
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
#menu li
{
float: left;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
margin: 0; ...
发表评论 »
2008-09-04，星期四 | 分类：
网页制作 | 标签：
布局,
技巧,
网页 | 95 views
一、Homepage网页设计技巧
网站首页是企业网上的虚拟门面，制作精良和专业的网站设计，如同制作精美的印刷品，会大大刺激访问者的阅读欲望。专业的网站建设需要由专业的网站策划和网站设计人员进行规划、设计和制作。
一般来说，网站首页的形式不外乎有两种，一种是纯粹的形象展示型，这种类型文字信息较少，图像信息较多。这需要网页设计者具有良好的网页设计基础和审美能力，能够努力挖掘企业深层的内涵，展示企业文化。这种类型的homepage网站设计过程中一定要明确以设计为主导，通过色彩、布局给访问者留下深刻的印象。
另一种是信息罗列型，一般的大、中型企业网站和门户网站常用的方式，即在首页中就罗列出网站的主要内容分类、重点信息、网站导航、公司信息等等。网页设计人员在设计过程中要注意使用企业的VI和CI符号来表达某种独特的企业信息。
发表评论 »
关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助.
一、CSS HACK
以下两种方法几乎能解决现今所有HACK.
1, !important
随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)
<style>
#wrapper
{
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
</style>
2, IE6/IE77对FireFox
*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.
<style>
#wrapper
{
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */
}
</style>
发表评论 »
doctype 切换是浏览器用来区分遗留文档和符合标准文档的手段。无论是否编写了有效的css，如果选择了错误的doctype，那么页面就将以怪异模式表现，其表现就可能会有错误或者不可预测。因此一定要在站点的每个页面上包含形式完整的doctype 声明，并且在试用html是选择严格的dtd。以下是doctype声明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1-strict.dtd">
许多html编辑器会自动添加doctype声明。如果创建xhtml文档，他们还可能在doctype声明前面添加xml声明
<?xml version="1.0" encoding="utf-8"?>
xml声明是xml文件试用的可选声明，它定义试用的xml版本和编码设置。不幸的是如果doctype声明不是页面上的第一个元素，那么IE6会自动切换到怪异模式。因此 除非要将页面用作xml文档，否则最好避免试用xml声明。
发表评论 »
html文档示例：
＜html＞
＜head＞
＜title＞标题＜title＞
＜/head＞
＜body＞..........文件内容..........
＜/body＞
＜/html＞
html标签范例：
<头标签>内容<尾标签>
1.文件标题
＜title＞..........＜/title＞
2.文件更新--＜meta＞
【1】10秒后自动更新一次
＜meta http-equiv="refresh" content=10＞
【2】10秒后自动连结到另一文件
＜meta http-equiv="refresh" content=10＞
3.查询用表单
--＜isindex>
若欲设定查询栏位前的提示文字：
＜isindex prompt="提示文字"＞
4.预设的基准路径--＜base>
＜base href="放置文件的主机之URL"＞
版面
1.标题文字 ＜h#＞..........＜/h#＞ #=1~6；h1为最大字，h6为最小字
2.字体变化 ＜font＞..........＜/font＞
【1】字体大小 ＜font size=#＞..........＜/font＞ #=1~7；数字愈大字也愈大
【2】指定字型 ＜font face="字型名称"＞..........＜/font＞
【3】文字颜色 ＜font color=#rrggbb＞..........＜/font＞ rr：表红色（red）色码 gg：表绿色（green）色码 bb：表蓝色（blue）色码
3.显示小字体 ＜small＞..........＜/small＞
4.显示大字体 ＜big＞..........＜/big＞
5.粗体字 ＜b＞..........＜/b＞
6.斜体字 ＜i＞..........＜/i＞
7.打字机字体 ＜tt＞..........＜/tt＞
8.底线 ＜u＞..........＜/u＞
9.删除线 ＜strike＞..........＜/strike＞
10.下标字 ＜sub＞..........＜/sub＞
11.上标字 ＜sup>..........＜/sup＞
12.文字闪烁效果 ＜blink＞..........＜/blink＞
13.换行 ＜br＞
14.分段 ＜p＞
15.文字的对齐方向
＜p align="#"＞ #号可为 left：表向左对齐（预设值）
center：表向中对齐 right：表向右对齐 P.S.＜p align="#"＞之后的文字都会以所设的对齐方式显示， 直到出现另一个＜p align="#"＞改变其对齐方向，或遇到 ＜hr＞ⅱ＜h#＞标签时会自动设回预设的向左对齐。
16.分隔线 ＜hr＞
【1】分隔线的粗细 ＜hr size=点数＞
【2】分隔线的宽度 ＜hr size=点数或百分比＞
【3】分隔线对齐方向 ＜hr ...
发表评论 »