第5 单元静态网页设计 静态网页设计主要使用HTML语言和CSS技术实现。通过Dreamweaver可以建立 和管理站点,以模板网页为基础,完成人才招聘网站主页、会员注册、岗位信息显示、应聘人 员信息显示等网页设计。 5.建立人才招聘站点 1 一、实验目的 通过Dreamweaver的“站点设置”窗口新建站点,使用文件面板管理和同步文件,熟悉 Dreamweaver界面的基本操作,掌握建立和管理站点的基本过程和方法。 二、实验任务 (1)在D盘新建rczp文件夹,作为人才招聘网站的本地站点文件夹。 (2)在…xampp\htdocs目录中新建rczp文件夹,作为人才招聘网站的服务器文件夹。 (3)使用Dreamweaver的“站点设置”窗口新建站点。 (4)在Dreamweaver的文件面板中浏览站点资源文件。 (5)使用Dreamweaver的文件面板同步本地站点文件夹和服务器文件夹的内容。 三、任务分析 任务1是在本地磁盘中新建rczp站点的本地站点文件夹,任务2是在服务器中新建 rcp站点的服务器文件夹。在开发网站时,cp网站的本地站点文件夹和服务器文件夹可 zrz 以创建在同一台计算机中。通过Dreamweaver的“站点设置”窗口可以新建站点,使用文件 面板可以完成本地文件和服务器文件的管理和同步。 四、预备知识 (1)Dreamweaver界面:是菜单、面板、工具箱和文档窗口的组合视图。为适应不同用 第5单元静态网页设计 户的操作习惯,系统预定义了设计器、应用程序开发人员和编码人员等多种工作区布局,用 户也可自定义和保存工作区布局。用“窗口”菜单的“工作区布局”菜单项,或窗口右上角的 工作区布局下拉框,可以切换工作区布局。单击“重置…” 选项可以恢复某工作区布局的默 认布局,如图5-1所示。 图5- 1 “工作区布局”下拉框 设置工作区布局为“应用程序开发人员(高级)”,如图5-2所示。 图5- 2 “应用程序开发人员(高级)”工作区布局 (2)文件面板:使用文件面板(如图5-3所示)可以查看和管理站点中的文件,也可以进 基于互联网的数据库及程序设计实践指导与习题解答(第3版) 行本地和测试服务器之间的文件传输。单击连接状态按钮控制本地站点和测试服务器站点 之间的连接或断开;单击下载按钮将文件从测试服务器站点复制到本地站点;单击上传按钮 将文件从本地站点复制到测试服务器站点;单击视图下拉框,可以在本地视图、远程服务器、 测试服务器和存储库视图之间进行切换,查看和管理位于不同位置的文件。选中文件后,按 delete键删除文件。选中文件后右击,在弹出的快捷菜单中选择“编辑”菜单项,可以复制、 粘贴和重命名文件。 图5- 3 文件面板 (3)单击文档工具栏中的按钮可以在代码视图、设计视图、拆分视图、拆分-实时视图等 视图间切换,如图5-4所示。 图5- 4 文档窗口的拆分视图 代码视图:手工编码环境,用于编写HTML 、PHP 等语言的代码。 设计视图:可视化编辑设计环境,类似在浏览器中查看页面时看到的内容。 第5单元 静态网页设计1 01 拆分视图:在单个窗口中同时查看同一文档的代码视图和设计视图。 拆分-实时视图:显示代码视图,同时在拆分窗口中显示文档在浏览器中的真实外观, 便于快速预览页面。 在开发过程中,建议使用代码视图和设计视图设计网页,然后按F12键启动浏览器,通 过B/S模式预览网页。 (4)状态栏:其位于文档窗口底部,提供当前文档的相关信息。标签选择器位于状态 栏左侧,显示围绕当前选定内容的标签的层次结构。单击该层次结构中的任意标签,可以选 择该标签及其全部内容,如图5-5所示,单击<table>标签可以在代码视图和设计视图中同 时选中整个表格。 图5-5 状态栏 五、技能点 (1)新建站点:站点是开发及建设网站的环境,用于存储网站开发阶段的文件夹及相 关资源文件。站点包含开发网站计算机中的本地站点文件夹和发布网站资源的服务器文件 夹。用“管理站点”功能可以新建和管理站点。 (2)管理和同步文件:用文件面板可以方便地对本地站点文件夹和服务器文件夹进行 管理和同步。 六、注意事项 (1)启动Dreamweaver后,要选择适当的工作区布局。 (2)使用“站点设置”窗口新建站点前,先启动ApacheWeb服务。 七、设计步骤 1.新建站点文件夹 (1)新建本地站点文件夹:双击桌面“计算机”图标,在D盘下新建rczp文件夹。 (2)新建服务器文件夹:进入xampp安装目录下的htdocs文件夹,如F:\xampp\htdocs,新 基于互联网的数据库及程序设计实践指导与习题解答(第3版) 建文件夹rczp。 2.新建站点 (1)启动Apache:双击桌面“XAMPP-Control”图标,在XAMPP控制面板窗口单击 Apache的Start按钮。 (2)启动Dreamweaver:双击桌面Dreamweaver图标。单击Dreamweaver窗口右上角 “工作区布局”下拉框→“应用程序开发人员(高级)”选项。 (3)新建站点:单击“站点”菜单→“新建站点”选项,在“站点设置”窗口中,输入“站点 名称”为rczp,“本地站点文件夹”为D:\rczp\,如图5-6所示。 图5- 6 站点设置窗口 (4)设置服务器:单击“站点设置”窗口的“服务器”→“+”按钮,输入“服务器名称”为 rczp,选择“连接方法”为“本地/网络”,“服务器文件夹”为F:\xampp\htdocs\rczp,“Web URL”为htp://localhost/rczp/,如图5-7所示,单击“保存”按钮。 图5- 7 服务器设置窗口 选中“测试”复选框,如图5-8所示,单击“保存”按钮。 图5- 8 测试服务器设置窗口 3.上传站点文件 (1)复制资源文件:在Windows文件资源管理器中,将网站资源文件(含文件夹)复制 第5单元静态网页设计 到D:\rczp\下,单击文件面板中的“刷新”按钮,查看复制的资源文件,如图5-9所示。 (2)上传站点文件:单击选中“站点-rczp(D:\rczp)”,单击文件面板中上传按钮,将本 地站点文件夹中的文件上传到服务器文件夹中。单击“视图”按钮,选择“测试服务器”选项, 查看测试服务器上的文件,如图5-10 所示。 图5- 9 本地站点目录结构图5-10 测试服务器的站点目录结构 八、思考题 (1)什么是B/S模式? 该模式在Dreamweaver网页设计中如何体现? (2)如何新建测试服务器? 服务器文件夹的位置有何要求? (3)如何同步本地文件和服务器文件? (4)何时需要将本地文件上传到服务器? 如何上传? (5)何时需要将服务器文件下载到本地? 如何下载? 5.2网站主页设计和局域网浏览 一、实验目的 在模板网页基础上设计网站主页,并在局域网环境中浏览网页,掌握静态网页设计的基 本方法和请求局域网Web站点服务的基本过程。 二、实验任务 (1)设计图5-11 所示的网站主页inehtml。 dx. 基于互联网的数据库及程序设计实践指导与习题解答(第3版) 图5-11 人才招聘网站主页 (2)查看计算机IP 地址。 (3)在局域网中,通过IP 地址访问其他计算机上的网站。 三、任务分析 ah使用Deae 任务1是在mubn.tml基础上, ramwevr可视化工具,在代码视图中设计网 站主页,需要使用的资源文件如图5-9所示。任务2使用Windows命令查看IP 地址。任 务3使用浏览器访问局域网中的其他计算机中的网站。 四、预备知识 (1)模板:是一种快速设计相同风格网页的样式。通常网站中各页面的页头、页脚等 区域内容相同,故可以在模板网页中把页头、页脚等部分设计出来,再以模板为基础,具体设 计其他页面。 (2)IPConfig命令:用于显示本机TCP/IP 协议配置信息,查看本机IP 地址。 五、技能点 (1)在模板基础上设计网页:人才招聘网站主页模板已完成了页面布局设计,需要设 计的区域如图5-11 所示,从上至下分别为页头logo区、页头链接区、导航链接区、搜索区、 登录区、合作企业信息区、最新职位信息区、页脚链接区。需要在模板文件基础上,完成上述 第5单元 静态网页设计1 05 区域的代码设计。 (2)调试局域网站点:在浏览器地址栏输入IP地址,访问局域网内其他计算机上的 网站。 六、注意事项 (1)引用的资源文件位置要准确。 (2)网页文件要保存在当前站点的本地站点文件夹中,不要随意改变文件的存储位置。 七、设计步骤 1.准备工作 (1)打开模板文件:创建站点后,在本地站点文件夹中准备好资源文件(如图5-9所 示),选择文件面板→“本地视图”,双击muban.html文件,在代码视图中查看网页代码。 (2)文件另存为:选择“文件”菜单→“另存为”菜单项,在“另存为”窗口中,“文件名”输 入index.html。注意不要改变文件默认保存位置,单击“保存”按钮。在代码视图中查看 index.html网页代码。 2.网站主页设计 (1)页头logo区设计:将光标定位到代码<!--logo-->下方的空行,如图5-12所示。 图5-12 示例代码 单击“插入”菜单→“图像”选项,选择images文件夹中的 rczplogo.png文件,“相对于”选项选择“文档”(默认选项,以下相 同操作都选择此选项),单击“确定”按钮。将弹出的“图像标签辅 助功能属性”窗口的“替换文本”输入logo,单击“确定”按钮。手 工编码方式修改<img> 标签的属性width="400",height=" 120",将光标定位到本行代码开始位置前,按Tab键,调整代码缩 进,调整后的内容如图5-13所示。 图5-13 示例代码 (2)页头链接设计:将光标定位到代码<!--页头链接-->下方的空行。单击“插入”菜 单→“HTML”→“文本对象”→“项目列表”选项,将生成代码<ul></ul>。 将光标定位到<ul></ul>标签中间(下文中此操作含义相同),如图5-14所示。 单击“插入”菜单→“HTML”→“文本对象”→“列表项”选项,将生成代码<li></li>。将 光标定位到<li></li>标签中间,单击“插入”菜单→“超链接”选项,“文本”输入“首页”,“链 接”单击“文件夹”图标,在弹出窗口中选择文件index.html,单击“确定”按钮。生成的代码 1 06 基于互联网的数据库及程序设计实践指导与习题解答(第3版) 如图5-15所示。 图5-14 示例代码 图5-15 示例代码 复制粘贴并编辑代码,编辑后的代码如图5-16所示。 图5-16 示例代码 (3)导航链接设计:将光标定位到代码<!--导航链接--> 下方的空行。单击“插入”菜 单→“HTML”→“文本对象”→“项目列表”选项,将生成代码<ul></ul>。 将光标定位到<ul> </ul> 标签中,单击“插入”菜单→“HTML”→“文本对象”→“列表 项”选项,将生成代码<li></li>。 将光标定位到<li></li> 标签中,单击“插入”菜单→“超级链接”选项,“文本”输入“首 页”,“链接”单击“文件夹”图标,在弹出窗口中选择文件index.html,“目标”选择_self,单击 “确定”按钮。选中代码“首页”,如图5-17所示。 图5-17 示例代码 单击“插入”菜单→“HTML”→“文本对象”→“加强”选项。选中代码“<strong>首页</ strong>”,单击“插入”菜单→“HTML”→“文本对象”→“强调”选项。 复制粘贴并编辑代码后,代码如图5-18所示。 将光标定位到首页<a> 标签的target属性前,属性面板中的“类”选择“select”,如 图5-19所示。 操作后首页所在行的代码为: <li><a href="index.html" target="_self" class="select" > < em> < strong> 首页</ strong></em></a></li> 第5单元 静态网页设计1 07 图5-18 示例代码 图5-19 属性面板中的“类”选择操作 (4)搜索表单设计:将光标定位到代码<!--搜索表单-->下方的空行。 单击“插入”菜单→“表单”→“表单”选项。在弹出的“标签编辑器-form”窗口中,“方 法”选择post,名称输入searchform,单击“确定”按钮。 将光标定位到<form></form>标签中,单击“插入”菜单→“表单”→“文本域”选项。在 弹出的“标签编辑器-input”窗口中,“名称”输入key,“大小”输入50,“最大长度”输入25,单 击“确定”按钮。 不改变光标位置(在</form>前),单击“插入”菜单→“表单”→“单选按钮组”选项。在 弹出的“单选按钮组”窗口中,输入内容如图5-20所示。 图5-20 单选按钮组keytype设计