中职《网页制作项目实训教程》课件-项目2 制作包含图片与超链接的网页
合集下载
国家中职骨干教师培训课程网页制作
1
Part 1 网页设计根底
1
WWW基础
2
网页与网站概论
3
IIS配置管理
Part 1 网页设计基础
学习重点、难点
1
学习重点
WWW工作 原理
2
2
学习难点
IIS配置
Part 1 网页设计基础
返回
3
WWW根底
WWW〔World Wide Web,万维网〕是基于Internet的一 种界面友好，用于检索和浏览链接到Internet效劳器上 的有关内容。它利用超文本〔Hypertext〕、超媒体〔 Hypermidia〕等技术，使用户通过浏览器〔如IE， FireFox〕可以方便地检索远程效劳器上的文本、图形 、声音以及视频文件。
Part 1 网页设计基础
9
WWW根底
❖ 常见WWW术语〔概念〕 ❖传输控制制协议〔TCP，transmission control
protocol) TCP/IP网络体系结构传输层的一咱协议，用以提 供可靠的数据传输。?计算机科学技术名词? 〔1994已公布〕12.199。
Part 1 网页设计基础
Part 1 网页设计基础
19
网页设计与网站开发概论
❖ 网站常用功能 ❖ 信息发布：企业/事业单位网站/ ❖ 信息效劳：信息查询效劳：、 ❖ 业务运营：学校信息系统：学籍管理/成绩查询/校
园卡效劳 ❖ 电子商务：电信话费查询/网上购物平台〔e-buy〕
Part 1 网页设计基础
20
网页设计与网站开发概论
Part 1 网页设计基础
Part 1 网页设计基础
12
WWW根底
❖ 常见WWW术语〔概念〕 ❖ 端口〔port〕
Part 1 网页设计根底
1
WWW基础
2
网页与网站概论
3
IIS配置管理
Part 1 网页设计基础
学习重点、难点
1
学习重点
WWW工作 原理
2
2
学习难点
IIS配置
Part 1 网页设计基础
返回
3
WWW根底
WWW〔World Wide Web,万维网〕是基于Internet的一 种界面友好，用于检索和浏览链接到Internet效劳器上 的有关内容。它利用超文本〔Hypertext〕、超媒体〔 Hypermidia〕等技术，使用户通过浏览器〔如IE， FireFox〕可以方便地检索远程效劳器上的文本、图形 、声音以及视频文件。
Part 1 网页设计基础
9
WWW根底
❖ 常见WWW术语〔概念〕 ❖传输控制制协议〔TCP，transmission control
protocol) TCP/IP网络体系结构传输层的一咱协议，用以提 供可靠的数据传输。?计算机科学技术名词? 〔1994已公布〕12.199。
Part 1 网页设计基础
Part 1 网页设计基础
19
网页设计与网站开发概论
❖ 网站常用功能 ❖ 信息发布：企业/事业单位网站/ ❖ 信息效劳：信息查询效劳：、 ❖ 业务运营：学校信息系统：学籍管理/成绩查询/校
园卡效劳 ❖ 电子商务：电信话费查询/网上购物平台〔e-buy〕
Part 1 网页设计基础
20
网页设计与网站开发概论
Part 1 网页设计基础
Part 1 网页设计基础
12
WWW根底
❖ 常见WWW术语〔概念〕 ❖ 端口〔port〕
中职《网页制作项目实训教程》教案-项目1 网页设计制作入门
________________________________网页制作项目实训教程 ______________________________________________________________广东省×××职业技术学校学科教案本Teaching Plan20 年———20 年学年度 学期The (1st/2na)Semester of the Academic Year from 20 to 20学校（School ）学科（Subject ） 年级（Grade ）教师（Teacher ）注意：①按住Ctrl 键后单击每个任务即可跳转到对应的教案 ②单击按钮可返回目录 ③页面设置参数为： 纸张：B5 页边距左：1.5 页边距右：1.5《网页制作项目实训教程》目录项目1 网页设计制作入门任务1活动1 创建与修改站点 活动2 制作第一个网页文档 任务2活动1 制作诗词赏析页面活动2 对诗词赏析页面进行简单排版 任务3活动1 制作树形菜单 活动2 制作在线考试试卷教学课题任务1 活动1 创建与修改站点课题类型理论+实作课时安排2上课时间教学目标1.了解Dreamweaver CS6的工作界面2.掌握站点的创建与编辑操作教学重点1、2教学难点2辅助资源课件、多媒体、网络复习引入1.你上网浏览过网页吗？2.你觉得网页由哪些元素构成？3.你知道的网页制作工具有哪些？教学手段教学过程师生互动活动设计课件讨论实作一、教师布置活动要求1、创建一个名称为“项目1”的本地站点，站点文件夹为D盘。
2、修改“项目1”站点文件夹为桌面上的“Task1-1”文件夹。
二、师生讨论学习新知识1、启动Dreamweaver CS6软件双击桌面上的Dreamweaver CS6图标，启动软件，如下图所示。
布置任务：让学生明确本次课的内容提问或讨论：DW的工作界面与PS有何异同课件举例讨论课件实作2、Dreamweaver CS6工作界面介绍在“欢迎界面”中单击“新建”栏下的“HTML”按钮，新建一个HTML网页文件，进入新的窗口界面。
(中职)cs6网页设计与实训课件整套课件完整版ppt教学教程最全电子讲义教案(最新)后缀
项目一 Dreamweaver-CS6入门
任务一 了解Dreamweaver CS6
知识一 Dreamweaver CS6 简介
✓ Dreamweaver CS6是世界顶级软件厂商Adobe推出的一套拥有可
视化编辑界面，用于制作并编辑网站和移动应用程序的网页设计 软件。在业界通常将Dreamweaver、Flash、Fireworks称为“网页 三剑客”。
任务二 创建站点
操作一 创建本地站点
使用Dream weaver CS3的向导来进行站点的创建步骤如下 1、选择“站点”菜单项，弹出下拉菜单。 2、单击“新建站点”命令，出现“站点设置对象”的第一个界面， 要求为站点输入一个名称。
任务二 创建站点
操作一 创建本地站点
3、单击“保存”按钮，完成本地站点的创建，执行“窗 口—>文件”命令，打开“文件”面板，在面板中显现刚刚 创建的本地站点
✓ 合理分配文档资源：按栏目内容建立子目录，目录的层次不要超过
3层，不同的对象放在不同的文件夹中。
✓ 尽量使用意义明确的目录；例如可以用Flash、Dhtml、Javascript
来建立目录，也可以用1、2、3建立目录，但更便于记忆和管理显 然是前者。
任务一 了解Dreamweaver CS6
知识五 信息的收集与整理
任务三 熟悉Dreamweaver CS6 的工作界面
操作二 认识“属性”栏和“插入”栏
1．“属性”栏
任务三 熟悉Dreamweaver CS6 的工作界面
操作二 认识“属性”栏和“插入”栏
2．“插入”栏
任务三 熟悉Dreamweaver CS6 的工作界面
操作三 面板及面板的基本操作
1．面板介绍
任务一 了解Dreamweaver CS6
知识一 Dreamweaver CS6 简介
✓ Dreamweaver CS6是世界顶级软件厂商Adobe推出的一套拥有可
视化编辑界面，用于制作并编辑网站和移动应用程序的网页设计 软件。在业界通常将Dreamweaver、Flash、Fireworks称为“网页 三剑客”。
任务二 创建站点
操作一 创建本地站点
使用Dream weaver CS3的向导来进行站点的创建步骤如下 1、选择“站点”菜单项，弹出下拉菜单。 2、单击“新建站点”命令，出现“站点设置对象”的第一个界面， 要求为站点输入一个名称。
任务二 创建站点
操作一 创建本地站点
3、单击“保存”按钮，完成本地站点的创建，执行“窗 口—>文件”命令，打开“文件”面板，在面板中显现刚刚 创建的本地站点
✓ 合理分配文档资源：按栏目内容建立子目录，目录的层次不要超过
3层，不同的对象放在不同的文件夹中。
✓ 尽量使用意义明确的目录；例如可以用Flash、Dhtml、Javascript
来建立目录，也可以用1、2、3建立目录，但更便于记忆和管理显 然是前者。
任务一 了解Dreamweaver CS6
知识五 信息的收集与整理
任务三 熟悉Dreamweaver CS6 的工作界面
操作二 认识“属性”栏和“插入”栏
1．“属性”栏
任务三 熟悉Dreamweaver CS6 的工作界面
操作二 认识“属性”栏和“插入”栏
2．“插入”栏
任务三 熟悉Dreamweaver CS6 的工作界面
操作三 面板及面板的基本操作
1．面板介绍
中职网页设计与制作课件第2章_HTML简介
2.2排版标记—文字风格标记
标记名称
b i u
标记功能
文字加粗 文字倾斜 文字加下划线
标记使用格式
<b>文字</b> <i>文字</i> <u>文字</u>
strike
sup sub
文字加删除线
文字为上标 文字为下标
<strike>文字</strike>
<sup>文字</sup> <sub>文字</sub>
2.1 HTML文档的基本结构—标记和属性
⑵ meta标记
页面刷新举例： <html> <head> <meta http-equiv="refresh" content="20;URL="> <title>我的网页</title> </head> <body> Hello！网页设计的学习现在开始啦！ </body> </html>
2.1 HTML文档的基本结构—标记和属性
⑵ meta标记 页面刷新 格式如下： <meta http-equiv="refresh" content="数 值;URL=文件名或网址"> 其中： content属性中的“数值”代表刷新网页延迟的时 间，单位是秒；“文件名或网址”为刷新时要链 接到的文件或网址。当缺少URL项时，浏览器将 刷新当前网页。
2.1 HTML文档的基本结构—标记和属性
2．标记的属性 在标记中使用的参数称为标记的属性。一个标记 可以有多个属性，每个属性都有对应的属性值。 例如： <p align="center"> 其中： “align”是标记<p>的属性，“center”是属性 “align”的值。
中职《网页制作》课程教案2章
3.（2）创建本地站点：①打开Dreamweaver CS6，选择菜单栏中的“站点”|“新建站点”。②站点名称输入“myfootball”,选择本地站点文件夹路径，为站点指定站点根文件夹。③选择左侧“高级设置”下的“本地信息”，设置默认图像文件夹路径，并讲解该窗口中其他选项的含义。④单击“保存”、“完成”。
教学
重点
与难点
重点
编辑首页文件。
难点
对站点结构的理解。
媒体教具(或主要工具材料等)
课本、PPT、素材和Dreamweaver CS6
教学过程
修改栏（时间分配）
教 学 内 容
师生互动
1.回顾上节课所学知识，导入本节内容。
2.制作我的足球网主页。实现步骤：（1）规划站点：①在D盘新建文件夹myfootball作为网站根目录。②将“我与足球”、“足球新闻”、“足球明星”的内容分别存放在根目录下的aboutme、news、photo文件夹里。③素材图像存放于根目录下images文件夹中。
6.⑧合并第三行，在“属性”面板中设置“水平”为“居中对齐”。输入“本网站最后更新时间”，选择菜单栏上的“插入”|“日期”命令，勾选“存储时自动更新”复选框，单击“确定”。继续输入版权信息内容。⑨制作栏目链接，有2种方法。⑩将“标题”改为“我的足球网”。按F12看效果。
7.对本节课内容进行归纳总结。
（4）具有良好的软件应用能力。
教学
重点
与
难点
重点
（1）规划站点。（2）用表格布局。
难点
（1）规划站点。（2）用表格布局。
媒体教具(或主要工具材料等)
课本、PPT、素材和Dreamweaver CS6
教学过程
修改栏（时间分配）
教 学 内 容
教学
重点
与难点
重点
编辑首页文件。
难点
对站点结构的理解。
媒体教具(或主要工具材料等)
课本、PPT、素材和Dreamweaver CS6
教学过程
修改栏（时间分配）
教 学 内 容
师生互动
1.回顾上节课所学知识，导入本节内容。
2.制作我的足球网主页。实现步骤：（1）规划站点：①在D盘新建文件夹myfootball作为网站根目录。②将“我与足球”、“足球新闻”、“足球明星”的内容分别存放在根目录下的aboutme、news、photo文件夹里。③素材图像存放于根目录下images文件夹中。
6.⑧合并第三行，在“属性”面板中设置“水平”为“居中对齐”。输入“本网站最后更新时间”，选择菜单栏上的“插入”|“日期”命令，勾选“存储时自动更新”复选框，单击“确定”。继续输入版权信息内容。⑨制作栏目链接，有2种方法。⑩将“标题”改为“我的足球网”。按F12看效果。
7.对本节课内容进行归纳总结。
（4）具有良好的软件应用能力。
教学
重点
与
难点
重点
（1）规划站点。（2）用表格布局。
难点
（1）规划站点。（2）用表格布局。
媒体教具(或主要工具材料等)
课本、PPT、素材和Dreamweaver CS6
教学过程
修改栏（时间分配）
教 学 内 容
教学课件：《网页设计与制作》(中职)
• 商务网站规划报告的格式一般包括封面、 目录、前言、正文和附录。其中，正文是 整个报告的核心，主要内容包括：市场分 析，网站目的及定位，网站技术解决方案，
思考与练习
• 1. 福德皮具公司是一家皮具加工生产性企 业，产品以外销为主。随着公司业务的飞 速发展，规模急剧扩大。现在需要建设公 司网站，以更好地树立公司形象，宣传公 司产品，方便快捷地与客户保持沟通和联 系。本次网站建设重点：
1.2.7 配色
• 2）非彩色和彩色的搭配 （1）非彩色的搭配 （2）彩色的搭配 色彩千变万化，彩色的 搭配是研究的重点。依 然需要学习一些色彩的 知识。将色彩按“红→黄 →绿→蓝→红”依次过渡 渐变，就可以得到一个
（1）设计公司网站首页，树立公司美好的 网上形象；
（2）全面展示公司产品，多层次多角度地 介绍产品的信息。
思考与练习
• 2. 某人准备建立一个信息网站，希望通过 有价值的信息吸引点击率，再通过访问量 争取到网络广告发布收益。应该如何定位 网站主题、内容？网站的目标市场定位在 哪些人群？
• 3. 分析Dell电脑的网站定位。 • 4. 网站规划的内容包括哪些？ • 5. 电子商务网站规划报告的内容包括哪些？
1.2.6 网页设计布局
• 设计首页的第一步是设计版面布局。就象 传统的报刊杂志编辑一样，将网页看作一 张报纸、一本杂志来进行排版布局。版面 指的是浏览器看到的完整的一个页面（可 以包含框架和层）。布局就是以最适合浏 览的方式将图片和文字排放在页面的不同 位置。版面布局一般的步骤如下：
（1）画出草案。 （2）粗略布局。 （3）定案。
你认为哪部分最为重要？
1.2 网站设计流程
• 任务导入 • 学习目标 • 任务实施 • 知识拓展 • 思考与练习
思考与练习
• 1. 福德皮具公司是一家皮具加工生产性企 业，产品以外销为主。随着公司业务的飞 速发展，规模急剧扩大。现在需要建设公 司网站，以更好地树立公司形象，宣传公 司产品，方便快捷地与客户保持沟通和联 系。本次网站建设重点：
1.2.7 配色
• 2）非彩色和彩色的搭配 （1）非彩色的搭配 （2）彩色的搭配 色彩千变万化，彩色的 搭配是研究的重点。依 然需要学习一些色彩的 知识。将色彩按“红→黄 →绿→蓝→红”依次过渡 渐变，就可以得到一个
（1）设计公司网站首页，树立公司美好的 网上形象；
（2）全面展示公司产品，多层次多角度地 介绍产品的信息。
思考与练习
• 2. 某人准备建立一个信息网站，希望通过 有价值的信息吸引点击率，再通过访问量 争取到网络广告发布收益。应该如何定位 网站主题、内容？网站的目标市场定位在 哪些人群？
• 3. 分析Dell电脑的网站定位。 • 4. 网站规划的内容包括哪些？ • 5. 电子商务网站规划报告的内容包括哪些？
1.2.6 网页设计布局
• 设计首页的第一步是设计版面布局。就象 传统的报刊杂志编辑一样，将网页看作一 张报纸、一本杂志来进行排版布局。版面 指的是浏览器看到的完整的一个页面（可 以包含框架和层）。布局就是以最适合浏 览的方式将图片和文字排放在页面的不同 位置。版面布局一般的步骤如下：
（1）画出草案。 （2）粗略布局。 （3）定案。
你认为哪部分最为重要？
1.2 网站设计流程
• 任务导入 • 学习目标 • 任务实施 • 知识拓展 • 思考与练习
中职一年级网页设计与制作第二章_活动2_ 制作网站的主页_第二课时
活动2 制作网站的主页第二课时
目 录
3、用表格安排页面布局
2、新建网页
1、认识网页和主页
5、小组展示成果
4、插入网站标题，配插图
CONTENTS
认识网页和主页
01
PART ONE
（1）、主页是整个网站的窗口，通过这个窗口可以把网站的内容和特色很好地展现出来，因此要把主页制作得活泼鲜明、整齐美观，这样可以引起浏览者进一步浏览网站中其他网页的兴趣。（2）、主页( homepage)通常是进入一个网站时看到的第一个网页，一般用 index.htm作为文件名。（3）、网页是可以用浏览器看到的一个个页面。网页文件的扩展名一般是“htm”或“html”。
FrontPage中新建网页的三种方法
02
PART ONE
方法一：启动Frontpage,其实就正在新建一个网页
方法二：启动FrontPage程序，单击工具栏中的“新建”按钮。
方法三：启动FrontPage程序，单击工具栏中的“文件”按钮。
用表格安排页面布局
03
PART ONE
1、打开FrontPage，并新建一个页面。我这里就建立一个HTML文件。
05
PART TWO
谢谢观看！
2、网页新建成功修改网页的“Title”标签，这是最基本的，以ntPage布局，最简单的就是用表格安排页面布局。要搞清楚的就是表格要有的列数和行数。使用表格，把整个页面分成很多个区域，可以方便灵活地把文字、图像等素材定位在表格中相对独立的区择“插入”--“图片”--“来自文件”，选择图片并插入到你想放入的单元格里。也可以直接点击工具栏的图片按钮来插入
步骤2：选择文件--打开，打开网页文件，如（c:\ks\frontpage\lqzjj.htm）打开后，适当调整标题的大小，并保存到站点中的文件夹里
目 录
3、用表格安排页面布局
2、新建网页
1、认识网页和主页
5、小组展示成果
4、插入网站标题，配插图
CONTENTS
认识网页和主页
01
PART ONE
（1）、主页是整个网站的窗口，通过这个窗口可以把网站的内容和特色很好地展现出来，因此要把主页制作得活泼鲜明、整齐美观，这样可以引起浏览者进一步浏览网站中其他网页的兴趣。（2）、主页( homepage)通常是进入一个网站时看到的第一个网页，一般用 index.htm作为文件名。（3）、网页是可以用浏览器看到的一个个页面。网页文件的扩展名一般是“htm”或“html”。
FrontPage中新建网页的三种方法
02
PART ONE
方法一：启动Frontpage,其实就正在新建一个网页
方法二：启动FrontPage程序，单击工具栏中的“新建”按钮。
方法三：启动FrontPage程序，单击工具栏中的“文件”按钮。
用表格安排页面布局
03
PART ONE
1、打开FrontPage，并新建一个页面。我这里就建立一个HTML文件。
05
PART TWO
谢谢观看！
2、网页新建成功修改网页的“Title”标签，这是最基本的，以ntPage布局，最简单的就是用表格安排页面布局。要搞清楚的就是表格要有的列数和行数。使用表格，把整个页面分成很多个区域，可以方便灵活地把文字、图像等素材定位在表格中相对独立的区择“插入”--“图片”--“来自文件”，选择图片并插入到你想放入的单元格里。也可以直接点击工具栏的图片按钮来插入
步骤2：选择文件--打开，打开网页文件，如（c:\ks\frontpage\lqzjj.htm）打开后，适当调整标题的大小，并保存到站点中的文件夹里
(中职中专)网页设计与制作完整版课件汇总全书电子教案(最新)
第一章商务网站概述—客户需求分析—网站栏目规划
2、网页的逻辑结构
网页的基础 网页的条理 网页的显示 网页的互动
第一章商务网站概述—客户需求分析—网站栏目规划
• 文字
3、网页组成元素
• 背景音乐
• 图片
• 视频
• 动画
• 表单
• 脚本程序
第一章商务网站概述—客户需求分析—网站栏目规划
三、网页风格
第二章项 目 概 述—网页风格设计—草图绘制
学习内容
项目概述
任务1：网页风格设计
任务2：草图绘制
第二章项 目 概 述—网页风格设计—草图绘制
任务一、网页风格设计
【任务说明】 风格设计的重点是版面布局、颜色的使用
和搭配、文字和图片的编排等。要完成这一任务，可以从 分析比较同类网站入手，以快速形成初步的设计方案。
第一章商务网站概述—客户需求分析—网站栏目规划
二、网站栏目的策划
网站栏目的策划，首先要考虑网站的定位、网站的方 向是什么。当确定了一个方向后，就可以围绕这个方向去 搜集相关资料、寻找相关文章，并整理为相应的栏目。
在确定网站栏目结构时，既要考虑网站栏目的层次结 构，还应设计好网站栏目的链接结构。
第一章商务网站概述—客户需求分析—网站栏目规划
网页风格就相当于网页的外衣，是指网页设计 时使用的文字、颜色、布局等的组合搭配给人带来 的视觉印象。
要点：
商务网页并不是纯粹的艺术设计作品，应围绕准 确表达商务诉求、能被大多数浏览者接受和理解来确 定页面风格。
第一章商务网站概述—客户需求分析—网站栏目规划
特点： 大幅用
图，且画面 精美，颜色 鲜艳，文字 样式及图片 排版活泼、 优美。
第二章项 目 概 述—网页风格设计—草图绘制
2、网页的逻辑结构
网页的基础 网页的条理 网页的显示 网页的互动
第一章商务网站概述—客户需求分析—网站栏目规划
• 文字
3、网页组成元素
• 背景音乐
• 图片
• 视频
• 动画
• 表单
• 脚本程序
第一章商务网站概述—客户需求分析—网站栏目规划
三、网页风格
第二章项 目 概 述—网页风格设计—草图绘制
学习内容
项目概述
任务1：网页风格设计
任务2：草图绘制
第二章项 目 概 述—网页风格设计—草图绘制
任务一、网页风格设计
【任务说明】 风格设计的重点是版面布局、颜色的使用
和搭配、文字和图片的编排等。要完成这一任务，可以从 分析比较同类网站入手，以快速形成初步的设计方案。
第一章商务网站概述—客户需求分析—网站栏目规划
二、网站栏目的策划
网站栏目的策划，首先要考虑网站的定位、网站的方 向是什么。当确定了一个方向后，就可以围绕这个方向去 搜集相关资料、寻找相关文章，并整理为相应的栏目。
在确定网站栏目结构时，既要考虑网站栏目的层次结 构，还应设计好网站栏目的链接结构。
第一章商务网站概述—客户需求分析—网站栏目规划
网页风格就相当于网页的外衣，是指网页设计 时使用的文字、颜色、布局等的组合搭配给人带来 的视觉印象。
要点：
商务网页并不是纯粹的艺术设计作品，应围绕准 确表达商务诉求、能被大多数浏览者接受和理解来确 定页面风格。
第一章商务网站概述—客户需求分析—网站栏目规划
特点： 大幅用
图，且画面 精美，颜色 鲜艳，文字 样式及图片 排版活泼、 优美。
第二章项 目 概 述—网页风格设计—草图绘制
网页制作教程-PPT课件
菜单栏 插入栏
2. 网页的类型
• 动态网页 是在发送到浏览器之 前由应用程序服务器 自定义的网页。动态 网页要在经过服务器 的修改后才被发送到 请求它的浏览器。网 页发生更改的特性便 是称其为动态的原因。
“文档”工具栏
面板组
“文档”窗口 状态栏 “属性”面板
动态网页的工作流程 11
11
子任务1
3. 组成页面的元素
可以通过“文件”->“在浏览器中预览”->iexplore运 行。 直接单击“F12”运行。 点击“文档”工具栏中的快捷按钮运行。
27
27
小结与作业
bvtc
静态网页与动态网页 Html基本概念 网页设计与制作的基本流程 Dreamweaver CS3工作界面 如何创建本地站点并进行管理 对页面属性进行设置 代码文件头“title”标记的设置 如何运行网页文件 上机实验1
bvtc
网页的基本操作与站点管理
不要将所有文件都放在根目录下，这样做会使文件管理混乱，上 传速度慢。 按栏目内容建立子目录。 次要栏目视情况而定。对于需要经常更新的栏目可以建立独立的 子目录。而一些相关性强，不需要经常更新的栏目，可以合并放 在一个统一的目录下。 所有程序一般都放在特定目录中，所有需要下载的内容也最好放 在一个子目录下。 在每个主目录下都建立独立的images目录，。为每一个栏目建 立一个独立的images目录是最方便管理的。而根目录下的 images目录只是用来放首页和一些次要栏目的图片。 注意：目录的层次不要太深，不要使用中文目录，不要使用过长 的目录名，目录要做到“见名之义”等。
二、网站的制作期:使用Dreamweaver制作首页及分页。 三、网站的后期维护:测试网站,申请域名,上传网站内容及管理。
2. 网页的类型
• 动态网页 是在发送到浏览器之 前由应用程序服务器 自定义的网页。动态 网页要在经过服务器 的修改后才被发送到 请求它的浏览器。网 页发生更改的特性便 是称其为动态的原因。
“文档”工具栏
面板组
“文档”窗口 状态栏 “属性”面板
动态网页的工作流程 11
11
子任务1
3. 组成页面的元素
可以通过“文件”->“在浏览器中预览”->iexplore运 行。 直接单击“F12”运行。 点击“文档”工具栏中的快捷按钮运行。
27
27
小结与作业
bvtc
静态网页与动态网页 Html基本概念 网页设计与制作的基本流程 Dreamweaver CS3工作界面 如何创建本地站点并进行管理 对页面属性进行设置 代码文件头“title”标记的设置 如何运行网页文件 上机实验1
bvtc
网页的基本操作与站点管理
不要将所有文件都放在根目录下，这样做会使文件管理混乱，上 传速度慢。 按栏目内容建立子目录。 次要栏目视情况而定。对于需要经常更新的栏目可以建立独立的 子目录。而一些相关性强，不需要经常更新的栏目，可以合并放 在一个统一的目录下。 所有程序一般都放在特定目录中，所有需要下载的内容也最好放 在一个子目录下。 在每个主目录下都建立独立的images目录，。为每一个栏目建 立一个独立的images目录是最方便管理的。而根目录下的 images目录只是用来放首页和一些次要栏目的图片。 注意：目录的层次不要太深，不要使用中文目录，不要使用过长 的目录名，目录要做到“见名之义”等。
二、网站的制作期:使用Dreamweaver制作首页及分页。 三、网站的后期维护:测试网站,申请域名,上传网站内容及管理。
网页制作与实训ppt完整版PPT幻灯片教学教程最全电子讲义教案(最新)
<tr align="center"> <td>拜仁慕尼黑</td><td>德国</td><td>4</td> </tr>
</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">
</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课件第4章超链接
超链接的重要性
总结词
超链接在网页制作中起着至关重要的作用，它能够提高用户体验、增强网站导航、增加网站流量和提升搜索引擎 排名。
详细描述
超链接是网页中不可或缺的一部分，它能够提高用户体验，使用户能够方便地浏览和获取信息。通过设置合理的 超链接，可以增强网站的导航结构，使用户更容易找到所需内容。同时，超链接还可以增加网站的外部链接数量， 提高网站的权重和流量，从而提升搜索引擎排名。
问。
图片链接
总结词
图片链接是指将一张图片设置为超链接 ，当用户点击这张图片时，会跳转到指 定的片链接，首先需要插入一 张图片，然后选中这张图片，选择“插入 ”菜单中的“超链接”选项。在弹出的对 话框中，输入要链接到的网址或文件路径 ，并设置好显示的文字和颜色等属性。点 击确定后，选中的图片就会变成超链接， 用户可以直接点击访问。
确保超链接指向的内容合法、合规， 不涉及任何违法、侵权或不良信息。
避免在超链接中传递任何误导、虚假 或欺诈信息，以免引起法律纠纷和不 良后果。
在使用外部链接时，尊重原网站的版 权和隐私政策，避免侵犯他人的权益。
06
案例分析
优秀超链接案例一
01
案例名称
旅游网站导航栏
02 03
描述
该网站通过超链接将各个旅游景点的页面相互连接，使用户可以轻松跳 转到感兴趣的景点页面，同时每个景点页面都提供了返回主页的超链接， 方便用户浏览。
使用链接管理工具或插件来检 测和清除死链，提高网站的用 户体验和搜索引擎优化效果。
优化用户体验
确保超链接的文本清晰、简洁， 易于理解，避免使用过于复杂或
难以理解的链接描述。
合理规划超链接的位置和布局， 使其符合用户的浏览习惯和阅读
中职网页设计与实训整套课件完整版ppt教学教程最全电子讲义教案最新
green
黄 色
#FFFF00
yellow
白 色
#FFFFFF
white
任务3.2 网页的基本制作
知识3.2.1 页面属性
建立网页时，需要对网页的“外观”、“链接”、“标题”等进行基本的设置，这些设置需要在“页面属性”中完成。
页面属性对话框
知识3.2.2 META标记
知识2.1.2 网站规划
一 ．确定目标群体
在创建一个站点之前，首先要确定站点是给什么人访问的，即确定站点的用户群体，以便于确定在站点内添加的内容、为网站设计不同的视觉内格、色彩效果等。
化妆品网
二 ．确定站点功能
确定了站点的目标群体后，就要设计网站需要为这些用户实现哪些愿望和功能，以确定网站各方面的内容及效果要求，例如如果是企业网站，就应立足于企业形象来展开，如果是购物网站，就要强化网站的在线购物等功能。
任务4.1 文本基本操作
文本作为网页中最基本的信息载体，以最直接、最直观的方式使用户获取信息，在网页中有着不可替代的地位与作用，它涵盖的信息量大，插入、编辑操作简便，容易被浏览器下载，不会像图片一样占用太长的等待时间，因此掌握好文本的操作，对于网页制作是最基本的技能。
知识4.1.1 选择性粘帖
Dreamweaver 8网页设计与实训
走进Dreamweaver8
创建本地站点
网页基础知识和基本制作
文本编辑
图像与多媒体的应用
网站链接
表格和布局
框架
表单
模板和库
CSS样式
行为和JavaScript
层和时间轴
整站建设、测试与上传
动态网站制作
项目一 —走进Dreamweaver 8
黄 色
#FFFF00
yellow
白 色
#FFFFFF
white
任务3.2 网页的基本制作
知识3.2.1 页面属性
建立网页时，需要对网页的“外观”、“链接”、“标题”等进行基本的设置，这些设置需要在“页面属性”中完成。
页面属性对话框
知识3.2.2 META标记
知识2.1.2 网站规划
一 ．确定目标群体
在创建一个站点之前，首先要确定站点是给什么人访问的，即确定站点的用户群体，以便于确定在站点内添加的内容、为网站设计不同的视觉内格、色彩效果等。
化妆品网
二 ．确定站点功能
确定了站点的目标群体后，就要设计网站需要为这些用户实现哪些愿望和功能，以确定网站各方面的内容及效果要求，例如如果是企业网站，就应立足于企业形象来展开，如果是购物网站，就要强化网站的在线购物等功能。
任务4.1 文本基本操作
文本作为网页中最基本的信息载体，以最直接、最直观的方式使用户获取信息，在网页中有着不可替代的地位与作用，它涵盖的信息量大，插入、编辑操作简便，容易被浏览器下载，不会像图片一样占用太长的等待时间，因此掌握好文本的操作，对于网页制作是最基本的技能。
知识4.1.1 选择性粘帖
Dreamweaver 8网页设计与实训
走进Dreamweaver8
创建本地站点
网页基础知识和基本制作
文本编辑
图像与多媒体的应用
网站链接
表格和布局
框架
表单
模板和库
CSS样式
行为和JavaScript
层和时间轴
整站建设、测试与上传
动态网站制作
项目一 —走进Dreamweaver 8
《网页设计与制作》课件——项目二 任务一 网页中的文本
图2.1.15 代码视图
切换到设计视图，在“学校简报”后面单击“Enter”键，增加其他列表项， 如图2.1.16所示。列表代码如图2.1.17所示。
图2.1.16 列表效果
图2.1.17 列表代码
最后网页浏览效果如图2.1.18所示。
图2.1.18 网页浏览效果
知识拓展
HTML中的列表
在HTML中的列表常用的主要有两种类型：无序列表、有序列表。 通过列表可以对同类的内容进行简单的归纳。常见的用途有：图书目 录、饭店菜单、人员名单、待办事宜等。这些信息大多不是大篇的信息内 容，而是简要的标题。
属性 ul ol li
说明 定义无序列表 定义有序列表 定义列表中的列表项元素
任务总结
主要让大家学习文本插入及属性设置，其中包括普通文本 与特殊符号的插入、文本的基本属性设置、项目列表的应 用，这些基本操作都是以后网站制作中经1.5 列表文字
图2.1.6 列表效果
步骤3：设置“学校简介”正文
（1）在正文的左上方输入“本站首页”→“学校简介”，在属性面 板设置其大小为12px，颜色为#006600，粗体，如图2.1.7所示。
图2.1.7 文字效果
（2）打开“新闻简介.txt”文件，选择所有文字，单击鼠标右键，从弹 出的快捷菜单中选择“复制”选项，复制所有文字，回到 Dreamweaver中，将鼠标光标放置在正文内容的位置，单击鼠标右键， 从弹出的快捷菜单中选择“粘贴”选项，粘贴所有文字到页面中，如 图2.1.8所示。
项目二 制作学校概况
核心技术 了解网页中的文本样式 应用图片和多媒体丰富页面内容
任务目标
任务一：网页中的文本 任务二：利用图文混排制作漂亮网页
能力目标
文本的基本操作 插入特殊文本对象 项目符号和项目列表 插入与设置图像
切换到设计视图，在“学校简报”后面单击“Enter”键，增加其他列表项， 如图2.1.16所示。列表代码如图2.1.17所示。
图2.1.16 列表效果
图2.1.17 列表代码
最后网页浏览效果如图2.1.18所示。
图2.1.18 网页浏览效果
知识拓展
HTML中的列表
在HTML中的列表常用的主要有两种类型：无序列表、有序列表。 通过列表可以对同类的内容进行简单的归纳。常见的用途有：图书目 录、饭店菜单、人员名单、待办事宜等。这些信息大多不是大篇的信息内 容，而是简要的标题。
属性 ul ol li
说明 定义无序列表 定义有序列表 定义列表中的列表项元素
任务总结
主要让大家学习文本插入及属性设置，其中包括普通文本 与特殊符号的插入、文本的基本属性设置、项目列表的应 用，这些基本操作都是以后网站制作中经1.5 列表文字
图2.1.6 列表效果
步骤3：设置“学校简介”正文
（1）在正文的左上方输入“本站首页”→“学校简介”，在属性面 板设置其大小为12px，颜色为#006600，粗体，如图2.1.7所示。
图2.1.7 文字效果
（2）打开“新闻简介.txt”文件，选择所有文字，单击鼠标右键，从弹 出的快捷菜单中选择“复制”选项，复制所有文字，回到 Dreamweaver中，将鼠标光标放置在正文内容的位置，单击鼠标右键， 从弹出的快捷菜单中选择“粘贴”选项，粘贴所有文字到页面中，如 图2.1.8所示。
项目二 制作学校概况
核心技术 了解网页中的文本样式 应用图片和多媒体丰富页面内容
任务目标
任务一：网页中的文本 任务二：利用图文混排制作漂亮网页
能力目标
文本的基本操作 插入特殊文本对象 项目符号和项目列表 插入与设置图像
中职一年级网页设计与制作第二章_活动2_ 制作网站的主页_第一课时
第一阶段：确定主题，明确开发的目的、方向和内容。第二阶段：规划网站和准备资料，根据主题内容设计网站结构和网页布局，搜集素材。第三阶段：选择自己熟悉的制作网站的软件，制作网站。第四阶段：测试和修改网站，测试网站是否正确。第五阶段：完善和发布网站。
认识制作网页的常用工具
02
PART ONE
1、Microsoft FrontPage,是一款轻量级静态网页制作软件，特别适合新手开发静态网站的需要，目前该应用很少用于制作网页，只要熟悉Word的用法，就会简单上手。2、Dreamweaver网页制作软件，该软件已成为专业级网页制作程序，支持HTML、CSS、PHP、JSP以及ASP等众多脚本语言的语法着色显示，同时提供了模板套用功能，支持一键式生成网页框架功能。是初学者或专业级网站开发人员必备之选择工具。
活动2 制作网站的主页第一课时
目 录
3、认识操作界面
2、认识制作网页的常用工具
1、建立网站的基本思路与方法
5、小组展示成果
4、创建站点
CONTENTS
建立网站的基本思路与方法
01
PART ONE
第一阶段：确定主题
第二阶段：规划网站
第三阶段：选择软件
第四阶段：测试修改网站
第五阶段：完善发布网站
（约
（2）、打开后Frontpage，点击“文件--新建”命令，在页面右侧就会出现对话框。
(3)、在右侧的对话框中选择“由一个网页组成的网站”，则会弹出选择网站模式对话框。
（3）、在网站模式对话框中，选择“只有一个网页的网站”，在右侧的地址选项中选择第一步创建的文件夹作为网站的地址。最后确定。
Frontpage 界面和 Word界面对比
创建站点-主要步骤
04
认识制作网页的常用工具
02
PART ONE
1、Microsoft FrontPage,是一款轻量级静态网页制作软件，特别适合新手开发静态网站的需要，目前该应用很少用于制作网页，只要熟悉Word的用法，就会简单上手。2、Dreamweaver网页制作软件，该软件已成为专业级网页制作程序，支持HTML、CSS、PHP、JSP以及ASP等众多脚本语言的语法着色显示，同时提供了模板套用功能，支持一键式生成网页框架功能。是初学者或专业级网站开发人员必备之选择工具。
活动2 制作网站的主页第一课时
目 录
3、认识操作界面
2、认识制作网页的常用工具
1、建立网站的基本思路与方法
5、小组展示成果
4、创建站点
CONTENTS
建立网站的基本思路与方法
01
PART ONE
第一阶段：确定主题
第二阶段：规划网站
第三阶段：选择软件
第四阶段：测试修改网站
第五阶段：完善发布网站
（约
（2）、打开后Frontpage，点击“文件--新建”命令，在页面右侧就会出现对话框。
(3)、在右侧的对话框中选择“由一个网页组成的网站”，则会弹出选择网站模式对话框。
（3）、在网站模式对话框中，选择“只有一个网页的网站”，在右侧的地址选项中选择第一步创建的文件夹作为网站的地址。最后确定。
Frontpage 界面和 Word界面对比
创建站点-主要步骤
04
《网页制作项目实训教程》
网页性能优化技巧
06
网页制作项目实训
客户需求
01
了解客户对网站的具体要求，包括网站目标、功能、设计风格等。
项目需求分析
市场调研
02
对竞争对手、目标用户和行业趋势进行分析，以了解市场现状和用户需求。
确定项目目标
03
基于客户需求和市场调研，明确项目的主要目标和预期成果。
将项目拆分为多个可执行的任务，明确任务的责任人、时间安排和资源需求。
设计与开发
根据项目需求和计划，进行网站的设计、开发和编程工作。
项目测试与验收
测试网站的核心功能是否符合项目需求和用户期望，是否存在漏洞和缺陷。
功能测试
性能测试
安全性测试
用户验收测试
测试网站的负载能力、响应速度和稳定性，以确保网站在高负载情况下仍能保持良好的性能。
测试网站是否存在潜在的安全威胁，如跨站脚本攻击、SQL注入等。
实现一个登录页面
介绍如何使用JavaScript来实现一个登录页面，包括用户名和密码的验证、跳转到不同页面等。
05
网页制作实战技巧
总结词：网页布局详细描述：介绍常见的网页布局方式，包括静态布局、流式布局、响应式布局等，以及各自的特点和使用场景。总结词：HTML 语义化详细描述：讲解如何使用 HTML 语义化提高网页的可读性和可维护性，包括如何使用 header、footer、main、nav 等标签，以及如何使用 section 和 article 等标签组织内容。总结词：CSS 框架详细描述：介绍常见的 CSS 框架，包括 Bootstrap、Foundation、Bulma 等，以及各自的特点和使用场景。总结词：栅格系统详细描述：讲解如何使用栅格系统进行网页布局，包括如何定义栅格的列数、宽度、偏移量和顺序等，以及如何使用不同的栅格系统进行响应式布局。
《网页制作实训报告》PPT课件
</ul>
</div>
h
16
典型页面Css核心代码：
body {
background-repeat: no-repeat; background-color: #FFFFFF; padding: 0; margin: 0; } a{ outline: none; } p{ padding: 0; margin: 0; }
z-index: 10000; margin: -16px -16px; color: #fff; text-indent: -9999em; overflow: hidden; background: url(../Img/indeximg/ajax-loader.gif) no-repeat left top; width: 31px;
1代码验证html和css2兼容性测试3可用性测试系统效果预览图div我们用了大量的div基本每个网页都有div运用能使整个网页的布局得到很好的控制但这个div一定要用到该用的地方因为一点误差就会导致在预览的时候可能就会不协调不是之前设计的那样可能在编辑的时候你设计很好但预览的时候网页就崩溃了
智能手机操作与应用导引网站
• 第四小组 • 移设1213
h
1
网站项目概况：
• 为了以下目的安排这次实训： • 掌握网站开发从规划到构建、维护的方法； • 精通Dreanmweaver制作静态网页的方法，掌握一定的动态网页设计方法； • 具有HTML语言编程的能力和CSS+DIV的运用能力 • 对网站涉及的主要内容进行文字的提炼、压缩和再加工以适合用户快速扫读的要求； • 掌握按钮、图片等修饰、再加工的方法；（利用“美图秀秀”PHOTOSHOP等工具进
/></li> <li> <img class="cubeRandom" src="../Img/index-img/slider2.jpg"
</div>
h
16
典型页面Css核心代码：
body {
background-repeat: no-repeat; background-color: #FFFFFF; padding: 0; margin: 0; } a{ outline: none; } p{ padding: 0; margin: 0; }
z-index: 10000; margin: -16px -16px; color: #fff; text-indent: -9999em; overflow: hidden; background: url(../Img/indeximg/ajax-loader.gif) no-repeat left top; width: 31px;
1代码验证html和css2兼容性测试3可用性测试系统效果预览图div我们用了大量的div基本每个网页都有div运用能使整个网页的布局得到很好的控制但这个div一定要用到该用的地方因为一点误差就会导致在预览的时候可能就会不协调不是之前设计的那样可能在编辑的时候你设计很好但预览的时候网页就崩溃了
智能手机操作与应用导引网站
• 第四小组 • 移设1213
h
1
网站项目概况：
• 为了以下目的安排这次实训： • 掌握网站开发从规划到构建、维护的方法； • 精通Dreanmweaver制作静态网页的方法，掌握一定的动态网页设计方法； • 具有HTML语言编程的能力和CSS+DIV的运用能力 • 对网站涉及的主要内容进行文字的提炼、压缩和再加工以适合用户快速扫读的要求； • 掌握按钮、图片等修饰、再加工的方法；（利用“美图秀秀”PHOTOSHOP等工具进
/></li> <li> <img class="cubeRandom" src="../Img/index-img/slider2.jpg"
相关主题