Internet技术及其应用教程第8章.ppt

《Internet技术及其应用教程第8章.ppt》由会员分享，可在线阅读，更多相关《Internet技术及其应用教程第8章.ppt（58页珍藏版）》请在三一办公上搜索。

1、第8章 网页制作初步及网站的建立,8.1 网页制作软件之Dreamweaver 4的简介8.2 定义站点 8.3 建立主页 8.4 网页的设计原则与标准 8.5 建立网站的一般步骤8.6 网站的推广,8.1 网页制作软件之Dreamweaver 4的简介,图 8-1,1菜单栏 主菜单中包括“文件”、“编辑”、“查看”、“插入”、“修改”、“文字”、“命令”、“站点管理”、“窗口”、“帮助”十个选项。“文件”菜单里包含了对文件操作的各种命令。“编辑”菜单里包含复制、粘贴、撤消和重做等命令。“查看”菜单里包含查看不可见元素、标尺、网格和代码等网页设计组件命令。“插入”菜单包含了插入图像、表格及其他

2、组件的命令。“修改”菜单包含了对网页中各种对象的修改工具。“文字”菜单集合各种处理文字的工具。,“命令”菜单包含了对Dreamweaver 4设置修改的命令，如清理HTML、套用源格式、设置配色表、表格排序和格式化表格等命令。“站点管理”菜单收集了站点设置和管理的工具。“窗口”菜单集中了各种面板及文件窗口等命令。“帮助”菜单包含了Dreamweaver 4的版本介绍、互动帮助信息的选项。Dreamweaver 4的基本功能都可以在主菜单中找出，不过，Dreamweaver 4为了用户的方便，添加了友好的状态条、属性面板、对象面板和快捷启动面板，用户可以方便地在桌面上单击图标，就可以调用所需的功

3、能。,2工具栏 在主菜单的下边有一列工具栏，这是Dreamweaver 4才增加上的新功能，可以通过菜单“查看”下面的“工具栏”子命令来显示和关闭工具栏。按从左到右的顺序各按钮依次是“代码视图按钮”、“代码与设计视图按钮”、“设计视图按钮”、“网页标题”、“文件状态按钮”、“浏览器中预览/调试按钮”、“刷新按钮”、“参考书按钮”、“代码导航按钮”、“显示选项按钮”。,(1)代码视图按钮。按下此按钮以后，就可以直接编辑和查看HTML源代码。这个按钮相当于以前版本的HTML代码编辑窗口。(2)代码与设计视图按钮。按下这个按钮以后，就可以同屏显示源代码和页面的效果。这个功能对于网页制作来说是极其有用

4、的，可以一边修改代码，一边看到其效果，无需在窗口间来回切换。(3)设计视图按钮。此按钮就是以前版本的Dreamweaver网页编辑窗口。(4)网页标题(Title)。以前网页标题修改是到菜单里面编辑。现在只要在Title的文本框中直接输入网页标题就可以了。,(5)文件状态按钮。该按钮用来修改文件的状态。其中文件状态按钮包括如下选项：取消只读：去掉文件的只读属性。下载：文件的下载和上传。登录：登记/取消登记。还原注销：撤消Check out操作。设计备注：备注功能，用于查找文件在网站中的位置。可直接显示出当前页面在站点管理器中的位置，这样就不需要在网站中四处搜索了。,(6)浏览器中预览/调试按钮

5、。该按钮用来预览或进行调试。该按钮包含三个选项：预览在iexplore：在Internet Explore浏览器中浏览。调试在iexplore：在浏览器中调试JavaScript脚本。这是一个真正意义上的调试器，可以进行断点设置、变量跟踪等操作。编辑浏览器列表：编辑浏览器列表。可以指定在什么浏览器中进行预览，并且添加浏览器等操作。,(7)刷新按钮。该按钮可以刷新文件列表和页面。(8)参考书按钮。这是Dreamweaver为专业网页设计提供的一个详细的参考手册。包括Oreilly的三本参考书HTML、CSS、JavaScript参考手册。里面有详细的语法和参考说明。对话框中的Book为选择参考书

