站点文件夹.PPTVIP

教学设计 教学目标： 了解网页三剑客软件安装 认识DW工作界面及基本操作 掌握站点设置（重点） 掌握站点文件夹结构设置（重点） 教法：教、学、做一体 课时：1节课 工作界面 站点设置 站点就是一系列文件的集合。本地站点即是在本机硬盘里，建立存放网站各类文件的站点文件夹。然后制作好网站后，再上传到远程服务器（远程站点）上。 站点设置 [站点]菜单/[新建站点]。 因为是初学，先进行简单设置，之后在学习过程中，可以再根据情况修改设置。 主要设置要点，如图所示： 站点文件夹 子文件夹结构合理、有序。 注意：文件夹、子文件夹、网页文件、素材文件均不用中文命名。 给各栏目分别建立对应子文件夹；各类素材分别建立子文件夹分类管理。 建立层次型结构 从上到下一级一级地确定每一层的栏目。首先是确定第一层，即网站所必需的栏目，确定它们所必需的子栏目，以此类推直至不需要再细分为止。将所有的栏目及其子栏目连在一起就形成了网站的层次型结构。 不建议将所有的网页文件和资源文件都放在同一个文件夹下 不要将所有的文件都放在根目录下 教学设计 教学目标： 掌握DW基本操作 掌握新建网页和文件夹 掌握简单网页设计，主要文本和图片元素插入（重点） 掌握链接设置（重点） 教法：教、学、做一体 课时：3节课 新建文档 首页文件基本名一般为index或default，后缀为.htm或.html 切记：一定要先设置站点，再新建文档，然后开始网页设计。否则，网站内各类文件的链接关系可能紊乱。 设计简单文档 根据案例及提供的素材，设计简单文档 注意DW设计、拆分、代码模式功能 注意[属性]面板的应用 设置文档属性，包括文档标题 文本元素 在网页的适当位置中输入文字内容 设置文字内容的属性 在适当位置插入水平线 在网页底部输入版权信息 插入版权符号 编辑页面底部网站信息 标题标记 hn n取值：1~6，字号随n的变大而减小 “双标记” 文字显示为加粗了的文字并且前后空一行 对齐方式align取值为“left、right、center” 字体标记font/font 图片元素 图片文件的有序存放于图片文件夹 插入图片 观察插入图片后生成的路径代码，分析页面与图片相对路径关系。 设置图片属性 分析：img src=“images/lqm.jpg” alt=“公司照片 width=163 height=206 align=right 超链接 超链接：网页中有文本或图片，通过鼠标点击，就可以跳转到指定的目标资源，这样的链接陈为超链接，这样文本、图片称为热点。 格式：a href=被链接文件的URL target=目标窗口链接提示/a 目标窗口有： _blank：新窗口，默认或省略。 _parent：父窗口 _self：同一窗口 _top：不带框架的窗口 超链接 网页制作流程 新建网页 设置网页标题等网页属性 输入文字或通过单击“插入栏”中的按钮插入各种对象 在[属性]面板中设置对象的属性 保存网页 按F12预览网页 教学设计 教学目标： 掌握表格页面布局（重点） 了解层的作用 教法：教、学、做一体 课时：8节课 常见页面布局 “同”字型：上面是网站标志、广告、导航；中面是主要内容，左右各有一些栏目；下面是网站基本信息及版权信息。大中型网站常见的布局。优点是充分利用版面，信息量大；缺点是页面拥挤，不够灵活。 “厂”字型：页面顶部为标志和广告条，下面一边为主菜单，主要部分显示正文信息。这是一种较广泛采用的布局方式。优点是页面结构清晰，主次分明；缺点是规矩呆板。 “框架”型：一般为上下或左右布局，一栏是导航栏，一栏是正文信息。也有将页面分为三栏的，上边一栏放图片广告，左侧栏放导航栏，右侧为正文信息。 “封面”型：一般应用在网站主页或广告宣传面上，多为精美的图片配上简单的文字链接。 “Flash”型：与“封面”型布局结构相似，不同是的采用了Flash技术，动感十足，大大增强了页面的视觉效果。 表格 插入表格 设置表格属性 布局表格 通过表格布局 宽幅1000像素，窄幅760像素 单元格为容器，有序放置文本、图片等元素。 布局表格属性设置如下： 层 层也是一种布局方式。 文本、图像、表格等元素只能固定其位置，不能互相叠加在一起，而层可以放置在网页内的任何一个位置。层可以包含文本、图像或其它 HTML 文档。 每一层都是独立的，组合搭配在一起，能起到很好的布局效果。 [菜单栏][插入][布局对象][层]命令，即可将层插入到页面中。 代码实例：div id=Layer1 style=position:absolute; visibility:inherit; width:200px; height:115px; z-index:1 /div 可以设置页面上的层