网页设计与制作课件第2章

案例说明Dreamweaver是一款集网页制作和网站管理于一身，所见即所得的网页编辑软件。DreamweaverCC2017是其最新版本，本书就以该软件为例介绍网页设计与制作的相关知识（为便于讲解，后面统一称为DreamweaverCC）。本案例首先启动该软件，然后熟悉其工作界面上的各组成元素，最后在案例实施中调整DreamweaverCC的工作界面，以达到进一步熟悉DreamweaverCC工作界面的目的。案例一调整DreamweaverCC2017工作界面——初识DreamweaverCC2017相关知识安装DreamweaverCC后，单击桌面左下角的“开始”按钮，选择“所有程序”>“AdobeDreamweaverCC2017”，就可以启动DreamweaverCC了，如图所示。一、启动DreamweaverCC三、网页的本质首次启动DreamweaverCC，会让用户选择是新手还是老手，此处选择老手；接着会让用户选择工作区，此处选择“标准工作区”，如左图所示；最后还要选择主题颜色，此处选择灰色，如右图所示。二、认识DreamweaverCC工作界面启动DreamweaverCC后，进入其工作界面，按【Ctrl+N】组合键，在打开的文档中单击“创建”按钮，新建一个文档，如图所示。三、网页的本质应用程序栏位于工作区顶部，左侧显示菜单栏，右侧包含工作区切换器（可在其下拉列表中选择不同的工作区模式）和程序窗口控制按钮。1．应用程序栏工具栏中放置了一些常用按钮，如打开文档、文件管理等。它会随着当前窗口的变化而显示不同的内容。另外，单击最下面的省略号可以打开“自定义工具栏”对话框，可以在该对话框中设置工具栏中要显示的按钮，如图所示。2．工具栏三、网页的本质文档标签栏左侧显示当前打开的所有网页文档的标签（标签上显示相应网页文档的名称）及其关闭按钮；右侧显示当前文档在本地磁盘中的保存路径以及向下还原按钮；文档标签下方显示当前文档中包含的文档以及链接的文档。当用户打开多个网页时，通过单击文档标签可在各网页之间切换。另外，单击下方的包含文档或链接文档，同样可打开相应文档，如图所示。3．文档标签栏三、网页的本质文档工具栏位于文档标签栏上方，包括代码、拆分、设计等按钮。4．文档工具栏代码：在文档窗口中显示代码视图。代码视图是一个用于编写HTML、CSS、JavaScript、服务器语言（如PHP或ColdFusion标记语言（CFML））以及其他任何类型代码的手工编码环境，如右图所示。在代码视图中以不同颜色显示不同类型的代码。此外，利用左侧工具栏中的按钮可以对代码进行相应的操作，如折叠、展开代码，选择标签，检查代码，缩进代码等。三、网页的本质拆分：在文档窗口中同时显示代码视图和设计视图。这样当用户在代码视图中编辑网页源代码后，单击设计视图中的任意位置，会立刻在设计视图中看到相应的编辑结果。设计：在文档窗口中显示设计视图。在设计视图中看到的网页效果类似于在浏览器中看到的效果，用户可在该视图中直接编辑网页中的各个对象。实时视图：单击“设计”按钮右侧的小三角，在其下拉列表中有实时视图，其与设计视图类似，但能更逼真地显示文档在浏览器中的效果，还可以像在浏览器中一样与文档进行交互。三、网页的本质5．状态栏状态栏位于文档窗口底部，它提供了与当前文档相关的一些信息，如下图所示。其中，标签选择器的作用很大，它显示了当前光标所在位置或当前选定内容的标签层次结构（HTML网页文档就是由一个个标签组成的），单击某个标签可以选中网页中该标签所代表的内容，如单击<table>标签，可选中网页中与之对应的表格。三、网页的本质6．“插入”面板“插入”面板包含用于创建和插入对象（如表格、图像和链接）的按钮，这些按钮按几个类别进行组织，默认显示“HTML”类别，如图（a）所示；也可以单击其右侧的下拉三角按钮，在弹出的列表中选择其他类别，如图（b）所示。例如，要在页面中插入图像，可先定位插入点，然后单击“插入”面板“HTML”类别中的“Image”按钮。（a）（b）三、网页的本质7．“文件”面板使用“文件”面板可查看和管理站点中的所有文件和文件夹，包括素材文件和网页文件，如下图所示。三、网页的本质8．“CSS设计器”面板使用“CSS设计器”面板可以“可视化”地创建CSS样式和规则，并设置属性和媒体查询，如下图所示。源：列出与文档相关的所有CSS样式表。单击窗格右上方的按钮，可以创建新的CCS文件或将已有的CSS文件附加到文档，也可以在页面中定义样式。@媒体：显示在“源”窗格中所选源中的全部媒体查询。如果不选择特定CSS，则此窗格将显示与文档关联的所有媒体查询。选择器：显示在“源”窗格中所选源中的全部选择器。如果同时还选择了一个媒体查询，则此窗格会为该媒体查询缩小选择器列表范围。如果没有选择CSS或媒体查询，则此窗格将显示文档中的所有选择器。属性：显示为指定的选择器设置的属性。案例实施一、网页、网站和主页默认状态下，文档窗口右侧是面板组。要关闭面板组，可按【F4】键；再次按【F4】键可恢复原来的状态。步骤01要打开或关闭某个面板，可选择“窗口”菜单下的相应菜单项。例如，可选择“窗口”>“插入”菜单，打开或关闭“插入”面板，如图所示。步骤02案例实施一、网页、网站和主页若要折叠窗口右侧的面板区域，可单击该面板区域右上方的按钮，此时按钮将变成按钮，再次单击可展开面板区域，如下图所示。当面板区域处于折叠状态时，单击某个面板按钮可展开该面板，再次单击可将面板恢复为按钮状态。步骤03案例实施一、网页、网站和主页如果面板组包含多个面板，可在展开面板组后，通过单击面板标签在各面板之间切换。例如，展开“文件”面板组后，可以通过单击“文件”“CSS设计器”标签在两个面板之间切换，如右图所示。步骤04双击某个面板组名称或名称右侧的空白处，可以展开或折叠面板组。步骤05单击面板组标题栏并拖动，可将面板组变为浮动状态。此时可拖动面板组标题栏，将其置于屏幕上的任意位置。要还原面板组到文档窗口右侧的面板区域，可将其重新拖动至面板区域。步骤06案例实施一、网页、网站和主页单击面板组右上角的符号，在弹出的菜单中选择“关闭标签组”，可关闭面板组，如下图所示。步骤07如果用户在更改面板组布局后又想恢复其原始布局，可选择“窗口”>“工作区布局”>“重置‘压缩’”（或“重置‘扩展’”）菜单。步骤08案例说明在开始制作网站前，首先制作网站规划书，并绘制好网站栏目结构图，可以让网站开发人员在开发过程中做到心中有数，有章可循。由于本书侧重网页制作部分，所以此处不再介绍网站规划书的制作。本案例主要介绍网站栏目结构和目录结构的设置。案例二设置企业网站栏目结构和目录结构相关知识只有合理设计网站栏目结构，整个网站内容才能围绕主题有序地开展，下图为一个汽车网站的栏目结构。一、设计网站栏目结构（1）层次清晰，突出主题。（2）体现特征，注重特色设计。（3）方便用户使用。（4）网页在功能分配上合理，且要功能强大。（5）可扩展性能好。（6）网页设计与结构在用户体验上要完美结合。二、创建网站目录结构通常情况下，一个网站往往包含很多文件，大型网站更是如此。如果将这些文件杂乱存放，容易造成两个后果。经常搞不清哪些文件需要编辑和更新，哪些无用的文件可以删除，哪些是相关联的文件，这极大地影响工作效率。1．文件管理混乱站点最终都是要上传到网络服务器上的，而服务器一般都会为根目录建立一个文件索引。当将所有文件都放在根目录下时，即使只上传更新一个文件，服务器也需要将所有文件再检索一遍，建立新的索引文件，大大增加上传时间。2．上传速度慢三、网页的本质避免以上问题的有效方法就是创建清晰有序的网站目录结构，下图为某“个人网站”的目录结构。创建网站目录结构应遵循以下方法和建议。1．按栏目内容建立子目录2．有些程序存放在特定目录下3．在每个主栏目下都建立独立的images目录4．目录的层次不要太深除上述各项外，其他需要注意的还有以下几项：（1）不要使用中文目录。网络无国界，使用中文目录可能对网址的正确显示造成困难。（2）不要使用过长的目录。尽管服务器支持长文件名，但是太长的目录名不便于记忆。（3）尽量使用意义明确的目录。案例实施在了解了网站栏目结构和目录结构的制作后，接下来绘制企业网站的栏目结构图，效果如下图所示。在开始绘制之前，先简单了解一下网站栏目结构图的绘制流程，如下图所示。案例实施新建空白word文档。启动word2007，选择“文件”>“新建”菜单命令，新建一个空白word文档。一、网页、网站和主页步骤01插入组织结构图。单击文档窗口上方工具栏中的“插入”按钮，切换到“插入”工具栏，单击“插图”区域中的“SmartArt”按钮，打开“选择SmartArt图形”对话框，如下图所示。步骤02案例实施插入形状。在对话框左侧列表中选择“层次结构”，然后在右侧列表中选择要插入的形状，单击“确定”按钮即插入形状，如左图所示。步骤03添加/删除文本框。根据实际需要，单击选中“层次结构”第二层中的文本框，按“Delete”键将其删除；右击第三层最右侧的文本框，在弹出的快捷菜单中选择“添加形状”>“在后面添加形状”菜单，添加一个文本框，并按照同样的方法再添加4个文本框，最终右图所示。步骤04案例实施添加文字。右击文本框，在弹出的快捷菜单中选择“编辑文字”，然后在文本框中输入文字，如下图所示。步骤05案例实施自动套用样式。选择层次结构图，在“设计”工具栏中单击要应用的样式，即可对结构图应用选中的样式，如下图所示。步骤06保存文档。步骤07案例实施根据相关知识中的内容，以及刚刚绘制的网站栏目结构，企业网站目录结构设计如下图所示。案例说明通过前面的学习，我们了解了网站建设的前期工作。本案例主要介绍使用Dreamweaver操作站点的基本方法。DreamweaverCC是一款强大的所见即所得网站制作工具，为了更方便地在其中管理和操作网站内容，需要创建本地站点，从而使本地文件与DreamweaverCC建立关联，让设计人员可以通过DreamweaverCC管理站点文件。案例三创建企业网站本地站点

