工作任务3-建立网站站点-2学时

AI生成AI生成网页设计与制作教案授课教师授课班级授课日期课题建立网站站点计划学时2教学目标知识目标1.掌握网站站点的概念及作用。2.掌握建立网站站点的流程。3.掌握网站站点目录结构的设计。能力目标1.能够合理设计网站站点的目录结构。2.能够建立不同主题的网站站点。素质目标1.培养分析问题、解决问题的能力。2.培养爱岗敬业的工作态度。教学重点1.网站站点的概念及作用、建立网站站点的流程。2.网站站点目录结构的设计原则（按功能建立子目录、目录层次不超过3层等）。3.DreamweaverCC2019的工作界面及网页编辑基本操作（创建、保存网页文件，插入图像、表格等）。教学难点1.DreamweaverCC2019的功能与特色的理解与应用。2.在DreamweaverCC2019中完成博客网站站点和校园网站站点的搭建流程。教学模式及教学方法讲授法、案例分析法、小组讨论法、实操演示法教学活动及主要环节素质培养【课前导学】预习教材"3.1网站站点基础知识"，了解网站站点的概念、作用及建立流程。预习教材"3.2建立博客网站站点"和"3.3建立校园网站站点"，了解两种不同类型网站站点的搭建过程。培养分析问题、解决问题的能力。【课中践学】【情景导入】（约10分钟）1.教师提出问题：在开发网站时，如何对网站文件进行有效管理与维护？引导学生思考建立网站站点的重要性。2.介绍网站站点是指一个在互联网上提供信息或服务的逻辑单元，通常由多个网页组成，可以通过域名或地址进行访问。3.强调建立网站站点可以提高网站建设效率，便于管理与维护网站。培养爱岗敬业的工作态度。【项目实施】（约70分钟）（一）3.1网站站点基础知识（约40分钟）3.1.1网站站点的概念及作用1.网站站点的概念网站站点是指一个在互联网上提供信息或服务的逻辑单元，通常由多个网页组成，可以通过域名或地址进行访问。站点是存储网站所有文件的地方，包括HTML、CSS、JavaScript等文件。建立网站站点有两层含义：一是建立网站/站点，通常指建立一个网站根文件夹；二是发布网站/站点，可使用发布软件（如IIS、tomcat、apache等）直接发布，也可上传至Web服务器。2.网站站点的作用（1）在线展示和宣传。（2）联系与互动。（3）促进销售。（4）提供信息和资源。（5）社交媒体整合。（6）知识分享。（7）数据收集和分析。3.1.2建立网站站点站点结构是指网站内部组织和页面之间的关系，它决定了网站的层次结构和页面之间的导航路径。站点结构与命名规则之间有密切的关系。1.页面和文件的命名规则每个页面和文件的名称都应该反映其内容或功能，以便用户和网站管理员轻松地找到所需信息。2.目录结构网站的目录结构应该与站点结构相对应。建立目录结构时应遵循以下原则：（1）不要将所有文件都存放在根目录下：会导致文件管理混乱、上传速度慢。（2）按功能建立子目录：如files、images、css以及other等。（3）为每个主目录建立独立的images目录：根目录下的images目录用来存放首页和一些次要栏目的图片。（4）目录的层次不要太多：最好不超过3层，以便进行维护管理。培养分析问题、解决问题的能力。3.1.3DreamweaverCC2019介绍在Dreamweaver中可以轻松创建HTML文件。Dreamweaver能够自动检查HTML文档中的语法错误并协助用户进行改正。1.DreamweaverCC2019的功能（1）快速、灵活编程：内置智能编程引擎，可访问代码提示。（2）通过更少的步骤轻松设置网站：利用起始模板更快启动并运行网站。（3）在各个设备上动态显示：构建能自动调整以适应任何屏幕尺寸的响应式网站。（4）适用于Windows的多显示器支持。（5）CEF集成：与CEF最新版本集成，用于构建新式HTML5网站。（6）经过重新设计的新UI：精简且洁净的界面。（7）Git支持：可在Dreamweaver中管理源代码。2.DreamweaverCC2019的特色（1）所见即所得。（2）强大的文本编辑功能。（3）专业的HTML编辑。（4）高质量的HTML生成方式。（5）实时的HTML控制。（6）与其他文本编辑器协调工作。（7）强大的动态HTML支持。（8）基于目标浏览器的检测。（9）提供FTP工具。（10）文件锁定。3.DreamweaverCC2019工作界面工作界面主要由标题栏、菜单栏、插入栏、文档工具栏、面板组等组成（图3-1）。（1）标题栏：显示当前软件名称及正在编辑的文件名称。（2）菜单栏：包括"文件""编辑""查看""插入""工具""查找""站点""窗口""帮助"菜单。（3）插入栏：包含用于创建和插入对象的按钮。（4）文档工具栏：包含视图切换等常用工具。（5）文档窗口：显示当前正在编辑的文档内容，提供设计视图、代码视图和拆分视图。（6）标签选择器：显示当前插入点位置的HTML源代码标记。（7）"属性"面板：显示文档窗口中所选中元素的属性，允许用户直接修改。（8）面板组：浮动面板被组织到面板组中，可展开或折叠。培养爱岗敬业的工作态度。4.网页编辑基本操作（1）创建网页文件：选择"文件"→"新建"命令，设置文档类型为HTML。（2）保存网页文件：选择"文件"→"保存"命令。（3）关闭网页文件：选择"文件"→"关闭"命令。（4）使用浏览器查看网页效果：选择"文件"→"在浏览器中预览"命令，或按F12键。5.文本的应用（1）输入文本内容：可直接插入文本，也可从其他文档复制或选择"文件"→"导入"命令导入。文本格式主要包括字体、颜色、文本大小等。设置文本格式时需先将字体添加到Dreamweaver的字体列表中（图3-2、图3-3）。6.网页中的图像（1）常用的图像格式：GIF格式（无损压缩，最多256种颜色，支持透明和动态图像）和JPEG格式（可使用数百万种颜色，适合高品质图像）。（2）插入图像：单击常用工具栏中的"Image"按钮或选择"插入"→"Image"命令，在"选择图像源文件"对话框中找到图像文件（图3-4）。（3）编辑图像：在图像的"属性"面板中可设置Src、链接、宽和高、地图、原始等属性。（4）切割图片：将大尺寸图片切割成小图片，需先指定外部编辑器（如Photoshop），再使用切片工具切割。（5）设置网页背景图像：在"页面属性"窗口中选择"外观（CSS）"选项设置背景图像。（6）鼠标经过图像：选择"插入"→"HTML"→"鼠标经过图像"命令，需要两个图像文件（原始图像和鼠标经过图像）。7.插入多媒体对象可插入Flash影片、QuickTime或Shockwave影片、JavaApplets、ActiveX控件等，选择"插入"→"HTML"命令选择多媒体对象类型（图3-5）。8.用表格规划网页常见的网页布局：（1）T型结构布局：页面顶部为横幅网站标志+广告条，下方左侧为主菜单，右侧显示内容。（2）"口"型布局：上下各有一个广告条，左侧主菜单，右侧友情链接，中间显示主要内容。（3）对称对比布局：左右或上下对称，一半深色一半浅色。（4）POP布局：使用精美图片作为页面设计中心。9.插入表格选择"插入"→"Table"命令，在"Table"对话框中设置表格大小（行数、列数、表格宽度、边框粗细、单元格边距、单元格间距）、标题和辅助功能（图3-6、图3-7）。10.合并单元格选中相邻单元格，选择"编辑"→"表格"→"合并单元格"命令，或在"属性"面板中单击"合并所选单元格"按钮（图3-8）。11.拆分单元格选择单元格，选择"编辑"→"表格"→"拆分单元格"命令，或在"属性"面板中单击"拆分单元格"按钮，在弹出的对话框中设置拆分方式（图3-9、图3-10）。培养分析问题、解决问题的能力。（二）3.2建立博客网站站点（约15分钟）建立站点是网站项目开发过程中非常重要的一步。本节介绍如何在DreamweaverCC2019中完成博客网站站点的建立。3.2.1博客网站目录结构设计在D盘新建文件夹"MyBlog"作为本地站点文件夹，并在其中创建4个子文件夹："files"（存放子页面）、"images"（存放图片素材）、"css"（存放样式表文件）、"other"（存放Flash动画、视频、音频等素材）。3.2.2博客网站站点搭建具体操作步骤如下：1.打开DreamweaverCC2019（图3-11）。2.选择"站点"→"新建站点"命令，打开"站点设置对象"对话框（图3-12、图3-13）。3.设置"站点名称"为"MyBlog"，"本地站点文件夹"为"D:\MyBlog\"（图3-14）。4.选择"服务器"选项，单击"+"按钮添加新服务器（图3-15）。5.设置"服务器名称"为"MyBlog"，"连接方式"为"本地/网络"，服务器文件夹为"D:\MyBlog"，"WebURL"为"http://localhost/MyBlog/"（图3-16）。6.选择"高级设置"→"本地信息"，设置"默认图像文件夹"为"D:\MyBlog\images"，"链接相对于"为"文档"（图3-17）。7.单击"保存"按钮保存站点所有设置。培养爱岗敬业的工作态度。（三）3.3建立校园网站站点（约15分钟）本节将在Dreamweaver中完成校园网站站点的建立。3.3.1校园网站目录结构设计在D盘新建文件夹"MySchool"作为本地站点文件夹，并在其中创建4个子文件夹："files"（存放子页面）、"images"（存放图片素材）、"css"（存放样式表文件）、"other"（存放FLASH动画、视频、音频等素材）。3.3.2校园网站站点搭建具体操作步骤如下：1.打开DreamweaverCC2019。2.选择"站点"→"新建站点"命令，打开"站点设置对象"对话框（图3-18、图3-19）。3.设置"站点名称"为"MySchool"，"本地站点文件夹"为"D:\MySchool"（图3-20）。4.选择"服务器"选项，单击"+"按钮添加新服务器（图3-21）。5.设置"服务器名称"为"MySchool"，"连接方式"为"本地/网络"，服务器文件夹为"D:\MySchool"，"WebURL"为"http://localhost/MySchool/"（图3-22）。6.选择"高级设置"→"本地信息"，设置"默认图像文件夹"为"D:\MySchool\images"，"链接相对于"为"文档"（图3-23）。7.单击"保存"按钮保存站点所有设置。【任务总结】本任务介绍了网站站点的概念及作用、建立网站站点的流程、网站站点目录结构的设计，以及DreamweaverCC2019的功能、特色、工作界面及相应的基本操作。通过本任务的学习，应能够设计网站站点目录结构，熟练使用DreamweaverCC2019完成不同主题的网站站点的搭建。培养分析问题、解决问题的能力。【课后拓学】3.4拓展实训1.建立个人博客网站站点：在2.4拓展实训的基础上设计个人博客网站的目录结构，并完成个人博客网站站点的建立。要求站点名称设置为"myBlog"，本地站点文