当前位置：文档库 › 【PS】PSD网页页面切割HTML全过程教程

【PS】PSD网页页面切割HTML全过程教程

首先看看效果

下面的图片就是效果图，切割出来后，可能头部和底部会宽点.....

新建文件夹

开始时，在您的计算机中创建一个文件夹。我把它命名为zmool。再在文件夹中创建新文件夹images，放网站的所有图像。接下来打开代码编辑器（Dreamweaver），并在根目录下创建一个HTML文件名为index.html，这是我们的主页模板。现在创建一个新的CSS文件，并

将其命名为style.css文件。如下图：

打开index.html文件。在head标签顶部，添加链接到您的样式表（style.css）。你可以

使用下面的代码。

头部的代码如下面:

"https://www.wendangku.net/doc/db5687972.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">

5.Modern Design Studio

10.

11.

复制代码

建立HTML结构

现在，我们将设置HTML文件结构。设置3个部分（标题，内容，页脚）像下面一样:

"https://www.wendangku.net/doc/db5687972.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">

5.Untitled Document

12.

13.

14.

15.

18.

19.

复制代码

切割背景

我们的PSD文件包含了很多纹理效果，我们要把这些全部切出来，然后，用代码添加到网页上面，使div页面效果和设计的效果达到一致。

现在在photoshop里面打开原先设计好的, 隐藏所有的图层，除背景层外.

现在采取的切片工具，选择背景，保存网页web格式按（ALT +shift+Ctrl + S）。然后保

存的图像文件夹文件名为background.jpg。

设置背景样式

打开style.css文件，设置基本样式，还有背景样以及主体部分的宽度，如下代码：

* {

margin: 0px;

padding: 0px;

}

body

{

background:url(images/background.jpg);

}

#container

{

margin: auto;

width: 960px;

}

切割头部

返回photoshop，隐藏所有图层，除头部背景外，并用同样的方法，把头部背景图片切割保

存为web格式，保存文件名为head.jpg。

编辑头部背景代码

在style.css文件里编辑如下代码:

#header

{

background:url(images/header.jpg);

height:124px;

}切割头部logo

在这时，切割logo层，隐藏所有图层，包括背景层，如上同样方法切割logo层保存为

logo.png，注意：保存为png格式图片

添加在页面添加logo

现在返回到html中，在#header #container内,添加下面的代码

....

现在, 下面切换到style.css文件，编写#logo样式.

#logo

{

margin-top:20px;

border:none;

}编辑导航代码

下面是页面里的代码，头部header包括logo和导航两个部分.

导航样式如下：

现在,添加css表里的导航样式~，ul、li和链接a的样式:

#header li

{

color:#959595;

list-style:none;

float:left;

margin-right:20px;

font-family:"Myriad Pro",arial;

font-weight:bold;

font-size:24px;

}

#header li a

{

color:#959595;

text-decoration:none;

padding:10px;

}

#header ul

{

float:right;

margin-top:-40px;

}

#header li a:hover

{

background:#202020;

color:#d2d2d2;

-moz-border-radius:5px;

-khtml-border-radius:5px;

-webkit-border-radius:5px;

}现在制作中间部分

现在我们在页面的中间部分content添加两个div，如下图：

切换到photoshop的psd页面, 切下中间部分，取名为featured.jpg.如下图：

在你的HTML页面添加如下代码，和一些文字介绍:

在PSD文件里，隐藏其他所有图层，只留下按钮图层部分，切下按钮部分，保存png格式，

命名为button.png.

现在我们把这些图片添加到页面中去，切换到css文件页面，添加如下代码，这里包括背景

样式，和按钮的样式

现在我们添加些dummytext（文字介绍）的样式:

下面添加添加图片展示下面的分类介绍部分

我们中间部分的内容，整体看起来应该是这样的:

去你的CSS文件添加下面的代码，

这个就是我们到目前位置的效果:

下面处理网站底部

现在，我们完成该部分内容，我们将开始创建页脚.

首先，在你的PSD文件中，隐藏除页脚和页脚纹理层外的其他层，然后把页脚文件夹的东西

