当前位置：文档之家 › 任务三 创建网站目录结构

任务三 创建网站目录结构

  • 格式：doc
  • 大小：313.00 KB
  • 文档页数：5

— 学年第
学期
Dreamweaver CS6网页制作
教学设计方案

系 别：信息工程系
班 级：
姓 名：
指导教师：

课程目标：
掌握静态网站开发的工作流程与制作技巧，熟练掌握创
建站点、插入页面元素、CSS+DIV布局、表格布局、框架、
表单、超级链接、热区、行为等基本技能及基础知识，熟悉
HTML代码，逐步养成爱岗敬业、乐于学习，团队协作、互
相帮助，循序渐进、步步为营，爱护公物、清洁卫生等良好
的职业素养。
课程
名称
Dreamweaver网页制作

项目名称 创建个人网站

任务名称 创建网站目录结构
班级 人数 日期 周次 课次 节次 地点 计划学时
机房 2

本任务职业背景（基础课不填） 面向工种：网站建设与维护 岗位：网站建设与维护
技能：能够根据网站要求在本地站点创建网页文件和文件夹，管理站点
内文件。

教学
目标

知识点
1.了解站点目录结构。2.网页文件的命名规则。3.掌握网页结构与目录
结构的关系。4.了解页面属性、文件面板与插入栏的基本功能。

技能点
1.能够根据网站要求在本地站点创建网页文件和文件夹。
2.能够管理网站内的文件

职业素养
1.分组完成任务，锻炼协作能力；2.制定计划，按步操作，培养步步为
营循序渐进的良好习惯；3.按照指定机位就位，课前检查机器，课后设
备归位，清洁卫生，培养爱护公物的责任感与良好的工作秩序；4.培养
学生课前预习的学习习惯，主动学习、积极探索的优良作风

重 点 1. 在本地站点创建网页文件和文件夹。 2. 管理网站内的文件。
3. 网页文件的命名规则

难 点 熟悉文件面板，创建并管理网站目录结构

教学资源 信息资源：教材、教案、工作页、课件、微课 设备资源：投影、机房
人员资源：学生按5人一组；专业教师1位

教学方法
效果评价

教学方法：任务引领，微课学习、演示讲解、小组讨论

教学策略：举牌策略、画廊漫步
效果评价：小组自评、组间互评、教师点评
教学过程实施方案
教学 内容安排 学生活动 教师活动 时间
分配

任务描述
组织安排

1.分组就位、检查设备。每
组小组长检查本组成员的
出勤、设备及学习工具的携
带情况，报告教师。

1. 组织学生就位，记录考勤
3

2.认真思考并回答老师提
出的问题，明确本节课任
务，记录电子工作页。

2.任务导入：
（1）展示一个没有网站目录结构的站点，
让学生找文件及根据栏目找关联。
（2）展示一个规划良好目录结构的站点，
再次让学生找文件及根据栏目找关联。结
论：有良好的目录结构，创建与修改网站
时非常方便，可以提供工作效率。
（3）引出的任务：创建网站目录结构。

10

任务分析
与准备

1.组长组织本组成员分析任务，填写在工作页中。 1.演示网站样张,帮助学生归纳任务需求,
引领学生分析任务所需技能，填写工作页。
7

2.预习课程内容，回答教师
提问。

2.学生通过课前观看微课及预习教材“第
一单元任务四”中的知识点了解本节课所
需知识点。通过提问了解学生的理解程度：
问题1：什么是站点目录结构？（加2分）
问题2：在Dreamweaver中如何创建与管理
站点目录结构？

5

3.记录教师重点讲解的知
识点、技能点。记忆页面属
性、文件面板、插入栏的基
本功能

3.总结学生回答情况；
师生共同进行网站目录结构创建与管理基
本操作；
讲解任务所需知识点：页面属性、文件面
板、插入栏。

5

制定实施方案 1.听见、记录、提问； 2.讨论分析完成任务的步骤； 3.制定实施方案； 4. 各组选拔优秀工作页；安排讲解员，展示工作页；供大家相互参观、学习、交流； 5.理解教师对实施方案的分析，修改实施方案 1. 教师强调制定方案要点与填写工作页事项； 2.组织学生分组讨论完成任务所需步骤与关键点； 3.组织每人在工作页中制定实施方案； 4.组织好画廊漫步，交流问答；
5.归纳总结各组方案，确定实施方案，明
确实施方案须包含以下主要步骤：
（1）打开站点，新建首页文件。
（2）打开首页文件，观察文档窗口，设置
页面属性，熟悉插入栏功能。
（3）完善网站目录结构，编辑站内文件。

15

