初中八年级信息技术课件-设计网站与制作首页

设计网站与制作首页1网站和网页怎么设计网站与制作首页？网站是由超链接(Hyperlink)组织在一起的多个网页的集合。也就是说，网站由许多页面组成，各个页面之间能够相互跳转。网页是网站的基本单位，也叫Web页。网页文件是由一个HTML文件以及多个相关的文本、声音、图形、图像、动画等形式的文件组成的。使用浏览器等工具打开网页文件，就可呈现出多媒体可视页面。设计网站首先要确定网站主题。网站主题是指网站信息的“中心思想”和总体创意。主题是网站的灵魂，是确定网站风格与创意的前提和出发点。主题确定以后，就可以围绕主题给网站起一个名字，例如：E动少年。网站名称作为网站的标识，一般在网站的页头显示。网站主题、名称和栏目结构网页版面布局就是排列布置文、图、表等内容在整个页面（版面）中的位置，使网页的各种构成要素有机结合呈现，能够更好地表达页面所有内容。网页版面布局通过报纸、杂志、网络等搜集制作网站需要的文字、图片、动画等素材，还可以通过Word、Photoshop等对素材进一步加工处理。在搜集资料时，要有所选择，注意以下几点：•结合主题及栏目设计选择资料内容；•相同类型的内容尽可能精选，避免重复；•资料的形式尽可能多样化；•要注明所获取资料的来源。网站资料的搜集整理2设计展示自我风采的个人网站根据网站设计流程，设计展示自我风采的个人网站，确定网站名称（如“E动少年”），设计首页、“我的相册”、“美文推荐”、“我的作品”、“心情日记”等栏目板块。网站结构示意图如下：3熟悉Dreamweaver开发环境运行MicromediaDreamweaverMX2004。在“起始页(Startpage)对话框中，选择“创建新项目(CreateNew)”中的“HTML”选项，进入操作界面。Dreamweaver视图模式有设计视图、拆分视图和代码视图二种。单击“文档工具栏”上的“代码”按钮，打开当前页面的代码窗口，可以编辑当前页面的HTML代码；单击“设计”按钮，可以直接看到页面的设计效果。单击“拆分”按钮，上下两个窗口分别显示代码和页面效果。Dreamweaver自动为新建的文档生成一个默认标题——UntitledDocument，它在HTML中的源文件为“<title>无标题文档</title>”。根据HTML的语法，被包含在“<title>与</title>”之间的字符串就会被HTML解释器解释为HTML标题。例如：HTML源文件为“<title>我的中学生活</title>”，则网页标题栏会显示为“我的中学生活”。4定义本地站点制作网站的第一步要定义站点。站点是存放所有网页以及相关图片、动画等媒体文件的文件夹。发布站点时，需要把站点文件夹中的所有内容上传到服务器上。选择“站点(Site)——管理站点（ManageSites)”。在“管理站点”对话框中单击“新建”，选择“站点”。在“站点定义(SiteDefinition)”对话框中的“基本”选项卡中定义站点名称为“myweb”。单击“下一步”，在出现的对话框中选择“否，我不想使用服务器技术”。单击“下一步”，选择“编辑我的计算机上的本地副本，完成后再上传到服务器”使用方式。单击文件夹图标，在本地计算机上选择或新建一个文件夹作为站点目录存放文件。单击“下一步”，在“您如何连接到远程服务器”选项中选择“无”。单击“下一步”，查看“站点定义总结”，完成站点创建。观察“文件”面板中是不是出现了“myweb”站点。如果有，说明myweb站点在本地创建成功；如果没有，重新定义站点。5创建网站首页网站的首页是网站的第一页，是一个网站的主索引页，是使浏览者了解网站概貌并引导其阅读重点内容的向导。首页设计要符合大多数人的审美和阅读习惯，结合运用色彩、线条、图形、图像等要素，呈现导航条、各种功能控件和内容等。在Photoshop中制作一幅写有网站名称“E动少年”和网站主题词“展现自我风采”的横幅(banner)图片，尺寸约为：778x160像素。准备一篇名为“我的小传”的文章，介绍自己的基本情况、兴趣、爱好、特长等。在“文件”面板的站点根目录“myweb”下，右击选择“新建文件”，命名为“index.htm”作为网站首页；新建文件夹，命名为“images”，保存首页中用到的图片文件。双击“index.htm”文件，进入网页编辑状态。在“文档工具栏”上的“标题”输入框中输入页面标题，可以用网站名称“E动少年”作为首页标题。素材准备HTML具有很强的表格功能，可以方便地创建出各种规格的表格，并能对表格进行修饰。借助表格，可以实现网页的精细排版。通过设置表格的宽度、高度、比例大小等属性，可以将格内各种数据（文本、图像、链接及其他表格等）精确定位，使页面版式整齐美观。用表格布局首页在Dreamweaver中，既可以直接将文本置于网页中，也可以将文本置入表格或者图层中。文本的直接插入与在写字板或Word中插入文本相似，单击网页编辑窗口，在光标处输入文本。也可以先在Word等文本编辑软件中将文本编辑好，再复制粘贴到Dreamweaver中。依次在表格左侧5行中输入栏目标题“首页、我的相册、美文推荐、我的作品、心情日记”，并在属性面板中设置字体、字号、颜色等。在表格第二行的中间列，填入“我的小传”文字内容，设置标题和正文的字体、字号、颜色、格式等。添加首页内容图片能装饰网页，HTML语言中插入图片是通过链接调用图片文件实现的。网页中使用的图像可以是GIF、JPEG、BMP、TIFF、PNG等格式的图像文件，其中使用最广泛的是GIF和JPEG两种格式。将光标定位在表格的第一行，选择“插入——图像”，在“选择图像源文件”对话框中选取准备好的网页横幅图片文件，将网页横幅图片插入网页中。如果图片大小不合适可以选中图片，在属性面板中设置图片的宽度和高度。插入图像我们还可以为网页设置背景。网页背景可以是颜色，也可以链接调用图像文件。将光标定位在网页文本或空白处，在“页面属性”窗口中，单击“背景颜色”图标，打开颜色选择器选取喜欢的颜色。如果背景要