网页设计与制作模板
《网页设计与制作》课程设计模板
沈阳工业大学《网页设计与制作》课程设计题目：电话簿管理系统学院：工程学院专业/班级：电子商务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）可以在“插入”菜单的“模板”中“可编辑区域”。
《网页设计与制作》模块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”，单击“保存”按钮，如图 所示。
网页设计与制作模板
存档资料成绩：课程设计报告书课程名称网页设计与制作题目设计个人网站主页分院电信分院专业班级电子商务学号学生姓名指导教师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．提高学生在实际操作中收集信息，对信息进行价值判断，进行信息整理、加工的能力。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
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）设计二选题范围。
（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月。