网页设计与制作模板
网页设计与制作PPT模板.ppt
1.1.2
• ( )简称为或万维网，客户端只要通过“浏览器”（）就可以非常方 便地访问上的服务器端，迅速地获得所需的信息。如图所示。
客户端 浏览器
HTTP 网络协议
internet
WEB服务器
用户通过浏览器访问服务器的网页，那么如何查找这些网页呢？通过在浏览 器的地址栏中输入网址，即，统一资源定位器。
1.2.2 图形和图像处理工具
• 目前常用的图形和图像处理工具主要：及。 • 的功能十分强大，是目前最为广泛的专业图形图像处理软件之一，它捆
绑了 ，能够实现各种专业化的图像处理、动画的制作等。 • 是由公司出品的首选图形图像处理软件。它的独特之处在于其能够优化
处理大图片、切割图片、为图片加入特殊效果、制作网页的动态行为等， 可以生成 ，直接导入到网页中，使用非常方便。本教材将在以后的章节 做详细的介绍。
1.1.1 的概述
最初并不是为商业性和广泛使用而设计的。它起源于1969年美国国防部 高级研究计划署协助开发的。最初是只允许国防部人员进入的封闭式 网络。到1987年，在美国国家科学基金会的推动下，将之主要从军 事用途转向科学研究和民事用途，形成了今天的主干网雏形。全球网 络的发展是空前且出人意料的。今天，检查电子邮件、访问喜爱的网 站这些活动已融入我们的日常生活。
1.2.3 动画制作工具
• 是目前网页制作中最为出色的动画制作软件，它是一种交互式动画设 计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一 起，以制作出高品质的网页动态效果。所使用的图形是压缩的矢量图 形，采用了网络流式媒体技术，突破了网络带宽的限制，可以边下载 边播放，这样避免用户长时间的等待，设计者可以随心所欲地设计出 高品质的动画，已经慢慢成为网页动画的标准，成为一种新兴的技术 发展方向。本教材将在以后的章节做详细的介绍。
网页设计与制作模板
v1.0 可编辑可修改存档资料成绩：课程设计报告书课程名称网页设计与制作题目设计个人网站主页分院电信分院专业班级电子商务学号学生姓名指导教师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）设计二选题范围。
网页设计与制作实践 第5版 模块6 模板应用与制作商品推荐网页
【任务6-1-1】规划与设计商品推荐网页的布局结构
4
【任务描述】
划商品推荐网页0601.html的布局结构，并绘制各组成部分的页面内容分布示意图。 编写商品推荐网页0601.html布局结构对应的HTML代码。 编写商品推荐网页0601.html布局结构对应的CSS代码。
【任务实施】
规划与设计商品推荐网页0601.html 的布局结构
【任务6-1-2】制作用于生成网页模板的网页0601.html
7
【任务描述】
制作用于生成网页模板的网页 0601.html，其浏览效果如图所示。
【任务6-1-2】制作用于生成网页模板的网页0601.html
8
【任务实施】
布局与美化商品推荐网页的左侧列表内容
➢ 网页左侧的结构与网页0501.html左侧的一致，从上至下依次为设备类型列表、“同类推荐”列 表和“最近浏览的商品”列表。
实现商品推荐网页0601.html右侧的商品广告
➢ 在网页0601.html中编写HTML代码与插入图片，实现商品推荐网页0601.html右侧的商品广告， 对应的HTML代码如表所示。
【任务6-1-2】制作用于生成网页模板的网页0601.html
9
实现商品推荐网页0601.html右侧的“热销推荐”列表
class="tjcontent"></div>”“<div class="content"></div>”定义为可编辑区域。 将 区 域 “ <div class="picrecommend"></div>” 的 标 签 “ background” 和 区 域
《网页设计与制作》课程设计模板
沈阳工业大学《网页设计与制作》课程设计题目：电话簿管理系统学院：工程学院专业/班级：电子商务1101学号：120113131姓名：陈超同组人姓名：燕海霞王莉黄程程唐易灵指导教师：关学铭报告时间：2014年6月20日成绩与教师评语目录一网页设计的总体概述 (1)1.1 网页设计 (1)1.2 网页设计的目的 (1)1.3 网页设计的任务 (1)1.4 网页设计的要求内容 (2)1.4.1 HTML标记语言 (2)1.4.2 Dreamweaver8 (3)1.4.3 平面图像处理软件 (3)1.5 本文所制作网页主题内容介绍 (3)1.5.1 网页题目 (3)1.5.1 网页主题内容 (4)二网页素材制作 (4)2.1 (4)2.2........................................................................................................... 错误！未定义书签。
三 Dreamweaver8网页制作........................................................................ 错误！未定义书签。
3.1 创建本地站点............................................................................... 错误！未定义书签。
3.2 主页制作过程............................................................................... 错误！未定义书签。
3.3 二级页面制作............................................................................... 错误！未定义书签。
《网页设计与制作》模块6图文模板
图6-3 网 页效果图
模块6：制作手机端网页
必备知识
学习 导入
学习目 标 任务 制作校园勋 章疯狂任务网页
任务 描述任务 目标任务 分析任务 实施任务 评价任务 总结必备 知识
<html>
<head>
<title>div 标记范例</title>
<style type="text/css">
<!--
自我评价
小组评价
教师（企 业）评价
权重
得分小 计
总分
10%
20%
70%
关键能力
1.计算机操作的规范性； 2.能参与小组讨论，相互交流； 3.能积极主动、勤学好问； 4.能清晰、准确表达。
1.课堂表现 2.学习任务完成
40%
专业能力
1.DIV盒子模型的理解； 2．CSS 样式字体样式、列表样式使用的熟 练程度；
模块6：制作手机端网页
任务描述
《网页设计与制作》模块4图文模板
模块4：网页切图
任务实施
学习导 入 学习目 标 任务切割图 片 任务 描任述务 任目务标 任分务析 实任施务 评任价务 总必结
9、图片格式为JPEG，它就是JPG，一样的。关键是品质的设定，我们都 知道如果一张图片越大它在网上打开的速度就越慢，当我们把图片的品 质设的越小，它的大小就越小，但是如果品质太差，图片会变模糊，所 以一般情况下如果是网上使用的图片，品质可以设置60，既保证图片较 小也不会模糊。这个数值由你自己设置，是大是小，具体看你的要求， 试试就知道了。这里有个问题是你只是对其中一个切片设置品质，其他 切片又要重新设置，所以存的时候最好检查一下。
模块4：网页切图
学习导入
学习导 入 学习目 标 任务切割图 片 任务 描任述务 任目务标 任分务析 实任施务 评任价务 总必结
在本模块中着重介绍切片工具、切片选择工具在切图面 方面的应用，通过讲解一个简单的例子，掌握切图的方法和技巧
模块4：网页切图
学习目标
学习导 入 学习目 标 任务切割图 片 任务 描任述务 任目务标 任分务析 实任施务 评任价务 总必结
图4-10
图4-
10、前面设置好后点击存储会显示以上界面。格式选11项选择HTML和图
像，默认是图像的，这样我们就能得到网页代码了。
模块4：网页切图
任务评价
学习导 入 学习目 标 任务切割图 片 任务 描任述务 任目务标 任分务析 实任施务 评任价务 总必结 备知
11、保存后得到一个图片文件夹和一个网页，你看到的网页图标可 能与4-12不一样，这个没有关系，因为浏览器不一样。
日期：
60%
模块4：网页切图
任务总结
学习导 入 学习目 标 任务切割图 片 任务 描任述务 任目务标 任分务析 实任施务 评任价务 总必结
网页设计与制作模板
存档资料成绩：课程设计报告书课程名称网页设计与制作题目设计个人网站主页分院电信分院专业班级电子商务学号学生姓名指导教师2011 年 6月 20日课程设计评阅意见评阅人__________职称________年月日目录第1章课程设计任务书 (1)一、课程设计题目 (1)二、课程设计工作 (1)三、课程设计的内容要求 (1)1、课程设计要求 (1)2、课程设计内容 (1)第2章课程设计目的 (2)第3章课程设计内容 (3)设计一选题的基本原则 (3)设计三选材 (3)设计四正确运用DW和Ps (3)设计五课程设计心得 (3)第4章课程设计步骤 (4)设计一查找相关资料 (4)设计二利用Ps进行切片 (4)设计三利用DW编辑 (5)设计四利用DW的站点功能上传或用FTP工具上传站点 (7)第5章课程设计心得 (8)第6章参考文献 (9)专业电子商务班级（1）班姓名肖恢邦一、课程设计题目设计个人网站主页二、课程设计工作：自 2011 年 6 月 12 日起至 2011 年 6月20 日止三、课程设计的内容要求：1、课程设计要求（1）通过课程设计把课堂上讲的内容融会贯通，掌握表格在网页布局中的特点及应用，掌握如何通过表格来布局一个完整的界面。
学会使用Dreamweaver软件设计网页及Dreamweaver的表格功能进行网页布局。
使整个网页页面清新自然，整体界面美观大方，简洁高效，使之达到界面动与静的搭配合理，动而不乱，静而不僵和谐效果。
2、课程设计内容（1）设计一选题的基本原则。
（2）设计二选题范围。
（3）设计三选材。
（4）设计四正确运用DW和Ps。
（5）设计五课程设计心得。
学生签名：年月日通过本课程设计，全面帮助学生加强对网站的认识；学会设计和制作网站，包括完成设计报告，了解网站的软、硬件平台，会发布和维护一个实际的网站和掌握实际网页设计与制作开发流程和开发方法。
具体的课程设计应达到以下目的：1．提高学生在实际操作中收集信息，对信息进行价值判断，进行信息整理、加工的能力。
《网页设计与制作》模块5图文模板
模块5：HTML+CSS网页样式
学习导 入 学习目 标
任任 务任1 务任2 务任3 务任4 务任5 务任6 务任7 务任8 务任9 务任 务 1务0 11 12
○任务实施 一、必备知识 常用的标签 H1~H6标题标签（H1最大，H6最小） <p> </p> 段落标签 <br> 回车换行标签，单独出现 <title> </title> 网页标题标签 <hr > 水平线，单独出现 <img> 图像标签 <a> </a> 超链接标签
模块5：HTML+CSS网页样式
任务1
学习导 入 学习目 标
任任 务任1 务任2 务任3 务任4 务任5 务任6 务任7 务任8 务任9 务任 务 1务0 11 12
任务实施
一、必备知识
1.网页与网站
浏览网页时在浏览器中看到的一个个页面就是网页，而多个相 关的网页的集合就构成了一个网站。网址：用于定位某个网站某 个页面的一串字符，如： /nba.shtml
○任务描述 小花学习了一段时间的HTML语言，发现代码很难记，希望
能够学习一种可视化的网页开发工具减少她学习的难度。 ○任务目标
了解Dreamweaver CS5界面的构成，能在Dreamweaver CS5中 输入一些简单的代码效果如图5-10所示。
图510
模块5：HTML+CSS网页样式
任务3
标签：是HTML语言的基本部分。标签总是成对出现，每一 对标签一般都有一个开始的标记（如<body>），也有一个结束 的标记（如</body>）。标签的标记要用一对尖括号括起来，并 且结束的标记总是在开始的标记前加一个斜杠。 <html>标签：每一个html文档都是从<html>开始，结束于 <./html>。
网页设计与制作案例教程(第2版)(胡秀娥) 项目九(模 板 与 库)
步骤 1 启动Dreamweaver CC，打开blog站点。
步骤 2 单击“文件”→“新建”菜单，打开“新建文 档”对话框。在左侧列表中选择“新建文档”选项，在 “文档类型”列表中选择“HTML模板”选项，在“布局” 列表中选择“<无>”选项，如图所示。
01
任务一 模板的基本操作
使用模板可以高效率地制作同一网站中结构相同的页面。 本任务将介绍模板的基础知识，以及使用Dreamweaver CC利 用模板制作网页的基本操作。
Dreamweaver CC中创建模板的方法有两种。一种是新建空白模板文档，然后像制作普通网页一在样设置模 板内容；另一种是将已经制作好的普通网页转换为模板。（本项目内容都将以blog站点为例，即本书配套素材“ 项目九”→“blog”文件夹，读者可先使用该文件夹创建站点，便于后续学习。） 1．新建空白模板文档
相同的其他页面。 步骤 1 继续在前面的blog站点中操作，双击“文件”面板中的“bowen1.html”选项，打开网页文 档。将插入点置于“代码”视图中，单击“文件”→“另存为模板”菜单。 步骤 2 打开“另存模板”对话框，在“另存为”文本框中输入模板文档名，此处为“t2”，单击“保存” 按钮，打开“Dreamweaver”对话框，询问是否更新链接，一般情况下都应单击“是”按钮，如图所示。
“新建文档”对话框
步骤 3 单击“创建”按钮，使用模板创建的网页文 档便出现在文档窗口中，该文档中只有可编辑区域的 内容可以修改，如图所示。
步骤 4 按“Ctrl+S”组合键，打开“另存为”对话 框，保存位置选择站点根目录，在“文件名”文本框 中输入“bowen2.html”，单击“保存”按钮，如图 所示。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
存档资料成绩：
课程设计报告书
课程名称网页设计与制作
题目设计个人网站主页
分院电信分院
专业班级电子商务
学号
学生姓名
指导教师
2011 年 6月 20日
课程设计评阅意见
评阅人__________职称________
年月日
目录
第1章课程设计任务书 (1)
一、课程设计题目 (1)
二、课程设计工作 (1)
三、课程设计的内容要求 (1)
1、课程设计要求 (1)
2、课程设计内容 (1)
第2章课程设计目的 (2)
第3章课程设计内容 (3)
设计一选题的基本原则 (3)
设计三选材 (3)
设计四正确运用DW和Ps (3)
设计五课程设计心得 (3)
第4章课程设计步骤 (4)
设计一查找相关资料 (4)
设计二利用Ps进行切片 (4)
设计三利用DW编辑 (5)
设计四利用DW的站点功能上传或用FTP工具上传站点 (7)
第5章课程设计心得 (8)
第6章参考文献 (9)
专业电子商务班级（1）班姓名肖恢邦
一、课程设计题目设计个人网站主页
二、课程设计工作：
自 2011 年 6 月 12 日起至 2011 年 6月
20 日止
三、课程设计的内容要求：
1、课程设计要求
（1）通过课程设计把课堂上讲的内容融会贯通，掌握表格在网页布局中的特点及应用，掌握如何通过表格来布局一个完整的界面。
学会使用Dreamweaver软件设计网页及Dreamweaver的表格功能进行网页布局。
使整个网页页面清新自然，整体界面美观大方，简洁高效，使之达到界面动与静的搭配合理，动而不乱，静而不僵和谐效果。
2、课程设计内容
（1）设计一选题的基本原则。
（2）设计二选题范围。
（3）设计三选材。
（4）设计四正确运用DW和Ps。
（5）设计五课程设计心得。
学生签名：
年月日
通过本课程设计，全面帮助学生加强对网站的认识；学会设计和制作网站，包括完成设计报告，了解网站的软、硬件平台，会发布和维护一个实际的网站和掌握实际网页设计与制作开发流程和开发方法。
具体的课程设计应达到以下目的：
1．提高学生在实际操作中收集信息，对信息进行价值判断，进行信息整理、加工的能力。
2．在实际的项目任务中培养网页设计方面的素养。
3．在实际的项目任务中使学生网页编程和制作的能力得到提高。
4．培养学生团队协作和人际交往方面的能力。
5. 培养相关知识和技能的综合应用能力。
设计一选题的基本原则
（1）选题应反映本专业的培养目标，符合专业综合训练的要求。
（2）选题要有利于深化所学的专业知识和拓展所学的知识面。
（3）选题的难易程度和工作量要适当，保证在规定的时间内，在教师的指导下，经过努力能够完成。
设计二选题范围
1、根据课程的教学大纲和教材内容，结合网站在生产、科研、
管理、教学以及日常生活等各个领域的应用都可作为课程设计的选题。
2、相关网站查询。
设计三选材
1、应选择相关材料。
2、查找相关主页模板。
设计四正确运用DW和Ps
1、运用Ps进行切片。
2、运用DW编辑。
设计五课程设计心得
第4章课程设计步骤设计一查找相关资料
1、设计主页模板
图 4-1
设计二利用Ps进行切片
1、先把图片放大到三倍
2、利用切片工具进行切片
图 4-2-1
3、所得图片images
图4-2-2 部分图片
设计三利用DW编辑
设计步骤
1、在DW先建立一个站点
2、、在DW插入一个表格
(1) 插入一个7行4列的表格
(2) 表格居中对齐
(3) 表格的边框、填充、间距都设置为0
3、把图片素材插入表格
(1) 把图片按次序插入
4、把文字插入相关空白区
图4-3-1 插入图片和文5、预览效果
图4-3-2
设计四利用DW的站点功能上传或用FTP工具上传站点设计步骤
1、申请“网页空间”。
2、设置Dreamweaver的站点功能。
3、利用FlashFXP应用软件的上传站点。
第5章课程设计心得
通过这次个人网页设计与制作的课程设计，我对网页设计有了更加深刻的认识。
本次网页课程设计，使我觉得我学到了很多，以前在课堂上学的东西以为都是一些枯燥无味的东西，直到进行了这次课程设计后我才明白了什么叫做“书到用时方恨少”，深深地感到自己上机操作能力很不足。
但从中还是学会了一些有用的东西，学会书写课程设计报告书，以及更加了解使用PS 和DW进行操作。
总之，这次课程设计提高了我对网页制作的综合能力和实际操作能力。
第6章参考文献
[1] 高林网页制作案例教程（第二版）[M] 北京人民邮电出版社 2009年6月。