第1课 HTML语言(一)_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
文档贡献者
评价文档：
喜欢此文档的还喜欢
第1课 HTML语言(一)
把文档贴到Blog、BBS或个人站等：
普通尺寸(450*500pix)
较大尺寸(630*500pix)
大小：617.50KB
登录百度文库，专享文档复制特权，财富值每天免费拿！
你可能喜欢3982人阅读
跟我一起学extjs5(11--自定义模块的设计)
& & & &从这一节开始我们来设计并完成一个自定义模块。我们先来确定一个独立的模块的所能定义的一些模块信息。以下信息只是我自己在开发过程中想到或用到的，希望有新的想法的或者有建议的跟贴回复。
& & & & 一个独立模块包含以下信息：
& & & & 1、模块的基本信息
模块ID号：一个数字的ID号，可以根据此ID号的顺序将相同分组的模块放在一块。模块分组：模块分到哪个组里，比如说业务模块1、业务模块2、系统设置、系统管理等。模块标识：系统中唯一的模块的标识，一般这个标识等同于数据库中的表名和java中的java Bean的名字。如合同模块此标识为Agreement,其在数据库中的表名也是这个值，其java Bean名字为Agreement.java。模块名称：能够描述此模块信息的名称。模块简称：如果名称过长，有些地方可以用简称来代替。模块英文名称：万一要制作英文版，可以用英文名称。模块英文简称：可以用作生成编码字段。glyph值：模块的图标字符的值。如果设置的话，会用前几节讲到的图标字符来显示在模块前面。模块描述：备注：
2?模块的附加信息
主键字段名：这个模块的主键字段。(现在只支持单个主键字段，不支持复合主键字段，复合主键请改为约束)显示标志字段名：可以用于明确描述模块该记录的字段，比如说用记的用户姓名，单位的单位名称，合同的合同名称等。记录标题tpl：对于不能用一个字段明确描述记录的，可以设置几个字段来描述。比如某合同有个年度的付款计划，合同名称无法明确描述记录，必须加上年度才行。编码字段：如合同编码字段，可以在新增的时候对编码字段设置一个默认的生成规则。顺序号字段：对记录顺序敏感的模块设置，设置了此字段，可以在grid中拖动记录来改变此字段的值。日期字段：这个字段主要用于综合查询中，可以在此字段上设置各种年月日的条件。年度字段：月度字段：季度字段：文件字段：此模块如果有文件字段，可以上传文件放到此字段中。编码级次：如果此字段的主键可以有编码级次，则设置，编码类似于财务软件中的科目编码，如级次为2,2,那么编码可以为 00 ，03,01,03。编码级次会在后台进行管理，如果没有上级编码，则不允许加入下级编码。默认排序字段：在grid 加载的时候默认的排序联动模块：设置一些模块，在此模块的记录值改变过后，必要的时候，刷新已经打开的联动模块，值其值为最新的。是否有附件：此模块是否有附件。
3?权限信息
可用：设置成不可用将会在系统中禁用此模块。可浏览：设置成不可浏览，将禁止此模块显示在菜单里。可增加：可修改：可删除：可权限设置：可以在此模块上加上权限设置，比如说对于承建单位，可以设置权限，使某些人只能查看指定的单位和其子模块的信息。这个是一个重点，会有单独章节来讲解。可excel导入：可以对此模块的数据进行excel的批量导入。可excel修改：可以对此模块的数据导出后excel修改后，再导入。可图表：可以对此模块进行图表分析。可审核：系统里内置的审核功能。可审批：系统里内置的一个简易的审批流程。
权限信息为此模块的可设置的权限，并不是用户的权限，用户的权限要在模块已有的权限上进行设置才有。
以上信息是暂时能想到的关于一个模块中可以设置的信息。在系统的数据库中会有一个模块表，用于存放所有的这些信息，可以在前台修改后直接生效。也就是说你的客户要修改一个模块的名称，要给某个无附件的模块加上附件功能，或是可以显示图表，只要在前台设置一下就可以完成。不用去改后台的代码和服务器上的程序。自定义是这个系统开发的宗旨，能在前台修改的全部在前台修改。
定义好了模块以后，我们需要定义模块中的字段，以及gird列表，form列表等等一系列参数。
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：219051次
积分：3522
积分：3522
排名：第3772名
原创：99篇
评论：477条
文章：41篇
阅读：150050
文章：45篇
阅读：39159
(1)(1)(1)(9)(7)(20)(9)(23)(18)(1)(1)(1)(1)(3)(3)6889人阅读
跟我一起学extjs5(05--主界面上加入顶部和底部区域)
& & & & 这一节为主界面加一个顶部区域和底部区域。一个管理系统的界面可以粗分为顶部标题部分、中间数据展示和处理的部分、底部备注和状态部分。
& & & & 在增加这二个区域之前，我们先在MainModel.js中加入一些数据。
Ext.define('app.view.main.MainModel', {
extend : 'Ext.app.ViewModel',
alias : 'viewmodel.main',
name : 'app',
// 系统信息
system : {
name : '工程项目合同及资金管理系统',
version : '5.',
iconUrl : ''
// 用户单位信息和用户信息
company : '武当太极公司',
department : '工程部',
name : '张三丰'
// 服务单位和服务人员信息
service : {
company : '无锡熙旺公司',
name : '蒋锋',
phonenumber : '1320528----',
qq : ';,
email : '',
copyright : '熙旺公司'
// TODO - add data, formulas and/or methods to support your view
& & & & &在上面的代码中，在data中增加了三个类型的数据，下面分别有些属性。这些值和属性以后可以从后台获得。比如说后台的系统名称改过了，前台刷新一下界面，就能展示新的system.name。这也符合我这个系统的开发宗旨，能够动态的信息尽量动态化，修改的时候只要在前台配置就可以，不要去修改后台的js或java代码。
& & & & 下面在main的目录下加入二个文件，分别为Top.js和Bottom.js。目录结构如下：
& & & & Top.js定义了一个类，其类名为‘app.view.main.region.Top’，注意其类名的前面和其路径是一致的。extjs的类加载机制就是根据类名来找到具体的类文件在哪里的。
* 系统主页的顶部区域，主要放置系统名称，菜单，和一些快捷按钮
Ext.define('app.view.main.region.Top', {
extend : 'Ext.toolbar.Toolbar',
alias : 'widget.maintop', // 定义了这个组件的xtype类型为maintop
items : [{
xtype : 'image',
bind : { // 数据绑定到MainModel中data的ystem.iconUrl
hidden : '{!system.iconUrl}', // 如果system.iconUrl未设置，则此image不显示
src : '{system.iconUrl}' // 根据system.iconUrl的设置来加载图片
xtype : 'label',
text : '{system.name}' // text值绑定到system.name
style : 'font-size : 20 color :'
xtype : 'label',
text : '{system.version}'
}, '-&', {
text : '菜单',
text : '工程管理',
text : '工程项目'
text : '工程标段'
}, ' ', ' ', {
text : '主页'
text : '帮助'
text : '关于'
text : '注销'
}, '-&', '-&', {
text : '设置'
& & & & 上面是Top.js类的定义，这是一个toolbar控件，里面加入了一些label和Button,用于显示系统名称以及用来实现一些操作。toolbar的items下默认的xtype是Button。源代码的注释里面也写入了如何绑定到MainModel 的数据的备注。
& & & & 下面是Button.js的代码：
* 系统主页的底部区域，主要放置用户单位信息，服务单位和服务人员信息
Ext.define('app.view.main.region.Bottom', {
extend : 'Ext.toolbar.Toolbar',
alias : 'widget.mainbottom',
items : [{
text : '使用单位:{user.name}'
text : '用户:{user.name}'
}, '-&', {
text : '服务单位:{pany}'
text : '服务人员:{service.name}'
text : 'tel:{service.phonenumber}'
hidden : '{!service.email}', // 绑定值前面加！表示取反，如果有email则不隐藏，如果email未设置，则隐藏
text : 'eMail:{service.email}'
text : '©{service.copyright}'
& & & & 至此要加入的二个js文件已经就绪，现在我们要把他们放到Main的主页面之中。Main.js也需要修改一下，需要引入上面这二个类，以及把他们放到items下，并设置好位置。
* This class is the main view for the application. It is specified in app.js as
* the &autoCreateViewport& property. That setting automatically applies the
* &viewport& plugin to promote that instance of this class to the body element.
* TODO - Replace this content of this view to suite the needs of your
* application.
Ext.define('app.view.main.Main', {
extend : 'Ext.container.Container',
xtype : 'app-main',
uses : ['app.view.main.region.Top', 'app.view.main.region.Bottom'],
controller : 'main',
// MVVM架构的控制器的名称，会在当前路径中根据‘Main’ + Controller 来确定文件名
// 这个我没找到其他任何可以自动加载MainController.js的依据，只能作上面的判断了
viewModel : {
type : 'main'
// MVVM架构的viewModel的类型，会在当前路径中根据‘Main’ + Model 来确定文件名
layout : {
type : 'border' // 系统的主页面的布局
items : [{
xtype : 'maintop',
region : 'north' // 把他放在最顶上
xtype : 'mainbottom',
region : 'south' // 把他放在最底下
xtype : 'panel',
title : '{name}'
region : 'west', // 左边面板
html : '&ul&&li&This area is commonly used for navigation, for example, using a &tree& component.&/li&&/ul&',
width : 250,
split : true,
text : 'Button',
handler : 'onClickButton'
region : 'center', // 中间面版
xtype : 'tabpanel',
items : [{
title : 'Tab 1',
html : '&h2&Content appropriate for the current navigation.&/h2&'
& & & & extjs中有许多布局，其中的一个border比较常用，他可以将items分成上、下、左、右、和中间五个部分。经过上面几步以后，在浏览器刷新一下网页，会看到如下结果：
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：219052次
积分：3522
积分：3522
排名：第3772名
原创：99篇
评论：477条
文章：41篇
阅读：150050
文章：45篇
阅读：39159
(1)(1)(1)(9)(7)(20)(9)(23)(18)(1)(1)(1)(1)(3)(3)纸飞机许愿
前端路上，一路有你。编辑你的正能量，快乐工作，努力生活~
> sublime text 2 前端编码神器-快捷键与使用技巧介绍
sublime text 2 前端编码神器-快捷键与使用技巧介绍
作者： 轩枫
点击量：12026
代码编辑器或者文本编辑器，对于程序员来说，就像剑与战士一样，谁都想拥有一把可以随心驾驭且锋利无比的宝剑，而每一位程序员，同样会去追求最适合自己的强大、灵活的编辑器，相信你和我一样，都不会例外。
如果说“神器”是我能给予一款软件最高的评价，那么我很乐意为它封上这么一个称号。sublime text 2（以下简称ST2）小巧绿色且速度非常快，跨平台支持Win/Mac/Linux，支持32与64位，支持各种流行编程语言的语法高亮、代码补全等，但ST2有着很多其他编辑器没有的超酷的特性，让它的好用达到了前所未有的程度……
ST2不是免费的，但可以永久免费使用，只是在保存的时候，偶尔会弹出要你购买注册的对话框，仅此而已。软件官网下载地址：。去下载试试吧~
最近一直在使用ST2，因为DW太臃肿，而ST2编写代码速度很快很轻便~
SublimeText2 支持但不限于 C, C++, C#, CSS, D, Erlang, HTML, Groovy, Haskell, HTML, Java, JavaScript, LaTeX, Lisp, Lua, Markdown, Matlab, OCaml, Perl, PHP, Python, R, Ruby, SQL, TCL, Textile and XML 等主流编程语言的语法高亮。ST2 拥有优秀的代码自动完成功能 (自动补齐括号，大括号等配对符号；自动补全已经出现的单词；自动补全函数名)，非常智能；另外 ST2 也拥有代码片段（Snippet）的功能，可以将常用的代码片段保存起来，在需要时随时调用。
强大的多行选择和多行编辑
代码地图、多种界面布局与全屏免打扰模式
强大的快捷键，提高你的编码效率。
常用快捷键
CTRL+N：新建文件
CTRL+w：关闭文件
CTRL+O：打开文件
CTRL+Z：撤销
CTRL+Y：撤销还原
CTRL+F：查找
CTRL+H：替换
Esc：小工具窗口隐藏
编码快捷键
Ctrl+Shift+P 打开命令面板，如设置编码语言
Tab：缩进、自动完成
Shift+Tab 去除缩进
Ctrl+J 合并行（已选择需要合并的多行时）
Ctrl+T 词互换
Ctrl+U 软撤销
Ctrl+K Backspace 从光标处删除至行首
Ctrl+KK 从光标处删除至行尾
Ctrl+K+T 折叠属性
Ctrl+K+U 改为大写
Ctrl+K+L 改为小写
Ctrl+K+0 展开所有
Ctrl+Enter 插入行后（快速换行）
Ctrl+Shift+/ 注释已选择内容
Ctrl+Shift+↑可以移动此行代码，与上行互换
Ctrl+Shift+↓可以移动此行代码，与下行互换
Ctrl+Shift+[ 折叠代码
Ctrl+Shift+] 展开代码
Ctrl+/ 注释整行（如已选择内容，同“Ctrl+Shift+/”效果）
Ctrl+Shift+A 选择光标位置父标签对儿
Ctrl+Shift+D 复制光标所在整行，插入在该行之前
Ctrl+Shift+K 删除整行
Ctrl+Shift+L 鼠标选中多行（按下快捷键），即可同时编辑这些行
Ctrl+Shift+M 选择括号内的内容（按住-继续选择父括号）
Ctrl+Shift+Enter 光标前插入行
Ctrl+PageDown 、Ctrl+PageUp 文件按开启的前后顺序切换
Ctrl+鼠标左键 可以同时选择要编辑的多处文本
Shift+鼠标右键（或使用鼠标中键）可以用鼠标进行竖向多行选择
查找快捷键
CTRL+P：查找当前项目中的文件和快速搜索，快速查找标签位置
Ctrl+P输入 @ 查找文件主标题/函数；或输入：跳转到文件某行
CTRL+G：跳转到指定行
CTRL+F：查找
Ctrl+D 选词 （反复按快捷键，即可继续向下同时选中下一个相同的文本进行同时编辑）
Ctrl+L 选择整行（按住-继续选择下行）
Ctrl+M 光标移动至括号内开始或结束的位置
Ctrl+R 快速列出/跳转到某个函数
ctrl+shift+F 在文件夹内查找，与普通编辑器不同的地方是sublime允许添加多个文件夹进行查找
其他快捷键
Ctrl+K+B 开启/关闭侧边栏
Ctrl+Tab 当前窗口中的标签页切换
Ctrl+F2 设置书签
Shift+F2 上一个书签
Alt+Shift+1（非小键盘）窗口分屏，恢复默认1屏
Alt+Shift+2 左右分屏-2列
Alt+Shift+3 左右分屏-3列
Alt+Shift+4 左右分屏-4列
Alt+Shift+5 等分4屏
Alt+Shift+8 垂直分屏-2屏
Alt+Shift+9 垂直分屏-3屏
Alt+. 闭合当前标签
Alt+F3 选中文本按下快捷键，即可一次性选择全部的相同文本进行同时编辑
Tab 缩进 自动完成
F2 下一个书签
F6 检测语法错误
F9 行排序(按a-z)
F11 全屏模式
安装插件准备步骤
1.先装一个管理插件的插件，必备：package control
1.按Ctrl+`调出console
2.在底部代码行贴上以下代码并回车：
import urllib2,pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else Nopen(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())
3.重启sublime text，如果在Perferences-&package settings中看到package control这一项，则安装成功。
1.按Ctrl+`调出console2.在底部代码行贴上以下代码并回车：import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())&3.重启sublime text，如果在Perferences-&package settings中看到package control这一项，则安装成功。
2.点击Preferences→Package Control，显示以下弹窗：
Disable Package ：禁用插件
enable Package ：启用插件
Install Package ：安装插件
List Package ：查看已安装插件列表
Remove Package ：移除插件
Upgrade Package ：升级插件
Disable Package ：禁用插件enable Package ：启用插件Install Package ：安装插件List Package ：查看已安装插件列表Remove Package ：移除插件Upgrade Package ：升级插件
3.安装插件
Preferences→Package Control→Install Package，输入插件名称，会看到编辑器的底部在loading下载安装中，安装完后，一般重启即可。
插件及功能推荐
编码快捷键，前端必备-Emmet
Emmet作为zen coding的升级版，对于前端来说，可是必备插件，如果你对它还不太熟悉，可以在其官网（）上看下具体的视频教程。或者是也可以再这里看
举例：ul#nav&li.item$*4&a{Item $}
显示结果是
&ul id="nav"&
&li class="item1"&&a href=""&Item 1&/a&&/li&
&li class="item2"&&a href=""&Item 2&/a&&/li&
&li class="item3"&&a href=""&Item 3&/a&&/li&
&li class="item4"&&a href=""&Item 4&/a&&/li&
&ul id="nav"&&&&&&li class="item1"&&a href=""&Item 1&/a&&/li&&&&&&li class="item2"&&a href=""&Item 2&/a&&/li&&&&&&li class="item3"&&a href=""&Item 3&/a&&/li&&&&&&li class="item4"&&a href=""&Item 4&/a&&/li&&/ul&
有够快么？还有更多例子，请看
快捷输出dtd头文件，即HTML头部信息
在没装emmet插件的情况下，如果输入html，显示的仅是简单的html结构，不包含dtd头文件，这让人很郁闷。不过以下的解决方法挺不错，支持多种头文件，html5的写法也支持哦~
在装了emmet插件之后，可以使用html:4t、html:4s、html:xt、html:xs、html:xxs、html:5等6中dtd设置中的一种，然后TAB键，即可快速生成头文件。关于头文件，以前经常使用的是html:xt这个格式的，也就是dreamweaver自动生成的头文件。不过现在标准的是html:5的头文件，基本的浏览器都支持了，没什么问题。
让Sublime Text2支持快捷键在浏览器中预览
用过dreamweaver的同学都知道，F12能快捷在浏览器中浏览正在编辑的文件。而这个功能在sublime需要，点击右键，然后open in browser。这显然还不够便捷。下面来看怎么解决吧~
Sublime Text2支持用Python编写插件，详细步骤是：
一、点击菜单Tools -& New Plugin…，在创建好的py文件输入下列内容：
import sublime, sublime_plugin
import webbrowser
url_map = {
'/Users/jerry/Sites/test/' : 'http://test/',
class OpenBrowserCommand(sublime_plugin.TextCommand):
def run(self,edit):
window = sublime.active_window()
window.run_command('save')
url = self.view.file_name()
for path, domain in url_map.items():
if url.startswith(path):
url = url.replace(path, domain).replace('\\', '\/')
webbrowser.open_new(url)
123456789101112131415161718
import sublime, sublime_pluginimport webbrowser&url_map = {&&&&'/Users/jerry/Sites/test/' : 'http://test/',}&class OpenBrowserCommand(sublime_plugin.TextCommand):&&&&def run(self,edit):&&&&&&&&window = sublime.active_window()&&&&&&&&window.run_command('save')&&&&&&&&url = self.view.file_name()&&&&&&&&for path, domain in url_map.items():&&&&&&&&&&&&if url.startswith(path):&&&&&&&&&&&&&&&&url = url.replace(path, domain).replace('\\', '\/')&&&&&&&&&&&&&&&&break&&&&&&&&&webbrowser.open_new(url)
将文件保存到Packages/User目录（Packages可通过菜单里的Browser Packages…打开），文件名随意，如open_browser.py。插件部分完工了。
二、接下来，为刚才的插件分配快捷键。点菜单Tools -& Command Palette…，或者f12，打开命令集，选择“key Bindings – User”打开个人快捷键配置，输入下列内容：
[{ "keys": ["f12"], "command": "open_browser" }]
[{ "keys": ["f12"], "command": "open_browser" }]
这就是要做的全部工作，可以测试下了。打开一个html文件，f12试试，没意外的话文件会在默认浏览器打开了。url_map里配置的站点目录到URL的映射应该也是可用的。
PS：如果要指定用什么浏览器预览，也可以将最后一行代码改成这样：
webbrowser.get('safari').open_new(url)
webbrowser.get('safari').open_new(url)
webbrowser具体支持get哪些浏览器，可以通过webbrowser._browsers查看。只是，ST2默认使用的是python2.6，在我的mac os下，python2.6找不到任何可用的浏览器。2.7的webbrowser.py里多了一段patch，可以找到firefox和safari。好在，对我来说，能在默认浏览器预览已经够用了。
JS Format-Javascript的代码格式化插件
很多网站的JS代码都进行了压缩，一行式的甚至混淆压缩，这让我们看起来很吃力。而这个插件能帮我们把原始代码进行格式的整理，包括换行和缩进等等，是代码一目了然，更快读懂~
LESS-LESS高亮插件
用LESS的同学都知道，sublime没有支持less的语法高亮，所以这个插件可以帮上我们
不过由于编辑器过于快捷，也就是过于偷懒吧，所以不建议初学者使用~
– –
还有更多功能，等你来发现
新增插件介绍文章：
设置滚动速度
扫一扫，用手机观看！
用微信扫描还可以
分享至好友和朋友圈
SocialRecruitment社会招聘
C++后台开发工程师
腾讯公司 微信企业应用中心
高级产品运营经理、运营开发工程师、高级产品经理
不打卡只刷脸、咖啡可乐下午茶、体检健身境外游、带薪年假很多天、五险一金、加班送吻
负责微信企业号后台开发、优化与架构工作
有成功上线项目经验
精通Linux下C/C++开发
掌握网络,存储方面的开发
We Want You
后台开发工程师
简历请发送至&今天的这个教程，教大家如何把psd页面利用div+css切割成html页面，这类的教程，本站做的一直都很少，大多讲的都比较零碎的一些东西，在今后，我们将慢慢发布翻译出更多这类的教程，供大家学习，转载请著名来源，以及站码翻译，谢谢....
首先看看效果
下面的图片就是效果图，切割出来后，可能头部和底部会宽点.....
新建文件夹
开始时，在您的计算机中创建一个文件夹。我把它命名为zmool。再在文件夹中创建新文件夹images，放网站的所有图像。接下来打开代码编辑器（Dreamweaver），并在根目录下创建一个HTML文件名为index.html，这是我们的主页模板。现在创建一个新的CSS文件，并将其命名为style.css文件。如下图：
打开index.html文件。在head标签顶部，添加链接到您的样式表（style.css）。你可以使用下面的代码。
&link href=&style.css& rel=&stylesheet& type=&text/css& /&
头部的代码如下面:
&!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&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&Modern Design Studio&/title&
&link href=&style.css& rel=&stylesheet& type=&text/css& /&
建立HTML结构
现在，我们将设置HTML文件结构。设置3个部分（标题，内容，页脚）像下面一样:
&!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&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&Untitled Document&/title&
&link rel=&stylesheet& type=&text/css& href=&style.css& /&
&div id=&header&&
&div id=&content&&
&div id=&footer&&
我们的PSD文件包含了很多纹理效果，我们要把这些全部切出来，然后，用代码添加到网页上面，使div页面效果和设计的效果达到一致。
&div id=&header&&
&div id=&container&&
&div id=&content&&
&div id=&container&&
&div id=&footer&&
&div id=&container&&
现在在photoshop里面打开原先设计好的, 隐藏所以的图层，除背景层外.
现在采取的切片工具，选择背景，保存网页web格式按（ALT +shift+Ctrl + S）。然后保存的图像文件夹文件名为background.jpg。
设置背景样式
打开style.css文件，设置基本样式，还有背景样以及主体部分的宽度，如下代码：
padding: 0
background:url(images/background.jpg);
#container
width: 960
返回photoshop，隐藏所以图层，除头部背景外，并用同样的方法，把头部背景图片切割保存为web格式，保存文件名为head.jpg。
编辑头部背景代码
在style.css文件里编辑如下代码:
background:url(images/header.jpg);
height:124
切割头部logo
在这时，切割logo层，隐藏所有图层，包括背景层，如上同样方法切割logo层保存为logo.png，注意：保存为png格式图片
添加在页面添加logo
现在返回到html中，在#header #container内,添加下面的代码&div id=&logo&&....&/div&.
&div id=&header&&
&div id=&container&&
&div id=&logo&&&a href=&#&&&img src=&images/logo.png& class=&logo&&&/a&&/div&
现在, 下面切换到style.css文件，编写#logo样式.
margin-top:20
编辑导航代码
下面是页面里的代码，头部header包括logo和导航两个部分.
&div id=&header&&
&div id=&container&&
&div id=&logo&&&a href=&#&&&img src=&images/logo.png& class=&logo&&&/a&&/div&
&li&&a href=&#&&Home&/a&&/li&
&li&&a href=&#&&About&/a&&/li&
&li&&a href=&#&&Work&/a&&/li&
&li&&a href=&#&&Blog&/a&&/li&
&li&&a href=&#&&Contact&/a&&/li&
导航样式如下：
现在,添加css表里的导航样式~，ul、li和链接a的样式:
#header li
color:#959595;
list-style:
margin-right:20
font-family:&Myriad Pro&,
font-weight:
font-size:24
#header li a
color:#959595;
text-decoration:
padding:10
#header ul
margin-top:-40
#header li a:hover
background:#202020;
color:#d2d2d2;
-moz-border-radius:5
-khtml-border-radius:5
-webkit-border-radius:5
现在制作中间部分
现在我们在页面的中间部分content添加两个div，如下图：
&div id=&content&&
&div id=&container&&
&div id=&featured&&
&div id=&paragraphs&&
切换到photoshop的psd页面, 切下中间部分，取名为featured.jpg.如下图：
在你的HTML页面添加如下代码， 和一些文字介绍:
&div id=&content&&
&div id=&container&&
&div id=&featured&&
&a href=&#&&MORE PROJECTS&/a&
&p class=&dummytext&&&span&Portfolio project, Jan 5th, 2010&/span& Have you
ever wanted to create clean and nice portfolio design? In this tutorial I
will show you how to design clean blue portfolio layout. Have you ever wanted
to create clean and nice portfolio design? In this tutorial I will show you how
to design clean blue portfolio layout in Adobe Photoshop.&/p&
&div id=&paragraphs&&
在PSD文件里，隐藏其他所以图层，只留下按钮图层部分，切下按钮部分，保存png格式，命名为button.png.
现在我们把这些图片添加到页面中去，切换到css文件页面，添加如下代码，这里包括背景样式，和按钮的样式.
background:url(images/featured.jpg) no-
height:381
margin-top:30
margin-left:80
#featured a
background:url(images/button.png);
text-indent:-9999
margin-top:330
margin-left:180
#featured a:hover
background-position:0px 30
现在我们添加些dummytext（文字介绍）的样式:
.dummytext
color:#d2d2d2;
margin-top:150
font-family:Arial, Helvetica, sans-
font-size:12
line-height:180%;
margin-left:290
.dummytext span
font-size:16
color:#191919;
font-weight:
下面添加添加图片展示下面的分类介绍部分
页面的代码部分如下.
&div id=&paragraphs&&
&p class=&paragraph&&
&span&BEAUTIFUL&/span&WebDesignFan is a design related blog about web design, photoshop, freebies
and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
resources like vectors, wordpress themes and a lot of inspiration.
&p class=&paragraph&&
&span&EFFECTIVE&/span&WebDesignFan is a design related blog about web design, photoshop, freebies
and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
resources like vectors, wordpress themes and a lot of inspiration.
&p class=&paragraph&&
&span&FUNCTIONAL&/span&WebDesignFan is a design related blog about web design, photoshop, freebies
and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
resources like vectors, wordpress themes and a lot of inspiration.
我们中间部分的内容，整体看起来应该是这样的:
&div id=&content&&
&div id=&container&&
&div id=&featured&&
&a href=&#&&MORE PROJECTS&/a&
&p class=&dummytext&&&span&Portfolio project, Jan 5th, 2010&/span& Have you
ever wanted to create clean and nice portfolio design? In this tutorial I
will show you how to design clean blue portfolio layout. Have you ever wanted
to create clean and nice portfolio design? In this tutorial I will show you how
to design clean blue portfolio layout in Adobe Photoshop.&/p&
&div id=&paragraphs&&
&p class=&paragraph&&
&span&BEAUTIFUL&/span&WebDesignFan is a design related blog about web design, photoshop, freebies
and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
resources like vectors, wordpress themes and a lot of inspiration.
&p class=&paragraph&&
&span&EFFECTIVE&/span&WebDesignFan is a design related blog about web design, photoshop, freebies
and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
resources like vectors, wordpress themes and a lot of inspiration.
&p class=&paragraph&&
&span&FUNCTIONAL&/span&WebDesignFan is a design related blog about web design, photoshop, freebies
and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
resources like vectors, wordpress themes and a lot of inspiration.
去你的CSS文件添加下面的代码，
#paragraphs span
font-family:&Myriad pro&, Helvetica, sans-
font-size:22
font-weight:600;
letter-spacing:-2
#paragraphs
margin-left:80
font-family:Arial, Helvetica, sans-
color:#191919;
font-size:12
margin-top:15
.paragraph
margin-left:15
这个就是我们到目前位置的效果:
下面处理网站底部
现在，我们完成该部分内容，我们将开始创建页脚.
首先，在你的PSD文件中，隐藏除页脚和页脚纹理层外的其他层，然后把页脚文件夹的东西切片并保存为footer.jpg.
然后再切一遍，把按钮和鸟的图形切下来.分别取名为follow.png和&bird.jpg.
编辑底部代码
底部页脚包括一些文字和一个带有链接的小鸟图片.
所以在HTML页面添加如下代码.
&div id=&footer&&
&div id=&container&&
&p&2010 & Fictional Design Studio. Design by Webdesignfan.&/p&
&a href=&#&&Follow us on Twitter&/a&
&img src=&images/bird.jpg& /&
现在, 编辑底部footer样式的代码，如下:
background:url(images/footer.jpg);
margin-top:191
font-family:Arial, Helvetica, sans-
font-size:12
color:#959595;
margin-top:30
background:url(images/follow.png);
text-indent:-9999
margin-left:730
margin-top:30
#footer img
margin-top:10
我们用footer.jpg&做页脚的背景，然后添加一些文字的样式.
对于底部的鸟图片的链接，我们用之前同样的办法，利用浮动效果定位。
到现在就算是结束了，不知道大家有没有看懂，不懂的就留言，什么地方不懂，我再添加修改下，哈哈~ .
提示本站所有资源仅供学习与参考，请勿用于商业用途。转载请注明来自：
您可能也喜欢
请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。