网页设计与制作模板
网页设计与制作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：网页切图
任务总结
学习导 入 学习目 标 任务切割图 片 任务 描任述务 任目务标 任分务析 实任施务 评任价务 总必结
网页设计与制作(Dreamweaver)《模板与库》
应用模板
2．从“资源”面板中的模板创建新文档：
在站点的“资源”面板中，选择“模板”，右击欲应用的模板， 选择“从模板新建”。然后在可编辑区域中添加内容，在网页标 题区输入每一个网页的标题等。
模板与库
应用模板
3．将模板应用到现有文档
选择“文件/打开”命令，打开要应用模板的文档。在“文档”窗 口中单击，然后选择“修改/模板/套用模板到页”命令。从列表 中选择一个模板并单击“选择”。
模板与库
使用库项目
1、库项目插入到网页中
简易方法：将“资源”面板中“库”列表 中的库项目直接拖动到文档中的合适位置。 在文档中将光标移至需要链接库项目的位 置。 在“资源”面板的库类中，单击库项目， 再单击面板底部的“插入”按钮。
模板与库
使用库项目
2、设置插入到网页中的库项目属性
选中插入的项目，在属性面板中设置。 打开：打开并编辑库项目。 从源文件中分离：断开与库项目的链接，成为独立的网页元素。 重新创建：重新创建一个库项目。
模板与库
创建和编辑库项目
创建库项目
（1）选择文档中欲存为库项目的元素；选 择“窗口/资源”,将选定内容拖动到“资 源”面板的“库”类别中。 （2）选择“修改/库/增加对象到库”
模板与库
创建和编辑库项目
编辑库项目
（1）在“资源”面板的“库”类别中，双 击欲修改的库项目。或者单击选中库项目， 再单击面板下方的“编辑”按钮。 （2）然后在文档窗口中象修改HTML网页 一样对其进行修改，最后在保存时，会提 示是否更途径。如：联系方式。
可编辑模板区域控制 基于模板的页面中的 哪些区域可以编辑。
（1）选定欲设置为可编辑区域的元素（一般是一个表格），在“常用”的 “模板”中，单击“可编辑区域”； （2）右击选“模板”中“新建可编辑区域”； （3）可以在“插入”菜单的“模板”中“可编辑区域”。
《网页设计与制作》读书笔记模板
4.2.1创建表格 4.2.2使用扩展表格模式 4.2.3使用表格
4.3.1插入AP Div 4.3.2使用AP Div进行页布局 4.3.3使用AP Div布局的优点 4.3.4使用内置的CSS模板 4.3.5将AP Div转换成表格
4.4.1框架页 4.4.2框架集页 4.4.3设置框架页的属性 4.4.4框架链接的目标 4.4.5关于框架的建议
1
9.1管理站点
2
9.2站点测试
3 9.3站点上传
与更新
4
思考题
5
上机练习题
9.1.1编辑本地站点 9.1.2复制与删除本地站点
9.2.1检查链接 9.2.2生成站点报告 9.2.3检查浏览器兼容性 9.2.4验证站点
9.3.1申请站域名 9.3.2申请站空间 9.3.3设置远程主机信息 9.3.4上传文件 9.3.5查看远程站点文件 9.3.6站点更新
7.7.1使用切片 7.7.2导出切片 7.7.3创建热点
8.1 Flash CS4基 础
8.2使用绘图工具
8.3制作动画 8.4元件和库
思考题
8.5电影的优化、 发布与导出
上机练习题
8.1.1 Flash概述 8.1.2 Flash CS4的界面 8.1.3使用Flash CS4制作动画的过程
8.2.1绘制基本图形 8.2.2编辑图形对象 8.2.3输入文字
8.3.1逐帧动画 8.3.2形状补间动画 8.3.3创建补间动画 8.3.4引导路径动画 8.3.5遮罩动画
8.4.1元件的使用 8.4.2创建库元件 8.4.3制作按钮
8.5.1电影的优化 8.5.2发布影片 8.5.3导出电影
2.3.1 Dreamweaver CS4的工作区 2.3.2页面属性的设置 2.3.3文件头设置
网页设计与制作模板
存档资料成绩：课程设计报告书课程名称网页设计与制作题目设计个人网站主页分院电信分院专业班级电子商务学号学生姓名指导教师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>。
网页设计与制作项目5模板与库
5.2 网页制作
5.2.2 利用模板创建网页 步骤1 执行【文件】|【新建】菜单命令， 打开【新建文档】对话框 。 步骤2 在【新建文档】对话框中选择 【模板中的页】选项，从中选择存储的模板对 象“mudidimoban” 。 步骤3 单击“创建”按钮，即可用模板 创建网页文档。
5.2 网页制作
5.3.1
创建模板
步骤2 执行【文件】|【另存为模板】命令， 弹出【另存模板】对话框。 步骤3 在【另存模板】对话框中的【站点】 下拉列表中选择站点的位置为“乐途网”，在【另 存为】文本框中输入模板的名称为BeijingMoban。 步骤4 单击“保存”按钮，弹出【更新链接 】提示框。单击“是”按钮，更新链接并保存为模 板。
5.3.1
创建模板
在DreamweaverCS6中可通过两种方法创建模板。 1．将现有文档保存为模板 将现有文档保存为模板的具体操作步骤如下： 步骤1 执行【文件】|【打开】菜单命令，弹出 【打开】对话框，在该对话框中选择站点根目录 “ch5”文件夹中的“beijing.html”文件，单击“打 开”按钮将其打开。
11.4
总结提升
本章以“乐途网”为例，介绍了模板、库与 资源的使用方法，包括模板与库的创建、修改、 删除、更新网页以及资源面板的使用等内容。通 过本章的学习，读者将会如何创建模板与库以及 如何根据模板与库创建和更新网页，并能充分利 用资源使创建站点更快捷方便。
谢 谢！
5.3.5
使用库项目
3．插入库项目 插入库项目的具体操作步骤如下： 步骤1 执行【文件】|【新建】菜单命令，打开【新 建文档】对话框，选择空白页，单击“创建”按钮。 步骤2 执行【窗口】|【资源】菜单命令，打开【资 源】面板。 步骤3 单击【资源】面板中左侧的“库”按钮，显 示站点中的库项目。 步骤4 把光标放置在要插入库的位置，在【资源】 面板中选择要插入的库项目，然后在面板的左下角单击 “插入”按钮。 步骤5 保存文档，并按F12键预览效果。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
存档资料成绩：
课程设计报告书
课程名称网页设计与制作
题目设计个人网站主页
分院电信分院
专业班级电子商务
学号
学生姓名
指导教师
2011 年 6月 20日
课程设计评阅意见
评阅人__________职称________
年月日
目录
第1章课程设计任务书 .................................. 错误!未定义书签。
一、课程设计题目设计个人网站主页............... 错误!未定义书签。
二、课程设计工作：................................... 错误!未定义书签。
三、课程设计的内容要求：............................. 错误!未定义书签。
1、课程设计要求.................................. 错误!未定义书签。
2、课程设计内容.................................. 错误!未定义书签。
第2章课程设计目的 .................................... 错误!未定义书签。
第3章课程设计内容................................... 错误!未定义书签。
设计一选题的基本原则................................. 错误!未定义书签。
（1）选题应反映本专业的培养目标，符合专业综合训练的要求。
错误!未定义书签。
（2）选题要有利于深化所学的专业知识和拓展所学的知识面。
错误!未定义书签。
（3）选题的难易程度和工作量要适当，保证在规定的时间内，在教师的指导下，经过努力能够完成。
设计二选题范围..................................... 错误!未定义书签。
设计三选材......................................... 错误!未定义书签。
设计四正确运用DW和Ps ............................. 错误!未定义书签。
设计五课程设计心得................................. 错误!未定义书签。
第4章课程设计步骤 .................................... 错误!未定义书签。
设计一查找相关资料................................. 错误!未定义书签。
设计二利用Ps进行切片.............................. 错误!未定义书签。
设计三利用DW编辑.................................. 错误!未定义书签。
设计四利用DW的站点功能上传或用FTP工具上传站点.... 错误!未定义书签。
第5章课程设计心得 .................................... 错误!未定义书签。
第6章参考文献 ....................................... 错误!未定义书签。
第1章课程设计任务书
专业电子商务班级（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月。