网页设计学习日志

7月4日

Cs5中：shift+alt 以**为中心点等比例缩放 100%显示或者ctrl alt+0双击放大镜图标 像素crtl+alt 2 职能对象的特点是什么 第一课：晕映的制作：

第一种方法：Ctrl+t自由变换图片的大小atl+shift等比缩放 q快速进入蒙板 b画笔 q 退出蒙板 反选 删除

第二种方法：设置羽化值为20 套索工具 反选 清除

第三种方法：添加图层蒙板 b画笔 黑色力度最大可隐藏不想要的 灰色白色力度最小 可显示想要的 ctrl+alt+z逐步还原 第二课艺术图案：

主要用到：通道 滤镜

选区填充前景色 alt+ delete填充背景色 ctrl +delete 取消选区 ctrl +d

载入选区 ctrl +点击它 步骤：

新建通道 画矩形选框 取消选择 滤镜 高斯模糊 扭曲 新增图层通道载入图层 填充颜色 取消选区 拖入图片 将通道载入的选区ctrl+enter 载入图层 ctrl+shift+I反选 在图片图层删除 隐藏通道图层

第三课制作按钮：

一个物体有浅色 本色 阴影色

新建背景 新建图层 矩形工具 shift 画一个正方形 编辑渐变颜色：白色本色重色 按住shift45度填充颜色 填充完颜色可以再用fx中的渐变叠加修改配色，取消选区，新建图层 画一个比刚才小的正方形 填充渐变 ctrl全选 垂直居中对齐 图层fx里投影

复制图层：拉图层到新建图层图标上

7月5日

制作圆锥体：

新建图层画椭圆 填充 新建图层用钢笔画出三角形填充 图层链接 ctrl +e 以上也可这样：新建图层 画椭圆 画三角形 建立选区 添加选区 填充黑色 ）新建图层画出矩形 渐变 透视 圆锥载入选区 在矩形的图层反选 清除 隐藏圆锥图层 制作分格效果：

图片拉过来 ctrl j复制一个图层 视图 新建参考线 m单行选框工具（添加到选区） 单列选框工具 选择 修改 边界 扩展 填色 ctrl+；清除边框Ctrl+d取消选择 ctrl+j复制图层 或者shift+ctrl+c全部复制 粘贴四个 然后ctrl+t右键 透视 然后按着alt调整 图案平铺步骤 ：

新建文件 大小设小点 编辑---定义为图案 新建文件 大小大点 shift+delete填充图案

钢笔画图 好处：可调节 然后添加到选区 放大ctrl空格 alt空格缩小

Ctrl+shift+c 全部复制 ctrl+j复制图层 制作暴风雪：

图片拉过来 ctrl+j复制出一个图层 滤镜 像素化 点状化 图像 调整 去色或设置阈值 滤镜 动感模糊 图层：滤色 金属苹果

F盘Ps教程里

Ctrl+enter载入选区 。复制苹果图片的图层1钢笔绘制 路径载入选区反选 清除 路径载入选区 填充深灰前景色 按着alt 不弹出删除吗对话框

7月6日

制作荧光字：

新建文件 T 载入选区 新建通道 填充白色取消选区 高斯模糊 载入选区 回到图层 新建图层 添加渐变色 添加杂色 高斯模糊 取消选择 心得：图层的不透明度是整个图层的不透明度 填充是改变颜色

滤色是变亮去掉黑色 两面叠加是变暗去掉白色 通道的作用是储存选区 制作艺术相框：

拉入图片 背景解锁变为图层0 新建通道 画矩形 填充白色 取消选区 滤镜扭曲 可以多种效果叠加 载入选区 回到图层 根据需要变换选区 反选 删除 新建图层 至于最下层作为背景 取消选区 给新建图层填充颜色

心得：选择里变换选区 变换选区跟ctrl+t自由变换的区别为变化选区只是选区的变化 原图片大小不变

钢笔工具 按着alt可随意调节大小 制作卷边：

拉入图像变为图层0 新建图层在最下面并填充白色作为背景 钢笔画路径 载入选区新建图层 渐变 卷边自然地就是新建的图层了 选择——修改——羽化 取消选区 钢笔绘出要删除的路径 ctrl+enter载入选区 del 心得：载入选区 新建图层 此选区自然就出现在新的图层了 制作手牵手文字：

新建图层 T 写个o 调整颜色为红色 新建图层 再写o 调整为蓝色 ctrl两个图层 删格化文字 要想删蓝色 ：红色载入选区 在蓝色图层矩形选框（相交矩形） 删除 编织字：

