ps网页设计教程
设计网页的方法很多，常见的有直接编写代码方法，利用可视化软件设计(例如DreamWeaver)法，利用中间软件实现格式转换法(例如Word生成HTML代码)，还有就是PS设计网页法。综合各种设计方法的优缺点，可以得出利用PS 设计网页通常可以达到意想不到的效果，这不只是取决于他可以随意布局图片，更得意于其专业的图像处理能力。下面小编就给大家展示一下PS设计网页的独特之处。
工具/原料
Adobo PhotoShop
IE浏览器
方法/步骤
1
打开PS，新建空白文档，名称设置为“feifei工作室”，从预设大小下拉列表中选择“1024 x 768”，模式设计为“RGB 颜色”，内容设置为“白色”，点击“好”按钮完成文档的创建工作。
2
新建一名称为“框架”的图层，利用该图层实际整个网页的整体布局。首先选择“矩形选择工具”，然后将矩形的宽度设置为1024，高度设置为80，在文档的上下两侧各框选一部分内容并填充为黑色，从而使整个网页呈现“宽屏幕”
效果。
3
在背景图层的上方新建一新图层，并命名为“背景颜色”。点击“矩形选择工具”，设置“宽度为400，高度为768，然后在窗口的左侧框选一部分内容，填充一种深绿色。然后点击“矩形选择工具”，设置“宽度为624，高度为768，然后在窗口的右侧框选一部分内容，填充一种浅绿色。填充两种颜色饱和度有一点差别的颜色，目地是产生较为明显的对比。
4
在“框架”图层之上再新建一图层，名称为“主体元素”。打开一张事先准备好的百合花图片，双击“背景”图层将其转换为“图层0”，点击“魔术棒”工具，在图片白色区域内点击，选择白色区域后，按下DEL键删除白色区域。然后拖放图片到图层“主体元素”上，位置如图所示。
5
然后选择“矩形选择工具”，设置“宽度为624，高度为768，然后在窗口中选择花朵右侧的一部分内容，并调整其亮度和对比度，使花朵的左右两侧呈现明显的对比。
6
对该页面进行细节的调整，增加一些导航栏，信息提示内容和版权信息等内容，最终制作完成的页面如图所示。
7
选择“切片”工具，然后对内容进行切分。切分的好处是有利于文件在网络上传输，同时在用切片工具划分内容时最好将需要被文字内容替换的部分进行独立分割。分割完成后的效果如图所示。
8
找到保存文件的位置，打开"feifei工作室.html"文件，然后在内容区域内点击鼠标右键，选择“查看源文件”，就会发现对应的网页内容已经生成。至此，利用PS设计网页内容完成。
??????????????????????精品自学考料推荐?????????????????? 全国 2019 年 4 月高等教育自学考试 网页设计与制作试题 课程代码： 00900 一、单项选择题(本大题共 20 小题，每小题 1 分，共 20 分 )在每小题列出的四个备选项中只有一个 是符合题目要求的。请将其代码填写在题后的括号内。错选、多选或未选均无分。 1.IP 协议对应于 OSI 七层协议的哪一层 ( ) A. 会话层 B. 网络层 C.传输层 D. 数据链路层 2.通用图像格式GIF 最多可以使用的颜色数是( ) A.16 色 B.216 色 C.256 色 D.512 色 3.XML 的主要特点之一是用户能够定义自己的( ) A.DTD B.CSS C.CGI D.Script 4.网站用三级结构实现时，位于最底层的是( ) A. 文章页 B.导航页 C.栏目页 D. 首页 5.用 FrontPage 200 建立网站时，默认建立的子目录是( ) A.titles 子目录 B.texts 子目录 C.sounds 子目录 D.images 子目录 6.如果采用了安全调色板以外的颜色，在浏览该网页时将会( ) A. 正常显示 B. 不显示 C.产生“抖动” D. 显示黑白两色 7.进行网页设计时，设置页面尺寸与下面哪一项有关( ) A. 显示器分辨率 B.显示器品牌 C.页面内容 D. 网页制作工具 8.目前在网页可嵌入的声音文件中，存储一首乐曲时，其文件最小的是( ) A.wav 文件 B.real 文件 C.Midi 文件 D.MPEG 文件 9.在 HTML 中嵌入 JavaScript，应该使用的标记是( ) A. B.
C. D. 10.下列描述正确的是 ( ) A.JavaScript 是一种编译型语言 B.JavaScript 是一种基于对象和事件驱动的编程语言 C.JavaScript 中变量声明采用强定义类型 D.JavaScript 采用静态联编 11.JavaScript 脚本语言的前身是 ( ) A.Basic B.Live Script C.Oak D.VBScript 12.DHTML 技术的核心是 ( ) A.HTML 4.0 B.CSS C.DOM D. 脚本语言 13.使用 CSS 对文本进行修饰，若使文本闪烁，text-decoration 的取值为 ( ) A.none B.underline C.overline D.blink 14.FrontPage 2000 可供用户选择的视图有 ( ) A.3 种 B.4 种 C.5 种 D.6 种 15.在 FrontPage 2000 中，最多可用来创建表格的方式有( ) A.3 种 B.4 种 C.5 种 D.6 种 16.在 FrontPage 2000 中，用户可以处理站点访问者提交上来的表单结果的方式有( ) A.2 种 B.3 种 C.4 种 D.5 种1．请列出三种TCP/IP网络中所使用的协议，并说明它们哪些类型的终端之间的，例如，网络管理站（SNMP）是用于中央网络管理站和网络之间的。 参考答案： （1）HTTP：超文本传输协议，用于WEB服务器和WEB客户机之间； （2）SMTP：简单邮件传送协议，用于邮件客户机和邮件服务器之间； （3）TELNET：远程登录协议，用于客户机与终端之间。 2．现给出一个网址如下：https://www.doczj.com/doc/a817078036.html,/planetwide/select/selector.html，请你根据所学的URL分析该网址各个部分的含义。 参考答案： //前的http表示访问信息采用的是超文本传输协议，并且文件在WWW服务器上； https://www.doczj.com/doc/a817078036.html,表明了WWW服务器的位置； planetwide/select/selector.html表明最终要访问的文件所在的位置。 3．访问类型即访问信息的链接方式，它决定了文件所在的位置，请问常用的链接方式有哪几种，并举出实例。（列出三种即可） 参考答案： （1）file：如file:\\D:\作业\作业\主页.htm（前面的file:\\一般可省略）就是打开本地D盘下的一个网页；（2）ftp：如ftp:\\https://www.doczj.com/doc/a817078036.html,（此处也可输入IP地址）； （3）http：如https://www.doczj.com/doc/a817078036.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/a817078036.html,，请你实际操作进入该网站，并列出三种以上进入该TELNET网站的方法。 参考答案： （1）在浏览器中登录：启动INTERNET EXPLORER，在URL地址栏中输入“telnet://https://www.doczj.com/doc/a817078036.html,”；（2）“开始”→“运行”→“输入telnet”→“确定”→在命令行输入“open https://www.doczj.com/doc/a817078036.html,”命令并回车； （3）“开始”→“运行”→“输入cmd”→“确定”→在命令行输入“telnet https://www.doczj.com/doc/a817078036.html,”命令并回车； （4）“开始”→“运行”→“输入c md”→“确定”→在命令行输入“telnet211.157.100.8”命令并回车。 5．如果远程登录失败，请问原因可能是什么？ 参考答案： （1）计算机地址拼写错误（主机名或IP地址错误）； （2）远程计算机暂时不能使用； （3）你所指定的计算机不在Internet上。 6．实践：启动INTERNET EXPLORER浏览器，修改其INTERNET选项，并观察其效果。 您的答案： 答：将https://www.doczj.com/doc/a817078036.html, 设置为INTERNET选项的首页后，只要打开INTERNET EXPLORER 便直接登录到该网站的主页 1．个人网站有哪三种基本风格？ 参考答案： （1）主题图形式； （2）信息发布式； （3）介于两者之间的风格。
在这篇网页设计教程里，你将学习制作可以用于整站的一个既优雅又专业的网页，我们将用到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。 然后你需要下载
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/a817078036.html,指定的。 JavaScript标准是由Ecma制定的。 C#、https://www.doczj.com/doc/a817078036.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 年 6月 20日
课程设计评阅意见 评阅人__________职称________ 年月日
目录 第1章课程设计任务书 (1) 一、课程设计题目设计个人网站主页 (1) 二、课程设计工作： (1) 三、课程设计的内容要求： (1) 1、课程设计要求 (1) 2、课程设计内容 (1) 第2章课程设计目的 (3) 第3章课程设计内容 (4) 设计一选题的基本原则 (4) （1）选题应反映本专业的培养目标，符合专业综合训练的要求。 (4) （2）选题要有利于深化所学的专业知识和拓展所学的知识面。 (4) （3）选题的难易程度和工作量要适当，保证在规定的时间内，在教师的指导下，经过努力能够完成。 设计二选题范围 (4) 设计三选材 (4) 设计四正确运用DW和Ps (4) 设计五课程设计心得 (4) 第4章课程设计步骤 (5) 设计一查找相关资料 (5) 设计二利用Ps进行切片 (5) 设计三利用DW编辑 (6) 设计四利用DW的站点功能上传或用FTP工具上传站点 (8) 第5章课程设计心得 (10) 第6章参考文献 (11)
第1章课程设计任务书 专业电子商务班级（1）班姓名肖恢邦 一、课程设计题目设计个人网站主页 二、课程设计工作： 自 2011 年 6 月 12 日起至 2011 年 6月 20 日止 三、课程设计的内容要求： 1、课程设计要求 （1）通过课程设计把课堂上讲的内容融会贯通，掌握表格在网页布局中的特点及应用，掌握如何通过表格来布局一个完整的界面。学会使用Dreamweaver软件设计网页及Dreamweaver的表格功能进行网页布局。使整个网页页面清新自然，整体界面美观大方，简洁高效，使之达到界面动与静的搭配合理，动而不乱，静而不僵和谐效果。 2、课程设计内容 （1）设计一选题的基本原则。 （2）设计二选题范围。 （3）设计三选材。 （4）设计四正确运用DW和Ps。 （5）设计五课程设计心得。
网页设计与制作 实训报告 班级：多媒体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的制作。
自考29942网页设计与制作
高纲1349 江苏省高等教育自学考试大纲 29942 网页设计与制作（实践） 南京大学编 江苏省高等教育自学考试委员会办公室
Ⅰ课程性质与课程目标 一、课程性质和特点 《网页设计与制作》是为江苏省自学考试“计算机及应用”、“计算机信息管理”或相关专业专科段学生开设的专业基础课，是一门不进行理论考试而仅参加实践考核的课程。本课程重点培养学生基本的网页设计和制作技能，要求学生在自学理论知识的基础上，培养动手能力，加强实践环节，并能熟练使用相关工具软件。 二、课程目标 网页是互联网最常见的应用之一，是人们获取和发布信息的主要途径。本课程从实际应用出发，培养学生了解网页设计和制作基础知识，学习和初步掌握：网页设计和制作、网页编写语言及网站规划和管理的实际能力。经过课程实践考核，要求学生能上机实验验证相关理论知识，设计、制作、修改或完善指定内容的网页，初步掌握网站建设和开发流程、熟悉站点的上传和维护并能独立解决网页编辑中遇到的一般问题，具有一定的计算机网络信息发布常识。
经过本课程的学习，应达到以下目标： 1．理解Fireworks和Dreamweaver软件界面，并能熟练独立进行操作； 2．重点掌握Fireworks画布、图层、修饰位图、绘制矢量图形、文本特效的操作； 3．重点掌握Fireworks图像切片、元件与实例的操作，并灵活运用； 4．重点掌握Dreamweaver基础网页制作、链接的使用、插入多媒体元素的操作； 5．重点掌握Dreamweaver表格、框架、模板的灵活应用。 三、与相关课程的联系与区别 本课程需要具有一定计算机基础知识，程序设计语言基础知识及计算机网络基础知识，因此，要以本专业的“计算机应用技术”、“计算机网络技术”、“高级语言程序设计”等作为先导课程。在学习完毕本课程后，将来能够为“网络信息编辑”、“多媒体技术”等课程，或进行本科段的深造打下坚实基础。
《网页设计与制作》期末考试试题 一、单项选择题(本大题共15小题，每小题2分，共30分) 1、目前在Internet上应用最为广泛的服务是( )。 A、FTP服务 B、WWW服务 C、Telnet服务 D、Gopher服务 2、域名系统DNS的含义是( )。 A、Direct Network System B、Domain Name Service C、Dynamic Network System D、Distributed Network Service 3、主机域名center. nbu. edu. cn由四个子域组成，其中( )子域代表国别代码。 A、center B、nbu C、edu D、cn 4、当阅读来自港澳台地区站点的页面文档时，应使用的正确文本编码格式是( )。 A、GB码 B、Unicode码 C、BIG5码 D、HZ码 5、当标记的TYPE属性值为( )时，代表一个可选多项的复选框。 A、TEXT B、PASSWORD C、RADIO D、CHECKBOX 6、为了标识一个HTML文件开始应该使用的HTML标记是( )。 A、