任务实施步骤1 1.根据实施方案，分析网站结构 1.通过投影演示讲解网页名称的命名规
则。
10
新建首页文件 2.打开“幽幽我心的个人网站”站点，新建首页文件。 2.通过巡视了解学生完成情况，对有问题
的学生进行指导，注意首页命名规则。

任务实施
步骤2
打开首页文件，设置页面属性 打开首页文件，观察文档窗
口，设置页面属性。

1.通过投影演示讲解页面属性的设置。
2.通过巡视了解学生完成情况，对有问题
的学生进行指导。

10

任务实施
步骤3 了解插入栏的基本功能 切换插入栏“菜单”和“制
表符”两种显示样式。认识并记忆插入栏的基本功能 问答插入栏基本功能
5

任务实施 步骤4 完善网站目录结构 完善网站目录结构，创建网站所需文件夹。 1.通过巡视了解学生完成情况，对有问题
的学生进行指导。
2.检查学生的完成情况，并对快速完成的
同学予以鼓励

10

总结评价
1.组长组织本组成员进行
组内互评，记录各成员成
绩。
2.各小组最佳作品进行展
示，各组长给出小组互评成
绩。
3.将成绩记录完毕后，上交
工作页

1.教师巡视、检查、指导；
2.组织进行组间互评，教师总结点评验收
各组的作品；
3.收取电子工作页，点评上次工作页。

10
任务拓展 分组完成拓展任务“创建网页制作站点目录”： 1．明确任务，了解任务要求。 2.明确任务制作流程并实
施。
3.完成拓展任务并向其他
小组成员展示结果（画廊漫
步）。

布置拓展任务以检验学生掌握情况：
1.布置任务:依据前面学习的知识与
掌握的专业技能，新建一个站点，网站命
名为“网页制作”，存放在
“D:\dreamweaver”文件夹中，使用“文
件”面板新建首页文件“index.html”和
首页图像文件夹“images”，在“我的电脑”
中查看相应目录的变化。
2.任务分析：回忆任务二创建站点的步
骤，哪个菜单项用于创建站点，在创建站
点时各个选项如何设置？
站点建好后，打开什么面板创建站点目
录和网页，如何把网页设为首页?
3.总结学生任务完成情况，总结在站点
中添加文件、添加文件夹。总结文件面板
中网站目录结构与我的电脑中的目录之间
的关系。

10

课后作业
1.完成课后举一反三；
2.完成工作页中作业（其中预习是下次课提问内容）

教学后记
教师要认真检查学生的电子工作页，并合理给出评价。建立过程考核电子表，每
次上课公布上次课工作页完成情况。
教研组长
签字
系主任签字

合集下载

电子商务网站建设与维护课件：项目二 建设简单促销专题网站

电子商务网站建设与维护课件：项目二 建设简单促销专题网站


3. 含HTML 代码的滚动字幕内容 ① 准备四张图片，名字改为 “1.jpg”“2.jpg”“3.jpg”“4.jpg”。 ② 书写代码: <marquee scrollamount="2" height="17" width="643“><img src="1.jpg”><img src="2.jpg”><img src="3.jpg"><img src="4.jpg"></marquee>
L/O/G/O
项目2
建设简单促销专题网站
学习目标
1. 熟悉网站建设的一般流程，学会有效沟通，通过 讨论等方法了解用户的需求。 2. 能够从用户需求出发整理材料，对部分素材进行 合理处理。 3. 能够选择合适的网页编辑工具，根据用户需求和 素材情况完成网站框架设计。 4. 能够运用网页编辑工具完成多种形式内容元素的 编辑，并能按照页面的逻辑关系将网页合理组织起来。 5. 能够使用FTP 工具管理网站文件，能够借助服务 器平台有效发布网站，并能保障网站正常运行。
知识链接
一、网页布局的基本类型
1.“厂”字形
2.“国”字形
3.“三”字形
4.“川”字形
5. Flash 布局
任务实施
step 1 确定版面布局方式
“三”字型
step 2 版面设计
1. 网页顶部设计
(1)新建文档，设置画布 启动Fiveworks 软件，选择“文件 ”→“新建”选项。
（2 ）制作顶部logo 和banner
4 . 图片链接设置之后的效果(图片周围 会出现蓝色的边框)。
如何利用分类目录结构优化网站用户体验

如何利用分类目录结构优化网站用户体验

如何利用分类目录结构优化网站用户体验为了提供更好的浏览用户体验，将网站的内容划分组织分类目录结构是非常关键的。

这样做可以让用户更容易找到所需内容，提高网站的可用性和用户满意度。

本文将介绍如何利用分类目录结构优化网站用户体验。

一、分类目录结构的定义分类目录结构是一种从根节点开始分层次的方式，将网站的内容分为不同的类别，确保用户能够快速、准确地找到他们需要的信息。