新建文件 新建图层 设置画布大小为很小：50*50 用参考线做辅助画宽度为10的矩形 填充颜色 新建图层 把矩形复制过来 制作完编辑 定义图案 新建文件 T 写编织二字 载入选区 新建图层 隐藏文字图层 在选区里 shift+del 填充刚才定义的图案 ctrl+d

撕纸效果：

1、打开素材图片，双击背景图层解锁，把背景图层复制一层，用套索工具勾出需要制作缺口的选区，选的时候要突出没有规则，有一定的小棱角。

2保持选区，按字母“Q”加上快速蒙版，执行：滤镜 > 扭曲 > 波纹，数值为100，大小选择小，确定后再执行：滤镜 > 画笔描边 > 喷溅，数值自定。

3、在背景副本层直接按“ctrl +x”剪切，不取消选区，然后在背景图层上新建一个图层，填充图片主体颜色，填充后不要取消选区。剪切的粘贴到一个新的图层 4、按“Q”推出快速蒙版（保护图层），点通道面板，新建一个通道，得到通道1，填充白色。

5、在图层的最上面新建一个图层，执行：选择 > 修改 > 扩展，数值为4，然后填充白色，回到通

道面板，调护通道1的选区，回到图层面板，在白色填充图层按“Delete”删除，这样白边就出来了。

6、回到背景副本层适当的加点投影效果，再在白边层加点杂色效果，玩策划那个最终效果。

心得：套索工具的羽化值为0边缘清晰 此效果中羽化值应该设为0。注意及时取消选区 对图层操作而不是仅对选区操作时。

扭曲波纹是对整个图层的操作 要想只对选区操作必须用快速蒙板保护图层

7月7日

羽毛扇：

新建文件 背景变为图层0填充黑色 新建图层 新建通道 自由钢笔 画羽毛 载入选区 填白色 滤镜 画笔描边 喷色描边 涂抹工具 载入选区 填充白色 取消选区 新建图层 在通道里 钢笔画羽毛杆 载入选区 在新图层里 填充灰色 描边 减淡杆 新建图层 B 绒毛球 合并羽毛、杆。绒毛图层为一个图层，ctrl+j复制出一个新的此图层 ctrl+t 把中间的点移到羽毛下方 旋转 ctrl+shift+alt+T重复上一步动作 复制出很多旋转的羽毛 心得：ctrl几个图层 按ctrl+e可合并为一个图层，ctrl+shift+alt+T重复上一步动作 复制出很多旋转的羽毛 剪切蒙板：

拉入图片 变为图层 套索或矩形等选区域 新建图层 此时选区在新图层里 填充颜色 拉一个图片 再拉到上一个文件里成为新的图层 剪切蒙板：alt+点区域和新图层的缝隙 取消选区

心得：必须填充颜色 不然选区不能用 。 剪切蒙板的作用是将此图层的内容放

在上一图层的区域。

矢量蒙版：点钢笔工具或者矩形工具选项中的第一个形状图层，即矢量蒙板。特点：1.画出来即有前景色，转换颜色时不用载入选区，可直接填充，也可载入选区，2.可用转换点变形3.画的东西放大后不会太模糊4.遮挡一部分 显示一部分

7月8日

画实图层 渐变叠加 描边 描边里也有渐变 心得：描边时背景不能是白的 应该是透明的 ，选区在编辑描边里描边 填充了颜色的实图在fx里描边

画区域 Alt+ctrl 加鼠标移动可以把此区域的补到一些地方 atl+ctrl+shift是垂直水平的补齐 tab+f 全屏 百度文本框做法：

新建图层 画矩形选框 填充白色 描1像素的边 内阴影 取消选择 新建图层 画矩形框 在编辑里描1的边 用矩形选框删除第二个矩形的下边 上边没有颜色的补齐

心得：Shift添加到选区 alt从选区减去 shift+atl与选区交叉。 百度页面作为图层 在此图层对照着做 东信网页 ：

用矩形选框工具 钢笔工具 右键新建选区 添加到选区或者从选区减去 可以画不规则的图形 减淡|加深工具可制造不规则的颜色 心得：ctrl+空格：放大图片 看细节然后决定怎么模仿

7月11日

制作微博：

可自制大背景 心得：用画笔添加效果画白色形状可做背景自然的图形渐变 按钮：内发光

文本框之间的距离一般为5px

7月12日

