《网页制作》公共课简易教案.docx

《网页制作》公共课简易教案

第一篇：《网页制作》公共课简易教案网页和网站我们将平时在浏览器(IE)上看到的每一个页面称为网页，而在同一个域名地址下的网页的集合称为网站，网站可以只有一个简单网页，也可以由一系列网页文档互相链接而成。网站建设的一般步骤网站建设是一件复杂的工程，如果不能合理的安排工作流程，可能会造成许多不必要的麻烦。对于不同的建站目标制作流程会略有不同，或者在建站过程中有一些交叉，但大体遵循以下的基本流程：2.1．需求分析在软件设计中经常提及需求分析这样的概念。网站建设也是一样，只有在充分的沟通了解网站建设的目标、意义、用户群以及更新需求，才能决定网站要使用怎样的技术手段，以及如何定位等。2.2网站定位根据需求分析，我们可以给站点一个较为准确的定位，即建站的目的、传达的主题、内容涉及范围等等。2.3规划整体结构这个阶段，要把对站点定位的感性认识转化为站点的网页结构、配色、层次结构和链接等具体内容。并且，可能的话列出几种方案供选择。网页制作站点中的每一个网页既互相联系呼应但又都不尽相同，为了保持整个站点页面的一致性，也为了访问者更方便的浏览站点页面，制作网页时要注意一下几个问题：3.1．导航一个站点通常包含不止一个页面，按照页面所体现的内容，可以把站点的页面按照不同的栏目来归类。导航就是用来体现归类的结果，并且实现在技术上分门别类的显示相关网页。所以网站的导航一般都放置在比较显眼的位置（上部或左侧），以保证访问者能随时根据导航在站内页面间跳转。3.2链接链接是对导航的一个扩充，页面上的许多元素上都可以做链接。链接可以在新浏览器窗口打开，也可以将原来窗口的内容替换掉，所以一般来说要设置返回上一页以及返回首页的链接，以方便访问者调整自己在站点中的位置，更大范围的访问站内的信息。3.3页面的布局在制作网页时如果只是将页面元素做无序的堆砌，即便再美好的文字，再华丽的图片也不容易让人接受。如何组织页面上的元素，就是布局要解决的问题。布局就是将页面有条理的划分为若干个部分，分别放置导航栏、主题图片或者成段的文字等。好的布局会让访问者很容易的在网站上找到所需要的信息。常见的布局形式有：（1）框型结构：框型结构如图3.1所示，其页面顶部为广告条，下方左侧为导航，右侧显示主要内容，下方为版权信息。这是网页设计中用的最广泛的一种布局方式。这种布局的优点是页面主次分明、结构清晰，是初学者最容易上手的布局方法。图3.1框型结构布局（2）口型结构：这是一个象形的说法，其结构如图3.2所示。页面上方为广告条，下方为版权信息，左面是导航，右面放置友情连接等，中间是主要内容。这种布局的优点是充分利用版面，信息量大；缺点是页面拥挤。也有将四边空出，只用中间的窗口型设计。图3.2口型结构布局（3）T型结构：这种结构如图3.3所示，该布局适合于内容比较简洁的页面。页面上方为导航和广告条，下方为版权信息，中间留出大部分的空白突显主要内容。图3.3T型结构布局4网站测试在对站点内每个网页设计的过程中都要先在浏览器上进行测试。最终整个站点也要测试，测试的内容包括：链接是否正确、页面在不同浏览器和平台上显示的效果、网页打开速度、文件下载速度等。网站建设实例在Dreamweaver8中，“站点”一词既表示Web站点，又表示属于Web站点的文件的本地存储位置。在开始构建Web站点之前，需要建立站点文件的本地存储位置。5.1创建站点启动Dreamweaver8，单击【站点】菜单，选择【管理站点】，打开“新建站点”对话框。在【您打算为您的站点起什么名字】文本框中，输入任何您喜欢的名字，比如“我的简历”。【您的站点的HTTP地址是什么】文本框可不填。单击【下一步】，由于我们这里以静态站点为例，所以在【您是否打算使用服务器技术】单选按钮组中选择“否”，如果是动态站点则选“是”，并且选择一个相应的服务器技术。单击【下一步】，在【您把文件夹存储在计算机上什么位置】文本框末尾单击“浏览”按钮设置站点目录。注意：文件夹名字要为英文名。单击【下一步】，在【您如何连接到远程服务器】下拉列表中选择“无”，暂不设置使用远程服务器。单击【下一步】，确认站点相关信息。最后单击【完成】成功创建站点。此时，在【文件】面板中即可看见我们创建的站点“我的简历”及其目录结构。5.2页面属性设置页面的属性，有2种方法。一种是“属性面板”，可以设置具体的对象属性，如：一段文字的格式、图片的大小、具体的超级链接等。一种是“页面属性”，就是设置页面的整体属性，包括字体大小、背景颜色、标题等。方法一：属性面板方法二：页面属性在对话框左侧【分类】列表中选择【外观】选项，相应的参数设置就会显示在右侧区域。在该对话框中可设置网页中的文本字体样式、文字大小、文字颜色、页面背景颜色、页面背景图像以及边距等。在对话框左侧【