切片并保存为footer.jpg.

然后再切一遍，把按钮和鸟的图形切下来.分别取名为follow.png和 bird.jpg. 编辑底部代码

底部页脚包括一些文字和一个带有链接的小鸟图片.

所以在HTML页面添加如下代码.

现在, 编辑底部footer样式的代码，如下:

#footer

{

background:url(images/footer.jpg);

height:71px;

margin-top:191px;

}

#footer p

{

font-family:Arial, Helvetica, sans-serif;

font-size:12px;

color:#959595;

position:absolute;

margin-top:30px;

}

#footer a

{

background:url(images/follow.png);

text-indent:-9999px;

position:absolute;

height:27px;

width:124px;

margin-left:730px;

margin-top:30px;

}

#footer img

{

float:right;

margin-top:10px;

}我们用footer.jpg 做页脚的背景，然后添加一些文字的样式.

对于底部的鸟图片的链接，我们用之前同样的办法，利用浮动效果定位。

最终效果

到现在就算是结束了，不知道大家有没有看懂，不懂的就留言，什么地方不懂，我再添加修改下，哈哈~ .

文件下载地址 (0,7 MB)

Photoshop制作一款漂亮的网页模板

在这篇网页设计教程里，你将学习制作可以用于整站的一个既优雅又专业的网页，我们将用到Photoshop软件里的一些基本的工具，比如：笔刷和图层等。而且在教程下方包括了此网页的HTML/CSS/JAVASCRIPT模板和素材，你可以下载用作学习或使用都可以。下面先预览一下本教程的最终效果：教程开始：第一步：新建文件打开PS软件，点击文件-新建命令或Ctrl+N键新建文件，设置宽度1020px，高度1180px，背景默认为白色，点击确定即可; 第二步：创建导航背景我们将从header开始我们的设计，所以我们先用矩形选框工具，在画布上新建一个矩形选框，如图所示，填充颜色#393939;

然后设置图层的混合模式为叠加，不透明度设为23%; 第四步：创建网页logo和name对于教程中的logo，我使用了Georgia字体并设计为粗体并倾斜，设置‘SIX’的颜色为#FFFFFF，‘STUDIOS’的颜色为#F7E5C4，logo旁边的图片用的是素材中的boxupload32图片。样式如图所示：第五步：加入导航链接活动链接的颜色我用的是#DBD1BE，普通链接用的颜色为：#ABAAAA。为了使活动链接显示的更突出，在其后便添加一个矩形框。选择圆角矩形工具，设置半径为5px，前景色为#464646,然后在活动链接处添加矩形背景，样式如图：给矩形背景图层添加内阴影和描边效果，具体设置参数如图：

第六步：给特色区域添加背景在我们网页布局的顶部，需要有一块特色区域，这块区域通过播放幻灯片将网站的特色内容展示给来访者。这块区域也可以同时包括对网站的介绍等，第一步我们需要做的就是利用矩形选框工具选中这块区域，然后在此矩形选区中填充颜色#D3CAB8。然后你需要下载

网页设计与制作》网上作业题答案(全)