6、的种类，Tag为要查询的标签(包含标签和相关属性的查询)。(9)代码导航按钮。,(10)显示选项按钮。该按钮可以调整多种显示选项，其中有如下选项：隐藏全部：隐藏所有的可视元素。可视化助理：可视元素表格边框、层边框、框架边框、图像边框、不可见元素。文件头内容。标尺。网格。网页草图(跟踪图像)。在顶部设计查看。当设计视图和代码视图同时打开时，将设计视图放在最上面。,3工具面板 1)对象面板 对象面板收集了Dreamweaver 4中最常见的快捷工具按钮，如图8-2所示。在对象面板上方是对象下拉菜单“标准”，其中包括普通对象(Common)、字符对象(Characters)、表单对象(Forms)、

7、框架对象(Frames)、头部对象(Head)、不可见元素对象(Invisibles)和特殊(Special)等选项。面板下方是相应的快捷按钮，对象之间的变换调出方法是单击如图8-2窗口的关闭按钮下面的小三角，弹出一个下拉菜单，然后选择需要的选项。,图 8-2,(1)普通对象(Common)：如图8-2所示，各快捷按钮功能从左到右依次是：插入图像、插入滚动图像、插入表格、插入列表数据、插入绘制图层、插入导航条、插入水平线、插入电子邮件地址、插入日期、插入服务端、插入Firework制作的HTML、插入Flash动画、插入Flash按钮、插入Flash文字、插入Shockwave影片和插入Gen

8、erator对象。(2)表单对象(Forms)：如图8-3所示，各快捷按钮功能从左到右依次是：插入表单、插入文本框、插入按钮、插入复选框、插入单选框、插入下拉式列表框、插入文件框、插入图像框、插入隐藏框和插入跳转菜单。,图 8-3,(3)框架对象(Frames)：如图8-4所示，各快捷按钮的功能是插入如按钮所示形状的框架。,图 8-4,(4)头部对象(Head)：如图8-5所示，各快捷按钮功能从左到右依次是：插入Meta、插入关键字、插入描述、插入刷新、插入页框和插入超级链接。,图 8-5,(5)不可见元素对象(Invisibles)：如图8-6所示，按钮功能从左到右依次是：插入指定的锚点(书

9、签)、插入脚本和插入标注。,图 8-6,(6)字符对象(Characters)：如图8-7所示，按钮功能从左到右依次是：插入换行符、插入空格、插入版权符号、插入已注册符号、插入商标符号、插入英镑符号、插入日圆符号、插入欧元符号、插入左引号、插入右引号、插入破折号和插入其他符号。,图 8-7,(7)特殊(Special)：如图8-8所示，快捷按钮功能从左到右依次是：插入Applet，插入插件和插入ActiveX。,图 8-8,启动对象面板的快捷键是“Ctrl+F2”，也可以单击“窗口”菜单中的“对象”命令。,2)属性面板 属性面板如图8-9所示，用以显示网页中各元素相关属性。用户可以通过属性面板

10、中的选项对网页中各种属性作精确的修改。,图 8-9,默认状态下，属性面板会显示光标所在位置的文字属性。当用户选择不同的网页元素时，属性面板出现相关元素的属性，如选择网页中的图像元素，属性面板就会出现如图8-10所示的情况。,图 8-10,图8-9中属性面板右下方的按钮，是详细/简略属性面板的切换按钮。单击此按钮，属性面板就会弹出详细属性面板，如图8-10所示，用户可以利用详细属性面板，对所选的网页元素属性作进一步的修改。启动属性面板的快捷键是“Ctrl+F3”，也可以通过单击“窗口”菜单中的“属性”命令进行启动。,3)快捷启动面板 Dreamweaver 4的快捷启动面板如图8-11所示，它的

11、各个按钮的功能从左到右依次为：打开站点管理窗口、打开Assets资源管理窗口、打开HTML样式管理窗、打开CSS样式管理窗口、打开动作管理窗口、打开历史记录窗口和打开HTML编辑器。,图 8-11,4)状态条 Dreamweaver 4的状态条位于其窗口的底部，如图8-12所示，它包含了整个工作环境的重要信息，集成了HTML元素信息条、窗口大小信息栏、连接速度信息栏和最小化的快捷启动按钮四个部分。,图 8-12,(1)状态条中的网页元素信息条以HTML的方式显示光标当前位置的网页元素信息。通常，在同一处位置可以调用多种网页设计的功能，这时网页元素信息条中就会有多个HTML标识符。不同的标识符表

