网页设计与制作项目教程（html+css+bootstrap）教学课件作者徐云晴讲义项目一教案3.doc

  网页设计与制作项目教程（html+css+bootstrap）教学课件作者徐云晴讲义项目一教案3.doc

  课题序号 3 教学班级 教学课时 2 教学形式 新授 课 题 名 称 项目一 创建你的第一个网站 任务二 站点的建立与管理 使用教具 机房、传统教具、投影仪 教学目的 通过任务操作，了解网站站点目录的常规设置，掌握创建站点和制作主页的方法，掌握管理站点的方法。 教学重点 掌握创建站点和制作主页的方法，掌握管理站点的方法。 教学难点 掌握创建站点和制作主页的方法，掌握管理站点的方法。 更新、补充、 删节内容 课前准备 教案、课件、作业 课外作业 合理规划网站结构目录，并通过你自己的设想新创建一个“个人网站”的站点。 步骤提示： （1）确定站点目录结构 （2）建立站点 （3）管理站点 （4）创建第一个网页 板 书 设 计 教 学 感 想 课堂教学安排 教学环节 主 要 教 学 内 容 教学手段与方式 导入 详细讲解 操作实训 任务拓展 作业 上堂课，我们学习了网页的基本知识，认识了Dreamweaver CC这款软件，并且学会了制作一张简单的网页。那么如何自己动手制作一个网站呢？今天，我们学习怎么样利用来建立与管理网站站点。 一、知识准备 1．站点的定义 站点的创建是制作网站的首要工作，是理清网络结构脉络的重要工作之一。 Dreamweaver中的站点是指属于某个web站点的文档的本地或远程存储位置。运用Dreamweaver站点可以组织和管理所有的web文档，并将本地站点上传到web服务器，用以跟踪和维护站点链接以及管理和共享文件。 Dreamweaver 中的本地站点则为一个本地文件夹，若要向web服务器传输文件或者开发web应用程序，则必须添加远程站点和测试服务器信息。因此，Dreamweaver站点由本地根文件夹、远程文件夹、测试服务器文件夹三部分所组成。 （1）本地根文件夹：又称为本地站点，主要是用于存储正在处理的文件，通常位于本地计算机上，但也可以位于网络服务器上。 （2）远程文件夹：又成为远程站点，主要存储用于测试、生产和协作等用途的文件，具体是哪些文件取决于开发环境。通常位于运行web服务器的计算机上，包含用户从Internet中访问的文件。通过远程文件夹和本地文件夹，用户都能够实现本地和web服务器之间的文件传输功能。 （3）测试服务器文件：是Dreamweaver用来处理动态网页的文件夹。Dreamweaver用此文件夹生成动态内容并在工作时连接到数据库，主要在对动态页面来测试时使用。 2．站点的规划 规划站点结构是指利用不一样的文件夹，将不同的网页内容分门别类地保存，它是设计站点的必要前提。合理地组织站点结构，可加快对站点的设计，提升工作效率，节省上班时间。 在规划站点时，要遵循一些规则。 （1）文档分类保存 （2）文件夹合理命名 （3）本地站点和远程站点结构统一 3．站点目录结构的规范 站点目录建立的根本原则：以最小的层次提供最清晰简便的访问结构。具体必须要格外注意以下一些原则： （1）站点根目录一般只存放index.html以及系统文件，不要将所有网页都存放在根目录下。 （2）每个一级栏目开设一个独立的目录下，也可建立files文件夹放置除主页index.html以外的分页文件。 （3）根目录下的images文件夹用于存放各页面的公用图片，子目录下的images文件夹存放本栏目页面中使用的私有图片。 （4）所有css文件存放在根目录下的style目录中。 （5）多媒体文件存放在根目录下的others或media目录中 （6）目录层次不要太深，建议还是不要超过3层。 （7）不可以使用过长的目录名。 二、确定网站站点目录 1．在D盘根目录下，新建文件夹“myweb”，作为网站的站点文件夹。 2．在站点文件夹myweb下，新建文件夹files，用于存放网站中的分页，新建文件夹images，用于存放网站中所用到的图像文件，新建文件夹others，用于存放音频视频等多媒体文件，新建文件夹style，页中所用到的css文件。 3．将素材文件夹中的图片“green.jpg”复制到images文件夹中，为制作第一张网页做好充足的准备， 三、创建我的第一个网站 1．双击打开Dreamweaver CC，执行“站点”菜单中的“新建站点”命令，弹出“站点设置对象 未命名站点”对话框。单击“站点”选项卡，在“站点名称”文本框中输入站点名称“myweb”，单击“本地站点文件夹”选项右侧的“浏览文件夹”按钮，选择站点文件夹myweb位置，单击“选择文件夹”按钮，确定站点目录。 2．单击“高级设置”选项卡，选择“本地信息”，在右侧展开的列表中设置“默认图像文件夹”，右侧的“浏览文件夹”按钮，选择站点文件夹mysite/images位置，单击“选择文件夹”按钮，确定站点图像文件夹目录。 3．单击“保存”按钮，完成站点的创建， 4．通过“文件”菜单，新建html网页，新建的网页默认名为untitled-1.html，保存网页，将其存放在myweb站点文件夹的根目录下，保存名为“index.html”。或者通过文件面板，在站点文件夹myweb上单击右键，选择“新建文件”，则在站点文件夹根目录下新建一个网页文件，将文件重命名为“index.html”。 5．在Dreamweaver CC中双击打开index.html，进入到编辑状态，切换到设计视图，在属性面板中的“标题文本框”内输入网页标题“我的绿色世界”，可切换至拆分视图，观察代码窗口中的变化。 6．在设计视图的空白的编辑区中，输入文字“我的绿色世界”，可观察代码窗口中的变化。 7．在文字“我的绿色世界”后按enter键进行换行，观察代码窗口的变化， 8．单击“插入”菜单中的“图像”，选择站点文件夹中images文件夹中的“timg.jpg”，插入图像，如图所示。或者打开Dreamweaver cc右下脚文件面板，展开images文件夹，通过鼠标拖拽的方式将图片“timg.jpg”拖放至网页的编辑区，也可实现图片插入的效果。 9．通过“文件”菜单，“保存”网页，或者ctrl+s保存当前网页，预览效果。 四、管理站点 Dreamweaver内置了站点的管理功能，能够最终靠编辑站点、复制站点、删除站点、导入和导出站点等设置，如图1.2.14所示。 打开“站点”中的“管理站点”命令，在弹出的“管理站点”对话框中，选中“myweb”，单击“编辑当前选定的站点”按钮，或者在“myweb”站点上双击，也可打开编辑站点对话框，修改站点名称为“myweb-greenworld”，单击保存。 操作步骤同上，单击“复制站点”按钮，复制“myweb”站点，创建了站点的副本，双击复制的站点，修改站点名称为“我的绿色世界” 3．如需删除站点myweb1，则选中myweb1站点，单击“删除站点”按钮即可。 想一想：“管理站点”命令还可以在哪里做相关操作？ 拓展 合理规划网站结构目录，并通过你自己的设想新创建一个“个人网站”的站点。 步骤提示： （1）确定站点目录结构 （2）建立站点 （3）管理站点 （4）创建第一个网页 课堂讨论与总结： 1、掌握软件Dreamweaver CC的基本操作和设置。 2、掌握如何运用Dreamweaver CC来建立和管理站点。 作业： 完成课后练习和实验报告 讲解相关概念 教师演示 教师演示 学生练习 学生自主完成

  2、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。

  3、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。

  4、VIP文档为合作方或网友上传，每下载1次， 网站将按照每个用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档

  2023年福建南平市顺昌县事业单位招聘紧缺急需专业技术人员29人高频考点历年难、易点深度预测（共500题含答案解析）模拟试卷.docx

  2023年福建省妇幼保健院招聘工作人员高频考点历年难、易点深度预测（共500题含答案解析）模拟试卷.docx

  2023年上半年浙江温州苍南县事业单位选调工作人员5人高频考点历年难、易点深度预测（共500题含答案解析）模拟试卷.docx

  Novation诺维逊 Bass Station II 中文说明书.pdf

  原创力文档创建于2008年，本站为文档C2C交易模式，即用户上传的文档直接分享给其他用户（可下载、阅读），本站只是中间服务平台，本站所有文档下载所得的收益归上传人所有。原创力文档是网络服务平台方，若您的权利被侵害，请发链接和相关诉求至 电线) ，上传者