制作团购网

一个网页一般由图标（50px左右） 菜单 广告 栏目组成 栏目分左中右或左右风格

7月13日

切片工具：按空格可来回拖动切片，把网页切割 存储为web 格式改为jpeg 存储名字用英文格式为图像和html 可看到image里已经切好的图片。

7月14

ps中一些工具

污点修复画笔：画笔大小最好和污点大小差不多 修复画笔：按着alt提取样本 点在需要的地方 仿制图章：跟修复画笔差不多

修补工具：画的是需要补的区域 拉到能补它的区域 红眼修复工具：框着红眼即可去掉红眼 只能去红色

ctrl+u 色相是一个色带 饱和度是色彩的明亮 明度是整个图片的明亮 颜色是色相、饱和度和明度的综合体

画笔工具中的颜色替换工具：有几个选项：取样连续：把什么颜色都替换为前景色 一次取样：点击需要替换的颜色 按着鼠标左键不放 只替换一种颜色为前景色 背景色板：把背景色替换为前景色

历史记录画笔：点到哪一步用画笔画的区域会回到那一步的状态。 历史记录艺术画笔：画的时候出现艺术效果

用于模糊等特效后一部分需要恢复到原来的状态时用 渐变工具和图层蒙版结合用 擦掉一部分显示一部分 海绵：降低饱和度 饱和

Title和Keyword和description决定了网页搜索时的排名 在head中插入记录 html 文件头标签 关键字 说明 刷新

7月15日

新建站点

在DW中，站点 新建站点 布局里选择AP Div可绘制层 在层属性里可设置其背景图像 如何制作gif图片

在ps中 窗口 动画 制作完存储为web 格式为gif DW中窗口 时间轴

插入记录 图像 替换文本（图像不能显示时显示） 图像对象 鼠标经过图像 媒体 图像查看器 表格

7月18日

框架集

新建 实例中的页 框架集 每个块儿都ctrl+s保存 最后全部保存 用处：管理系统中上边和左边不变不刷新时用 网页中不常用框架 缺点是：不利于优化 链接时目标改为mainframe 表单

用于登陆框等

文本框 隐藏域 留言板 复选框 单选框

ps很快复制出很多按钮的方法ctrl+j复制一个 ctrl+t 把副本向下移动 ctrl+alt+shift+t重复以上动作 ps怎样批处理：

打开一张图片 新建动作 ctrl+alt+i图片大小 改变小 储存为jpg格式 结束录制动作 文件 自动 批处理 源文件夹是要处理的包 目标文件夹是缩小完的 模板：

创建html 插入 模板对象 创建模板 .dwt表格 插入模板对象 可编辑区域 新

建html 修改 模板 应用模板到页 编辑可编辑区域 保存 再新建html 编辑 保存 在模板中链接相应的html页 保存 更新 也保存html页 在html页中预览

服务器包括：

节省空间 使用方便 只需要改变一次代码

调用语句：代替head页面

剪切top时要包括top表格以上所有的代码 每个网页只有一个头部 要把html保存时改为。Asp后缀 所有的网页都是asp

7月19日 xml是可扩展语言 网站设计的流程：

1. 定位网站的主题和名称 2. 策划书与需求说明书 3. 定位网站CI形象

4. 网站的整体风格及创意设计 5. 首页的设计版面布局 6. 网站色彩的搭配 7. 网站字体的设置

需求 静态网页 用户体验 程序员动态页面 用户体验 上传服务器 护

html的结构是：

head里link 、base的用法

head有防止被复制 还有meta link ：新建css页 写入代码#main{border：1px solid 颜色；}保存

后期维 新建html页 插入表格 在表格那 一行代码加入 id=”main” css样式中附加样式表 则出现link语句 保存 预览

base：作用1.表明文章转自baidu

2.在框架集链接到的页面中加入代替链接到子页面的目标选项不填

7月20日

字体：

1．定义css样式（head）中在代码之间，然后调用为字体样式。下划线属性：text-decoration字间距：letter-spacing字体font-family 2.class属性定义: .a{ color:ffffff; font-size=78px;} 调用：

字体

color：#000000；font-size=23px；} 调用时

字体

3.选中字在链接里输入#即空链接，即出现a href?? 在css样式中编辑a{color：#000；text-；} a.hover{color：#fff；text-decoration：none；} 效果：此字原来的样式为a 鼠标经过时变为后面的样式。 4.

我们在一起

H2O下标 210上标 图像：