12、示不同的网页元素信息。例如，-表示文档主体，-表示对齐方式，-表示行，-表示单元格，-表示字体，-表示图像，表示段落等。当用户想对当前鼠标位置的某种网页元素进行编辑时，可以在网页元素信息条中，单击该元素标识符，Dreamweaver会自动选择该标识符作用的网页元素。,(2)职窗口大小信息栏不仅可以显示或调节窗口大小的信息，而且还可以编辑状态条的属性。单击窗口大小信息栏，弹出了快捷菜单，如图8-13所示，其上面部分是用来调节窗口的大小，单击其中一项，窗口会随选择改变窗口的大小；其下面部分为“编辑大小”，双击该命令，用户可以进行“窗口大小”规格的选择和自己定义窗口的大小，用户还可以在“连接速度”的

13、下拉列表框中选择网页的连接速度，如图8-14所示。,图 8-13,图 8-14,(3)连接速度信息栏表示当前网页的大小和该网页下载的时间(在“窗口大小信息栏”中设定的“连接速度”下)。(4)最小化的快捷启动按钮在任务栏上，用户可以不打开快捷启动面板，在此就可以做相应的操作。总的来说，Dreamweaver 4的工作环境是友好和便捷的，虽然它不支持嵌入工具栏的技术，但是它把常用的工具都集成在状态栏、快捷启动面板、对象面板和属性面板中，用户只要用鼠标一点一拉，就可以调用所需的功能，大大提高了工作效率，也使界面比较整洁与自由。,8.2 定 义 站 点,8.2.1 新建站点(1)单击“站点管理”菜单中

14、的“新建站点”命令，弹出如图8-15所示的新建站点对话框。(2)在对话框的“站点名称”后输入这个站点的名字；在“本地根文件夹”后设置这个站点在本地所位于的文件夹，模拟为本地站点的根目录；选中“自动刷新本地文件列表”复选框，则将新的文件复制到本地文件夹时，Dreamweaver 4将对这个本地站点自动更新。,图 8-15,(3)在“HTTP地址”后可以输入这个站点的网址。选中“启用缓存”(使用缓存加速连接更新速度)复选框，则Dreamweaver 4会给这个站点设置一个缓存，以提高站点管理的速度。(4)单击“分类”列表中的“远程信息”，可以设置远程服务器信息，用于上传网站，如图8-16所示。“访

15、问”为远程服务器上传文件时的访问类型。一般情况下为FTP服务，自己的网站上传文件具体是什么类型，可向提供者查询。“FTP主机”为FTP主机地址。“主机目录”为主目录。“存回/取出”复选框是用于多人协作编辑网站时使用。(5)单击“确定”按钮，新的本地站点设置完毕。这时会显示站点管理窗口。,图 8-16,8.2.2 编辑站点 站点管理窗口的界面一样有菜单栏和工具栏，还有“远端站点”窗口和“本地文件夹”窗口。工具栏按钮功能从左到右分别是：站点文件、站点地图显示、站点名字、与远程站点建立连接、刷新、下载、上传和帮助等，如图8-17所示。在这里，可以进行文件夹的创建、空文件的创建、更改文件名、检查连接情

16、况等等。,图 8-17,8.3 建 立 主 页8.3.1 建立主页(1)单击任务栏上的快捷启动面板中的“打开站点管理窗口”按钮，弹出如图8-18所示的窗口。,图 8-18,(2)在站点管理窗口右边的本地文件夹文件列表框中右击鼠标，弹出快捷菜单。(3)单击快捷菜单中的“新建文件”命令，创建了一个“无标题.htm”的文件，将其改为“index.htm”，这个文件就是要编辑的主页。(4)为了方便以后管理站点上的文件，可以在本地文件夹中创建三个目录。在快捷菜单中单击“新建文件夹”命令，输入目录“html”后，按回车键。按上述方法，再建两个目录，目录名分别为“image”、“others”。将框架页保存

17、在“html”文件夹里，把网页内的图像保存在“image”里，把网页中的其他插件保存在“others”里。用户可根据自己的需要再添加一些目录储存文件。,(5)双击“index.htm”文件，进入编辑“index.htm”网页文件的窗口。在空白的窗口里，用户可以根据自己的灵感与创意，去编辑美化自己的网页。(6)在空白窗口中右击鼠标，弹出快捷菜单。单击快捷菜单中“页面设置”命令，弹出“页面属性”对话框，如图8-19所示。(7)“标题”框中键入此文件的标题，可以根据自己所设计的内容有针对性地命名标题，浏览器浏览此网页时，该标题显示在浏览器的标题栏上。,图 8-19,(8)为网页背景加入图案。单击“背