1．请列出三种TCP/IP网络中所使用的协议，并说明它们哪些类型的终端之间的，例如，网络管理站（SNMP）是用于中央网络管理站和网络之间的。参考答案：（1）HTTP：超文本传输协议，用于WEB服务器和WEB客户机之间；（2）SMTP：简单邮件传送协议，用于邮件客户机和邮件服务器之间；（3）TELNET：远程登录协议，用于客户机与终端之间。 2．现给出一个网址如下：https://www.wendangku.net/doc/db5687972.html,/planetwide/select/selector.html，请你根据所学的URL分析该网址各个部分的含义。参考答案： //前的http表示访问信息采用的是超文本传输协议，并且文件在WWW服务器上； https://www.wendangku.net/doc/db5687972.html,表明了WWW服务器的位置； planetwide/select/selector.html表明最终要访问的文件所在的位置。 3．访问类型即访问信息的链接方式，它决定了文件所在的位置，请问常用的链接方式有哪几种，并举出实例。（列出三种即可）参考答案：（1）file：如file:\\D:\作业\作业\主页.htm（前面的file:\\一般可省略）就是打开本地D盘下的一个网页；（2）ftp：如ftp:\\https://www.wendangku.net/doc/db5687972.html,（此处也可输入IP地址）；（3）http：如https://www.wendangku.net/doc/db5687972.html,/；（4）News：news:\\192.168.1.7可以查看IP地址192.168.1.7的可用新闻组；（5）telnet：telnet:\\192.168.1.7就可以运行远程登录IP地址192.168.1.7； 4．我们要进入紫霞的公众网，网址如下：telnet://https://www.wendangku.net/doc/db5687972.html,，请你实际操作进入该网站，并列出三种以上进入该TELNET网站的方法。参考答案：（1）在浏览器中登录：启动INTERNET EXPLORER，在URL地址栏中输入“telnet://https://www.wendangku.net/doc/db5687972.html,”；（2）“开始”→“运行”→“输入telnet”→“确定”→在命令行输入“open https://www.wendangku.net/doc/db5687972.html,”命令并回车；（3）“开始”→“运行”→“输入cmd”→“确定”→在命令行输入“telnet https://www.wendangku.net/doc/db5687972.html,”命令并回车；（4）“开始”→“运行”→“输入c md”→“确定”→在命令行输入“telnet211.157.100.8”命令并回车。 5．如果远程登录失败，请问原因可能是什么？参考答案：（1）计算机地址拼写错误（主机名或IP地址错误）；（2）远程计算机暂时不能使用；（3）你所指定的计算机不在Internet上。 6．实践：启动INTERNET EXPLORER浏览器，修改其INTERNET选项，并观察其效果。您的答案：答：将https://www.wendangku.net/doc/db5687972.html, 设置为INTERNET选项的首页后，只要打开INTERNET EXPLORER 便直接登录到该网站的主页 1．个人网站有哪三种基本风格？参考答案：（1）主题图形式；（2）信息发布式；（3）介于两者之间的风格。

动态网页制作实训作业

实训任务（2011 春）郭明 2011年02月22日文章浏览次数：54 责任教师联系方式：郭明:guom@https://www.wendangku.net/doc/db5687972.html, 资料来源：北京广播电视大学实训任务实训一（ASP编程环境设置）任务书【实训目的】 1．学会Windows 2000/NT服务器上IIS（Internet服务管理器）的安装与配置； 2．学会创建虚拟目录； 3．学会运行ASP程序【建议学时】3课时【项目类型】必做【实训内容】实训内容操作提示在Windows平台上安装服务器软件IIS 在Windows 2000/NT或Windows XP 平台上安装。

【样张】【实施环境及提供的材料】

1．能正常运行IIS服务器的计算机和操作系统 2．实训素材（与本任务书在同一目录中）【拓展练习】通过本实训的操练，同学具备了基本的操作能力，试着脱离指导步骤，独立安装服务器软件、熟练创建虚拟目录并正确运行ASP程序。【思考题】 1．什么是IIS？ 2．怎样安装和设置IIS? 3．是否一定要在 C:\Inetpub\wwwroot 下建立Web应用程序？可不可以放在别的文件夹下？实训二（HTML标记的使用）任务书【实训目的】 1．通过编写简单的网页文件，掌握HTML文档的基本结构； 2．掌握网页中图像、超链接、表格、表单等相关标记的使用，并能熟练应用这些标记进行网页设计； 3．了解网页设计中CSS样式的使用。【建议学时】6课时

【项目类型】必做【实训内容】编写一个网页（扩展名为htm），设计如样图所示的表单。操作提示： 1.打开记事本（或dreamweaver软件），建立html文档的基本结构； 2.使用表格（table标记）进行网页布局：使用表格嵌套，先建立一个3×1的表格，第一行插入图片，第二行嵌套一个11×2的表格，用于设计表单，第三行插入图片并建立 E_mail链接； 3.使用form标记设计表单； 4.使用img标记插入图片； 5.使用a标记建立超链接。【样图】

《HTML5+CSS3网站设计基础教程》_教学大纲

