整站开发详细步骤

2023-12-06 20:40
文章标签 步骤 开发 详细 整站

本文主要是介绍整站开发详细步骤,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

第一节:项目搭建
打开UI设计图,浏览页面主要内容,熟悉结构
开发整站的两种方式:1、从头往下依次把每个盒子写完。(常用)2、先把整站的布局搞定,然后把每个布局盒子中的子元素补齐:(模块化)
整站开发目录结构:
所有文件放在:目标网站名称
所有图片放在:image
所有css文件放在:css
所有js文件放在:js
整站的入口:index.html
第二节:css的初始化(cssReset)
可参考:https://github.com/yui/yui3/blob/25264e3629b1c07fb779d203c4a25c0879ec862c/src/cssreset/css/cssreset.css
初始化文件编辑完成后在html文件中使用<link rel="stylesheet"href=“css/cssReset.css”>语句进行引用。
第三节:页面的版心和通栏
使用FW测量版心间距,拉出标尺(辅助线)对齐版心最左边,右边同。按shift得到间距。
写好页面顶部代码,新建index.css文件存放页面样式代码。
取背景颜色:使用FW滴管工具(快捷键i),鼠标移到滴管图标旁可查看颜色相应十六进制码。
测量高度(快捷键m)
第四节:完成top部分代码
双击FW中文字可得到字体大小和类型
使用ul和li标签进行top上的文字编写并在cssReset文件中添加a标签的初始化。
注意浮动设置与间隙设置。
第五节:精灵图设置
精灵图:css sprit
用于将网站上的一些小图片管理到一个大图片中。
制作精灵图需注意:
1、一定是一些小图片(最好是不太会发生变化)
2、精灵图在制作的时候宽度一定要大于最大的图片的宽度
3、图片与图片之间要有空隙
4、在精灵图制作完成之后一定要将精灵图的下方留出足够的位置以便扩展。
具体制作方法为:在FW中建新文件,用抠图工具将所需图案抠下导出,再导入到新文件里。
精灵图的使用:一般结合background使用(index.html中在a标签与li标签之间插入s标签使用精灵图)如图所示为在index.css文件中使用精灵图的代码:
在这里插入图片描述
第六节:logo的编写和搜索引擎的优化
用firework测量好logo的长宽再用代码编写。

搜索引擎的优化:以便搜索引擎识别此网站关键词。
在这里插入图片描述
第七节:logo输入框:
在这里插入图片描述
第八节:导航
先测量导航高度,写入文字行,利用float:left设置浮动使文字并排显示,测量文字选项的间距(padding:上 右 下 左)
在这里插入图片描述
注:a标签不能继承父标签li的字体样式设置,因此设置时需要另建一个。
导航使用无序链表建立。
点击触发的效果使用鼠标移入事件:
在这里插入图片描述
第九节:banner
先测量好各个板块距离,编写背景模块,再加入文字。
banner部分标题可用h2标签。
第十节:

板块间的间隙可用margin-bottom或margin-top完成。
居中设置可用:margin:0 auto;
在这里插入图片描述

这篇关于整站开发详细步骤的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/463247

相关文章

QT移植到RK3568开发板的方法步骤

《QT移植到RK3568开发板的方法步骤》本文主要介绍了QT移植到RK3568开发板的方法步骤,文中通过图文示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录前言一、获取SDK1. 安装依赖2. 获取SDK资源包3. SDK工程目录介绍4. 获取补丁包二

使用Dify访问mysql数据库详细代码示例

《使用Dify访问mysql数据库详细代码示例》:本文主要介绍使用Dify访问mysql数据库的相关资料,并详细讲解了如何在本地搭建数据库访问服务,使用ngrok暴露到公网,并创建知识库、数据库访... 1、在本地搭建数据库访问的服务,并使用ngrok暴露到公网。#sql_tools.pyfrom

java导出pdf文件的详细实现方法

《java导出pdf文件的详细实现方法》:本文主要介绍java导出pdf文件的详细实现方法,包括制作模板、获取中文字体文件、实现后端服务以及前端发起请求并生成下载链接,需要的朋友可以参考下... 目录使用注意点包含内容1、制作pdf模板2、获取pdf导出中文需要的文件3、实现4、前端发起请求并生成下载链接使

基于Python开发PDF转PNG的可视化工具

《基于Python开发PDF转PNG的可视化工具》在数字文档处理领域,PDF到图像格式的转换是常见需求,本文介绍如何利用Python的PyMuPDF库和Tkinter框架开发一个带图形界面的PDF转P... 目录一、引言二、功能特性三、技术架构1. 技术栈组成2. 系统架构javascript设计3.效果图

IDEA连接达梦数据库的详细配置指南

《IDEA连接达梦数据库的详细配置指南》达梦数据库(DMDatabase)作为国产关系型数据库的代表,广泛应用于企业级系统开发,本文将详细介绍如何在IntelliJIDEA中配置并连接达梦数据库,助力... 目录准备工作1. 下载达梦JDBC驱动配置步骤1. 将驱动添加到IDEA2. 创建数据库连接连接参数

2025最新版Python3.13.1安装使用指南(超详细)

《2025最新版Python3.13.1安装使用指南(超详细)》Python编程语言自诞生以来,已经成为全球最受欢迎的编程语言之一,它简单易学易用,以标准库和功能强大且广泛外挂的扩展库,为用户提供包罗... 目录2025最新版python 3.13.1安装使用指南1. 2025年Python语言最新排名2.

JAVA SE包装类和泛型详细介绍及说明方法

《JAVASE包装类和泛型详细介绍及说明方法》:本文主要介绍JAVASE包装类和泛型的相关资料,包括基本数据类型与包装类的对应关系,以及装箱和拆箱的概念,并重点讲解了自动装箱和自动拆箱的机制,文... 目录1. 包装类1.1 基本数据类型和对应的包装类1.2 装箱和拆箱1.3 自动装箱和自动拆箱2. 泛型2

在VSCode中本地运行DeepSeek的流程步骤

《在VSCode中本地运行DeepSeek的流程步骤》本文详细介绍了如何在本地VSCode中安装和配置Ollama和CodeGPT,以使用DeepSeek进行AI编码辅助,无需依赖云服务,需要的朋友可... 目录步骤 1:在 VSCode 中安装 Ollama 和 CodeGPT安装Ollama下载Olla

Java中使用注解校验手机号格式的详细指南

《Java中使用注解校验手机号格式的详细指南》在现代的Web应用开发中,数据校验是一个非常重要的环节,本文将详细介绍如何在Java中使用注解对手机号格式进行校验,感兴趣的小伙伴可以了解下... 目录1. 引言2. 数据校验的重要性3. Java中的数据校验框架4. 使用注解校验手机号格式4.1 @NotBl

一文详解kafka开启kerberos认证的完整步骤

《一文详解kafka开启kerberos认证的完整步骤》这篇文章主要为大家详细介绍了kafka开启kerberos认证的完整步骤,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、kerberos安装部署二、准备机器三、Kerberos Server 安装1、配置krb5.con