18、景图像”右侧的“浏览”按钮，弹出“选择图像源文件”对话框。在选择框内选择图像文件，后按“确定”按钮。如果图像文件不在站点的本地文件夹中，Dreamweaver 4会弹出提示对话框，单击“是”按钮，Dreamweaver 4弹出复制对话框，选择站点中的本地文件夹“image”保存，单击“确定”按钮后，系统会自动复制文件，并返回页面属性对话框。(9)文字是网页的灵魂，合适的文字属性会使网页更加吸引人。在更改字体时要注意使用的字体是否为系统缺省的字体，如果不是，而浏览者系统中没有安装该字体，浏览时会出现乱码的情况。,8.3.2 编辑网页页面内容(1)要在页面上插入图像,可以在“对象面板”中单击“插入

19、图像”按钮,接着，在弹出的对话框中选择所需的图像文件，单击“确定”按钮。如果图像不在站点的本地文件夹中，Dreamweaver 4会弹出提示对话框,可按提示的方法将图像拷贝到站点的文件夹“image”中。(2)单击插在页面上的图像，Dreamweaver 4系统在默认情况下会弹出图像属性面板，如果没有出现，则可以在“窗口”的菜单中选择“属性”命令。在此属性面板中，有图像的各项属性，用户可以在这里进行有针对性的修改。,(3)和插入图像一样，在网页的编辑窗口中可以插入层、表格、动画等等，并且都一样有属性面板，大家要很好地使用属性面板，它可以使您事半功倍。(4)如果想在哪个对象上加上连接到别处的行为

20、，也就是说在浏览网页时单击此对象，就可以跳转到别的页面上，可以在该对象的属性面板上的“连接”对话框中输入路径，或单击对话框右边的文件夹按钮选择连接的对象。,8.4 网页的设计原则与标准,8.4.1 设计原则 1总体设计 就像编写程序前需要绘制程序流程图一样，设计网页之前也需要进行总体结构的设计。网站应该针对不同的需要和不同的服务对象具有不同的表现形式。某些网站结构复杂些，有很多频道，内容覆盖面也比较广；有些网站仅提供一些文本信息就可以了；有些网站采用多种表现手法，图、文、声、像和动画等表现手法都用上。要制作可读性强而能吸引人的网站，应该将适当的多媒体与有效的组织结合起来。,2主题鲜明、结构合理

21、 要使网页的各部分内容都有对应的一个网页，并使每个网页具有鲜明的主题，能吸引浏览者停留，最好能充分利用您设计网站所属单位的行业标志和公司标志。要做到各网页之间实现链接，使它们有机地结合成一个整体，以引导读者在网页间浏览。,3组织网页 网页的组织原则是：将丰富的内容和多样的表现形式组织在一个统一的结构中，表达出设计者的思想、情感与创意，从而达到形式与内容的统一，形式语言尽量做到符合网页上所要表达的内容。特别需注意的是：应当正确使用对比与调和、对称与平衡、节奏与韵律以及留空等表现手段；颜色的搭配要合理，字体颜色与背景颜色对比度不要太低；适当使用图片、动画等表现手法。,4设计主页(首页)的考虑 主页

22、作为网站网页的首页，在整个网站中占有非常重要的地位。主页的成功与否，将很大程度影响到该网站的点击次数(浏览次数)。主页要能够体现整个网站的总体概念，使人一目了然，而且应该集中后面的各级链接，使浏览者可以迅速转入感兴趣的网页。主页在设计时应该力求布局合理、美观大方又有较强的可读性。,8.4.2 设计标准 设计网站网页时，需要遵循一定的标准。第一，应该使整个网站网页保持一致的风格，至少一个频道应该保持一致的风格，给浏览者以整体的美感。多样化的格式和标志应该把握适当的度，不要过分花哨而分散浏览者的注意力，而达不到制作网页的预期效果。第二，要控制好网页文件的大小。目前网络信息传输速度还不是很理想，如果

23、文件太大，图片太多会使网页文件体积很大，这样网页下载的时间就太长，使浏览者失去等待耐心，整个网站也就失去吸引力。,8.5 建立网站的一般步骤,要建立一个网站，一般都要先规划网站的规模，这决定了网站的用途和提供的服务。假如是个人网页，一般不需要提供什么特殊服务，因此，只需要一般的网站免费提供的空间资源就能够满足了。企事业的大型网站就不同，假如它代表的是一家公司，要摆放公司的产品，要提供FTP服务，要给客户提供电子商务的安全服务，要给用户提供最安全的网上购物方式，甚至还要给一些个人用户提供空间，因此，它与个人网站的构建过程有所不同，需要购买主机，需要申请域名，要配置服务器等，还得有相应的网站构建策