《HTML5+CSS3网站设计基础教程》课程教学大纲（课程英文名称）课程编号：201601210011 学分：5学分学时：76学时（其中：讲课学时：47 一、课程的性质与目标《HTML5+CSS3网站设计基础教程》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。

二、课程设计理念与思路课程设计理念：高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。教学整体设计“以职业技能培养为目标，以案例（项目）任务实现为载体、理论学习与时间操作相结合”。开发工具：DreamweaverCS6 第一章初识HTML5

第二章HTML5页面元素及属性

第四章CSS3选择器

e g o o d f o 背景与图片不透明度的设置 √ 设置背景图像平铺√ 设置背景图像的位置√ 设置背景图像固定√设置背景图像的大小√设置背景的显示区域√设置背景图像的裁剪区域√设置多重背景图像√背景复合属性√线性渐变√径向渐变√重复渐变 √ 第七章表单的应用

2016年网页设计作业答案

第一次 1、在网站设计中所有的站点结构都可以归结为( B ) A：两级结构B：三级结构C：四级结构D：五级结构 2、IP地址在概念上被分为( B ) A：二个层次B：三个层次C：四个层次D：五个层次在域名系统中，域名采用( C ) A：树型命名机制B：星型命名机制C：层次型命名机制D：网状型命名机制下面关于CSS的说法正确的有（ABC ） A：CSS可以控制网页背景图片 B：margin属性的属性值可以是百分比 C：整个BODY可以作为一个BOX D：对于中文可以使用word-spacing属性对字间距进行调整 E：margin属性不能同时设置四个边的边距在CSS中，下面属于BOX模型属性的有（BCE ） A：font B：margin C：padding D：visible E：border 下列关于IP地址与域名的说法正确的是（ABCD ） A：IP地址以数字表示，域名用字符表示 B：IP地址是供全球识别的通信地址 C：IP地址与域名是一一对应的 D：域名可以多于三个层次 E：IP地址与域名都限制在32位内下面属于JavaScript对象的有( ABCDE ) A：Window B：Document C：Form D：String E：Navigator 以下属于DHTML最主要的优点的是( ABD ) A：动态样式B：动态定位C：动态链接D：动态内容E：动态扩展下面说法正确的是( AE ) A：Java是一种编译语言 B：JaveScript是面向对象的程序设计语言 C：JavaScript是由SUN公司开发的 D：JavaScript的源代码非常安全 E：Java采用强定义类型变量检查下列关于网页设计的说法中，正确的有( ACE ) A：冷暖色调在均匀使用时不宜靠近 B：纯度相同的两种颜色适宜放在一起 C：整个页面中最好有一个主色调 D：文本的色彩不会发生抖动，只有图片的色彩才会发生抖动 E：抽象线条的构图很容易造成重心不稳网页制作工具按其制作方式分，可以分为( BE ) A：通用型网而制作工具B：标记型网页制作工具 C：专业型网页制作工具D：编程型网页制作工具 E：“所见即所得”型网页制作工具一般来说，适合使用信息发布式网站模式的题材有( ABDE ) A：软件下载B：新闻发布C：个人简介D：音乐下载E：文学作品大全WWW的组成主要包括( ACD ) A：URL B：Gopher C：HTML D：HTTP E：Telnet Internet上使用的最重要的两个协议是( B )

网页设计与制作试题(HTML基础)有答案

