最新34单元19附录B网页设计与制作综合实训.ppt
网页设计与制作教程PPT课件
案例二：企业官网制作
总结词
专业形象塑造
详细描述
企业官网是企业形象的重要组成部分，设计时需注重专业 形象的塑造。采用符合企业品牌形象的颜色、字体和布局 ，以及专业的图片和内容，提升企业形象和可信度。
总结词
用户体验优化
详细描述
企业官网的用户体验至关重要，设计时应注重用户需求和 习惯。提供清晰的信息架构、便捷的导航和搜索功能，以 及响应式设计，确保用户在不同设备和浏览器上都能获得 良好的访问体验。
使用CSS和JavaScript创建一个模 态对话框，当用户与页面交互时弹 出，并覆盖背景内容。
表单验证
使用JavaScript对表单输入进行验 证，确保用户输入的数据符合要求， 提高数据质量。
特效制作
淡入淡出效果
使用CSS动画实现元素从透明到不透明或从一种颜 色渐变到另一种颜色的效果。
滑动效果
使用CSS或JavaScript实现元素在页面上的滑动效 果，如左右滑动、上下滑动等。
本课程将涵盖网页设计理念、HTML、CSS、JavaScript等前端技术，以及响应 式设计、网页性能优化等方面的知识，使学员能够独立完成一个精美、高效的网 页作品。
学习目标
01
掌握网页设计的基本理 念和原则，能够独立设 计出符合用户需求的网 页。
02
熟悉HTML、CSS、 JavaScript等前端技术， 能够熟练地编写网页代 码。
外部样式表
通过外部CSS文件引入样式，并 在HTML文档中使用`<link>`标
签引入该文件，如`<link rel="stylesheet" type="text/css"
href="styles.css">`
《网页设计与制作》综合实训指导书
《网页设计与制作》综合实训指导书1.1 实训意义网页设计与制作综合实训是教学过程中重要的实践性教学环节。
它是根据专业教学计划的要求，在教师指导下对学生进行的网页制作专业技能的训练，培养学生综合运用理论知识分析和解决实际问题的能力，实现由理论知识向操作技能的转化，是对理论与实践教学效果的检验，也是对学生综合分析能力与独立工作能力的培养过程。
因此，加强实践教学环节，搞好实训教学，对实现本专业的培养目标，提高学生的综合素有着重要的作用。
1.2 实训目的1．通过综合实训进一步巩固、深化和扩展学生的理论知识与专业技能。
1)掌握规划网站的内容结构、目录结构、链接结构的方法。
2)熟练掌握网页制作软件Dreamweaver CS4的基本操作和使用技能。
3)掌握页面的整体控制和头部内容设置的方法。
4)熟练掌握网页页面布局的各种方法。
5)熟练掌握在网页中输入、设置标题和正文文字的方法。
6)熟练掌握用Photoshop制作和处理网页的图片素材，用Flash制作动画的方法。
7)熟练掌握在网页中插入图像、flash动画、背景音乐的方法。
8)掌握建立各种形式超级链接的方法。
9)掌握表单网页制作方法。
10)掌握网页特效的制作方法。
11)掌握网站测试的方法。
2．训练和培养学生获取信息和处理信息的能力，充分培养和提高学生的动手能力，学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、网页特效等。
3．培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及其基本工作素质。
4．培养学生理论联系实际的工作作风、严肃认真的科学态度以及独立工作的能力，树立自信心。
5．训练和培养团队协作精神和共同开发网站的综合能力。
1.3 实训要求1．动手制作网页之前：1)必须认真做好网站的需求分析，包括市场调查，定位网站目的，策划好网站的主题及功能定位，创意出网站的风格和亮点，确定网页色彩基调。
2)规划好网站的风格和结构，网站主要内容及板块，各板块的具体内容及功能。
《网页设计与制作》综合项目实训指导书
《网页设计与制作》综合实训指导书前言为了加强学生能力的培养，提高学生的实践操作技能，以适应社会、经济和科技的发展对职业人才的需求，向社会提供大批能够直接从事网站开发和技术服务的应用型操作人才。
特编写本指导书《网页设计与制作》是一门实践性很强的课程，网页设计与制作实训是学好网站开发、掌握网页制作基础知识的极为重要的环节，是培养学生动手能力的重要途径。
因此，加强网页设计与制作实验课程的教学具有十分重要的意义。
本指导书是在多年的教学实践经验的基础上，广泛听取了有关任课教师的意见，并结合我校网络专业实训设备的现状编写而成的。
编写中，精选实验项目与内容，力求简明扼要、通俗易懂、目的明确、原理简洁、步骤清晰、结论正确。
针对学生知识面及个人特长的不同，本指导书设计有选做内容，此部份内容主要为数据库开发及动态模块设计与程序编写等内容，以此拓展学生知识面与技能的全面性，学生可根据自身特点及时间来选择是否完成网站的动态开发部分。
本指导书适用于计算机网络三年制（或四年制、五年制）专业教学使用。
由于编者时间仓促，水平有限，对指导书中存在的缺点和错误，望大家给予指正，在此深表感谢！编者二零一一年五月十日目录实训课程概述 (4)项目一：设计与制作“博爱”助学网站。
(7)项目二：设计与制作“华医”中医健康网站。
(12)项目三：设计与制作世博会志愿者网站 (17)项目四：设计与制作传统节日网站 (22)项目五：设计与制作环保网站 (27)项目六：设计与制作音乐网站 (33)项目七：设计与制作台湾旅游网站 (38)项目八：设计与制作图书网站 (43)项目九：设计与制作军事新闻网站 (48)项目十：设计与制作科技公司网站 (53)项目十一：设计与制作健身俱乐部网站 (58)项目十二：设计与制作婚礼策划公司网站 (63)项目十三：设计与制作奶茶网站 (69)项目十四：设计与制作植物园网站 (75)项目十五：设计与制作快餐连锁店网站 (81)项目十六：设计与制作青年旅舍网站 (86)项目十七：设计与制作鞋业有限公司网站 (91)项目十八：设计与制作摄影公司网站 (96)项目十九：设计与制作中国杏仁网站 (102)项目二十：设计与制作李小龙截拳道网站 (108)实训课程概述项目一：设计与制作“博爱”助学网站。
网页制作与实训ppt完整版PPT幻灯片教学教程最全电子讲义教案(最新)
</table>
</body>
</html>
1.7 图片标签
图像标记：<img src="图片存储位置与名称">
网页与图片a.jpg在同一目录下： <img src="a.jpg">
</HTML>
运行结果
1.3 段落标签
<p>为段落标签，<p>我是一段文字</p> align属性，段落的对齐方式，较为常
用的有left、center、right： 例：<P align=“left”>
我是居左的文字 </P>
1.3 段落标签（续）
<HTML>
<HEAD> <TITLE>学习HTML</TITLE>
1.6 表格标签
对于整张表格，<table>标签常用的属性有以下 几个： ✓bordercolor：表格边框的颜色，默认为黑色 ✓cellpadding：单元格内容与单元格边界的距 离 ✓cellspacing：单元格的边框与表格边框之间的 宽度
课后作业：
P20 三、操作题 （表格内容可以换成自己喜欢的）
在网页文档所在目录的子目录(images)下： <img src="images/whu.jpg">
在网页文档所在目录的上层目录下： <img src="../whu.jpg">
《网页设计与制作》PPT课件
（五）知识讲解与操作示范（8）
3．页面中图像应用
传递信息的视觉要素包括版式、文字、图像、色彩等。 网页中图像在信息传达上应用具备以下功能： （1）要有良好的视觉吸引力，能吸引浏览者的注意力。 （2）要简洁明确地传达网站信息，能使人们一目了然地抓 住网站信息的重点。 （3）要有强而有力的诱导作用，造成鲜明的视觉感受效果， 从观看过程中产生愿望和欲求。 对图像的处理主要包括以下几个方面： （1）图像的外形处理 （2）图像的面积处理 （3）图像的数量处理 （4）图像的背景处理
（五）知识讲解与操作示范（7）
(2）文字粗细的确定 文字变细会显得十分优美，反之将文字变粗会显得有
力。 （3）文字字号的确定
对于网页中正文文本，其字号一般设置为10～12磅； 对于网页中版权声明等文本一般设置为9～10磅；对于网 页中标题文本，一般设置为12～18磅。 （4）文字的字间距和行间距
网页中文本的字间距和行间距在某种程度上会改变访 问者的阅读心理。
（2）站内搜索引擎 站内搜索引擎提供了一种主动查询方式，浏览者
只要把自己需要寻找的内容的关键字输入到搜索引擎 中，网站将自动地查找出站内符合条件的页面，这是当前浏览位置”就是在网站的每个页面中 加入当前位置的文字说明并逐级加入链接。
（五）知识讲解与操作示范（6）
15.2.4 网页色彩设计
1．色彩的基本知识
（1）三原色 三原色是能够按照一些数量规定合成其他任何
一种颜色的基色。所有的颜色其实都是由三原色按 照不同的比例混合而来。电脑屏幕的色彩是由红、 绿、蓝三种原色组成。
（2）色彩三要素 色彩三要素是指色相、饱和度和明度。
（五）知识讲解与操作示范（2）
2．颜色的计算机表示
4．广告尺寸 广告尺寸应为标准尺寸，全尺寸banner不超过14KB。
网页设计与制作-PPT课件
FTP
• FTP是一种文件传输协议。 • 通过FTP，用户与存有大量文件的远程计算 机（称为FTP服务器）连接，查看远程计算 机上的文件，然后把文件从远程计算机上 复制到本地的计算机上（称为下载），或 者把本地计算机上的文件传送到远程计算 机上去（称为上传）。 • 如果我们是在ISP处申请的主页空间，制作 完成的网页文件一般采用FTP的形式上传到 Web服务器上。
URL
• URL（Uniform Resource Locator的缩写），统 一资源定位器。 • 互联网中某种信息资源以某种方式存储在网络中 的某处，必须用一个惟一的URL来进行标识，这 样才能方便查找。对于Web来说，可以简单并通 俗把URL理解为网址。每个Web网页都有自己的 网址，在浏览器地址栏里输入网页的URL，就可 以访问这个网页。 • 例如，/index.html，其意思就是采用http超文本传 输协议访问搜狐网的首页，由于网页均是通过 http超文本传输协议进行访问，默认下，“”可以省 略不输。
脚本
• 脚本（Script）是网页制作中常见的动态网页制作 技术。 • 根据脚本语言所编写的代码可以直接插入到 HTML中，利用脚本可以操纵网页上的元素去实 现网页的交互功能，还可以制作特殊动态效果的 网页，例如，注册时用户输入信息的有效性验证、 弹出的信息框、鼠标指针的文字跟随、渐隐渐现 的图片等都是脚本的实际运用。 • 常用的脚本语言有JavaScript和VBScript，这两种 脚本语言也是本书所介绍的ASP的语言基础。
第1章 相关的基础知识
1.1 Web的基ld Wide Web，简称WWW，又 称万维网。 • Web采用浏览器/服务器工作模式。信息以 页面（或称Web页）的形式存储在Web服 务器中，通过浏览器为用户提供方便友好 的信息浏览界面。 • 统一资源定位器URL。 • 超链接。
《网页设计与制作综合实训》实训指导书
武汉商贸职业学院信息工程学院《网页设计与制作综合实训》实训指导书软件教研室2013年9月目录实训目的 (1)实训内容及要求 (1)实训性质、实训地点、实习时间安排，适用专业班级 (2)实训一站点的规划设计 (3)实训二设计案例网站LOGO (4)实训三设计案例网站BANNER (5)实训四设计案例网站导航条 (6)实训五设计案例网站网页内容和网页版权声明 (7)实训六对案例网站版面切图 (8)实训七制作完成案例网站首页 (9)实训八案例网站模板的制作 (10)实训九案例网页超级链接的添加 (11)实训十案例网站加入动态元素 (12)实训目的在前一阶段，学生完成了《网页设计与制作》、《图形图像处理》、《CSS设计》、等专业课程的学习，为了让学生将前期的专业课程学以致用，融会贯通，特开设本系统化实训。
本次综合实训基于学生的兴趣，选取专业建设网站开发为主题，基于网页开发的流程，把实训周期当做是一个项目的开发周期，严格把握项目进度，最终要求学生完成网站的前台设计。
通过本次实训希望达到以下目的：1.熟悉和掌握Dreamweaver软件的使用方法；2.熟悉和掌握PS软件的使用方法；3.熟悉FLASH软件应用的方法；4.学会使用CSS+DIV做网页布局；5.熟练掌握站点的规划与设计实训内容及要求本实训的内容简述：1.网站首页（1）专业概况（2）专业建设规划（3）展示最新动态文章标题（8条）（4）专业建设成效的文章标题（8项）（5）专业建设特色文章标题（8项）2.专业概况点击项目概况，显示相关文本3.专业建设规划点击项目申报书菜单，显示flashpaper格式的申报书内容4.专业建设特色显示专业建设特色的文章标题列表，点击标题进入内容5.专业建设动态显示专业建设动态的标题列表，点击标题进入成果详细展示6.专业建设成效显示专业建设成效的标题列表，点击标题进入成果详细展示。
本实训的要求：1.应用css和html（div+css）技术完成至少4个页面，其中必须包括网站主页面设计、栏目页设计、管理员管理登陆页面、管理员登录以后的页面。
《网页设计与制作》PPT课件
一种简单滚动图片制作方法1：
将下面代码放在<body>和</body>之间就可以了： <p> <marquee width="495" height="150"> 滚动图片 图片地址和名称 <img src="鸽.gif" > <img border="0" src="旗.gif" > <img border="0" src="猪.gif" > </marquee> </p>
二、编辑网页
1、输入汉字：在新建的“new_page_1.htm” 页面上输入汉字信息，并进行字体、字号、 颜色等相关修饰。 2、插入图片：在当前页面上“插入”图片， 请单击“命令菜单”下的“插入”/“图 片”/“来自文件（或剪贴画）”，选择一张 图片，单击“确定”。 教学网站： /qjbok
的 “插入 /层”
2、输入数据：单击层，便可以向其中输入文字，
插入图片、动画等等信息。 3、移动：拖动层的左上角控制柄，就可以任意移 动层到任何位置。 4、重叠层：可以将多个层重叠，以达到一定的效 果。 5、改变层次：双击“层控制柄”，可以用鼠标 拖动相应的层到任何位置，到达改变层的次序。
二、编辑网页
3、预览：单击屏幕左下角的“预览”按钮，于是新 网页在浏览器下的显示效果就出现了。再单击“设 计”返回页面设计状态，可以继续修改。也可以单 击菜单栏“文件”下的“在浏览器中预览/ Microsoft Internet Explorer”或直接按<F12>键可 以在IE下预览制作的网页。 4、保存：单击 “文件”/“保存”，为文件起个名字， 并修改“保存位置”为D盘上“座号姓名”文件夹， 然后单击“确定”。这样所有网页使用的文件都放 在这个文件夹中，便于使用和管理。例如：888张 三 思考题：1、怎样找到你的文件夹？ 2、如何修改已经存盘后的网页文件？
网页设计与制作教材(PPT 40页)
也可以在主菜单中选择【文件】／【新建】命令打 开【新建文件】对话框，然后选择【常规】／【模板页】 ／【HTML模板】命令来创建空白模板。
创建空白模板后，还需要打开模板文件，在其中添 加网页元素和模板对象。
（2）将现有网页保存为模板 首先打开一个已有内容的网页文档，根据实际需要在 网页中选择网页元素，并将其转换为模板对象，然后在 主菜单中选择【文件】／【另存为模板】命令将网页保 存为模板。
重复表格可以被包含在重复区域内， 但不能被包含在可编辑区域内。另外，不 能将选定的区域变成重复表格，只能插入 重复表格。
在主菜单中选择【插入】／【模板对象】／【重复
表格】命令，也可以在【插入】／【常用】／【模板】 面板中单击 （重复表格）按钮，打开【插入重复表 格】对话框，在当前区域插入重复表格。
在Dreamweaver中，创建的模板文件的文件扩展 名为“.dwt”，保存在“Templates”文件夹内， “Templates”文件夹是自动生成的，不能对其名称进 行修改。
2、创建模板文件
创建模板也有两种方法，即直接创建空白模板和将 现有网页保存为模板。
（1）直接创建空白模板 在【资源】面板中切换到【模板】分类，然后单击 【资源】面板右下角的 （新建）按钮来创建空白模板。
首先打开要应用模板的网页文档，然后在主 菜单中选择【修改】／【模板】/【套用模板到 页】命令，或在【资源】面板的模板列表框中选 中要应用的模板，再单击面板底部的【应用】按 钮即可应用模板。如果已打开的文档是一个空白 文档，文档将直接应用模板，如果打开的文档是 一个有内容的文档，这时通常会打开一个【不一 致的区域名称】对话框，该对话框会提示读者将 文档中的已有内容放在模板的什么区域。
网页设计与制作
《网页设计与制作》-实训指导书
目录实训1 站点创建实训2 搜集素材实训3 用表格设计主页布局实训4 在主页制作中插入文本操作实训5 在主页制作中插入图像操作实训6 在主页制作中超级链接的设置实训7 制作动感网页实训8 表单制作实训9 CSS样式表的使用实训10 JavaScript技术实训11 应用行为实训12 利用框架制作“公司简介"网页实训13 利用布局表格制作“新书推介”网页实训14 模板和库的使用实训15 利用层的布局制作“技术支持”网页实训16 网页设计与网站管理实训17 网站开发综合实训实训1 站点创建实训目的为了让学生能熟练掌握创建站点的方法，掌握设置网页的页面属性，掌握创建网站目录结构、栏目文件夹、网页文件的基本操作方法。
实训环境硬件环境：考核用机为奔腾以上兼容机，内存不少于 32M ，最好 64M 或128M ;硬盘不小于 500M ； VGA 彩显,带鼠标器。
操作系统：Windows95/98/me/2000/XP软件环境:Dreamweaver MX 2004特殊要求：必须将IIS配置好，能正常进行WEB浏览素材准备准备制作网页所需的文字素材.实训课时2学时实训内容创建站点：创建网站目录结构：创建栏目文件夹:创建网页文件：掌握设置网页的页面属性实训要求要求学生能掌握如何创建站点，正确创建网站目录结构及栏目文件夹，创建主页文件index。
htm，并正确命名，掌握设置网页的页面属性的方法.实训步骤1、在E盘中新建本地根文件夹，命名为bookman，并在该文件夹中新建image 文件夹以存放网站中所要用到的图片。
2、定义站点：设置”站点名称”，命名为 "博客人";设置本地根文件夹，指定为E盘下的bookman文件夹;设置 "HTTP地址"为localhost.3、创建网站目录结构及栏目文件夹（如下图）：4、E盘下的bookman文件夹创建主页文件index。
htm5、设置网页的页面属性。
网页设计与制作PPT课件
Dreamweaver 当前最新版本 Dreamweaver CCSS5是. 什么意思？
CS 是Creative Suite的缩写（创意套件）
Adobe Creative Suite 包括： Adobe Acrobat 电子文档制作软件 Adobe Flash 矢量动画处理软件 Adobe Dreamweaver 网页制作软件 Adobe Illustrator 矢量图形绘图软件 Adobe Photoshop 图形处理软件 Adobe InDesign 排版软件
Dreamweaver 是业界领先的Web开发工具，通 过该工具用户能够高效地设计、开发和维护网站 和应用程序。使用Dreamweaver, Web 开发人 员能够完成开发的全过程，从创建和维护基本网 站到支持最佳实践和最新技术的高级应用程序。
网页制作三剑客：Dreamweaver、Flash、Fireworks
网页设计与制作
丁艳辉 E-Mail：dingyanhui@
1/24
网站的制作流程
规划阶段（网站策划） 设计阶段（页面美工） 实施阶段（网页制作）
2/24
3/24
LOGO 推荐阅读
主菜单 广告
快速登录 新闻公告
精彩项目
友情链接
版权说明
4/24
5/24
6/24
7/24
Dreamweaver 简介
23/24
位图 VS 矢量图
位图：.jpg; .gif; .bmp; 等 常用软件：Photoshop，Painter等
矢量图：.dwg; .cdr; 等 常用软件：AutoCAD、Coreldraw、 Illustrator等
返回
24/24
9/24
《网页设计与制作》综合实训
《网页制作》期末大作业一、概述：要求设计并制作一个表达某个主题的网站，通过网站的制作，综合运用本课程各单元所学的知识。
网站的内容不能是一些素材如图片、音乐等的堆积，必须有鲜明的主题。
可以从网上下载部分资料，但不能超过整个内容的30%，更不要指望从网上下一个完整的网站应付老师。
总的页数应超过10页（一个包含主题内容的htm文件算一页）。
请同学们注意不要下载相同的资料，如果出现网页内容雷同，双方都要扣分，严重的必须重做。
二、网站内容：自行选择如下内容：科普、科幻知识；公益形象宣传；大、中、小学教学用动画形象；奥林匹克体育；环境保护；战争与和平；求职；校园生活；诚信、传统美德；交通安全；卫生与健康；爱心；教育；新青年；管理；实用工具等。
自己确定一个主题，整个网站要突出主题，信息分类合理，导航清晰。
要求必须有自己创作的内容，这些原创内容可以是文字、图片、动画等。
三、版面及格式：l、要求图文并茂，颜色搭配合理，但是图片及声音文件不要太大。
如果能加入自己创作的动态元素(如Flash，Gif动画等)将获得加分。
希望充分发挥自己的创作能力。
2、要求每个网页都使用表格布局。
3、要求网页中插入有Web组件，包括悬停按钮、滚动字幕、横幅广告管理器等。
4、导航设计简洁明了，不能有“死链接”，要保证能够在网络上浏览。
5、自创内容越多越好，得分越高。
四、递交方式：1、每个同学以自己的学号姓名建一个文件夹，上交时间为18周2、所做网页的首页文件名必须为index.htm3、所有文件名和目录名全部使用英文字母和数字，不得使用汉字或全角符号，否则，网络将出现死链接。
4、递交时必须把网页中所有用到的图片、声音、动画等都一起上传到服务器。
网页的总容量一般不要大于3MB5、建议将网页中的素材分类，建立不同的子目录存放。
五、网页评分标准:整个网页的评分强调“自己的创意”，不管主题是什么，也不论是哪一个栏目的内容，如果创意独特，有自己鲜明的个性、观点，得分较高。
《网页设计与制作》综合实训指南
《网页设计与制作》综合实训指南网站开发的参考案例1.1 规划网站1．策划网站主题我们网站是德阳嘉兴别墅设计公司．公司遵循〝奉献精深技艺、铸造温馨家园、炼就英雄团队、创建百年老店〞的进展理念，坚持〝客户至上、重信守约、质优价平、热忱服务〞的经营宗旨，追求〝简约明快、美观时尚、突出个性、有用环保〞的装饰风格，以新颖时尚的设计、规范精巧的施工和热情人性的服务，为业主构筑温馨、舒服、精美、典雅的家园。
2．确定网站风格确定好站点主题后，依照该主题选择站点的风格。
因此本案例所建立的网站是别墅设计类网站。
本网站的要紧特点如下：〔1〕设计风格要大众化，为了提高扫瞄速度，尽量减少图片的使用，更多地使用表格或层实现成效。
〔2〕背景颜色以淡绿色为主、白色为辅，文字颜色以绿色为主、黑色和淡绿色为辅。
〔3〕文字内容丰富、知识性强，标题简洁明了，字体一样采纳宋体，大小一样为12像素。
3．构思网站栏目结构先在纸上绘制网站的栏目结构草图，通过反复推敲，最后确定完整的栏目和内容的层次结构。
本案例的〝别墅设计网〞的栏目结构如表17-1所示。
表17-1 〝别墅设计网〞的栏目结构为了简化对网站的扫瞄过程，大部分网页通过二级栏目就能扫瞄内容页面，首页的主菜单包括4个菜单项：设计风格，经典案例，作品展现，公司简介。
4．规划网站名目结构和链接结构依照网站策划确定的栏目结构，创建站点名目，一个网站的名目结构要求层次清晰、井然有序，首页、栏目页、内容页区分明确，有利于日后的修改。
〝别墅设计网〞的名目结构，各文件夹的所存放文件类型如表17-3所示。
表17-3 网站的名目结构及其存放的文件类型index.html 主页网站的链接结构与名目结构不同，网站的名目结构指站点的文件存放结构，一样只有设计人员能够直截了当看到，而网站的链接结构指网站通过页面之间的联系表现的结构，扫瞄者扫瞄网站能够观看到这种结构。
本网站的链接结构采纳〝网状〞链接结构，结构图如图17-2所示。