分类目录通常在网站首页的顶部或侧边栏中展示，以展示网站的主要内容和目录结构。

二、为什么需要分类目录结构？分类目录结构非常重要，主要有以下几个原因：1、提高用户体验：分类目录提供了一个方便的导航，使用户能够更快地浏览网站并找到他们需要的信息。

目录结构的实现可以使用户快速地定位所要找的内容，提高了用户体验。

2、提高搜索引擎可访问性:构建合理的目录结构对于搜索引擎爬行程序来说非常重要，因为搜索引擎可以通过这种方式更好地了解网站的内容和结构，从而更快的索引和排名网站的内容。

3、给网站提供有序性和逻辑性：分类目录可以给网站提供有序性和逻辑性，这可以让网站更加易于阅读和浏览。

此外，目录可以帮助网站管理员确保网站的内容全部被整理到相应的类别当中，避免了内容混乱的情况出现。

三、如何构建分类目录结构1、明确定义分类在构建分类目录结构之前，需要明确网站的主题和目标用户，然后为这个主要的主题来确定不同的分类。

每个分类需要仔细的考虑，确定其准确性和相对性。

例如，在一个电商网站中，可以将商品分为不同的分类，如服装、鞋子、包包等。

2、整体把握分类目录结构分类目录应该保持简洁、可读性强，并不断进行优化，确保它对用户友好。

应该尽量避免过于复杂的层次结构。

例如，在一个新闻网站中，可以将新闻分类为不同的板块，如国际、国内、财经、娱乐等。

每个板块下面的子类别不要太多，以免网站变得混乱。

3、考虑搜索引擎优化分类目录结构应该考虑搜索引擎优化（SEO）。

这意味着应该尽可能用简短的、描述性的词语来命名各种分类和子分类。

网站的建立 站点的建立

网站的建立 站点的建立


图2-18 创建站点向导之一：填写网 站名称
图2-19创建站点向导之一：确定是 否使用服务器技术
图2-20 创建站点向导之三：设置编 辑方式
图2-21创建站点向导之四：设置如何 连接远程服务器
图2-22创建站点向导之五：完成设置，显 示设置信息
图2-23 新创建的站点

建立站点后，Dreamweaver CS4可以对站点及 站点文件进行管理。管理站点是对已经建立的本地 站点或远程站点进行管理，在Dreamweaver CS4 中，管理站点可以通过“管理站点”对话框进行管 理，在“管理站点”对话框中，可以创建新站点、 编辑站点、复制站点、删除站点以及导入或导出站 点。

3
1.2.1网页设计的基本原则 （1）用户至上原则 （2）易用性原则

网页中的导航应放置明显、结构清晰、操作简单。网站 的链接结构合理，方便浏览者在不同网页之间跳转快捷、 方便。
（3）实用性原则
4
1.网页页面大小 标准显示器的屏幕分辨率为1024*768，则不同版 本的IE浏览器的屏幕大小为：

9
10

一般为广告横幅图片、或者使用JavaScript或Flash 技术制作的动画，用于吸引用户观看
11
12

网页的主体
◦ ◦ ◦ ◦ 文本 图像 动画 超链接
13

版权信息版块
◦ 制作单位、制作人、时间等
14


网站设计不是把所有内容放置到网页中就行了，还 需要我们把网页内容进行合理的排版布局，以给浏 览者赏心悦目的感觉，增强网站的吸引力。在设计 布局的时候要注意把文字、图片在网页空间上均匀 分布并且不同形状、色彩的网页元素要相互对比， 以形成鲜明的视觉效果。 常见的布局结构有 “同”字形布局、“国”字形布 局、“匡”字形布局、“三”字形布局和“川”字 形布局、上下框架型、封面型
Web应用的目录结构

Web应用的目录结构

文eb应 用 的 目 录 结 构
什么是web应用的组成结构？简单的说就是如何存放网站中的各个文件。 开发web应用时，不同类型的文件有严格的存放规则， 文件放错位置时可能会使web应用无法访问，也可能导致web服务器启动报错。 web应用组织形式: 1)给web应用建个根文件夹，如MyWeb,则应该将xxx.html,xxx.jsp,xxx.css,xxx.js等放到MyWeb里面
2)在MyWeb下建个文件夹WEB-INF //注意文件名一定是WEB-INF,一个字都不能错 将web.xml文件放到WEB-INF里面 //web.xml为web应用的配置文件
3)在WEN-INF下建个文件夹classes //classes文件夹用于存放web应用中用到的java类
4)在WEB-INF下建个文件夹lib //lib文件夹用于存放类运行所需的jar文件