1.HTML 文件必须使用htm 或者（B）作为文件扩展名。 A.doc B. html C. jsp D. aspx 2.HTMl是指（A）。 A.超文本标签语言 B. 汇编语言 C. 服务端端语言 D.脚本语言 3.WWW是（B）的意思。 A．网页B．万维网C．浏览器D．超文本传输协议 4.在网页中显示特殊字符，如果要输入“<”，应使用（D）。 A．lt; B．≪ C．< D．< 5.以下说法中，错误的是：（D）。 A．获取WWW服务时，需要使用浏览器作为客户端程序。 B．WWW服务和电子邮件服务是Internet提供的最常用的两种服务。 C．网站就是一系列逻辑上可以视为一个整体的页面的集合。 D．所有网页的扩展名都是.htm。 6.以下说法中，错误的是：（B）。 A．网页的本质就是HTML源代码。 B．网页就是主页。 C．使用“记事本”编辑网页时，通常应将其保存为.htm 或.html 后缀。 D．本地网站通常就是一个完整的文件夹。 7.浏览网页时，通常使用以下协议：（C）。 A．mailto B．FTP C．HTTP D．TCP/IP 8.在网页中显示特殊字符，如果要输入空格，应使用（D）。 A．nbsp; B．&Nbsp; C． D． 9.以下软件中，不能直接用来编辑HTML 文件的是：（C）。 A．记事本B．FrontPage C．Flash D．Dreamweaver 10.以下有关HTML 标记符的属性的说法中，错误的是：（C）。 A．在HTML中，所有的属性都放置在开始标记符的尖括号里。 B．属性与HTML标记符的名称之间用空格分隔。 C．属性的值放在相应属性之后，用等号分隔；而不同的属性之间用分号分隔。 D．HTML 属性通常也不区分大小写。二、填空题 1.如果要为网页指定黑色的背景颜色，应使用以下html语句：。 2.上网浏览网页时，应使用_____浏览器____作为客户端程序。 3.TITLE 标记符应位于___head______标记符之间。 4.要设置网页在黑色背景下显示白色文字，应使用__语句。 5.要设置整个网页的背景颜色，应在body标记符中设置____bgcolor_____属性。三、判断题 1.用H1标记符修饰的文字通常比用H6标记符修饰的要小。╳ 2.B标记符表示用粗体显示所包括的文字。√ 3.指定滚动字幕时，不允许其中嵌入图象。╳ 4.指定水平线粗细的属性是size。√ 5.指定水平线粗细的属性是width。╳

动态.网页制作形考作业

完成获得3.00分中的3.00分题干 HTML的颜色属性值中，RED的代码是（）选择一项： A. ″#808080″ B. ″#FF0000″ C. ″#0000FF″ D. ″#00FF00″ 反馈正确答案是：″#FF0000″ 题目2 完成获得2.00分中的0.00分题干把窗口分割成上下两个框架，高度分别为40%和60%，正确的代码是（）。选择一项： A. B. C. D.

正确答案是：题目3 完成获得2.00分中的2.00分题干 HTML标记中只能有一个属性值。选择一项：对错反馈正确的答案是“错”。题目4 完成获得2.00分中的0.00分题干主体标记中的BACKGROUND属性是设置页面的背景颜色。选择一项：对错反馈正确的答案是“错”。题目5 完成获得2.00分中的0.00分

题干 HTML文档中的标记不能多于一个，但标记可以放在任意位置。选择一项：对错反馈正确的答案是“错”。题目6 完成获得2.00分中的2.00分题干一张图片可以拥有多个超链接，方法是创建图像映射。选择一项：对错反馈正确的答案是“对”。题目7 完成获得3.00分中的0.00分题干

网页制作HTML基础知识

网页制作之HTML基础知识2009-04-15 11:03很多被淘汰了的标签，不过了解下也好。总类（所有HTML文件都有的）文件类型（放在档案的开头与结尾）文件主题（必须放在「文头」区块内）文头（描述性资料，像是「主题」）文体（文件本体）结构性定义（由浏览器控制的显示风格）标题（从1到6，有六层选择）标题的对齐区分

区分的对齐

引文区块

（通常会内缩）强调（通常会以斜体显示）特别强调（通常会以加粗显示）引文（通常会以斜体显示）码（显示原始码之用）样本键盘输入变数定义（有些浏览器不提供）地址

大字小字与外观相关的标签（作者自订的表现方式）加粗斜体底线（尚有些浏览器不提供）删除线（尚有些浏览器不提供）下标上标打字机体（用单空格字型显示）预定格式

（保留文件中空格的大小）预定格式的宽度

（以字元计算）向中看齐（文字与图片都可以）闪耀（有史以来最被嘲弄的标签）字体大小（从1到7）改变字体大小基本字体大小（从1到7; 内定为3）字体颜色链结与图形链接

《动态网页制作11》学习资料