第二章网页和网站的建立

网页制作 第二章第二章网页制作工具之----Dreamweaver关于Dreamweaver定义一个站点一、关于站点：二、定义站点的注意事项三、如何建立一个站点四、建立文件夹创建静态页DREAMWEAVER关于Dreamweaver1.专业的HTML编辑器无论您愿意享受手工编写HTML代码时的驾驭感还是偏爱在可视化编辑环境中工作，Dreamweaver都会为您提供有用的工具，使您拥有更加完美的Web创作体验。2.强大的可视化编辑功能可以快速地创建页面而无需编写任何代码。您可以查看所有站点元素或资源并将它们从易于使用的面板直接拖到文档中。您可以在MacromediaFireworks或其他图形应用程序中创建和编辑图像，然后将它们直接导入Dreamweaver，或者添加MacromediaFlash对象，从而优化您的开发工作流程。DREAMWEAVER3.全面的编码环境4.支持服务器技术(JSPASPPHP)5.支持完全自定义您可以创建您自己的对象和命令，修改快捷键，甚至编写JavaScript代码，用新的行为、属性检查器和站点 报告 软件系统测试报告下载sgs报告如何下载关于路面塌陷情况报告535n,sgs报告怎么下载竣工报告下载 来扩展Dreamweaver的功能。DREAMWEAVERDreamweaver的工作区窗口和面板概述DREAMWEAVER菜单插入面板视图面板插入项目网页设计区属性面板1.①为菜单区，和其它的软件一样，该软件所有的操作命令都可以从这一个区内找到,举个例子，选中该区编辑(E)中的参数选择(S)...CTRL+U[其中CTRL+U是该选项的快捷键],如下图所示：DREAMWEAVER在这里，你可以把自己的DREAMWEAVER设置为自己喜欢的样式，一般使用默认就可以了，如下图：DREAMWEAVER2.②是插入项目选择工具(插入面板)，在②选中了某个项目，③中会出现相应的插入项目，下面详细介绍，选中常用这一项后如下图：DREAMWEAVER锚点用于网页中的定位，如网页的上、中、下等；图像占位符是用于动态交换图片的，后面再说；FireworksHTML为用Fireworks软件切割出来的图片；交换图像为鼠标移上去时变为另一图片，增强动感；表格数据可以将其它文件的数据转化为表格，插进网页；标签选择器可以插入其它不常用的HTML标签。在②中选中布局一项，共有标准视图和布局视图两种视图，如下图所示：DREAMWEAVER在标准视图下，可以插入表格和在网页制作区画图层。切换到布局视图下，如下图：DREAMWEAVER在布局视图下，可以在网页制作区描绘布局视图下的表格和单元格，描绘好之后，再切换到标准视图后，可以转化为表格，这个比较好用，可以用来排版网页，后面将说到。在②中选中文本一项，可以对文本进行格式化，如图：A可以对字体进行全面的格式；B可以将字体变为粗体；I为斜体；S为加强字体。在②中选择表单（表格和框架两项后面再说），可以插入各种按钮，如下图：A为表单；B为文本框；C为隐藏域；D为文本区域；E为多选框；F为单选框；G为单选按钮组；H为列表/菜单；I为跳菜单；J为图像域；K为文本字段；L为按钮；M为标签；N为字段集。DREAMWEAVER在②中选中字符可以插入一些特殊的字符，如：©®™　，其中BR为换行符在②中选中媒体，可以插入FLASH　FLASH按扭FLASH文本Applet等插件。在②中选中文本头，将出现下面的画面：关键字为网页的关键词，可以让搜索引擎搜索到；说明为网页的说明，如作者、介绍等；刷新可以设定多长时间后刷新网页或跳转到其它网页；基础为网页的基本链接，如插入一个目标为_blank基础，网页中的一切默认链接都将打开新窗口DREAMWEAVER在②中选中脚本，可以插入各种Javascript、Vbscript或其它脚本。在②中选中ASP（编辑ASP网页时用到，新手可不必理会），可以插入各种ASP编程里用到的标签。在②中选中应用程序（编辑动态网页时候用到，新手可不必理会），可以对数据库进行操作。DREAMWEAVER3.对④区的详解如下图：在上图中，点击带有向下小箭头的工具，会弹出更多选择。4.⑤区为网页设计区，你所设计的网页或代码将出理在该区。5.⑥区为属性区(属性面板)，在该区可以对选中的对象进行一些设置DREAMWEAVER定义一个站点一、关于站点：在Dreamweaver中，站点一词是下列任意一项的简称：Web站点：一组位于服务器上的页，使用Web浏览器访问该站点的访问者可以对其进行浏览。远程站点：服务器上组成Web站点的文件，这是从您的（创作者的）角度而不是访问者的角度来看的。本地站点：与远程站点上的文件对应的本地磁盘上的文件。在最常见的Dreamweaver工作流程中，您在本地磁盘上编辑文件，然后将它们上传到远程站点。Dreamweaver站点定义：本地站点的一组定义特性，以及有关本地站点和远程站点对应方式的信息。DREAMWEAVER二、定义站点的注意事项目的：定义一个新网站，这是为了更好地利用站点窗口对站点文件进行管理，也可以尽可能的减少一些错误的出现，如路径出错，链接出错等。注意事项：注意文件的条理性，不要乱放文件建立一个文件夹用于存放网站的所有文件，再在文件内建立几个文件夹，将文件分类存放注意文件的命名，用英文或者拼音给文件命名尽量不要使用中文命名DREAMWEAVER三、如何建立一个站点展开面板组里文件一项，选中站点，然后再选编辑站点，如下图：选中后将出现：DREAMWEAVER然后点击新建:DREAMWEAVER站点名称（N）处填上你要建立的站点的名称，这个名字只起着识别的作用，与网站发布后真实的名字无关本地根文件夹（F）处选择设置网站在本地硬盘的位置，点击后面的文件夹图标可以选择硬盘的任意目录作为存放网站文件的目录缓存可以使文件的移动、改名、查找等站点管理的操作速度大大提升，因此建议大家在这里打上钩；其它的可以默认，当然你可以试试选择不同的默认图像文件夹为站点默认存放图片的文件夹（以后在做网页的过程中，使用非站点内的图片时，它会提示是否把该文件复制到这个文件夹内）HTTP地址（H）为你站点的网址DREAMWEAVER上图中远程信息一项也是非常有用的，可以用它来管理你的网站（网站不在本机上的时候），如下图：DREAMWEAVER访问处选中FTP这一项FTP主机（H）为你的网站的FTP地址主机目录（D）为你的网站所在FTP主机上的目录（一般为根目录,可以不填）登录（L）为你的用户名密码（P）为登录密码；如果你链接服务器要用到防火墙，请勾中使用防火墙（U）这一项，并设置好参数；其它的可以根据自己需要选择（保存时自动将文件上传到服务器（A）这一项可以考虑勾选）。DREAMWEAVER四、建立文件夹选择文件，将弹出菜单选项，如下图：DREAMWEAVER选新建文件夹，然后建立html、image、style三个文件夹，再选新建文件，建立一个index.htm的网页文件（这个为站点的首页），同样你可以在文件这一项内对文件进行其它操作（如删除，设置文件属性，检查链接等）。a为链接远端主机的操作（如上面建立站点过程中远程信息中提及的FTP主机）b为刷新站点内文件的操作（如你修改了站点内的内容，点一下，可以取得最新的列表）c为获取文件（从远程主机把文件下载）d为上传文件（把文件上传到远程主机或服务器）e为取出文件（从远程主机把文件取出）f为存回文件（把文件存回远程主机）g为展开/折叠（可以把上图中的窗口展开或收回）DREAMWEAVER如果你切换到资源，将看到：DREAMWEAVER这里是你站点内的，图片，颜色，链接等（所有用到的资源都可以找到），下面对上图中的各个按钮加以说明：DREAMWEAVER创建静态页一、建立并保存新页一般推荐大家在站点窗口完成新建网页文件的操作，这样有助大家清楚新建的页面在整个网站的具体位置在站点窗口里新建一个index.htm或index.html文件。当然你也可以从文件（F）菜单，选新建（N）[其中后面的CTRL＋N是该操作的快捷键]，将出现下面的画面：DREAMWEAVER 模板，将使用模板创建一个新的网页文件， 参数选择（P）...处就是第一章中说的参数选择,这里使用默认文档类型为HTML就行了,创建好之后，将文件保存为index.htm（注意：将它保存到站点文件夹里）。DREAMWEAVER何为CSS？CSS就是CascadingStyleSheets（层叠样式表单）的简称，可以用来统一网页的风格，后面将用详细讲述。[提示：为什么网站的第一页的名字通常是index.htm、index.html、index.asp等，而不是其他？举个例子，当你在浏览器打入http://www.tastelife.net这个网址时，其实并没有明确地指定打开哪一个页面，但服务器就会自动寻找index.htm、index.html、index.asp等，道理就在于此处了]DREAMWEAVER设置页面属性，是在正式开始制作网页前一个必不可少的工序。双击打开刚才新建的index.htm，就自动转入编辑窗口。选择修改(M)菜单，页面属性(P)[CTRL+J为该操作的快捷键]，设置一些必要的页面属性，如下图：DREAMWEAVER　a标题（T）：页面的标题会直接显示在浏览器的左上方，例如用浏览器打开草原孤星网站，可以在浏览器的左上角看到该页的标题“★草原孤星-轻轻松松做网页(清爽新版)”。务必要养成为每一页都设定一个标题的习惯，这既便于访问者的浏览，也有助于你在网页编辑的过程中区分不同的页面。虽然标题并不是一个网页必要的元素，但却是体现着网页制作者有否从细处为浏览者着想。　b背景图像（I）：点击浏览（B）按钮，可以为网页添加背景图片。　c背景（G）：默认为白色，点击可以选择其他的颜色。后面“#FFFFFF”是以16进制形式显示的RGB色值。DREAMWEAVERd文本（E）：在这里将文字默认设置为黑色。要注意，假如不对背景及文字的颜色进行设置（此时RGB色值显示为空），那么浏览器在显示页面的时候，就会采用系统的默认设置。但因为不同的系统的设置都可能会有所区别，这样就回导致页面的显示效果也是千差万别。因为，为了更好地让页面体现出你的设计思想，就千万别忘记设定页面的背景颜色及文字颜色。　e链接（L）：设定超级链接的颜色，不设定则默认为蓝色。　f顶部边界和左边界：设置左部及顶部的页边距，一般都设置为“0”以方便于网页的编辑。DREAMWEAVER二、制作一个最简单的网页DREAMWEAVER最初我们的工作区如下图：DREAMWEAVER此时光标处于⑤区编辑窗口的最最左上角现在可输入你喜欢的任何文字，例如：“欢迎来来品味人生网站”选取文字，在⑥区属性面板上的大小（S）下拉菜单选取文字的大小，例如“7”点击面板上的（这个是让对象居中的操作，旁边分别为居左居右）使文字置中，再在文字前敲几个回车，使文字下移，直到使文字完全至于页面中央高度为止，如下图：DREAMWEAVERDREAMWEAVER选取①区菜单中的文件(F)>保存(S)[该操作的快捷键为：CTRL+S]保存页面，这样我们的第一个网页就已经完成了，按F12[注：F12为预览网页的快捷操作，你可以从①区菜单中的文件（F）＞在浏览器中预览这里操作]看看页面效果DREAMWEAVERDREAMWEAVERDREAMWEAVERDREAMWEAVERDREAMWEAVERDREAMWEAVERDREAMWEAVERDREAMWEAVERDREAMWEAVERDREAMWEAVERDREAMWEAVERDREAMWEAVER