——站点基本操作相关知识一般在Dreamweaver中制作网页之前，最好先定义站点，然后在站点中创建网页。一、使用Dreamweaver创建和打开本地站点1．创建本地站点首先在本地磁盘创建一个新文件夹作为本地站点根文件夹，以便存放相关文档。此处在D盘新建一个名为“test”的文件夹，并在其中嵌套一个名为“images”的文件夹。步骤01启动DreamweaverCC，在菜单栏中选择“站点”>“新建站点”菜单。步骤02相关知识弹出“站点设置对象”对话框，默认显示“站点”选项，在“站点名称”文本框中输入站点名称，单击“本地站点文件夹”编辑框右侧的“浏览文件夹”按钮，在打开的“选择根文件夹”对话框中选择前面创建的文件夹“test”，然后单击“选择文件夹”按钮，设置网站根文件夹，如下图所示。步骤03用于设置网站文件的存储路径相关知识设置服务器信息。在左侧列表中单击“服务器”选项，对话框右侧将显示服务器相关信息。站点服务器信息可以暂时不填写，在上传网站时再添加。步骤04高级设置。对“高级设置”部分，仅设定“本地信息”即可，如右图所示。设定好后，直接单击“保存”按钮，新的站点就创建完成了。步骤05相关知识2．打开本地站点方法1：在菜单栏中选择“站点”>“管理站点”菜单命令，弹出如左图所示的“管理站点”对话框，选择要打开的站点，单击“完成”按钮即可。方法2：在“文件”面板的“站点”下拉列表中选择已创建的某个站点，也可将其打开，如右图所示。二、使用Dreamweaver管理本地站点管理本地站点的操作主要包括编辑站点、复制站点、删除站点和导出导入站点等。1．编辑站点方法1：选择“站点”>“管理站点”菜单命令，在“管理站点”对话框中双击要编辑的站点，即可弹出此站点相关信息进行编辑，如左图所示。方法1：在“文件”面板中选择站点列表中的“管理站点”选项，也可打开“管理站点”对话框，如右图所示。三、网页的本质首先在“管理站点”对话框中选择要复制的站点，如左图所示，单击“复制当前选定的站点”按钮，在站点列表中即增加一个新的站点“test复制”，表示这个站点是“test”的复制，如右图所示。2．复制站点三、网页的本质在“管理站点”对话框中单击选中要删除的站点名，单击“删除当前选定的站点”按钮，在弹出的对话框中单击“是”按钮确认删除，单击“否”按钮则取消删除。3．删除站点删除站点操作仅将站点信息从Dreamweaver中删除，而站点文件还保留在硬盘原来的位置上，并没有被删除。三、网页的本质在DreamweaverCC中，可以将现有站点导出为一个站点文件，也可以将站点文件导入为一个站点。导出、导入的作用在于保存及恢复站点和本地文件的链接关系。4．导出和导入站点（1）导出站点在“管理站点”对话框的站点列表中单击选中要导出的站点，单击“导出当前选定的站点”按钮，如右图所示。步骤01三、网页的本质在弹出的“导出站点”对话框中为导出的站点文件设置保存位置和名称，然后单击“保存”按钮即可，如下图所示。步骤02导出的站点文件扩展名为“.ste”，本例实现将“test”导出至D盘根目录下，命名为testcopy.ste。步骤03（2）导入站点在“管理站点”对话框中单击“导入站点”按钮，在弹出的“导入站点”对话框中选择要导入的站点文件（后缀为.ste的文件），单击“打开”按钮，站点文件将导入到站点中。案例实施创建本地站点文件夹。将本书附赠素材“素材与实例\ch02”目录下的文件夹“ydjt”拷贝至本地磁盘，作为网站根文件夹。一、网页、网站和主页步骤01新建站点。启动DreamweaverCC，选择“站点”>“新建站点”菜单命令，在弹出的“站点设置对象”对话框中设置站点名称和本地站点文件夹，如下图所示。步骤02案例实施高级设置。单击对话框左侧的“高级设置”选项，设置默认图像文件夹为站点根目录下的“images”文件夹，如下图所示。设置好后，单击“保存”按钮，完成站点的创建。一、网页、网站和主页步骤03案例说明网页文档的基本操作包括新建和保存网页文档，及打开、预览和关闭网页文档。本案例首先介绍网页文档的基本操作，然后通过在案例实施中为企业网站制作欢迎页面来进一步巩固相关知识。案例四为企业网站制作欢迎页面——网页文档基本操作相关知识网页文档的基本操作包括新建网页文档，保存网页文档，以及打开、预览和关闭网页文档等。一、网页文档基本操作在DreamweaverCC中可以创建两种类型的网页文档，一种是直接创建的空白网页文档，另一种是通过DreamweaverCC内置的模板创建具有一定内容和样式的网页文档。1．新建和保存网页文档启动DreamweaverCC，选择“文件”>“新建”菜单，或按【Ctrl+N】组合键，打开“新建文档”对话框。步骤01三、网页的本质在左侧列表中选择一项（此处选择“新建文档”），在“文档类型”列表中选择文档类型（此处选择“HTML”），在“框架”列表中选择“无”（表示不使用框架），在“标题”文本框中输入网页标题，单击“创建”按钮，如图所示。步骤02三、网页的本质创建新文档，如下图所示。步骤03三、网页的本质新建或编辑网页文档后，需要将其保存，才能使所做的设置生效（尤其是要插入图像的文档，由于涉及到路径的问题必须要先保存）。要保存前面新建的网页文档，可选择“文件”>“保存”菜单，或按【Ctrl+S】组合键，打开“另存为”对话框。步骤04在“另存为”对话框的“保存在”下拉列表中选择保存文件的文件夹（此处为前面创建的站点文件夹“test”），在“文件名”文本框中输入文件名（此处为“index”），单击“保存”按钮，即可将文档保存，如右图所示。步骤05三、网页的本质2．打开、预览和关闭网页文档要打开现有的网页文档进行编辑，可选择“文件”>“打开”菜单（或按【Ctrl+O】组合键），打开“打开”对话框。步骤01在“查找范围”下拉列表中选择网页文档所在位置（此处选择本书附赠的“素材与实例\ch03”目录下的“ydjt”文件夹），在“文件列表”中选择要打开的网页文档（此处选择“index.html”），如右图所示。步骤02三、网页的本质单击“打开”按钮，打开网页文档如左图所示。步骤03如要预览文档，可在打开文档后单击“文档工具栏”中的“实时视图”按钮，在文档窗口中预览，如右图所示；也可以按【F12】键，在浏览器中打开预览。步骤04二、“文件”面板基本应用在定义站点后，使用“文件”面板可以非常方便地打开、新建、重命名或删除站点中的文档和文件夹。选择“窗口”>“文件”菜单，打开“文件”面板。要在当前站点的某个文件夹中创建网页文档，可右键单击该文件夹，在弹出的快捷菜单中选择“新建文件”，如图（a）所示。步骤01此时在当前站点中新建了一个网页文档，并且该网页文档名处于可编辑状态，如图（b）所示。步骤02（a）（b）三、网页的本质如要关闭文档，只需单击文档标签栏上的“关闭”按钮（或按【Ctrl+W】组合键），此处将“index.html”文档关闭。执行该操作时，如果文档已修改但未保存，系统会弹出如下图所示的提示框，询问是否保存修改。步骤05提示如果网页文档已修改但未保存，执行预览操作时会弹出提示框，单击“是”按钮，系统将自动保存并在IE浏览器中打开文档。二、“文件”面板基本应用用户可直接输入文档名并按【Enter】键来命名文档。本例是在站点根文件夹下创建名称为“main.html”的网页文档，如右图所示。步骤03要新建文件夹，可在目标文件夹上单击鼠标右键，在弹出的快捷菜单中选择“新建文件夹”选项，然后给新建的文件夹命名。步骤04要重命名现有的网页文档或文件夹，可首先在“文件”面板中选中文档或文件夹，然后单击文档名或文件夹名（或按【F2】键），此时文档或文件夹名将变为可编辑状态，输入新名称并按【Enter】键即可。步骤05在重命名文档时，注意不要更改其扩展名。当不需要站点中的某个网页文档或文件夹时，可将其删除，方法为：右击要删除的网页文档或文件夹，在弹出的快捷菜单中选择“编辑”>“删除”菜单，然后在弹出的提示框中单击“是”按钮，如下图所示。步骤06除上述操作外，在“文件”面板中双击某个网页文档，可在文档编辑窗口中打开该文档。步骤07在选中需要删除的文档或文件夹后，按键盘上的【Delete】键同样会弹出确认删除提示框，单击“是”按钮即可。案例实施一、网页、网站和主页在“文件”面板“站点”下拉列表中选择案例二中创建的站点“ydjt”，打开该站点。步骤01右击站点根文件夹，在弹出的快捷菜单中选择“新建文件”选项，在该站点中新建文档，并重命名为“welcome.html”。步骤02在“文件”面板中双击文档“welcome.html”，在文档编辑窗口中将其打开。步骤03案例实施一、网页、网站和主页在文档编辑窗口中单击，然后输入文字“欢迎访问中国忆达集团网站！”，如左图所示。步骤04按【Ctrl+S】组合键保存文档，然后按“F12”键，在浏览器中预览页面效果，如右图所示。步骤05拓展知识为便于日后的维护和管理，网站中所有文件和文件夹的命名最好遵循一定的规则。一、网页文档和文件夹命名规则首页文档一般命名为index.html、index.asp或index.php，后缀名与网页本身所使用的技术一一对应。在网页的存放目录中最好不要出现中文，更不要用中文命名网页文档和文件夹。网页文档名中不要使用大写英文字母，最好全部使用小写英文字母。