24、略。,无论是哪类网站，一般都是按照以下的步骤来建立网站的：(1)明确主题(目的性)：要明白所建网站的目的是什么。无论是个人主页，是公司主页，还是门户网站，都得明确所建的网站的用途，才可以进行必要规划和素材的收集。(2)网站规划：根据建设网站的目的，规划网站的规模、网站首页的布局等。这关系到该网站建设的费用和该网站给人的第一感觉，布局是否合理、美观、整洁关系到该网站的形象，也是能否让浏览者打开您的网页后继续浏览下去，是否会再次来观看的很重要条件。可以说，我们建设网站的目的是提供信息给浏览者，也要吸引多些人来浏览。,(3)素材收集：明白了主题，对网站进行了规划之后，我们可以根据这些来收集素材，这是

25、为以后我们编辑网页所做的前期准备工作。我们编辑的网页是否可读性强，内容是否丰富多彩，是由素材决定的，这相当于我们建高楼大厦的砖砖瓦瓦，因此，只有根据主题的需要多收集些素材，才不用在编辑的过程中为了寻找资料而中断下来。(4)编辑网页：在主题的指导下，用网页制作软件(如Dreamweaver 4、Firework 4和Flash5)将收集来的素材编辑成网页。这需要掌握网页制作软件的使用技术，也得有一定的创造性设计，有一定的美工技术基础。,(5)本地网站的调试：网页设计制作完成后，得先在本地计算机浏览检查是否有遗漏的，或制作后没连接上的地方。要对网站进行全面的检查浏览，以免传送到远程服务器后才发现问

26、题，这样就得下载下来进行修改了。(6)申请主页空间：如果是个人网站，可以到提供免费空间服务的网站申请，也可以租用虚拟主机。如果是企事业单位，可以租用虚拟主机，也可以将自己的web服务器寄放在ISP的网络中心机房中，借用机房的通信线路，还可以自己建web服务器、建机房申请DDN专线，然后与ISP网络中心机房的路由器连接。,(7)申请域名：如果是申请免费空间，提供商会给您提供一个免费的二、三级域名。如果是以其他方式申请空间，那还需申请一个域名。域名必须到中国互联网络信息中心(CNNIC)或者其他域名申请服务提供商申请。大家可以到http:/、.chinadns等地址申请。(8)网页的发布：网页的发

27、布就是借助专用的文件上传软件(如CutFTP、32bit-FTP等软件)将本地站点的所有文件上传到远程服务器上。上传完毕，在浏览器的地址栏输入您所申请的域名，就可以浏览到您设计的网站了。,8.6 网站的推广,推广网站的目的就是要使更多的人能够通过互联网浏览到本单位的网页，让更多的人了解，或者说，就是让本单位的网页在更多的搜索引擎上出现，为您的网站注册实名(企业实名、产品实名或个人实名)，或者加入交换组织。网络实名已经介绍过了，这里详细介绍加入搜索引擎的方法，您可以去下面这些著名网站登记：163：21cn：http:/,网易：http:/搜狐：http:/雅虎：http:/新浪网：http:/首

28、都在线：CPCW网站：http:/上海热线：http:/363：http:/,下面以网易的搜索引擎为例，说明怎样登记网站。(1)打开网易搜索引擎的首页，如图8-20所示。,图 8-20,(2)单击“搜索引擎”链接，弹出如图8-21所示页面。,图 8-21,(3)根据您的网站的内容，确定其属于网易所有的分类栏中的哪一类，然后单击进入。例如，单击“生活资讯”菜单中的“食”下面的“综合”，如图8-22所示。,图 8-22,(4)单击网页上的“网站登录”，这样您的网站就会属于该目录下的资讯，出现如图8-23所示窗口。,图 8-23,(5)输入联系E-mail地址、网站标题(将出现在搜索结果的标题栏)、网址、网站的描述(搜索结果看到的描述)等信息。(6)填写完毕，单击“现在就推荐”，于是就成功登记了网页。网站推广是一件长期的事情，您登记后，如果过段时间发现搜索引擎没有注册上，您可以重新提交，或寻找其他愿意为您提供连接的新站点。网站推广应该是一件很重要的管理工作。,