1.新建文件 保存文件再插入站点里的图片

2.标签div用法：

违反劳动法

违反劳动法

4.点击页面属性 背景图片 background-repeat：重复 可以平铺图片ps：画一个表格在background里链接复制的1px的渐变可以做一个头部

7月21日

表格代码

选中代码按着ctrl鼠标拖动可复制之 按tab整体向右移 tab+shift整体向左移 ctrl+alt+【】向左右移动 列表：

无序列表：

植物 动物

有序列表：

他

在ps里制作按钮作为网页的提交按钮步骤：制作按钮，载入选区 复制 新建文件 文件大小自动设置为跟按钮一样的大小了 粘贴 ctrl+s为gif 在DW中表单图像域里选择此按钮。

ps中T可以画一个区域 在区域里写很多字

制作倒影：复制图层，垂直翻转，图层蒙版 渐变 发光 制作投影：椭圆羽化 填充 透明度

黑体用微软雅黑 一般的文本不用特效 用宋体加粗

7月22日

文本的外链式内链式内嵌式：

新建css文件样式 #a{}新建html 附加样式表 外链式 样式中写.a{} 调用：内联式

body里直接写：内嵌式

line-height:24px;行间距 font-weight：bold；加粗 text-indent：48px，缩进两个字 属性鼠标：

光标cursor 文本样式中写 cursor：text|wait；意思是光标在文本上时的样子 代码body{cursor：url（“ x.ico”）}表示全局的光标是x图片，在ps中制作光标

8月8日：

css盒模型：

div整体布局：

定义样式： body{ width:1002px; margin: 0px auto;-----------------------------------------------------------------------自动居中 } #top{ width: 1002px; height: 100px; background-color:#bbf8e3; }

#main{ width:1002px; height: 400px; } #left{ width: 201px; height: 400px; background-color:#589480; float: left;---------------------------------------- --------左漂

}

#conter{ width: 600px; height: 400px; background-color:#91dcf5; float: left; }

#right{ width: 201px; height: 400px; background-color:#8e99ec; float: left; }

#bottom{ width: 1002px; height: 100px; background-color:#bbf8e3; }

调用：

若不设置main需在调用right后调用.clear{clear：both；} 效果如下：

用相对定位做圆角四角定位：. main{ width:510px;

height:50px; position:relative; }

.main .center{ width:510px; height:50px; background:url(cc_bc.gif) repeat-x;} .main .tl, .main .tr, .main .bl, .main .br{ width:5px; height:5px; background:url(four.gif) no-repeat; position:absolute; overflow:hidden;} .main .tl{top:0;left:0;

background-position:0 0; } .main .tr{ top:0;right:0; background-position:0 -5px;} .main .bl{ bottom:0;left:0; background-position:0 -10px;} .main .br{ bottom:0; right:0; background-position:0 -15px;}