运算符符号不能用在文件名的开头。比较长的网页文档名可以使用下划线“_”来隔开多个单词或关键字。在大型网站中，分支页面的文件应存放在单独的文件夹中，每个分支中的图像也应该存放在各自单独的文件夹中，存放网页图像的文件夹一般命名为“images”或者“img”。在动态网站中，用来存放数据库的文件夹一般命名为“data”或者“database”。二、HTML的标签构成HTML文件由一系列元素和标签组成，元素是HTML文件的重要组成部分，元素名不区分大小写。HTML用标签来规定元素的属性和它在文档中的位置。1．HTML标签概述HTML标签是由尖括号括起来的关键词，绝大多数HTML标签都是成对出现的，包含首标签和尾标签。首标签的格式为<标签名>，尾标签的格式为</标签名>，首标签和尾标签的中间为标签内容。其完整语法如下：<标签名>标签内容</标签名>成对标签仅对包含在其中的内容起作用，如标题标签<title>和</title>用于界定标题元素的范围。除成对标签外，也存在少量的单标签，其格式为<标签名>，作用是在相应位置插入元素，如换行标签<br>表示在该标签所在位置插入一个换行符。HTML文档源码中一行可以写多个不同的标签，也可将一对标签写在不同的行中，但每对标签必须嵌套使用，不能交叉使用。下表列出了标签的正确用法和错误用法。正确错误<table><tr><td></td></tr></table><table><tr><td></tr></td></table>以上代码中，<td></td>标签对包含在<tr></tr>标签对中，<tr></tr>标签对又包含在<table></table>标签对中，形成父子关系。在HTML文件中，标签的完整定义语法如下：2．HTML标签格式在HTML文件中，每个标签都有名称、可选择的属性和标签内容，标签的属性都在首标签内标明。首标签的基本语法如下：<标签名属性名1＝"属性值1"属性名2＝"属性值2"……>而尾标签的语法格式如下：</标签名><标签名属性名1＝"属性值1"属性名2＝"属性值2"……>标签内容（文本或超文本）

</标签名>属性是可选择的，如果标签中有属性，则标签名和属性名之间以及各属性之间要用空格隔开，各属性值用英文输入法下的双引号括起来。例如，实现超链接的代码如下：<ahref="web/index.html"target="_blank">点击我吧</a>三、HTML网页文档的基本结构HTML文档默认被分为两部分：文档头<head>和文档体<body>，它们都包含在<html></html>标签对中，如我们在前面“案例实施”中制作的企业网站欢迎页面。在Dreamweaver中打开前面创建的企业网站欢迎页面，并切换到代码界面，可看到HTML文档的基本结构，如下图所示。1．文档类型<!doctype>doctype是英文“documenttype（文档类型）”的简写，是HTML中的文档声明，简称为DTD声明，其作用是告知浏览器当前文档所使用的是哪种HTML规范。doctype声明位于文档最前端，标签为<!doctype>，它不属于文档的结构部分。<!doctypehtml>网页中的所有代码内容都包含在<html></html>标签