PSD网页切图制作HTML教程

PSD网页切图制作HTML教程

把psd页面利用div+css切割成html页面

首先看看效果

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

新建文件夹

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

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

头部的代码如下面:

建立HTML结构

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

切割背景

我们的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和导航两个部分.

• Home
• About
• Work
• Blog
• Contact

导航样式如下：

现在,添加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文件页面，添加如下代码，这里包括背景样式，和按钮的样式.

#featured

{

background:url(images/featured.jpg) no-repeat;

height:381px;

margin-top:30px;

margin-left:80px;

}

#featured a

{

background:url(images/button.png);

height:30px;

width:124px;

text-indent:-9999px;

position:absolute;

margin-top:330px;

margin-left:180px;

}

#featured a:hover

{

background-position:0px 30px;

}

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

.dummytext

{

color:#d2d2d2;

width:245px;

margin-top:150px;

position:absolute;

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

font-size:12px;

line-height:180%;

margin-left:290px;

}

.dummytext span

{

font-size:16px;

color:#191919;

font-weight:bold;

}

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

页面的代码部分如下.

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

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

#paragraphs span

{

font-family:"Myriad pro", Helvetica, sans-serif;

font-size:22px;

font-weight:600;

letter-spacing:-2px;

}

#paragraphs

{

margin-left:80px;

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

color:#191919;

font-size:12px;

margin-top:15px;

}

.paragraph

{

width:250px;

margin-left:15px;

float:left;

}

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

下面处理网站底部

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

首先，在你的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)

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

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

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

网页设计与制作

Web考点 一、判断、单选（20*2’）、填空 1、Window对象表示一个浏览器窗口或一个框架，在JavaScript中，Window对象是全局对 象，所有的表达式都在的那个齐纳的环境中计算。就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来声明。例如，可以只写document 和alert，不必写成window.document和window.alert（）。 2、Document对象 每个载入浏览器的HTML文档都会成为Document对象。Document对象使我们可以从脚本中对HTML页面中的所有元素进行访问。 提示：Document对象是Window对象的一部分，可通过window.document属性对其进行访问。又代表了整个HTML文档，可以来访问网页中的页面中的所有元素。 Document.childNodes 包含着document.documentElement 3、JavaScript不可以增加类型（弱类型）。C#是强类型语言，声明变量要指定类型。 4、Html.CSS.DOM标准是由https://www.doczj.com/doc/337928042.html,指定的。 JavaScript标准是由Ecma制定的。 C#、https://www.doczj.com/doc/337928042.html,由微软制定的。 5、Hypertext transport protocol——HTTP协议。 超文本传送协议，是万维网（world wide web）交换信息的基础。它允许将超文本标记语言（HTML）文档从Web服务器传送到Web浏览器。HTTP允许输入任意类型的数据对象。正在传输的类型由Content-Type加以标记。 6、相对路径（Relative Path） (1)如何表示同级目录的文件 2.html和 3.html在同一个文件下，如果2.html链接到3.html，可以在2.html中这样写：同目录下文件间互相链接； ../代表一级上级目录路（间隔一个目录） ../../代表二级上级目录（间隔两个目录），比如4，html链接到1.html，可以在4，html中这样写：链接到上级目录的上级目录中的文件。 (2)如何表示下级目录文件 2.html和 3.html是1.html的下级目录中的文件，如果在1.html中链接到2.html，可以在1.html中这样写：链接到下级目录（first）中的文件； 如果在 1.html中链接到 4.html，可以在 1.html中这样写：链接到下级目录（first/second）中的文件。

动态网页制作实训作业

实训任务（2011 春） 郭明 2011年02月22日文章浏览次数：54 责任教师联系方式：郭明:guom@https://www.doczj.com/doc/337928042.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标记建立超链接。 【样图】

网页设计与制作总结