相对定位绝对定位： .s{ width:370px; height:430px; position:relative;

border:2px solid #C6F; background-color:#CFF;} .s1{ position:absolute;top:0;right:0; //说明在右上角 也可设置数字 使之在相对位置的某个位置。 }





 

两角圆角：

注意两角在一个图片中： .main{ width:516px; height:100px;

} .main .le{ width:8px; height:100px; background:url(two.gif) no-repeat 0 0; float:left;} .main .center{ width:500px; height:40px; background:url(center.gif) repeat-x; float:left; padding:30px 0; } .main .ri{ width:8px; height:100px; background:url(two.gif) no-repeat 0 -100px; float:left;}

相对位置四角圆角：

.main{ width:510px; height:50px; position:relative; }

.main .center{ width:510px; height:50px; background:url(cc_bc.gif) repeat-x;} .main .tl, .main .tr, .main .bl, .main .br{

8月15日

一些ps效果的制作

1.适合人物颜色对比明显的制造若隐若现的效果：

拉入两张图片，在图层样式中选中“混合选项” 混合颜色带中 选中最上图层，在本图层中拉到哪里就隐藏什么颜色 按alt键可让过渡自然，下一层中 拉到那里就显示什么颜色。

2.不会的：用通道扣头发和人物

拉入人物图片，在通道里复制一个通道，ctrl+L调整其色阶使黑，用白色画笔画出要露出的头部，载入选区，回到图层中复制新建图层粘贴 抽出抠图：滤镜抽出，画笔画轮廓，填充，确定

3.在ps5中用套索画区域，填充content-aware可以把区域的内容填充为周边的事物。

4.消失点：滤镜——消失点 创建平面区域 选框工具 双击 按着alt移动 5.图像----计算 的用法 制作折纸痕迹

新建通道，画竖矩形，填灰到白的渐变，新建通道，画衡矩形，天渐变，计算，“混合”调整下，载入选区，新建图层，填充，混合模式改下。

8月16日

不会的：z-index的用法

8月17日

注意用

和

把html的声明里把1.0改为4.01使其左右没有滚动条。 不会的：字跑出 background:url(input.gif) ;

_background:url(input.gif) fixed;

注意：8识别的在前，6识别的在后。

怎么让图片在div中居中呢？#中写text-align：center

8月18日：

布局由区域大小分别用标签 div---ul---p/h---span

8月19日：

Coreldram 12：

按空格键工具转换为挑选工具

名片的大小一般为90mm 55mm

制作标志时ctrl+G 多个对象合为一个群组 ctrl+U取消群组 名片里最小的字为6.5 名字大点 按着shift可压缩 按P可使矩形居中在画布

8月22日

效果----精确裁剪 右键 编辑内容 泊坞窗---修整

点 右键使边框消失，左键可使颜色消失 变换 ：H为水平，V为垂直方向 应用到再制。

打字，ctrl+Q转化为曲线 双击 可随意变形，选中，用-? <---可缩短或者延长。 8月23日

制作光束效果：

复制图片 去色 滤镜 径向模糊（缩放） 滤色 复制合并 调整色阶和曲线 制作立体字：

在corel中用交互式立体化工具变形打入的字 再到ps中魔棒选中白色删去再处理。 图片拉进来有白色背景时 用图层样式选为正片叠底可以去掉白色。 制作太极：选中 排列方式 使之对齐

width:5px; height:5px; background:url(four.gif) no-repeat; position:absolute; overflow:hidden; //隐藏在5*5区域外的内容} .main .tl{top:0;left:0; background-position:0 0; } .main .tr{ top:0;right:0; background-position:0 -5px;} .main .bl{ bottom:0;left:0; background-position:0 -10px;} .main .br{ bottom:0; right:0; background-position:0 -15px;}

8月9日

dl：

dl{ width:330px; float:left;

margin:0; padding:0; } dt{ float:left; margin:0; padding:0; } dd{ float:left; margin:0; padding:0 0px 0 10px;} body { margin: 0px; }

1.

[2011-8-9]

事情不顺，接受吧，想法宽广点

1.

[2011-8-9]

事情不顺，接受吧，想法宽广点

框架居中：

它会自己生成一个空白页面，自己做的框架在这个空白页面中显示。

8月10日：

横向ul

body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } ul{ margin:0px; padding:0px; list-style:none; } ul li{ background:#36F; padding:0px; border-bottom:1px solid #fff; margin:0px; float:left; height:40px;} ul li a{ width:250px; display:block; color:#000; margin:0px; text-decoration:none; background:url(../85/ico.gif) no-repeat 5px 5px; padding:10px 25px; }

ul li a:hover{ margin:0px; text-decoration:none; background:url(../85/ico.gif) no-repeat 5px 5px; background-color:#FF0 ; height:20px;

} ul li.xu{ border-bottom:1px dotted #FFF; }

• 心得

  1. 如果插入的图片被撑大，有可能没有设置图片的宽和高。 2. 定义样式的时候，如果是 ul li#a{

  },要注意li和#a之间不能有空格。

  3． 如果样式1所属于样式2（继承关系），在调用的时候，则1需在调用2中标签中调用，否则无效。

  8月11日：

  padding margin值四个值是上、右、下、左 两个是上下、左右 三个值是上、 左右 、 下 浏览器区别：

  定义样式：

  调用：

  -------IE显示的是黑色，火狐显

  示的是红色

  ie6中 在输入框作为文本字段背景图片后若输入字多时跑出输入框，后面加入fixed就好了。background:url(images/srk.gif) no-repeat fixed;

  ie6中输入框会出现输入字超出的情况，用以下代码可在各个浏览器都正常。

  div东信网页总结：

  css样式：

  @charset \/* CSS Document */

  body{ font-family:\宋体\ font-size:12px; color: #6A6B6F; background:url(images/bc.gif) repeat-x #EEEEF0; margin:0; padding:0; }

  form, ul, li, h1, h2, h3, h4, h5, h6, input, p{ margin: 0; padding: 0; } a{ color: #6A6B6F;

  本文来源：https://www.bwwdw.com/article/y3fd.html