网页设计与制作 实训报告 班级：多媒体152 姓名：张莉钧 学号： 指导老师：薛杨王淑惠 实训时间：6.20——6.24 一、实训目的： 1、进一步熟悉和掌握网站建设的基本流程和技术规范； 2、巩固运用Dreamweaver网页制作软件制作网页、特别是制作复杂网页的知识； 3、巩固运用PS图像处理软件进行网页中图形制作和运用flash动画制作软件设计网页中动画的知识； 4、巩固综合运用Dreamweaver、PS、flash三个软件完成网站建设任务的方法，能独立设计一个内容完整、图文并茂、技术运用得当的网站； 5、具备独立撰写实训报告基本能力； 6、在网页设计的实践中培养分析问题、解决问题的能力，培养协作、交流的能力，培养创新能力和团队意识； 7、紧紧围绕网页制作的流程：规划、设计、开发、发布、维护来进行网站的开发，制作出具有较高水准的静态网页。以此作为学生学习这门课程的阶段性总结，使学生复习、巩固所学过的理论，并予 以适当的深化，进一步训练学生的基本技能（如：搜集资料、整理数据、发现与分析问题、寻求解决问题的方案等），为今后从事网站开 发、维护和管理奠定基础 二、实训项目——特色美食餐厅网站设计 1、网站主题 我的网站的主旨在于从各个方面全面的介绍特色美食餐厅，包括它的菜品、餐厅的环境以及促销活动。另外，网站里还包括餐厅资料和联系方式，网站里的每一个网页都有统一的风格，每一个网页的主题色彩都是橙色和白色搭配，用以展示餐厅特色的效果。其实最重要的是要做出自己的风格，给浏览者好的欣赏感受。 2、网站材料 主要在网站上搜集所要的网页信息，包括图片、文字。同时，查 询相关的书籍、百度等方式收集所需的文字资料,图象资料,flash动画和网页特效等，用以得来更加具有说服力的页面。要想做好自己的网站，能够给浏览者好的欣感受，就要尽量搜集材料，搜集得材料越多，以后制作网站就越容易。精选自己收集的材料，作为自己制作网页的素材，这样就可以做好一个好的网站。 3、网站规划 我的网站共有７个主页面：首页、美食介绍、优惠活动、商品促销、宴会定制、会员中心和关于我们。每一个页面用统一的模块，以保证网站统一的页面风格。网页布局主要用框架和表格，用框架定位内容的大体结构，再用表格具体定位。位子的设计也是重要的一个部分，根据具体内容决定字体风格，相同的风格多次调用是CSS设计一个样式，以保证随时、准确的调用。 三、网页设计工具使用 1、Dreamweaver——我们使用它做网页的主要布局。 2、Photoshop——我们使用它做网页图片的处理以及logo的制作。

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 )

动态.网页制作形考作业

完成 获得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基础)有答案

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。╳

网页设计与制作课程简介

《网页设计与制作》课程简介 课程名称：网页设计与制作 课程代码：02038 适用专业：初等教育（计算机与信息技术方向） 课程性质：专业核心课程、必修课、专业技能课 学分：3 学分 计划学时：72学时（理论36学时，实训36学时） 一、前言 1. 课程性质 本课程是初等教育计算机与信息技术专业的一门专业技能课程，培养学生网页设计与制作能力，适应初等教育对信息技术教师的人才基本要求，同时满足社会对计算机专业人才的需求，适合从事网站建设相关的岗位。 本课程的先修课程是《计算机应用基础》，后续课程是《https://www.doczj.com/doc/337928042.html,程序设计》。在完成《计算机应用基础》课程学习后，学生掌握了计算机基本知识和原理，学会了一些应用软件和工具软件的使用，进而学习《网页设计与制作》这门课程不会感到困难。在以后学生还将学习《https://www.doczj.com/doc/337928042.html,程序设计》课程，能设计和制作动态网页。 2. 课程基本理念 初等教育计算机与信息技术专业培养的对象主要是小学信息技术教师，今后从事小学信息技术教学和学校信息化教育教学的管理者及维护者，建设网站和网页是信息技术教师应掌握的基本技能。课程要理论与实践相结合，培养学生动手能力，能胜任今后小学信息技术教师的工作任务。同时满足社会对计算机专业人才的需求，适合从事网站建设相关的岗位群。 3. 课程设计思路 根据初等教育计算机与信息技术专业人才培养方案，《网页设计与制作》是重要的专业技能课程，是作为小学信息技术教师基本技能训练与考核的项目之一。课程以工作任务来组织内容，以案例驱动贯穿教学过程。由浅入深，最后完成主题网站的开发项目。课程教学中以Dreamweaver的使用为主线，要重视HTML

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

动态网页制作（开放本科） 【题目】（共 20 道试题，共 80 分。） 1. 在网页中设置表单为复选框的HTML代码是法( )。 A. B. C. D. 参考答案：D 2. 嵌入多媒体内容的HTML的基本语法是（）。 A. B. C. D. 参考答案：B 3. 在HTML中，下列哪个标记在最前面（）。 A. B. C. D.